@quilted/rollup 0.1.19 → 0.2.0

package/source/features/workers.ts

@@ -0,0 +1,292 @@
+import {posix} from 'path';
+import {URLSearchParams} from 'url';
+
+import {rollup} from 'rollup';
+import type {
+  Plugin,
+  InputOptions,
+  OutputOptions,
+  OutputChunk,
+  NormalizedInputOptions,
+} from 'rollup';
+
+import {multiline} from '../shared/strings.ts';
+
+const PREFIX = '\0quilt-worker:';
+const ENTRY_PREFIX = '\0quilt-worker-entry:';
+const MAGIC_MODULE_WORKER = 'quilt:module/worker.js';
+
+export interface WorkerWrapper {
+  readonly module: string;
+  readonly function: string;
+}
+
+export interface WorkerContext {
+  readonly module: string;
+  readonly wrapper: WorkerWrapper;
+}
+
+export interface BaseURLContext extends WorkerContext {
+  readonly filename: string;
+  readonly chunk: OutputChunk;
+  readonly outputOptions: OutputOptions;
+}
+
+export type ValueOrGetter<T, Context extends WorkerContext = WorkerContext> =
+  | T
+  | ((context: Context) => T | Promise<T>);
+
+export type ValueOrUpdateGetter<
+  T,
+  Context extends WorkerContext = WorkerContext,
+> = T | ((current: T, context: Context) => T | Promise<T>);
+
+export interface Options {
+  /**
+   * By default, this plugin uses `rollup().generate()` and attaches the
+   * resulting in-memory chunk to your main rollup build. When rolling rollup
+   * normally, this will output your asset to the file system when the main
+   * rollup build calls `write()`. Some tools that wrap rollup, like Vite, do
+   * don’t really call `write()`, so I can’t figure out how to make this approach
+   * work with them. In those instances, you can instead pass `write: true` here,
+   * which will then run `rollup().write()` on the worker bundle to actually output
+   * it to the filesystem (you can customize the output with the `outputOptions`
+   * option). You can then use the `baseURL()` option to control the URL that is
+   * generated for each worker module such that the tool is able to route that request
+   * to the written file. For example, in Vite, you can use the special `/@fs` prefix
+   * for a URL:
+   *
+   * ```ts
+   * import * as path from 'path';
+   *
+   * workers({
+   *   write: true,
+   *   baseURL({filename, outputOptions}) {
+   *     return `/@fs${path.join(outputOptions.dir, filename)}`;
+   *   },
+   * })
+   * ```
+   */
+  write?: ValueOrGetter<boolean>;
+  plugins?: ValueOrUpdateGetter<Plugin[]>;
+  inputOptions?: ValueOrUpdateGetter<InputOptions>;
+  outputOptions?: ValueOrUpdateGetter<OutputOptions>;
+  contentForWorker?: ValueOrGetter<string | undefined>;
+  baseURL?: ValueOrGetter<string | undefined, BaseURLContext>;
+  onIncludeFile?(file: string, worker: string): void;
+}
+
+export function workers({
+  write = false,
+  baseURL,
+  contentForWorker = defaultContentForWorker,
+  plugins = defaultPlugins,
+  inputOptions = {},
+  outputOptions = {},
+  onIncludeFile,
+}: Options = {}): Plugin {
+  let parentInputOptions: NormalizedInputOptions;
+  const workerMap = new Map<string, OutputChunk>();
+
+  return {
+    name: '@quilted/workers',
+    buildStart(inputOptions) {
+      parentInputOptions = inputOptions;
+    },
+    async resolveId(source, importer) {
+      if (!source.startsWith(PREFIX)) return null;
+
+      const {workerId, wrapper} = getWorkerRequest(source.replace(PREFIX, ''));
+      const resolvedWorker = await this.resolve(workerId, importer, {
+        skipSelf: true,
+      });
+
+      if (resolvedWorker == null) return null;
+
+      return `${PREFIX}${resolvedWorker.id}${wrapperToSearchString(wrapper)}`;
+    },
+    async load(id) {
+      if (!id.startsWith(PREFIX)) return null;
+
+      const {workerId, wrapper} = getWorkerRequest(id.replace(PREFIX, ''));
+
+      const workerContext: WorkerContext = {module: workerId, wrapper};
+
+      const workerPlugins: Plugin[] = [
+        {
+          name: '@quilted/workers/magic-modules',
+          resolveId(source) {
+            if (source.startsWith(ENTRY_PREFIX)) {
+              return {id: source};
+            }
+
+            if (source === MAGIC_MODULE_WORKER) {
+              return {id: workerId};
+            }
+
+            return null;
+          },
+          async load(id) {
+            if (!id.startsWith(ENTRY_PREFIX)) return null;
+
+            const {wrapper, workerId} = getWorkerRequest(
+              id.replace(ENTRY_PREFIX, ''),
+            );
+
+            const context: WorkerContext = {module: workerId, wrapper};
+
+            const content =
+              typeof contentForWorker === 'function'
+                ? await contentForWorker(context)
+                : contentForWorker;
+            return content ?? defaultContentForWorker(context);
+          },
+        },
+        ...(typeof plugins === 'function'
+          ? await plugins(
+              [
+                ...(parentInputOptions.plugins?.filter(
+                  (plugin): plugin is Plugin => Boolean(plugin),
+                ) ?? []),
+              ],
+              workerContext,
+            )
+          : plugins),
+      ];
+
+      const workerInput = `${ENTRY_PREFIX}${workerId}${wrapperToSearchString(
+        wrapper,
+      )}`;
+
+      const baseInputOptions: InputOptions = {
+        ...parentInputOptions,
+        input: workerInput,
+        plugins: workerPlugins,
+      };
+
+      const workerInputOptions =
+        typeof inputOptions === 'function'
+          ? await inputOptions(baseInputOptions, workerContext)
+          : baseInputOptions;
+
+      const baseOutputOptions: OutputOptions = {
+        format: 'iife',
+        inlineDynamicImports: true,
+      };
+
+      const workerOutputOptions =
+        typeof outputOptions === 'function'
+          ? await outputOptions(baseOutputOptions, workerContext)
+          : {...baseOutputOptions, ...outputOptions};
+
+      const shouldWrite =
+        typeof write === 'function' ? await write(workerContext) : write;
+
+      const bundle = await rollup(workerInputOptions);
+
+      const result = await (shouldWrite
+        ? bundle.write(workerOutputOptions)
+        : bundle.generate(workerOutputOptions));
+
+      const firstChunk = result.output.find(
+        (output): output is OutputChunk => output.type === 'chunk',
+      );
+
+      if (firstChunk == null) {
+        workerMap.delete(workerId);
+        return null;
+      }
+
+      workerMap.set(workerId, firstChunk);
+
+      for (const module of Object.keys(firstChunk.modules)) {
+        onIncludeFile?.(module, id);
+        this.addWatchFile(module);
+      }
+
+      const filename = firstChunk.fileName;
+      let resolvedBaseURL = filename;
+
+      if (typeof baseURL === 'string') {
+        resolvedBaseURL = posix.join(baseURL, filename);
+      } else if (typeof baseURL === 'function') {
+        const returnedBaseURL = await baseURL({
+          ...workerContext,
+          filename,
+          chunk: firstChunk,
+          outputOptions: workerOutputOptions,
+        });
+
+        if (returnedBaseURL) {
+          resolvedBaseURL = posix.join(returnedBaseURL, filename);
+        }
+      }
+
+      return `export default ${JSON.stringify(resolvedBaseURL)};`;
+    },
+    generateBundle(_, bundle) {
+      // We already wrote the chunks, no need to do it again I think?
+      if (write) return;
+
+      for (const chunk of workerMap.values()) {
+        if (chunk.fileName in bundle) continue;
+        bundle[chunk.fileName] = chunk;
+      }
+    },
+  };
+}
+
+function getWorkerRequest(id: string): {
+  workerId: string;
+  wrapper: WorkerWrapper;
+} {
+  const [workerId, searchString] = id.split('?');
+  const searchParams = new URLSearchParams(searchString);
+  const wrapperModule = searchParams.get('module')!;
+  const wrapperFunction = searchParams.get('function')!;
+
+  return {
+    workerId: workerId!,
+    wrapper: {module: wrapperModule, function: wrapperFunction},
+  };
+}
+
+const workerFunctionContent = (pkg: string) =>
+  new Map([
+    ['createWorker', `import ${JSON.stringify(MAGIC_MODULE_WORKER)};`],
+    [
+      'createThreadWorker',
+      multiline`
+        import {createThreadFromWebWorker} from ${JSON.stringify(pkg)};
+        import * as expose from ${JSON.stringify(MAGIC_MODULE_WORKER)};
+
+        createThreadFromWebWorker(self, {expose});
+      `,
+    ],
+  ]);
+
+const KNOWN_WRAPPER_MODULES = new Map<string, Map<string, string>>([
+  ['@quilted/workers', workerFunctionContent('@quilted/workers')],
+  ['@quilted/react-workers', workerFunctionContent('@quilted/react-workers')],
+  ['@quilted/quilt/threads', workerFunctionContent('@quilted/quilt/threads')],
+]);
+
+function defaultContentForWorker({wrapper}: WorkerContext) {
+  const content = KNOWN_WRAPPER_MODULES.get(wrapper.module)?.get(
+    wrapper.function,
+  );
+
+  if (content == null) {
+    throw new Error(`Unknown worker wrapper: ${JSON.stringify(wrapper)}`);
+  }
+
+  return content;
+}
+
+function defaultPlugins(mainBuildPlugins: Plugin[]) {
+  return mainBuildPlugins.filter((plugin) => plugin.name !== 'serve');
+}
+
+function wrapperToSearchString(wrapper: WorkerWrapper) {
+  return `?${new URLSearchParams(Object.entries(wrapper)).toString()}`;
+}

package/source/index.ts

@@ -1,13 +1,17 @@
 export {
+  quiltApp,
   quiltAppBrowser,
   quiltAppServer,
   type AppOptions,
+  type AppBaseOptions,
   type AppBrowserOptions,
   type AppServerOptions,
 } from './app.ts';
 export {quiltModule, type ModuleOptions} from './module.ts';
 export {
+  quiltPackage,
   quiltPackageESModules,
   quiltPackageESNext,
   type PackageOptions,
 } from './package.ts';
+export {quiltServer, type ServerOptions} from './server.ts';

package/source/module.ts

@@ -1,15 +1,20 @@
 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 {resolveRoot} from './shared/path.ts';
+import {
+  RollupNodePluginOptions,
+  getNodePlugins,
+  removeBuildFiles,
+} from './shared/rollup.ts';
 import {loadPackageJSON, type PackageJSON} from './shared/package-json.ts';
 import {
-  getBrowserTargetDetails,
-  type BrowserTargetSelection,
+  getBrowserGroupTargetDetails,
+  rollupGenerateOptionsForBrowsers,
+  type BrowserGroupTargetSelection,
 } from './shared/browserslist.ts';
-import type {MagicModuleEnvOptions} from './features/env.ts';
+import {resolveEnvOption, type MagicModuleEnvOptions} from './features/env.ts';
 
 export interface ModuleOptions {
   /**
@@ -17,6 +22,16 @@ export interface ModuleOptions {
    */
   root?: string | URL;
 
+  /**
+   * The entry module for this module. This should be an absolute path, or relative
+   * path from the root directory containing your project. If not provided, this
+   * defaults the `main` or `exports['.']` field in your package.json, or a file named
+   * `index`, `module`, `entry`, or `input` in your project root.
+   *
+   * @example './my-module.tsx'
+   */
+  entry?: string;
+
   /**
    * Whether to include GraphQL-related code transformations.
    *
@@ -27,7 +42,7 @@ export interface ModuleOptions {
   /**
    * Customizes the behavior of environment variables for your module.
    */
-  env?: MagicModuleEnvOptions;
+  env?: MagicModuleEnvOptions | MagicModuleEnvOptions['mode'];
 
   /**
    * Customizes the assets created for your module.
@@ -35,7 +50,8 @@ export interface ModuleOptions {
   assets?: ModuleAssetsOptions;
 }
 
-export interface ModuleAssetsOptions {
+export interface ModuleAssetsOptions
+  extends Pick<RollupNodePluginOptions, 'bundle'> {
   /**
    * Whether to minify assets created for this module.
    *
@@ -43,48 +59,55 @@ export interface ModuleAssetsOptions {
    */
   minify?: boolean;
   hash?: boolean | 'async-only';
-  targets?: BrowserTargetSelection;
+  targets?: BrowserGroupTargetSelection;
 }
 
 export async function quiltModule({
   root: rootPath = process.cwd(),
+  entry,
   env,
   assets,
   graphql = true,
 }: ModuleOptions = {}) {
-  const root =
-    typeof rootPath === 'string' ? rootPath : fileURLToPath(rootPath);
-  const mode =
-    (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
+  const root = resolveRoot(rootPath);
+  const mode = (typeof env === 'object' ? env?.mode : env) ?? 'production';
   const outputDirectory = path.join(root, 'build/assets');
 
   const minify = assets?.minify ?? true;
   const hash = assets?.hash ?? 'async-only';
+  const bundle = assets?.bundle ?? true;
 
-  const browserTarget = await getBrowserTargetDetails(assets?.targets, {root});
-  const targetFilenamePart = browserTarget.name ? `.${browserTarget.name}` : '';
+  const browserGroup = await getBrowserGroupTargetDetails(assets?.targets, {
+    root,
+  });
+  const targetFilenamePart = browserGroup.name ? `.${browserGroup.name}` : '';
 
   const [
     {visualizer},
     {magicModuleEnv, replaceProcessEnv},
     {sourceCode},
+    {esnext},
     nodePlugins,
     packageJSON,
   ] = await Promise.all([
     import('rollup-plugin-visualizer'),
     import('./features/env.ts'),
     import('./features/source-code.ts'),
-    getNodePlugins(),
+    import('./features/esnext.ts'),
+    getNodePlugins({bundle}),
     loadPackageJSON(root),
   ]);
 
-  const source = await sourceForModule(root, packageJSON);
+  const finalEntry = entry
+    ? path.resolve(root, entry)
+    : await sourceForModule(root, packageJSON);
 
   const plugins: Plugin[] = [
     ...nodePlugins,
     replaceProcessEnv({mode}),
-    magicModuleEnv({...env, mode}),
-    sourceCode({mode: 'production', targets: browserTarget.browsers}),
+    magicModuleEnv({...resolveEnvOption(env), mode}),
+    sourceCode({mode, targets: browserGroup.browsers}),
+    esnext({mode, targets: browserGroup.browsers}),
     removeBuildFiles(['build/assets', 'build/reports'], {root}),
   ];
 
@@ -111,7 +134,7 @@ export async function quiltModule({
   );
 
   return {
-    input: source,
+    input: finalEntry,
     plugins,
     onwarn(warning, defaultWarn) {
       // Removes annoying warnings for React-focused libraries that
@@ -137,6 +160,9 @@ export async function quiltModule({
       assetFileNames: `[name]${targetFilenamePart}${
         hash === true ? `.[hash]` : ''
       }.[ext]`,
+      generatedCode: await rollupGenerateOptionsForBrowsers(
+        browserGroup.browsers,
+      ),
     },
   } satisfies RollupOptions;
 }