Inline initial script

This commit is contained in:
Jake Archibald
2020-11-12 13:59:50 +00:00
parent f1da577ba3
commit d1ee92e884
3 changed files with 20 additions and 5 deletions

View File

@@ -15,6 +15,7 @@ import rollup from 'rollup';
const prefix = 'client-bundle:'; const prefix = 'client-bundle:';
const entryPathPlaceholder = 'CLIENT_BUNDLE_PLUGIN_ENTRY_PATH'; const entryPathPlaceholder = 'CLIENT_BUNDLE_PLUGIN_ENTRY_PATH';
const importsPlaceholder = 'CLIENT_BUNDLE_PLUGIN_IMPORTS'; const importsPlaceholder = 'CLIENT_BUNDLE_PLUGIN_IMPORTS';
const allSrcPlaceholder = 'CLIENT_BUNDLE_PLUGIN_ALL_SRC';
export function getDependencies(clientOutput, item) { export function getDependencies(clientOutput, item) {
const crawlDependencies = new Set([item.fileName]); const crawlDependencies = new Set([item.fileName]);
@@ -70,6 +71,9 @@ export default function (inputOptions, outputOptions, resolveFileUrl) {
`export const imports = import.meta.${ `export const imports = import.meta.${
importsPlaceholder + exportCounter importsPlaceholder + exportCounter
};`, };`,
`export const allSrc = import.meta.${
allSrcPlaceholder + exportCounter
};`,
].join('\n'); ].join('\n');
}, },
async buildEnd(error) { async buildEnd(error) {
@@ -108,6 +112,8 @@ export default function (inputOptions, outputOptions, resolveFileUrl) {
num = Number(property.slice(entryPathPlaceholder.length)); num = Number(property.slice(entryPathPlaceholder.length));
} else if (property.startsWith(importsPlaceholder)) { } else if (property.startsWith(importsPlaceholder)) {
num = Number(property.slice(importsPlaceholder.length)); num = Number(property.slice(importsPlaceholder.length));
} else if (property.startsWith(allSrcPlaceholder)) {
num = Number(property.slice(allSrcPlaceholder.length));
} else { } else {
// This isn't one of our placeholders. // This isn't one of our placeholders.
return; return;
@@ -128,6 +134,12 @@ export default function (inputOptions, outputOptions, resolveFileUrl) {
const dependencies = getDependencies(clientOutput, clientEntry); const dependencies = getDependencies(clientOutput, clientEntry);
if (property.startsWith(allSrcPlaceholder)) {
return JSON.stringify(
[clientEntry.code, ...dependencies.map((d) => d.code)].join(';'),
);
}
return ( return (
'[' + '[' +
dependencies dependencies

View File

@@ -17,6 +17,8 @@ declare module 'client-bundle:*' {
const url: string; const url: string;
export default url; export default url;
export const imports: string[]; export const imports: string[];
/** Source for this script and all its dependencies */
export const allSrc: string;
} }
declare module 'initial-css:' { declare module 'initial-css:' {

View File

@@ -14,7 +14,7 @@ import { h, FunctionalComponent } from 'preact';
import baseCss from 'css:./base.css'; import baseCss from 'css:./base.css';
import initialCss from 'initial-css:'; import initialCss from 'initial-css:';
import clientBundleURL, { imports } from 'client-bundle:client/initial-app'; import { allSrc } from 'client-bundle:client/initial-app';
import favicon from 'url:static-build/assets/favicon.ico'; import favicon from 'url:static-build/assets/favicon.ico';
import { escapeStyleScriptContent } from 'static-build/utils'; import { escapeStyleScriptContent } from 'static-build/utils';
import Intro from 'shared/initial-app/Intro'; import Intro from 'shared/initial-app/Intro';
@@ -46,15 +46,16 @@ const Index: FunctionalComponent<Props> = () => (
__html: escapeStyleScriptContent(initialCss), __html: escapeStyleScriptContent(initialCss),
}} }}
/> />
<script src={clientBundleURL} defer />
{imports.map((v) => (
<link rel="preload" as="script" href={v} />
))}
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<Intro /> <Intro />
</div> </div>
<script
dangerouslySetInnerHTML={{
__html: escapeStyleScriptContent(allSrc),
}}
/>
</body> </body>
</html> </html>
); );