@rettangoli/fe 1.0.1 → 1.0.3

package/README.md

@@ -8,7 +8,7 @@ A modern frontend framework that uses YAML for view definitions, web components
 - **📝 YAML Views** - Declarative UI definitions that compile to virtual DOM
 - **🧩 Web Components** - Standards-based component architecture
 - **🔄 Reactive State** - Immer-powered immutable state management
-- **⚡ Fast Development** - Hot reload with Vite integration
+- **⚡ Fast Development** - Auto reload with Vite integration
 - **🎯 Template System** - Jempl templating for dynamic content
 - **🧪 Testing Ready** - Pure functions and dependency injection for easy testing
 
@@ -38,7 +38,7 @@ rtgl fe watch     # Start dev server
 - [RxJS](https://github.com/ReactiveX/rxjs) - Reactive programming
 
 **Build & Development:**
-- [ESBuild](https://esbuild.github.io/) - Fast bundling
+- [Vite](https://vite.dev/) - Dev server and production bundling
 
 **Browser Native:**
 - Web Components - Component encapsulation
@@ -78,7 +78,7 @@ node ../rettangoli-cli/cli.js fe watch
 src/
 ├── cli/
 │   ├── build.js       # Build component bundles
-│   ├── watch.js       # Development server with hot reload
+│   ├── watch.js       # Development server with auto reload
 │   ├── scaffold.js    # Component scaffolding
 │   ├── examples.js    # Generate examples for testing
 │   └── blank/         # Component templates
@@ -89,6 +89,30 @@ src/
 └── index.js           # Main exports
 ```
 
+## Vite Integration
+
+`@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.
+- 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.
+
+Current Vite features used by FE:
+
+- Build API (`build`) for production bundles.
+- Dev Server API (`createServer`) for watch mode serving.
+- Custom plugin hooks:
+  - `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.
+
+Notes:
+
+- Watch mode currently performs full reloads (not component-level HMR).
+- No dedicated CSS plugin pipeline is enabled in FE at this time.
+
 ## Configuration
 
 Create a `rettangoli.config.yaml` file in your project root:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/fe",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Frontend framework for building reactive web components",
   "type": "module",
   "main": "./src/index.js",
@@ -31,7 +31,6 @@
     "vitest": "^4.0.15"
   },
   "dependencies": {
-    "esbuild": "^0.25.5",
     "immer": "^10.1.1",
     "jempl": "0.3.2-rc2",
     "js-yaml": "^4.1.0",
@@ -40,7 +39,7 @@
     "vite": "^6.3.5"
   },
   "scripts": {
-    "dev": "node watch.js --watch",
+    "dev": "node ../rettangoli-cli/cli.js fe watch",
     "test": "vitest run --reporter=verbose",
     "test:puty": "vitest run puty.spec.js --reporter=verbose",
     "test:vitest": "vitest run test/**/*.test.js --reporter=verbose"

package/src/cli/build.js

@@ -1,58 +1,13 @@
-import {
-  readFileSync,
-  writeFileSync,
-  mkdirSync,
-  existsSync,
-} from "node:fs";
-
-import esbuild from "esbuild";
-import { load as loadYaml } from "js-yaml";
-import { parse } from 'jempl';
-import { extractCategoryAndComponent } from '../commonBuild.js';
-import { getAllFiles } from '../commonBuild.js';
-import {
-  isSupportedComponentFile,
-  validateComponentEntries,
-} from "./contracts.js";
 import path from "node:path";
 
-function capitalize(word) {
-  return word ? word[0].toUpperCase() + word.slice(1) : word;
-}
-
-const writeYamlModuleFile = (yamlObject, category, component, fileType, tempDir = path.resolve(process.cwd(), ".temp")) => {
-  const dir = path.join(tempDir, category);
-  if (!existsSync(dir)) {
-    mkdirSync(dir, { recursive: true });
-  }
-  writeFileSync(
-    path.join(dir, `${component}.${fileType}.js`),
-    `export default ${JSON.stringify(yamlObject)};`,
-  );
-};
-
-// Function to process view files - loads YAML and creates temporary JS file
-export const writeViewFile = (view, category, component, tempDir = path.resolve(process.cwd(), ".temp")) => {
-  writeYamlModuleFile(view, category, component, "view", tempDir);
-};
+import { build as viteBuild } from "vite";
 
-export const bundleFile = async (options) => {
-  const { outfile, tempDir, development = false } = options;
-  await esbuild.build({
-    entryPoints: [path.join(tempDir, "dynamicImport.js")],
-    bundle: true,
-    minify: !development,
-    sourcemap: !!development,
-    outfile: outfile,
-    format: "esm",
-    loader: {
-      ".wasm": "binary",
-    },
-    platform: "browser",
-  });
-};
+import {
+  RETTANGOLI_FE_VIRTUAL_ENTRY_ID,
+  createRettangoliFeVitePlugin,
+} from "./vitePlugin.js";
 
-const buildRettangoliFrontend = async (options) => {
+const buildRettangoliFrontend = async (options = {}) => {
   console.log("running build with options", options);
 
   const {
@@ -60,130 +15,43 @@ const buildRettangoliFrontend = async (options) => {
     dirs = ["./example"],
     outfile = "./vt/static/main.js",
     setup = "setup.js",
-    development = false
+    development = false,
   } = options;
 
-  // Resolve all paths relative to cwd
-  const resolvedDirs = dirs.map(dir => path.resolve(cwd, dir));
-  const resolvedSetup = path.resolve(cwd, setup);
   const resolvedOutfile = path.resolve(cwd, outfile);
-  const tempDir = path.resolve(cwd, ".temp");
-
-  // Ensure temp directory exists
-  if (!existsSync(tempDir)) {
-    mkdirSync(tempDir, { recursive: true });
-  }
-
-  const allFiles = getAllFiles(resolvedDirs).filter((filePath) => isSupportedComponentFile(filePath));
-
-  let output = "";
-
-  const categories = [];
-  const imports = {};
-  const componentContractEntries = [];
-
-  // unique identifier needed for replacing
-  let count = 10000000000;
-
-  const replaceMap = {};
-
-  for (const filePath of allFiles) {
-    const { category, component, fileType } =
-      extractCategoryAndComponent(filePath);
-
-    if (!imports[category]) {
-      imports[category] = {};
-    }
-
-    if (!imports[category][component]) {
-      imports[category][component] = {};
-    }
-
-    if (!categories.includes(category)) {
-      categories.push(category);
-    }
-
-
-    const componentContractEntry = {
-      category,
-      component,
-      fileType,
-      filePath,
-    };
-
-    if (["handlers", "store", "methods"].includes(fileType)) {
-      const relativePath = path.relative(tempDir, filePath).replaceAll(path.sep, "/");
-      output += `import * as ${component}${capitalize(
-        fileType,
-      )} from '${relativePath}';\n`;
-
-      replaceMap[count] = `${component}${capitalize(fileType)}`;
-      imports[category][component][fileType] = count;
-      count++;
-    } else if (["view", "constants", "schema"].includes(fileType)) {
-      const yamlObject = loadYaml(readFileSync(filePath, "utf8")) ?? {};
-      componentContractEntry.yamlObject = yamlObject;
-      if (fileType === "view") {
-        try {
-          yamlObject.template = parse(yamlObject.template);
-        } catch (error) {
-          console.error(`Error parsing template in file: ${filePath}`);
-          throw error;
-        }
-      }
-      if (
-        fileType === "constants" &&
-        (yamlObject === null || typeof yamlObject !== "object" || Array.isArray(yamlObject))
-      ) {
-        throw new Error(`[Build] ${filePath} must contain a YAML object at the root.`);
-      }
-
-      writeYamlModuleFile(yamlObject, category, component, fileType, tempDir);
-      output += `import ${component}${capitalize(
-        fileType,
-      )} from './${category}/${component}.${fileType}.js';\n`;
-      replaceMap[count] = `${component}${capitalize(fileType)}`;
-
-      imports[category][component][fileType] = count;
-      count++;
-    }
-
-    componentContractEntries.push(componentContractEntry);
-  }
-
-  validateComponentEntries({
-    entries: componentContractEntries,
-    errorPrefix: "[Build]",
-  });
-
-  const relativeSetup = path.relative(tempDir, resolvedSetup).replaceAll(path.sep, "/");
-  output += `
-import { createComponent } from '@rettangoli/fe';
-import { deps } from '${relativeSetup}';
-const imports = ${JSON.stringify(imports, null, 2)};
-
-Object.keys(imports).forEach(category => {
-  Object.keys(imports[category]).forEach(component => {
-    const componentConfig = imports[category][component];
-    const webComponent = createComponent({ ...componentConfig }, deps[category])
-    const elementName = componentConfig.schema?.componentName;
-    if (!elementName) {
-      throw new Error(\`[Build] Missing schema.componentName for \${category}/\${component}. Define it in .schema.yaml.\`);
-    }
-    customElements.define(elementName, webComponent);
-  })
-})
-
-`;
-
-  Object.keys(replaceMap).forEach((key) => {
-    output = output.replace(key, replaceMap[key]);
+  const outDir = path.dirname(resolvedOutfile);
+  const outFileName = path.basename(resolvedOutfile);
+  const relativeOutDir = path.relative(cwd, outDir) || ".";
+
+  await viteBuild({
+    configFile: false,
+    root: cwd,
+    plugins: [
+      createRettangoliFeVitePlugin({
+        cwd,
+        dirs,
+        setup,
+        errorPrefix: "[Build]",
+      }),
+    ],
+    build: {
+      outDir: relativeOutDir,
+      emptyOutDir: false,
+      minify: development ? false : "esbuild",
+      sourcemap: !!development,
+      target: "esnext",
+      rollupOptions: {
+        input: RETTANGOLI_FE_VIRTUAL_ENTRY_ID,
+        output: {
+          format: "es",
+          entryFileNames: outFileName,
+          chunkFileNames: "chunks/[name]-[hash].js",
+          assetFileNames: "assets/[name]-[hash][extname]",
+        },
+      },
+    },
   });
 
-  writeFileSync(path.join(tempDir, "dynamicImport.js"), output);
-
-  await bundleFile({ outfile: resolvedOutfile, tempDir, development });
-
   console.log(`Build complete. Output file: ${resolvedOutfile}`);
 };
 

package/src/cli/contracts.js

@@ -59,7 +59,7 @@ export const validateComponentEntries = ({
   const errors = validateComponentContractIndex(index);
   if (errors.length > 0) {
     throw new Error(
-      `${errorPrefix} Component contract validation failed:\n${formatContractErrors(errors).join("\n")}`,
+      `${errorPrefix} Component contract validation failed:\n${formatContractErrorLines(errors).join("\n")}`,
     );
   }
   return {

package/src/cli/frontendEntrySource.js

@@ -0,0 +1,178 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+
+import { parse as parseTemplate } from "jempl";
+import { load as loadYaml } from "js-yaml";
+
+import { extractCategoryAndComponent, getAllFiles } from "../commonBuild.js";
+import {
+  isSupportedComponentFile,
+  validateComponentEntries,
+} from "./contracts.js";
+
+const MODULE_FILE_TYPES = new Set(["handlers", "store", "methods"]);
+const YAML_FILE_TYPES = new Set(["view", "constants", "schema"]);
+
+const toPosixPath = (value) => value.split(path.sep).join("/");
+
+const toImportPath = ({ absolutePath, command }) => {
+  const normalizedAbsolutePath = toPosixPath(path.resolve(absolutePath));
+  if (command === "serve") {
+    return normalizedAbsolutePath.startsWith("/")
+      ? `/@fs${normalizedAbsolutePath}`
+      : `/@fs/${normalizedAbsolutePath}`;
+  }
+  return normalizedAbsolutePath;
+};
+
+const readYamlObject = (filePath) => {
+  const content = readFileSync(filePath, "utf8");
+  return loadYaml(content) ?? {};
+};
+
+const validateConstantsRoot = ({ filePath, yamlObject, errorPrefix }) => {
+  if (
+    yamlObject === null ||
+    typeof yamlObject !== "object" ||
+    Array.isArray(yamlObject)
+  ) {
+    throw new Error(
+      `${errorPrefix} ${filePath} must contain a YAML object at the root.`,
+    );
+  }
+};
+
+const createComponentImportLines = ({ componentMatrix, categories }) => {
+  const lines = ["const imports = {};"];
+
+  for (const category of categories) {
+    lines.push(`imports[${JSON.stringify(category)}] = {};`);
+    const components = Object.keys(componentMatrix[category]).sort();
+    for (const component of components) {
+      lines.push(
+        `imports[${JSON.stringify(category)}][${JSON.stringify(component)}] = {};`,
+      );
+      const componentConfig = componentMatrix[category][component];
+      const fileTypes = Object.keys(componentConfig).sort();
+      for (const fileType of fileTypes) {
+        lines.push(
+          `imports[${JSON.stringify(category)}][${JSON.stringify(component)}][${JSON.stringify(fileType)}] = ${componentConfig[fileType]};`,
+        );
+      }
+    }
+  }
+
+  return lines.join("\n");
+};
+
+export const generateFrontendEntrySource = ({
+  cwd = process.cwd(),
+  dirs = ["./example"],
+  setup = "setup.js",
+  command = "build",
+  errorPrefix = "[Build]",
+} = {}) => {
+  const resolvedDirs = dirs.map((dir) => path.resolve(cwd, dir));
+  const resolvedSetup = path.resolve(cwd, setup);
+  const allFiles = getAllFiles(resolvedDirs)
+    .filter((filePath) => isSupportedComponentFile(filePath))
+    .sort((a, b) => a.localeCompare(b));
+
+  const componentMatrix = {};
+  const componentContractEntries = [];
+  const declarationLines = [];
+  let declarationIndex = 0;
+
+  for (const filePath of allFiles) {
+    const { category, component, fileType } =
+      extractCategoryAndComponent(filePath);
+
+    if (!componentMatrix[category]) {
+      componentMatrix[category] = {};
+    }
+    if (!componentMatrix[category][component]) {
+      componentMatrix[category][component] = {};
+    }
+
+    const declarationName = `__rtgl_${declarationIndex}_${fileType}`;
+    declarationIndex += 1;
+
+    const componentContractEntry = {
+      category,
+      component,
+      fileType,
+      filePath,
+    };
+
+    if (MODULE_FILE_TYPES.has(fileType)) {
+      const importPath = toImportPath({ absolutePath: filePath, command });
+      declarationLines.push(
+        `import * as ${declarationName} from ${JSON.stringify(importPath)};`,
+      );
+      componentMatrix[category][component][fileType] = declarationName;
+    } else if (YAML_FILE_TYPES.has(fileType)) {
+      const yamlObject = readYamlObject(filePath);
+
+      if (fileType === "view") {
+        try {
+          yamlObject.template = parseTemplate(yamlObject.template);
+        } catch (error) {
+          throw new Error(
+            `${errorPrefix} Error parsing template in file: ${filePath}\n${error.message}`,
+          );
+        }
+      }
+
+      if (fileType === "constants") {
+        validateConstantsRoot({ filePath, yamlObject, errorPrefix });
+      }
+
+      if (fileType === "view" || fileType === "schema") {
+        componentContractEntry.yamlObject = yamlObject;
+      }
+
+      declarationLines.push(
+        `const ${declarationName} = ${JSON.stringify(yamlObject)};`,
+      );
+      componentMatrix[category][component][fileType] = declarationName;
+    }
+
+    componentContractEntries.push(componentContractEntry);
+  }
+
+  validateComponentEntries({
+    entries: componentContractEntries,
+    errorPrefix,
+  });
+
+  const setupImportPath = toImportPath({
+    absolutePath: resolvedSetup,
+    command,
+  });
+  const categoryLines = createComponentImportLines({
+    componentMatrix,
+    categories: Object.keys(componentMatrix).sort(),
+  });
+
+  return `
+${declarationLines.join("\n")}
+import { createComponent } from "@rettangoli/fe";
+import { deps } from ${JSON.stringify(setupImportPath)};
+
+${categoryLines}
+
+Object.keys(imports).forEach((category) => {
+  Object.keys(imports[category]).forEach((component) => {
+    const componentConfig = imports[category][component];
+    const webComponent = createComponent({ ...componentConfig }, deps[category]);
+    const elementName = componentConfig.schema?.componentName;
+    if (!elementName) {
+      throw new Error(
+        \`[Build] Missing schema.componentName for \${category}/\${component}. Define it in .schema.yaml.\`,
+      );
+    }
+    customElements.define(elementName, webComponent);
+  });
+});
+`.trim();
+};

package/src/cli/vitePlugin.js

@@ -0,0 +1,158 @@
+import path from "node:path";
+
+import { isSupportedComponentFile } from "./contracts.js";
+import { generateFrontendEntrySource } from "./frontendEntrySource.js";
+
+export const RETTANGOLI_FE_VIRTUAL_ENTRY_ID = "virtual:rettangoli-fe-entry";
+const RESOLVED_VIRTUAL_ENTRY_ID = `\0${RETTANGOLI_FE_VIRTUAL_ENTRY_ID}`;
+
+const isWithinDirectory = ({ filePath, directoryPath }) => {
+  const relativePath = path.relative(directoryPath, filePath);
+  return (
+    relativePath === "" ||
+    (!relativePath.startsWith("..") && !path.isAbsolute(relativePath))
+  );
+};
+
+const normalizePublicEntryPath = (value) => {
+  if (!value) {
+    return null;
+  }
+  const normalized = value.replace(/\\/g, "/");
+  return normalized.startsWith("/") ? normalized : `/${normalized}`;
+};
+
+export const createRettangoliFeVitePlugin = ({
+  cwd = process.cwd(),
+  dirs = ["./example"],
+  setup = "setup.js",
+  errorPrefix = "[Build]",
+  publicEntryPath = null,
+} = {}) => {
+  const resolvedDirs = dirs.map((directory) => path.resolve(cwd, directory));
+  const resolvedSetup = path.resolve(cwd, setup);
+  const normalizedPublicEntryPath = normalizePublicEntryPath(publicEntryPath);
+
+  let currentCommand = "build";
+  let devServer = null;
+
+  const isTrackedFilePath = (value) => {
+    const filePath = path.resolve(value);
+    if (filePath === resolvedSetup) {
+      return true;
+    }
+
+    if (!isSupportedComponentFile(filePath)) {
+      return false;
+    }
+
+    return resolvedDirs.some((directoryPath) =>
+      isWithinDirectory({ filePath, directoryPath }),
+    );
+  };
+
+  const invalidateVirtualEntry = () => {
+    if (!devServer) {
+      return;
+    }
+    const module = devServer.moduleGraph.getModuleById(
+      RESOLVED_VIRTUAL_ENTRY_ID,
+    );
+    if (module) {
+      devServer.moduleGraph.invalidateModule(module);
+    }
+  };
+
+  const triggerFullReload = () => {
+    if (!devServer) {
+      return;
+    }
+    invalidateVirtualEntry();
+    devServer.ws.send({ type: "full-reload" });
+  };
+
+  return {
+    name: "rettangoli-fe",
+    enforce: "pre",
+    configResolved(config) {
+      currentCommand = config.command;
+    },
+    resolveId(id) {
+      if (id === RETTANGOLI_FE_VIRTUAL_ENTRY_ID) {
+        return RESOLVED_VIRTUAL_ENTRY_ID;
+      }
+      return null;
+    },
+    load(id) {
+      if (id !== RESOLVED_VIRTUAL_ENTRY_ID) {
+        return null;
+      }
+      return generateFrontendEntrySource({
+        cwd,
+        dirs,
+        setup,
+        command: currentCommand,
+        errorPrefix,
+      });
+    },
+    configureServer(server) {
+      devServer = server;
+
+      const onAdd = (filePath) => {
+        if (isTrackedFilePath(filePath)) {
+          triggerFullReload();
+        }
+      };
+
+      const onUnlink = (filePath) => {
+        if (isTrackedFilePath(filePath)) {
+          triggerFullReload();
+        }
+      };
+
+      server.watcher.on("add", onAdd);
+      server.watcher.on("unlink", onUnlink);
+
+      if (normalizedPublicEntryPath) {
+        server.middlewares.use(async (req, res, next) => {
+          const reqPath = (req.url || "").split("?")[0];
+          if (reqPath !== normalizedPublicEntryPath) {
+            next();
+            return;
+          }
+
+          try {
+            const transformed = await server.transformRequest(
+              RETTANGOLI_FE_VIRTUAL_ENTRY_ID,
+            );
+
+            if (!transformed) {
+              res.statusCode = 500;
+              res.setHeader("Content-Type", "text/plain; charset=utf-8");
+              res.end(
+                `Failed to transform ${RETTANGOLI_FE_VIRTUAL_ENTRY_ID}.`,
+              );
+              return;
+            }
+
+            res.statusCode = 200;
+            res.setHeader("Content-Type", "application/javascript");
+            res.end(transformed.code);
+          } catch (error) {
+            server.ssrFixStacktrace(error);
+            res.statusCode = 500;
+            res.setHeader("Content-Type", "text/plain; charset=utf-8");
+            res.end(error.stack || String(error));
+          }
+        });
+      }
+    },
+    handleHotUpdate(context) {
+      if (!isTrackedFilePath(context.file)) {
+        return;
+      }
+      triggerFullReload();
+      return [];
+    },
+  };
+};

package/src/cli/watch.js

@@ -1,100 +1,93 @@
-import { readFileSync, watch } from "node:fs";
 import path from "node:path";
 
-import { load as loadYaml } from "js-yaml";
-import { createServer } from 'vite'
-import { writeViewFile } from './build.js';
-import buildRettangoliFrontend from './build.js';
-import { extractCategoryAndComponent } from '../commonBuild.js';
+import { createServer } from "vite";
 
-// Debounce mechanism to prevent excessive rebuilds
-let rebuildTimeout = null;
-const DEBOUNCE_DELAY = 200; // 200ms delay
+import { createRettangoliFeVitePlugin } from "./vitePlugin.js";
 
+const toPosixPath = (value) => value.split(path.sep).join("/");
 
-const setupWatcher = (directory, options) => {
-  watch(
-    directory,
-    { recursive: true },
-    async (event, filename) => {
-      console.log(`Detected ${event} in ${directory}/${filename}`);
-      if (filename) {
-        try {
-          const changedFilePath = path.join(directory, filename);
-          if (filename.endsWith('.view.yaml')) {
-            const view = loadYaml(readFileSync(changedFilePath, "utf8"));
-            const { category, component } = extractCategoryAndComponent(changedFilePath);
-            await writeViewFile(view, category, component);
-          }
+export const resolveServeContext = ({ cwd, outfile }) => {
+  const resolvedOutfile = path.resolve(cwd, outfile);
+  const relativeOutfile = path.relative(cwd, resolvedOutfile);
+  const parts = relativeOutfile.split(path.sep).filter(Boolean);
+  const staticIndex = parts.indexOf("static");
 
-          // Debounce the rebuild
-          if (rebuildTimeout) {
-            clearTimeout(rebuildTimeout);
-          }
+  if (staticIndex >= 0) {
+    const rootParts = parts.slice(0, staticIndex);
+    const root = path.resolve(cwd, ...rootParts);
+    const publicEntryPath = `/${toPosixPath(parts.slice(staticIndex).join(path.sep))}`;
+    return {
+      root,
+      publicEntryPath,
+    };
+  }
+
+  const outDir = path.dirname(resolvedOutfile);
+  const root = path.dirname(outDir);
+  const publicEntryPath = `/${toPosixPath(path.relative(root, resolvedOutfile))}`;
 
-          rebuildTimeout = setTimeout(async () => {
-            console.log('Triggering rebuild...');
-            await buildRettangoliFrontend(options);
-          }, DEBOUNCE_DELAY);
+  return {
+    root,
+    publicEntryPath,
+  };
+};
 
-        } catch (error) {
-          console.error(`Error processing ${filename}:`, error);
-          // Keep the watcher running
-        }
-      }
+export const createWatchServer = async (options = {}) => {
+  const {
+    cwd = process.cwd(),
+    dirs = ["src"],
+    port = 3001,
+    outfile = "./vt/static/main.js",
+    setup = "setup.js",
+  } = options;
+
+  const { root, publicEntryPath } = resolveServeContext({ cwd, outfile });
+
+  const server = await createServer({
+    configFile: false,
+    root,
+    server: {
+      port,
+      host: "0.0.0.0",
+      allowedHosts: true,
     },
-  );
+    plugins: [
+      createRettangoliFeVitePlugin({
+        cwd,
+        dirs,
+        setup,
+        errorPrefix: "[Watch]",
+        publicEntryPath,
+      }),
+    ],
+  });
+
+  return server;
 };
 
-async function startViteServer(options) {
-  const { port = 3001, outfile = "./vt/static/main.js" } = options;
+const startWatching = async (options = {}) => {
+  const {
+    cwd = process.cwd(),
+    outfile = "./vt/static/main.js",
+    enableCliShortcuts = !!process.stdin.isTTY,
+  } = options;
+  const { root, publicEntryPath } = resolveServeContext({ cwd, outfile });
+
+  console.log("watch root dir:", root);
+  console.log("watch entry path:", publicEntryPath);
 
-  // Extract the directory from outfile path
-  const outDir = path.dirname(outfile);
-  // Go up one level from the JS file directory to serve the site root
-  const root = path.dirname(outDir);
-  console.log('watch root dir:', root)
   try {
-    const server = await createServer({
-      // any valid user config options, plus `mode` and `configFile`
-      // configFile: false,
-      root,
-      server: {
-        port,
-        host: '0.0.0.0',
-        allowedHosts: true
-      },
-    });
+    const server = await createWatchServer(options);
     await server.listen();
-
     server.printUrls();
-    server.bindCLIShortcuts({ print: true });
+    if (enableCliShortcuts) {
+      server.bindCLIShortcuts({ print: true });
+    }
+    return server;
   } catch (error) {
     console.error("Error during Vite server startup:", error);
     process.exit(1);
   }
-}
-
-
-const startWatching = async (options) => {
-  const { dirs = ['src'], port = 3001 } = options;
-
-  // Set development mode for all builds in watch mode
-  const watchOptions = {
-    development: true,
-    ...options
-  };
-
-  // Do initial build with all directories
-  console.log('Starting initial build...');
-  await buildRettangoliFrontend(watchOptions);
-  console.log('Initial build complete');
-
-  dirs.forEach(dir => {
-    setupWatcher(dir, watchOptions);
-  });
-
-  startViteServer({ port, outfile: options.outfile });
-}
+};
 
 export default startWatching;

package/src/core/runtime/componentOrchestrator.js

@@ -85,6 +85,13 @@ export const runAttributeChangedComponentLifecycle = ({
     return;
   }
 
+  // Browsers can invoke attributeChangedCallback before connectedCallback.
+  // In that phase the component has no render target and transformed
+  // handlers are not wired yet, so update handlers must not trigger render.
+  if (instance.isConnected === false || !instance.renderTarget) {
+    return;
+  }
+
   if (instance.handlers?.handleOnUpdate) {
     const runtimeDeps = createRuntimeDepsForInstance({ instance });
     const changes = buildOnUpdateChanges({