Use SWC instead of Babel in Next (#2063)

.gitignore

@@ -122,6 +122,7 @@ npm-shrinkwrap.json
 .volumes
 
 cypress
+!cypress/local.sh
 
 packages/web/app/next.config.mjs
 packages/web/app/environment-*.mjs

cypress/local.sh

@@ -0,0 +1,32 @@
+#/bin/sh
+
+echo "💀 Killing all running Docker containers..."
+docker kill $(docker ps -q)
+
+echo "🧹 Clearing existing Docker volumes..."
+rm -rf ../docker/.hive || true
+
+echo "✨ Clearing unused Docker images and volumes..."
+docker system prune -f
+
+echo "🔨 Build services and libraries for running locally..."
+pnpm build
+
+echo "🌲 Configuring environment variables..."
+export COMMIT_SHA="local"
+export RELEASE="local"
+export BRANCH_NAME="local"
+export BUILD_TYPE=""
+export DOCKER_TAG=":local"
+export DOCKER_REGISTRY=""
+
+echo "📦 Building local Docker images..."
+cd ..
+docker buildx bake -f docker/docker.hcl build --load
+
+echo "⬆️ Running all local containers..."
+docker compose -f ./docker/docker-compose.community.yml -f ./docker/docker-compose.end2end.yml --env-file ./integration-tests/.env --env-file ./docker/.end2end.env up -d --wait
+
+echo "✅ E2E tests environment is ready. To run tests now, use:"
+echo ""
+echo "    HIVE_APP_BASE_URL=http://localhost:8080 pnpm test:e2e"

package.json

@@ -60,7 +60,7 @@
     "@graphql-codegen/typescript-resolvers": "3.2.0",
     "@graphql-inspector/cli": "3.4.13",
     "@manypkg/get-packages": "2.1.0",
-    "@next/eslint-plugin-next": "13.2.4",
+    "@next/eslint-plugin-next": "13.3.0",
     "@sentry/cli": "2.15.2",
     "@swc/core": "1.3.52",
     "@theguild/eslint-config": "0.9.0",
@@ -117,7 +117,8 @@
       "@apollo/federation@0.38.1": "patches/@apollo__federation@0.38.1.patch",
       "@octokit/webhooks-methods@3.0.1": "patches/@octokit__webhooks-methods@3.0.1.patch",
       "bullmq@3.10.4": "patches/bullmq@3.10.4.patch",
-      "workers-loki-logger@0.1.14": "patches/workers-loki-logger@0.1.14.patch"
+      "workers-loki-logger@0.1.14": "patches/workers-loki-logger@0.1.14.patch",
+      "@theguild/editor@1.2.5": "patches/@theguild__editor@1.2.5.patch"
     }
   }
 }

packages/web/app/.babelrc.js

@@ -1,6 +0,0 @@
-const { babelPlugin } = require('@graphql-codegen/gql-tag-operations-preset');
-
-module.exports = {
-  presets: [['next/babel']],
-  plugins: [[babelPlugin, { artifactDirectory: './src/gql' }]],
-};

packages/web/app/environment.ts

@@ -7,14 +7,10 @@ console.log('🌲 Loading environment variables...');
 // When the nextjs config is loaded by Next CLI Sentry has `Integrations` property.
 // When nextjs starts and the `environment.js` is loaded, the Sentry object doesn't have the `Integrations` property, it' under `Sentry.default` property.
 // Dealing with esm/cjs/default exports is a pain, we all feel that pain...
-function getSentryIntegrations() {
-  if ('default' in Sentry) {
-    const sentry: typeof Sentry = (Sentry as any).default;
-    return sentry.Integrations;
-  }
-
-  return Sentry.Integrations;
-}
+const Integrations =
+  'default' in Sentry
+    ? ((Sentry as any).default as typeof Sentry).Integrations
+    : Sentry.Integrations;
 
 // treat an empty string `''` as `undefined`
 const emptyString = <T extends zod.ZodType>(input: T) => {
@@ -255,7 +251,7 @@ Sentry.init({
   environment: config.environment,
   integrations: [
     // HTTP integration is only available on the server
-    new (getSentryIntegrations().Http)({
+    new Integrations.Http({
       tracing: true,
     }),
   ],

packages/web/app/next.config.mts

@@ -7,7 +7,7 @@ if (globalThis.process.env.BUILD !== '1') {
 }
 
 const withBundleAnalyzer = bundleAnalyzer({
-  enabled: process.env.ANALYZE === '1',
+  enabled: globalThis.process.env.ANALYZE === '1',
   openAnalyzer: true,
 });
 

packages/web/app/package.json

@@ -60,7 +60,7 @@
     "js-cookie": "3.0.1",
     "monaco-editor": "0.37.1",
     "monaco-themes": "0.4.4",
-    "next": "13.2.4",
+    "next": "13.3.0",
     "nextjs-cors": "2.1.2",
     "react": "18.2.0",
     "react-children-utilities": "2.9.0",
@@ -87,15 +87,15 @@
     "zod": "3.21.4"
   },
   "devDependencies": {
-    "@graphql-codegen/gql-tag-operations-preset": "2.1.0",
+    "@graphql-codegen/client-preset-swc-plugin": "0.1.3",
     "@graphql-typed-document-node/core": "3.2.0",
     "@hive/emails": "workspace:*",
     "@hive/server": "workspace:*",
-    "@next/bundle-analyzer": "13.2.4",
+    "@next/bundle-analyzer": "13.3.0",
     "@storybook/addon-essentials": "7.0.6",
     "@storybook/addon-interactions": "7.0.6",
     "@storybook/addon-links": "7.0.6",
-    "@storybook/addon-styling": "2.0.0",
+    "@storybook/addon-styling": "1.0.1",
     "@storybook/blocks": "7.0.6",
     "@storybook/nextjs": "7.0.6",
     "@storybook/react": "7.0.6",

packages/web/app/tsconfig.json

@@ -14,7 +14,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "jsxImportSource": "@emotion/react",
     "incremental": true
   },
   "include": ["next-env.d.ts", "modules.d.ts", "src", "pages", "environment.ts"],

packages/web/docs/next.config.js

@@ -73,4 +73,5 @@ export default withGuildDocs({
       permanent: true,
     },
   ],
+  swcMinify: true,
 });

packages/web/docs/package.json

@@ -8,11 +8,11 @@
     "dev": "next"
   },
   "dependencies": {
-    "@next/env": "13.2.4",
+    "@next/env": "13.3.0",
     "@radix-ui/react-tooltip": "1.0.5",
     "@theguild/components": "4.5.9",
     "clsx": "1.2.1",
-    "next": "13.2.4",
+    "next": "13.3.0",
     "next-themes": "*",
     "react": "18.2.0",
     "react-dom": "18.2.0",

patches/@theguild__editor@1.2.5.patch

@@ -0,0 +1,34 @@
+diff --git a/package.json b/package.json
+index 546590cae059dba903df796ff15647db23a5f0ac..97191d3e5426bdd25a827c305bc4245b1ca8cb0f 100644
+--- a/package.json
++++ b/package.json
+@@ -2,18 +2,23 @@
+   "name": "@theguild/editor",
+   "version": "1.2.5",
+   "license": "MIT",
+-  "main": "./dist/index.js",
++  "type": "module",
++  "main": "dist/index.js",
++  "module": "dist/index.js",
+   "exports": {
+     ".": {
+-      "import": "./dist/index.js",
+-      "types": "./dist/index.d.ts"
++      "import": {
++        "types": "./dist/index.d.ts",
++        "default": "./dist/index.js"
++      },
++      "default": {
++        "types": "./dist/index.d.ts",
++        "default": "./dist/index.js"
++      }
+     },
+     "./package.json": "./package.json"
+   },
+   "types": "./dist/index.d.ts",
+-  "files": [
+-    "dist"
+-  ],
+   "peerDependencies": {
+     "@monaco-editor/react": "^4",
+     "monaco-editor": "^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0 || ^0.28.0 || ^0.29.0 || ^0.30.0 || ^0.32.0 || ^0.34.0 || ^0.35.0 || ^0.36.0",

scripts/runify.ts

@@ -86,7 +86,6 @@ function isNext(pkg: any): boolean {
 }
 
 async function buildWithNext(cwd: string, additionalRequire: string | null) {
-  console.log('📦 Building local Docker images...');
   await fs.mkdirp(normalize(join(cwd, 'dist')));
   if (additionalRequire) {
     await tsup({