Skip to content

Commit 758eba0

Browse files
vividvioletvividviolet
committed
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
1 parent fce6f3e commit 758eba0

File tree

19 files changed

+122
-83
lines changed

19 files changed

+122
-83
lines changed

Diff for: ‎packages/argo-host/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@
1818
"@shopify/polaris": "^4.19.0",
1919
"@shopify/react-web-worker": "^1.2.9",
2020
"@shopify/remote-ui-react": "^0.0.24",
21-
"react": "^16.12.0",
22-
"typescript": "^3.7.2"
21+
"react": "^16.12.0"
2322
},
2423
"publishConfig": {
2524
"access": "restricted",

Diff for: ‎packages/argo-host/src/component-schemas/index.ts

+23-7
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,34 @@ export {appLinkSchema} from './app-link';
55
export {subscriptionManagementSchema} from './subscription-management';
66

77
export const extensionComponentsLoader: Record<ExtensionPoint, () => Promise<any>> = {
8-
[ExtensionPoint.AppLink]: () => import('./app-link').then(module => module.appLinkSchema),
9-
[ExtensionPoint.Playground]: () => import('./playground').then(module => module.playgroundSchema),
8+
[ExtensionPoint.AppLink]: () =>
9+
import(/* webpackChunkName: 'argo-app-link-components' */ './app-link').then(
10+
module => module.appLinkSchema,
11+
),
12+
[ExtensionPoint.Playground]: () =>
13+
import(/* webpackChunkName: 'argo-playground-components' */ './playground').then(
14+
module => module.playgroundSchema,
15+
),
1016

1117
[ExtensionPoint.SubscriptionManagementAdd]: () =>
12-
import('./subscription-management').then(module => module.subscriptionManagementSchema),
18+
import(
19+
/* webpackChunkName: 'argo-subscription-management-components' */ './subscription-management'
20+
).then(module => module.subscriptionManagementSchema),
1321
[ExtensionPoint.SubscriptionManagementCreate]: () =>
14-
import('./subscription-management').then(module => module.subscriptionManagementSchema),
22+
import(
23+
/* webpackChunkName: 'argo-subscription-management-components' */ './subscription-management'
24+
).then(module => module.subscriptionManagementSchema),
1525
[ExtensionPoint.SubscriptionManagementRemove]: () =>
16-
import('./subscription-management').then(module => module.subscriptionManagementSchema),
26+
import(
27+
/* webpackChunkName: 'argo-subscription-management-components' */ './subscription-management'
28+
).then(module => module.subscriptionManagementSchema),
1729
[ExtensionPoint.SubscriptionManagementEdit]: () =>
18-
import('./subscription-management').then(module => module.subscriptionManagementSchema),
30+
import(
31+
/* webpackChunkName: 'argo-subscription-management-components' */ './subscription-management'
32+
).then(module => module.subscriptionManagementSchema),
1933

2034
[ExtensionPoint.MerchantMetafield]: () =>
21-
import('./app-link').then(module => module.appLinkSchema),
35+
import(/* webpackChunkName: 'argo-merchant-metafield-components' */ './app-link').then(
36+
module => module.appLinkSchema,
37+
),
2238
};

Diff for: ‎packages/argo-playground/package.json

+13-25
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@
22
"name": "@shopify/argo-playground",
33
"version": "0.0.64",
44
"private": true,
5-
"browserslist": [
6-
"extends @shopify/browserslist-config"
7-
],
85
"scripts": {
9-
"build": "webpack",
10-
"build-mobile": "rm -rf ./dist && webpack --config ./webpack.mobile.config.js",
6+
"clean": "rm -rf ./dist",
7+
"build": "yarn run clean && webpack",
8+
"build:prod": "yarn run clean && NODE_ENV=production && webpack -p",
9+
"build-mobile": "yarn run clean && webpack --config ./webpack.mobile.config.js",
1110
"server": "webpack-dev-server"
1211
},
1312
"repository": {
@@ -16,49 +15,38 @@
1615
"directory": "packages/argo-playground"
1716
},
1817
"dependencies": {
19-
"@babel/plugin-transform-runtime": "^7.9.0",
20-
"@juggle/resize-observer": "^3.1.3",
21-
"@shopify/browserslist-config": "^1.0.3",
2218
"@shopify/polaris": "^4.19.0",
2319
"@shopify/react-form": "^0.6.0",
24-
"@shopify/react-graphql": "^6.1.1",
2520
"@shopify/react-html": "^9.2.3",
26-
"@shopify/react-i18n": "^2.0.2",
21+
"@shopify/react-i18n": "^4.0.0",
2722
"@shopify/react-i18n-universal-provider": "^1.0.14",
2823
"@shopify/react-network": "^3.3.1",
2924
"@shopify/react-performance": "^1.1.1",
3025
"@shopify/react-router": "^0.0.9",
31-
"@shopify/typescript-configs": "^2.0.1",
32-
"apollo-client": "^2.6.8",
33-
"apollo-link-context": "^1.0.20",
34-
"apollo-link-http": "^1.5.16",
35-
"core-js": "^3.6.4",
36-
"graphql": "^14.6.0",
37-
"graphql-tag": "^2.10.3",
3826
"react": "^16.12.0",
3927
"react-dom": "^16.12.0"
4028
},
4129
"devDependencies": {
42-
"@babel/preset-env": "^7.8.7",
30+
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
31+
"@babel/plugin-proposal-numeric-separator": "^7.10.1",
32+
"@babel/plugin-proposal-optional-chaining": "^7.10.1",
33+
"@babel/plugin-transform-runtime": "^7.10.1",
34+
"@babel/preset-env": "^7.10.0",
35+
"@babel/preset-react": "^7.10.0",
36+
"@babel/preset-typescript": "^7.10.1",
37+
"@babel/runtime": "^7.10.1",
4338
"@types/react": "^16.9.4",
4439
"@types/react-dom": "^16.9.1",
4540
"babel-loader": "^8.0.6",
46-
"babel-preset-shopify": "21.0.0",
4741
"css-loader": "^3.4.2",
4842
"file-loader": "^6.0.0",
4943
"html-webpack-plugin": "^3.2.0",
50-
"sass": "^1.26.3",
51-
"sass-loader": "^8.0.2",
5244
"style-loader": "^1.1.3",
5345
"typescript": "~3.7.2",
5446
"webpack": "^4.41.6",
5547
"webpack-cli": "^3.3.11",
5648
"webpack-dev-server": "^3.10.3"
5749
},
58-
"resolutions": {
59-
"babel-core": "7.0.0-bridge.0",
60-
"core-js": "^3.6.4"
61-
},
6250
"publishConfig": {
6351
"access": "restricted",
6452
"registry": "https://packages.shopify.io/shopify/node/npm/"

Diff for: ‎packages/argo-playground/src/components/containers/shared/Error/Error.scss renamed to ‎packages/argo-playground/src/components/containers/shared/Error/Error.css

File renamed without changes.

Diff for: ‎packages/argo-playground/src/components/containers/shared/Error/Error.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import {Stack, TextContainer, DisplayText, Button} from '@shopify/polaris';
33
const {default: ErrorMonitorImage} = require('./error-monitor.png');
44

5-
import './Error.scss';
5+
import './Error.css';
66

77
export function Error() {
88
return (

Diff for: ‎packages/argo-playground/src/components/containers/shared/Header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import {Stack, Icon, DisplayText, Button} from '@shopify/polaris';
33
import {ChevronLeftMinor} from '@shopify/polaris-icons';
44

5-
import './styles.scss';
5+
import './styles.css';
66

77
interface Props {
88
appName: string;

Diff for: ‎packages/argo-playground/src/components/containers/shared/LoadingSpinner/LoadingSpinner.scss renamed to ‎packages/argo-playground/src/components/containers/shared/LoadingSpinner/LoadingSpinner.css

File renamed without changes.

Diff for: ‎packages/argo-playground/src/components/containers/shared/LoadingSpinner/LoadingSpinner.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import {Spinner} from '@shopify/polaris';
33

4-
import './LoadingSpinner.scss';
4+
import './LoadingSpinner.css';
55

66
export function LoadingSpinner() {
77
return (

Diff for: ‎packages/argo-playground/src/components/containers/shared/styles.scss renamed to ‎packages/argo-playground/src/components/containers/shared/styles.css

File renamed without changes.

Diff for: ‎packages/argo-playground/src/features/ComponentsList/ComponentsList.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {useToastApi} from '@shopify/argo-host';
77
import {StandardContainer} from '../../components/containers';
88

99
const reactThirdPartyWorker = createPlainWorkerFactory(() =>
10-
import(/* webpackChunkName: 'components-list' */ '../../third-party/components-list'),
10+
import(/* webpackChunkName: '3p-components-list' */ '../../third-party/components-list'),
1111
);
1212

1313
export function ComponentsList() {

Diff for: ‎packages/argo-playground/src/features/Containers/Containers.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {createPlainWorkerFactory} from '@shopify/react-web-worker';
77
import {ModalContainer} from '../../components/containers';
88

99
const modalClientScript = createPlainWorkerFactory(() =>
10-
import(/* webpackChunkName: 'modal-script' */ '../../third-party/modal-content'),
10+
import(/* webpackChunkName: '3p-modal-content' */ '../../third-party/modal-content'),
1111
);
1212

1313
export function Containers() {

Diff for: ‎packages/argo-playground/src/features/UseForm/UseForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {ExtensionPoint} from '@shopify/argo';
66
import {StandardContainer} from '../../components/containers';
77

88
const reactThirdPartyWorker = createPlainWorkerFactory(() =>
9-
import(/* webpackChunkName: 'use-form' */ '../../third-party/use-form'),
9+
import(/* webpackChunkName: '3p-use-form' */ '../../third-party/use-form'),
1010
);
1111

1212
export function UseForm() {

Diff for: ‎packages/argo-playground/src/features/Vanilla/Vanilla.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {ExtensionPoint} from '@shopify/argo';
77
import {StandardContainer} from '../../components/containers';
88

99
const reactThirdPartyWorker = createPlainWorkerFactory(() =>
10-
import(/* webpackChunkName: 'vanilla' */ '../../third-party/vanilla'),
10+
import(/* webpackChunkName: '3p-vanilla' */ '../../third-party/vanilla'),
1111
);
1212

1313
export function Vanilla() {

Diff for: ‎packages/argo-playground/src/foundation/App/components/Polaris/Polaris.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@ interface Props {
1010
export function Polaris({children}: Props) {
1111
const [i18n] = useI18n({
1212
id: 'Polaris',
13-
translations(code) {
14-
return import(`@shopify/polaris/locales/${code}.json`);
13+
translations(locale) {
14+
return import(
15+
/* webpackChunkName: "Polaris-i18n", webpackMode: "lazy-once" */ `@shopify/polaris/locales/${locale}.json`
16+
).then(dictionary => dictionary && dictionary.default);
1517
},
1618
});
1719

1820
return (
19-
<PolarisProvider i18n={i18n.translations} linkComponent={Link}>
21+
<PolarisProvider i18n={i18n.translations.reverse()} linkComponent={Link}>
2022
{children}
2123
</PolarisProvider>
2224
);

Diff for: ‎packages/argo-playground/webpack.config.js

+53-29
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,40 @@ const {WebWorkerPlugin} = require('@shopify/web-worker/webpack');
44

55
const isDevelopment = process.env.NODE_ENV !== 'production';
66

7+
const BABEL_PLUGINS = [
8+
[
9+
'@babel/plugin-transform-runtime',
10+
{
11+
regenerator: true,
12+
useESModules: true,
13+
},
14+
],
15+
'@babel/plugin-proposal-numeric-separator',
16+
'@babel/plugin-proposal-optional-chaining',
17+
'@babel/plugin-proposal-nullish-coalescing-operator',
18+
['@babel/plugin-proposal-class-properties', {loose: true}],
19+
];
20+
21+
const BABEL_PRESETS = [
22+
'@babel/preset-react',
23+
'@babel/preset-typescript',
24+
[
25+
'@babel/preset-env',
26+
{
27+
modules: false,
28+
targets: {
29+
browsers: [
30+
'last 2 chrome version',
31+
'last 2 firefox version',
32+
'last 2 safari version',
33+
'last 2 edge version',
34+
],
35+
},
36+
forceAllTransforms: true,
37+
},
38+
],
39+
];
40+
741
module.exports = {
842
mode: isDevelopment ? 'development' : 'production',
943
entry: './src/index.tsx',
@@ -50,47 +84,37 @@ module.exports = {
5084
rules: [
5185
{
5286
test: /\.[j|t]s(x?)$/,
87+
include: [/node_modules/, resolve(__dirname, 'src/third-party')],
5388
use: {
5489
loader: 'babel-loader',
5590
options: {
5691
babelrc: false,
57-
presets: [
58-
[
59-
'@babel/preset-env',
60-
{
61-
forceAllTransforms: true,
62-
},
63-
],
64-
[
65-
'babel-preset-shopify/web',
66-
{
67-
modules: 'commonjs',
68-
typescript: true,
69-
browsers: [
70-
'last 1 chrome version',
71-
'last 1 firefox version',
72-
'last 1 safari version',
73-
],
74-
},
75-
],
76-
'babel-preset-shopify/react',
77-
],
78-
plugins: [
79-
'@babel/transform-runtime',
80-
'@shopify/react-i18n/babel',
92+
presets: BABEL_PRESETS,
93+
plugins: BABEL_PLUGINS,
94+
sourceType: 'unambiguous',
95+
},
96+
},
97+
},
98+
99+
{
100+
test: /\.[j|t]s(x?)$/,
101+
exclude: [/node_modules/, /third-party/],
102+
use: {
103+
loader: 'babel-loader',
104+
options: {
105+
babelrc: false,
106+
presets: BABEL_PRESETS,
107+
plugins: BABEL_PLUGINS.concat([
81108
require.resolve('@shopify/web-worker/babel'),
82-
],
109+
]),
110+
sourceType: 'unambiguous',
83111
},
84112
},
85113
},
86114
{
87115
test: /\.css$/,
88116
use: ['style-loader', 'css-loader'],
89117
},
90-
{
91-
test: /\.scss$/,
92-
use: ['style-loader', 'css-loader', 'sass-loader'],
93-
},
94118
{
95119
test: /\.(png|svg|jpg|gif)$/,
96120
use: ['file-loader'],

Diff for: ‎packages/argo/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@
1414
},
1515
"sideEffects": false,
1616
"dependencies": {
17-
"@shopify/remote-ui-core": "^0.0.21",
18-
"typescript": "^3.7.2"
17+
"@shopify/remote-ui-core": "^0.0.21"
1918
},
2019
"devDependencies": {
2120
"@types/react": "^16.0.0"

Diff for: ‎packages/argo/src/component-sets/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
type Components = typeof import('../components');
1+
type Components = typeof import(/* webpackChunkName: 'argo-components' */ '../components');
22

33
export type ActionComponents = Components['Button'] | Components['Link'];
44

Diff for: ‎packages/argo/src/extension-api/index.ts

+17-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
1-
export {LayoutApi, isLayoutApi} from './layout';
2-
export {LocaleApi, isLocaleApi} from './locale';
3-
export {ModalActionsApi, isModalActionsApi} from './modalActions';
4-
export {ProductDataApi, isProductDataApi} from './productData';
5-
export {SessionTokenApi, isSessionTokenApi} from './sessionToken';
6-
export {ToastApi, isToastApi} from './toast';
1+
export type {LayoutApi} from "./layout"
2+
export {isLayoutApi} from "./layout"
3+
4+
export type {LocaleApi} from './locale';
5+
export {isLocaleApi} from './locale';
6+
7+
export type {ModalActionsApi} from './modalActions';
8+
export {isModalActionsApi} from './modalActions';
9+
10+
export type {ProductDataApi} from './productData';
11+
export { isProductDataApi} from './productData';
12+
13+
export type {SessionTokenApi} from './sessionToken';
14+
export {isSessionTokenApi} from './sessionToken';
15+
16+
export type {ToastApi} from './toast';
17+
export {isToastApi} from './toast';

Diff for: ‎scripts/new-extension-api.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ function createCoreExtensionApi(extensionApiName) {
5050
fs.mkdirSync(extensionApiDir, {recursive: true});
5151
fs.writeFileSync(`${extensionApiDir}/${extensionApiNameCamelCase}.ts`, content);
5252

53-
updateIndex(`${path}/index.ts`, `export {${extensionApiName}, is${extensionApiName}Api} from './${extensionApiNameCamelCase}';`);
53+
updateIndex(`${path}/index.ts`, `\nexport type {${extensionApiName}} from './${extensionApiNameCamelCase}';\nexport {is${extensionApiName}Api} from './${extensionApiNameCamelCase}';`);
5454

5555
console.log(`✅ Create ${extensionApiName} core`);
5656
}

0 commit comments

Comments
 (0)