Skip to content

Commit

Permalink
Deduped @emotion/react (#730)
Browse files Browse the repository at this point in the history
  • Loading branch information
tjcouch-sil authored Jan 23, 2024
2 parents d61544c + c0570d5 commit 65bf15c
Show file tree
Hide file tree
Showing 13 changed files with 2,729 additions and 2,613 deletions.
5,098 changes: 2,568 additions & 2,530 deletions extensions/package-lock.json

Large diffs are not rendered by default.

11 changes: 8 additions & 3 deletions extensions/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,13 @@
},
"browserslist": [],
"peerDependencies": {
"@sillsdev/scripture": "^1.4.0",
"react": ">=18.2.0",
"react-dom": ">=18.2.0"
},
"devDependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.14.1",
"@types/node": "^18.17.12",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
Expand All @@ -51,9 +53,8 @@
"css-loader": "^6.8.1",
"escape-string-regexp": "^5.0.0",
"glob": "^10.3.3",
"platform-bible-react": "file:../lib/platform-bible-react",
"platform-bible-utils": "file:../lib/platform-bible-utils",
"papi-dts": "file:../lib/papi-dts",
"platform-bible-react": "file:../lib/platform-bible-react",
"prettier": "^2.8.8",
"prettier-plugin-jsdoc": "^0.4.2",
"replace-in-file": "^7.0.2",
Expand All @@ -72,5 +73,9 @@
"webpack-cli": "^5.1.4",
"webpack-merge": "^5.9.0",
"zip-folder-promise": "^1.2.0"
},
"dependencies": {
"@sillsdev/scripture": "^1.4.0",
"platform-bible-utils": "file:../lib/platform-bible-utils"
}
}
24 changes: 24 additions & 0 deletions extensions/src/hello-someone/src/emotion-test.web-view.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { logger } from '@papi/frontend';
import { Button } from 'platform-bible-react';
import { Button as MuiButton } from '@mui/material';

/**
* This web view exists to test if importing `platform-bible-react` and `@mui/material` at once will
* successfully deduplicate `@emotion/react`. If it fails, there will be a console warning in the
* renderer indicating `@emotion/react` was loaded twice.
*/

globalThis.webViewComponent = function EmotionTestWebView() {
return (
<div>
<div>
@emotion/react test - you should not see a console warning about @emotion/react being loaded
twice
</div>
<Button onClick={() => logger.info('platform-bible-react button ')}>
platform-bible-react
</Button>
<MuiButton onClick={() => logger.info('mui button')}>mui button</MuiButton>
</div>
);
};
26 changes: 26 additions & 0 deletions extensions/src/hello-someone/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from '@papi/core';
import type { PeopleData, PeopleDataMethods, PeopleDataTypes, Person } from 'hello-someone';
import helloSomeoneHtmlWebView from './hello-someone.web-view.html?inline';
import emotionTestWebView from './emotion-test.web-view?inline';

logger.info('Hello Someone is importing!');

Expand Down Expand Up @@ -260,6 +261,23 @@ const peopleWebViewProvider: IWebViewProvider = {
},
};

const emotionTestWebViewType = 'helloSomeone.emotionTest';

/** Simple web view provider that provides `@emotion/react` test web views when papi requests them */
const emotionTestWebViewProvider: IWebViewProvider = {
async getWebView(savedWebView: SavedWebViewDefinition): Promise<WebViewDefinition | undefined> {
if (savedWebView.webViewType !== emotionTestWebViewType)
throw new Error(
`${emotionTestWebViewType} provider received request to provide a ${savedWebView.webViewType} web view`,
);
return {
...savedWebView,
title: 'Emotion Test',
content: emotionTestWebView,
};
},
};

export async function activate(context: ExecutionActivationContext): Promise<void> {
logger.info('Hello Someone is activating!');

Expand All @@ -273,6 +291,11 @@ export async function activate(context: ExecutionActivationContext): Promise<voi
peopleWebViewProvider,
);

const emotionTestWebViewProviderPromise = papi.webViewProviders.register(
emotionTestWebViewType,
emotionTestWebViewProvider,
);

const helloSomeoneCommandPromise = papi.commands.registerCommand(
'helloSomeone.helloSomeone',
(name: string) => {
Expand Down Expand Up @@ -324,10 +347,13 @@ export async function activate(context: ExecutionActivationContext): Promise<voi
peopleWebViewId || '',
);

await papi.webViews.getWebView(emotionTestWebViewType, undefined, { existingId: '?' });

// Await the registration promises at the end so we don't hold everything else up
context.registrations.add(
await peopleDataProviderPromise,
await peopleWebViewProviderPromise,
await emotionTestWebViewProviderPromise,
await helloSomeoneCommandPromise,
await echoSomeoneRendererPromise,
papi.webViews.onDidAddWebView((addWebViewEvent) => {
Expand Down
13 changes: 13 additions & 0 deletions extensions/src/hello-someone/webpack/webpack.config.base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const configBase: webpack.Configuration = {
'@papi/frontend',
'@papi/frontend/react',
'@sillsdev/scripture',
'platform-bible-utils',
],
module: {
// Please keep these JSDocs up-to-date with their counterparts in `webpack-env.d.ts`
Expand Down Expand Up @@ -138,6 +139,18 @@ const configBase: webpack.Configuration = {
// use tsconfig.json paths https://www.npmjs.com/package/tsconfig-paths-webpack-plugin
new TsconfigPathsPlugin(),
],
// Load `platform-bible-react`' `dependencies` from `paranext-core` so the extension will share
// these dependencies with the bundled copy of `platform-bible-react` and avoid duplicate
// packages. These paths are broken up like this so multi-extension folder can format the path
// properly
// https://webpack.js.org/configuration/resolve/#resolvealias
// TODO: Remove this when `platform-bible-react` is published to npm
alias: {
'@emotion/react': path.resolve(__dirname, '..', '../../../node_modules/@emotion/react'),
'@emotion/styled': path.resolve(__dirname, '..', '../../../node_modules/@emotion/styled'),
'@mui/material': path.resolve(__dirname, '..', '../../../node_modules/@mui/material'),
'react-data-grid': path.resolve(__dirname, '..', '../../../node_modules/react-data-grid'),
},
},
};

Expand Down
13 changes: 13 additions & 0 deletions extensions/src/hello-world/webpack/webpack.config.base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const configBase: webpack.Configuration = {
'@papi/frontend',
'@papi/frontend/react',
'@sillsdev/scripture',
'platform-bible-utils',
],
module: {
// Please keep these JSDocs up-to-date with their counterparts in `webpack-env.d.ts`
Expand Down Expand Up @@ -138,6 +139,18 @@ const configBase: webpack.Configuration = {
// use tsconfig.json paths https://www.npmjs.com/package/tsconfig-paths-webpack-plugin
new TsconfigPathsPlugin(),
],
// Load `platform-bible-react`' `dependencies` from `paranext-core` so the extension will share
// these dependencies with the bundled copy of `platform-bible-react` and avoid duplicate
// packages. These paths are broken up like this so multi-extension folder can format the path
// properly
// https://webpack.js.org/configuration/resolve/#resolvealias
// TODO: Remove this when `platform-bible-react` is published to npm
alias: {
'@emotion/react': path.resolve(__dirname, '..', '../../../node_modules/@emotion/react'),
'@emotion/styled': path.resolve(__dirname, '..', '../../../node_modules/@emotion/styled'),
'@mui/material': path.resolve(__dirname, '..', '../../../node_modules/@mui/material'),
'react-data-grid': path.resolve(__dirname, '..', '../../../node_modules/react-data-grid'),
},
},
};

Expand Down
13 changes: 13 additions & 0 deletions extensions/src/quick-verse/webpack/webpack.config.base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const configBase: webpack.Configuration = {
'@papi/frontend',
'@papi/frontend/react',
'@sillsdev/scripture',
'platform-bible-utils',
],
module: {
// Please keep these JSDocs up-to-date with their counterparts in `webpack-env.d.ts`
Expand Down Expand Up @@ -138,6 +139,18 @@ const configBase: webpack.Configuration = {
// use tsconfig.json paths https://www.npmjs.com/package/tsconfig-paths-webpack-plugin
new TsconfigPathsPlugin(),
],
// Load `platform-bible-react`' `dependencies` from `paranext-core` so the extension will share
// these dependencies with the bundled copy of `platform-bible-react` and avoid duplicate
// packages. These paths are broken up like this so multi-extension folder can format the path
// properly
// https://webpack.js.org/configuration/resolve/#resolvealias
// TODO: Remove this when `platform-bible-react` is published to npm
alias: {
'@emotion/react': path.resolve(__dirname, '..', '../../../node_modules/@emotion/react'),
'@emotion/styled': path.resolve(__dirname, '..', '../../../node_modules/@emotion/styled'),
'@mui/material': path.resolve(__dirname, '..', '../../../node_modules/@mui/material'),
'react-data-grid': path.resolve(__dirname, '..', '../../../node_modules/react-data-grid'),
},
},
};

Expand Down
13 changes: 13 additions & 0 deletions extensions/src/resource-viewer/webpack/webpack.config.base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const configBase: webpack.Configuration = {
'@papi/frontend',
'@papi/frontend/react',
'@sillsdev/scripture',
'platform-bible-utils',
],
module: {
// Please keep these JSDocs up-to-date with their counterparts in `webpack-env.d.ts`
Expand Down Expand Up @@ -138,6 +139,18 @@ const configBase: webpack.Configuration = {
// use tsconfig.json paths https://www.npmjs.com/package/tsconfig-paths-webpack-plugin
new TsconfigPathsPlugin(),
],
// Load `platform-bible-react`' `dependencies` from `paranext-core` so the extension will share
// these dependencies with the bundled copy of `platform-bible-react` and avoid duplicate
// packages. These paths are broken up like this so multi-extension folder can format the path
// properly
// https://webpack.js.org/configuration/resolve/#resolvealias
// TODO: Remove this when `platform-bible-react` is published to npm
alias: {
'@emotion/react': path.resolve(__dirname, '..', '../../../node_modules/@emotion/react'),
'@emotion/styled': path.resolve(__dirname, '..', '../../../node_modules/@emotion/styled'),
'@mui/material': path.resolve(__dirname, '..', '../../../node_modules/@mui/material'),
'react-data-grid': path.resolve(__dirname, '..', '../../../node_modules/react-data-grid'),
},
},
};

Expand Down
13 changes: 13 additions & 0 deletions extensions/webpack/webpack.config.base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const configBase: webpack.Configuration = {
'@papi/frontend',
'@papi/frontend/react',
'@sillsdev/scripture',
'platform-bible-utils',
],
module: {
// Please keep these JSDocs up-to-date with their counterparts in `webpack-env.d.ts`
Expand Down Expand Up @@ -138,6 +139,18 @@ const configBase: webpack.Configuration = {
// use tsconfig.json paths https://www.npmjs.com/package/tsconfig-paths-webpack-plugin
new TsconfigPathsPlugin(),
],
// Load `platform-bible-react`' `dependencies` from `paranext-core` so the extension will share
// these dependencies with the bundled copy of `platform-bible-react` and avoid duplicate
// packages. These paths are broken up like this so multi-extension folder can format the path
// properly
// https://webpack.js.org/configuration/resolve/#resolvealias
// TODO: Remove this when `platform-bible-react` is published to npm
alias: {
'@emotion/react': path.resolve(__dirname, '..', '../node_modules/@emotion/react'),
'@emotion/styled': path.resolve(__dirname, '..', '../node_modules/@emotion/styled'),
'@mui/material': path.resolve(__dirname, '..', '../node_modules/@mui/material'),
'react-data-grid': path.resolve(__dirname, '..', '../node_modules/react-data-grid'),
},
},
};

Expand Down
Loading

0 comments on commit 65bf15c

Please sign in to comment.