feat(setPlatformOptions): add setPlatformOptions for ce builds

For custom element builds, export `setPlatformOptions(opts)`, which is similar to options that can be set within a lazy load `defineCustomElements()` options.

src/compiler/output-targets/dist-custom-elements-bundle/custom-elements-bundle-types.ts

@@ -3,10 +3,19 @@ import { isOutputTargetDistCustomElementsBundle } from '../output-utils';
 import { dirname, join, relative } from 'path';
 import { normalizePath, dashToPascalCase } from '@utils';
 
-export const generateCustomElementsBundleTypes = async (config: d.Config, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx, distDtsFilePath: string) => {
+export const generateCustomElementsBundleTypes = async (
+  config: d.Config,
+  compilerCtx: d.CompilerCtx,
+  buildCtx: d.BuildCtx,
+  distDtsFilePath: string,
+) => {
   const outputTargets = config.outputTargets.filter(isOutputTargetDistCustomElementsBundle);
 
-  await Promise.all(outputTargets.map(outputTarget => generateCustomElementsTypesOutput(config, compilerCtx, buildCtx, distDtsFilePath, outputTarget)));
+  await Promise.all(
+    outputTargets.map(outputTarget =>
+      generateCustomElementsTypesOutput(config, compilerCtx, buildCtx, distDtsFilePath, outputTarget),
+    ),
+  );
 };
 
 const generateCustomElementsTypesOutput = async (
@@ -51,8 +60,15 @@ const generateCustomElementsTypesOutput = async (
     ` */`,
     `export declare const setAssetPath: (path: string) => void;`,
     ``,
+    `export interface SetPlatformOptions {`,
+    `  raf?: (c: FrameRequestCallback) => number;`,
+    `  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;`,
+    `  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;`,
+    `}`,
+    `export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;`,
+    ``,
     `export type { Components, JSX };`,
-    ``
+    ``,
   ];
 
   const usersIndexJsPath = join(config.srcDir, 'index.ts');
@@ -64,7 +80,9 @@ const generateCustomElementsTypesOutput = async (
     code.push(`export * from '${componentsDtsRelPath}';`);
   }
 
-  await compilerCtx.fs.writeFile(customElementsDtsPath, code.join('\n') + `\n`, { outputTargetType: outputTarget.type });
+  await compilerCtx.fs.writeFile(customElementsDtsPath, code.join('\n') + `\n`, {
+    outputTargetType: outputTarget.type,
+  });
 };
 
 const generateCustomElementType = (cmp: d.ComponentCompilerMeta) => {

src/compiler/output-targets/dist-custom-elements-bundle/index.ts

@@ -66,7 +66,7 @@ const bundleCustomElements = async (
         hoistTransitiveImports: false,
         preferConst: true,
       });
-      
+
       const minify = outputTarget.externalRuntime || outputTarget.minify !== true ? false : config.minifyJs;
       const files = rollupOutput.output.map(async bundle => {
         if (bundle.type === 'chunk') {
@@ -99,7 +99,7 @@ const generateEntryPoint = (outputTarget: d.OutputTargetDistCustomElementsBundle
 
   imp.push(
     `import { proxyCustomElement } from '${STENCIL_INTERNAL_CLIENT_ID}';`,
-    `export { setAssetPath } from '${STENCIL_INTERNAL_CLIENT_ID}';`,
+    `export { setAssetPath, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}';`,
     `export * from '${USER_INDEX_ENTRY_ID}';`,
   );
 

src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts

@@ -3,10 +3,19 @@ import { isOutputTargetDistCustomElements } from '../output-utils';
 import { dirname, join, relative } from 'path';
 import { normalizePath, dashToPascalCase } from '@utils';
 
-export const generateCustomElementsTypes = async (config: d.Config, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx, distDtsFilePath: string) => {
+export const generateCustomElementsTypes = async (
+  config: d.Config,
+  compilerCtx: d.CompilerCtx,
+  buildCtx: d.BuildCtx,
+  distDtsFilePath: string,
+) => {
   const outputTargets = config.outputTargets.filter(isOutputTargetDistCustomElements);
 
-  await Promise.all(outputTargets.map(outputTarget => generateCustomElementsTypesOutput(config, compilerCtx, buildCtx, distDtsFilePath, outputTarget)));
+  await Promise.all(
+    outputTargets.map(outputTarget =>
+      generateCustomElementsTypesOutput(config, compilerCtx, buildCtx, distDtsFilePath, outputTarget),
+    ),
+  );
 };
 
 export const generateCustomElementsTypesOutput = async (
@@ -36,8 +45,15 @@ export const generateCustomElementsTypesOutput = async (
     ` */`,
     `export declare const setAssetPath: (path: string) => void;`,
     ``,
+    `export interface SetPlatformOptions {`,
+    `  raf?: (c: FrameRequestCallback) => number;`,
+    `  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;`,
+    `  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;`,
+    `}`,
+    `export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;`,
+    ``,
     `export type { Components, JSX };`,
-    ``
+    ``,
   ];
 
   const usersIndexJsPath = join(config.srcDir, 'index.ts');
@@ -49,15 +65,19 @@ export const generateCustomElementsTypesOutput = async (
     code.push(`export * from '${componentsDtsRelPath}';`);
   }
 
-  await compilerCtx.fs.writeFile(customElementsDtsPath, code.join('\n') + `\n`, { outputTargetType: outputTarget.type });
+  await compilerCtx.fs.writeFile(customElementsDtsPath, code.join('\n') + `\n`, {
+    outputTargetType: outputTarget.type,
+  });
 
   const components = buildCtx.components.filter(m => !m.isCollectionDependency);
-  await Promise.all(components.map(async cmp => {
-    const dtsCode = generateCustomElementType(componentsDtsRelPath, cmp);
-    const fileName = `${cmp.tagName}.d.ts`;
-    const filePath = join(outputTarget.dir, fileName);
-    await compilerCtx.fs.writeFile(filePath, dtsCode, { outputTargetType: outputTarget.type });
-  }));
+  await Promise.all(
+    components.map(async cmp => {
+      const dtsCode = generateCustomElementType(componentsDtsRelPath, cmp);
+      const fileName = `${cmp.tagName}.d.ts`;
+      const filePath = join(outputTarget.dir, fileName);
+      await compilerCtx.fs.writeFile(filePath, dtsCode, { outputTargetType: outputTarget.type });
+    }),
+  );
 };
 
 const generateCustomElementType = (componentsDtsRelPath: string, cmp: d.ComponentCompilerMeta) => {

src/compiler/output-targets/dist-custom-elements/index.ts

@@ -11,11 +11,7 @@ import { removeCollectionImports } from '../../transformers/remove-collection-im
 import { STENCIL_INTERNAL_CLIENT_ID, USER_INDEX_ENTRY_ID, STENCIL_APP_GLOBALS_ID } from '../../bundle/entry-alias-ids';
 import { updateStencilCoreImports } from '../../transformers/update-stencil-core-import';
 
-export const outputCustomElements = async (
-  config: d.Config,
-  compilerCtx: d.CompilerCtx,
-  buildCtx: d.BuildCtx,
-) => {
+export const outputCustomElements = async (config: d.Config, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx) => {
   if (!config.buildDist) {
     return;
   }
@@ -94,14 +90,18 @@ const bundleCustomElements = async (
   }
 };
 
-const addCustomElementInputs = (_outputTarget: d.OutputTargetDistCustomElements, buildCtx: d.BuildCtx,  bundleOpts: BundleOptions) => {
+const addCustomElementInputs = (
+  _outputTarget: d.OutputTargetDistCustomElements,
+  buildCtx: d.BuildCtx,
+  bundleOpts: BundleOptions,
+) => {
   const components = buildCtx.components;
   components.forEach(cmp => {
     const exp: string[] = [];
     const exportName = dashToPascalCase(cmp.tagName);
     const importName = cmp.componentClassName;
     const importAs = `$Cmp${exportName}`;
-    const coreKey = `\0${exportName}`
+    const coreKey = `\0${exportName}`;
 
     if (cmp.isPlain) {
       exp.push(`export { ${importName} as ${exportName} } from '${cmp.sourceFilePath}';`);
@@ -116,14 +116,14 @@ const addCustomElementInputs = (_outputTarget: d.OutputTargetDistCustomElements,
     bundleOpts.inputs[cmp.tagName] = coreKey;
     bundleOpts.loader[coreKey] = exp.join('\n');
   });
-}
+};
 
 const generateEntryPoint = (outputTarget: d.OutputTargetDistCustomElements, _buildCtx: d.BuildCtx) => {
   const imp: string[] = [];
   const exp: string[] = [];
 
   imp.push(
-    `export { setAssetPath } from '${STENCIL_INTERNAL_CLIENT_ID}';`,
+    `export { setAssetPath, setPlatformOptions } from '${STENCIL_INTERNAL_CLIENT_ID}';`,
     `export * from '${USER_INDEX_ENTRY_ID}';`,
   );
 

src/runtime/index.ts

@@ -16,4 +16,5 @@ export { forceUpdate, postUpdateComponent, getRenderingRef } from './update-comp
 export { proxyComponent } from './proxy-component';
 export { renderVdom } from './vdom/vdom-render';
 export { setMode, getMode } from './mode';
+export { setPlatformOptions } from './platform-options';
 export { Fragment } from './fragment';

src/runtime/platform-options.ts

@@ -0,0 +1,20 @@
+import { plt } from '@platform';
+
+interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (
+    el: EventTarget,
+    eventName: string,
+    listener: EventListenerOrEventListenerObject,
+    options: boolean | AddEventListenerOptions,
+  ) => void;
+  rel?: (
+    el: EventTarget,
+    eventName: string,
+    listener: EventListenerOrEventListenerObject,
+    options: boolean | AddEventListenerOptions,
+  ) => void;
+  ce?: (eventName: string, opts?: any) => CustomEvent;
+}
+
+export const setPlatformOptions = (opts: SetPlatformOptions) => Object.assign(plt, opts);