fix: clean up webpack configs and package.json

- fixed react-i18n duplicated dependency - removed all unused dependencies - update webpack configs to use babel/preset-env and ensure the right plugins are loaded chore: fix issue with babel warnings when re-exporting types - refer to microsoft/TypeScript#35200 and babel/babel#10981
Shopify · Apr 19, 2021 · 758eba0 · 758eba0
1 parent fce6f3e
commit 758eba0
Show file tree

Hide file tree

Showing 19 changed files with 122 additions and 83 deletions.
diff --git a/packages/argo-host/package.json b/packages/argo-host/package.json
@@ -18,8 +18,7 @@
     "@shopify/polaris": "^4.19.0",
     "@shopify/react-web-worker": "^1.2.9",
     "@shopify/remote-ui-react": "^0.0.24",
-    "react": "^16.12.0",
-    "typescript": "^3.7.2"
+    "react": "^16.12.0"
   },
   "publishConfig": {
     "access": "restricted",

diff --git a/packages/argo-host/src/component-schemas/index.ts b/packages/argo-host/src/component-schemas/index.ts
@@ -5,18 +5,34 @@ export {appLinkSchema} from './app-link';
 export {subscriptionManagementSchema} from './subscription-management';
 
 export const extensionComponentsLoader: Record<ExtensionPoint, () => Promise<any>> = {
-  [ExtensionPoint.AppLink]: () => import('./app-link').then(module => module.appLinkSchema),
-  [ExtensionPoint.Playground]: () => import('./playground').then(module => module.playgroundSchema),
+  [ExtensionPoint.AppLink]: () =>
+    import(/* webpackChunkName: 'argo-app-link-components' */ './app-link').then(
+      module => module.appLinkSchema,
+    ),
+  [ExtensionPoint.Playground]: () =>
+    import(/* webpackChunkName: 'argo-playground-components' */ './playground').then(
+      module => module.playgroundSchema,
+    ),
 
   [ExtensionPoint.SubscriptionManagementAdd]: () =>
-    import('./subscription-management').then(module => module.subscriptionManagementSchema),
+    import(
+      /* webpackChunkName: 'argo-subscription-management-components' */ './subscription-management'
+    ).then(module => module.subscriptionManagementSchema),
   [ExtensionPoint.SubscriptionManagementCreate]: () =>
-    import('./subscription-management').then(module => module.subscriptionManagementSchema),
+    import(
+      /* webpackChunkName: 'argo-subscription-management-components' */ './subscription-management'
+    ).then(module => module.subscriptionManagementSchema),
   [ExtensionPoint.SubscriptionManagementRemove]: () =>
-    import('./subscription-management').then(module => module.subscriptionManagementSchema),
+    import(
+      /* webpackChunkName: 'argo-subscription-management-components' */ './subscription-management'
+    ).then(module => module.subscriptionManagementSchema),
   [ExtensionPoint.SubscriptionManagementEdit]: () =>
-    import('./subscription-management').then(module => module.subscriptionManagementSchema),
+    import(
+      /* webpackChunkName: 'argo-subscription-management-components' */ './subscription-management'
+    ).then(module => module.subscriptionManagementSchema),
 
   [ExtensionPoint.MerchantMetafield]: () =>
-    import('./app-link').then(module => module.appLinkSchema),
+    import(/* webpackChunkName: 'argo-merchant-metafield-components' */ './app-link').then(
+      module => module.appLinkSchema,
+    ),
 };
diff --git a/packages/argo-playground/package.json b/packages/argo-playground/package.json
@@ -2,12 +2,11 @@
   "name": "@shopify/argo-playground",
   "version": "0.0.64",
   "private": true,
-  "browserslist": [
-    "extends @shopify/browserslist-config"
-  ],
   "scripts": {
-    "build": "webpack",
-    "build-mobile": "rm -rf ./dist && webpack --config ./webpack.mobile.config.js",
+    "clean": "rm -rf ./dist",
+    "build": "yarn run clean && webpack",
+    "build:prod": "yarn run clean && NODE_ENV=production && webpack -p",
+    "build-mobile": "yarn run clean && webpack --config ./webpack.mobile.config.js",
     "server": "webpack-dev-server"
   },
   "repository": {
@@ -16,49 +15,38 @@
     "directory": "packages/argo-playground"
   },
   "dependencies": {
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@juggle/resize-observer": "^3.1.3",
-    "@shopify/browserslist-config": "^1.0.3",
     "@shopify/polaris": "^4.19.0",
     "@shopify/react-form": "^0.6.0",
-    "@shopify/react-graphql": "^6.1.1",
     "@shopify/react-html": "^9.2.3",
-    "@shopify/react-i18n": "^2.0.2",
+    "@shopify/react-i18n": "^4.0.0",
     "@shopify/react-i18n-universal-provider": "^1.0.14",
     "@shopify/react-network": "^3.3.1",
     "@shopify/react-performance": "^1.1.1",
     "@shopify/react-router": "^0.0.9",
-    "@shopify/typescript-configs": "^2.0.1",
-    "apollo-client": "^2.6.8",
-    "apollo-link-context": "^1.0.20",
-    "apollo-link-http": "^1.5.16",
-    "core-js": "^3.6.4",
-    "graphql": "^14.6.0",
-    "graphql-tag": "^2.10.3",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.8.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
+    "@babel/plugin-proposal-numeric-separator": "^7.10.1",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.1",
+    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/preset-env": "^7.10.0",
+    "@babel/preset-react": "^7.10.0",
+    "@babel/preset-typescript": "^7.10.1",
+    "@babel/runtime": "^7.10.1",
     "@types/react": "^16.9.4",
     "@types/react-dom": "^16.9.1",
     "babel-loader": "^8.0.6",
-    "babel-preset-shopify": "21.0.0",
     "css-loader": "^3.4.2",
     "file-loader": "^6.0.0",
     "html-webpack-plugin": "^3.2.0",
-    "sass": "^1.26.3",
-    "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "typescript": "~3.7.2",
     "webpack": "^4.41.6",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3"
   },
-  "resolutions": {
-    "babel-core": "7.0.0-bridge.0",
-    "core-js": "^3.6.4"
-  },
   "publishConfig": {
     "access": "restricted",
     "registry": "https://packages.shopify.io/shopify/node/npm/"

diff --git a/...onents/containers/shared/Error/Error.scss → ...ponents/containers/shared/Error/Error.css b/...onents/containers/shared/Error/Error.scss → ...ponents/containers/shared/Error/Error.css
diff --git a/packages/argo-playground/src/components/containers/shared/Error/Error.tsx b/packages/argo-playground/src/components/containers/shared/Error/Error.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Stack, TextContainer, DisplayText, Button} from '@shopify/polaris';
 const {default: ErrorMonitorImage} = require('./error-monitor.png');
 
-import './Error.scss';
+import './Error.css';
 
 export function Error() {
   return (

diff --git a/packages/argo-playground/src/components/containers/shared/Header.tsx b/packages/argo-playground/src/components/containers/shared/Header.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Stack, Icon, DisplayText, Button} from '@shopify/polaris';
 import {ChevronLeftMinor} from '@shopify/polaris-icons';
 
-import './styles.scss';
+import './styles.css';
 
 interface Props {
   appName: string;

diff --git a/...shared/LoadingSpinner/LoadingSpinner.scss → .../shared/LoadingSpinner/LoadingSpinner.css b/...shared/LoadingSpinner/LoadingSpinner.scss → .../shared/LoadingSpinner/LoadingSpinner.css
diff --git a/packages/argo-playground/src/components/containers/shared/LoadingSpinner/LoadingSpinner.tsx b/packages/argo-playground/src/components/containers/shared/LoadingSpinner/LoadingSpinner.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Spinner} from '@shopify/polaris';
 
-import './LoadingSpinner.scss';
+import './LoadingSpinner.css';
 
 export function LoadingSpinner() {
   return (

diff --git a/.../components/containers/shared/styles.scss → ...c/components/containers/shared/styles.css b/.../components/containers/shared/styles.scss → ...c/components/containers/shared/styles.css
diff --git a/packages/argo-playground/src/features/ComponentsList/ComponentsList.tsx b/packages/argo-playground/src/features/ComponentsList/ComponentsList.tsx
@@ -7,7 +7,7 @@ import {useToastApi} from '@shopify/argo-host';
 import {StandardContainer} from '../../components/containers';
 
 const reactThirdPartyWorker = createPlainWorkerFactory(() =>
-  import(/* webpackChunkName: 'components-list' */ '../../third-party/components-list'),
+  import(/* webpackChunkName: '3p-components-list' */ '../../third-party/components-list'),
 );
 
 export function ComponentsList() {

diff --git a/packages/argo-playground/src/features/Containers/Containers.tsx b/packages/argo-playground/src/features/Containers/Containers.tsx
@@ -7,7 +7,7 @@ import {createPlainWorkerFactory} from '@shopify/react-web-worker';
 import {ModalContainer} from '../../components/containers';
 
 const modalClientScript = createPlainWorkerFactory(() =>
-  import(/* webpackChunkName: 'modal-script' */ '../../third-party/modal-content'),
+  import(/* webpackChunkName: '3p-modal-content' */ '../../third-party/modal-content'),
 );
 
 export function Containers() {

diff --git a/packages/argo-playground/src/features/UseForm/UseForm.tsx b/packages/argo-playground/src/features/UseForm/UseForm.tsx
@@ -6,7 +6,7 @@ import {ExtensionPoint} from '@shopify/argo';
 import {StandardContainer} from '../../components/containers';
 
 const reactThirdPartyWorker = createPlainWorkerFactory(() =>
-  import(/* webpackChunkName: 'use-form' */ '../../third-party/use-form'),
+  import(/* webpackChunkName: '3p-use-form' */ '../../third-party/use-form'),
 );
 
 export function UseForm() {

diff --git a/packages/argo-playground/src/features/Vanilla/Vanilla.tsx b/packages/argo-playground/src/features/Vanilla/Vanilla.tsx
@@ -7,7 +7,7 @@ import {ExtensionPoint} from '@shopify/argo';
 import {StandardContainer} from '../../components/containers';
 
 const reactThirdPartyWorker = createPlainWorkerFactory(() =>
-  import(/* webpackChunkName: 'vanilla' */ '../../third-party/vanilla'),
+  import(/* webpackChunkName: '3p-vanilla' */ '../../third-party/vanilla'),
 );
 
 export function Vanilla() {

diff --git a/packages/argo-playground/src/foundation/App/components/Polaris/Polaris.tsx b/packages/argo-playground/src/foundation/App/components/Polaris/Polaris.tsx
@@ -10,13 +10,15 @@ interface Props {
 export function Polaris({children}: Props) {
   const [i18n] = useI18n({
     id: 'Polaris',
-    translations(code) {
-      return import(`@shopify/polaris/locales/${code}.json`);
+    translations(locale) {
+      return import(
+        /* webpackChunkName: "Polaris-i18n", webpackMode: "lazy-once" */ `@shopify/polaris/locales/${locale}.json`
+      ).then(dictionary => dictionary && dictionary.default);
     },
   });
 
   return (
-    <PolarisProvider i18n={i18n.translations} linkComponent={Link}>
+    <PolarisProvider i18n={i18n.translations.reverse()} linkComponent={Link}>
       {children}
     </PolarisProvider>
   );

diff --git a/packages/argo-playground/webpack.config.js b/packages/argo-playground/webpack.config.js
@@ -4,6 +4,40 @@ const {WebWorkerPlugin} = require('@shopify/web-worker/webpack');
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
 
+const BABEL_PLUGINS = [
+  [
+    '@babel/plugin-transform-runtime',
+    {
+      regenerator: true,
+      useESModules: true,
+    },
+  ],
+  '@babel/plugin-proposal-numeric-separator',
+  '@babel/plugin-proposal-optional-chaining',
+  '@babel/plugin-proposal-nullish-coalescing-operator',
+  ['@babel/plugin-proposal-class-properties', {loose: true}],
+];
+
+const BABEL_PRESETS = [
+  '@babel/preset-react',
+  '@babel/preset-typescript',
+  [
+    '@babel/preset-env',
+    {
+      modules: false,
+      targets: {
+        browsers: [
+          'last 2 chrome version',
+          'last 2 firefox version',
+          'last 2 safari version',
+          'last 2 edge version',
+        ],
+      },
+      forceAllTransforms: true,
+    },
+  ],
+];
+
 module.exports = {
   mode: isDevelopment ? 'development' : 'production',
   entry: './src/index.tsx',
@@ -50,47 +84,37 @@ module.exports = {
     rules: [
       {
         test: /\.[j|t]s(x?)$/,
+        include: [/node_modules/, resolve(__dirname, 'src/third-party')],
         use: {
           loader: 'babel-loader',
           options: {
             babelrc: false,
-            presets: [
-              [
-                '@babel/preset-env',
-                {
-                  forceAllTransforms: true,
-                },
-              ],
-              [
-                'babel-preset-shopify/web',
-                {
-                  modules: 'commonjs',
-                  typescript: true,
-                  browsers: [
-                    'last 1 chrome version',
-                    'last 1 firefox version',
-                    'last 1 safari version',
-                  ],
-                },
-              ],
-              'babel-preset-shopify/react',
-            ],
-            plugins: [
-              '@babel/transform-runtime',
-              '@shopify/react-i18n/babel',
+            presets: BABEL_PRESETS,
+            plugins: BABEL_PLUGINS,
+            sourceType: 'unambiguous',
+          },
+        },
+      },
+
+      {
+        test: /\.[j|t]s(x?)$/,
+        exclude: [/node_modules/, /third-party/],
+        use: {
+          loader: 'babel-loader',
+          options: {
+            babelrc: false,
+            presets: BABEL_PRESETS,
+            plugins: BABEL_PLUGINS.concat([
               require.resolve('@shopify/web-worker/babel'),
-            ],
+            ]),
+            sourceType: 'unambiguous',
           },
         },
       },
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       },
-      {
-        test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
-      },
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: ['file-loader'],

diff --git a/packages/argo/package.json b/packages/argo/package.json
@@ -14,8 +14,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@shopify/remote-ui-core": "^0.0.21",
-    "typescript": "^3.7.2"
+    "@shopify/remote-ui-core": "^0.0.21"
   },
   "devDependencies": {
     "@types/react": "^16.0.0"

diff --git a/packages/argo/src/component-sets/index.ts b/packages/argo/src/component-sets/index.ts
@@ -1,4 +1,4 @@
-type Components = typeof import('../components');
+type Components = typeof import(/* webpackChunkName: 'argo-components' */ '../components');
 
 export type ActionComponents = Components['Button'] | Components['Link'];
 

diff --git a/packages/argo/src/extension-api/index.ts b/packages/argo/src/extension-api/index.ts
@@ -1,6 +1,17 @@
-export {LayoutApi, isLayoutApi} from './layout';
-export {LocaleApi, isLocaleApi} from './locale';
-export {ModalActionsApi, isModalActionsApi} from './modalActions';
-export {ProductDataApi, isProductDataApi} from './productData';
-export {SessionTokenApi, isSessionTokenApi} from './sessionToken';
-export {ToastApi, isToastApi} from './toast';
+export type {LayoutApi} from "./layout"
+export {isLayoutApi} from "./layout"
+
+export type {LocaleApi} from './locale';
+export {isLocaleApi} from './locale';
+
+export type {ModalActionsApi} from './modalActions';
+export {isModalActionsApi} from './modalActions';
+
+export type {ProductDataApi} from './productData';
+export { isProductDataApi} from './productData';
+
+export type {SessionTokenApi} from './sessionToken';
+export {isSessionTokenApi} from './sessionToken';
+
+export type {ToastApi} from './toast';
+export {isToastApi} from './toast';
diff --git a/scripts/new-extension-api.js b/scripts/new-extension-api.js
@@ -50,7 +50,7 @@ function createCoreExtensionApi(extensionApiName) {
   fs.mkdirSync(extensionApiDir, {recursive: true});
   fs.writeFileSync(`${extensionApiDir}/${extensionApiNameCamelCase}.ts`, content);
 
-  updateIndex(`${path}/index.ts`, `export {${extensionApiName}, is${extensionApiName}Api} from './${extensionApiNameCamelCase}';`);
+  updateIndex(`${path}/index.ts`, `\nexport type {${extensionApiName}} from './${extensionApiNameCamelCase}';\nexport {is${extensionApiName}Api} from './${extensionApiNameCamelCase}';`);
 
   console.log(`✅ Create ${extensionApiName} core`);
 }