From 74bb0091a71ef187a3e23ff78378ae3fd4b6d1cb Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 14 Nov 2023 18:35:30 -0800 Subject: [PATCH] build(angular): remove event detail types patch by exporting them from the entry point (#8177) **Related Issue:** #8084 ## Summary I ran into build errors related to event detail types when adding the Angular output target to the monorepo. Stencil's auto-generated Angular code expected the types to be exported from the `@esri/calcite-components` entry point, but they were not. Here is one of the error messages: ``` angular-workspace:build: projects/component-library/src/lib/stencil-generated/components.ts:1014:15 - error TS2459: Module '"@esri/calcite-components"' declares 'HandleNudge' locally, but it is not exported. angular-workspace:build: angular-workspace:build: 1014 import type { HandleNudge as ICalciteHandleHandleNudge } from '@esri/calcite-components'; angular-workspace:build: ~~~~~~~~~~~ angular-workspace:build: angular-workspace:build: ../calcite-components/dist/types/components.d.ts:42:24 angular-workspace:build: 42 import { HandleChange, HandleNudge } from "./components/handle/interfaces"; angular-workspace:build: ~~~~~~~~~~~ angular-workspace:build: 'HandleNudge' is declared here. ``` To resolve the errors, I added a prebuild patch to the Angular output target that fixed the import paths for the three event detail types. As a result, a Calcite Components fix/feat that added a new event detail would create an unrelated entry in the Angular changelog. This is because the new event detail would need to be added to the patch, which lived in the Angular package's directory. This came up in: https://github.com/Esri/calcite-design-system/pull/8123#issuecomment-1804500831 This pull request exports the event detail types from the entry point, so the patch can be removed. **When adding a new event detail, it must be exported from [`packages/calcite-components/src/index.ts`](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/index.ts) to prevent build errors.** --- .../calcite-components-angular/package.json | 2 +- .../support/patchEventDetailTypeImports.ts | 44 ------------------- packages/calcite-components/package.json | 2 +- packages/calcite-components/src/index.ts | 7 +++ 4 files changed, 9 insertions(+), 46 deletions(-) delete mode 100644 packages/calcite-components-angular/support/patchEventDetailTypeImports.ts diff --git a/packages/calcite-components-angular/package.json b/packages/calcite-components-angular/package.json index 4376c8c4d6f..e95c3e1bc01 100644 --- a/packages/calcite-components-angular/package.json +++ b/packages/calcite-components-angular/package.json @@ -3,7 +3,7 @@ "private": true, "scripts": { "ng": "ng", - "prebuild": "./support/stencilDoubleBuildTypesWorkaround.sh && ts-node ./support/patchEventDetailTypeImports.ts", + "prebuild": "./support/stencilDoubleBuildTypesWorkaround.sh", "build": "ng build", "clean": "rimraf dist node_modules .turbo .angular projects/component-library/dist" }, diff --git a/packages/calcite-components-angular/support/patchEventDetailTypeImports.ts b/packages/calcite-components-angular/support/patchEventDetailTypeImports.ts deleted file mode 100644 index b937d239405..00000000000 --- a/packages/calcite-components-angular/support/patchEventDetailTypeImports.ts +++ /dev/null @@ -1,44 +0,0 @@ -// patched needed because the auto-generated code from Stencil has incorrect import paths for some event detail types -const { readFile, writeFile } = require("fs/promises"); -const { resolve } = require("path"); - -const typeImportStrings = [ - { - oldValue: "import type { HandleChange as ICalciteHandleHandleChange } from '@esri/calcite-components'", - newValue: - "import type { HandleChange as ICalciteHandleHandleChange } from '@esri/calcite-components/dist/types/components/handle/interfaces'", - }, - { - oldValue: "import type { HandleNudge as ICalciteHandleHandleNudge } from '@esri/calcite-components'", - newValue: - "import type { HandleNudge as ICalciteHandleHandleNudge } from '@esri/calcite-components/dist/types/components/handle/interfaces'", - }, - { - oldValue: "import type { DragDetail as ICalciteListDragDetail } from '@esri/calcite-components'", - newValue: - "import type { DragDetail as ICalciteListDragDetail } from '@esri/calcite-components/dist/types/utils/sortableComponent'", - }, -]; - -(async () => { - try { - const filePath = resolve( - __dirname, - "..", - "projects", - "component-library", - "src", - "lib", - "stencil-generated", - "components.ts" - ); - - let contents = await readFile(filePath, { encoding: "utf8" }); - typeImportStrings.forEach(({ oldValue, newValue }) => (contents = contents.replace(oldValue, newValue))); - - await writeFile(filePath, contents); - } catch (err) { - console.error(err); - process.exit(1); - } -})(); diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 0128b1c6c73..bf364fa432c 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -8,7 +8,7 @@ "es2015": "dist/esm/index.js", "es2017": "dist/esm/index.js", "jsnext:main": "dist/esm/index.js", - "types": "dist/types/components.d.ts", + "types": "dist/types/index.d.ts", "type": "module", "jsdelivr": "dist/calcite/calcite.js", "unpkg": "dist/calcite/calcite.js", diff --git a/packages/calcite-components/src/index.ts b/packages/calcite-components/src/index.ts index 0bc8a795235..bd9cbf776a8 100644 --- a/packages/calcite-components/src/index.ts +++ b/packages/calcite-components/src/index.ts @@ -3,3 +3,10 @@ // which enables developers to check if the asset path has been set or not export { getAssetPath } from "@stencil/core"; export * from "./components"; + +// Event detail types need to be exported from this entry point +// because that's where the Angular output target expects them to be. +// For more details, see: https://github.com/Esri/calcite-design-system/pull/8177 +export { HandleChange } from "./components/handle/interfaces"; +export { HandleNudge } from "./components/handle/interfaces"; +export { DragDetail } from "./utils/sortableComponent";