Supports hoisted scripts in the static build (withastro#2414)

* Supports hoisted scripts in the static build * Adds a changeset * Update packages/astro/src/core/build/internal.ts Co-authored-by: Evan Boehs <[email protected]> * Update based on feedback * Fix lint * Fix getting hoist script for Windows * Try with the pre compiler * use compiler 0.8.2 * update compiler version * update yarn.lock Co-authored-by: Evan Boehs <[email protected]>
harrytran998 · Jan 21, 2022 · f2b8372 · f2b8372
1 parent fda857e
commit f2b8372
Show file tree

Hide file tree

Showing 18 changed files with 227 additions and 26 deletions.
diff --git a/.changeset/sour-games-boil.md b/.changeset/sour-games-boil.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Adds support for hoisted scripts to the static build
diff --git a/examples/fast-build/package.json b/examples/fast-build/package.json
@@ -11,6 +11,7 @@
  },
  "devDependencies": {
  "astro": "^0.22.16",
+ "preact": "~10.5.15",
  "unocss": "^0.15.5",
  "vite-imagetools": "^4.0.1"
  }

diff --git a/examples/fast-build/src/components/ExternalHoisted.astro b/examples/fast-build/src/components/ExternalHoisted.astro
@@ -0,0 +1,2 @@
+<div id="external-hoist"></div>
+<script type="module" hoist src="/src/scripts/external-hoist"></script>
diff --git a/examples/fast-build/src/components/InlineHoisted.astro b/examples/fast-build/src/components/InlineHoisted.astro
@@ -0,0 +1,13 @@
+<script type="module" hoist>
+ import { h, render } from 'preact';
+
+
+ const mount = document.querySelector('#inline-hoist');
+
+ function App() {
+ return h('strong', null, 'Hello again');
+ }
+
+ render(h(App), mount);
+</script>
+<div id="inline-hoist"></div>
diff --git a/examples/fast-build/src/pages/index.astro b/examples/fast-build/src/pages/index.astro
@@ -4,6 +4,8 @@ import grayscaleUrl from '../images/random.jpg?grayscale=true';
 import Greeting from '../components/Greeting.vue';
 import Counter from '../components/Counter.vue';
 import { Code } from 'astro/components';
+import InlineHoisted from '../components/InlineHoisted.astro';
+import ExternalHoisted from '../components/ExternalHoisted.astro';
 ---
 
 <html>
@@ -44,5 +46,11 @@ import { Code } from 'astro/components';
  <h1>Hydrated component</h1>
  <Counter client:idle />
  </section>
+
+ <section>
+ <h1>Hoisted scripts</h1>
+ <InlineHoisted />
+ <ExternalHoisted />
+ </section>
 </body>
 </html>
diff --git a/examples/fast-build/src/scripts/external-hoist.ts b/examples/fast-build/src/scripts/external-hoist.ts
@@ -0,0 +1,2 @@
+const el = document.querySelector('#external-hoist');
+el.textContent = `This was loaded externally`;
diff --git a/packages/astro/src/core/build/internal.ts b/packages/astro/src/core/build/internal.ts
@@ -15,6 +15,9 @@ export interface BuildInternals {
  // A mapping to entrypoints (facadeId) to assets (styles) that are added.
  facadeIdToAssetsMap: Map<string, string[]>;
 
+ hoistedScriptIdToHoistedMap: Map<string, Set<string>>;
+ facadeIdToHoistedEntryMap: Map<string, string>;
+
  // A mapping of specifiers like astro/client/idle.js to the hashed bundled name.
  // Used to render pages with the correct specifiers.
  entrySpecifierToBundleMap: Map<string, string>;
@@ -39,12 +42,18 @@ export function createBuildInternals(): BuildInternals {
  // A mapping to entrypoints (facadeId) to assets (styles) that are added.
  const facadeIdToAssetsMap = new Map<string, string[]>();
 
+ // These are for tracking hoisted script bundling
+ const hoistedScriptIdToHoistedMap = new Map<string, Set<string>>();
+ const facadeIdToHoistedEntryMap = new Map<string, string>();
+
  return {
  pureCSSChunks,
  chunkToReferenceIdMap,
  astroStyleMap,
  astroPageStyleMap,
  facadeIdToAssetsMap,
+ hoistedScriptIdToHoistedMap,
+ facadeIdToHoistedEntryMap,
  entrySpecifierToBundleMap: new Map<string, string>(),
  };
 }
diff --git a/packages/astro/src/core/build/static-build.ts b/packages/astro/src/core/build/static-build.ts
@@ -20,6 +20,7 @@ import { getParamsAndProps } from '../ssr/index.js';
 import { createResult } from '../ssr/result.js';
 import { renderPage } from '../../runtime/server/index.js';
 import { prepareOutDir } from './fs.js';
+import { vitePluginHoistedScripts } from './vite-plugin-hoisted-scripts.js';
 
 export interface StaticBuildOptions {
  allPages: AllPagesData;
@@ -70,6 +71,12 @@ function* throttle(max: number, inPaths: string[]) {
  }
 }
 
+function getByFacadeId<T>(facadeId: string, map: Map<string, T>): T | undefined {
+ return map.get(facadeId) ||
+ // Check with a leading `/` because on Windows it doesn't have one.
+ map.get('/' + facadeId);
+}
+
 export async function staticBuild(opts: StaticBuildOptions) {
  const { allPages, astroConfig } = opts;
 
@@ -91,7 +98,12 @@ export async function staticBuild(opts: StaticBuildOptions) {
  jsInput.add(polyfill);
  }
 
+ // Build internals needed by the CSS plugin
+ const internals = createBuildInternals();
+
  for (const [component, pageData] of Object.entries(allPages)) {
+ const astroModuleURL = new URL('./' + component, astroConfig.projectRoot);
+ const astroModuleId = astroModuleURL.pathname;
  const [renderers, mod] = pageData.preload;
  const metadata = mod.$$metadata;
 
@@ -104,18 +116,23 @@ export async function staticBuild(opts: StaticBuildOptions) {
  ...renderers.filter((renderer) => !!renderer.source).map((renderer) => renderer.source!),
  ]);
 
+ // Add hoisted scripts
+ const hoistedScripts = new Set(metadata.hoistedScriptPaths());
+ if(hoistedScripts.size) {
+ const moduleId = new URL('./hoisted.js', astroModuleURL + '/').pathname;
+ internals.hoistedScriptIdToHoistedMap.set(moduleId, hoistedScripts);
+ topLevelImports.add(moduleId);
+ }
+
  for (const specifier of topLevelImports) {
  jsInput.add(specifier);
  }
 
- let astroModuleId = new URL('./' + component, astroConfig.projectRoot).pathname;
+
  pageInput.add(astroModuleId);
  facadeIdToPageDataMap.set(astroModuleId, pageData);
  }
 
- // Build internals needed by the CSS plugin
- const internals = createBuildInternals();
-
  // Empty out the dist folder, if needed. Vite has a config for doing this
  // but because we are running 2 vite builds in parallel, that would cause a race
  // condition, so we are doing it ourselves
@@ -189,6 +206,7 @@ async function clientBuild(opts: StaticBuildOptions, internals: BuildInternals,
  },
  plugins: [
  vitePluginNewBuild(input, internals, 'js'),
+ vitePluginHoistedScripts(internals),
  rollupPluginAstroBuildCSS({
  internals,
  }),
@@ -249,16 +267,14 @@ async function generatePage(output: OutputChunk, opts: StaticBuildOptions, inter
 
  let url = new URL('./' + output.fileName, astroConfig.dist);
  const facadeId: string = output.facadeModuleId as string;
- let pageData =
- facadeIdToPageDataMap.get(facadeId) ||
- // Check with a leading `/` because on Windows it doesn't have one.
- facadeIdToPageDataMap.get('/' + facadeId);
+ let pageData = getByFacadeId<PageBuildData>(facadeId, facadeIdToPageDataMap);
 
  if (!pageData) {
  throw new Error(`Unable to find a PageBuildData for the Astro page: ${facadeId}. There are the PageBuilDatas we have ${Array.from(facadeIdToPageDataMap.keys()).join(', ')}`);
  }
 
- let linkIds = internals.facadeIdToAssetsMap.get(facadeId) || [];
+ const linkIds = getByFacadeId<string[]>(facadeId, internals.facadeIdToAssetsMap) || [];
+ const hoistedId = getByFacadeId<string>(facadeId, internals.facadeIdToHoistedEntryMap) || null;
 
  let compiledModule = await import(url.toString());
  let Component = compiledModule.default;
@@ -267,6 +283,7 @@ async function generatePage(output: OutputChunk, opts: StaticBuildOptions, inter
  pageData,
  internals,
  linkIds,
+ hoistedId,
  Component,
  renderers,
  };
@@ -288,13 +305,14 @@ interface GeneratePathOptions {
  pageData: PageBuildData;
  internals: BuildInternals;
  linkIds: string[];
+ hoistedId: string | null;
  Component: AstroComponentFactory;
  renderers: Renderer[];
 }
 
 async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: GeneratePathOptions) {
- const { astroConfig, logging, origin, pageNames, routeCache } = opts;
- const { Component, internals, linkIds, pageData, renderers } = gopts;
+ const { astroConfig, logging, origin, routeCache } = opts;
+ const { Component, internals, linkIds, hoistedId, pageData, renderers } = gopts;
 
  // This adds the page name to the array so it can be shown as part of stats.
  addPageName(pathname, opts);
@@ -316,8 +334,7 @@ async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: G
  debug(logging, 'generate', `Generating: ${pathname}`);
 
  const rootpath = new URL(astroConfig.buildOptions.site || 'http:https://localhost/').pathname;
- const result = createResult({ astroConfig, logging, origin, params, pathname, renderers });
- result.links = new Set<SSRElement>(
+ const links = new Set<SSRElement>(
  linkIds.map((href) => ({
  props: {
  rel: 'stylesheet',
@@ -326,6 +343,14 @@ async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: G
  children: '',
  }))
  );
+ const scripts = hoistedId ? new Set<SSRElement>([{
+ props: {
+ type: 'module',
+ src: npath.posix.join(rootpath, hoistedId),
+ },
+ children: ''
+ }]) : new Set<SSRElement>();
+ const result = createResult({ astroConfig, logging, origin, params, pathname, renderers, links, scripts });
 
  // Override the `resolve` method so that hydrated components are given the
  // hashed filepath to the component.

diff --git a/packages/astro/src/core/build/vite-plugin-hoisted-scripts.ts b/packages/astro/src/core/build/vite-plugin-hoisted-scripts.ts
@@ -0,0 +1,43 @@
+import type { Plugin as VitePlugin } from '../vite';
+import type { BuildInternals } from '../../core/build/internal.js';
+
+function virtualHoistedEntry(id: string) {
+ return id.endsWith('.astro/hoisted.js') || id.endsWith('.md/hoisted.js');
+}
+
+export function vitePluginHoistedScripts(internals: BuildInternals): VitePlugin {
+ return {
+ name: '@astro/rollup-plugin-astro-hoisted-scripts',
+
+ resolveId(id) {
+ if(virtualHoistedEntry(id)) {
+ return id;
+ }
+ },
+
+ load(id) {
+ if(virtualHoistedEntry(id)) {
+ let code = '';
+ for(let path of internals.hoistedScriptIdToHoistedMap.get(id)!) {
+ code += `import "${path}";`
+ }
+ return {
+ code
+ };
+ }
+ return void 0;
+ },
+
+ async generateBundle(_options, bundle) {
+ // Find all page entry points and create a map of the entry point to the hashed hoisted script.
+ // This is used when we render so that we can add the script to the head.
+ for(const [id, output] of Object.entries(bundle)) {
+ if(output.type === 'chunk' && output.facadeModuleId && virtualHoistedEntry(output.facadeModuleId)) {
+ const facadeId = output.facadeModuleId!;
+ const filename = facadeId.slice(0, facadeId.length - "/hoisted.js".length);
+ internals.facadeIdToHoistedEntryMap.set(filename, id);
+ }
+ }
+ }
+ };
+}
diff --git a/packages/astro/src/core/ssr/index.ts b/packages/astro/src/core/ssr/index.ts
@@ -219,7 +219,14 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
  if (!Component) throw new Error(`Expected an exported Astro component but received typeof ${typeof Component}`);
  if (!Component.isAstroComponentFactory) throw new Error(`Unable to SSR non-Astro component (${route?.component})`);
 
- const result = createResult({ astroConfig, logging, origin, params, pathname, renderers });
+ // Add hoisted script tags
+ const scripts = astroConfig.buildOptions.experimentalStaticBuild ?
+ new Set<SSRElement>(Array.from(mod.$$metadata.hoistedScriptPaths()).map(src => ({
+ props: { type: 'module', src },
+ children: ''
+ }))) : new Set<SSRElement>();
+
+ const result = createResult({ astroConfig, logging, origin, params, pathname, renderers, scripts });
  // Resolves specifiers in the inline hydrated scripts, such as "@astrojs/renderer-preact/client.js"
  result.resolve = async (s: string) => {
  // The legacy build needs these to remain unresolved so that vite HTML

diff --git a/packages/astro/src/core/ssr/result.ts b/packages/astro/src/core/ssr/result.ts
@@ -13,6 +13,8 @@ export interface CreateResultArgs {
  params: Params;
  pathname: string;
  renderers: Renderer[];
+ links?: Set<SSRElement>;
+ scripts?: Set<SSRElement>;
 }
 
 export function createResult(args: CreateResultArgs): SSRResult {
@@ -23,8 +25,8 @@ export function createResult(args: CreateResultArgs): SSRResult {
  // calling the render() function will populate the object with scripts, styles, etc.
  const result: SSRResult = {
  styles: new Set<SSRElement>(),
- scripts: new Set<SSRElement>(),
- links: new Set<SSRElement>(),
+ scripts: args.scripts ?? new Set<SSRElement>(),
+ links: args.links ?? new Set<SSRElement>(),
  /** This function returns the `Astro` faux-global */
  createAstro(astroGlobal: AstroGlobalPartial, props: Record<string, any>, slots: Record<string, any> | null) {
  const site = new URL(origin);

diff --git a/packages/astro/src/runtime/server/metadata.ts b/packages/astro/src/runtime/server/metadata.ts
@@ -18,7 +18,7 @@ interface CreateMetadataOptions {
 }
 
 export class Metadata {
- public fileURL: URL;
+ public mockURL: URL;
  public modules: ModuleInfo[];
  public hoisted: any[];
  public hydratedComponents: any[];
@@ -31,12 +31,12 @@ export class Metadata {
  this.hoisted = opts.hoisted;
  this.hydratedComponents = opts.hydratedComponents;
  this.hydrationDirectives = opts.hydrationDirectives;
- this.fileURL = new URL(filePathname, 'http:https://example.com');
+ this.mockURL = new URL(filePathname, 'http:https://example.com');
  this.metadataCache = new Map<any, ComponentMetadata | null>();
  }
 
  resolvePath(specifier: string): string {
- return specifier.startsWith('.') ? new URL(specifier, this.fileURL).pathname : specifier;
+ return specifier.startsWith('.') ? new URL(specifier, this.mockURL).pathname : specifier;
  }
 
  getPath(Component: any): string | null {
@@ -81,6 +81,16 @@ export class Metadata {
  }
  }
 
+ * hoistedScriptPaths() {
+ for(const metadata of this.deepMetadata()) {
+ let i = 0, pathname = metadata.mockURL.pathname;
+ while(i < metadata.hoisted.length) {
+ yield `${pathname}?astro&type=script&index=${i}`;
+ i++;
+ }
+ }
+ }
+
  private *deepMetadata(): Generator<Metadata, void, unknown> {
  // Yield self
  yield this;