@rettangoli/fe 1.2.0 → 1.2.2

package/README.md

@@ -38,7 +38,7 @@ rtgl fe watch     # Start dev server
 - [Jempl](https://github.com/yuusoft-org/jempl) - Template engine
 
 **Build & Development:**
-- [Vite](https://vite.dev/) - Dev server and production bundling
+- [Vite 8](https://vite.dev/) - Rolldown-powered production bundling and dev server
 
 **Browser Native:**
 - Web Components - Component encapsulation
@@ -47,7 +47,7 @@ rtgl fe watch     # Start dev server
 
 ### Prerequisites
 
-- Node.js 18+ or Bun
+- Node.js 20.19+, Node.js 22.12+, or Bun
 - A `rettangoli.config.yaml` file in your project root
 
 ### Setup
@@ -93,10 +93,12 @@ src/
 
 `@rettangoli/fe` uses Vite directly through the Node API, behind the existing FE CLI commands.
 
-- `rtgl fe build` uses `vite.build()` with a virtual entry module generated from configured component files.
-- `rtgl fe watch` uses `vite.createServer()` and serves the configured `outfile` path via middleware.
+- `rtgl fe build` uses Vite 8's Rolldown-powered `vite.build()` with a virtual entry module generated from configured component files.
+- `rtgl fe watch` uses `vite.createServer()`, warms the virtual entry during startup, and serves the configured `outfile` path via middleware.
+- Watch projects can configure `fe.publicDir` to serve static assets from the project root without Vite transformations.
 - FE runtime source is generated in memory (virtual module), so no temporary generated JS files are required.
 - Contract validation, YAML parsing, and template parsing still run before code generation.
+- Component directories, setup files, and locale files are registered explicitly so watch mode also sees sources outside the served static root.
 
 Current Vite features used by FE:
 
@@ -106,7 +108,7 @@ Current Vite features used by FE:
   - `resolveId` + `load` for the FE virtual entry (`virtual:rettangoli-fe-entry`).
   - `handleHotUpdate` for FE file change detection.
   - `configureServer` for full-page reload and serving the configured output entry URL.
-- Rollup output control through Vite (`entryFileNames`, `chunkFileNames`, `assetFileNames`) to preserve CLI `outfile` behavior.
+- Rolldown output control through Vite (`entryFileNames`, `chunkFileNames`, `assetFileNames`) to preserve CLI `outfile` behavior.
 
 Notes:
 
@@ -124,6 +126,7 @@ fe:
     - "./src/pages"
   setup: "setup.js"
   outfile: "./dist/bundle.js"
+  publicDir: "./static"
   i18n:
     dir: "./src/i18n"
     defaultLocale: "en"
@@ -135,6 +138,10 @@ fe:
     outputDir: "./vt/specs/examples"
 ```
 
+`publicDir` is optional and only affects `rtgl fe watch`. Its files are served
+at `/` without Vite transformations. This is useful for extensionless or other
+binary assets that must retain their source filenames.
+
 ## Setup Contract
 
 `setup.js` should export `deps` only.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/fe",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Frontend framework for building reactive web components",
   "type": "module",
   "main": "./src/index.js",
@@ -22,6 +22,9 @@
     "directory": "packages/rettangoli-fe"
   },
   "license": "MIT",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
   "exports": {
     ".": "./src/index.js",
     "./cli": "./src/cli/index.js",
@@ -36,7 +39,7 @@
     "jempl": "1.0.1",
     "js-yaml": "^4.1.0",
     "snabbdom": "^3.6.2",
-    "vite": "^6.3.5"
+    "vite": "^8.1.4"
   },
   "scripts": {
     "dev": "node ../rettangoli-cli/cli.js fe watch",

package/src/cli/build.js

@@ -1,4 +1,5 @@
 import path from "node:path";
+import { performance } from "node:perf_hooks";
 
 import { build as viteBuild } from "vite";
 
@@ -9,8 +10,6 @@ import {
 import { emitI18nAssets, loadI18nBuildContext } from "./i18nBuild.js";
 
 const buildRettangoliFrontend = async (options = {}) => {
-  console.log("running build with options", options);
-
   const {
     cwd = process.cwd(),
     dirs = ["./example"],
@@ -29,9 +28,14 @@ const buildRettangoliFrontend = async (options = {}) => {
     i18n,
     errorPrefix: "[Build]",
   });
+  const startedAt = performance.now();
+
+  console.log(`[Build] Building ${resolvedOutfile}...`);
 
   await viteBuild({
     configFile: false,
+    clearScreen: false,
+    logLevel: "warn",
     root: cwd,
     plugins: [
       createRettangoliFeVitePlugin({
@@ -45,10 +49,11 @@ const buildRettangoliFrontend = async (options = {}) => {
     build: {
       outDir: relativeOutDir,
       emptyOutDir: false,
-      minify: development ? false : "esbuild",
-      sourcemap: !!development,
+      minify: development ? false : "oxc",
+      sourcemap: false,
       target: "esnext",
-      rollupOptions: {
+      reportCompressedSize: false,
+      rolldownOptions: {
         input: RETTANGOLI_FE_VIRTUAL_ENTRY_ID,
         output: {
           format: "es",
@@ -62,7 +67,8 @@ const buildRettangoliFrontend = async (options = {}) => {
 
   emitI18nAssets({ outDir, i18nContext });
 
-  console.log(`Build complete. Output file: ${resolvedOutfile}`);
+  const durationMs = Math.round(performance.now() - startedAt);
+  console.log(`[Build] Complete in ${durationMs}ms.`);
 };
 
 export default buildRettangoliFrontend;

package/src/cli/vitePlugin.js

@@ -1,5 +1,6 @@
 import path from "node:path";
 
+import { getAllFiles } from "../commonBuild.js";
 import { isSupportedComponentFile } from "./contracts.js";
 import { generateFrontendEntrySource } from "./frontendEntrySource.js";
 import {
@@ -55,6 +56,24 @@ export const createRettangoliFeVitePlugin = ({
   let currentCommand = "build";
   let devServer = null;
 
+  const getComponentFilePaths = () => {
+    return getAllFiles(resolvedDirs)
+      .filter((filePath) => isSupportedComponentFile(filePath));
+  };
+
+  const getEntryWatchPaths = ({ includeDirectories = false } = {}) => {
+    const i18nWatchPaths = includeDirectories
+      ? getI18nWatchPaths({ i18nContext })
+      : Object.values(i18nContext.localeFiles || {});
+
+    return [
+      ...(includeDirectories ? resolvedDirs : []),
+      resolvedSetup,
+      ...getComponentFilePaths(),
+      ...i18nWatchPaths,
+    ];
+  };
+
   const isTrackedFilePath = (value) => {
     const filePath = path.resolve(value);
     if (filePath === resolvedSetup) {
@@ -110,6 +129,13 @@ export const createRettangoliFeVitePlugin = ({
       if (id !== RESOLVED_VIRTUAL_ENTRY_ID) {
         return null;
       }
+
+      for (const filePath of getEntryWatchPaths()) {
+        if (typeof this.addWatchFile === "function") {
+          this.addWatchFile(filePath);
+        }
+      }
+
       return generateFrontendEntrySource({
         cwd,
         dirs,
@@ -121,10 +147,7 @@ export const createRettangoliFeVitePlugin = ({
     },
     configureServer(server) {
       devServer = server;
-      const i18nWatchPaths = getI18nWatchPaths({ i18nContext });
-      if (i18nWatchPaths.length > 0) {
-        server.watcher.add(i18nWatchPaths);
-      }
+      server.watcher.add(getEntryWatchPaths({ includeDirectories: true }));
 
       const serveI18nAsset = (req, res, next) => {
         if (!i18nContext.enabled || !normalizedPublicEntryPath) {

package/src/cli/watch.js

@@ -2,7 +2,10 @@ import path from "node:path";
 
 import { createServer } from "vite";
 
-import { createRettangoliFeVitePlugin } from "./vitePlugin.js";
+import {
+  RETTANGOLI_FE_VIRTUAL_ENTRY_ID,
+  createRettangoliFeVitePlugin,
+} from "./vitePlugin.js";
 
 const toPosixPath = (value) => value.split(path.sep).join("/");
 
@@ -40,15 +43,23 @@ export const createWatchServer = async (options = {}) => {
     outfile = "./vt/static/main.js",
     setup = "setup.js",
     i18n = null,
+    publicDir,
   } = options;
 
   const { root, publicEntryPath } = resolveServeContext({ cwd, outfile });
+  const resolvedPublicDir =
+    typeof publicDir === "string" && publicDir.length > 0
+      ? path.resolve(cwd, publicDir)
+      : publicDir;
 
   const server = await createServer({
+    clearScreen: false,
     configFile: false,
+    publicDir: resolvedPublicDir,
     root,
     server: {
       port,
+      strictPort: true,
       host: "0.0.0.0",
       allowedHosts: true,
     },
@@ -75,12 +86,13 @@ const startWatching = async (options = {}) => {
   } = options;
   const { root, publicEntryPath } = resolveServeContext({ cwd, outfile });
 
-  console.log("watch root dir:", root);
-  console.log("watch entry path:", publicEntryPath);
+  console.log(`[Watch] Root: ${root}`);
+  console.log(`[Watch] Entry: ${publicEntryPath}`);
 
   try {
     const server = await createWatchServer(options);
     await server.listen();
+    await server.transformRequest(RETTANGOLI_FE_VIRTUAL_ENTRY_ID);
     server.printUrls();
     if (enableCliShortcuts) {
       server.bindCLIShortcuts({ print: true });

package/src/web/componentUpdateHook.js

@@ -1,42 +1,306 @@
 import { scheduleFrame } from "./scheduler.js";
 
+export const RETTANGOLI_COMPONENT_MARKER = Symbol.for(
+  "@rettangoli/fe/component",
+);
+
+const propsSnapshots = new WeakMap();
+const pendingUpdates = new WeakMap();
+
+const createReferenceSnapshot = (value) => ({
+  value,
+  hasStructuralSnapshot: false,
+});
+
+const hasUnsupportedToJSONOrPrototypeCycle = (value) => {
+  const visited = new Set();
+  let current = value;
+
+  while (current !== null) {
+    if (visited.has(current)) return true;
+    visited.add(current);
+
+    const descriptor = Object.getOwnPropertyDescriptor(current, "toJSON");
+    if (descriptor) {
+      if (!("value" in descriptor)) return true;
+      return typeof descriptor.value === "function";
+    }
+    current = Object.getPrototypeOf(current);
+  }
+
+  return false;
+};
+
+const isJsonData = (value, ancestors = new Set()) => {
+  if (value === null) return true;
+
+  const valueType = typeof value;
+  if (valueType === "string" || valueType === "boolean") return true;
+  if (valueType === "number") {
+    return Number.isFinite(value) && !Object.is(value, -0);
+  }
+  if (valueType !== "object") return false;
+
+  if (ancestors.has(value)) return false;
+
+  const isArray = Array.isArray(value);
+  const prototype = Object.getPrototypeOf(value);
+  if (
+    (isArray && prototype !== Array.prototype) ||
+    (!isArray && prototype !== Object.prototype && prototype !== null)
+  ) {
+    return false;
+  }
+
+  if (hasUnsupportedToJSONOrPrototypeCycle(value)) return false;
+
+  ancestors.add(value);
+  try {
+    if (isArray) {
+      const ownKeys = Reflect.ownKeys(value);
+      if (ownKeys.length !== value.length + 1 || !ownKeys.includes("length")) {
+        return false;
+      }
+
+      for (let index = 0; index < value.length; index += 1) {
+        const descriptor = Object.getOwnPropertyDescriptor(
+          value,
+          String(index),
+        );
+        if (
+          !descriptor ||
+          !("value" in descriptor) ||
+          !descriptor.enumerable ||
+          !isJsonData(descriptor.value, ancestors)
+        ) {
+          return false;
+        }
+      }
+
+      return true;
+    }
+
+    for (const key of Reflect.ownKeys(value)) {
+      if (typeof key !== "string") return false;
+
+      const descriptor = Object.getOwnPropertyDescriptor(value, key);
+      if (
+        !descriptor ||
+        !("value" in descriptor) ||
+        !descriptor.enumerable ||
+        !isJsonData(descriptor.value, ancestors)
+      ) {
+        return false;
+      }
+    }
+
+    return true;
+  } finally {
+    ancestors.delete(value);
+  }
+};
+
+const createPropSnapshot = (value) => {
+  if (value === null || typeof value !== "object") {
+    return createReferenceSnapshot(value);
+  }
+
+  try {
+    if (!isJsonData(value)) {
+      return createReferenceSnapshot(value);
+    }
+
+    // Keep the live value for identity and a separate old value only for
+    // detecting and reporting same-reference JSON-data mutations.
+    const serialized = JSON.stringify(value);
+    if (serialized === undefined || typeof structuredClone !== "function") {
+      return createReferenceSnapshot(value);
+    }
+    return {
+      value,
+      hasStructuralSnapshot: true,
+      serialized,
+      oldValue: structuredClone(value),
+    };
+  } catch {
+    return createReferenceSnapshot(value);
+  }
+};
+
+const createPropsSnapshot = (props = {}) => {
+  const entries = new Map();
+  Object.keys(props).forEach((key) => {
+    entries.set(key, createPropSnapshot(props[key]));
+  });
+  return entries;
+};
+
+const propChanged = (previousEntry, nextEntry) => {
+  if (!previousEntry || !nextEntry) return true;
+  if (previousEntry.hasStructuralSnapshot !== nextEntry.hasStructuralSnapshot) {
+    return true;
+  }
+  if (previousEntry.hasStructuralSnapshot) {
+    return previousEntry.serialized !== nextEntry.serialized;
+  }
+  return !Object.is(previousEntry.value, nextEntry.value);
+};
+
+const getChangedPropKeys = (previousSnapshot, nextSnapshot) => {
+  const keys = new Set([...previousSnapshot.keys(), ...nextSnapshot.keys()]);
+  return [...keys].filter((key) =>
+    propChanged(previousSnapshot.get(key), nextSnapshot.get(key)),
+  );
+};
+
+const defineProp = (target, key, value) => {
+  Object.defineProperty(target, key, {
+    configurable: true,
+    enumerable: true,
+    value,
+    writable: true,
+  });
+};
+
+const hasDriftedFromSnapshot = (entry) => {
+  if (!entry.hasStructuralSnapshot) return false;
+  try {
+    if (!isJsonData(entry.value)) return true;
+    return JSON.stringify(entry.value) !== entry.serialized;
+  } catch {
+    return true;
+  }
+};
+
+const createOldProps = (previousSnapshot) => {
+  const oldProps = {};
+  previousSnapshot.forEach((entry, key) => {
+    defineProp(
+      oldProps,
+      key,
+      hasDriftedFromSnapshot(entry) ? entry.oldValue : entry.value,
+    );
+  });
+  return oldProps;
+};
+
+const isRettangoliComponent = (element) => {
+  try {
+    if (element?.[RETTANGOLI_COMPONENT_MARKER] === true) {
+      return true;
+    }
+
+    // Compatibility for separately bundled components built before the brand
+    // existed. These relationships are installed together by the FE runtime.
+    return (
+      typeof element?.elementName === "string" &&
+      typeof element.render === "function" &&
+      typeof element.patch === "function" &&
+      typeof element._snabbdomH === "function" &&
+      element.deps?.render === element.render &&
+      element.deps?.store === element.store &&
+      element.deps?.props === element.props
+    );
+  } catch {
+    return false;
+  }
+};
+
+const storePropsSnapshot = (element, props = {}) => {
+  const snapshot = createPropsSnapshot(props);
+  propsSnapshots.set(element, snapshot);
+  return snapshot;
+};
+
+const runPendingUpdate = (element, pendingUpdate) => {
+  if (pendingUpdates.get(element) !== pendingUpdate) return;
+
+  pendingUpdates.delete(element);
+
+  // Prop values remain live references between the parent render and this
+  // frame. Refresh the latest snapshot so the stored baseline matches the
+  // value the child is about to render.
+  const nextSnapshot = createPropsSnapshot(pendingUpdate.newProps);
+  propsSnapshots.set(element, nextSnapshot);
+  const changedPropKeys = getChangedPropKeys(
+    pendingUpdate.previousSnapshot,
+    nextSnapshot,
+  );
+
+  if (changedPropKeys.length === 0) {
+    element.removeAttribute("isDirty");
+    return;
+  }
+
+  const previousProps = createOldProps(pendingUpdate.previousSnapshot);
+
+  element.render();
+  element.removeAttribute("isDirty");
+
+  if (element.handlers && element.handlers.handleOnUpdate) {
+    const deps = {
+      ...element.deps,
+      store: element.store,
+      render: element.render.bind(element),
+      handlers: element.handlers,
+      dispatchEvent: element.dispatchEvent.bind(element),
+      refs: element.refIds || {},
+    };
+    element.handlers.handleOnUpdate(deps, {
+      oldProps: previousProps,
+      newProps: pendingUpdate.newProps,
+    });
+  }
+};
+
 export const createWebComponentUpdateHook = ({
   scheduleFrameFn = scheduleFrame,
 } = {}) => {
   return {
+    insert: (vnode) => {
+      const element = vnode.elm;
+      if (!isRettangoliComponent(element)) return;
+      storePropsSnapshot(element, vnode.data?.props || {});
+    },
     update: (oldVnode, vnode) => {
+      const element = vnode.elm;
+      if (
+        !isRettangoliComponent(element) ||
+        typeof element.render !== "function"
+      ) {
+        return;
+      }
+
       const oldProps = oldVnode.data?.props || {};
       const newProps = vnode.data?.props || {};
+      const pendingUpdate = pendingUpdates.get(element);
 
-      const propsChanged = JSON.stringify(oldProps) !== JSON.stringify(newProps);
-      if (!propsChanged) {
+      if (pendingUpdate) {
+        pendingUpdate.newProps = newProps;
         return;
       }
 
-      const element = vnode.elm;
-      if (!element || typeof element.render !== "function") {
+      const previousSnapshot =
+        propsSnapshots.get(element) || createPropsSnapshot(oldProps);
+      const nextSnapshot = createPropsSnapshot(newProps);
+      const changedPropKeys = getChangedPropKeys(
+        previousSnapshot,
+        nextSnapshot,
+      );
+      if (changedPropKeys.length === 0) {
+        propsSnapshots.set(element, nextSnapshot);
         return;
       }
 
+      const nextPendingUpdate = {
+        previousSnapshot,
+        newProps,
+      };
+      pendingUpdates.set(element, nextPendingUpdate);
+
       element.setAttribute("isDirty", "true");
       scheduleFrameFn(() => {
-        element.render();
-        element.removeAttribute("isDirty");
-
-        if (element.handlers && element.handlers.handleOnUpdate) {
-          const deps = {
-            ...(element.deps),
-            store: element.store,
-            render: element.render.bind(element),
-            handlers: element.handlers,
-            dispatchEvent: element.dispatchEvent.bind(element),
-            refs: element.refIds || {},
-          };
-          element.handlers.handleOnUpdate(deps, {
-            oldProps,
-            newProps,
-          });
-        }
+        runPendingUpdate(element, nextPendingUpdate);
       });
     },
   };

package/src/web/createWebComponentClass.js

@@ -15,7 +15,10 @@ import {
   buildObservedAttributes,
 } from "../core/runtime/componentRuntime.js";
 import { initializeComponentDom } from "./componentDom.js";
-import { createWebComponentUpdateHook } from "./componentUpdateHook.js";
+import {
+  createWebComponentUpdateHook,
+  RETTANGOLI_COMPONENT_MARKER,
+} from "./componentUpdateHook.js";
 import { scheduleFrame } from "./scheduler.js";
 
 export const createWebComponentClass = ({
@@ -34,6 +37,7 @@ export const createWebComponentClass = ({
   deps,
 }) => {
   class BaseComponent extends HTMLElement {
+    [RETTANGOLI_COMPONENT_MARKER] = true;
     elementName;
     styles;
     _snabbdomH;