@quilted/rollup 0.1.19 → 0.2.1

package/source/server.ts

@@ -0,0 +1,245 @@
+import * as path from 'path';
+import {Plugin, type RollupOptions} from 'rollup';
+import {glob} from 'glob';
+
+import {
+  RollupNodePluginOptions,
+  getNodePlugins,
+  removeBuildFiles,
+} from './shared/rollup.ts';
+import {resolveRoot} from './shared/path.ts';
+import {loadPackageJSON, type PackageJSON} from './shared/package-json.ts';
+import {magicModuleRequestRouterEntry} from './features/request-router.ts';
+import {resolveEnvOption, type MagicModuleEnvOptions} from './features/env.ts';
+import {MAGIC_MODULE_ENTRY, MAGIC_MODULE_REQUEST_ROUTER} from './constants.ts';
+import {createMagicModulePlugin} from './shared/magic-module.ts';
+
+export interface ServerOptions {
+  /**
+   * The root directory containing the source code for your application.
+   */
+  root?: string | URL;
+
+  /**
+   * The entry module for this server. By default, this module must export
+   * a `RequestRouter` object as its default export, which will be wrapped in
+   * the specific server runtime you configure. If you set the format to `'custom'`,
+   * this entry can be any content — it will be bundled as-is.
+   *
+   * If not provided, this will default to a file named `server`, `service`,
+   * or `backend` in your server’s root directory.
+   */
+  entry?: string;
+
+  /**
+   * Whether this server code uses the `request-router` library to
+   * define itself in a generic way, which can be adapted to a variety
+   * of environments. By default, this is `'request-router'`, and when `'request-router'`,
+   * the `entry` you specified must export an `RequestRouter` object as
+   * its default export. When set to `false`, the app server will be built
+   * as a basic server-side JavaScript project, without the special
+   * `request-router` adaptor.
+   *
+   * @default 'request-router'
+   */
+  format?: 'request-router' | 'custom';
+
+  /**
+   * Whether to include GraphQL-related code transformations.
+   *
+   * @default true
+   */
+  graphql?: boolean;
+
+  /**
+   * Customizes the behavior of environment variables for your module.
+   */
+  env?: MagicModuleEnvOptions | MagicModuleEnvOptions['mode'];
+
+  /**
+   * Controls how the server outputs are generated.
+   */
+  output?: ServerOutputOptions;
+
+  /**
+   * The port that the server will listen on when it runs. This only applies
+   * when you use the `request-router` format — if you use the `custom` format,
+   * you are responsible for starting the server yourself.
+   *
+   * If you do not provide a value here, the server will listen for requests on
+   * the port specified by `process.env.NODE_ENV`.
+   */
+  port?: number | string;
+
+  /**
+   * The host that the server will listen on when it runs. This only applies
+   * when you use the `request-router` format — if you use the `custom` format,
+   * you are responsible for starting the server yourself.
+   */
+  host?: string;
+}
+
+export interface ServerOutputOptions
+  extends Pick<RollupNodePluginOptions, 'bundle'> {
+  /**
+   * Whether to minify assets created for this server.
+   *
+   * @default false
+   */
+  minify?: boolean;
+
+  /**
+   * Whether to add a hash to the output files for your server. You can set
+   * this to `true`, which includes a hash for all files, `false`, which never
+   * includes a hash, or `'async-only'`, which only includes a hash for files
+   * that are loaded asynchronously (that is, your entry file will not have a
+   * hash, but any files it loads will).
+   *
+   * @default 'async-only'
+   */
+  hash?: boolean | 'async-only';
+
+  /**
+   * What module format to use for the server output.
+   *
+   * @default 'esmodules'
+   */
+  format?: 'esmodules' | 'esm' | 'es' | 'commonjs' | 'cjs';
+}
+
+export async function quiltServer({
+  root: rootPath = process.cwd(),
+  entry,
+  format = 'request-router',
+  env,
+  graphql = true,
+  output,
+  port,
+  host,
+}: ServerOptions = {}) {
+  const root = resolveRoot(rootPath);
+  const mode =
+    (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
+  const outputDirectory = path.join(root, 'build/server');
+
+  const minify = output?.minify ?? false;
+  const bundle = output?.bundle;
+  const hash = output?.hash ?? 'async-only';
+  const outputFormat = output?.format ?? 'esmodules';
+
+  const [
+    {visualizer},
+    {magicModuleEnv, replaceProcessEnv},
+    {sourceCode},
+    {esnext},
+    nodePlugins,
+    packageJSON,
+  ] = await Promise.all([
+    import('rollup-plugin-visualizer'),
+    import('./features/env.ts'),
+    import('./features/source-code.ts'),
+    import('./features/esnext.ts'),
+    getNodePlugins({bundle}),
+    loadPackageJSON(root),
+  ]);
+
+  const serverEntry = entry
+    ? path.resolve(root, entry)
+    : await sourceForServer(root, packageJSON);
+
+  const finalEntry =
+    format === 'request-router'
+      ? MAGIC_MODULE_ENTRY
+      : serverEntry ?? MAGIC_MODULE_ENTRY;
+
+  const plugins: Plugin[] = [
+    ...nodePlugins,
+    replaceProcessEnv({mode}),
+    magicModuleEnv({...resolveEnvOption(env), mode}),
+    sourceCode({mode, targets: ['current node']}),
+    esnext({mode, targets: ['current node']}),
+    removeBuildFiles(['build/server', 'build/reports'], {root}),
+  ];
+
+  if (format === 'request-router') {
+    plugins.push(
+      createMagicModulePlugin({
+        name: '@quilted/magic-module/server-request-router',
+        module: MAGIC_MODULE_REQUEST_ROUTER,
+        alias: serverEntry,
+      }),
+      magicModuleRequestRouterEntry({
+        host,
+        port: typeof port === 'string' ? Number.parseInt(port, 10) : port,
+      }),
+    );
+  }
+
+  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.html`),
+    }),
+  );
+
+  return {
+    input: finalEntry,
+    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:
+        outputFormat === 'commonjs' || outputFormat === 'cjs' ? 'cjs' : 'esm',
+      dir: outputDirectory,
+      entryFileNames: `server${hash === true ? `.[hash]` : ''}.js`,
+      chunkFileNames: `[name]${
+        hash === true || hash === 'async-only' ? `.[hash]` : ''
+      }.js`,
+      assetFileNames: `[name]${hash === true ? `.[hash]` : ''}.[ext]`,
+      generatedCode: 'es2015',
+    },
+  } satisfies RollupOptions;
+}
+
+async function sourceForServer(root: string, packageJSON: PackageJSON) {
+  const {main, exports} = packageJSON;
+
+  const entryFromPackageJSON = main ?? (exports as any)?.['.'];
+
+  if (entryFromPackageJSON) {
+    return path.resolve(root, entryFromPackageJSON);
+  }
+
+  const possibleSourceFiles = await glob(
+    '{index,server,service,backend,entry,input}.{ts,tsx,mjs,js,jsx}',
+    {
+      cwd: root,
+      nodir: true,
+      absolute: true,
+    },
+  );
+
+  return possibleSourceFiles[0]!;
+}

package/source/shared/browserslist.ts

@@ -1,32 +1,222 @@
-export type BrowserTargetSelection =
-  | string[]
+export type BrowserGroupTargetSelection =
+  | readonly string[]
   | {
       name?: string;
-      browsers?: string[];
+      browsers?: readonly string[];
     };
 
-export async function getBrowserTargetDetails(
-  targetSelection: BrowserTargetSelection = {},
+export async function getBrowserGroupTargetDetails(
+  targetSelection: BrowserGroupTargetSelection = {},
   {root}: {root?: string} = {},
 ) {
-  const targets = Array.isArray(targetSelection)
-    ? {
-        browsers: targetSelection,
-      }
-    : targetSelection;
+  const {default: browserslist} = await import('browserslist');
+
+  const targets: {
+    name?: string;
+    browsers?: readonly string[];
+  } = (
+    Array.isArray(targetSelection)
+      ? {
+          browsers: targetSelection,
+        }
+      : targetSelection
+  ) as any;
+
   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';
+      const config = await getBrowserGroups({root});
+      const targetName = targets.name ?? 'default';
       return config[targetName] ?? ['defaults'];
     })());
 
-  const name = targets.name === 'defaults' ? 'default' : targets.name;
+  return {name: targets.name, browsers: browserslist(targetBrowsers)};
+}
+
+export interface BrowserGroups {
+  default: readonly string[];
+  [name: string]: readonly string[];
+}
+
+export async function getBrowserGroups({
+  root = process.cwd(),
+}: {root?: string} = {}): Promise<BrowserGroups> {
+  const {default: browserslist} = await import('browserslist');
+  const config = browserslist.findConfig(root);
+
+  if (config == null) return {default: browserslist(['defaults'])};
+
+  const {defaults, ...rest} = config;
+
+  const browserGroups: BrowserGroups = {} as any;
+
+  const groupsWithFullList = Object.entries(rest)
+    .map(([name, browsers]) => ({
+      name,
+      browsers: browserslist(browsers),
+    }))
+    .sort((first, second) => first.browsers.length - second.browsers.length);
+
+  for (const {name, browsers} of groupsWithFullList) {
+    browserGroups[name] = browsers;
+  }
+
+  browserGroups.default = defaults;
+
+  return browserGroups;
+}
+
+export async function getBrowserGroupRegularExpressions(
+  groups?: BrowserGroups,
+): Promise<Record<string, RegExp>> {
+  const [{default: browserslist}, {getUserAgentRegex}] = await Promise.all([
+    import('browserslist'),
+    import('browserslist-useragent-regexp'),
+  ]);
+
+  // Expand the browserslist queries into the full list of supported browsers,
+  // and sort by the number of browsers in each group (with the last item having
+  // the largest browser support)
+  const groupsWithFullList = Object.entries(
+    groups ?? (await getBrowserGroups()),
+  )
+    .map(([name, browsers]) => ({
+      name,
+      browsers: browserslist(browsers),
+    }))
+    .sort((first, second) => first.browsers.length - second.browsers.length);
+
+  if (groupsWithFullList.length === 0) return {};
+
+  const lastGroup = groupsWithFullList.pop()!;
+
+  const regexes: Record<string, RegExp> = {};
+
+  for (const {name, browsers} of groupsWithFullList) {
+    const regex = getUserAgentRegex({
+      browsers,
+      ignoreMinor: true,
+      ignorePatch: true,
+      allowHigherVersions: true,
+    });
+
+    regexes[name] = regex;
+  }
+
+  // The last group is the default group, so it should match everything
+  regexes[lastGroup.name] = new RegExp('');
+
+  return regexes;
+}
+
+let esmBrowserslist: Promise<Set<string>>;
+
+export async function targetsSupportModules(targets: readonly string[]) {
+  esmBrowserslist ??= (async () => {
+    const {default: browserslist} = await import('browserslist');
+
+    return new Set(
+      browserslist(
+        'defaults and fully supports es6-module and fully supports es6-module-dynamic-import',
+      ),
+    );
+  })();
+
+  const esmBrowsers = await esmBrowserslist;
+
+  return targets.every((target) => esmBrowsers.has(target));
+}
+
+const BROWSESLIST_BROWSER_TO_MDN_BROWSER = new Map([
+  ['and_chr', 'chrome_android'],
+  ['and_ff', 'firefox_android'],
+  ['and_qq', 'qq_android'],
+  ['and_uc', 'uc_android'],
+  ['android', 'webview_android'],
+  ['chrome', 'chrome'],
+  ['edge', 'edge'],
+  ['edge_mob', 'edge_mobile'],
+  ['firefox', 'firefox'],
+  ['ie', 'ie'],
+  ['ios_saf', 'safari_ios'],
+  ['node', 'nodejs'],
+  ['opera', 'opera'],
+  ['safari', 'safari'],
+  ['samsung', 'samsunginternet_android'],
+]);
+
+// Roughly adapted from https://github.com/webhintio/hint/blob/main/packages/utils-compat-data/src/browsers.ts
+export async function rollupGenerateOptionsForBrowsers(
+  browsers: readonly string[],
+) {
+  const [{default: semver}, {default: mdn}] = await Promise.all([
+    import('semver'),
+    import('@mdn/browser-compat-data', {
+      assert: {type: 'json'},
+    }) as Promise<any>,
+  ]);
+
+  const arrowFunctionsSupport =
+    mdn.javascript.functions.arrow_functions.__compat.support;
+  const constBindingsSupport = mdn.javascript.statements.const.__compat.support;
+  const objectShorthandSupport =
+    mdn.javascript.grammar.shorthand_object_literals.__compat.support;
+  const symbolsSupport = mdn.javascript.builtins.Symbol.__compat.support;
+
+  let arrowFunctions = true;
+  let constBindings = true;
+  let objectShorthand = true;
+  let symbols = true;
+
+  const isSupported = (
+    browser: string,
+    version: import('semver').SemVer,
+    supportList: any,
+  ) => {
+    const supportedVersionDetails = supportList[browser];
+    if (supportedVersionDetails == null) return false;
+
+    const supportedVersion = semver.coerce(
+      supportedVersionDetails.version_added,
+    );
+    if (supportedVersion == null) return false;
+
+    return semver.gte(version, supportedVersion);
+  };
+
+  for (const browser of browsers) {
+    const [name, version] = browser.split(' ');
+
+    const semverVersion = semver.coerce(version);
+    if (semverVersion == null) continue;
+
+    const mdnBrowser = BROWSESLIST_BROWSER_TO_MDN_BROWSER.get(name!);
+    if (mdnBrowser == null) continue;
+
+    arrowFunctions &&= isSupported(
+      mdnBrowser,
+      semverVersion,
+      arrowFunctionsSupport,
+    );
+    constBindings &&= isSupported(
+      mdnBrowser,
+      semverVersion,
+      constBindingsSupport,
+    );
+    objectShorthand &&= isSupported(
+      mdnBrowser,
+      semverVersion,
+      objectShorthandSupport,
+    );
+    symbols &&= isSupported(mdnBrowser, semverVersion, symbolsSupport);
+  }
 
-  return {name, browsers: targetBrowsers};
+  return {
+    preset: 'es2015',
+    arrowFunctions,
+    constBindings,
+    objectShorthand,
+    reservedNamesAsProps: objectShorthand,
+    symbols,
+  } satisfies import('rollup').GeneratedCodeOptions;
 }

package/source/shared/path.ts

@@ -0,0 +1,5 @@
+import {fileURLToPath} from 'url';
+
+export function resolveRoot(root: string | URL) {
+  return typeof root === 'string' ? root : fileURLToPath(root);
+}

package/source/shared/rollup.ts

@@ -39,7 +39,37 @@ export function removeBuildFiles(
   } satisfies Plugin;
 }
 
-export async function getNodePlugins() {
+export interface RollupNodeBundle {
+  readonly builtins?: boolean;
+  readonly dependencies?: boolean;
+  readonly devDependencies?: boolean;
+  readonly peerDependencies?: boolean;
+  readonly exclude?: (string | RegExp)[];
+  readonly include?: (string | RegExp)[];
+}
+
+export interface RollupNodePluginOptions {
+  /**
+   * Controls how dependencies from node_modules will be bundled into
+   * your rollup build. This can either be `true`, indicating that all
+   * dependencies (except node builtins, like `fs`) will be bundled;
+   * `false`, indicating that all node dependencies should be treated as
+   * external in the resulting build; or a `RollupNodeBundle` object
+   * that gives fine-grained control over how node dependencies are
+   * bundled. The options in the `RollupNodeBundle` object indicate
+   * which dependencies to bundle into your project; this is similar to
+   * the options provided to [`rollup-plugin-node-externals`](https://github.com/Septh/rollup-plugin-node-externals),
+   * except that those options are inverted (e.g., they indicate which
+   * modules to externalize, rather than which modules to bundle).
+   *
+   * @see https://github.com/Septh/rollup-plugin-node-externals
+   */
+  bundle?: boolean | RollupNodeBundle;
+}
+
+export async function getNodePlugins({
+  bundle = {},
+}: RollupNodePluginOptions = {}) {
   const [
     {default: commonjs},
     {default: json},
@@ -52,13 +82,81 @@ export async function getNodePlugins() {
     import('rollup-plugin-node-externals'),
   ]);
 
+  let nodeExternalsOptions: Parameters<typeof nodeExternals>[0];
+
+  if (bundle === true) {
+    // If the consumer wants to bundle node dependencies, we use our
+    // default bundling config, which inlines all node dependencies
+    // other than node builtins.
+    nodeExternalsOptions = {
+      builtins: true,
+      builtinsPrefix: 'strip',
+      deps: false,
+      devDeps: false,
+      peerDeps: false,
+      optDeps: false,
+    };
+  } else if (bundle === false) {
+    // If the consumer does not want to bundle node dependencies,
+    // we mark all dependencies as external.
+    nodeExternalsOptions = {
+      builtins: true,
+      builtinsPrefix: 'add',
+      deps: true,
+      devDeps: true,
+      peerDeps: true,
+      optDeps: true,
+    };
+  } else {
+    // Use the customized bundling configuration. Because this option
+    // is framed as what you bundle, rather than what you externalize,
+    // we need to invert all their options. For options that aren’t set,
+    // we default to bundling only development dependencies — production
+    // dependencies and node built-ins are not bundled.
+    const {
+      builtins: bundleBuiltins = false,
+      dependencies: bundleDependencies = false,
+      devDependencies: bundleDevDependencies = true,
+      peerDependencies: bundlePeerDependencies = false,
+      include: alwaysBundleDependencies,
+      exclude: neverBundleDependencies,
+    } = bundle;
+
+    nodeExternalsOptions = {
+      builtins: !bundleBuiltins,
+      builtinsPrefix: bundleBuiltins ? 'strip' : 'add',
+      deps: !bundleDependencies,
+      devDeps: !bundleDevDependencies,
+      peerDeps: !bundlePeerDependencies,
+      optDeps: !bundlePeerDependencies,
+      include: neverBundleDependencies,
+      exclude: alwaysBundleDependencies,
+    };
+  }
+
   return [
-    nodeExternals({}),
+    nodeExternals(nodeExternalsOptions),
     nodeResolve({
       preferBuiltins: true,
       dedupe: [],
-      // extensions,
-      // exportConditions,
+      extensions: [
+        '.ts',
+        '.tsx',
+        '.mts',
+        '.mtsx',
+        '.js',
+        '.jsx',
+        '.es6',
+        '.es',
+        '.mjs',
+      ],
+      exportConditions: [
+        'esnext',
+        'quilt:esnext',
+        'default',
+        'module',
+        'import',
+      ],
     }),
     commonjs(),
     json(),

package/tsconfig.json

@@ -5,6 +5,10 @@
     "outDir": "build/typescript"
   },
   "include": ["source"],
-  "exclude": ["quilt.project.ts", "**/*.test.ts", "**/*.test.tsx"],
-  "references": [{"path": "../assets"}, {"path": "../graphql"}]
+  "exclude": ["**/*.test.ts", "**/*.test.tsx"],
+  "references": [
+    {"path": "../assets"},
+    {"path": "../babel"},
+    {"path": "../graphql"}
+  ]
 }