Merge pull request #1698 from Shopify/multi-build-support

Multi-build support (cjs, esm, esnext) for all quilt packages

.eslintignore

@@ -1,7 +1,9 @@
 node_modules
 coverage
-**/node_modules/*
-**/packages/*.js
-*.d.ts
-**/templates/*
-**/dummy/**
+templates
+gems/**/dummy
+packages/*/build
+**/*.d.ts
+**/*.js
+**/*.esnext
+**/*.mjs

.eslintrc.js

@@ -7,11 +7,7 @@ module.exports = {
     'plugin:@shopify/prettier',
   ],
   parserOptions: {
-    project: [
-      'packages/tsconfig.json',
-      'packages/tsconfig_base.json',
-      'test/tsconfig.eslint.json',
-    ],
+    project: ['./tsconfig.eslint.json'],
   },
   rules: {
     'jest/valid-expect-in-promise': 'off',
@@ -34,7 +30,6 @@ module.exports = {
     '@typescript-eslint/unbound-method': 'off',
     '@typescript-eslint/no-misused-promises': 'off',
     '@typescript-eslint/await-thenable': 'off',
-    '@typescript-eslint/no-misused-promises': 'off',
     'import/no-extraneous-dependencies': 'error',
   },
   overrides: [
@@ -44,6 +39,7 @@ module.exports = {
         '**/test/**/*.tsx',
         '**/tests/**/*.ts',
         '**/tests/**/*.tsx',
+        '**/sewing-kit.config.ts',
       ],
       rules: {
         // We disable `import/no-extraneous-dependencies` for test files because it

.github/workflows/node-ci.yml

@@ -31,6 +31,16 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
+      - uses: actions/cache@v2
+        id: sewing-kit-cache
+        name: Restore sewing-kit cache
+        with:
+          path: |
+            .sewing-kit/
+          key: ${{ runner.os }}-sewing-kit-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-sewing-kit-
+
       - name: 📦 Install dependencies
         run: yarn --production=false --frozen-lockfile
 
@@ -67,11 +77,22 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
+      - uses: actions/cache@v2
+        id: build-cache
+        name: Restore build cache
+        with:
+          path: |
+            .sewing-kit/
+            ./packages/*/build/
+          key: ${{ runner.os }}-build-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+
       - name: 📦 Install dependencies
         run: yarn --production=false --frozen-lockfile
 
       - name: 🔨 Build
-        run: yarn build --verbose
+        run: yarn build
 
   node-e2e-tests:
     runs-on: ubuntu-latest
@@ -101,14 +122,29 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
+      - uses: actions/cache@v2
+        id: build-cache
+        name: Restore build cache
+        with:
+          # index packages files need to be cached for e2e tests
+          path: |
+            .sewing-kit/
+            ./packages/*/build/
+            ./packages/*/*.esnext
+            ./packages/*/*.mjs
+            ./packages/*/*.js
+          key: ${{ runner.os }}-build-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+
       - name: 📦 Install dependencies
         run: yarn --production=false --frozen-lockfile
 
       - name: 🔨 Build
-        run: yarn build --verbose
+        run: yarn build
 
       - name: E2E tests
-        run: yarn test:ci --testPathPattern react-server address
+        run: yarn test --debug "(address|react-server)"
 
   node-unit-tests:
     runs-on: ubuntu-latest
@@ -139,8 +175,19 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
+      - uses: actions/cache@v2
+        id: build-cache
+        name: Restore build cache
+        with:
+          path: |
+            .sewing-kit/
+            ./packages/*/build/
+          key: ${{ runner.os }}-build-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+
       - name: 📦 Install dependencies
         run: yarn --production=false --frozen-lockfile
 
       - name: Unit tests
-        run: yarn test:ci --testPathIgnorePatterns react-server address
+        run: yarn test:ci "^(?:(?!(address|react-server)).)*$"

.gitignore

@@ -2,10 +2,6 @@
 *.scss.d.ts
 *.graphql.d.ts
 
-#TS output
-packages/**/dist
-dist
-
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 
@@ -44,3 +40,18 @@ tmp
 **/test.log
 
 *.tsbuildinfo
+
+# Sewing-Kit builds and entrypoints
+.sewing-kit
+packages/*/build
+packages/*/*.esnext
+packages/*/*.mjs
+packages/*/*.d.ts
+packages/*/*.js
+!packages/*/.eslintrc.js
+
+## Remove me after sk-next migration
+packages/**/dist
+dist
+
+.package-build-cache

.prettierignore

@@ -1,6 +1,6 @@
 package.json
 node_modules
-dist
+packages/*/build
 coverage
 *.svg
 templates/*.md

.vscode/settings.json

@@ -23,6 +23,7 @@
     "build": true,
     "**/*.js": true
   },
+  "typescript.tsserver.maxTsServerMemory": 8000,
   "editor.formatOnSave": true,
   "prettier-stylelint.stylelintIntegration": true,
   "prettier-eslint.eslintIntegration": true,

README.md

@@ -14,7 +14,7 @@ These libraries compose together to help you create performant modern JS apps th
 
 ## Usage
 
-The Quilt repo is managed as a monorepo that is composed of 70 npm packages and one Ruby gem.
+The Quilt repo is managed as a monorepo that is composed of 69 npm packages and one Ruby gem.
 Each package/gem has its own `README.md` and documentation describing usage.
 
 ### Package Index

config/sewing-kit/index.ts

@@ -0,0 +1,63 @@
+import {
+  Package,
+  createComposedProjectPlugin,
+  createProjectTestPlugin,
+  createProjectBuildPlugin,
+} from '@sewing-kit/plugins';
+import {react} from '@sewing-kit/plugin-react';
+import {javascript, updateBabelPreset} from '@sewing-kit/plugin-javascript';
+import {typescript} from '@sewing-kit/plugin-typescript';
+import {buildFlexibleOutputs} from '@sewing-kit/plugin-package-flexible-outputs';
+import {} from '@sewing-kit/plugin-jest';
+
+import {addLegacyDecoratorSupport} from './plugin';
+
+export function quiltPackage({jestEnv = 'jsdom', useReact = false} = {}) {
+  return createComposedProjectPlugin<Package>('Quilt.Package', [
+    javascript(),
+    typescript(),
+    useReact && react(),
+    buildFlexibleOutputs(),
+    createProjectBuildPlugin('Quilt.PackageBuild', ({hooks}) => {
+      hooks.target.hook(({hooks}) => {
+        hooks.configure.hook(hooks => {
+          hooks.babelIgnorePatterns?.hook(ext => [
+            ...ext,
+            '**/test/**/*',
+            '**/tests/**/*',
+          ]);
+
+          hooks.babelConfig?.hook(addLegacyDecoratorSupport);
+        });
+      });
+    }),
+    createProjectTestPlugin('Quilt.PackageTest', ({hooks}) => {
+      hooks.configure.hook(hooks => {
+        hooks.jestEnvironment?.hook(() => jestEnv);
+
+        hooks.jestTransforms?.hook(transforms => ({
+          ...transforms,
+          '\\.(gql|graphql)$': 'jest-transform-graphql',
+        }));
+
+        hooks.jestWatchIgnore?.hook(patterns => [
+          ...patterns,
+          '<rootDir>/.*/tests?/.*fixtures',
+        ]);
+
+        hooks.babelConfig?.hook(addLegacyDecoratorSupport);
+
+        // Each test imports from react-testing during setup
+        hooks.babelConfig?.hook(
+          updateBabelPreset(
+            ['@babel/preset-react', require.resolve('@babel/preset-react')],
+            {
+              development: false,
+              useBuiltIns: true,
+            },
+          ),
+        );
+      });
+    }),
+  ]);
+}

config/sewing-kit/plugin.ts

@@ -0,0 +1,23 @@
+import {BabelConfig, updateBabelPlugin} from '@sewing-kit/plugin-javascript';
+
+export function addLegacyDecoratorSupport(config: BabelConfig) {
+  return updateBabelPlugin(
+    [
+      '@babel/plugin-proposal-class-properties',
+      require.resolve('@babel/plugin-proposal-class-properties'),
+    ],
+    {
+      loose: true,
+    },
+  )(config).then(babelConfig => {
+    return updateBabelPlugin(
+      [
+        '@babel/plugin-proposal-decorators',
+        require.resolve('@babel/plugin-proposal-decorators'),
+      ],
+      () => ({
+        legacy: true,
+      }),
+    )(babelConfig);
+  });
+}

packages/tsconfig_base.json → config/typescript/tsconfig.base.json

@@ -10,6 +10,7 @@
     "downlevelIteration": true,
     "esModuleInterop": true,
     "jsx": "react",
+    "isolatedModules": true,
     "strictNullChecks": true,
     "noImplicitAny": false,
     "sourceMap": false,
@@ -27,6 +28,6 @@
       "es2018",
       "esnext.asynciterable"
     ],
-    "typeRoots": ["../node_modules/@types"]
+    "typeRoots": ["../../node_modules/@types"]
   }
 }

documentation/guides/package-deprecation.md

@@ -16,7 +16,7 @@ Leaving only `README.md` and `CHANGELOG.md`
 
 ## 3. Delete TS package project reference
 
-Delete the line referencing the deprecate package from [`packages/tsconfig.json`](../../packages/tsconfig.json)
+Delete the line referencing the deprecate package from [`tsconfig.json`](../../tsconfig.json)
 
 ## 4. Global search deprecate package in quilt
 

gems/quilt_rails/test/support/generator_test_helpers.rb

@@ -12,7 +12,7 @@ def provide_existing_app_config_file
   end
 
   def provide_existing_sewing_kit_config_file
-    copy_to_generator_root("config", "sewing-kit.config.ts")
+    copy_to_generator_root("config", "sewing-kit.testconfig.ts")
   end
 
   private