From b354444b4b51c926acb7c6ff906833c0186c70f2 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 26 Jul 2019 10:34:14 -0500 Subject: [PATCH] feat(compiler): add component compiler metadata to results --- .../browser/browser-compile-options.ts | 39 +++++++++---------- src/compiler/browser/browser-compile.ts | 15 +++++-- .../update-to-lazy-component.ts | 1 + .../transformers/add-component-meta-static.ts | 35 ++++++++++------- .../parse-collection-components.ts | 1 + .../tranform-to-hydrate-component.ts | 1 + .../component-native/native-component.ts | 12 +----- .../tranform-to-native-component.ts | 3 +- .../transformers/static-to-meta/component.ts | 2 +- .../transformers/static-to-meta/styles.ts | 12 ++---- src/compiler/transpile/transpile-service.ts | 1 + src/declarations/browser-compile.ts | 4 +- src/declarations/transpile.ts | 3 +- src/testing/test-transpile.ts | 3 +- .../src/components/app-root/app-root.css | 2 +- .../src/components/app-root/app-root.tsx | 13 ++++++- 16 files changed, 83 insertions(+), 64 deletions(-) diff --git a/src/compiler/browser/browser-compile-options.ts b/src/compiler/browser/browser-compile-options.ts index 85e92a83b2d..5176228fa16 100644 --- a/src/compiler/browser/browser-compile-options.ts +++ b/src/compiler/browser/browser-compile-options.ts @@ -6,32 +6,30 @@ import ts from 'typescript'; export const getCompileOptions = (input: d.CompileOptions) => { const rtn: d.CompileOptions = { - componentExport: (typeof input.componentExport === 'string' ? input.componentExport.toLowerCase().trim() : ''), - componentMetadata: (typeof input.componentMetadata === 'string' ? input.componentMetadata.toLowerCase().trim() : ''), - module: (typeof input.module === 'string' ? input.module.toLowerCase().trim() : ''), - script: (typeof input.script === 'string' ? input.script.toLowerCase().trim() : ''), - style: (typeof input.style === 'string' ? input.style.toLowerCase().trim() : '') + componentExport: getConfig(input.componentExport, VALID_EXPORT, 'customelement'), + componentMetadata: getConfig(input.componentMetadata, VALID_METADATA, null), + proxy: getConfig(input.proxy, VALID_PROXY, 'defineproperty'), + module: getConfig(input.module, VALID_MODULE, 'esm'), + script: getConfig(input.script, VALID_SCRIPT, 'es2017'), + style: getConfig(input.style, VALID_STYLE, 'import') }; - - if (!VALID_METADATA.has(rtn.componentMetadata)) { - rtn.componentMetadata = 'proxy'; - } - - if (!VALID_OUTPUT.has(rtn.componentExport)) { - rtn.componentExport = 'customelement'; - } - - if (!VALID_STYLE.has(rtn.style)) { - rtn.style = 'import'; - } - return rtn; }; +const getConfig = (value: any, validValues: Set, defaultValue: string) => { + value = (typeof value === 'string' ? value.toLowerCase().trim() : null); + if (validValues.has(value)) { + return value; + } + return defaultValue; +}; -const VALID_METADATA = new Set(['pending', 'static']); -const VALID_OUTPUT = new Set(['customelement', 'module']); +const VALID_PROXY = new Set(['defineproperty', null]); +const VALID_METADATA = new Set(['runtimestatic', 'compilerstatic', null]); +const VALID_EXPORT = new Set(['customelement', 'module']); const VALID_STYLE = new Set(['import', 'inline']); +const VALID_MODULE = new Set(['esm', 'cjs']); +const VALID_SCRIPT = new Set(['latest', 'esnext', 'es2017', 'es2015', 'es5']); export const getTransformOptions = (compilerOpts: d.CompileOptions) => { @@ -64,6 +62,7 @@ export const getTransformOptions = (compilerOpts: d.CompileOptions) => { coreImportPath: '@stencil/core/internal/client', componentExport: null, componentMetadata: compilerOpts.componentMetadata as any, + proxy: compilerOpts.proxy as any, scopeCss: true, style: compilerOpts.style as any, }; diff --git a/src/compiler/browser/browser-compile.ts b/src/compiler/browser/browser-compile.ts index 34169e2e8bb..225aceebc91 100644 --- a/src/compiler/browser/browser-compile.ts +++ b/src/compiler/browser/browser-compile.ts @@ -1,6 +1,7 @@ import * as d from '../../declarations'; import { catchError } from '@utils'; import { getCompileOptions, getCompilerConfig, getTransformOptions } from './browser-compile-options'; +import { getPublicCompilerMeta } from '../transformers/add-component-meta-static'; import { initTypescript } from '../../sys/browser/browser-typescript'; import { transpileModule } from '../transpile/transpile-module'; @@ -13,7 +14,8 @@ export const compile = async (code: string, opts: d.CompileOptions = {}): Promis inputFilePath: (typeof opts.file === 'string' ? opts.file.trim() : 'module.tsx'), outputFilePath: null, inputOptions: null, - imports: [] + imports: [], + componentMeta: [] }; try { @@ -38,10 +40,15 @@ export const compile = async (code: string, opts: d.CompileOptions = {}): Promis results.inputFilePath = transpileResults.sourceFilePath; } - results.outputFilePath = transpileResults.moduleFile.jsFilePath; + const moduleFile = transpileResults.moduleFile; + if (moduleFile) { + results.outputFilePath = moduleFile.jsFilePath; - if (transpileResults.moduleFile) { - transpileResults.moduleFile.originalImports.forEach(originalImport => { + moduleFile.cmps.forEach(cmp => { + results.componentMeta.push(getPublicCompilerMeta(cmp)); + }); + + moduleFile.originalImports.forEach(originalImport => { results.imports.push({ path: originalImport }); diff --git a/src/compiler/component-lazy/update-to-lazy-component.ts b/src/compiler/component-lazy/update-to-lazy-component.ts index 9f649272a2b..7dbcd94c442 100644 --- a/src/compiler/component-lazy/update-to-lazy-component.ts +++ b/src/compiler/component-lazy/update-to-lazy-component.ts @@ -20,6 +20,7 @@ export const updateToLazyComponent = async (config: d.Config, compilerCtx: d.Com coreImportPath: '@stencil/core', componentExport: null, componentMetadata: null, + proxy: null, scopeCss: false, style: 'inline' }; diff --git a/src/compiler/transformers/add-component-meta-static.ts b/src/compiler/transformers/add-component-meta-static.ts index 45ed8d09f90..e0272b52ac9 100644 --- a/src/compiler/transformers/add-component-meta-static.ts +++ b/src/compiler/transformers/add-component-meta-static.ts @@ -4,20 +4,9 @@ import ts from 'typescript'; export const addComponentMetaStatic = (cmpNode: ts.ClassDeclaration, cmpMeta: d.ComponentCompilerMeta) => { - const copyCmp = Object.assign({}, cmpMeta); - - // no need to copy all compiler meta data to the static getter - delete copyCmp.assetsDirs; - delete copyCmp.dependencies; - delete copyCmp.excludeFromCollection; - delete copyCmp.isCollectionDependency; - delete copyCmp.docs; - delete copyCmp.jsFilePath; - delete copyCmp.potentialCmpRefs; - delete copyCmp.styleDocs; - delete copyCmp.sourceFilePath; - - const cmpMetaStaticProp = createStaticGetter('COMPILER_META', convertValueToLiteral(copyCmp)); + const publicCompilerMeta = getPublicCompilerMeta(cmpMeta); + + const cmpMetaStaticProp = createStaticGetter('COMPILER_META', convertValueToLiteral(publicCompilerMeta)); const classMembers = [...cmpNode.members, cmpMetaStaticProp]; return ts.updateClassDeclaration( @@ -30,3 +19,21 @@ export const addComponentMetaStatic = (cmpNode: ts.ClassDeclaration, cmpMeta: d. classMembers ); }; + + +export const getPublicCompilerMeta = (cmpMeta: d.ComponentCompilerMeta) => { + const publicCompilerMeta = Object.assign({}, cmpMeta); + + // no need to copy all compiler meta data + delete publicCompilerMeta.assetsDirs; + delete publicCompilerMeta.dependencies; + delete publicCompilerMeta.excludeFromCollection; + delete publicCompilerMeta.isCollectionDependency; + delete publicCompilerMeta.docs; + delete publicCompilerMeta.jsFilePath; + delete publicCompilerMeta.potentialCmpRefs; + delete publicCompilerMeta.styleDocs; + delete publicCompilerMeta.sourceFilePath; + + return publicCompilerMeta; +}; diff --git a/src/compiler/transformers/collections/parse-collection-components.ts b/src/compiler/transformers/collections/parse-collection-components.ts index b2e392ba60a..05f3755a325 100644 --- a/src/compiler/transformers/collections/parse-collection-components.ts +++ b/src/compiler/transformers/collections/parse-collection-components.ts @@ -68,6 +68,7 @@ function transpileCollectionEntry(config: d.Config, compilerCtx: d.CompilerCtx, coreImportPath: '@stencil/core', componentExport: null, componentMetadata: null, + proxy: null, scopeCss: false, style: 'inline' }) diff --git a/src/compiler/transformers/component-hydrate/tranform-to-hydrate-component.ts b/src/compiler/transformers/component-hydrate/tranform-to-hydrate-component.ts index c6888aabbea..c2031ae9d32 100644 --- a/src/compiler/transformers/component-hydrate/tranform-to-hydrate-component.ts +++ b/src/compiler/transformers/component-hydrate/tranform-to-hydrate-component.ts @@ -15,6 +15,7 @@ export const transformToHydrateComponentText = (compilerCtx: d.CompilerCtx, buil coreImportPath: '@stencil/core', componentExport: null, componentMetadata: null, + proxy: null, scopeCss: false, style: 'inline' }; diff --git a/src/compiler/transformers/component-native/native-component.ts b/src/compiler/transformers/component-native/native-component.ts index 5b37e2dfc7b..e2ee70ae121 100644 --- a/src/compiler/transformers/component-native/native-component.ts +++ b/src/compiler/transformers/component-native/native-component.ts @@ -3,11 +3,9 @@ import { addNativeConnectedCallback } from './native-connected-callback'; import { addNativeElementGetter } from './native-element-getter'; import { addWatchers } from '../watcher-meta-transform'; import { createStaticGetter } from '../transform-utils'; -import { getScopeId } from '../../style/scope-css'; import { getStyleImportPath } from '../static-to-meta/styles'; import { HTML_ELEMENT, RUNTIME_APIS, addCoreRuntimeApi } from '../core-runtime-apis'; import { removeStaticMetaProperties } from '../remove-static-meta-properties'; -import { scopeCss } from '../../../utils/shadow-css'; import { transformHostData } from '../host-data-transform'; import { updateNativeConstructor } from './native-constructor'; import ts from 'typescript'; @@ -78,19 +76,13 @@ export const addStaticStyle = (transformOpts: d.TransformOptions, classMembers: } if (typeof style.styleStr === 'string') { - let styleStr = style.styleStr; - - if (transformOpts.scopeCss && cmp.encapsulation === 'scoped') { - const scopeId = getScopeId(cmp.tagName); - styleStr = scopeCss(styleStr, scopeId, false); - } - classMembers.push(createStaticGetter('style', ts.createStringLiteral(styleStr))); + classMembers.push(createStaticGetter('style', ts.createStringLiteral(style.styleStr))); } else if (typeof style.styleIdentifier === 'string') { let rtnExpr: ts.Expression; if (transformOpts.module === ts.ModuleKind.CommonJS && style.externalStyles.length > 0) { - const importPath = getStyleImportPath(cmp, style); + const importPath = getStyleImportPath(style); rtnExpr = ts.createCall( ts.createIdentifier('require'), diff --git a/src/compiler/transformers/component-native/tranform-to-native-component.ts b/src/compiler/transformers/component-native/tranform-to-native-component.ts index a21a5684d3c..342ca95da32 100644 --- a/src/compiler/transformers/component-native/tranform-to-native-component.ts +++ b/src/compiler/transformers/component-native/tranform-to-native-component.ts @@ -17,6 +17,7 @@ export const transformToNativeComponentText = (compilerCtx: d.CompilerCtx, build coreImportPath: '@stencil/core', componentExport: null, componentMetadata: null, + proxy: null, scopeCss: false, style: 'inline' }; @@ -77,7 +78,7 @@ export const nativeComponentTransform = (compilerCtx: d.CompilerCtx, transformOp // define custom element, and remove "export" from components tsSourceFile = defineCustomElement(tsSourceFile, moduleFile, transformOpts); - } else if (transformOpts.componentMetadata === 'proxy') { + } else if (transformOpts.proxy === 'defineproperty') { // exporting as a module, but also add the component proxy fn tsSourceFile = addModuleMetadataProxies(tsSourceFile, moduleFile); } diff --git a/src/compiler/transformers/static-to-meta/component.ts b/src/compiler/transformers/static-to-meta/component.ts index fd150cd633d..72aeaeff9b6 100644 --- a/src/compiler/transformers/static-to-meta/component.ts +++ b/src/compiler/transformers/static-to-meta/component.ts @@ -130,7 +130,7 @@ export const parseStaticComponentMeta = (config: d.Config, compilerCtx: d.Compil cmp.potentialCmpRefs = unique(cmp.potentialCmpRefs); setComponentBuildConditionals(cmp); - if (transformOpts.componentMetadata === 'static') { + if (transformOpts.componentMetadata === 'compilerstatic') { cmpNode = addComponentMetaStatic(cmpNode, cmp); } diff --git a/src/compiler/transformers/static-to-meta/styles.ts b/src/compiler/transformers/static-to-meta/styles.ts index 6ace0ca40c3..3ce7e311e09 100644 --- a/src/compiler/transformers/static-to-meta/styles.ts +++ b/src/compiler/transformers/static-to-meta/styles.ts @@ -103,7 +103,7 @@ const addEsmStyleImports = (tsSourceFile: ts.SourceFile, moduleFile: d.Module) = moduleFile.cmps.forEach(cmp => { cmp.styles.forEach(style => { if (style.styleIdentifier && style.externalStyles.length > 0) { - styleImports.push(createStyleImport(cmp, style)); + styleImports.push(createStyleImport(style)); } }); }); @@ -127,10 +127,10 @@ const addEsmStyleImports = (tsSourceFile: ts.SourceFile, moduleFile: d.Module) = }; -const createStyleImport = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler) => { +const createStyleImport = (style: d.StyleCompiler) => { const importName = ts.createIdentifier(style.styleIdentifier); - let importPath = getStyleImportPath(cmp, style); + let importPath = getStyleImportPath(style); if (!importPath.startsWith('.') && !importPath.startsWith('/') && !importPath.startsWith('\\')) { importPath = './' + importPath; } @@ -146,15 +146,11 @@ const createStyleImport = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler) ); }; -export const getStyleImportPath = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler) => { +export const getStyleImportPath = (style: d.StyleCompiler) => { let importPath = style.externalStyles[0].originalComponentPath; if (!importPath.startsWith('.') && !importPath.startsWith('/') && !importPath.startsWith('\\')) { importPath = './' + importPath; } - if (cmp.encapsulation === 'scoped') { - importPath += '#scopedcss'; - } - return importPath; }; diff --git a/src/compiler/transpile/transpile-service.ts b/src/compiler/transpile/transpile-service.ts index b41fc8f5e04..d3c78421749 100644 --- a/src/compiler/transpile/transpile-service.ts +++ b/src/compiler/transpile/transpile-service.ts @@ -120,6 +120,7 @@ const buildTsService = async (config: d.Config, compilerCtx: d.CompilerCtx, buil coreImportPath: '@stencil/core', componentExport: null, componentMetadata: null, + proxy: null, scopeCss: false, style: 'inline' }; diff --git a/src/declarations/browser-compile.ts b/src/declarations/browser-compile.ts index 9db1a1198b7..b4ffe79ad2f 100644 --- a/src/declarations/browser-compile.ts +++ b/src/declarations/browser-compile.ts @@ -2,7 +2,8 @@ import * as d from '.'; export interface CompileOptions { file?: string; - componentMetadata?: 'proxy' | 'static' | string | undefined; + componentMetadata?: 'runtimestatic' | 'compilerstatic' | string | undefined; + proxy?: 'defineproperty' | string | undefined; module?: 'cjs' | 'esm' | string; componentExport?: 'customelement' | 'module' | string | undefined; script?: CompileScript; @@ -17,6 +18,7 @@ export interface CompileResults { outputFilePath: string; inputOptions: CompileOptions; imports: { path: string; }[]; + componentMeta: any[]; } export interface CompileScriptMinifyOptions { diff --git a/src/declarations/transpile.ts b/src/declarations/transpile.ts index b84e32e6d56..07dfab55968 100644 --- a/src/declarations/transpile.ts +++ b/src/declarations/transpile.ts @@ -22,7 +22,8 @@ export interface ValidateTypesResults { export interface TransformOptions extends ts.CompilerOptions { coreImportPath: string; componentExport: 'lazy' | 'native' | 'customelement' | null; - componentMetadata: 'proxy' | 'static' | null; + componentMetadata: 'runtimestatic' | 'compilerstatic' | null; + proxy: 'defineproperty' | null; scopeCss: boolean; style: 'import' | 'inline' | null; } diff --git a/src/testing/test-transpile.ts b/src/testing/test-transpile.ts index 727e10ad5d0..f19789b5410 100644 --- a/src/testing/test-transpile.ts +++ b/src/testing/test-transpile.ts @@ -22,7 +22,8 @@ const TRANSPILE_CONFIG: d.Config = { const DEFAULT_TRANSFORM_OPTS: d.TransformOptions = { coreImportPath: '@stencil/core', componentExport: null, - componentMetadata: 'static', + componentMetadata: 'compilerstatic', + proxy: null, scopeCss: false, style: null, transformOutput: 'lazy' diff --git a/test/browser-compile/src/components/app-root/app-root.css b/test/browser-compile/src/components/app-root/app-root.css index 7f6c17fbc2a..50360bf9606 100644 --- a/test/browser-compile/src/components/app-root/app-root.css +++ b/test/browser-compile/src/components/app-root/app-root.css @@ -52,7 +52,7 @@ textarea { } .source textarea { - height: calc(100% - 195px); + height: calc(100% - 215px); } .build textarea { diff --git a/test/browser-compile/src/components/app-root/app-root.tsx b/test/browser-compile/src/components/app-root/app-root.tsx index c59beb66761..4513ecaa46d 100644 --- a/test/browser-compile/src/components/app-root/app-root.tsx +++ b/test/browser-compile/src/components/app-root/app-root.tsx @@ -16,6 +16,7 @@ export class AppRoot { bundledInput: HTMLTextAreaElement; htmlCodeInput: HTMLTextAreaElement; componentMetadata: HTMLSelectElement; + proxy: HTMLSelectElement; module: HTMLSelectElement; script: HTMLSelectElement; componentExport: HTMLSelectElement; @@ -57,6 +58,7 @@ export class AppRoot { file: this.file.value, componentExport: this.componentExport.value, componentMetadata: this.componentMetadata.value, + proxy: this.componentMetadata.value, module: this.module.value, script: this.script.value, style: this.style.value @@ -260,11 +262,18 @@ export class AppRoot { +