@quilted/rollup 0.1.15 → 0.1.16

package/build/typescript/module.d.ts

@@ -0,0 +1,45 @@
+import { Plugin } from 'rollup';
+import { type BrowserTargetSelection } from './shared/browserslist.ts';
+import type { MagicModuleEnvOptions } from './features/env.ts';
+export interface ModuleOptions {
+    /**
+     * The root directory containing the source code for your application.
+     */
+    root?: string | URL;
+    /**
+     * Whether to include GraphQL-related code transformations.
+     *
+     * @default true
+     */
+    graphql?: boolean;
+    /**
+     * Customizes the behavior of environment variables for your module.
+     */
+    env?: MagicModuleEnvOptions;
+    /**
+     * Customizes the assets created for your module.
+     */
+    assets?: ModuleAssetsOptions;
+}
+export interface ModuleAssetsOptions {
+    /**
+     * Whether to minify assets created for this module.
+     *
+     * @default true
+     */
+    minify?: boolean;
+    hash?: boolean;
+    targets?: BrowserTargetSelection;
+}
+export declare function quiltModule({ root: rootPath, env, assets, graphql, }?: ModuleOptions): Promise<{
+    input: string[];
+    plugins: Plugin<any>[];
+    onwarn(warning: import("rollup").RollupLog, defaultWarn: import("rollup").LoggingFunction): void;
+    output: {
+        format: "esm";
+        dir: string;
+        entryFileNames: string;
+        assetFileNames: string;
+    };
+}>;
+//# sourceMappingURL=module.d.ts.map

package/build/typescript/module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../source/module.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAqB,MAAM,QAAQ,CAAC;AAMlD,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAE7D,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,GAAG,CAAC,EAAE,qBAAqB,CAAC;IAE5B;;OAEG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC;AAED,wBAAsB,WAAW,CAAC,EAChC,IAAI,EAAE,QAAwB,EAC9B,GAAG,EACH,MAAM,EACN,OAAc,GACf,GAAE,aAAkB;;;;;;;;;;GAkFpB"}

package/build/typescript/shared/browserslist.d.ts

@@ -0,0 +1,11 @@
+export type BrowserTargetSelection = string[] | {
+    name?: string;
+    browsers?: string[];
+};
+export declare function getBrowserTargetDetails(targetSelection?: BrowserTargetSelection, { root }?: {
+    root?: string;
+}): Promise<{
+    name: string | undefined;
+    browsers: string[];
+}>;
+//# sourceMappingURL=browserslist.d.ts.map

package/build/typescript/shared/browserslist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browserslist.d.ts","sourceRoot":"","sources":["../../../source/shared/browserslist.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,sBAAsB,GAC9B,MAAM,EAAE,GACR;IACE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEN,wBAAsB,uBAAuB,CAC3C,eAAe,GAAE,sBAA2B,EAC5C,EAAC,IAAI,EAAC,GAAE;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAM;;;GAsB7B"}

package/package.json

@@ -6,7 +6,7 @@
     "access": "public",
     "@quilted/registry": "https://registry.npmjs.org"
   },
-  "version": "0.1.15",
+  "version": "0.1.16",
   "engines": {
     "node": ">=14.0.0"
   },

package/source/app.ts

@@ -17,6 +17,10 @@ import type {MagicModuleEnvOptions} from './features/env.ts';
 import {multiline} from './shared/strings.ts';
 import {getNodePlugins, removeBuildFiles} from './shared/rollup.ts';
 import {createMagicModulePlugin} from './shared/magic-module.ts';
+import {
+  getBrowserTargetDetails,
+  type BrowserTargetSelection,
+} from './shared/browserslist.ts';
 
 export interface AppOptions {
   /**
@@ -58,10 +62,10 @@ export interface AppBrowserOptions extends AppOptions {
   /**
    * The entry module for this browser. This should be an absolute path, or relative
    * path from the root directory containing your project. This entry should be the
-   * browser entrypoint.
+   * browser entrypoint. If you don’t provide a module, Quilt will automatically pick
+   *
    *
    * @example './browser.tsx'
-   * @default 'quilt:module/entry'
    */
   entry?: string;
 
@@ -102,12 +106,7 @@ export interface AppBrowserAssetsOptions {
   minify?: boolean;
 
   baseURL?: string;
-  targets?:
-    | string[]
-    | {
-        name?: string;
-        browsers?: string[];
-      };
+  targets?: BrowserTargetSelection;
   priority?: number;
 }
 
@@ -126,31 +125,12 @@ export async function quiltAppBrowser({
   const minify = assets?.minify ?? mode === 'production';
   const baseURL = assets?.baseURL ?? '/assets/';
 
-  const assetTargets = assets?.targets ?? {};
-  const targets = Array.isArray(assetTargets)
-    ? {
-        browsers: assetTargets,
-      }
-    : assetTargets;
-  const targetBrowsers =
-    targets.browsers ??
-    (await (async () => {
-      const {default: browserslist} = await import('browserslist');
-      const config = browserslist.findConfig(root);
-
-      if (config == null) return ['defaults'];
-
-      const targetName = targets.name ?? 'defaults';
-      return config[targetName] ?? ['defaults'];
-    })());
-  const normalizedTargetName =
-    targets.name === 'defaults' ? 'default' : targets.name;
-  const targetFilenamePart = normalizedTargetName
-    ? `.${normalizedTargetName}`
-    : '';
+  const browserTarget = await getBrowserTargetDetails(assets?.targets, {root});
+  const targetFilenamePart = browserTarget.name ? `.${browserTarget.name}` : '';
 
   const [
     {visualizer},
+    {magicModuleEnv, replaceProcessEnv},
     {sourceCode},
     {createTSConfigAliasPlugin},
     {css},
@@ -159,6 +139,7 @@ export async function quiltAppBrowser({
     nodePlugins,
   ] = await Promise.all([
     import('rollup-plugin-visualizer'),
+    import('./features/env.ts'),
     import('./features/source-code.ts'),
     import('./features/typescript.ts'),
     import('./features/css.ts'),
@@ -170,7 +151,9 @@ export async function quiltAppBrowser({
   const plugins: Plugin[] = [
     ...nodePlugins,
     systemJS({minify}),
-    sourceCode({mode, targets: targetBrowsers}),
+    replaceProcessEnv({mode}),
+    magicModuleEnv({...env, mode}),
+    sourceCode({mode, targets: browserTarget.browsers}),
     css({minify, emit: true}),
     rawAssets(),
     staticAssets({baseURL, emit: true}),
@@ -185,20 +168,6 @@ export async function quiltAppBrowser({
     plugins.push(tsconfigAliases);
   }
 
-  if (env) {
-    const {magicModuleEnv, replaceProcessEnv} = await import(
-      './features/env.ts'
-    );
-
-    if (typeof env === 'boolean') {
-      plugins.push(replaceProcessEnv({mode}));
-      plugins.push(magicModuleEnv({mode}));
-    } else {
-      plugins.push(replaceProcessEnv({mode}));
-      plugins.push(magicModuleEnv({mode}));
-    }
-  }
-
   const appEntry =
     app ??
     (await glob('{App,app,input}.{ts,tsx,mjs,js,jsx}', {
@@ -229,8 +198,10 @@ export async function quiltAppBrowser({
     plugins.push(minify());
   }
 
-  const cacheKey = targets.name ? {browserTarget: targets.name} : undefined;
-  const id = targets.name ? targets.name : undefined;
+  const cacheKey = browserTarget.name
+    ? {browserTarget: browserTarget.name}
+    : undefined;
+  const id = browserTarget.name ? browserTarget.name : undefined;
 
   plugins.push(
     assetManifest({

package/source/index.ts

@@ -5,6 +5,7 @@ export {
   type AppBrowserOptions,
   type AppServerOptions,
 } from './app.ts';
+export {quiltModule, type ModuleOptions} from './module.ts';
 export {
   quiltPackageESModules,
   quiltPackageESNext,

package/source/module.ts

@@ -0,0 +1,223 @@
+import * as path from 'path';
+import {Plugin, type RollupOptions} from 'rollup';
+import {glob} from 'glob';
+import {fileURLToPath} from 'url';
+
+import {getNodePlugins, removeBuildFiles} from './shared/rollup.ts';
+import {loadPackageJSON, type PackageJSON} from './shared/package-json.ts';
+import {
+  getBrowserTargetDetails,
+  type BrowserTargetSelection,
+} from './shared/browserslist.ts';
+import type {MagicModuleEnvOptions} from './features/env.ts';
+
+export interface ModuleOptions {
+  /**
+   * The root directory containing the source code for your application.
+   */
+  root?: string | URL;
+
+  /**
+   * Whether to include GraphQL-related code transformations.
+   *
+   * @default true
+   */
+  graphql?: boolean;
+
+  /**
+   * Customizes the behavior of environment variables for your module.
+   */
+  env?: MagicModuleEnvOptions;
+
+  /**
+   * Customizes the assets created for your module.
+   */
+  assets?: ModuleAssetsOptions;
+}
+
+export interface ModuleAssetsOptions {
+  /**
+   * Whether to minify assets created for this module.
+   *
+   * @default true
+   */
+  minify?: boolean;
+  hash?: boolean;
+  targets?: BrowserTargetSelection;
+}
+
+export async function quiltModule({
+  root: rootPath = process.cwd(),
+  env,
+  assets,
+  graphql = true,
+}: ModuleOptions = {}) {
+  const root =
+    typeof rootPath === 'string' ? rootPath : fileURLToPath(rootPath);
+  const mode =
+    (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
+  const outputDirectory = path.join(root, 'build/assets');
+
+  const minify = assets?.minify ?? true;
+  const hash = assets?.hash ?? true;
+  const hashFilenamePart = hash ? '.[hash]' : '';
+
+  const browserTarget = await getBrowserTargetDetails(assets?.targets, {root});
+  const targetFilenamePart = browserTarget.name ? `.${browserTarget.name}` : '';
+
+  const [
+    {visualizer},
+    {magicModuleEnv, replaceProcessEnv},
+    {sourceCode},
+    nodePlugins,
+    packageJSON,
+  ] = await Promise.all([
+    import('rollup-plugin-visualizer'),
+    import('./features/env.ts'),
+    import('./features/source-code.ts'),
+    getNodePlugins(),
+    loadPackageJSON(root),
+  ]);
+
+  const source = await sourceForPackage(root, packageJSON);
+
+  const plugins: Plugin[] = [
+    ...nodePlugins,
+    replaceProcessEnv({mode}),
+    magicModuleEnv({...env, mode}),
+    sourceCode({mode: 'production'}),
+    removeBuildFiles(['build/assets', 'build/reports'], {root}),
+  ];
+
+  if (graphql) {
+    const {graphql} = await import('./features/graphql.ts');
+    plugins.push(graphql({manifest: false}));
+  }
+
+  if (minify) {
+    const {minify} = await import('rollup-plugin-esbuild');
+    plugins.push(minify());
+  }
+
+  plugins.push(
+    visualizer({
+      template: 'treemap',
+      open: false,
+      brotliSize: true,
+      filename: path.resolve(
+        root,
+        `build/reports/bundle-visualizer${targetFilenamePart}.html`,
+      ),
+    }),
+  );
+
+  return {
+    input: source.files,
+    plugins,
+    onwarn(warning, defaultWarn) {
+      // Removes annoying warnings for React-focused libraries that
+      // include 'use client' directives.
+      if (
+        warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
+        /['"]use client['"]/.test(warning.message)
+      ) {
+        return;
+      }
+
+      defaultWarn(warning);
+    },
+    output: {
+      format: 'esm',
+      dir: outputDirectory,
+      entryFileNames: `[name]${targetFilenamePart}${hashFilenamePart}.js`,
+      assetFileNames: `[name]${targetFilenamePart}${hashFilenamePart}.[ext]`,
+    },
+  } satisfies RollupOptions;
+}
+
+async function sourceForPackage(root: string, packageJSON: PackageJSON) {
+  const [entries] = await Promise.all([
+    sourceEntriesForPackage(root, packageJSON),
+  ]);
+
+  let sourceRoot = root;
+
+  const sourceEntryFiles = Object.values(entries);
+
+  for (const entry of sourceEntryFiles) {
+    if (!entry.startsWith(root)) continue;
+
+    sourceRoot = path.resolve(
+      root,
+      path.relative(root, entry).split(path.sep)[0] ?? '.',
+    );
+    break;
+  }
+
+  return {root: sourceRoot, files: sourceEntryFiles};
+}
+
+async function sourceEntriesForPackage(root: string, packageJSON: PackageJSON) {
+  const {main, exports} = packageJSON;
+
+  const entries: Record<string, string> = {};
+
+  if (typeof main === 'string') {
+    entries['.'] = await resolveTargetFileAsSource(main, root);
+  }
+
+  if (typeof exports === 'string') {
+    entries['.'] = await resolveTargetFileAsSource(exports, root);
+    return entries;
+  } else if (exports == null || typeof exports !== 'object') {
+    return entries;
+  }
+
+  for (const [exportPath, exportCondition] of Object.entries(
+    exports as Record<string, null | string | Record<string, string>>,
+  )) {
+    let targetFile: string | null | undefined = null;
+
+    if (exportCondition == null) continue;
+
+    if (typeof exportCondition === 'string') {
+      targetFile = exportCondition;
+    } else {
+      targetFile ??=
+        exportCondition['source'] ??
+        exportCondition['quilt:source'] ??
+        exportCondition['quilt:esnext'] ??
+        Object.values(exportCondition).find(
+          (condition) =>
+            typeof condition === 'string' && condition.startsWith('./build/'),
+        );
+    }
+
+    if (targetFile == null) continue;
+
+    const sourceFile = await resolveTargetFileAsSource(targetFile, root);
+
+    entries[exportPath] = sourceFile;
+  }
+
+  return entries;
+}
+
+async function resolveTargetFileAsSource(file: string, root: string) {
+  const sourceFile = file.includes('/build/')
+    ? (
+        await glob(
+          file
+            .replace(/[/]build[/][^/]+[/]/, '/*/')
+            .replace(/(\.d\.ts|\.[\w]+)$/, '.*'),
+          {
+            cwd: root,
+            absolute: true,
+            ignore: [path.resolve(root, file)],
+          },
+        )
+      )[0]!
+    : path.resolve(root, file);
+
+  return sourceFile;
+}

package/source/shared/browserslist.ts

@@ -0,0 +1,32 @@
+export type BrowserTargetSelection =
+  | string[]
+  | {
+      name?: string;
+      browsers?: string[];
+    };
+
+export async function getBrowserTargetDetails(
+  targetSelection: BrowserTargetSelection = {},
+  {root}: {root?: string} = {},
+) {
+  const targets = Array.isArray(targetSelection)
+    ? {
+        browsers: targetSelection,
+      }
+    : targetSelection;
+  const targetBrowsers =
+    targets.browsers ??
+    (await (async () => {
+      const {default: browserslist} = await import('browserslist');
+      const config = browserslist.findConfig(root!);
+
+      if (config == null) return ['defaults'];
+
+      const targetName = targets.name ?? 'defaults';
+      return config[targetName] ?? ['defaults'];
+    })());
+
+  const name = targets.name === 'defaults' ? 'default' : targets.name;
+
+  return {name, browsers: targetBrowsers};
+}