From 694640898b9bd5653209f30978ba9d21c42bd22c Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Tue, 15 Aug 2023 12:49:38 -0400 Subject: [PATCH 1/3] feat(compiler): include `getAssetPath` in generated export statement --- .../output-targets/dist-custom-elements/index.ts | 2 +- .../test/output-targets-dist-custom-elements.spec.ts | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/compiler/output-targets/dist-custom-elements/index.ts b/src/compiler/output-targets/dist-custom-elements/index.ts index 73403269a75..46d565c714e 100644 --- a/src/compiler/output-targets/dist-custom-elements/index.ts +++ b/src/compiler/output-targets/dist-custom-elements/index.ts @@ -257,7 +257,7 @@ export const generateEntryPoint = ( // Exports that are always present exports.push( - `export { setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}';`, + `export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}';`, `export * from '${USER_INDEX_ENTRY_ID}';`, ); diff --git a/src/compiler/output-targets/test/output-targets-dist-custom-elements.spec.ts b/src/compiler/output-targets/test/output-targets-dist-custom-elements.spec.ts index 16a9f1cc42e..4bf15d644be 100644 --- a/src/compiler/output-targets/test/output-targets-dist-custom-elements.spec.ts +++ b/src/compiler/output-targets/test/output-targets-dist-custom-elements.spec.ts @@ -72,7 +72,7 @@ describe('Custom Elements output target', () => { }); expect(entryPoint).toEqual(`import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}'; -export { setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}'; +export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}'; export * from '${USER_INDEX_ENTRY_ID}'; globalScripts(); @@ -86,7 +86,7 @@ globalScripts(); }); expect(entryPoint) - .toEqual(`export { setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}'; + .toEqual(`export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}'; export * from '${USER_INDEX_ENTRY_ID}'; `); }); @@ -164,7 +164,7 @@ export * from '${USER_INDEX_ENTRY_ID}'; addCustomElementInputs(buildCtx, bundleOptions, config.outputTargets[0] as OutputTargetDistCustomElements); expect(bundleOptions.loader['\0core']).toEqual( `import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}'; -export { setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}'; +export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}'; export * from '${USER_INDEX_ENTRY_ID}'; globalScripts(); @@ -197,7 +197,7 @@ globalScripts(); addCustomElementInputs(buildCtx, bundleOptions, config.outputTargets[0] as OutputTargetDistCustomElements); expect(bundleOptions.loader['\0core']).toEqual( `import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}'; -export { setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}'; +export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}'; export * from '${USER_INDEX_ENTRY_ID}'; export { StubCmp, defineCustomElement as defineCustomElementStubCmp } from '\0StubCmp'; export { MyBestComponent, defineCustomElement as defineCustomElementMyBestComponent } from '\0MyBestComponent'; @@ -224,7 +224,7 @@ globalScripts(); addCustomElementInputs(buildCtx, bundleOptions, config.outputTargets[0] as OutputTargetDistCustomElements); expect(bundleOptions.loader['\0core']).toEqual( `import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}'; -export { setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}'; +export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}'; export * from '${USER_INDEX_ENTRY_ID}'; export { ComponentWithJsx, defineCustomElement as defineCustomElementComponentWithJsx } from '\0ComponentWithJsx'; @@ -259,7 +259,7 @@ globalScripts(); `import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}'; import { StubCmp } from '\0StubCmp'; import { MyBestComponent } from '\0MyBestComponent'; -export { setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}'; +export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}'; export * from '${USER_INDEX_ENTRY_ID}'; globalScripts(); From 81da1066d5fd5cf68374c92a375a3968fca53078 Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Tue, 15 Aug 2023 18:37:20 -0400 Subject: [PATCH 2/3] add typedef for `getAssetPath` --- .../dist-custom-elements/custom-elements-types.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts b/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts index 643bfd59f2d..fd82d718462 100644 --- a/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts +++ b/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts @@ -94,6 +94,12 @@ const generateCustomElementsTypesOutput = async ( ] : []), `/**`, + ` * Get the base path to where the assets can be found. Use \`setAssetPath(path)\``, + ` * if the path needs to be customized.`, + ` */`, + `export declare function getAssetPath(path: string): string;`, + ``, + `/**`, ` * Used to manually set the base path where assets can be found.`, ` * If the script is used as "module", it's recommended to use "import.meta.url",`, ` * such as "setAssetPath(import.meta.url)". Other options include`, From 55e141f0dc70130968add622057781b7c7019f11 Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Wed, 16 Aug 2023 15:23:21 -0400 Subject: [PATCH 3/3] update typedef signature & add typedef to tests --- .../custom-elements-types.ts | 4 ++-- .../test/custom-elements-types.spec.ts | 24 +++++++++++++++++++ 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts b/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts index fd82d718462..a2fdf9de981 100644 --- a/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts +++ b/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts @@ -94,10 +94,10 @@ const generateCustomElementsTypesOutput = async ( ] : []), `/**`, - ` * Get the base path to where the assets can be found. Use \`setAssetPath(path)\``, + ` * Get the base path to where the assets can be found. Use "setAssetPath(path)"`, ` * if the path needs to be customized.`, ` */`, - `export declare function getAssetPath(path: string): string;`, + `export declare const getAssetPath: (path: string) => string;`, ``, `/**`, ` * Used to manually set the base path where assets can be found.`, diff --git a/src/compiler/output-targets/test/custom-elements-types.spec.ts b/src/compiler/output-targets/test/custom-elements-types.spec.ts index c191434cda4..36c5cedc1a5 100644 --- a/src/compiler/output-targets/test/custom-elements-types.spec.ts +++ b/src/compiler/output-targets/test/custom-elements-types.spec.ts @@ -81,6 +81,12 @@ describe('Custom Elements Typedef generation', () => { `export { MyBestComponent as MyBestComponent } from '../types_dir/components/the-other-component/my-real-best-component';`, `export { defineCustomElement as defineCustomElementMyBestComponent } from './my-best-component';`, '', + `/**`, + ` * Get the base path to where the assets can be found. Use "setAssetPath(path)"`, + ` * if the path needs to be customized.`, + ` */`, + `export declare const getAssetPath: (path: string) => string;`, + '', '/**', ' * Used to manually set the base path where assets can be found.', ' * If the script is used as "module", it\'s recommended to use "import.meta.url",', @@ -129,6 +135,12 @@ describe('Custom Elements Typedef generation', () => { `export { MyBestComponent as MyBestComponent } from './types_dir/components/the-other-component/my-real-best-component';`, `export { defineCustomElement as defineCustomElementMyBestComponent } from './my-best-component';`, '', + `/**`, + ` * Get the base path to where the assets can be found. Use "setAssetPath(path)"`, + ` * if the path needs to be customized.`, + ` */`, + `export declare const getAssetPath: (path: string) => string;`, + '', '/**', ' * Used to manually set the base path where assets can be found.', ' * If the script is used as "module", it\'s recommended to use "import.meta.url",', @@ -188,6 +200,12 @@ describe('Custom Elements Typedef generation', () => { await generateCustomElementsTypes(config, compilerCtx, buildCtx, 'types_dir'); const expectedTypedefOutput = [ + `/**`, + ` * Get the base path to where the assets can be found. Use "setAssetPath(path)"`, + ` * if the path needs to be customized.`, + ` */`, + `export declare const getAssetPath: (path: string) => string;`, + '', '/**', ' * Used to manually set the base path where assets can be found.', ' * If the script is used as "module", it\'s recommended to use "import.meta.url",', @@ -244,6 +262,12 @@ describe('Custom Elements Typedef generation', () => { await generateCustomElementsTypes(config, compilerCtx, buildCtx, 'types_dir'); const expectedTypedefOutput = [ + `/**`, + ` * Get the base path to where the assets can be found. Use "setAssetPath(path)"`, + ` * if the path needs to be customized.`, + ` */`, + `export declare const getAssetPath: (path: string) => string;`, + '', '/**', ' * Used to manually set the base path where assets can be found.', ' * If the script is used as "module", it\'s recommended to use "import.meta.url",',