@quilted/rollup 0.1.18 → 0.2.0

package/build/esm/constants.mjs

@@ -1,7 +1,7 @@
-const MAGIC_MODULE_ENV = 'quilt:module/env';
-const MAGIC_MODULE_ENTRY = 'quilt:module/entry';
-const MAGIC_MODULE_APP_COMPONENT = 'quilt:module/app';
-const MAGIC_MODULE_BROWSER_ASSETS = 'quilt:module/assets';
-const MAGIC_MODULE_REQUEST_ROUTER = 'quilt:module/request-router';
+const MAGIC_MODULE_ENV = "quilt:module/env";
+const MAGIC_MODULE_ENTRY = "quilt:module/entry";
+const MAGIC_MODULE_APP_COMPONENT = "quilt:module/app";
+const MAGIC_MODULE_BROWSER_ASSETS = "quilt:module/assets";
+const MAGIC_MODULE_REQUEST_ROUTER = "quilt:module/request-router";
 
 export { MAGIC_MODULE_APP_COMPONENT, MAGIC_MODULE_BROWSER_ASSETS, MAGIC_MODULE_ENTRY, MAGIC_MODULE_ENV, MAGIC_MODULE_REQUEST_ROUTER };

package/build/esm/features/assets.mjs

@@ -5,57 +5,43 @@ import * as mime from 'mrmime';
 
 function assetManifest(manifestOptions) {
   return {
-    name: '@quilted/asset-manifest',
+    name: "@quilted/asset-manifest",
     async generateBundle(options, bundle) {
       await writeManifestForBundle.call(this, bundle, manifestOptions, options);
     }
   };
 }
-async function writeManifestForBundle(bundle, {
-  id,
-  file,
-  baseURL,
-  cacheKey,
-  priority
-}, {
-  format
-}) {
+async function writeManifestForBundle(bundle, { file, baseURL, cacheKey, priority }, { format }) {
   const outputs = Object.values(bundle);
-  const entries = outputs.filter(output => output.type === 'chunk' && output.isEntry);
+  const entries = outputs.filter(
+    (output) => output.type === "chunk" && output.isEntry
+  );
   if (entries.length === 0) {
     throw new Error(`Could not find any entries in your rollup bundle...`);
   }
-
-  // We assume the first entry is the "main" one. There can be
-  // more than one because each worker script is also listed as an
-  // entry (though, from a separate build).
   const entryChunk = entries[0];
-  const dependencyMap = new Map();
+  const dependencyMap = /* @__PURE__ */ new Map();
   for (const output of outputs) {
-    if (output.type !== 'chunk') continue;
+    if (output.type !== "chunk")
+      continue;
     dependencyMap.set(output.fileName, output.imports);
   }
   const assets = [];
-  const assetIdMap = new Map();
-  function getAssetId(file) {
-    let id = assetIdMap.get(file);
+  const assetIdMap = /* @__PURE__ */ new Map();
+  function getAssetId(file2) {
+    let id = assetIdMap.get(file2);
     if (id == null) {
-      assets.push(`${baseURL}${file}`);
+      assets.push(`${baseURL}${file2}`);
       id = assets.length - 1;
-      assetIdMap.set(file, id);
+      assetIdMap.set(file2, id);
     }
     return id;
   }
   const manifest = {
-    id,
     priority,
-    cacheKey,
+    cacheKey: cacheKey && cacheKey.size > 0 ? cacheKey.toString() : void 0,
     assets,
-    attributes: format === 'es' ? {
-      scripts: {
-        type: 'module'
-      }
-    } : undefined,
+    attributes: format === "es" ? { scripts: { type: "module" } } : void 0,
     entries: {
       default: createAssetsEntry([...entryChunk.imports, entryChunk.fileName], {
         dependencyMap,
@@ -65,21 +51,20 @@ async function writeManifestForBundle(bundle, {
     modules: {}
   };
   for (const output of outputs) {
-    if (output.type !== 'chunk') continue;
+    if (output.type !== "chunk")
+      continue;
     const originalModuleId = output.facadeModuleId ?? output.moduleIds[output.moduleIds.length - 1];
-    if (originalModuleId == null) continue;
-
-    // This metadata is added by the rollup plugin for @quilted/async
-    const moduleId = this.getModuleInfo(originalModuleId)?.meta.quilt?.moduleId;
-    if (moduleId == null) continue;
-    manifest.modules[moduleId] = createAssetsEntry([...output.imports, output.fileName], {
-      dependencyMap,
-      getAssetId
-    });
+    if (originalModuleId == null)
+      continue;
+    const moduleId = this.getModuleInfo(originalModuleId)?.meta.quilt?.moduleID;
+    if (moduleId == null)
+      continue;
+    manifest.modules[moduleId] = createAssetsEntry(
+      [...output.imports, output.fileName],
+      { dependencyMap, getAssetId }
+    );
   }
-  await fs.mkdir(path.dirname(file), {
-    recursive: true
-  });
+  await fs.mkdir(path.dirname(file), { recursive: true });
   await fs.writeFile(file, JSON.stringify(manifest, null, 2));
 }
 function createAssetsEntry(files, {
@@ -88,9 +73,10 @@ function createAssetsEntry(files, {
 }) {
   const styles = [];
   const scripts = [];
-  const allFiles = new Set();
-  const addFile = file => {
-    if (allFiles.has(file)) return;
+  const allFiles = /* @__PURE__ */ new Set();
+  const addFile = (file) => {
+    if (allFiles.has(file))
+      return;
     allFiles.add(file);
     for (const dependency of dependencyMap.get(file) ?? []) {
       addFile(dependency);
@@ -100,42 +86,59 @@ function createAssetsEntry(files, {
     addFile(file);
   }
   for (const file of allFiles) {
-    if (file.endsWith('.css')) {
+    if (file.endsWith(".css")) {
       styles.push(getAssetId(file));
     } else {
       scripts.push(getAssetId(file));
     }
   }
-  return {
-    scripts,
-    styles
-  };
+  return { scripts, styles };
 }
 const QUERY_PATTERN = /\?.*$/s;
 const HASH_PATTERN = /#.*$/s;
 const RAW_PATTERN = /(\?|&)raw(?:&|$)/;
 const DEFAULT_INLINE_LIMIT = 4096;
-const DEFAULT_OUTPUT_PATTERN = '[name].[hash].[ext]';
+const DEFAULT_OUTPUT_PATTERN = "[name].[hash].[ext]";
 const DEFAULT_STATIC_ASSET_EXTENSIONS = [
-// images
-'.png', '.jpg', '.jpeg', '.gif', '.svg', '.ico', '.webp', '.avif',
-// media
-'.mp4', '.webm', '.ogg', '.mp3', '.wav', '.flac', '.aac',
-// fonts
-'.woff', '.woff2', '.eot', '.ttf', '.otf',
-// other
-'.webmanifest', '.pdf', '.txt'];
+  // images
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".svg",
+  ".ico",
+  ".webp",
+  ".avif",
+  // media
+  ".mp4",
+  ".webm",
+  ".ogg",
+  ".mp3",
+  ".wav",
+  ".flac",
+  ".aac",
+  // fonts
+  ".woff",
+  ".woff2",
+  ".eot",
+  ".ttf",
+  ".otf",
+  // other
+  ".webmanifest",
+  ".pdf",
+  ".txt"
+];
 function rawAssets() {
   return {
-    name: '@quilted/raw-assets',
+    name: "@quilted/raw-assets",
     async load(id) {
-      if (id.startsWith('\0') || !RAW_PATTERN.test(id)) {
+      if (id.startsWith("\0") || !RAW_PATTERN.test(id)) {
         return null;
       }
       const moduleId = cleanModuleIdentifier(id);
       this.addWatchFile(moduleId);
       const file = await fs.readFile(moduleId, {
-        encoding: 'utf-8'
+        encoding: "utf-8"
       });
       return `export default ${JSON.stringify(file)}`;
     }
@@ -143,17 +146,21 @@ function rawAssets() {
 }
 function staticAssets({
   emit = true,
-  baseURL = '/',
+  baseURL = "/",
   extensions = DEFAULT_STATIC_ASSET_EXTENSIONS,
   inlineLimit = DEFAULT_INLINE_LIMIT,
   outputPattern = DEFAULT_OUTPUT_PATTERN
 } = {}) {
-  const assetCache = new Map();
-  const assetMatcher = new RegExp(`\\.(` + extensions.map(extension => extension.startsWith('.') ? extension.slice(1) : extension).join('|') + `)(\\?.*)?$`);
+  const assetCache = /* @__PURE__ */ new Map();
+  const assetMatcher = new RegExp(
+    `\\.(` + extensions.map(
+      (extension) => extension.startsWith(".") ? extension.slice(1) : extension
+    ).join("|") + `)(\\?.*)?$`
+  );
   return {
-    name: '@quilted/static-assets',
+    name: "@quilted/static-assets",
     async load(id) {
-      if (id.startsWith('\0') || !assetMatcher.test(id)) {
+      if (id.startsWith("\0") || !assetMatcher.test(id)) {
         return null;
       }
       const cached = assetCache.get(id);
@@ -163,17 +170,20 @@ function staticAssets({
       const file = cleanModuleIdentifier(id);
       const content = await fs.readFile(file);
       let url;
-      if (!file.endsWith('.svg') && content.length < inlineLimit) {
-        // base64 inlined as a string
-        url = `data:${mime.lookup(file)};base64,${content.toString('base64')}`;
+      if (!file.endsWith(".svg") && content.length < inlineLimit) {
+        url = `data:${mime.lookup(file)};base64,${content.toString("base64")}`;
       } else {
         const contentHash = getHash(content);
-        const filename = assetFileNamesToFileName(outputPattern, file, contentHash);
-        url = `${baseURL.endsWith('/') ? baseURL.slice(0, -1) : baseURL}/${filename}`;
+        const filename = assetFileNamesToFileName(
+          outputPattern,
+          file,
+          contentHash
+        );
+        url = `${baseURL.endsWith("/") ? baseURL.slice(0, -1) : baseURL}/${filename}`;
         if (emit) {
           this.emitFile({
             name: file,
-            type: 'asset',
+            type: "asset",
             fileName: filename,
             source: content
           });
@@ -191,25 +201,27 @@ function assetFileNamesToFileName(pattern, file, contentHash) {
   const ext = extname.substring(1);
   const name = basename.slice(0, -extname.length);
   const hash = contentHash;
-  return pattern.replace(/\[\w+\]/g, placeholder => {
+  return pattern.replace(/\[\w+\]/g, (placeholder) => {
     switch (placeholder) {
-      case '[ext]':
+      case "[ext]":
         return ext;
-      case '[extname]':
+      case "[extname]":
         return extname;
-      case '[hash]':
+      case "[hash]":
         return hash;
-      case '[name]':
+      case "[name]":
         return name;
     }
-    throw new Error(`invalid placeholder ${placeholder} in assetFileNames "${pattern}"`);
+    throw new Error(
+      `invalid placeholder ${placeholder} in assetFileNames "${pattern}"`
+    );
   });
 }
 function getHash(text) {
-  return createHash('sha256').update(text).digest('hex').substring(0, 8);
+  return createHash("sha256").update(text).digest("hex").substring(0, 8);
 }
 function cleanModuleIdentifier(url) {
-  return url.replace(HASH_PATTERN, '').replace(QUERY_PATTERN, '');
+  return url.replace(HASH_PATTERN, "").replace(QUERY_PATTERN, "");
 }
 
 export { assetManifest, rawAssets, staticAssets };

package/build/esm/features/async.mjs

@@ -0,0 +1,186 @@
+import { createHash } from 'node:crypto';
+import { sep, posix } from 'node:path';
+import { multiline } from '../shared/strings.mjs';
+import MagicString from 'magic-string';
+
+const MODULE_PREFIX = "quilt-async-module:";
+const IMPORT_PREFIX = "quilt-async-import:";
+function asyncModules({
+  preload = true,
+  baseURL = "/assets/",
+  moduleID: getModuleID = defaultModuleID
+} = {}) {
+  return {
+    name: "@quilted/async",
+    async resolveId(id, importer) {
+      if (id.startsWith(IMPORT_PREFIX))
+        return `\0${id}`;
+      if (!id.startsWith(MODULE_PREFIX))
+        return null;
+      const imported = id.replace(MODULE_PREFIX, "");
+      const resolved = await this.resolve(imported, importer, {
+        skipSelf: true
+      });
+      if (resolved == null)
+        return null;
+      return `\0${MODULE_PREFIX}${resolved.id}`;
+    },
+    resolveDynamicImport(specifier) {
+      if (typeof specifier === "string" && specifier.startsWith(IMPORT_PREFIX)) {
+        return `\0${specifier}`;
+      }
+      return null;
+    },
+    async load(id) {
+      if (id.startsWith(`\0${MODULE_PREFIX}`)) {
+        const imported = id.replace(`\0${MODULE_PREFIX}`, "");
+        const moduleID = getModuleID({ imported });
+        const code = multiline`
+          const id = ${JSON.stringify(moduleID)};
+
+          export default function createAsyncModule(load) {
+            return {
+              id,
+              import: () => import(${JSON.stringify(
+          `${IMPORT_PREFIX}${imported}`
+        )}).then((module) => module.default),
+            };
+          }
+        `;
+        return code;
+      }
+      if (id.startsWith(`\0${IMPORT_PREFIX}`)) {
+        const imported = id.replace(`\0${IMPORT_PREFIX}`, "");
+        const moduleID = getModuleID({ imported });
+        const code = multiline`
+          import * as AsyncModule from ${JSON.stringify(imported)};
+
+          ((globalThis[Symbol.for('quilt')] ??= {}).AsyncModules ??= new Map).set(${JSON.stringify(
+          moduleID
+        )}, AsyncModule);
+
+          export default AsyncModule;
+        `;
+        return {
+          code,
+          meta: {
+            quilt: { moduleID }
+          }
+        };
+      }
+      return null;
+    },
+    transform: baseURL ? (code) => code.replace(/__QUILT_ASSETS_BASE_URL__/g, JSON.stringify(baseURL)) : void 0,
+    async generateBundle(options, bundle) {
+      if (preload) {
+        switch (options.format) {
+          case "es": {
+            await preloadAsyncAssetsInESMBundle(bundle);
+            break;
+          }
+          case "system": {
+            await preloadAsyncAssetsInSystemJSBundle(bundle);
+            break;
+          }
+        }
+      }
+    }
+  };
+}
+function defaultModuleID({ imported }) {
+  const name = imported.split(sep).pop().split(".")[0];
+  const hash = createHash("sha256").update(imported).digest("hex").substring(0, 8);
+  return `${name}_${hash}`;
+}
+async function preloadAsyncAssetsInESMBundle(bundle) {
+  const { parse: parseImports } = await import('es-module-lexer');
+  for (const chunk of Object.values(bundle)) {
+    if (chunk.type !== "chunk")
+      continue;
+    if (chunk.dynamicImports.length === 0)
+      continue;
+    const { code } = chunk;
+    const newCode = new MagicString(code);
+    const imports = (await parseImports(code))[0];
+    for (const imported of imports) {
+      const { s: start, e: end, ss: importStart, d: dynamicStart } = imported;
+      if (dynamicStart < 0)
+        continue;
+      const importSource = code.slice(start + 1, end - 1);
+      const dependencies = getDependenciesForImport(
+        importSource,
+        chunk,
+        bundle
+      );
+      if (dependencies.size === 1)
+        continue;
+      const originalImport = code.slice(importStart, end + 1);
+      newCode.overwrite(
+        importStart,
+        end + 1,
+        preloadContentForDependencies(dependencies, originalImport)
+      );
+    }
+    chunk.code = newCode.toString();
+  }
+}
+async function preloadAsyncAssetsInSystemJSBundle(bundle) {
+  for (const chunk of Object.values(bundle)) {
+    if (chunk.type !== "chunk")
+      continue;
+    if (chunk.dynamicImports.length === 0)
+      continue;
+    const { code } = chunk;
+    const newCode = new MagicString(code);
+    const systemDynamicImportRegex = /\bmodule\.import\(([^)]*)\)/g;
+    let match;
+    while (match = systemDynamicImportRegex.exec(code)) {
+      const [originalImport, imported] = match;
+      const importSource = imported.trim().slice(1, imported.length - 1);
+      const dependencies = getDependenciesForImport(
+        importSource,
+        chunk,
+        bundle
+      );
+      if (dependencies.size === 1)
+        continue;
+      newCode.overwrite(
+        match.index,
+        match.index + originalImport.length,
+        preloadContentForDependencies(dependencies, originalImport)
+      );
+    }
+    chunk.code = newCode.toString();
+  }
+}
+function preloadContentForDependencies(dependencies, originalExpression) {
+  return `Promise.resolve().then(() => globalThis[Symbol.for('quilt')]?.AsyncModules?.preload?.(${Array.from(
+    dependencies
+  ).map((dependency) => JSON.stringify(dependency)).join(",")})).then(function(){return ${originalExpression}})`;
+}
+function getDependenciesForImport(imported, chunk, bundle) {
+  const originalFilename = chunk.fileName;
+  const dependencies = /* @__PURE__ */ new Set();
+  const analyzed = /* @__PURE__ */ new Set();
+  const normalizedFile = posix.join(posix.dirname(originalFilename), imported);
+  const addDependencies = (filename) => {
+    if (filename === originalFilename)
+      return;
+    if (analyzed.has(filename))
+      return;
+    analyzed.add(filename);
+    const chunk2 = bundle[filename];
+    if (chunk2 == null)
+      return;
+    dependencies.add(chunk2.fileName);
+    if (chunk2.type !== "chunk")
+      return;
+    for (const imported2 of chunk2.imports) {
+      addDependencies(imported2);
+    }
+  };
+  addDependencies(normalizedFile);
+  return dependencies;
+}
+
+export { asyncModules };

package/build/esm/features/css.mjs

@@ -1,63 +1,50 @@
 const CSS_REGEX = /\.css$/;
 const CSS_MODULE_REGEX = /\.module\.css$/;
-function css({
-  minify = true,
-  emit = true
-}) {
-  const styles = new Map();
+function css({ minify = true, emit = true, targets }) {
+  const styles = /* @__PURE__ */ new Map();
   return {
-    name: '@quilted/css',
+    name: "@quilted/css",
     async transform(code, id) {
-      if (!CSS_REGEX.test(id)) return;
-      const {
-        transform
-      } = await import('lightningcss');
+      if (!CSS_REGEX.test(id))
+        return;
+      const { transform, browserslistToTargets } = await import('lightningcss');
       const transformed = transform({
         filename: id,
         code: new TextEncoder().encode(code),
         cssModules: CSS_MODULE_REGEX.test(id),
-        minify: emit && minify
+        minify: emit && minify,
+        targets: targets ? browserslistToTargets(targets) : void 0
       });
       styles.set(id, new TextDecoder().decode(transformed.code));
-      const exports = transformed.exports ? Object.fromEntries(Object.entries(transformed.exports).map(([key, exported]) => [key, exported.name])) : undefined;
+      const exports = transformed.exports ? Object.fromEntries(
+        Object.entries(transformed.exports).map(([key, exported]) => [
+          key,
+          exported.name
+        ])
+      ) : void 0;
       return {
-        code: exports ? `export default JSON.parse(${JSON.stringify(JSON.stringify(exports))})` : `export default undefined;`,
-        map: {
-          mappings: ''
-        },
-        moduleSideEffects: 'no-treeshake'
+        code: exports ? `export default JSON.parse(${JSON.stringify(
+          JSON.stringify(exports)
+        )})` : `export default undefined;`,
+        map: { mappings: "" },
+        moduleSideEffects: "no-treeshake"
       };
     },
     async renderChunk(_, chunk) {
-      if (!emit) return null;
-      let chunkCss = '';
+      if (!emit)
+        return null;
+      let chunkCss = "";
       for (const id of Object.keys(chunk.modules)) {
         if (CSS_REGEX.test(id) && styles.has(id)) {
           chunkCss += styles.get(id);
         }
       }
-      if (chunkCss.length === 0) return null;
+      if (chunkCss.length === 0)
+        return null;
       const code = chunkCss;
-
-      // if (minify) {
-      //   const {default: CleanCSS} = await import('clean-css');
-
-      //   const cleaner = new CleanCSS({
-      //     rebase: false,
-      //   });
-
-      //   const minified = cleaner.minify(chunkCss);
-
-      //   if (minified.errors.length > 0) {
-      //     throw minified.errors[0];
-      //   }
-
-      //   code = minified.styles;
-      // }
-
       const fileHandle = this.emitFile({
-        type: 'asset',
-        name: `${chunk.fileName.split('.')[0]}.css`,
+        type: "asset",
+        name: `${chunk.fileName.split(".")[0]}.css`,
         source: code
       });
       chunk.imports.push(this.getFileName(fileHandle));