Move to Next.js, project restructure

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [["next/babel"]],
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    ["babel-plugin-styled-components"]
+  ]
+}

.dockerignore

@@ -1,6 +1,19 @@
 .git/
+.github/
+
 node_modules/
-lib/
-dist/
+
+build/
+
 coverage/
-pnpm-debug.log
+
+**/.DS_Store
+
+**/npm-debug.log*
+**/yarn-debug.log*
+**/yarn-error.log*
+**/pnpm-debug.log*
+
+**/Dockerfile
+**/docker-compose.yml
+**/docker-compose.override.yml

.eslintrc.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   extends: [],
-  ignorePatterns: ["node_modules", "lib", "dist", "coverage", "!.eslintrc.js"],
+  ignorePatterns: ["node_modules", "build", "coverage", "!.eslintrc.js"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     createDefaultProgram: true,
@@ -258,6 +258,7 @@ module.exports = {
     "unicorn/no-hex-escape": "warn",
     "unicorn/no-new-buffer": "error",
     "unicorn/no-unused-properties": "warn",
+    // "unicorn/no-useless-undefined": "warn",
     "unicorn/prefer-add-event-listener": "error",
     "unicorn/prefer-dataset": "error",
     "unicorn/prefer-event-key": "error",
@@ -266,6 +267,7 @@ module.exports = {
     "unicorn/prefer-node-append": "warn",
     "unicorn/prefer-node-remove": "warn",
     "unicorn/prefer-number-properties": "warn",
+    // "unicorn/prefer-optional-catch-binding": "warn",
     "unicorn/prefer-query-selector": "warn",
     "unicorn/prefer-reflect-apply": "warn",
     // "unicorn/prefer-replace-all": "warn",
@@ -278,7 +280,7 @@ module.exports = {
   },
   settings: {
     "import/extensions": [".ts", ".tsx", ".d.ts", ".js", ".jsx"],
-    "import/external-module-folders": ["node_modules", "node_modules/@types"],
+    "import/external-module-folders": ["node_modules"],
     "import/parsers": {
       "@typescript-eslint/parser": [".ts", ".tsx", ".d.ts"],
     },

.gitignore

@@ -1,6 +1,14 @@
-node_modules
-lib
-dist
-coverage
-pnpm-debug.log
+/node_modules/
+
+/build/
+
+/coverage/
+
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
 docker-compose.override.yml

.prettierignore

@@ -0,0 +1,2 @@
+build
+coverage

Dockerfile

@@ -1,23 +1,34 @@
-FROM node:lts-alpine
+FROM node:lts-alpine AS builder
 
 RUN npm i -g pnpm
 
 WORKDIR /app
 RUN chown -R node:node /app
 USER node
 
-COPY package.json pnpm-lock.yaml /app/
+COPY package.json pnpm-lock.yaml ./
 RUN pnpm install
 
-COPY . /app/
+COPY . .
+
 RUN pnpm run build
 
 RUN pnpm prune --prod
 
-ENV APP_PORT 8000
+FROM node:lts-alpine
+
+WORKDIR /app
+RUN chown -R node:node /app
+USER node
+
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/build ./build
+COPY --from=builder /app/next.config.js ./next.config.js
+COPY --from=builder /app/public ./public
+
 ENV NODE_ENV production
 ENV NODE_OPTIONS --max-http-header-size=81920
 
-EXPOSE 8000
+EXPOSE 3000
 
-CMD [ "node", "./lib/ssr/server.js" ]
+CMD [ "node_modules/.bin/next", "start" ]

src/core/components/ErrorBoundary.tsx → common/ErrorBoundary.tsx

@@ -6,8 +6,10 @@ export type ErrorBoundaryProps = {
 }
 
 export type ErrorBoundaryState = {
-  error?: Error
-  info?: ErrorInfo
+  caughtError?: {
+    error: Error
+    info: ErrorInfo
+  }
 }
 
 export class ErrorBoundary extends Component<
@@ -17,16 +19,17 @@ export class ErrorBoundary extends Component<
   state: ErrorBoundaryState = {}
 
   componentDidCatch(error: Error, info: ErrorInfo) {
-    console.error(error, info)
-
-    this.setState({ error, info })
+    this.setState({ caughtError: { error, info } })
   }
 
   render() {
-    if (this.state.error && this.state.info) {
-      return <ErrorPage error={this.state.error} info={this.state.info} />
+    const { children } = this.props
+    const { caughtError } = this.state
+
+    if (caughtError) {
+      return <ErrorPage {...caughtError} />
     }
 
-    return this.props.children
+    return children
   }
 }

common/ErrorPage.tsx

@@ -0,0 +1,118 @@
+import Head from "next/head"
+import Link from "next/link"
+import Router from "next/router"
+import React, { ErrorInfo } from "react"
+import styled, { css } from "styled-components"
+import { CodeBlockContainer } from "../modules/markdown/styles/CodeBlockContainer"
+import { Button } from "./input/Button"
+
+const Container = styled.div`
+  height: 100%;
+
+  overflow: auto;
+
+  padding: 64px 32px 0;
+
+  ${({ theme }) =>
+    theme.appearance.mobile &&
+    css`
+      padding: 32px 16px;
+    `};
+`
+
+const Header = styled.h1`
+  margin: 0;
+
+  color: ${({ theme }) => theme.header.primary};
+  font-size: 28px;
+`
+
+const Message = styled.p`
+  margin: 16px 0;
+
+  max-width: 600px;
+
+  font-size: 16px;
+  line-height: 1.375;
+`
+
+const ButtonContainer = styled.div`
+  margin: 0 -8px;
+`
+
+const ErrorDetails = styled(CodeBlockContainer)`
+  max-width: 1200px;
+  margin-bottom: 32px;
+`
+
+const STATUS_CODES: Map<number, string> = new Map([
+  [400, "Bad request"],
+  [403, "Forbidden"],
+  [404, "Page not found"],
+  [405, "Method not allowed"],
+  [500, "Internal server error"],
+])
+
+export type ErrorPageProps = {
+  error?: Error
+  info?: ErrorInfo
+  title?: string
+  statusCode?: number
+}
+
+export function ErrorPage(props: ErrorPageProps) {
+  const { error, info, title, statusCode } = props
+
+  const message =
+    title ??
+    (statusCode && STATUS_CODES.has(statusCode)
+      ? `Error ${statusCode}: ${STATUS_CODES.get(statusCode)}`
+      : "An unexpected error has occurred")
+
+  return (
+    <Container>
+      <Head>
+        <title key="title">{message}</title>
+      </Head>
+      <Header>{message}</Header>
+      <Message>
+        If you didn&apos;t expect this, please report it on the{" "}
+        <a href="/discord" target="blank" rel="noopener">
+          Discord support server
+        </a>
+        , or create an issue on the{" "}
+        <a
+          href="https://github.com/discohook/discohook"
+          target="blank"
+          rel="noopener"
+        >
+          GitHub repository
+        </a>
+        .
+      </Message>
+      <ButtonContainer>
+        {statusCode && (
+          <Link href="/">
+            <Button>Home</Button>
+          </Link>
+        )}
+        {!statusCode && (
+          <Button onClick={() => Router.reload()}>Refresh</Button>
+        )}
+      </ButtonContainer>
+      {error && info && (
+        <>
+          <Message>
+            Technical details are provided below (please forward this):
+          </Message>
+          <ErrorDetails>
+            {String(error)}
+            {"\n"}
+            {error.stack?.replace(String(error), "").replace(/^\n|\n$/g, "")}
+            {info.componentStack}
+          </ErrorDetails>
+        </>
+      )}
+    </Container>
+  )
+}