@rettangoli/fe 1.2.0 → 1.2.1

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,11 @@ 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.
 - 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 +107,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:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/fe",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "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("/");
 
@@ -45,10 +48,12 @@ export const createWatchServer = async (options = {}) => {
   const { root, publicEntryPath } = resolveServeContext({ cwd, outfile });
 
   const server = await createServer({
+    clearScreen: false,
     configFile: false,
     root,
     server: {
       port,
+      strictPort: true,
       host: "0.0.0.0",
       allowedHosts: true,
     },
@@ -75,12 +80,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 });