From 12fec21b2eb270cf2a8c30fa9deb09e8a49da5fd Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 8 Jan 2021 13:48:35 -0600 Subject: [PATCH] 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. --- .../custom-elements-bundle-types.ts | 26 ++++++++++-- .../dist-custom-elements-bundle/index.ts | 4 +- .../custom-elements-types.ts | 40 ++++++++++++++----- .../dist-custom-elements/index.ts | 18 ++++----- src/runtime/index.ts | 1 + src/runtime/platform-options.ts | 20 ++++++++++ 6 files changed, 84 insertions(+), 25 deletions(-) create mode 100644 src/runtime/platform-options.ts diff --git a/src/compiler/output-targets/dist-custom-elements-bundle/custom-elements-bundle-types.ts b/src/compiler/output-targets/dist-custom-elements-bundle/custom-elements-bundle-types.ts index c7888b8eeee..54f15b4d4a7 100644 --- a/src/compiler/output-targets/dist-custom-elements-bundle/custom-elements-bundle-types.ts +++ b/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) => { diff --git a/src/compiler/output-targets/dist-custom-elements-bundle/index.ts b/src/compiler/output-targets/dist-custom-elements-bundle/index.ts index 14a36393c4c..5c6e432771d 100644 --- a/src/compiler/output-targets/dist-custom-elements-bundle/index.ts +++ b/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}';`, ); 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 6ea464015ca..3f48010adf0 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 @@ -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) => { diff --git a/src/compiler/output-targets/dist-custom-elements/index.ts b/src/compiler/output-targets/dist-custom-elements/index.ts index a07203a44bb..dc953f2ad7f 100644 --- a/src/compiler/output-targets/dist-custom-elements/index.ts +++ b/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}';`, ); diff --git a/src/runtime/index.ts b/src/runtime/index.ts index ded4ce3f560..c32c7360e16 100644 --- a/src/runtime/index.ts +++ b/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'; diff --git a/src/runtime/platform-options.ts b/src/runtime/platform-options.ts new file mode 100644 index 00000000000..42e550464cd --- /dev/null +++ b/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);