URL bundled assets and Single File Executable (SFE)

[thescientist13]

Overview

Coming out of the PR for #1186 , a couples techniques / refactorings were applied around the usage of URL for consuming assets with project files and for combining user page routes and the underlying executeRouteModule implementation.

For example, a user could write this in an API route

import { renderFromHTML } from 'wc-compiler';
import { getArtists } from '../services/artists.js';

export async function handler(request) {
  const params = new URLSearchParams(request.url.slice(request.url.indexOf('?')));
  const offset = params.has('offset') ? parseInt(params.get('offset'), 10) : null;
  const headers = new Headers({ 'Content-Type': 'text/html' });
  const artists = getArtists(offset);
  const { html } = await renderFromHTML(`
    ${
      artists.map((item, idx) => {
        const { name, imageUrl } = item;

        return `
          <app-card
            title="${offset + idx + 1}) ${name}"
            thumbnail="${imageUrl}"
          ></app-card>
        `;
      }).join('')
    }
  `, [
    new URL('../components/card.js', import.meta.url)
  ]);

  return new Response(html, { headers });
}

And when bundling SSR pages for production, Greenwood do something like this

async function bundleSsrPages(compilation) {

  // ...
  const hasSSRPages = compilation.graph.filter(page => page.isSSR).length > 0;
  const input = [];

  if (!compilation.config.prerender && hasSSRPages) {
    const { executeModuleUrl } = compilation.config.plugins.find(plugin => plugin.type === 'renderer').provider();
    const { pagesDir, scratchDir } = compilation.context;

    for (const page of compilation.graph) {
      if (page.isSSR && !page.prerender) {
        const pagesPathDiff = compilation.context.pagesDir.pathname.replace(compilation.context.projectDirectory.pathname, '');

        // ...

        await fs.writeFile(entryFileUrl, `
          import { executeRouteModule } from '${normalizePathnameForWindows(executeModuleUrl)}';

          const moduleUrl = new URL('../${pagesPathDiff}${filename}', import.meta.url);

          export async function handler(request) {
            const compilation = JSON.parse('${JSON.stringify(compilation)}');
            const page = JSON.parse('${JSON.stringify(page)}');
            const data = await executeRouteModule({ moduleUrl, compilation, page, request });
            // ...
        `);

        input.push(normalizePathnameForWindows(entryFileUrl));
      }
    }

    const ssrConfigs = await getRollupConfigForSsr(compilation, input);

    if (ssrConfigs.length > 0 && ssrConfigs[0].input !== '') {
      for (const configIndex in ssrConfigs) {
        const rollupConfig = ssrConfigs[configIndex];
        const bundle = await rollup(rollupConfig);
        await bundle.write(rollupConfig.output);
      }
    }
  }
}

Problem Statement

Not so much a "problem" per se, since this technique works really and is standards compliant, but will never allow us to totally self contain a bunch of files down to one. For example, when bundling an SSR page, you will always have a single output file (good) but also need a "chunk" file that is the by product of the above mentioned bundling approach.

public/
  artists.route.js
  artists.route.chunk.41392711.js

Or for an API route, an adjacent chunk

public/
  api/
    fragment.js
    card.6d3096d9.js

It does mean for adapters they do need to do something like, and manually copy over any assets of say an API route

  for (const [key, value] of apiRoutes.entries()) {
    const outputType = 'api';
    const id = key.replace(`${basePath}/api/`, '');
    const outputRoot = new URL(`./${basePath}/api/${id}.func/`, adapterOutputUrl);
    const { assets = [] } = value;

    await setupFunctionBuildFolder(id, outputType, outputRoot);

    await fs.cp(
      new URL(`./api/${id}.js`, outputDir),
      new URL(`./${id}.js`, outputRoot),
      { recursive: true }
    );

    for (const asset of assets) {
      await fs.cp(
        new URL(asset),
        new URL(`./${asset.split(path.sep).pop()}`, outputRoot),
        { recursive: true }
      );
    }
  }

h3. Thoughts

So not so much a good or bad thing, or if anyone would really notice and or want it improved from a user perspective, but there is something really nice a about a final single file artifact that can be deployed all one. Maybe there is a way to convert a URL into something more like an import statement that could then be inlined?

Anyway, more thinking out loud, hence the discussion.

[thescientist13]

Just a heads up on this bug that came up during alpha testing the original feature - #1210