@zubra/server 5.7.0 → 5.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zubra/server",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "Zubra on the server: render components into any template engine's pages, serve their browser modules, and give frameworks' HTML its components' shadow roots.",
   "type": "module",
   "main": "./src/index.js",
@@ -35,8 +35,8 @@
     "test": "node --test \"test/*.test.js\""
   },
   "peerDependencies": {
-    "@zubra/compiler": "^5.7.0",
-    "@zubra/runtime": "^5.7.0"
+    "@zubra/compiler": "^5.8.0",
+    "@zubra/runtime": "^5.8.0"
   },
   "devDependencies": {
     "@minify-html/node": "0.18.1",

package/src/core.js

@@ -19,7 +19,8 @@ export { SOURCE_EXTENSION, TYPES };
  * host serves under `<base>/` beyond the components' modules (`{ status, type, body }` or null).
  * `needs(name, code)`: the host's check on a compiled module (a package it needs being installed).
  */
-export function createCore({ request, files, sourcesOf: readSources, cache = true, devtools = false, base, imports = {}, syncImports = {}, needs = (_name, code) => code, where = 'the components', assets = () => null, warn = (message) => console.warn(message) }) {
+export function createCore({ request, files, sourcesOf: readSources, cache = true, devtools = false, base, imports = {}, syncImports = {}, needs = (_name, code) => code, where = 'the components', assets = () => null, warn = (message) => console.warn(message), clientModules = 'all' }) {
+  if (clientModules !== 'all' && clientModules !== 'needed') throw new Error(`@zubra/server: clientModules is "all" or "needed", not ${JSON.stringify(clientModules)}`);
   const memo = new Map();
   const once = (key, make) => {
     if (!cache || !memo.has(key)) memo.set(key, make());
@@ -67,7 +68,15 @@ export function createCore({ request, files, sourcesOf: readSources, cache = tru
     const styles = names.map(css).join('\n');
     return `${styles ? `<style data-zb-components>${styles}</style>\n` : ''}${importMap()}`;
   };
-  const scripts = (names, async = false) => (names.length ? `<script type="module"${async ? ' async' : ''}>${names.map((name) => `import '${base}/components/${name}.js';`).join(' ')}</script>` : '');
+  // `clientModules: 'needed'`: a component whose server HTML is complete on its own (the
+  // compiler's `client` list is empty: no state, handlers, hooks or values computed in the
+  // browser, in it or the components it uses) gets no module. For pages that never change
+  // those components' props from script.
+  const shipped = (names) => (clientModules === 'needed' ? names.filter((name) => (describe(name).client ?? ['unknown']).length > 0) : names);
+  const scripts = (all, async = false) => {
+    const names = shipped(all);
+    return names.length ? `<script type="module"${async ? ' async' : ''}>${names.map((name) => `import '${base}/components/${name}.js';`).join(' ')}</script>` : '';
+  };
 
   /** What a request for `pathname` gets: `{ status, type, body }`, or null if it isn't ours. */
   function serve(pathname) {

package/src/edge.js

@@ -37,7 +37,7 @@ function normalize(path) {
  * `cache`, `devtools` (off by default here: the DevTools need the runtime's development build,
  * which you would have to serve yourself) and `imports`.
  */
-export function createZubra({ wasm, compiler = wasm ? createCompiler(wasm) : null, components = {}, prefix = '/_zubra', cache = true, devtools = false, imports = {}, warn } = {}) {
+export function createZubra({ wasm, compiler = wasm ? createCompiler(wasm) : null, components = {}, prefix = '/_zubra', cache = true, devtools = false, imports = {}, warn, clientModules } = {}) {
   if (!compiler) throw new Error("@zubra/server/edge: createZubra() needs the compiler's WebAssembly module (`wasm`), or a `compiler` from createCompiler()");
   const sources = new Map(); // path → source
   const files = new Map(); // name → path
@@ -74,6 +74,7 @@ export function createZubra({ wasm, compiler = wasm ? createCompiler(wasm) : nul
 
   return createCore({
     warn,
+    clientModules,
     request: (body) => compiler.request(body),
     files,
     sourcesOf: (path) => sourcesOf(path),

package/src/index.js

@@ -43,7 +43,7 @@ const posix = (path) => path.split(sep).join('/');
  *
  * Everything that doesn't need a disk is in `core.js`, shared with `edge.js` (Workers).
  */
-export function createZubra({ components = 'components', prefix = '/_zubra', cache = true, production = process.env.NODE_ENV === 'production', devtools = process.env.ZUBRA_DEVTOOLS === '1' || !production, imports = {}, warn } = {}) {
+export function createZubra({ components = 'components', prefix = '/_zubra', cache = true, production = process.env.NODE_ENV === 'production', devtools = process.env.ZUBRA_DEVTOOLS === '1' || !production, imports = {}, warn, clientModules } = {}) {
   const root = resolve(components);
   if (!existsSync(root)) throw new Error(`@zubra/server: no components folder at ${root}`);
   const sourceDir = dirname(fileURLToPath(import.meta.resolve('@zubra/runtime')));
@@ -100,6 +100,7 @@ export function createZubra({ components = 'components', prefix = '/_zubra', cac
 
   const core = createCore({
     warn,
+    clientModules,
     request: (body) => compiler.request(body),
     files,
     sourcesOf: (path) => compiler.sources(path),