feat(loader): add exclude option

Author: manucorporat

src/client/core-esm.ts

@@ -14,10 +14,14 @@ export { h } from '../renderer/vdom/h';
 
 
 export function defineCustomElement(win: Window, cmpData: d.ComponentHostData | d.ComponentHostData[], opts: CustomElementsDefineOptions = {}) {
-  const cmpDataArray = (Array.isArray(cmpData) ? cmpData : [cmpData]) as d.ComponentHostData[];
+  let cmpDataArray = (Array.isArray(cmpData) ? cmpData : [cmpData]) as d.ComponentHostData[];
   const doc = win.document;
   const hydratedCssClass = opts.hydratedCssClass || '__APP__HYDRATED__CSS__PLACEHOLDER__';
 
+  const exclude = opts['exclude'];
+  if (exclude) {
+    cmpDataArray = cmpDataArray.filter(c => exclude.indexOf(c[0]) === -1);
+  }
   const styleCmps = cmpDataArray.map(c => c[0]);
   if (styleCmps.length > 0) {
     // auto hide components until they been fully hydrated
@@ -57,7 +61,7 @@ export function defineCustomElement(win: Window, cmpData: d.ComponentHostData |
 
     function defineComponents() {
       // polyfills have been applied if need be
-      (cmpData as d.ComponentHostData[]).forEach(c => {
+      (cmpDataArray as d.ComponentHostData[]).forEach(c => {
         let HostElementConstructor: any;
 
         if (isNative(win.customElements.define)) {
@@ -129,4 +133,5 @@ export interface CustomElementsDefineOptions {
   hydratedCssClass?: string;
   namespace?: string;
   resourcesUrl?: string;
+  exclude?: string[];
 }

src/compiler/distribution/dist-esm.ts

@@ -65,15 +65,15 @@ export async function generateEsmHosts(config: d.Config, compilerCtx: d.Compiler
 
   const esmImports: EsmImport[] = Object.keys(cmpRegistry).sort().map(tagName => {
     const cmpMeta = cmpRegistry[tagName];
-    const data = JSON.stringify(formatBrowserLoaderComponent(cmpMeta));
+    const data = formatBrowserLoaderComponent(cmpMeta);
     return {
       name: dashToPascalCase(tagName),
       data,
     };
   });
 
   const hosts = [
-    generateEsmLoader(config, compilerCtx, outputTarget, esmImports),
+    generateEsmLoader(config, compilerCtx, outputTarget),
 
     generateEsmHost(config, compilerCtx, outputTarget, 'es2017', esmImports),
   ];
@@ -89,24 +89,20 @@ export async function generateEsmHosts(config: d.Config, compilerCtx: d.Compiler
 export async function generateEsmHost(config: d.Config, compilerCtx: d.CompilerCtx, outputTarget: d.OutputTargetDist, sourceTarget: d.SourceTarget, esmImports: EsmImport[]) {
   await Promise.all([
     generateEsm(config, compilerCtx, outputTarget, sourceTarget, esmImports),
-    generateDefineCustomElements(config, compilerCtx, outputTarget, sourceTarget, esmImports),
+    generateDefineCustomElements(config, compilerCtx, outputTarget, sourceTarget),
   ]);
 }
 
-async function generateDefineCustomElements(config: d.Config, compilerCtx: d.CompilerCtx, outputTarget: d.OutputTargetDist, sourceTarget: d.SourceTarget, esmImports: EsmImport[]) {
+async function generateDefineCustomElements(config: d.Config, compilerCtx: d.CompilerCtx, outputTarget: d.OutputTargetDist, sourceTarget: d.SourceTarget) {
   const componentsFileName = getComponentsEsmFileName(config);
-  const register = esmImports.map(c => `c.${c.name}`).join(',\n    ');
   const c = `
 // ${config.namespace}: Custom Elements Define Library, ES Module/${sourceTarget} Target
 
 import { defineCustomElement } from './${getCoreEsmFileName(config)}';
-import * as c from './${componentsFileName}';
-
-export * from './${componentsFileName}';
-export { defineCustomElement };
+import { COMPONENTS } from './${componentsFileName}';
 
 export function defineCustomElements(win, opts) {
-  return defineCustomElement(win, [\n    ${register}\n  ], opts);
+  return defineCustomElement(win, COMPONENTS, opts);
 }
 `;
 
@@ -118,15 +114,14 @@ async function generateEsm(config: d.Config, compilerCtx: d.CompilerCtx, outputT
   const VAR = sourceTarget === 'es5' ? 'var' : 'const';
   const indexContent = [
     `// ${config.namespace}: Host Data, ES Module/${sourceTarget} Target`,
-
-    ...esmImports.map(({name, data}) => `export ${VAR} ${name} = ${data};`)
+    `export ${VAR} COMPONENTS = ${JSON.stringify(esmImports.map(({data}) => data))}`
   ].join('\n');
 
   const componentsEsmFilePath = getComponentsEsmBuildPath(config, outputTarget, sourceTarget);
   await compilerCtx.fs.writeFile(componentsEsmFilePath, indexContent);
 }
 
-async function generateEsmLoader(config: d.Config, compilerCtx: d.CompilerCtx, outputTarget: d.OutputTargetDist, esmImports: EsmImport[]) {
+async function generateEsmLoader(config: d.Config, compilerCtx: d.CompilerCtx, outputTarget: d.OutputTargetDist) {
   const loaderPath = getLoaderEsmPath(config, outputTarget);
   const es5EntryPoint = getDefineCustomElementsPath(config, outputTarget, 'es5');
   const es2017EntryPoint = getDefineCustomElementsPath(config, outputTarget, 'es2017');
@@ -139,7 +134,7 @@ async function generateEsmLoader(config: d.Config, compilerCtx: d.CompilerCtx, o
   }, null, 2);
 
   const indexPath = config.buildEs5 ? es5EntryPoint : es2017EntryPoint;
-  const indexDtsContent = generateIndexDts(esmImports);
+  const indexDtsContent = generateIndexDts();
   const indexContent = `export * from '${normalizePath(config.sys.path.relative(loaderPath, indexPath))}';`;
   const indexES2017Content = `export * from '${normalizePath(config.sys.path.relative(loaderPath, es2017EntryPoint))}';`;
 
@@ -162,16 +157,11 @@ async function patchCollection(config: d.Config, compilerCtx: d.CompilerCtx, out
   await compilerCtx.fs.writeFile(collectionInterfacePath, '');
 }
 
-function generateIndexDts(esmImports: EsmImport[]) {
-  return [
-    'export declare function defineCustomElements(win: Window, opts?: any): Promise<void>;',
-    'export declare function defineCustomElement(win: Window, elements: any[], opts?: any): Promise<void>;',
-
-    ...esmImports.map(i => `export declare const ${i.name}: any;`)
-  ].join('\n');
+function generateIndexDts() {
+  return 'export declare function defineCustomElements(win: any, opts?: any): Promise<void>;';
 }
 
 interface EsmImport {
   name: string;
-  data: string;
+  data: any;
 }