Use yarn pnp as module linker (#2252)

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

.github/workflows/build.yml

@@ -30,7 +30,7 @@ jobs:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-${{ matrix.node }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-18
+            ${{ runner.os }}-yarn-${{ matrix.node }}
       - name: Set up NodeJS
         uses: actions/setup-node@v3
         with:

.github/workflows/e2e.yml

@@ -66,7 +66,6 @@ jobs:
     needs: build-frontend
     runs-on: ubuntu-latest
     container:
-      # renovate: datasource=docker depName=cypress/browsers versioning=docker
       image: cypress/browsers:node16.14.2-slim-chrome103-ff102
       options: --user 1001 --shm-size=2g
     strategy:
@@ -78,22 +77,46 @@ jobs:
       - name: Check out repo
         uses: actions/checkout@v3
 
+      - name: Cache build
+        uses: actions/cache@v3.0.5
+        id: build-cache
+        with:
+          path: .next
+          key: build-${{ github.sha }}
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        if: steps.build-cache.outputs.cache-hit != 'true'
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+      - name: Cache yarn cache
+        uses: actions/cache@v3
+        id: yarn-cache
+        if: steps.build-cache.outputs.cache-hit != 'true'
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-16-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-16
+
+      - name: Install dependencies
+        if: steps.build-cache.outputs.cache-hit != 'true'
+        run: yarn install --immutable
+
       - name: Download built frontend
         uses: actions/download-artifact@master
         with:
           name: next-build
           path: .next
 
-      - uses: cypress-io/github-action@v4
-        with:
-          browser: ${{ matrix.browser }}
-          start: 'yarn start:ci'
-          parallel: true
-          record: true
-          group: "UI - ${{ matrix.browser }}"
-          wait-on: 'http://127.0.0.1:3001/'
-          wait-on-timeout: 120
-          install-command: yarn install --immutable --silent
+      - name: Run server
+        run: yarn start:ci &
+
+      - name: Wait for server
+        run: curl --max-time 120 http://127.0.0.1:3001/
+
+      - name: Run cypress
+        run: "yarn cy:run:${{ matrix.browser }} --record true --parallel --group \"UI - ${{ matrix.browser }}\""
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.yarnrc.yml

@@ -1,4 +1,4 @@
-nodeLinker: node-modules
+nodeLinker: pnp
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs

Dockerfile

@@ -28,7 +28,7 @@ COPY --chown=node .yarn/ .yarn/
 COPY --chown=node public/ public/
 COPY --chown=node --from=builder /usr/src/app/.next/ .next/
 USER node
-RUN yarn workspaces focus --all --production && rm -rf .yarn/cache
+RUN yarn workspaces focus --all --production
 
 EXPOSE 3001/tcp
 CMD ["/usr/local/bin/yarn", "start:for-real-backend"]

README.md

@@ -18,6 +18,7 @@ react and to improve it.
 ## Preparation
 
 You need at least Node 14 (we recommend Node 18) and [yarn](https://yarnpkg.com/).
+You MUST use yarn! There is no support for npm.
 
 ## Development mode
 

cypress.config.js

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+module.exports = {
+  e2e: {
+    defaultCommandTimeout: 15000,
+    video: false,
+    projectId: 'ht3vbo',
+
+    e2e: {
+      baseUrl: 'http://127.0.0.1:3001/',
+      specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}'
+    }
+  },
+};

cypress.config.ts

@@ -1,18 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { defineConfig } from 'cypress'
-
-export default defineConfig({
-  defaultCommandTimeout: 15000,
-  video: false,
-  projectId: 'ht3vbo',
-
-  e2e: {
-    baseUrl: 'http://127.0.0.1:3001/',
-    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}'
-  }
-})

cypress/tsconfig.json

@@ -11,7 +11,8 @@
     "types": [
       "cypress",
       "cypress-commands",
-      "cypress-file-upload"
+      "cypress-file-upload",
+      "node"
     ]
   },
   "include": [

jest.config.ts

@@ -12,18 +12,16 @@ const createJestConfig = nextJest({
 
 // Add any custom config to be passed to Jest
 const customJestConfig = {
-  setupFilesAfterEnv: [
-    '@testing-library/jest-dom/extend-expect'
-  ],
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
   moduleNameMapper: {
     // Handle module aliases (this will be automatically configured for you soon)
     '^@/components/(.*)$': '<rootDir>/src/components/$1',
     // fix uuid / jest problem https://github.com/uuidjs/uuid/pull/616
-    '^uuid$': require.resolve('uuid'),
+    '^uuid$': require.resolve('uuid')
   },
-  roots: ["<rootDir>/src"],
+  roots: ['<rootDir>/src'],
   testEnvironment: 'jsdom',
-  testPathIgnorePatterns: ["/node_modules/", "/cypress/"]
+  testPathIgnorePatterns: ['/node_modules/', '/cypress/']
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

netlify/deploy-main.sh

@@ -1,14 +1,17 @@
 #!/bin/bash
 
-# SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+#
+# SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
 #
 # SPDX-License-Identifier: AGPL-3.0-only
+#
 
-json=$(yarn netlify deploy --build --prod --json --message "${1:0:8}: $2")
+cd "$(dirname "$0")"
+json=$(./netlify-cli.sh deploy --build --prod --json --message "${1:0:8}: $2")
 
 if [ $? -ne 0 ]; then
     echo "Error while executing netlify! Will try again without json..."
-    yarn netlify deploy --build --prod --message "${1:0:8}: $2"
+    ./netlify-cli.sh deploy --build --prod --message "${1:0:8}: $2"
     exit 1
 fi
 

netlify/deploy-pr.sh

@@ -1,14 +1,17 @@
 #!/bin/bash
 
-# SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+#
+# SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
 #
 # SPDX-License-Identifier: AGPL-3.0-only
+#
 
-json=$(yarn netlify deploy --build --context deploy-preview --alias "$1" --json --message "[#$1] $2")
+cd "$(dirname "$0")"
+json=$(./netlify-cli.sh deploy --build --context deploy-preview --alias "$1" --json --message "[#$1] $2")
 
 if [ $? -ne 0 ]; then
     echo "Error while executing netlify! Will try again without json..."
-    yarn netlify deploy --build --context deploy-preview --alias "$1" --message "[#$1] $2"
+    ./netlify-cli.sh deploy --build --context deploy-preview --alias "$1" --message "[#$1] $2"
     exit 1
 fi
 

netlify/netlify-cli.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+#
+# SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+#
+# SPDX-License-Identifier: AGPL-3.0-only
+#
+
+NETLIFY_VERSION=10.13.0
+exec npx --yes netlify-cli@${NETLIFY_VERSION}

next.config.js

@@ -83,13 +83,17 @@ const rawNextConfig = {
         }
       ]
     })
+
+    const wasmModulePath = path.dirname(require.resolve('@hpcc-js/wasm'))
+    const emojiPickerDataModulePath = path.dirname(require.resolve('emoji-picker-element-data/en/emojibase/data.json'))
+
     config.plugins.push(
       new CopyWebpackPlugin({
         patterns: [
-          { from: path.join(__dirname, 'node_modules/@hpcc-js/wasm/dist/graphvizlib.wasm'), to: 'static/js' },
-          { from: path.join(__dirname, 'node_modules/@hpcc-js/wasm/dist/expatlib.wasm'), to: 'static/js' },
+          { from: path.join(wasmModulePath, 'graphvizlib.wasm'), to: 'static/js' },
+          { from: path.join(wasmModulePath, 'expatlib.wasm'), to: 'static/js' },
           {
-            from: path.join(__dirname, 'node_modules/emoji-picker-element-data/en/emojibase/data.json'),
+            from: emojiPickerDataModulePath,
             to: 'static/js/emoji-data.json'
           }
         ]

package.json

@@ -40,7 +40,9 @@
   },
   "dependencies": {
     "@codemirror/autocomplete": "6.1.0",
+    "@codemirror/commands": "6.0.1",
     "@codemirror/lang-markdown": "6.0.1",
+    "@codemirror/language": "6.2.1",
     "@codemirror/language-data": "6.1.0",
     "@codemirror/state": "6.1.0",
     "@codemirror/theme-one-dark": "6.0.0",
@@ -50,6 +52,8 @@
     "@hedgedoc/markdown-it-image-size": "1.0.3",
     "@hedgedoc/markdown-it-task-lists": "1.0.5",
     "@hedgedoc/realtime": "0.1.1",
+    "@hpcc-js/wasm": "1.12.8",
+    "@lezer/common": "1.0.0",
     "@matejmazur/react-katex": "3.1.3",
     "@mrdrogdrog/optional": "0.1.2",
     "@react-hook/resize-observer": "1.2.6",
@@ -62,8 +66,11 @@
     "copy-webpack-plugin": "11.0.0",
     "cross-env": "7.0.3",
     "d3-graphviz": "4.1.1",
+    "d3-selection": "2.0.0",
     "deepmerge": "4.2.2",
     "diff": "5.1.0",
+    "dom-serializer": "2.0.0",
+    "domhandler": "5.0.3",
     "dompurify": "2.3.10",
     "emoji-picker-element": "1.12.1",
     "emoji-picker-element-data": "1.3.0",
@@ -72,6 +79,7 @@
     "flowchart.js": "1.17.1",
     "fork-awesome": "1.2.0",
     "highlight.js": "11.6.0",
+    "htmlparser2": "8.0.1",
     "i18next": "21.8.16",
     "i18next-browser-languagedetector": "6.1.4",
     "i18next-resources-to-backend": "1.0.0",
@@ -118,6 +126,7 @@
     "vega-embed": "6.21.0",
     "vega-lite": "5.4.0",
     "words-count": "2.0.2",
+    "ws": "8.8.1",
     "y-codemirror.next": "0.3.2",
     "y-protocols": "1.0.5",
     "yjs": "13.5.41"
@@ -125,12 +134,14 @@
   "devDependencies": {
     "@next/bundle-analyzer": "12.2.2",
     "@testing-library/cypress": "8.0.3",
+    "@testing-library/dom": "8.16.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "14.3.0",
     "@types/d3-graphviz": "2.6.7",
     "@types/diff": "5.0.2",
     "@types/dompurify": "2.3.3",
+    "@types/jest": "28.1.6",
     "@types/js-yaml": "4.0.5",
     "@types/luxon": "3.0.0",
     "@types/markdown-it": "12.2.3",
@@ -142,9 +153,11 @@
     "@types/react-bootstrap-typeahead": "5.1.8",
     "@types/react-dom": "18.0.6",
     "@types/sass": "1.43.1",
+    "@types/testing-library__jest-dom": "5.14.5",
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "5.31.0",
     "@typescript-eslint/parser": "5.31.0",
+    "csstype": "3.1.0",
     "cypress": "10.3.1",
     "cypress-commands": "3.0.0",
     "cypress-fill-command": "1.0.2",
@@ -160,7 +173,6 @@
     "eslint-plugin-testing-library": "5.5.1",
     "jest": "28.1.3",
     "jest-environment-jsdom": "28.1.3",
-    "netlify-cli": "10.13.0",
     "prettier": "2.7.1",
     "react-test-renderer": "18.2.0",
     "ts-loader": "9.3.1",

renovate.json

@@ -94,13 +94,13 @@
   "regexManagers": [
     {
       "fileMatch": [
-        "\\.yml$",
-        "\\.yaml$"
+        "netlify-cli.sh$"
       ],
       "matchStrings": [
-        "# renovate: datasource=(?<datasource>.*?) depName=(?<depName>.*?)( versioning=(?<versioning>.*?))?\\s+\\S+:\\s+\"?[^:]+:(?<currentValue>[^\"]*?)\"?\\s"
+        "NETLIFY_VERSION=(?<currentValue>.*?)\\n"
       ],
-      "versioningTemplate": "{{#if versioning}}{{{versioning}}}{{else}}semver{{/if}}"
+      "datasourceTemplate" : "npm",
+      "depNameTemplate" : "netlify-cli"
     }
   ]
 }

tsconfig.json

@@ -13,7 +13,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "types": ["node", "@testing-library/jest-dom",  "@types/jest"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules", "cypress", "cypress.config.ts"]