@quilted/rollup 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @quilted/rollup
 
+## 0.1.6
+
+### Patch Changes
+
+- [`a2615aa0`](https://github.com/lemonmade/quilt/commit/a2615aa06a3cd146111996c8401466c5d8b9be09) Thanks [@lemonmade](https://github.com/lemonmade)! - Default to GraphQL in app server
+
+- [`2a0b85fe`](https://github.com/lemonmade/quilt/commit/2a0b85fe4a2d07ce107e52a3f246728c7c38fbf2) Thanks [@lemonmade](https://github.com/lemonmade)! - Add CSS plugin to app
+
+- [`a2615aa0`](https://github.com/lemonmade/quilt/commit/a2615aa06a3cd146111996c8401466c5d8b9be09) Thanks [@lemonmade](https://github.com/lemonmade)! - Remove 'use client' warnings
+
+## 0.1.5
+
+### Patch Changes
+
+- [`3b3db683`](https://github.com/lemonmade/quilt/commit/3b3db6833608df10274f6335182164856c19cbdc) Thanks [@lemonmade](https://github.com/lemonmade)! - Switch to a config generator function
+
+- [`97583dc1`](https://github.com/lemonmade/quilt/commit/97583dc12973cc7e378ffcd9815ecc098f3ecbeb) Thanks [@lemonmade](https://github.com/lemonmade)! - Add CSS plugin
+
 ## 0.1.4
 
 ### Patch Changes

package/build/cjs/app.cjs

@@ -25,169 +25,187 @@ function _interopNamespaceDefault(e) {
 
 var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
 
-function quiltAppBrowser({
+async function quiltAppBrowser({
   app,
+  entry = constants.MAGIC_MODULE_ENTRY,
   env,
   assets,
   module,
   graphql = true
 } = {}) {
   const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
-  return {
-    name: '@quilted/app/browser',
-    async options(originalOptions) {
-      const newPlugins = rollup.rollupPluginsToArray(originalOptions.plugins);
-      const newOptions = {
-        ...originalOptions,
-        plugins: newPlugins
-      };
-      const [{
-        visualizer
-      }, {
-        sourceCode
-      }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), Promise.resolve().then(function () { return require('./shared/source-code.cjs'); }), rollup.getNodePlugins()]);
-      newPlugins.push(...nodePlugins);
-      newPlugins.push(sourceCode({
+  const minify = assets?.minify ?? mode === 'production';
+  const [{
+    visualizer
+  }, {
+    sourceCode
+  }, {
+    css
+  }, {
+    rawAssets,
+    staticAssets
+  }, {
+    systemJS
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), Promise.resolve().then(function () { return require('./features/source-code.cjs'); }), Promise.resolve().then(function () { return require('./features/css.cjs'); }), Promise.resolve().then(function () { return require('./features/assets.cjs'); }), Promise.resolve().then(function () { return require('./features/system-js.cjs'); }), rollup.getNodePlugins()]);
+  const plugins = [...nodePlugins, systemJS(), sourceCode({
+    mode
+  }), css({
+    minify
+  }), rawAssets(), staticAssets()];
+  if (env) {
+    const {
+      magicModuleEnv,
+      replaceProcessEnv
+    } = await Promise.resolve().then(function () { return require('./features/env.cjs'); });
+    if (typeof env === 'boolean') {
+      plugins.push(replaceProcessEnv({
         mode
       }));
-      if (env) {
-        const {
-          magicModuleEnv,
-          replaceProcessEnv
-        } = await Promise.resolve().then(function () { return require('./env.cjs'); });
-        if (typeof env === 'boolean') {
-          newPlugins.push(replaceProcessEnv({
-            mode: 'production'
-          }));
-          newPlugins.push(magicModuleEnv({
-            mode: 'production'
-          }));
-        } else {
-          newPlugins.push(replaceProcessEnv({
-            mode: env.mode ?? 'production'
-          }));
-          newPlugins.push(magicModuleEnv({
-            mode: 'production',
-            ...env
-          }));
-        }
-      }
-      if (app) {
-        newPlugins.push(magicModuleAppComponent({
-          entry: app
-        }));
-      }
-      newPlugins.push(magicModuleAppBrowserEntry(module));
-      if (graphql) {
-        const {
-          graphql
-        } = await Promise.resolve().then(function () { return require('./graphql.cjs'); });
-        newPlugins.push(graphql({
-          manifest: path__namespace.resolve(`manifests/graphql.json`)
-        }));
-      }
-      const minify = assets?.minify ?? true;
-      if (minify) {
-        const {
-          minify
-        } = await import('rollup-plugin-esbuild');
-        newPlugins.push(minify());
-      }
-      newPlugins.push(visualizer({
-        template: 'treemap',
-        open: false,
-        brotliSize: true,
-        filename: path__namespace.resolve(`reports/bundle-visualizer.html`)
+      plugins.push(magicModuleEnv({
+        mode
+      }));
+    } else {
+      plugins.push(replaceProcessEnv({
+        mode
+      }));
+      plugins.push(magicModuleEnv({
+        mode
       }));
-      return newOptions;
+    }
+  }
+  if (app) {
+    plugins.push(magicModuleAppComponent({
+      entry: app
+    }));
+  }
+  plugins.push(magicModuleAppBrowserEntry(module));
+  if (graphql) {
+    const {
+      graphql
+    } = await Promise.resolve().then(function () { return require('./features/graphql.cjs'); });
+    plugins.push(graphql({
+      manifest: path__namespace.resolve(`manifests/graphql.json`)
+    }));
+  }
+  if (minify) {
+    const {
+      minify
+    } = await import('rollup-plugin-esbuild');
+    plugins.push(minify());
+  }
+  plugins.push(visualizer({
+    template: 'treemap',
+    open: false,
+    brotliSize: true,
+    filename: path__namespace.resolve(`reports/bundle-visualizer.html`)
+  }));
+  return {
+    input: entry,
+    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);
     },
-    outputOptions(originalOptions) {
-      return {
-        ...originalOptions,
-        // format: isESM ? 'esm' : 'systemjs',
-        format: 'esm',
-        dir: path__namespace.resolve(`build/assets`),
-        entryFileNames: `app.[hash].js`,
-        assetFileNames: `[name].[hash].[ext]`,
-        chunkFileNames: `[name].[hash].js`,
-        manualChunks: createManualChunksSorter()
-      };
+    output: {
+      // format: isESM ? 'esm' : 'systemjs',
+      format: 'esm',
+      dir: path__namespace.resolve(`build/assets`),
+      entryFileNames: `app.[hash].js`,
+      assetFileNames: `[name].[hash].[ext]`,
+      chunkFileNames: `[name].[hash].js`,
+      manualChunks: createManualChunksSorter()
     }
   };
 }
-function quiltAppServer({
+async function quiltAppServer({
   app,
   env,
-  graphql,
-  entry
+  graphql = true,
+  entry = constants.MAGIC_MODULE_ENTRY,
+  minify = false
 } = {}) {
   const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
-  return {
-    name: '@quilted/app/server',
-    async options(originalOptions) {
-      const newPlugins = rollup.rollupPluginsToArray(originalOptions.plugins);
-      const newOptions = {
-        ...originalOptions,
-        plugins: newPlugins
-      };
-      const [{
-        magicModuleRequestRouterEntry
-      }, {
-        sourceCode
-      }, nodePlugins] = await Promise.all([Promise.resolve().then(function () { return require('./request-router.cjs'); }), Promise.resolve().then(function () { return require('./shared/source-code.cjs'); }), rollup.getNodePlugins()]);
-      newPlugins.push(...nodePlugins);
-      newPlugins.push(sourceCode({
+  const [{
+    visualizer
+  }, {
+    sourceCode
+  }, {
+    css
+  }, {
+    rawAssets,
+    staticAssets
+  }, {
+    magicModuleRequestRouterEntry
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), Promise.resolve().then(function () { return require('./features/source-code.cjs'); }), Promise.resolve().then(function () { return require('./features/css.cjs'); }), Promise.resolve().then(function () { return require('./features/assets.cjs'); }), Promise.resolve().then(function () { return require('./features/request-router.cjs'); }), rollup.getNodePlugins()]);
+  const plugins = [...nodePlugins, sourceCode({
+    mode
+  }), css({
+    emit: false
+  }), rawAssets(), staticAssets({
+    emit: false
+  })];
+  if (env) {
+    const {
+      magicModuleEnv,
+      replaceProcessEnv
+    } = await Promise.resolve().then(function () { return require('./features/env.cjs'); });
+    if (typeof env === 'boolean') {
+      plugins.push(replaceProcessEnv({
         mode
       }));
-      if (env) {
-        const {
-          magicModuleEnv,
-          replaceProcessEnv
-        } = await Promise.resolve().then(function () { return require('./env.cjs'); });
-        if (typeof env === 'boolean') {
-          newPlugins.push(replaceProcessEnv({
-            mode
-          }));
-          newPlugins.push(magicModuleEnv({
-            mode
-          }));
-        } else {
-          newPlugins.push(replaceProcessEnv({
-            mode
-          }));
-          newPlugins.push(magicModuleEnv({
-            mode,
-            ...env
-          }));
-        }
-      }
-      if (app) {
-        newPlugins.push(magicModuleAppComponent({
-          entry: app
-        }));
-      }
-      newPlugins.push(magicModuleRequestRouterEntry());
-      newPlugins.push(magicModuleAppRequestRouter({
-        entry
+      plugins.push(magicModuleEnv({
+        mode
       }));
-      if (graphql) {
-        const {
-          graphql
-        } = await Promise.resolve().then(function () { return require('./graphql.cjs'); });
-        newPlugins.push(graphql({
-          manifest: false
-        }));
-      }
-      return newOptions;
-    },
-    outputOptions(originalOptions) {
-      return {
-        ...originalOptions,
-        // format,
-        format: 'esm',
-        dir: path__namespace.resolve(`build/server`),
-        entryFileNames: 'server.js'
-      };
+    } else {
+      plugins.push(replaceProcessEnv({
+        mode
+      }));
+      plugins.push(magicModuleEnv({
+        mode
+      }));
+    }
+  }
+  if (app) {
+    plugins.push(magicModuleAppComponent({
+      entry: app
+    }));
+  }
+  plugins.push(magicModuleRequestRouterEntry());
+  plugins.push(magicModuleAppRequestRouter({
+    entry
+  }));
+  if (graphql) {
+    const {
+      graphql
+    } = await Promise.resolve().then(function () { return require('./features/graphql.cjs'); });
+    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__namespace.resolve(`reports/bundle-visualizer.html`)
+  }));
+  return {
+    input: entry,
+    plugins,
+    output: {
+      // format: isESM ? 'esm' : 'systemjs',
+      format: 'esm',
+      dir: path__namespace.resolve(`build/server`),
+      entryFileNames: 'server.js'
     }
   };
 }

package/build/cjs/features/assets.cjs

@@ -0,0 +1,130 @@
+'use strict';
+
+var path = require('node:path');
+var promises = require('node:fs/promises');
+var node_crypto = require('node:crypto');
+var mime = require('mrmime');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
+var mime__namespace = /*#__PURE__*/_interopNamespaceDefault(mime);
+
+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_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'];
+function rawAssets() {
+  return {
+    name: '@quilted/raw-assets',
+    async load(id) {
+      if (id.startsWith('\0') || !RAW_PATTERN.test(id)) {
+        return null;
+      }
+      const moduleId = cleanModuleIdentifier(id);
+      this.addWatchFile(moduleId);
+      const file = await promises.readFile(moduleId, {
+        encoding: 'utf-8'
+      });
+      return `export default ${JSON.stringify(file)}`;
+    }
+  };
+}
+function staticAssets({
+  emit = true,
+  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('|') + `)(\\?.*)?$`);
+  return {
+    name: '@quilted/static-assets',
+    async load(id) {
+      if (id.startsWith('\0') || !assetMatcher.test(id)) {
+        return null;
+      }
+      const cached = assetCache.get(id);
+      if (cached) {
+        return cached;
+      }
+      const file = cleanModuleIdentifier(id);
+      const content = await promises.readFile(file);
+      let url;
+      if (!file.endsWith('.svg') && content.length < inlineLimit) {
+        // base64 inlined as a string
+        url = `data:${mime__namespace.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}`;
+        if (emit) {
+          this.emitFile({
+            name: file,
+            type: 'asset',
+            fileName: filename,
+            source: content
+          });
+        }
+      }
+      const source = `export default ${JSON.stringify(url)};`;
+      assetCache.set(id, source);
+      return source;
+    }
+  };
+}
+function assetFileNamesToFileName(pattern, file, contentHash) {
+  const basename = path__namespace.basename(file);
+  const extname = path__namespace.extname(basename);
+  const ext = extname.substring(1);
+  const name = basename.slice(0, -extname.length);
+  const hash = contentHash;
+  return pattern.replace(/\[\w+\]/g, placeholder => {
+    switch (placeholder) {
+      case '[ext]':
+        return ext;
+      case '[extname]':
+        return extname;
+      case '[hash]':
+        return hash;
+      case '[name]':
+        return name;
+    }
+    throw new Error(`invalid placeholder ${placeholder} in assetFileNames "${pattern}"`);
+  });
+}
+function getHash(text) {
+  return node_crypto.createHash('sha256').update(text).digest('hex').substring(0, 8);
+}
+function cleanModuleIdentifier(url) {
+  return url.replace(HASH_PATTERN, '').replace(QUERY_PATTERN, '');
+}
+
+exports.rawAssets = rawAssets;
+exports.staticAssets = staticAssets;

package/build/cjs/features/css.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+const CSS_REGEX = /\.css$/;
+const CSS_MODULE_REGEX = /\.module\.css$/;
+function css({
+  minify = true,
+  emit = true
+}) {
+  const styles = new Map();
+  return {
+    name: '@quilted/css',
+    async transform(code, id) {
+      if (!CSS_REGEX.test(id)) return;
+      const {
+        transform
+      } = await import('lightningcss');
+      const transformed = transform({
+        filename: id,
+        code: new TextEncoder().encode(code),
+        cssModules: CSS_MODULE_REGEX.test(id),
+        minify: emit && minify
+      });
+      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;
+      return {
+        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 = '';
+      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;
+      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`,
+        source: code
+      });
+      chunk.imports.push(this.getFileName(fileHandle));
+      return null;
+    }
+  };
+}
+
+exports.css = css;

package/build/cjs/{env.cjs → features/env.cjs}

@@ -2,10 +2,10 @@
 
 var path = require('node:path');
 var fs = require('node:fs');
-var constants = require('./constants.cjs');
-var strings = require('./shared/strings.cjs');
-var rollup = require('./shared/rollup.cjs');
-var magicModule = require('./shared/magic-module.cjs');
+var constants = require('../constants.cjs');
+var strings = require('../shared/strings.cjs');
+var rollup = require('../shared/rollup.cjs');
+var magicModule = require('../shared/magic-module.cjs');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

package/build/cjs/{request-router.cjs → features/request-router.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
-var constants = require('./constants.cjs');
-var magicModule = require('./shared/magic-module.cjs');
-var strings = require('./shared/strings.cjs');
+var constants = require('../constants.cjs');
+var magicModule = require('../shared/magic-module.cjs');
+var strings = require('../shared/strings.cjs');
 
 function magicModuleRequestRouterEntry({
   host,

package/build/cjs/{shared → features}/source-code.cjs

@@ -3,12 +3,13 @@
 var node_module = require('node:module');
 var babel = require('@rollup/plugin-babel');
 
-const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('shared/source-code.cjs', document.baseURI).href)));
+const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('features/source-code.cjs', document.baseURI).href)));
 function sourceCode({
   mode,
   targets
 }) {
   return babel({
+    envName: mode,
     configFile: false,
     babelrc: false,
     presets: [require$1.resolve('@babel/preset-typescript'), [require$1.resolve('@babel/preset-react'), {
@@ -33,7 +34,11 @@ function sourceCode({
     extensions: ['.ts', '.tsx', '.mts', '.mtsx', '.js', '.jsx', '.es6', '.es', '.mjs'],
     exclude: 'node_modules/**',
     babelHelpers: 'bundled',
-    skipPreflightCheck: true
+    skipPreflightCheck: true,
+    // Babel doesn’t like this option being set to `undefined`.
+    ...(targets ? {
+      targets
+    } : {})
   });
 }
 

package/build/cjs/features/system-js.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var promises = require('node:fs/promises');
+var node_module = require('node:module');
+
+function systemJS({
+  minify = false
+} = {}) {
+  return {
+    name: '@quilted/system-js',
+    async renderChunk(_, chunk, options) {
+      if (options.format !== 'system' || !chunk.isEntry) return null;
+      const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('features/system-js.cjs', document.baseURI).href)));
+      const systemjs = minify ? require$1.resolve('systemjs/dist/s.min.js') : require$1.resolve('systemjs/dist/s.js');
+
+      // We write the systemjs loader to a dedicated file, and we make it the
+      // "first import" of the chunk so that it is the first file listed in
+      // the manifest.
+      const fileHandle = this.emitFile({
+        type: 'asset',
+        name: 'loader.js',
+        source: (await promises.readFile(systemjs, {
+          encoding: 'utf8'
+        })).replace(
+        // Remove the source map comment, if it is present, because we don’t upload the
+        // sourcemap for this file.
+        /\n?[/][/]# sourceMappingURL=s.*\.map\n?$/, '')
+      });
+      chunk.imports.unshift(this.getFileName(fileHandle));
+      return null;
+    }
+  };
+}
+
+exports.systemJS = systemJS;

package/build/cjs/index.cjs

@@ -1,15 +1,8 @@
 'use strict';
 
-var env = require('./env.cjs');
 var app = require('./app.cjs');
-var requestRouter = require('./request-router.cjs');
 
 
 
-exports.magicModuleEnv = env.magicModuleEnv;
-exports.magicModuleAppBrowserEntry = app.magicModuleAppBrowserEntry;
-exports.magicModuleAppComponent = app.magicModuleAppComponent;
-exports.magicModuleAppRequestRouter = app.magicModuleAppRequestRouter;
 exports.quiltAppBrowser = app.quiltAppBrowser;
 exports.quiltAppServer = app.quiltAppServer;
-exports.magicModuleRequestRouterEntry = requestRouter.magicModuleRequestRouterEntry;

package/build/cjs/shared/rollup.cjs

@@ -28,10 +28,6 @@ async function getNodePlugins() {
     // exportConditions,
   }), commonjs(), json()];
 }
-function rollupPluginsToArray(plugins) {
-  return Array.isArray(plugins) ? [...plugins] : plugins ? [plugins] : [];
-}
 
 exports.getNodePlugins = getNodePlugins;
-exports.rollupPluginsToArray = rollupPluginsToArray;
 exports.smartReplace = smartReplace;