@zubra/server 5.3.0 → 5.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zubra/server",
-  "version": "5.3.0",
+  "version": "5.4.1",
   "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",
@@ -27,8 +27,8 @@
     "test": "node --test \"test/*.test.js\""
   },
   "peerDependencies": {
-    "@zubra/compiler": "^5.3.0",
-    "@zubra/runtime": "^5.3.0"
+    "@zubra/compiler": "^5.4.0",
+    "@zubra/runtime": "^5.4.0"
   },
   "devDependencies": {
     "@minify-html/node": "0.18.1",

package/src/index.d.ts

@@ -61,6 +61,11 @@ export interface ZubraOptions {
   cache?: boolean;
   /** Serve the runtime's production build, without hot reloading (default: `NODE_ENV` is `production`). */
   production?: boolean;
+  /**
+   * Compile for the Zubra DevTools extension and serve the runtime build it reads (default: on,
+   * except in production; `ZUBRA_DEVTOOLS=1` turns it on there too).
+   */
+  devtools?: boolean;
 }
 
 export declare function createZubra(options?: ZubraOptions): Zubra;

package/src/index.js

@@ -37,16 +37,19 @@ const TYPES = { '.js': 'text/javascript; charset=utf-8', '.css': 'text/css; char
  * `components`: the folder of `.zb` (and `.zb.jsx`/`.zb.tsx`) files. `prefix`: the URL path
  * the browser modules are served under. `cache`: keep compiled output (turn it off in
  * development to pick up edits). `production`: serve the runtime's production build, without hot
- * reloading (by default when `NODE_ENV` is `production`). `imports`: more import map entries,
+ * reloading (by default when `NODE_ENV` is `production`). `devtools`: compile for the Zubra DevTools
+ * extension and serve the runtime build it reads (on by default except in production;
+ * `ZUBRA_DEVTOOLS=1` turns it on there too, for a demo or a staging site). `imports`: more import map entries,
  * for packages the components import beyond `@zubra/runtime` and `@zubra/sync` (both of which
  * are served and mapped by themselves).
  */
-export function createZubra({ components = 'components', prefix = '/_zubra', cache = true, production = process.env.NODE_ENV === 'production', imports = {} } = {}) {
+export function createZubra({ components = 'components', prefix = '/_zubra', cache = true, production = process.env.NODE_ENV === 'production', devtools = process.env.ZUBRA_DEVTOOLS === '1' || !production, imports = {} } = {}) {
   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')));
   const productionDir = join(sourceDir, '..', 'dist', 'production');
-  const runtimeDir = production && existsSync(productionDir) ? productionDir : sourceDir;
+  // The Zubra DevTools need the runtime's development build, whose hook the production one leaves out.
+  const runtimeDir = production && !devtools && existsSync(productionDir) ? productionDir : sourceDir;
   const base = prefix.replace(/\/$/, '');
 
   // @zubra/sync, for components that start with 'use collection': found from the components
@@ -107,7 +110,7 @@ export function createZubra({ components = 'components', prefix = '/_zubra', cac
     call(pathOf(name), { emit: 'html', props, slots, slotSource: 'html', partial: true, ...(pending.length ? { pending } : {}) });
   const css = (name) => once(`css:${name}`, () => call(pathOf(name), { emit: 'css' }));
   const js = (name) => once(`js:${name}`, () => {
-    const response = need().compileFile(pathOf(name), { emit: 'js', runtime: '@zubra/runtime' });
+    const response = need().compileFile(pathOf(name), { emit: 'js', runtime: '@zubra/runtime', devtools });
     if (!response.ok) throw new Error(response.error);
     return needs(name, response.output);
   });