vatts 1.2.0-alpha.1 → 1.2.0-alpha.2

package/dist/vue/App.vue

@@ -24,32 +24,31 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, computed, onMounted, onUnmounted, shallowRef, watch, nextTick } from 'vue';
-import { router } from '../client/clientRouter'; // Assumindo que o router é framework-agnostic
-import DevIndicator from './DevIndicator.vue'; // .vue necessário
-import ErrorModal from './ErrorModal.vue'; // Se for .vue, ajustar import
-import type { VattsBuildError } from './ErrorModal.vue';
-import type { Metadata } from "../types";
-
-// --- Props (Vêm do entry.client.ts) ---
-const props = defineProps<{
-  componentMap: Record<string, any>;
-  routes: { pattern: string; componentPath: string; metadata?: Metadata }[];
-  initialComponentPath: string;
-  initialParams: any;
-  layoutComponent?: any;
-}>();
+import { router } from '../client/clientRouter';
+import DevIndicator from './DevIndicator.vue';
+import ErrorModal from './ErrorModal.vue';
+
+// --- Props ---
+const props = defineProps({
+  componentMap: Object,
+  routes: Array,
+  initialComponentPath: String,
+  initialParams: null, // Aceita qualquer tipo
+  layoutComponent: null // Aceita componente ou null
+});
 
 // --- Estado ---
 const hmrTimestamp = ref(Date.now());
-const buildError = ref<VattsBuildError | null>((window as any).__VATTS_BUILD_ERROR__ || null);
-const isErrorOpen = ref(!!(window as any).__VATTS_BUILD_ERROR__);
+// Removemos as tipagens e asserções "as any" diretas onde não são necessárias em JS
+const buildError = ref(window.__VATTS_BUILD_ERROR__ || null);
+const isErrorOpen = ref(!!window.__VATTS_BUILD_ERROR__);
 const isDev = process.env.NODE_ENV !== 'production';
 
 // --- HMR & Error Handling ---
-const handleBuildError = (ev: any) => {
-  const e = ev?.detail as VattsBuildError;
+const handleBuildError = (ev) => {
+  const e = ev?.detail;
   buildError.value = e || null;
   isErrorOpen.value = true;
 };
@@ -70,7 +69,7 @@ const copyBuildError = async () => {
 };
 
 // --- Roteamento ---
-const findRouteForPath = (path: string) => {
+const findRouteForPath = (path) => {
   for (const route of props.routes) {
     const regexPattern = route.pattern
         .replace(/\[\[\.\.\.(\w+)\]\]/g, '(?<$1>.+)?')
@@ -92,9 +91,8 @@ const findRouteForPath = (path: string) => {
 };
 
 // Estado da Rota
-// shallowRef é melhor para componentes para evitar reatividade profunda desnecessária no objeto do componente
-const CurrentPageComponent = shallowRef<any>(null);
-const params = ref<any>({});
+const CurrentPageComponent = shallowRef(null);
+const params = ref({});
 
 const updateRoute = () => {
   const currentPath = window.location.pathname.replace("index.html", '');
@@ -116,17 +114,16 @@ const updateRoute = () => {
 // --- Computed para resolver o conteúdo final (404 vs Página) ---
 const resolvedContent = computed(() => {
   if (!CurrentPageComponent.value || props.initialComponentPath === '__404__') {
-    const NotFoundComponent = (window as any).__VATTS_NOT_FOUND__;
+    const NotFoundComponent = window.__VATTS_NOT_FOUND__;
     if (NotFoundComponent) return NotFoundComponent;
 
-    const DefaultNotFound = (window as any).__VATTS_DEFAULT_NOT_FOUND__;
+    const DefaultNotFound = window.__VATTS_DEFAULT_NOT_FOUND__;
     return DefaultNotFound || 'div'; // Fallback seguro
   }
   return CurrentPageComponent.value;
 });
 
 const contentProps = computed(() => {
-  // Se for 404, talvez não queira passar params, mas mantendo a lógica original:
   if (!CurrentPageComponent.value) return {};
   return { params: params.value };
 });
@@ -141,42 +138,42 @@ onMounted(() => {
   updateRoute();
 
   // Listeners de Build
-  window.addEventListener('vatts:build-error' as any, handleBuildError);
-  window.addEventListener('vatts:build-ok' as any, handleBuildOk);
+  window.addEventListener('vatts:build-error', handleBuildError);
+  window.addEventListener('vatts:build-ok', handleBuildOk);
 
   // Listeners de Rota
   window.addEventListener('popstate', updateRoute);
   const unsubscribeRouter = router.subscribe(updateRoute);
 
   // HMR Listener
-  (window as any).__HWEB_HMR__ = true;
-  const handleHMRUpdate = (event: CustomEvent) => {
+  window.__HWEB_HMR__ = true;
+  const handleHMRUpdate = (event) => {
     const { file, timestamp } = event.detail;
     const fileName = file ? file.split('/').pop()?.split('\\').pop() : 'unknown';
     console.log('🔥 HMR: Component Update Triggered', fileName);
 
     try {
       hmrTimestamp.value = timestamp;
-      (window as any).__HMR_SUCCESS__ = true;
+      window.__HMR_SUCCESS__ = true;
       setTimeout(() => {
-        (window as any).__HMR_SUCCESS__ = false;
+        window.__HMR_SUCCESS__ = false;
       }, 3000);
 
       // Força update da rota caso o componente tenha mudado
       updateRoute();
     } catch (error) {
       console.error('❌ HMR Error:', error);
-      (window as any).__HMR_SUCCESS__ = false;
+      window.__HMR_SUCCESS__ = false;
     }
   };
-  window.addEventListener('hmr:component-update' as any, handleHMRUpdate);
+  window.addEventListener('hmr:component-update', handleHMRUpdate);
 
   // Cleanup
   onUnmounted(() => {
-    window.removeEventListener('vatts:build-error' as any, handleBuildError);
-    window.removeEventListener('vatts:build-ok' as any, handleBuildOk);
+    window.removeEventListener('vatts:build-error', handleBuildError);
+    window.removeEventListener('vatts:build-ok', handleBuildOk);
     window.removeEventListener('popstate', updateRoute);
-    window.removeEventListener('hmr:component-update' as any, handleHMRUpdate);
+    window.removeEventListener('hmr:component-update', handleHMRUpdate);
     unsubscribeRouter();
   });
 });

package/dist/vue/BuildingPage.vue

@@ -1,68 +1,15 @@
 <script setup>
-    import { onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
-    const version = ref("1.0.0");
+const version = ref("1.0.0");
 
-    try {
-    // Em um ambiente Vue/Vite, 'require' geralmente não está disponível no runtime do browser.
-    // Se precisar importar o package.json, use: import pkg from '../package.json';
-    // version.value = require("../package.json").version;
+try {
+  version.value = require("../../package.json").version;
 } catch (e) {}
 
-    onMounted(() => {
-    setTimeout(() => {
-        window.location.reload();
-    }, 2500);
-});
-</script>
-
-<template>
-    <div class="building-screen-body">
-        <!-- Links de fonte inseridos aqui para manter a fidelidade ao original -->
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
-
-        <div class="container">
-            <div class="build-card">
-                <div class="neon-line"></div>
-
-                <div class="content">
-                    <div class="logo-wrapper">
-                        <div class="logo-glow"></div>
-                        <img src="https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo.png" alt="Vatts Logo" />
-                    </div>
-
-                    <h1>Vatts<span>.js</span></h1>
-                    <p>Building your masterpiece...</p>
-
-                    <div class="terminal-box">
-                        <div class="term-line">
-                            <div class="term-spinner"></div>
-                            <span class="file-name">Compiling <span class="accent">src/vatts.ts</span>...</span>
-                        </div>
-                        <div class="term-line" style="opacity: 0.5">
-                            <span>✓</span>
-                            <span class="file-name">Optimizing assets</span>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="card-footer">
-                    <span>Building...</span>
-                    <div class="status-active">
-                        <div class="dot"></div>
-                        v{{ version }}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-    /* Variáveis definidas no escopo do componente */
-    .building-screen-body {
+// CSS extraído para evitar que o Vue escape caracteres como '>' ou aspas
+const cssStyles = `
+  :root {
     --bg-solid: #000000;
     --card-bg: #0a0a0a;
     /* PALETA: Monocromática estilo Next.js */
@@ -70,7 +17,9 @@
     --primary-glow: rgba(255, 255, 255, 0.1);
     --text-main: #ffffff;
     --text-muted: #64748b;
+  }
 
+  body {
     margin: 0;
     padding: 0;
     width: 100vw;
@@ -80,9 +29,9 @@
     color: var(--text-main);
     overflow: hidden;
     position: relative;
-}
+  }
 
-    .container {
+  .container {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -92,9 +41,9 @@
     align-items: center;
     width: 100%;
     pointer-events: none;
-}
+  }
 
-    .build-card {
+  .build-card {
     pointer-events: auto;
     position: relative;
     width: 100%;
@@ -108,31 +57,31 @@
     flex-direction: column;
     align-items: center;
     text-align: center;
-}
+  }
 
-    .neon-line {
+  .neon-line {
     height: 1px;
     width: 100%;
     /* Linha de luz branca/cinza */
     background: linear-gradient(90deg, transparent, #334155, #ffffff, #334155, transparent);
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
-}
+  }
 
-    .content {
+  .content {
     padding: 40px 32px;
     width: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: center;
-}
+  }
 
-    .logo-wrapper {
+  .logo-wrapper {
     position: relative;
     margin-bottom: 24px;
-}
+  }
 
-    .logo-wrapper img {
+  .logo-wrapper img {
     width: 64px;
     height: 64px;
     object-fit: contain;
@@ -140,9 +89,9 @@
     z-index: 2;
     /* Deixa a logo levemente dessaturada para combinar */
     filter: grayscale(0.5);
-}
+  }
 
-    .logo-glow {
+  .logo-glow {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -154,9 +103,9 @@
     opacity: 0.1;
     border-radius: 50%;
     animation: pulse 2s ease-in-out infinite;
-}
+  }
 
-    h1 {
+  h1 {
     margin: 0;
     font-size: 2rem;
     font-weight: 800;
@@ -164,23 +113,21 @@
     background: linear-gradient(180deg, #ffffff 0%, #475569 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    /* Fallback para browsers que não suportam text-fill-color */
-    color: #ffffff;
-}
+  }
 
-    h1 span {
+  h1 span {
     color: #475569;
     -webkit-text-fill-color: #475569;
-}
+  }
 
-    p {
+  p {
     margin: 8px 0 32px 0;
     color: var(--text-muted);
     font-size: 0.9rem;
     font-weight: 500;
-}
+  }
 
-    .terminal-box {
+  .terminal-box {
     width: 100%;
     background: rgba(255, 255, 255, 0.02);
     border: 1px solid rgba(255, 255, 255, 0.08);
@@ -194,27 +141,27 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
-}
+  }
 
-    .term-line {
+  .term-line {
     display: flex;
     align-items: center;
     gap: 8px;
-}
+  }
 
-    .term-spinner {
+  .term-spinner {
     width: 10px;
     height: 10px;
     border: 2px solid rgba(255, 255, 255, 0.1);
     border-top-color: #ffffff;
     border-radius: 50%;
     animation: spin 0.6s linear infinite;
-}
+  }
 
-    .file-name { color: #94a3b8; }
-    .accent { color: #ffffff; }
+  .file-name { color: #94a3b8; }
+  .accent { color: #ffffff; }
 
-    .card-footer {
+  .card-footer {
     width: 100%;
     padding: 12px 32px;
     background: rgba(255,255,255,0.02);
@@ -225,9 +172,9 @@
     font-size: 11px;
     color: rgba(255,255,255,0.2);
     box-sizing: border-box;
-}
+  }
 
-    .status-active {
+  .status-active {
     display: flex;
     align-items: center;
     gap: 6px;
@@ -235,22 +182,91 @@
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-}
+  }
 
-    .dot {
+  .dot {
     width: 6px;
     height: 6px;
     background-color: #ffffff;
     border-radius: 50%;
     box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
-}
+  }
 
-    @keyframes pulse {
+  @keyframes pulse {
     0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
     50% { opacity: 0.15; transform: translate(-50%, -50%) scale(1.1); }
-}
+  }
 
-    @keyframes spin {
+  @keyframes spin {
     to { transform: rotate(360deg); }
-}
-</style>
+  }
+`;
+
+// Script de reload extraído
+const clientReloadScript = `
+  setTimeout(() => {
+    window.location.reload();
+  }, 2500);
+`;
+</script>
+
+<template>
+  <html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vatts.js | Building...</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+
+    <!-- v-html garante que o CSS seja renderizado sem escape (ex: '>' permanece '>') -->
+    <style v-html="cssStyles"></style>
+  </head>
+  <body>
+  <div class="building-screen-body">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+
+    <div class="container">
+      <div class="build-card">
+        <div class="neon-line"></div>
+
+        <div class="content">
+          <div class="logo-wrapper">
+            <div class="logo-glow"></div>
+            <img src="https://raw.githubusercontent.com/mfrazlab/vatts.js/master/docs/public/logo.png" alt="Vatts Logo" />
+          </div>
+
+          <h1>Vatts<span>.js</span></h1>
+          <p>Building your application...</p>
+
+          <div class="terminal-box">
+            <div class="term-line">
+              <div class="term-spinner"></div>
+              <span class="file-name">Compiling <span class="accent">src/vatts.ts</span>...</span>
+            </div>
+            <div class="term-line" style="opacity: 0.5">
+              <span>✓</span>
+              <span class="file-name">Optimizing assets</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="card-footer">
+          <span>Building...</span>
+          <div class="status-active">
+            <div class="dot"></div>
+            v{{ version }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- v-html para o script garante que a arrow function não quebre com '&gt;' -->
+  <script v-html="clientReloadScript"></script>
+  </body>
+  </html>
+</template>

package/dist/vue/ErrorModal.vue

@@ -58,34 +58,16 @@
   </Teleport>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, computed, watch, onMounted, onUnmounted, useAttrs } from 'vue';
 
-// --- Interface Exportada para uso no App.vue ---
-export interface VattsBuildError {
-  message?: string;
-  name?: string;
-  stack?: string;
-  frame?: string;
-  id?: string;
-  plugin?: string;
-  pluginCode?: string;
-  loc?: any;
-  watchFiles?: any;
-  cause?: any;
-  ts?: number;
-}
-
 // --- Props e Emits ---
-const props = defineProps<{
-  error: VattsBuildError | null;
-  isOpen: boolean;
-}>();
+const props = defineProps({
+  error: Object,
+  isOpen: Boolean
+});
 
-const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'copy'): void;
-}>();
+const emit = defineEmits(['close', 'copy']);
 
 // Verifica se o pai (App.vue) passou um listener para @copy
 const attrs = useAttrs();
@@ -98,7 +80,7 @@ const isHoveringClose = ref(false);
 const isHoveringCopy = ref(false);
 
 // --- Lógica de Parser ANSI ---
-const ANSI_COLORS: Record<string, string> = {
+const ANSI_COLORS = {
   '30': '#475569',
   '31': '#ef4444',
   '32': '#ffffff',
@@ -110,13 +92,13 @@ const ANSI_COLORS: Record<string, string> = {
   '90': '#64748b',
 };
 
-function parseAnsi(text: string) {
+function parseAnsi(text) {
   if (!text) return [];
   const regex = /\u001b\[(\d+)(?:;\d+)*m/g;
   const result = [];
   let lastIndex = 0;
   let match;
-  let currentColor: string | null = null;
+  let currentColor = null;
 
   while ((match = regex.exec(text)) !== null) {
     const rawText = text.slice(lastIndex, match.index);
@@ -164,7 +146,7 @@ watch(() => props.isOpen, (newVal) => {
 }, { immediate: true });
 
 // Listener para tecla ESC
-const onKey = (e: KeyboardEvent) => {
+const onKey = (e) => {
   if (e.key === 'Escape' && props.isOpen) emit('close');
 };
 
@@ -182,9 +164,9 @@ onUnmounted(() => {
 const close = () => emit('close');
 const copy = () => emit('copy');
 
-// --- Estilos (Convertidos para objetos JS para Vue bind) ---
+// --- Estilos ---
 const overlayStyle = computed(() => ({
-  position: 'fixed' as const,
+  position: 'fixed',
   top: 0,
   left: 0,
   width: '100vw',
@@ -199,7 +181,7 @@ const overlayStyle = computed(() => ({
   padding: '24px',
   transition: 'all 0.3s ease',
   opacity: visible.value ? 1 : 0,
-  boxSizing: 'border-box' as const,
+  boxSizing: 'border-box',
 }));
 
 const cardStyle = computed(() => ({
@@ -207,14 +189,14 @@ const cardStyle = computed(() => ({
   maxWidth: '1080px',
   maxHeight: '90vh',
   display: 'flex',
-  flexDirection: 'column' as const,
+  flexDirection: 'column',
   background: '#0a0a0a',
   boxShadow: `0 0 0 1px rgba(255, 255, 255, 0.1), 0 50px 100px -20px rgba(0, 0, 0, 1)`,
   borderRadius: '16px',
   overflow: 'hidden',
   transform: visible.value ? 'scale(1) translateY(0)' : 'scale(0.98) translateY(10px)',
   transition: 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-  position: 'relative' as const,
+  position: 'relative',
 }));
 
 const neonLineStyle = {
@@ -261,8 +243,8 @@ const terminalContentStyle = {
   fontSize: '13px',
   lineHeight: 1.6,
   color: '#e2e8f0',
-  whiteSpace: 'pre-wrap' as const,
-  wordBreak: 'break-word' as const,
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
 };
 
 const stackContainerStyle = {
@@ -283,7 +265,7 @@ const footerStyle = {
   fontFamily: 'Inter, sans-serif'
 };
 
-const getBtnStyle = (kind: 'primary' | 'secondary', hovering: boolean) => {
+const getBtnStyle = (kind, hovering) => {
   const base = {
     padding: '8px 16px',
     borderRadius: '8px',
@@ -291,7 +273,7 @@ const getBtnStyle = (kind: 'primary' | 'secondary', hovering: boolean) => {
     fontWeight: 700,
     cursor: 'pointer',
     transition: 'all 0.2s ease',
-    textTransform: 'uppercase' as const,
+    textTransform: 'uppercase',
     letterSpacing: '0.05em',
     border: 'none',
     outline: 'none',

package/dist/vue/Link.vue

@@ -1,13 +1,14 @@
-<script setup lang="ts">
+<script setup>
 import { router } from '../client/clientRouter';
 
-interface LinkProps {
-  href: string;
-}
+const props = defineProps({
+  href: {
+    type: String,
+    required: true
+  }
+});
 
-const props = defineProps<LinkProps>();
-
-const handleClick = async (e: MouseEvent) => {
+const handleClick = async (e) => {
   e.preventDefault();
 
   // Usa o novo sistema de router

package/dist/vue/client.js

@@ -1,3 +1,4 @@
+"use strict";
 /*
  * This file is part of the Vatts.js Project.
  * Copyright (c) 2026 itsmuzin
@@ -14,11 +15,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VattsImage = exports.Image = exports.importServer = exports.router = exports.Link = void 0;
 // Este arquivo exporta apenas código seguro para o cliente (navegador)
-import Link from "./Link.vue";
-export { Link };
-export { router } from '../client/clientRouter';
+const Link_vue_1 = __importDefault(require("./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; } });
 // RPC (client-side)
-export { importServer } from '../client/rpc';
-export { default as Image } from "./image/Image.vue";
-export { default as VattsImage } from "./image/Image.vue";
+var rpc_1 = require("../client/rpc");
+Object.defineProperty(exports, "importServer", { enumerable: true, get: function () { return rpc_1.importServer; } });
+var Image_vue_1 = require("./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");
+Object.defineProperty(exports, "VattsImage", { enumerable: true, get: function () { return __importDefault(Image_vue_2).default; } });