vatts 2.0.2 → 2.0.3-canary.1

package/dist/vue/Link.vue

@@ -1,39 +1,39 @@
-<!--
-  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.
--->
-<script setup>
-import { router } from '../client/clientRouter';
-
-const props = defineProps({
-  href: {
-    type: String,
-    required: true
-  }
-});
-
-const handleClick = async (e) => {
-  e.preventDefault();
-
-  // Usa o novo sistema de router
-  await router.push(props.href);
-};
-</script>
-
-<template>
-  <a :href="href" @click="handleClick">
-    <slot></slot>
-  </a>
+<!--
+  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.
+-->
+<script setup>
+import { router } from '../client/clientRouter';
+
+const props = defineProps({
+  href: {
+    type: String,
+    required: true
+  }
+});
+
+const handleClick = async (e) => {
+  e.preventDefault();
+
+  // Usa o novo sistema de router
+  await router.push(props.href);
+};
+</script>
+
+<template>
+  <a :href="href" @click="handleClick">
+    <slot></slot>
+  </a>
 </template>

package/dist/vue/entry.client.js

@@ -91,13 +91,13 @@ function initializeClient() {
     catch (error) {
         console.error('[Vatts] Critical Error rendering application:', error);
         if (typeof document !== 'undefined') {
-            document.body.innerHTML = `
-                <div style="font-family: monospace; padding: 20px; color: #ff4444; background: #1a1a1a; min-height: 100vh;">
-                    <h1>Vatts Client Error (Vue)</h1>
-                    <p>A critical error occurred while initializing the application.</p>
-                    <pre style="background: #000; padding: 15px; border-radius: 5px; overflow: auto;">${error?.message || error}</pre>
-                    <pre style="color: #666; font-size: 12px; margin-top: 10px;">${error?.stack || ''}</pre>
-                </div>
+            document.body.innerHTML = `
+                <div style="font-family: monospace; padding: 20px; color: #ff4444; background: #1a1a1a; min-height: 100vh;">
+                    <h1>Vatts Client Error (Vue)</h1>
+                    <p>A critical error occurred while initializing the application.</p>
+                    <pre style="background: #000; padding: 15px; border-radius: 5px; overflow: auto;">${error?.message || error}</pre>
+                    <pre style="color: #666; font-size: 12px; margin-top: 10px;">${error?.stack || ''}</pre>
+                </div>
             `;
         }
     }

package/dist/vue/image/Image.vue

@@ -1,107 +1,107 @@
-<!--
- * 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.
- -->
-
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true
-  },
-  width: [Number, String],
-  height: [Number, String],
-  quality: {
-    type: Number,
-    default: 75
-  },
-  priority: {
-    type: Boolean,
-    default: false
-  },
-  alt: {
-    type: String,
-    default: ""
-  }
-});
-
-const getBaseUrl = () => {
-  if (typeof window === "undefined") return null;
-  return window.location.origin;
-};
-
-const optimizedSrc = computed(() => {
-  const baseUrl = getBaseUrl();
-  const { src, quality, width, height } = props;
-
-  // Se a imagem for Base64 (pequena) ou externa (http), não otimizamos via backend local
-  const isOptimizable = src && typeof src === 'string' && !src.startsWith('data:') &&
-      ((baseUrl && src.startsWith(baseUrl)) || !src.startsWith('http'));
-
-  if (!isOptimizable) return src;
-
-  let path = src;
-  if (baseUrl && path.startsWith(baseUrl)) {
-    path = path.slice(baseUrl.length) || '/';
-  }
-
-  const params = new URLSearchParams();
-  params.set('url', path);
-
-  // Tratamento para remover "px" se o usuário passar string
-  if (width) {
-    const w = String(width).replace('px', '');
-    if (!isNaN(Number(w))) params.set('w', w);
-  }
-
-  if (height) {
-    const h = String(height).replace('px', '');
-    if (!isNaN(Number(h))) params.set('h', h);
-  }
-
-  if (quality) params.set('q', quality.toString());
-
-  return `/_vatts/image?${params.toString()}`;
-});
-
-const baseStyle = computed(() => {
-  return {
-    width: props.width ? (typeof props.width === 'number' ? `${props.width}px` : props.width) : 'auto',
-    height: props.height ? (typeof props.height === 'number' ? `${props.height}px` : props.height) : 'auto',
-  };
-});
-
-// Remove "px" para os atributos nativos width/height da tag img
-const cleanDimension = (val) => {
-  if (typeof val === 'string') return val.replace('px', '');
-  return val;
-};
-</script>
-
-<template>
-  <img
-      v-bind="$attrs"
-      :src="optimizedSrc"
-      :alt="alt"
-      :loading="priority ? 'eager' : 'lazy'"
-      :decoding="priority ? 'sync' : 'async'"
-      :width="cleanDimension(width)"
-      :height="cleanDimension(height)"
-      :style="baseStyle"
-      class="vatts-image"
-  />
+<!--
+ * 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.
+ -->
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  width: [Number, String],
+  height: [Number, String],
+  quality: {
+    type: Number,
+    default: 75
+  },
+  priority: {
+    type: Boolean,
+    default: false
+  },
+  alt: {
+    type: String,
+    default: ""
+  }
+});
+
+const getBaseUrl = () => {
+  if (typeof window === "undefined") return null;
+  return window.location.origin;
+};
+
+const optimizedSrc = computed(() => {
+  const baseUrl = getBaseUrl();
+  const { src, quality, width, height } = props;
+
+  // Se a imagem for Base64 (pequena) ou externa (http), não otimizamos via backend local
+  const isOptimizable = src && typeof src === 'string' && !src.startsWith('data:') &&
+      ((baseUrl && src.startsWith(baseUrl)) || !src.startsWith('http'));
+
+  if (!isOptimizable) return src;
+
+  let path = src;
+  if (baseUrl && path.startsWith(baseUrl)) {
+    path = path.slice(baseUrl.length) || '/';
+  }
+
+  const params = new URLSearchParams();
+  params.set('url', path);
+
+  // Tratamento para remover "px" se o usuário passar string
+  if (width) {
+    const w = String(width).replace('px', '');
+    if (!isNaN(Number(w))) params.set('w', w);
+  }
+
+  if (height) {
+    const h = String(height).replace('px', '');
+    if (!isNaN(Number(h))) params.set('h', h);
+  }
+
+  if (quality) params.set('q', quality.toString());
+
+  return `/_vatts/image?${params.toString()}`;
+});
+
+const baseStyle = computed(() => {
+  return {
+    width: props.width ? (typeof props.width === 'number' ? `${props.width}px` : props.width) : 'auto',
+    height: props.height ? (typeof props.height === 'number' ? `${props.height}px` : props.height) : 'auto',
+  };
+});
+
+// Remove "px" para os atributos nativos width/height da tag img
+const cleanDimension = (val) => {
+  if (typeof val === 'string') return val.replace('px', '');
+  return val;
+};
+</script>
+
+<template>
+  <img
+      v-bind="$attrs"
+      :src="optimizedSrc"
+      :alt="alt"
+      :loading="priority ? 'eager' : 'lazy'"
+      :decoding="priority ? 'sync' : 'async'"
+      :width="cleanDimension(width)"
+      :height="cleanDimension(height)"
+      :style="baseStyle"
+      class="vatts-image"
+  />
 </template>

package/dist/vue/renderer.vue.js

@@ -43,6 +43,35 @@ const path_1 = __importDefault(require("path"));
 const vue = __importStar(require("vue"));
 const vueServerRenderer = __importStar(require("@vue/server-renderer"));
 const BuildingPage_vue_1 = __importDefault(require("./BuildingPage.vue"));
+const server_error_vue_1 = __importDefault(require("./server-error.vue"));
+function getRequestUrl(req) {
+    return req?.originalUrl || req?.url;
+}
+function buildVueShellDocument(options) {
+    const { lang, title, metaTagsHtml, scriptPreloadsHtml, componentPreloadsHtml, stylesHtml, obfuscatedData, scriptsHtml, hotReloadScript, bodyInnerHtml, } = options;
+    return `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+    <meta charset="utf-8" />
+    <title>${title}</title>
+    ${metaTagsHtml}
+    ${scriptPreloadsHtml}
+    ${componentPreloadsHtml}
+    ${stylesHtml}
+</head>
+<body>
+    <script id="__vatts_data__" type="text/plain" data-h="${obfuscatedData}"></script>
+    <div id="root">${bodyInnerHtml || ''}</div>
+    ${scriptsHtml}
+    ${hotReloadScript ? `<div style="display:none">${hotReloadScript}</div>` : ''}
+</body>
+</html>`;
+}
+function stripScriptTags(html) {
+    if (!html)
+        return '';
+    return html.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, '');
+}
 // --- Helpers de Servidor (Duplicados para manter isolamento) ---
 function requireWithoutStyles(modulePath) {
     const extensions = ['.css', '.scss', '.sass', '.less', '.png', '.jpg', '.jpeg', '.gif', '.svg'];
@@ -82,18 +111,50 @@ function obfuscateData(data) {
 /**
  * Analisa o código fonte do componente para encontrar imports estáticos de assets
  * e gerar links de preload para injetar no head.
+ * * ATUALIZADO: Verifica se o arquivo existe em .vatts/assets (com hash) antes de gerar o link.
  */
 function extractComponentPreloads(componentPath) {
     if (!componentPath || !fs_1.default.existsSync(componentPath))
         return [];
+    // Localização dos assets compilados para verificação de hash
+    const assetsDir = path_1.default.join(process.cwd(), '.vatts', 'assets');
+    let availableAssets = [];
+    try {
+        if (fs_1.default.existsSync(assetsDir)) {
+            availableAssets = fs_1.default.readdirSync(assetsDir);
+        }
+    }
+    catch (e) {
+        // Silently fail if assets dir not found
+    }
+    // Função auxiliar para encontrar o arquivo real com hash
+    const findHashedAsset = (filename) => {
+        // 1. Se o arquivo existe exatamente como pedido
+        if (availableAssets.includes(filename))
+            return filename;
+        // 2. Procura por versão com hash (ex: style.css -> style.CjdCylXW.css ou da8dfae3-style.CjdCylXW.css)
+        const ext = path_1.default.extname(filename);
+        const base = path_1.default.basename(filename, ext); // "style"
+        // Filtra arquivos que terminam com a extensão correta e contêm o nome base
+        // Isso garante que pegamos o arquivo hasheado gerado pelo build
+        const match = availableAssets.find(asset => asset.endsWith(ext) && asset.includes(base));
+        return match || null;
+    };
     try {
         const content = fs_1.default.readFileSync(componentPath, 'utf8');
         const tags = new Set();
         const processPath = (fullPath) => {
             const filename = path_1.default.basename(fullPath);
-            const ext = path_1.default.extname(filename).toLowerCase();
-            // Assume estrutura flattened do Vatts em /_vatts/assets/ onde os arquivos finais residem
-            const publicUrl = `/_vatts/assets/${filename}`;
+            // VERIFICAÇÃO DE HASH:
+            // Tenta encontrar o nome real do arquivo na pasta de assets.
+            // Se não encontrar (retornar null), ignoramos o arquivo para não gerar link quebrado (404).
+            const realFilename = findHashedAsset(filename);
+            if (!realFilename) {
+                return; // Bloqueia a entrada se não tiver correspondente hash/físico
+            }
+            const ext = path_1.default.extname(realFilename).toLowerCase();
+            // Usa o nome real encontrado (com hash)
+            const publicUrl = `/_vatts/assets/${realFilename}`;
             if (['.mp4', '.webm'].includes(ext)) {
                 tags.add(`<link rel="preload" as="video" href="${publicUrl}">`);
             }
@@ -125,7 +186,8 @@ function extractComponentPreloads(componentPath) {
         const imgTagRegex = /<img\s+[^>]*src=['"]([^'"]+\.(png|jpg|jpeg|gif|svg|webp|avif))['"]/g;
         while ((match = imgTagRegex.exec(content)) !== null) {
             const src = match[1];
-            tags.add(`<link rel="preload" as="image" href="${src}">`);
+            // Para tags img src, também processamos para tentar achar a versão hash
+            processPath(src);
         }
         return Array.from(tags);
     }
@@ -378,12 +440,107 @@ async function renderVue({ req, res, route, params, allRoutes }) {
         return;
     }
     const { createSSRApp, h } = vue;
-    const { renderToNodeStream } = vueServerRenderer;
+    const { renderToNodeStream, renderToString } = vueServerRenderer;
     const { generateMetadata } = route;
     const isProduction = !req.hwebDev;
     const hotReloadManager = req.hotReloadManager;
+    let assets = null;
+    let metadata = { title: 'Vatts App' };
+    let layoutInfo = null;
+    const sendShell = async (options) => {
+        const includeScripts = options.includeScripts !== false;
+        if (!assets) {
+            if (!res.headersSent) {
+                res.statusCode = options.statusCode;
+                res.setHeader('Content-Type', 'text/html; charset=utf-8');
+                res.end(isProduction ? '' : '<h1>SSR Error</h1>');
+            }
+            return;
+        }
+        const hotReloadScript = includeScripts && !isProduction && hotReloadManager ? hotReloadManager.getClientScript() : '';
+        let metaTagsHtml = (() => {
+            try {
+                return generateMetaTags(metadata);
+            }
+            catch {
+                return '';
+            }
+        })();
+        if (!includeScripts) {
+            metaTagsHtml = stripScriptTags(metaTagsHtml);
+        }
+        const htmlLang = metadata.language || 'pt-BR';
+        const title = metadata.title || 'Vatts.js';
+        const scriptPreloadsHtml = includeScripts
+            ? assets.scripts.map((src) => `<link rel="modulepreload" href="${src}">`).join('\n')
+            : '';
+        const componentPreloadsHtml = includeScripts
+            ? (() => {
+                try {
+                    const componentPreloads = extractComponentPreloads(route.componentPath ? path_1.default.resolve(process.cwd(), route.componentPath) : '');
+                    return componentPreloads.join('\n');
+                }
+                catch {
+                    return '';
+                }
+            })()
+            : '';
+        const stylesHtml = assets.styles.map((styleUrl) => `<link rel="stylesheet" href="${styleUrl}">`).join('\n');
+        const scriptsHtml = includeScripts
+            ? assets.scripts.map((src) => `<script type="module" src="${src}"></script>`).join('\n')
+            : '';
+        const obfuscatedData = (() => {
+            try {
+                return obfuscateData({
+                    routes: [],
+                    initialComponentPath: route.componentPath,
+                    initialParams: params,
+                });
+            }
+            catch {
+                return '';
+            }
+        })();
+        res.statusCode = options.statusCode;
+        res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.end(buildVueShellDocument({
+            lang: htmlLang,
+            title,
+            metaTagsHtml,
+            scriptPreloadsHtml,
+            componentPreloadsHtml,
+            stylesHtml,
+            obfuscatedData,
+            scriptsHtml,
+            hotReloadScript,
+            bodyInnerHtml: options.bodyInnerHtml,
+        }));
+    };
+    const sendSsrError = async (error) => {
+        if (isProduction) {
+            await sendShell({ bodyInnerHtml: '', statusCode: 200, includeScripts: true });
+            return;
+        }
+        try {
+            const ErrorRoot = {
+                setup() {
+                    return () => h(server_error_vue_1.default, {
+                        error,
+                        requestUrl: getRequestUrl(req),
+                        hint: 'O SSR falhou ao renderizar essa rota. Veja o erro abaixo.',
+                    });
+                },
+            };
+            const errorApp = createSSRApp(ErrorRoot);
+            const errorHtml = await renderToString(errorApp);
+            await sendShell({ bodyInnerHtml: errorHtml, statusCode: 500, includeScripts: false });
+        }
+        catch {
+            await sendShell({ bodyInnerHtml: '<h1>SSR Error</h1>', statusCode: 500, includeScripts: false });
+        }
+    };
     try {
-        const assets = getBuildAssets(req);
+        assets = getBuildAssets(req);
         if (!assets || assets.scripts.length === 0) {
             const RootComponent = {
                 setup() {
@@ -404,13 +561,12 @@ async function renderVue({ req, res, route, params, allRoutes }) {
             return;
         }
         // 1. Layout (Carrega e Corrige se necessário)
-        const layoutInfo = (0, router_1.getLayout)();
+        layoutInfo = (0, router_1.getLayout)();
         let LayoutComponent = null;
         if (layoutInfo) {
             LayoutComponent = ensureVueComponent(null, path_1.default.resolve(process.cwd(), layoutInfo.componentPath));
         }
         // 2. Metadata
-        let metadata = { title: 'Vatts App' };
         if (layoutInfo && layoutInfo.metadata) {
             metadata = { ...metadata, ...layoutInfo.metadata };
         }
@@ -465,47 +621,35 @@ async function renderVue({ req, res, route, params, allRoutes }) {
             }
         };
         const app = createSSRApp(RootComponent);
-        // 5. Stream
-        const stream = renderToNodeStream(app);
-        res.setHeader('Content-Type', 'text/html');
-        res.write(`<!DOCTYPE html>
-<html lang="${htmlLang}">
-<head>
-    <meta charset="utf-8" />
-    <title>${metadata.title || 'Vatts.js'}</title>
-    ${metaTagsHtml}
-    ${scriptPreloadsHtml}
-    ${componentPreloadsHtml}
-    ${stylesHtml}
-</head>
-<body>
-    <script id="__vatts_data__" type="text/plain" data-h="${obfuscatedData}"></script>
-    <div id="root">`);
-        stream.pipe(res, { end: false });
-        stream.on('end', () => {
-            res.write(`</div>
-    ${scriptsHtml}
-    ${hotReloadScript ? `<div style="display:none">${hotReloadScript}</div>` : ''}
-</body>
-</html>`);
-            res.end();
-        });
-        stream.on('error', (err) => {
-            console.error('Vue Streaming Error:', err);
-            if (!res.headersSent) {
-                res.statusCode = 500;
-                res.end('Internal Server Error');
-            }
-            else {
-                res.end();
+        // 5. Render (usa renderToString para evitar HTML parcial e permitir fallback)
+        try {
+            const bodyInnerHtml = await renderToString(app);
+            res.statusCode = 200;
+            res.setHeader('Content-Type', 'text/html; charset=utf-8');
+            res.end(buildVueShellDocument({
+                lang: htmlLang,
+                title: metadata.title || 'Vatts.js',
+                metaTagsHtml,
+                scriptPreloadsHtml,
+                componentPreloadsHtml,
+                stylesHtml,
+                obfuscatedData,
+                scriptsHtml,
+                hotReloadScript,
+                bodyInnerHtml,
+            }));
+        }
+        catch (err) {
+            if (!isProduction) {
+                console.error('Vue SSR Error:', err);
             }
-        });
+            await sendSsrError(err);
+        }
     }
     catch (err) {
-        console.error("Critical Vue Render Error:", err);
-        if (!res.headersSent) {
-            res.statusCode = 500;
-            res.end('Internal Server Error');
+        if (!isProduction) {
+            console.error("Critical Vue Render Error:", err);
         }
+        await sendSsrError(err);
     }
 }