From bf0ff6737f882005f925031171ae9c9d57b41579 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 28 Jun 2023 23:44:50 -0700 Subject: [PATCH] feat: automatically import and define Calcite Components when importing their React wrapper (#7185) **Related Issue:** #6601 ## Summary Automatically imports and defines Calcite Components when importing the React wrappers. For example, here is a snippet from our React sample: ```jsx import '@esri/calcite-components/dist/components/calcite-button'; import '@esri/calcite-components/dist/components/calcite-icon'; import '@esri/calcite-components/dist/components/calcite-slider'; import { CalciteButton, CalciteIcon, CalciteSlider } from '@esri/calcite-components-react'; ``` The above snippet can now be simplified to the following: ```jsx import { CalciteButton, CalciteIcon, CalciteSlider } from '@esri/calcite-components-react'; ``` ### Note I had to patch the build because Stencil was generating an incorrect import path to the JSX type. I tested in our old output targets repo and it reproduced there as well, so this isn't related to the monorepo change. --- package-lock.json | 18 +++++++-------- .../calcite-components-react/package.json | 5 +++-- .../support/patchImportPathJSX.ts | 22 +++++++++++++++++++ .../calcite-components-react/tsconfig.json | 2 +- packages/calcite-components/package.json | 2 +- packages/calcite-components/stencil.config.ts | 4 +++- 6 files changed, 39 insertions(+), 14 deletions(-) create mode 100644 packages/calcite-components-react/support/patchImportPathJSX.ts diff --git a/package-lock.json b/package-lock.json index 40ba74d2556..50b8e4bd7a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7063,12 +7063,12 @@ } }, "node_modules/@stencil/react-output-target": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.4.0.tgz", - "integrity": "sha512-X7XW6aHSU7ZypkFj4wX/XL7ROj2GXcdTL+Emo1mKNg5laBcuTVtt8zPR4ERG/grq8ec8wav+FxBuSlQ3cH0qcg==", + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz", + "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==", "dev": true, "peerDependencies": { - "@stencil/core": "^2.9.0 || ^3.0.0-beta.0" + "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0" } }, "node_modules/@stencil/sass": { @@ -43869,7 +43869,7 @@ "@esri/eslint-plugin-calcite-components": "0.2.2", "@stencil-community/eslint-plugin": "0.5.0", "@stencil/postcss": "2.1.0", - "@stencil/react-output-target": "0.4.0", + "@stencil/react-output-target": "0.5.3", "@stencil/sass": "3.0.4", "@stencil/state-tunnel": "1.0.1" } @@ -45705,7 +45705,7 @@ "@stencil-community/eslint-plugin": "0.5.0", "@stencil/core": "2.22.3", "@stencil/postcss": "2.1.0", - "@stencil/react-output-target": "0.4.0", + "@stencil/react-output-target": "0.5.3", "@stencil/sass": "3.0.4", "@stencil/state-tunnel": "1.0.1", "@types/color": "3.0.3", @@ -49096,9 +49096,9 @@ } }, "@stencil/react-output-target": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.4.0.tgz", - "integrity": "sha512-X7XW6aHSU7ZypkFj4wX/XL7ROj2GXcdTL+Emo1mKNg5laBcuTVtt8zPR4ERG/grq8ec8wav+FxBuSlQ3cH0qcg==", + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz", + "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==", "dev": true, "requires": {} }, diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index 3e2fddf6c94..e233404f0c0 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -5,10 +5,11 @@ "description": "A set of React components that wrap calcite components", "license": "SEE LICENSE.md", "scripts": { - "build": "rimraf dist && npm run compile", + "build": "rimraf dist && npm run util:patch-jsx-import && npm run compile", "clean": "rimraf dist node_modules .turbo", "compile": "npm run tsc", - "tsc": "tsc" + "tsc": "tsc", + "util:patch-jsx-import": "ts-node --esm ./support/patchImportPathJSX.ts" }, "main": "./dist/index.js", "module": "./dist/index.js", diff --git a/packages/calcite-components-react/support/patchImportPathJSX.ts b/packages/calcite-components-react/support/patchImportPathJSX.ts new file mode 100644 index 00000000000..99558f469b7 --- /dev/null +++ b/packages/calcite-components-react/support/patchImportPathJSX.ts @@ -0,0 +1,22 @@ +// patch needed due to Stencil creating the wrong import path to the JSX type +(async function () { + const { + promises: { readFile, writeFile } + } = await import("fs"); + const { resolve } = await import("path"); + + try { + const filePath = resolve(__dirname, "..", "src", "components.ts"); + const contents = await readFile(filePath, { encoding: "utf8" }); + await writeFile( + filePath, + contents.replace( + "import type { JSX } from '@esri/calcite-components/dist/components'", + "import type { JSX } from '@esri/calcite-components'" + ) + ); + } catch (err) { + console.error(err); + process.exit(1); + } +})(); diff --git a/packages/calcite-components-react/tsconfig.json b/packages/calcite-components-react/tsconfig.json index d9ebb2a4572..f6f36511ae4 100644 --- a/packages/calcite-components-react/tsconfig.json +++ b/packages/calcite-components-react/tsconfig.json @@ -7,7 +7,7 @@ "experimentalDecorators": true, "esModuleInterop": true, "lib": ["dom", "es2015"], - "module": "es2015", + "module": "esnext", "moduleResolution": "node", "noImplicitAny": true, "noImplicitReturns": true, diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 4da06de0b35..cbef1372922 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -78,7 +78,7 @@ "@esri/eslint-plugin-calcite-components": "0.2.2", "@stencil-community/eslint-plugin": "0.5.0", "@stencil/postcss": "2.1.0", - "@stencil/react-output-target": "0.4.0", + "@stencil/react-output-target": "0.5.3", "@stencil/sass": "3.0.4", "@stencil/state-tunnel": "1.0.1" }, diff --git a/packages/calcite-components/stencil.config.ts b/packages/calcite-components/stencil.config.ts index 0442b7d992c..b8c98d7085d 100644 --- a/packages/calcite-components/stencil.config.ts +++ b/packages/calcite-components/stencil.config.ts @@ -84,7 +84,9 @@ export const create: () => Config = () => ({ reactOutputTarget({ componentCorePackage: "@esri/calcite-components", proxiesFile: "../calcite-components-react/src/components.ts", - excludeComponents: ["context-consumer"] + excludeComponents: ["context-consumer"], + customElementsDir: "dist/components", + includeImportCustomElements: true }), { type: "dist-hydrate-script" }, { type: "dist-custom-elements", autoDefineCustomElements: true },