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

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

Author: damassi

.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.js

@@ -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/main.ts

@@ -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"]

.storybook/preview.js

@@ -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"]

Dockerfile

@@ -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")