feat(compiler): include getAssetPath in generated export statement (#4683)

* feat(compiler): include `getAssetPath` in generated export statement

* add typedef for `getAssetPath`

* update typedef signature & add typedef to tests

Author: tanner-reits

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`,

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}';`,
   );
 

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",',

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();