Merge pull request #14945 from artsy/damassi/feat/rsbuild-2

feat(compiler): Add RSBuild and remove Webpack, optimize JS bundles, speed up CI

.circleci/config.yml

@@ -65,7 +65,7 @@ jobs:
       - run:
           name: Run Jest Tests
           command: |
-            yarn jest --reporters=default --maxWorkers 2 --reporters=jest-junit --shard=$(expr $CIRCLE_NODE_INDEX + 1)/$CIRCLE_NODE_TOTAL
+            yarn jest --reporters=default --maxWorkers 4 --reporters=jest-junit --shard=$(expr $CIRCLE_NODE_INDEX + 1)/$CIRCLE_NODE_TOTAL
           environment:
             JEST_JUNIT_OUTPUT_DIR: reports/junit
             JEST_JUNIT_ADD_FILE_ATTRIBUTE: "true"
@@ -85,7 +85,7 @@ jobs:
       - run:
           name: Run Legacy Jest Tests
           command: |
-            yarn jest-enzyme --maxWorkers 2 --reporters=default --reporters=jest-junit --shard=$(expr $CIRCLE_NODE_INDEX + 1)/$CIRCLE_NODE_TOTAL
+            yarn jest-enzyme --maxWorkers 4 --reporters=default --reporters=jest-junit --shard=$(expr $CIRCLE_NODE_INDEX + 1)/$CIRCLE_NODE_TOTAL
           environment:
             JEST_JUNIT_OUTPUT_DIR: reports/junit
             JEST_JUNIT_ADD_FILE_ATTRIBUTE: "true"

.dockerignore

@@ -30,7 +30,6 @@
 !.nvmrc
 !.prettierignore
 !apollo.config.js
-!babel.config.js
 !dangerfile.ts
 !package.json
 !relay.config.js

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   parser: "@typescript-eslint/parser",
-
+  ignorePatterns: ["src/__generated__/**/*"],
   plugins: [
     "react-hooks",
     "@typescript-eslint",

.gitignore

@@ -29,7 +29,6 @@ yalc.lock
 /node_modules
 /public
 /src/public/assets
-/src/public/assets
 /storybook-static
 node_modules
 

.storybook/main.ts

@@ -0,0 +1,38 @@
+import path from "path"
+import { StorybookConfig } from "storybook-react-rsbuild"
+import { mergeRsbuildConfig } from "@rsbuild/core"
+
+const config: StorybookConfig = {
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  stories: ["../src/**/*.story.tsx"],
+  typescript: {
+    // Disable docgeneration due to TypeScript 2.3.x incompatability.
+    // TODO: Fix this once https://github.com/styleguidist/react-docgen-typescript/issues/356
+    // is addressed
+    reactDocgen: false,
+  },
+  framework: {
+    name: "storybook-react-rsbuild",
+    options: {
+      builder: {
+        environment: "client",
+      },
+    },
+  },
+
+  rsbuildFinal: config => {
+    return mergeRsbuildConfig(config, {
+      tools: {
+        swc: {
+          jsc: {
+            baseUrl: path.resolve(process.cwd(), "src"),
+          },
+        },
+      },
+    })
+  },
+
+  docs: {},
+}
+
+export default config

.storybook/preview.js

@@ -3,6 +3,7 @@ import { MediaContextProvider } from "Utils/Responsive"
 import { createRelaySSREnvironment } from "System/Relay/createRelaySSREnvironment"
 import { SystemContextProvider } from "System/Contexts/SystemContext"
 import { track } from "react-tracking"
+import { createBrowserRouter, makeRouteConfig, Route } from "found"
 
 const { GlobalStyles } = injectGlobalStyles()
 
@@ -15,19 +16,29 @@ export const decorators = [
   Story => {
     const Tracked = track()(Story)
 
+    const BrowserRouter = createBrowserRouter({
+      routeConfig: makeRouteConfig(
+        <>
+          <Route path="*" Component={Tracked} />
+        </>
+      ),
+    })
+
     return (
       <SystemContextProvider relayEnvironment={relayEnvironment}>
         <Theme>
           <MediaContextProvider>
             <GlobalStyles />
-            <Tracked />
+            <BrowserRouter />
           </MediaContextProvider>
         </Theme>
       </SystemContextProvider>
     )
   },
 ]
 
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-}
+// FIXME: Migrate this: https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function
+// export const parameters = {
+//   actions: { argTypesRegex: "^on[A-Z].*" },
+// }
+export const tags = ["autodocs"]

Dockerfile

@@ -47,21 +47,16 @@ COPY --chown=deploy:deploy --from=builder-base /opt/node_modules.prod ./node_mod
 
 # Base code
 COPY --chown=deploy:deploy --from=builder-base /app/data ./data
-COPY --chown=deploy:deploy --from=builder-base /app/package.json .
+COPY --chown=deploy:deploy --from=builder-base /app/dist ./dist
+COPY --chown=deploy:deploy --from=builder-base /app/src ./src
 COPY --chown=deploy:deploy --from=builder-base /app/scripts ./scripts
-COPY --chown=deploy:deploy --from=builder-base /app/webpack ./webpack
+COPY --chown=deploy:deploy --from=builder-base /app/package.json .
 COPY --chown=deploy:deploy --from=builder-base /app/yarn.lock .
 
-# Client assets
-COPY --chown=deploy:deploy --from=builder-base /app/manifest.json .
-COPY --chown=deploy:deploy --from=builder-base /app/public ./public
-COPY --chown=deploy:deploy --from=builder-base /app/src ./src
-
-# Server assets
-COPY --chown=deploy:deploy --from=builder-base /app/server.dist.js .
-COPY --chown=deploy:deploy --from=builder-base /app/server.dist.js.map .
 
 ENTRYPOINT ["/usr/bin/dumb-init", "./scripts/load_secrets_and_run.sh"]
 
+ENV NODE_PATH=/app/src
+
 # TODO: Reduce production memory, this is not a concern
-CMD ["node", "--max_old_space_size=2048", "--heapsnapshot-signal=SIGUSR2", "--no-experimental-fetch", "./server.dist.js"]
+CMD ["node", "--max_old_space_size=2048", "--heapsnapshot-signal=SIGUSR2", "--no-experimental-fetch", "-r @swc-node/register", "./src/prod.ts"]

cypress/e2e/artwork.cy.js

@@ -1,9 +1,4 @@
 describe("/artwork/:id", () => {
-  // FIXME: test is being flakey and retries don't work in before hooks
-  // before(() => {
-  //   cy.visit("/artwork/pablo-picasso-guernica")
-  // })
-
   it("renders metadata", () => {
     cy.visit("/artwork/pablo-picasso-guernica")
 

cypress/e2e/search.cy.ts

@@ -3,7 +3,7 @@ import { visitWithStatusRetries } from "../helpers/visitWithStatusRetries"
 describe("Search", () => {
   it("/search?:query", () => {
     visitWithStatusRetries("/search?term=andy")
-    cy.get("#react-root").should("contain", "results for \u201Candy\u201D")
+    cy.get("#root").should("contain", "results for \u201Candy\u201D")
     cy.title().should("eq", "Search Results for 'andy' | Artsy")
   })
 })

docs/env_configuration.md

@@ -13,7 +13,7 @@ Force uses [shared configuration](https://github.com/artsy/README/blob/main/play
 
 1. Add the variable to your `.env.shared` file and [update the S3 version](https://github.com/artsy/README/blob/main/playbooks/development-environments.md#shared-configuration).
 2. Edit `src/Server/config.ts` to include default for your env variable. You can safely use `null` to indicate an empty variable.
-3. Edit `src/lib/setup_sharify.js` to export your env variable to the client runtime
+3. Edit `src/lib/bootstrapSharify.js` to export your env variable to the client runtime
 4. Edit `src/typings/sharify.d.ts` to type your env variable
 5. You can access it via `getENV([YOUR_VAR])` in client code
 6. Restart your local server

jest.config.js

@@ -1,4 +1,4 @@
-const { webpackEnv } = require("./webpack/webpackEnv")
+const path = require("path")
 
 module.exports = {
   cacheDirectory: ".cache/jest",
@@ -20,7 +20,45 @@ module.exports = {
   },
   transform: {
     "\\.(gql|graphql)$": "@graphql-tools/jest-transform",
-    "(ts|tsx|js|jsx)$": "babel-jest",
+    "(ts|tsx|js|jsx)$": [
+      "@swc/jest",
+      {
+        jsc: {
+          parser: {
+            syntax: "typescript",
+            tsx: true,
+            decorators: true,
+            dynamicImport: true,
+          },
+          transform: {
+            react: {
+              runtime: "automatic",
+            },
+          },
+          experimental: {
+            plugins: [
+              ["@swc/plugin-loadable-components", {}],
+              [
+                "@swc/plugin-styled-components",
+                {
+                  ssr: true,
+                  displayName: true,
+                },
+              ],
+              [
+                "@swc/plugin-relay",
+                {
+                  // Must be fully-resolved absolute path
+                  rootDir: path.resolve(process.cwd(), "src"),
+                  artifactDirectory: "__generated__",
+                  language: "typescript",
+                },
+              ],
+            ],
+          },
+        },
+      },
+    ],
   },
   watchPlugins: [
     "jest-watch-typeahead/filename",

jest.legacy.config.js

@@ -1,4 +1,4 @@
-const { webpackEnv } = require("./webpack/webpackEnv")
+const jestConfig = require("./jest.config")
 
 module.exports = {
   cacheDirectory: ".cache/jest",
@@ -23,7 +23,7 @@ module.exports = {
   },
   transform: {
     "\\.(gql|graphql)$": "@graphql-tools/jest-transform",
-    "(ts|tsx|js|jsx)$": "babel-jest",
+    "(ts|tsx|js|jsx)$": jestConfig.transform["(ts|tsx|js|jsx)$"],
   },
   watchPlugins: [
     "jest-watch-typeahead/filename",