From 758eba03cb2d35532c83ae157cea0fee89dce21b Mon Sep 17 00:00:00 2001 From: Trish Ta Date: Mon, 1 Jun 2020 19:41:23 -0400 Subject: [PATCH] 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 https://github.com/microsoft/TypeScript/pull/35200 and https://github.com/babel/babel/issues/10981 --- packages/argo-host/package.json | 3 +- .../argo-host/src/component-schemas/index.ts | 30 +++++-- packages/argo-playground/package.json | 38 +++------ .../shared/Error/{Error.scss => Error.css} | 0 .../containers/shared/Error/Error.tsx | 2 +- .../components/containers/shared/Header.tsx | 2 +- ...LoadingSpinner.scss => LoadingSpinner.css} | 0 .../shared/LoadingSpinner/LoadingSpinner.tsx | 2 +- .../shared/{styles.scss => styles.css} | 0 .../ComponentsList/ComponentsList.tsx | 2 +- .../src/features/Containers/Containers.tsx | 2 +- .../src/features/UseForm/UseForm.tsx | 2 +- .../src/features/Vanilla/Vanilla.tsx | 2 +- .../App/components/Polaris/Polaris.tsx | 8 +- packages/argo-playground/webpack.config.js | 82 ++++++++++++------- packages/argo/package.json | 3 +- packages/argo/src/component-sets/index.ts | 2 +- packages/argo/src/extension-api/index.ts | 23 ++++-- scripts/new-extension-api.js | 2 +- 19 files changed, 122 insertions(+), 83 deletions(-) rename packages/argo-playground/src/components/containers/shared/Error/{Error.scss => Error.css} (100%) rename packages/argo-playground/src/components/containers/shared/LoadingSpinner/{LoadingSpinner.scss => LoadingSpinner.css} (100%) rename packages/argo-playground/src/components/containers/shared/{styles.scss => styles.css} (100%) diff --git a/packages/argo-host/package.json b/packages/argo-host/package.json index fdcdbeac99..a1da1e2d15 100644 --- 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 index 0961140fd8..7ddeffd781 100644 --- 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 Promise> = { - [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 index 8482222962..4621519815 100644 --- 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/packages/argo-playground/src/components/containers/shared/Error/Error.scss b/packages/argo-playground/src/components/containers/shared/Error/Error.css similarity index 100% rename from packages/argo-playground/src/components/containers/shared/Error/Error.scss rename to packages/argo-playground/src/components/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 index 345b1e87e7..87bcd286ff 100644 --- 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 index e28917e195..258a9ce769 100644 --- 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/packages/argo-playground/src/components/containers/shared/LoadingSpinner/LoadingSpinner.scss b/packages/argo-playground/src/components/containers/shared/LoadingSpinner/LoadingSpinner.css similarity index 100% rename from packages/argo-playground/src/components/containers/shared/LoadingSpinner/LoadingSpinner.scss rename to packages/argo-playground/src/components/containers/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 index 6f4cc9ce7f..0717ed74c8 100644 --- 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/packages/argo-playground/src/components/containers/shared/styles.scss b/packages/argo-playground/src/components/containers/shared/styles.css similarity index 100% rename from packages/argo-playground/src/components/containers/shared/styles.scss rename to packages/argo-playground/src/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 index a5ec156036..3c5f26385e 100644 --- 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 index f628dfdf23..3be01c339c 100644 --- 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 index 6baefe65df..21dbdef698 100644 --- 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 index e0911013fe..25e325fa89 100644 --- 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 index 0279fa656e..909c1aa5a5 100644 --- 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 ( - + {children} ); diff --git a/packages/argo-playground/webpack.config.js b/packages/argo-playground/webpack.config.js index b044195c17..ccf1b0d608 100644 --- 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,36 +84,30 @@ 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', }, }, }, @@ -87,10 +115,6 @@ module.exports = { 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 index de4e62f87a..7d1adfaab2 100644 --- 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 index 4eb09b4a4c..33d312de33 100644 --- 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 index b5b5182eb4..d56c6c6146 100644 --- 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 index 454365dbc9..bd6bfc78f8 100644 --- 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`); }