vatts 2.2.6 → 2.3.0-canary

package/dist/frameworks/vue/App.vue

@@ -0,0 +1,149 @@
+<template>
+  <component :is="resolvedLayout" v-if="resolvedLayout">
+    <component
+        :is="resolvedContent"
+        v-bind="contentProps"
+        :key="`page-${hmrTimestamp}-${currentPathKey}`"
+    />
+  </component>
+
+  <component
+      v-else
+      :is="resolvedContent"
+      v-bind="contentProps"
+      :key="`page-${hmrTimestamp}-${currentPathKey}`"
+  />
+
+  <vatts-dev-badge
+      v-if="isDev"
+      :has-build-error="!!buildError"
+      @click-build-error="isErrorOpen = true"
+  ></vatts-dev-badge>
+
+  <vatts-error-modal
+      .error="buildError"
+      .isOpen="isErrorOpen"
+      @close-modal="isErrorOpen = false"
+      @copy-log="handleCopyLog"
+  ></vatts-error-modal>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, shallowRef, watch, nextTick, defineComponent, h } from 'vue';
+import { router } from '../../client/clientRouter';
+
+// Importa a lógica centralizada
+import {
+  findRouteForPath, updateDocumentTitle, copyBuildError,
+  setupBuildErrorEvents, setupHMREvents, dispatchHmrReady
+} from '../FrontCore';
+
+import '../themes/VattsDevBadge';
+import '../themes/ErrorModal';
+
+// --- Props ---
+const props = defineProps({
+  componentMap: Object,
+  routes: Array,
+  initialComponentPath: String,
+  initialParams: null,
+  layoutComponent: null
+});
+
+// --- Estado ---
+const hmrTimestamp = ref(Date.now());
+const currentPathKey = ref(window.location.pathname);
+const pendingHmrReady = ref(null);
+
+const buildError = ref(window.__VATTS_BUILD_ERROR__ || null);
+const isErrorOpen = ref(!!window.__VATTS_BUILD_ERROR__);
+const isDev = process.env.NODE_ENV !== 'production';
+
+// Cleanup references for events
+let cleanupErrorEvents;
+let cleanupHmrEvents;
+let unsubscribeRouter;
+
+const handleCopyLog = () => copyBuildError(buildError.value);
+
+watch(hmrTimestamp, async (timestamp) => {
+  if (!pendingHmrReady.value || pendingHmrReady.value.timestamp !== timestamp) return;
+  await nextTick();
+  dispatchHmrReady(pendingHmrReady.value);
+  pendingHmrReady.value = null;
+});
+
+// --- Roteamento ---
+const CurrentPageComponent = shallowRef(null);
+const params = ref({});
+
+const updateRoute = () => {
+  const currentPath = window.location.pathname.replace("index.html", '');
+  currentPathKey.value = currentPath;
+
+  const match = findRouteForPath(currentPath, props.routes);
+  if (match) {
+    CurrentPageComponent.value = props.componentMap[match.componentPath];
+    params.value = match.params;
+    updateDocumentTitle(match.metadata?.title);
+  } else {
+    CurrentPageComponent.value = null;
+    params.value = {};
+  }
+};
+
+// --- Computed ---
+const resolvedContent = computed(() => {
+  if (!CurrentPageComponent.value) {
+    const NotFoundComponent = window.__VATTS_NOT_FOUND__;
+    if (NotFoundComponent) return NotFoundComponent;
+
+    const { getDefaultNotFound } = window.__VATTS_DEFAULT_NOT_FOUND__;
+    return getDefaultNotFound
+        ? defineComponent({
+          render() {
+            return h('div', {
+              innerHTML: getDefaultNotFound()
+            });
+          }
+        })
+        : 'div';
+  }
+  return CurrentPageComponent.value;
+});
+
+const contentProps = computed(() => {
+  if (!CurrentPageComponent.value) return {};
+  return { params: params.value };
+});
+
+const resolvedLayout = computed(() => props.layoutComponent || null);
+
+// --- Lifecycle ---
+onMounted(() => {
+  updateRoute();
+
+  // Usa as funções de eventos do Core
+  cleanupErrorEvents = setupBuildErrorEvents(
+      (err) => { buildError.value = err; isErrorOpen.value = true; },
+      () => { buildError.value = null; isErrorOpen.value = false; }
+  );
+
+  cleanupHmrEvents = setupHMREvents((file, timestamp) => {
+    pendingHmrReady.value = { file, timestamp };
+    hmrTimestamp.value = timestamp;
+    updateRoute();
+  });
+
+  window.addEventListener('popstate', updateRoute);
+  unsubscribeRouter = router.subscribe(updateRoute);
+});
+
+onUnmounted(() => {
+  if (cleanupErrorEvents) cleanupErrorEvents();
+  if (cleanupHmrEvents) cleanupHmrEvents();
+
+  window.removeEventListener('popstate', updateRoute);
+  if (unsubscribeRouter) unsubscribeRouter();
+});
+</script>

package/dist/frameworks/vue/client.d.ts

@@ -0,0 +1,9 @@
+import Link from "./components/Link.vue";
+export { Link };
+export { RouteConfig, Metadata } from "../../types.ts";
+export { router } from '../../client/clientRouter.ts';
+export { requireDynamic } from '../../client/requireDynamic.ts';
+export { importServer } from '../../client/rpc.ts';
+export { importPhpServer } from '../../client/rpcPhp.ts';
+export { default as Image } from "./components/image/Image.vue";
+export { default as VattsImage } from "./components/image/Image.vue";

package/dist/{vue → frameworks/vue}/client.js

@@ -21,18 +21,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VattsImage = exports.Image = exports.importPhpServer = exports.importServer = exports.requireDynamic = exports.router = exports.Link = void 0;
 // Este arquivo exporta apenas código seguro para o cliente (navegador)
-const Link_vue_1 = __importDefault(require("./Link.vue"));
+const Link_vue_1 = __importDefault(require("./components/Link.vue"));
 exports.Link = Link_vue_1.default;
-var clientRouter_1 = require("../client/clientRouter");
-Object.defineProperty(exports, "router", { enumerable: true, get: function () { return clientRouter_1.router; } });
-var requireDynamic_1 = require("../client/requireDynamic");
-Object.defineProperty(exports, "requireDynamic", { enumerable: true, get: function () { return requireDynamic_1.requireDynamic; } });
+const framework_ts_1 = require("../../api/framework.js");
+var clientRouter_ts_1 = require("../../client/clientRouter.js");
+Object.defineProperty(exports, "router", { enumerable: true, get: function () { return clientRouter_ts_1.router; } });
+var requireDynamic_ts_1 = require("../../client/requireDynamic.js");
+Object.defineProperty(exports, "requireDynamic", { enumerable: true, get: function () { return requireDynamic_ts_1.requireDynamic; } });
+framework_ts_1.cachedFramework == 'react';
 // RPC (client-side)
-var rpc_1 = require("../client/rpc");
-Object.defineProperty(exports, "importServer", { enumerable: true, get: function () { return rpc_1.importServer; } });
-var rpcPhp_1 = require("../client/rpcPhp");
-Object.defineProperty(exports, "importPhpServer", { enumerable: true, get: function () { return rpcPhp_1.importPhpServer; } });
-var Image_vue_1 = require("./image/Image.vue");
+var rpc_ts_1 = require("../../client/rpc.js");
+Object.defineProperty(exports, "importServer", { enumerable: true, get: function () { return rpc_ts_1.importServer; } });
+var rpcPhp_ts_1 = require("../../client/rpcPhp.js");
+Object.defineProperty(exports, "importPhpServer", { enumerable: true, get: function () { return rpcPhp_ts_1.importPhpServer; } });
+var Image_vue_1 = require("./components/image/Image.vue");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_vue_1).default; } });
-var Image_vue_2 = require("./image/Image.vue");
+var Image_vue_2 = require("./components/image/Image.vue");
 Object.defineProperty(exports, "VattsImage", { enumerable: true, get: function () { return __importDefault(Image_vue_2).default; } });

package/dist/{vue → frameworks/vue/components}/Link.vue

@@ -15,7 +15,7 @@
   limitations under the License.
 -->
 <script setup>
-import { router } from '../client/clientRouter';
+import { router } from '../../../client/clientRouter';
 
 const props = defineProps({
   href: {

package/dist/frameworks/vue/entry.client.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*
+ * This file is part of the Vatts.js Project.
+ * Copyright (c) 2026 mfraz
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const vue_1 = require("vue");
+const App_vue_1 = __importDefault(require("./App.vue"));
+// Importa a lógica centralizada (agora usando findRouteForPath ao invés de getInitialClientData)
+const FrontCore_1 = require("../FrontCore");
+function initializeClient() {
+    try {
+        // Resolve a rota e params inicial calculando diretamente no lado do cliente
+        // a partir da injeção global do esbuild
+        const routes = window.__VATTS_ROUTES__ || [];
+        const currentPath = window.location.pathname.replace("index.html", '');
+        const match = (0, FrontCore_1.findRouteForPath)(currentPath, routes);
+        const initialComponentPath = match ? match.componentPath : '__404__';
+        const initialParams = match ? match.params : {};
+        const componentMap = {};
+        if (window.__VATTS_COMPONENTS__) {
+            Object.assign(componentMap, window.__VATTS_COMPONENTS__);
+        }
+        else {
+            console.warn('[Vatts Vue] No components found in window.__VATTS_COMPONENTS__');
+        }
+        const container = document.getElementById('root');
+        if (!container)
+            throw new Error('Container #root not found.');
+        if (window.__VATTS_APP__) {
+            try {
+                window.__VATTS_APP__.unmount();
+                container.innerHTML = '';
+            }
+            catch (e) {
+                console.warn('[Vatts Vue] Warning during unmount:', e);
+            }
+        }
+        const app = (0, vue_1.createApp)(App_vue_1.default, {
+            componentMap,
+            routes, // Passamos as rotas globais
+            initialComponentPath, // Passamos o path resolvido
+            initialParams, // Passamos os parâmetros da URL
+            layoutComponent: window.__VATTS_LAYOUT__
+        });
+        // Configuração para suportar os Web Components de desenvolvimento do Vatts
+        app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('vatts-');
+        window.__VATTS_APP__ = app;
+        app.mount(container);
+    }
+    catch (error) {
+        (0, FrontCore_1.renderCriticalError)(error, 'Vue');
+    }
+}
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeClient);
+}
+else {
+    setTimeout(initializeClient, 0);
+}

package/dist/global/global.d.ts

@@ -14,7 +14,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 /**
  * Type declarations for asset imports
  * This allows TypeScript to understand imports of various file types
@@ -177,4 +176,4 @@ declare module '*.vue' {
 }
 declare module '*.css';
 declare module '*.scss';
-declare module '*.sass';
+declare module '*.sass';

package/dist/index.js

@@ -723,7 +723,18 @@ function vatts(options) {
                     // Se o stream já começou, não dá pra enviar erro 500 limpo.
                     // O renderAsStream tenta lidar com isso no onError.
                     if (!rawRes.headersSent) {
-                        genericRes.status(500).text('Internal server error');
+                        const { getServerErrorHtml } = require("./frameworks/themes/ServerError");
+                        // Gera o HTML bonitão passando o erro real
+                        const errorHtml = getServerErrorHtml({
+                            title: 'Critical SSR Error',
+                            error: error,
+                            requestUrl: pathname,
+                            hint: 'The page crashed before or during the rendering process on the server.'
+                        });
+                        // Configura a resposta como HTML e envia a tela de erro
+                        rawRes.statusCode = 500;
+                        rawRes.setHeader('Content-Type', 'text/html; charset=utf-8');
+                        rawRes.end(errorHtml);
                     }
                 }
             };

package/dist/renderer.js

@@ -9,11 +9,11 @@ const framework_1 = require("./api/framework");
 async function renderAsStream(params) {
     if (framework_1.cachedFramework === 'react') {
         // Import dinâmico garante que o código do React só seja avaliado se necessário
-        const { render } = await import("./react/renderer-react.js");
+        const { render } = await import("./frameworks/renderers/renderer-react.js");
         return await render(params);
     }
     else {
-        const { renderVue } = await import("./vue/renderer.vue.js");
+        const { renderVue } = await import("./frameworks/renderers/renderer.vue.js");
         return await renderVue(params);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vatts",
-  "version": "2.2.6",
+  "version": "2.3.0-canary",
   "description": "Vatts.js is a high-level framework for building web applications with ease and speed. It provides a robust set of tools and features to streamline development and enhance productivity.",
   "types": "dist/index.d.ts",
   "author": "mfraz",
@@ -46,14 +46,14 @@
       "require": "./dist/api/console.js"
     },
     "./react": {
-      "types": "./dist/react/client.d.ts",
-      "import": "./dist/react/client.js",
-      "require": "./dist/react/client.js"
+      "types": "./dist/frameworks/react/client.d.ts",
+      "import": "./dist/frameworks/react/client.js",
+      "require": "./dist/frameworks/react/client.js"
     },
     "./vue": {
-      "types": "./dist/vue/client.d.ts",
-      "import": "./dist/vue/client.js",
-      "require": "./dist/vue/client.js"
+      "types": "./dist/frameworks/vue/client.d.ts",
+      "import": "./dist/frameworks/vue/client.js",
+      "require": "./dist/frameworks/vue/client.js"
     },
     "./helpers": {
       "types": "./dist/helpers.d.ts",
@@ -102,41 +102,28 @@
     "pg": {
       "optional": true
     },
-    "better-sqlite3": {
-      "optional": true
-    },
-    "sqlite3": {
+    "@libsql/client": {
       "optional": true
     }
   },
   "peerDependencies": {
     "@libsql/client": "^0.17.0",
-    "better-sqlite3": "^12.6.2",
     "express": "^4.0.0",
     "fastify": "^5.6.1",
     "mysql2": "^3.17.4",
     "pg": "^8.18.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "sqlite3": "^5.1.6",
     "vue": "^3.5.27"
   },
   "dependencies": {
-    "@rollup/plugin-alias": "^6.0.0",
-    "@rollup/plugin-commonjs": "^29.0.2",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-replace": "^6.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
     "@vue/server-renderer": "^3.5.34",
     "chokidar": "^3.6.0",
     "commander": "^14.0.3",
+    "cpx2": "^9.0.0",
     "esbuild": "^0.27.7",
     "esbuild-plugin-vue3": "^0.5.1",
     "koffi": "^2.16.2",
-    "rollup": "^4.60.3",
-    "rollup-plugin-esbuild": "^6.2.1",
-    "rollup-plugin-vue": "^6.0.0",
     "sharp": "^0.34.5",
     "ts-loader": "9.5.4",
     "ts-node": "^10.9.2",
@@ -156,16 +143,13 @@
     "@types/react-dom": "^19.2.3",
     "@types/ws": "^8.18.1",
     "@vue/tsconfig": "^0.8.1",
-    "better-sqlite3": "^12.9.0",
-    "copyfiles": "^2.4.1",
     "image-size": "^2.0.2",
     "mysql2": "^3.22.3",
     "pg": "^8.20.0",
-    "sqlite3": "^5.1.7",
     "vue": "^3.5.34",
     "vue-tsc": "^3.2.8"
   },
   "scripts": {
-    "build": "tsc && copyfiles -u 1 \"src/**/*.{vue,d.ts}\" dist"
+    "build": "tsc && npx cpx2 \"src/**/**/**/*.{vue,d.ts}\" dist"
   }
 }

package/dist/react/BuildingPage.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export default function BuildingScreen(): React.JSX.Element;