@quilted/rollup 0.1.0

package/source/app.ts

@@ -0,0 +1,217 @@
+import type {Plugin} from 'rollup';
+
+import {
+  MAGIC_MODULE_APP_COMPONENT,
+  MAGIC_MODULE_BROWSER_ASSETS,
+  MAGIC_MODULE_REQUEST_ROUTER,
+} from './constants.ts';
+import {magicModuleEnv, type MagicModuleEnvOptions} from './env.ts';
+import {magicModuleRequestRouterEntry} from './request-router.ts';
+
+import {multiline} from './shared/strings.ts';
+import {
+  createMagicModulePlugin,
+  createMagicModuleEntryPlugin,
+} from './shared/magic-module.ts';
+
+export interface AppOptions {
+  /**
+   * The entry module for this app. This should be an absolute path, or relative
+   * path from the root directory containing your project. This entry should just be
+   * for the main `App` component in your project, which Quilt will automatically use
+   * to create browser and server-side entries for your project.
+   *
+   * If you only want to use a custom entry module for the browser build, use the
+   * `browser.entry` option instead. If you only want to use a custom entry module
+   * for the server-side build, use the `server.entry` option instead.
+   *
+   * @example './App.tsx'
+   */
+  entry?: string;
+
+  /**
+   * Whether to include GraphQL-related code transformations.
+   *
+   * @default true
+   */
+  graphql?: boolean;
+
+  /**
+   * Customizes the behavior of environment variables for your application. You
+   * can further customize the environment variables provided during server-side
+   * rendering by passing `server.env`.
+   */
+  env?: MagicModuleEnvOptions;
+}
+
+export function quiltApp({env, entry}: AppOptions = {}) {
+  return {
+    name: '@quilted/app',
+    options(originalOptions) {
+      const newPlugins = [
+        ...(Array.isArray(originalOptions.plugins)
+          ? originalOptions.plugins
+          : originalOptions.plugins
+          ? [originalOptions.plugins]
+          : []),
+      ];
+
+      const newOptions = {...originalOptions, plugins: newPlugins};
+
+      if (env) {
+        newPlugins.push(
+          typeof env === 'boolean' ? magicModuleEnv() : magicModuleEnv(env),
+        );
+      }
+
+      if (entry) {
+        newPlugins.push(magicModuleAppComponent({entry}));
+      }
+
+      return newOptions;
+    },
+  } satisfies Plugin;
+}
+
+export interface AppBrowserOptions {
+  /**
+   * Whether the app should use hydration or client-side rendering.
+   */
+  hydrate?: boolean;
+
+  /**
+   * The CSS selector to render or hydrate the application into.
+   */
+  selector?: string;
+}
+
+export function quiltAppBrowser(options: AppBrowserOptions = {}) {
+  return {
+    name: '@quilted/app/browser',
+    options(originalOptions) {
+      const newPlugins = [
+        ...(Array.isArray(originalOptions.plugins)
+          ? originalOptions.plugins
+          : originalOptions.plugins
+          ? [originalOptions.plugins]
+          : []),
+      ];
+
+      const newOptions = {...originalOptions, plugins: newPlugins};
+
+      newPlugins.push(magicModuleAppBrowserEntry(options));
+
+      return newOptions;
+    },
+  } satisfies Plugin;
+}
+
+export interface AppServerOptions {
+  /**
+   * The entry module for the server of this app. This module must export a
+   * `RequestRouter` object as its default export, which will be wrapped in
+   * the specific server runtime you configure.
+   */
+  entry?: string;
+}
+
+export function quiltAppServer(options: AppServerOptions = {}) {
+  return {
+    name: '@quilted/app/server',
+    options(originalOptions) {
+      const newPlugins = [
+        ...(Array.isArray(originalOptions.plugins)
+          ? originalOptions.plugins
+          : originalOptions.plugins
+          ? [originalOptions.plugins]
+          : []),
+      ];
+
+      const newOptions = {...originalOptions, plugins: newPlugins};
+
+      newPlugins.push(magicModuleRequestRouterEntry());
+      newPlugins.push(magicModuleAppRequestRouter(options));
+
+      return newOptions;
+    },
+  } satisfies Plugin;
+}
+
+export function magicModuleAppComponent({entry}: {entry: string}) {
+  return createMagicModulePlugin({
+    name: '@quilted/magic-module/app',
+    module: MAGIC_MODULE_APP_COMPONENT,
+    alias: entry,
+  });
+}
+
+export function magicModuleAppRequestRouter({
+  entry,
+}: Pick<AppServerOptions, 'entry'> = {}) {
+  return createMagicModulePlugin({
+    name: '@quilted/magic-module/app-request-router',
+    module: MAGIC_MODULE_REQUEST_ROUTER,
+    alias: entry,
+    source: entry
+      ? undefined
+      : async function source() {
+          return multiline`
+            import '@quilted/quilt/globals';
+
+            import {jsx} from 'react/jsx-runtime';
+            import {RequestRouter} from '@quilted/quilt/request-router';
+            import {renderToResponse} from '@quilted/quilt/server';
+
+            import App from ${JSON.stringify(MAGIC_MODULE_APP_COMPONENT)};
+            import {BrowserAssets} from ${JSON.stringify(
+              MAGIC_MODULE_BROWSER_ASSETS,
+            )};
+
+            const router = new RequestRouter();
+            const assets = new BrowserAssets();
+
+            // For all GET requests, render our React application.
+            router.get(async (request) => {
+              const response = await renderToResponse(jsx(App), {
+                request,
+                assets,
+              });
+
+              return response;
+            });
+
+            export default router;
+          `;
+        },
+  });
+}
+
+export function magicModuleAppBrowserEntry({
+  hydrate = true,
+  selector = '#app',
+}: AppBrowserOptions = {}) {
+  return createMagicModuleEntryPlugin({
+    name: '@quilted/magic-module/app-browser-entry',
+    sideEffects: true,
+    async source() {
+      const reactRootFunction = hydrate ? 'hydrateRoot' : 'createRoot';
+
+      return multiline`
+        import '@quilted/quilt/globals';
+
+        import {jsx} from 'react/jsx-runtime';
+        import {${reactRootFunction}} from 'react-dom/client';
+
+        import App from ${JSON.stringify(MAGIC_MODULE_APP_COMPONENT)};
+
+        const element = document.querySelector(${JSON.stringify(selector)});
+
+        ${
+          hydrate
+            ? `${reactRootFunction}(element, jsx(App));`
+            : `${reactRootFunction}(element).render(jsx(App));`
+        }
+      `;
+    },
+  });
+}

package/source/constants.ts

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

package/source/env.ts

@@ -0,0 +1,153 @@
+import * as path from 'path';
+import * as fs from 'fs';
+
+import type {PluginContext} from 'rollup';
+import {stripIndent} from 'common-tags';
+
+import {MAGIC_MODULE_ENV} from './constants.ts';
+import {createMagicModulePlugin} from './shared/magic-module.ts';
+
+export interface MagicModuleEnvOptions {
+  /**
+   * The runtime mode for your target environment.
+   */
+  mode?: 'production' | 'development';
+
+  /**
+   * Environment variables from the build environment to inline into the magic
+   * module. Be careful when using this option! Inlining environment variables
+   * into your application always comes with the risk of exposing sensitive information
+   * to your users. Only use this option for environment variables that are safe
+   * for a human to see if they open their browser developer tools.
+   */
+  inline?: string[];
+
+  /**
+   * A string that will be inlined directly as code to reference a runtime variable
+   * that contains environment variables.
+   */
+  runtime?: string;
+
+  /**
+   * Whether to load environment variables from a `.env` file. The option can
+   * be one of the following types:
+   *
+   * - `false`, which disables loading environment variables from a `.env` file.
+   * - An object containing a `roots` field, specifying the directories to search
+   * for `.env` files in.
+   * - An object containing a `files` field, specifying the directories to search
+   * for `.env` files in.
+   *
+   * @default {roots: ['.', 'configuration']}
+   */
+  dotenv?:
+    | false
+    | {roots?: string[]; files?: never}
+    | {roots?: never; files?: string[]};
+}
+
+export function magicModuleEnv({
+  mode,
+  dotenv = {roots: ['.', 'configuration']},
+  inline = [],
+  runtime = '{}',
+}: MagicModuleEnvOptions = {}) {
+  return createMagicModulePlugin({
+    name: '@quilted/magic-module/env',
+    module: MAGIC_MODULE_ENV,
+    async source() {
+      const inlineEnv: Record<string, string> = {};
+
+      if (mode) {
+        inlineEnv.MODE = mode;
+      }
+
+      const loadedEnv = await loadEnv.call(this, {mode, dotenv});
+
+      for (const inlineVariable of inline.sort()) {
+        if (inlineVariable in inlineEnv) continue;
+        const value = process.env[inlineVariable] ?? loadedEnv[inlineVariable];
+        if (value == null) continue;
+        inlineEnv[inlineVariable] =
+          typeof value === 'string' &&
+          value[0] === '"' &&
+          value[value.length - 1] === '"'
+            ? JSON.parse(value)
+            : value;
+      }
+
+      return stripIndent`
+        const runtime = (${runtime});
+        const inline = JSON.parse(${JSON.stringify(JSON.stringify(inlineEnv))});
+
+        const Env = new Proxy(
+          {},
+          {
+            get(_, property) {
+              return runtime[property] ?? inline[property];
+            },
+          },
+        );
+
+        export default Env;
+      `;
+    },
+  });
+}
+
+// Inspired by https://github.com/vitejs/vite/blob/e0a4d810598d1834933ed437ac5a2168cbbbf2f8/packages/vite/source/node/config.ts#L1050-L1113
+async function loadEnv(
+  this: PluginContext,
+  {
+    mode,
+    dotenv,
+  }: {mode?: string} & Required<Pick<MagicModuleEnvOptions, 'dotenv'>>,
+): Promise<Record<string, string | undefined>> {
+  const env: Record<string, string | undefined> = {...process.env};
+
+  if (dotenv !== false) {
+    const {parse} = await import('dotenv');
+
+    let files = dotenv.files;
+
+    if (files == null) {
+      const testFiles = [
+        // default file
+        `.env`,
+        // local file
+        `.env.local`,
+      ];
+
+      if (mode) {
+        testFiles.push(
+          // mode file
+          `.env.${mode}`,
+          // mode local file
+          `.env.${mode}.local`,
+        );
+      }
+
+      files = testFiles.flatMap((file) =>
+        (dotenv.roots ?? ['.', 'configuration']).map((root) =>
+          path.resolve(root, file),
+        ),
+      );
+    }
+
+    const envFileResults = await Promise.all(
+      files.map(async (file) => {
+        if (fs.existsSync(file)) {
+          this.addWatchFile(file);
+          return parse(await fs.promises.readFile(file, 'utf-8'));
+        }
+      }),
+    );
+
+    for (const envFileResult of envFileResults) {
+      if (envFileResult == null) continue;
+      Object.assign(env, envFileResult);
+    }
+  }
+
+  return env;
+}

package/source/index.ts

@@ -0,0 +1,13 @@
+export {magicModuleEnv, type MagicModuleEnvOptions} from './env.ts';
+export {
+  quiltApp,
+  quiltAppBrowser,
+  quiltAppServer,
+  magicModuleAppComponent,
+  magicModuleAppBrowserEntry,
+  magicModuleAppRequestRouter,
+  type AppOptions,
+  type AppBrowserOptions,
+  type AppServerOptions,
+} from './app.ts';
+export {magicModuleRequestRouterEntry} from './request-router.ts';

package/source/request-router.ts

@@ -0,0 +1,33 @@
+import {MAGIC_MODULE_REQUEST_ROUTER} from './constants.ts';
+
+import {createMagicModuleEntryPlugin} from './shared/magic-module.ts';
+import {multiline} from './shared/strings.ts';
+
+export function magicModuleRequestRouterEntry({
+  host,
+  port,
+}: {
+  host?: string;
+  port?: number;
+} = {}) {
+  return createMagicModuleEntryPlugin({
+    name: '@quilted/request-router',
+    sideEffects: true,
+    async source() {
+      const initialContent = multiline`
+        import requestRouter from ${JSON.stringify(
+          MAGIC_MODULE_REQUEST_ROUTER,
+        )};
+
+        import {createHttpServer} from '@quilted/quilt/request-router/node';
+
+        const port = ${port ?? 'Number.parseInt(process.env.PORT, 10)'};
+        const host = ${host ? JSON.stringify(host) : 'process.env.HOST'};
+      
+        createHttpServer(requestRouter).listen(port, host);
+      `;
+
+      return initialContent;
+    },
+  });
+}

package/source/shared/magic-module.ts

@@ -0,0 +1,53 @@
+import type {Plugin, PluginContext} from 'rollup';
+
+import {MAGIC_MODULE_ENTRY} from '../constants.ts';
+
+const VIRTUAL_MODULE_PREFIX = '\0';
+const VIRTUAL_MODULE_POSTFIX = '/module.js';
+
+export function createMagicModulePlugin({
+  name,
+  module,
+  alias = `${VIRTUAL_MODULE_PREFIX}${module}${VIRTUAL_MODULE_POSTFIX}`,
+  source: getSource,
+  sideEffects = false,
+}: {
+  readonly name: string;
+  readonly alias?: string;
+  readonly module: string;
+  readonly sideEffects?: boolean;
+  source?(this: PluginContext): string | Promise<string>;
+}) {
+  return {
+    name,
+    resolveId(id) {
+      if (id !== module) return null;
+
+      return {
+        id: alias,
+        moduleSideEffects: sideEffects ? 'no-treeshake' : undefined,
+      };
+    },
+    load: getSource
+      ? async function load(source) {
+          if (source !== alias) return null;
+
+          const code = await getSource.call(this);
+
+          return {
+            code,
+            moduleSideEffects: sideEffects ? 'no-treeshake' : undefined,
+          };
+        }
+      : undefined,
+  } satisfies Plugin;
+}
+
+export function createMagicModuleEntryPlugin({
+  module = MAGIC_MODULE_ENTRY,
+  ...options
+}: Omit<Parameters<typeof createMagicModulePlugin>[0], 'module' | 'alias'> & {
+  module?: string;
+}) {
+  return createMagicModulePlugin({...options, module});
+}

package/source/shared/strings.ts

@@ -0,0 +1,17 @@
+export function multiline(strings: TemplateStringsArray, ...values: any[]) {
+  let result = strings.reduce(
+    (combined, string, index) => `${combined}${string}${values[index] ?? ''}`,
+    '',
+  );
+
+  // Inspired by https://github.com/zspecza/common-tags/blob/master/src/stripIndentTransformer/stripIndentTransformer.js#L8
+  const match = result.match(/^[^\S\n]*(?=\S)/gm);
+  const indent = match && Math.min(...match.map((indent) => indent.length));
+
+  if (indent) {
+    const regexp = new RegExp(`^.{${indent}}`, 'gm');
+    result = result.replace(regexp, '');
+  }
+
+  return result.trim();
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@quilted/typescript/project.json",
+  "compilerOptions": {
+    "rootDir": "source",
+    "outDir": "build/typescript"
+  },
+  "include": ["source"],
+  "exclude": ["quilt.project.ts", "**/*.test.ts", "**/*.test.tsx"],
+  "references": []
+}