@rettangoli/fe 1.1.3 → 1.2.1

package/README.md

@@ -26,6 +26,7 @@ rtgl fe watch     # Start dev server
 - **[Schema System](./docs/schema.md)** - Component API and metadata
 - **[Store Management](./docs/store.md)** - State patterns
 - **[Event Handlers](./docs/handlers.md)** - Event handling
+- **[Internationalization](./docs/i18n.md)** - Locale files, view usage, and locale switching
 
 ## Architecture
 
@@ -37,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
@@ -46,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
@@ -92,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:
 
@@ -105,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:
 
@@ -123,6 +125,13 @@ fe:
     - "./src/pages"
   setup: "setup.js"
   outfile: "./dist/bundle.js"
+  i18n:
+    dir: "./src/i18n"
+    defaultLocale: "en"
+    fallbackLocale: "en"
+    locales:
+      - "en"
+      - "vi"
   examples:
     outputDir: "./vt/specs/examples"
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/fe",
-  "version": "1.1.3",
+  "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";
 
@@ -6,41 +7,53 @@ import {
   RETTANGOLI_FE_VIRTUAL_ENTRY_ID,
   createRettangoliFeVitePlugin,
 } from "./vitePlugin.js";
+import { emitI18nAssets, loadI18nBuildContext } from "./i18nBuild.js";
 
 const buildRettangoliFrontend = async (options = {}) => {
-  console.log("running build with options", options);
-
   const {
     cwd = process.cwd(),
     dirs = ["./example"],
     outfile = "./vt/static/main.js",
     setup = "setup.js",
     development = false,
+    i18n = null,
   } = options;
 
   const resolvedOutfile = path.resolve(cwd, outfile);
   const outDir = path.dirname(resolvedOutfile);
   const outFileName = path.basename(resolvedOutfile);
   const relativeOutDir = path.relative(cwd, outDir) || ".";
+  const i18nContext = loadI18nBuildContext({
+    cwd,
+    i18n,
+    errorPrefix: "[Build]",
+  });
+  const startedAt = performance.now();
+
+  console.log(`[Build] Building ${resolvedOutfile}...`);
 
   await viteBuild({
     configFile: false,
+    clearScreen: false,
+    logLevel: "warn",
     root: cwd,
     plugins: [
       createRettangoliFeVitePlugin({
         cwd,
         dirs,
         setup,
+        i18n,
         errorPrefix: "[Build]",
       }),
     ],
     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",
@@ -52,7 +65,10 @@ const buildRettangoliFrontend = async (options = {}) => {
     },
   });
 
-  console.log(`Build complete. Output file: ${resolvedOutfile}`);
+  emitI18nAssets({ outDir, i18nContext });
+
+  const durationMs = Math.round(performance.now() - startedAt);
+  console.log(`[Build] Complete in ${durationMs}ms.`);
 };
 
 export default buildRettangoliFrontend;

package/src/cli/check.js

@@ -9,11 +9,16 @@ const checkRettangoliFrontend = (options = {}) => {
     cwd = process.cwd(),
     dirs = ["./example"],
     format = "text",
+    i18n = null,
   } = options;
   const outputFormat = format === "json" ? "json" : "text";
 
   const resolvedDirs = dirs.map((dir) => path.resolve(cwd, dir));
-  const { errors, summary, index } = analyzeComponentDirs({ dirs: resolvedDirs });
+  const { errors, summary, index } = analyzeComponentDirs({
+    dirs: resolvedDirs,
+    cwd,
+    i18n,
+  });
 
   if (errors.length > 0) {
     if (outputFormat === "json") {

package/src/cli/contracts.js

@@ -6,6 +6,7 @@ import {
   formatContractErrors as formatContractErrorLines,
   validateComponentContractIndex,
 } from "../core/contracts/componentFiles.js";
+import { analyzeI18nBuildContext } from "./i18nBuild.js";
 
 export const SUPPORTED_COMPONENT_FILE_SUFFIXES = Object.freeze([
   ".store.js",
@@ -54,9 +55,10 @@ export const collectComponentContractEntriesFromDirs = (dirs = []) => {
 export const validateComponentEntries = ({
   entries = [],
   errorPrefix = "[Check]",
+  i18nContext = { enabled: false },
 }) => {
   const index = buildComponentContractIndex(entries);
-  const errors = validateComponentContractIndex(index);
+  const errors = validateComponentContractIndex(index, { i18nContext });
   if (errors.length > 0) {
     throw new Error(
       `${errorPrefix} Component contract validation failed:\n${formatContractErrorLines(errors).join("\n")}`,
@@ -71,9 +73,14 @@ export const validateComponentEntries = ({
 export const validateComponentDirs = ({
   dirs = [],
   errorPrefix = "[Check]",
+  i18nContext = { enabled: false },
 }) => {
   const entries = collectComponentContractEntriesFromDirs(dirs);
-  const validationResult = validateComponentEntries({ entries, errorPrefix });
+  const validationResult = validateComponentEntries({
+    entries,
+    errorPrefix,
+    i18nContext,
+  });
   return {
     entries,
     ...validationResult,
@@ -131,9 +138,16 @@ export const formatContractFailureReport = ({
   ].join("\n");
 };
 
-export const analyzeComponentEntries = ({ entries = [] }) => {
+export const analyzeComponentEntries = ({
+  entries = [],
+  i18nContext = { enabled: false },
+  i18nErrors = [],
+}) => {
   const index = buildComponentContractIndex(entries);
-  const errors = validateComponentContractIndex(index);
+  const errors = [
+    ...i18nErrors,
+    ...validateComponentContractIndex(index, { i18nContext }),
+  ];
   const summary = summarizeContractErrors(errors);
   return {
     entries,
@@ -143,7 +157,19 @@ export const analyzeComponentEntries = ({ entries = [] }) => {
   };
 };
 
-export const analyzeComponentDirs = ({ dirs = [] }) => {
+export const analyzeComponentDirs = ({
+  dirs = [],
+  cwd = process.cwd(),
+  i18n = null,
+}) => {
   const entries = collectComponentContractEntriesFromDirs(dirs);
-  return analyzeComponentEntries({ entries });
+  const { context: i18nContext, errors: i18nErrors } = analyzeI18nBuildContext({
+    cwd,
+    i18n,
+  });
+  return analyzeComponentEntries({
+    entries,
+    i18nContext,
+    i18nErrors,
+  });
 };

package/src/cli/frontendEntrySource.js

@@ -9,6 +9,10 @@ import {
   isSupportedComponentFile,
   validateComponentEntries,
 } from "./contracts.js";
+import {
+  buildI18nAssets,
+  loadI18nBuildContext,
+} from "./i18nBuild.js";
 
 const MODULE_FILE_TYPES = new Set(["handlers", "store", "methods"]);
 const YAML_FILE_TYPES = new Set(["view", "constants", "schema"]);
@@ -65,15 +69,52 @@ const createComponentImportLines = ({ componentMatrix, categories }) => {
   return lines.join("\n");
 };
 
+const createI18nRuntimeSource = ({ i18nContext }) => {
+  if (!i18nContext.enabled) {
+    return "const __rtglFrameworkDeps = {};";
+  }
+
+  const assets = buildI18nAssets({ i18nContext });
+  const urlEntries = assets
+    .map((asset) => {
+      return `  ${JSON.stringify(asset.locale)}: new URL(/* @vite-ignore */ ${JSON.stringify(`./${asset.relativeFileName}`)}, import.meta.url).href,`;
+    })
+    .join("\n");
+
+  const initialCatalogs = {};
+  initialCatalogs[i18nContext.defaultLocale] =
+    i18nContext.catalogs[i18nContext.defaultLocale];
+  initialCatalogs[i18nContext.fallbackLocale] =
+    i18nContext.catalogs[i18nContext.fallbackLocale];
+
+  return `
+const __rtglI18nRuntime = createI18nRuntime({
+  defaultLocale: ${JSON.stringify(i18nContext.defaultLocale)},
+  fallbackLocale: ${JSON.stringify(i18nContext.fallbackLocale)},
+  locales: ${JSON.stringify(i18nContext.locales)},
+  urls: {
+${urlEntries}
+  },
+  initialCatalogs: ${JSON.stringify(initialCatalogs)},
+});
+await __rtglI18nRuntime.ready();
+const __rtglFrameworkDeps = {
+  __rtglI18nRuntime,
+  locale: __rtglI18nRuntime.locale,
+};`.trim();
+};
+
 export const generateFrontendEntrySource = ({
   cwd = process.cwd(),
   dirs = ["./example"],
   setup = "setup.js",
   command = "build",
+  i18n = null,
   errorPrefix = "[Build]",
 } = {}) => {
   const resolvedDirs = dirs.map((dir) => path.resolve(cwd, dir));
   const resolvedSetup = path.resolve(cwd, setup);
+  const i18nContext = loadI18nBuildContext({ cwd, i18n, errorPrefix });
   const allFiles = getAllFiles(resolvedDirs)
     .filter((filePath) => isSupportedComponentFile(filePath))
     .sort((a, b) => a.localeCompare(b));
@@ -143,6 +184,7 @@ export const generateFrontendEntrySource = ({
   validateComponentEntries({
     entries: componentContractEntries,
     errorPrefix,
+    i18nContext,
   });
 
   const setupImportPath = toImportPath({
@@ -153,18 +195,28 @@ export const generateFrontendEntrySource = ({
     componentMatrix,
     categories: Object.keys(componentMatrix).sort(),
   });
+  const feImports = i18nContext.enabled
+    ? "createComponent, createI18nRuntime"
+    : "createComponent";
+  const i18nRuntimeSource = createI18nRuntimeSource({ i18nContext });
 
   return `
 ${declarationLines.join("\n")}
-import { createComponent } from "@rettangoli/fe";
+import { ${feImports} } from "@rettangoli/fe";
 import { deps } from ${JSON.stringify(setupImportPath)};
 
 ${categoryLines}
 
+${i18nRuntimeSource}
+
 Object.keys(imports).forEach((category) => {
   Object.keys(imports[category]).forEach((component) => {
     const componentConfig = imports[category][component];
-    const webComponent = createComponent({ ...componentConfig }, deps[category]);
+    const categoryDeps = {
+      ...((deps && deps[category]) || {}),
+      ...__rtglFrameworkDeps,
+    };
+    const webComponent = createComponent({ ...componentConfig }, categoryDeps);
     const elementName = componentConfig.schema?.componentName;
     if (!elementName) {
       throw new Error(