Skip to content

Commit

Permalink
fix(compiler): fix prerendering in next compiler
Browse files Browse the repository at this point in the history
  • Loading branch information
manucorporat committed Dec 3, 2019
1 parent b99344f commit 4669ad9
Show file tree
Hide file tree
Showing 6 changed files with 123 additions and 50 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import * as d from '../../../declarations';
import { BundleOptions } from '../../bundle/bundle-interface';
import { getBuildFeatures } from '../../build/app-data';
import { getRollupOptions } from '../../bundle/bundle-output';
import { hydrateComponentTransform } from '../../transformers/component-hydrate/tranform-to-hydrate-component';

import { loadRollupDiagnostics } from '@utils';
import { hydrateComponentTransform } from '../../../compiler/transformers/component-hydrate/tranform-to-hydrate-component';
import { rollup } from 'rollup';
import { STENCIL_INTERNAL_HYDRATE_ID } from '../../bundle/entry-alias-ids';
import { updateStencilCoreImports } from '../../../compiler/transformers/update-stencil-core-import';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as d from '../../../declarations';
import { bundleHydrateFactory } from './bundle-hydrate-factory';
import { DEFAULT_STYLE_MODE, catchError, createOnWarnFn, loadRollupDiagnostics } from '@utils';
import { catchError, createOnWarnFn, loadRollupDiagnostics } from '@utils';
import { getBuildFeatures, updateBuildConditionals } from '../../build/app-data';
import { HYDRATE_FACTORY_INTRO, HYDRATE_FACTORY_OUTRO } from './hydrate-factory-closure';
import { updateToHydrateComponents } from './update-to-hydrate-components';
Expand Down Expand Up @@ -69,7 +69,7 @@ const generateHydrateFactory = async (config: d.Config, compilerCtx: d.CompilerC
const cmps = buildCtx.components;
const build = getBuildConditionals(config, cmps);

const appFactoryEntryCode = await generateHydrateFactoryEntry(compilerCtx, buildCtx);
const appFactoryEntryCode = await generateHydrateFactoryEntry(buildCtx);

const rollupFactoryBuild = await bundleHydrateFactory(config, compilerCtx, buildCtx, build, appFactoryEntryCode);
if (rollupFactoryBuild != null) {
Expand All @@ -95,9 +95,9 @@ const generateHydrateFactory = async (config: d.Config, compilerCtx: d.CompilerC
};


const generateHydrateFactoryEntry = async (compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx) => {
const generateHydrateFactoryEntry = async (buildCtx: d.BuildCtx) => {
const cmps = buildCtx.components;
const hydrateCmps = await updateToHydrateComponents(compilerCtx, buildCtx, cmps);
const hydrateCmps = await updateToHydrateComponents(cmps);
const s = new MagicString('');

s.append(`import { hydrateApp, registerComponents, styles } from '${STENCIL_INTERNAL_PLATFORM_ID}';\n`);
Expand All @@ -109,24 +109,6 @@ const generateHydrateFactoryEntry = async (compilerCtx: d.CompilerCtx, buildCtx:
s.append(` ${cmpData.uniqueComponentClassName},\n`);
});
s.append(`]);\n`);

await buildCtx.stylesPromise;

hydrateCmps.forEach(cmpData => {
cmpData.cmp.styles.forEach(style => {
let scopeId = 'sc-' + cmpData.cmp.tagName;
if (style.modeName !== DEFAULT_STYLE_MODE) {
scopeId += `-${style.modeName}`;
}

if (typeof style.compiledStyleTextScopedCommented === 'string') {
s.append(`styles.set('${scopeId}','${style.compiledStyleTextScopedCommented}');\n`);
} else {
s.append(`styles.set('${scopeId}','${style.compiledStyleTextScoped}');\n`);
}
});
});

s.append(`export { hydrateApp }\n`);

return s.toString();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,32 +1,18 @@
import * as d from '../../../declarations';
import { compilerBuild } from '../../../version';
import { dashToPascalCase, sortBy, toTitleCase } from '@utils';
import { transformToHydrateComponentText } from '../../../compiler/transformers/component-hydrate/tranform-to-hydrate-component';
import { basename, dirname, join } from 'path';


export const updateToHydrateComponents = async (compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx, cmps: d.ComponentCompilerMeta[]) => {
export const updateToHydrateComponents = async (cmps: d.ComponentCompilerMeta[]) => {
const hydrateCmps = await Promise.all(
cmps.map(cmp => updateToHydrateComponent(compilerCtx, buildCtx, cmp))
cmps.map(updateToHydrateComponent)
);
return sortBy(hydrateCmps, c => c.cmp.componentClassName);
};


const updateToHydrateComponent = async (compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx, cmp: d.ComponentCompilerMeta) => {
const moduleFile = compilerCtx.moduleMap.get(cmp.sourceFilePath);

const inputFilePath = cmp.jsFilePath;
const inputFileDir = dirname(inputFilePath);
const inputFileName = basename(inputFilePath);
const inputJsText = moduleFile.staticSourceFileText;

const cacheKey = await compilerCtx.cache.createKey('hydrate', compilerBuild.buildId, compilerBuild.transpilerId, inputJsText);
const outputFileName = `${cacheKey}-${inputFileName}`;
const outputFilePath = join(inputFileDir, outputFileName);

const updateToHydrateComponent = async (cmp: d.ComponentCompilerMeta) => {
const cmpData: d.ComponentCompilerData = {
filePath: outputFilePath,
filePath: cmp.sourceFilePath,
exportLine: ``,
cmp: cmp,
uniqueComponentClassName: ``,
Expand All @@ -43,14 +29,5 @@ const updateToHydrateComponent = async (compilerCtx: d.CompilerCtx, buildCtx: d.
cmpData.importLine = `import { ${cmpData.uniqueComponentClassName} } from '${cmpData.filePath}';`;
}

let outputJsText = await compilerCtx.cache.get(cacheKey);
if (outputJsText == null) {
outputJsText = transformToHydrateComponentText(compilerCtx, buildCtx, cmp, inputJsText);

await compilerCtx.cache.put(cacheKey, outputJsText);
}

await compilerCtx.fs.writeFile(outputFilePath, outputJsText, { inMemoryOnly: true });

return cmpData;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as d from '../../../declarations';
import { addLazyElementGetter } from '../../../compiler/transformers/component-lazy/lazy-element-getter';
import { addHydrateRuntimeCmpMeta } from './hydrate-runtime-cmp-meta';
import { addWatchers } from '../../../compiler/transformers/watcher-meta-transform';
import { removeStaticMetaProperties } from '../../../compiler/transformers/remove-static-meta-properties';
import { transformHostData } from '../../../compiler/transformers/host-data-transform';
import { updateLazyComponentConstructor } from '../../../compiler/transformers/component-lazy/lazy-constructor';
import ts from 'typescript';


export const updateHydrateComponentClass = (classNode: ts.ClassDeclaration, moduleFile: d.Module, cmp: d.ComponentCompilerMeta) => {
return ts.updateClassDeclaration(
classNode,
classNode.decorators,
classNode.modifiers,
classNode.name,
classNode.typeParameters,
classNode.heritageClauses,
updateHydrateHostComponentMembers(classNode, moduleFile, cmp)
);
};


const updateHydrateHostComponentMembers = (classNode: ts.ClassDeclaration, moduleFile: d.Module, cmp: d.ComponentCompilerMeta) => {
const classMembers = removeStaticMetaProperties(classNode);

updateLazyComponentConstructor(classMembers, moduleFile, cmp);
addLazyElementGetter(classMembers, moduleFile, cmp);
addWatchers(classMembers, cmp);
addHydrateRuntimeCmpMeta(classMembers, cmp);
transformHostData(classMembers, moduleFile);

return classMembers;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import * as d from '../../../declarations';
import { CMP_FLAGS } from '@utils';
import { convertValueToLiteral, createStaticGetter } from '../../../compiler/transformers/transform-utils';
import ts from 'typescript';
import { addStaticStyle } from '../../../compiler_next/transformers/add-static-style';
import { formatComponentRuntimeMeta } from '../../../compiler/app-core/format-component-runtime-meta';


export const addHydrateRuntimeCmpMeta = (classMembers: ts.ClassElement[], cmp: d.ComponentCompilerMeta) => {
const compactMeta: d.ComponentRuntimeMetaCompact = formatComponentRuntimeMeta(cmp, true);
const cmpMeta: d.ComponentRuntimeMeta = {
$flags$: compactMeta[0],
$tagName$: compactMeta[1],
$members$: compactMeta[2],
$listeners$: compactMeta[3],
$lazyBundleIds$: fakeBundleIds(cmp),
$attrsToReflect$: []
};
// We always need shadow-dom shim in hydrate runtime
if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) {
cmpMeta.$flags$ |= CMP_FLAGS.needsShadowDomShim;
}
const staticMember = createStaticGetter('cmpMeta', convertValueToLiteral(cmpMeta));
addStaticStyle(classMembers, cmp);

classMembers.push(staticMember);
};

const fakeBundleIds = (cmp: d.ComponentCompilerMeta) => {
if (cmp.hasMode) {
const modes: any = {};
cmp.styles.forEach(s => {
modes[s.modeName] = '-';
});
return modes;
}
return '-';
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import * as d from '../../../declarations';
import { addImports } from '../../../compiler/transformers/add-imports';
import { getComponentMeta, getModuleFromSourceFile } from '../../../compiler/transformers/transform-utils';
import { updateHydrateComponentClass } from './hydrate-component';
import ts from 'typescript';
import { addLegacyApis } from '../../../compiler/transformers/core-runtime-apis';
import { updateStyleImports } from '../../../compiler/transformers/style-imports';


export const hydrateComponentTransform = (compilerCtx: d.CompilerCtx, transformOpts: d.TransformOptions): ts.TransformerFactory<ts.SourceFile> => {

return transformCtx => {

return tsSourceFile => {
const moduleFile = getModuleFromSourceFile(compilerCtx, tsSourceFile);

const visitNode = (node: ts.Node): any => {
if (ts.isClassDeclaration(node)) {
const cmp = getComponentMeta(compilerCtx, tsSourceFile, node);
if (cmp != null) {
return updateHydrateComponentClass(node, moduleFile, cmp);
}
}

return ts.visitEachChild(node, visitNode, transformCtx);
};

tsSourceFile = ts.visitEachChild(tsSourceFile, visitNode, transformCtx);

if (moduleFile.cmps.length > 0) {
tsSourceFile = updateStyleImports(transformOpts, tsSourceFile, moduleFile);
}
if (moduleFile.isLegacy) {
addLegacyApis(moduleFile);
}
tsSourceFile = addImports(transformOpts, tsSourceFile, moduleFile.coreRuntimeApis, transformOpts.coreImportPath);

return tsSourceFile;
};
};
};

0 comments on commit 4669ad9

Please sign in to comment.