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..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,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 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",`, ` * such as "setAssetPath(import.meta.url)". Other options include`, 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/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",', 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();