@tinvar/renderer 0.4.1 → 0.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinvar/renderer",
-  "version": "0.4.1",
+  "version": "0.4.5",
   "license": "MIT",
   "files": [
     "src",

package/src/dev-server.js

@@ -32,6 +32,7 @@ import {
   viewsOf,
 } from './vite.js';
 
+import { styleXDevStyles } from './stylex-dev.js';
 export { assertDevelopment, DevServerRefused, PRODUCTION_MARKERS } from './dev-guard.js';
 
 /** Where the dev server's modules are served from, behind PHP's server. */
@@ -97,6 +98,7 @@ export async function createDevServer({
     clearScreen: false,
     ...(logLevel ? { logLevel } : {}),
     plugins: [
+      styleXDevStyles(DEV_BASE),
       ignoreReplayedChanges(watchedFrom),
       followRestarts(() => {
         const waiting = listened;

package/src/panel-styles.js

@@ -24,8 +24,9 @@
 // one of nothing, put a page's queries in two frames instead of one, React
 // scheduling its render around the stylesheet. A panel's page links its
 // sheet through `virtual:tinvar/styles`, read from the RSC plugin's assets
-// manifest, which the client build fills in; in dev StyleX hands the browser
-// its CSS itself, and the component renders nothing.
+// manifest, which the client build fills in; in dev the client entry takes
+// what StyleX has compiled into the page (stylex-dev.js), and the component
+// renders nothing.
 
 import { createRequire } from 'node:module';
 import { join } from 'node:path';

package/src/sandbox.js

@@ -166,6 +166,7 @@ export function sandboxFlags({ rendererRoot, appEntry, socketPath, extraRead = [
 
   return [
     permissionFlag(),
+    ...networkFlags(),
     ...links.map((l) => `--allow-fs-read=${l}`),
     // Without the ones a broader grant already covers: a package reached by
     // its dependencies that is also in a node_modules granted for real.
@@ -189,6 +190,24 @@ export function permissionFlag() {
     : '--experimental-permission';
 }
 
+/**
+ * The network, granted where Node's permission model governs it: from
+ * Node 25 it refuses every socket without `--allow-net`, the renderer's own
+ * among them, and the flag is all or nothing. Node 22's model has no
+ * network rule, so there the flag is unknown and left out. On both,
+ * lockNetwork() closes the network from inside the child -- every
+ * connection, lookup and datagram, and every listen but the renderer's
+ * socket -- so the renderer reaches the same as on Node 22 (ADR 0176).
+ *
+ * @returns {string[]}
+ */
+export function networkFlags() {
+  // Node calls --allow-net experimental, and says so once per renderer.
+  return process.allowedNodeEnvironmentFlags.has('--allow-net')
+    ? ['--allow-net', '--disable-warning=ExperimentalWarning']
+    : [];
+}
+
 /**
  * The app's build directory is granted whole, so it must be a build
  * directory. Derived from the entry as its grandparent (dist/rsc/index.js
@@ -646,7 +665,9 @@ export const OPENS_NOTHING = Object.freeze({
 /**
  * Closes outbound networking from inside the sandboxed child.
  *
- * Node 22's permission model has no network flag, so a dependency could
+ * Node 22's permission model has no network flag, and from Node 25 the
+ * renderer is granted --allow-net to serve its socket (networkFlags()), so
+ * on either a dependency could
  * open a socket to the database, or to anywhere, and send what it read. This
  * replaces every function node:net, node:dgram and node:dns export but the
  * few that open nothing (OPENS_NOTHING) -- TCP and Unix-socket connects
@@ -671,6 +692,15 @@ export const OPENS_NOTHING = Object.freeze({
  *        may listen on; without one it may listen on nothing
  */
 export function lockNetwork({ net, dgram, dns, listenOn }) {
+  // Taken now, before any code the renderer loads runs: every original is
+  // called through these, never through a method looked up when it is
+  // called. A Function.prototype.call or apply swapped in later would be
+  // handed the original, and a WeakSet.prototype.has swapped in could
+  // answer yes for any handle (ADR 0176).
+  const apply = Reflect.apply;
+  const { has: weakHas, add: weakAdd } = WeakSet.prototype;
+  const isIn = (set, value) => apply(weakHas, set, [value]);
+  const putIn = (set, value) => apply(weakAdd, set, [value]);
   const refuse = (what) =>
     function refused() {
       const error = new Error(
@@ -703,8 +733,48 @@ export function lockNetwork({ net, dgram, dns, listenOn }) {
   // as the address for a socket file and null for a handle or descriptor.
   const listen = net.Server.prototype._listen2;
   const refuseListen = refuse('Listening anywhere but the renderer socket');
+
+  // The handle classes under net -- the Unix-socket one above all -- are
+  // reachable without a binding, as the constructor of a handle the
+  // process already holds: its standard input is a socket pair (the
+  // tether), and its own server's handle is one too. Their prototypes
+  // carry bind(), listen(), connect() and open(), which reach the network
+  // past everything above. So each one is held where it opens something:
+  // no connect and no open; a bind to the renderer's socket alone; and a
+  // listen only on the handle that bound it (ADR 0176).
+  const held = new WeakSet();
+  const bound = new WeakSet();
+  const hold = (Handle) => {
+    if (typeof Handle !== 'function' || isIn(held, Handle)) return;
+    putIn(held, Handle);
+    const proto = Handle.prototype;
+    for (const name of ['connect', 'connect6', 'open'])
+      if (typeof proto[name] === 'function') pin(proto, name, refuse(`A handle's ${name}()`));
+    for (const name of ['bind', 'bind6']) {
+      const original = proto[name];
+      if (typeof original !== 'function') continue;
+      pin(proto, name, function bindOwnSocket(address, ...rest) {
+        if (typeof listenOn !== 'string' || address !== listenOn) refuseListen();
+        const result = apply(original, this, [address, ...rest]);
+        putIn(bound, this);
+        return result;
+      });
+    }
+    const originalListen = proto.listen;
+    if (typeof originalListen === 'function')
+      pin(proto, 'listen', function listenOnBound(...args) {
+        if (!isIn(bound, this)) refuseListen();
+        return apply(originalListen, this, args);
+      });
+  };
+  // Made now, before their classes are held: Node makes each standard
+  // stream's handle on first use, with the open() held above.
+  for (const stream of [process.stdin, process.stdout, process.stderr]) hold(stream?._handle?.constructor);
+
   pin(net.Server.prototype, '_listen2', function listenOnOwnSocket(address, port, ...rest) {
     if (typeof listenOn !== 'string' || address !== listenOn || port !== -1) refuseListen();
-    return listen.call(this, address, port, ...rest);
+    const result = apply(listen, this, [address, port, ...rest]);
+    hold(this._handle?.constructor);
+    return result;
   });
 }

package/src/stylex-dev.js

@@ -0,0 +1,159 @@
+// StyleX's rules in a page rendered in dev (ADR 0179).
+//
+// StyleX's Vite plugin compiles each stylex.create() as Vite transforms the
+// module, and in dev hands the browser what it has compiled in two ways:
+// a stylesheet link and a runtime script, both added through Vite's
+// transformIndexHtml. A page here is rendered by the app's rsc and ssr
+// entries, for PHP, and never goes through index.html, so neither was ever
+// added. And the plugin serves that stylesheet at /virtual:stylex.css, off
+// Vite's base, where PHP answers. So no page had a rule of the kit's or the
+// app's in dev, though every element carried its classes.
+//
+// This serves what StyleX has compiled under the dev server's base, which
+// the dev Caddyfile already passes to Vite, and adds to the client entry a
+// module that puts it in a <style> of its own and fetches it again after
+// every update Vite applies, as StyleX's runtime would. The page's policy
+// governs scripts alone, so the element is allowed.
+
+import path from 'node:path';
+import { normalizePath } from 'vite';
+
+/** Where the compiled rules are served, under the dev server's base. */
+export const STYLEX_DEV_CSS = '__tinvar/stylex.css';
+
+/** The module the client entry imports to take the rules into the page. */
+export const STYLEX_DEV_MODULE = 'virtual:tinvar/stylex-dev';
+
+const RESOLVED = `\0${STYLEX_DEV_MODULE}`;
+
+/**
+ * The plugin the dev server adds to the app's own.
+ *
+ * @param {string} base the dev server's base, `/_vite/`
+ * @returns {import('vite').Plugin}
+ */
+export function styleXDevStyles(base) {
+  /** @type {null | (() => string)} */
+  let collect = null;
+  /** @type {string[]} the client build's inputs, as its config names them */
+  let inputs = [];
+  /** @type {string} */
+  let root = '';
+  /** @type {Promise<Set<string>> | null} the ids Vite resolves them to, once asked */
+  let entries = null;
+
+  return {
+    name: 'tinvar:stylex-dev',
+    apply: 'serve',
+
+    configResolved(config) {
+      // The app's StyleX plugin: the one that can say what it compiled.
+      const styleX = config.plugins.find(
+        (plugin) => typeof (/** @type {any} */ (plugin).__stylexCollectCss) === 'function',
+      );
+      collect = styleX ? () => /** @type {any} */ (styleX).__stylexCollectCss() ?? '' : null;
+      inputs = clientInputs(config);
+      root = config.root;
+      entries = null;
+    },
+
+    configureServer(server) {
+      if (collect === null) return;
+      const served = `${base}${STYLEX_DEV_CSS}`;
+      server.middlewares.use((req, res, next) => {
+        const url = (req.url ?? '').replace(/[?#].*$/, '');
+        if (url !== served) return next();
+        res.statusCode = 200;
+        res.setHeader('Content-Type', 'text/css; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-store');
+        res.end(collect?.() ?? '');
+      });
+    },
+
+    resolveId(id) {
+      return collect !== null && id === STYLEX_DEV_MODULE ? RESOLVED : null;
+    },
+
+    load(id) {
+      if (id !== RESOLVED) return null;
+      return styleXDevRuntime(`${base}${STYLEX_DEV_CSS}`);
+    },
+
+    async transform(code, id) {
+      if (collect === null || this.environment?.name !== 'client') return null;
+      // Which modules the entries are is Vite's to say: an input may name
+      // one without its extension, or through an alias. Resolved once, as
+      // an import from the app's root would be.
+      const importer = path.join(root, 'index.html');
+      entries ??= Promise.all(inputs.map((input) => this.resolve(input, importer))).then(
+        (resolved) =>
+          new Set(resolved.filter((r) => r != null).map((r) => normalizePath(r.id.replace(/[?#].*$/, '')))),
+      );
+      if (!(await entries).has(normalizePath(id.replace(/[?#].*$/, '')))) return null;
+      // On the entry's first line: its source map's lines stay where they were.
+      return { code: `import ${JSON.stringify(STYLEX_DEV_MODULE)};${code}`, map: null };
+    },
+  };
+}
+
+/**
+ * The client environment's entries, as its build's rollup input names them.
+ *
+ * @param {import('vite').ResolvedConfig} config
+ * @returns {string[]}
+ */
+function clientInputs(config) {
+  const input = /** @type {any} */ (config).environments?.client?.build?.rollupOptions?.input;
+  const named =
+    typeof input === 'string'
+      ? [input]
+      : Array.isArray(input)
+        ? input
+        : input && typeof input === 'object'
+          ? Object.values(input)
+          : [];
+  return named.filter((file) => typeof file === 'string');
+}
+
+/**
+ * The module the browser runs: the rules in a <style> of their own, fetched
+ * again after every update Vite applies, since an edit compiles new ones.
+ * Only the newest request's answer is shown: one edit sets off more than
+ * one fetch, and an older answer arriving last would put back rules from
+ * before it.
+ *
+ * @param {string} url
+ */
+export function styleXDevRuntime(url) {
+  return `const URL = ${JSON.stringify(url)};
+const ID = 'tinvar-stylex-dev';
+let last = null;
+let asked = 0;
+function element() {
+  let el = document.getElementById(ID);
+  if (!el) {
+    el = document.createElement('style');
+    el.id = ID;
+    document.head.appendChild(el);
+  }
+  return el;
+}
+async function update() {
+  const request = ++asked;
+  try {
+    const response = await fetch(URL + '?t=' + Date.now(), { cache: 'no-store' });
+    if (!response.ok || request !== asked) return;
+    const css = await response.text();
+    if (request === asked && css !== last) {
+      element().textContent = css;
+      last = css;
+    }
+  } catch {}
+}
+update();
+if (import.meta.hot) {
+  import.meta.hot.on('stylex:css-update', update);
+  import.meta.hot.on('vite:afterUpdate', () => setTimeout(update, 180));
+}
+`;
+}