vatts 2.2.6 → 2.3.0-canary

package/dist/vue/App.vue

@@ -1,199 +0,0 @@
-<!--
-  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.
--->
-<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}`"
-  />
-
-  <DevIndicator
-      v-if="isDev"
-      :has-build-error="!!buildError"
-      @click-build-error="isErrorOpen = true"
-  />
-
-  <ErrorModal
-      :error="buildError"
-      :is-open="isErrorOpen"
-      @close="isErrorOpen = false"
-      @copy="copyBuildError"
-  />
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted, shallowRef, watch, nextTick } from 'vue';
-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,
-  layoutComponent: null
-});
-
-// --- Estado ---
-const hmrTimestamp = ref(Date.now());
-const currentPathKey = ref(window.location.pathname); // Mantendo a correção da rota anterior
-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';
-
-// --- HMR & Error Handling ---
-const handleBuildError = (ev) => {
-  const e = ev?.detail;
-  buildError.value = e || null;
-  isErrorOpen.value = true;
-};
-
-const handleBuildOk = () => {
-  buildError.value = null;
-  isErrorOpen.value = false;
-};
-
-watch(hmrTimestamp, async (timestamp) => {
-  if (!pendingHmrReady.value || pendingHmrReady.value.timestamp !== timestamp) return;
-  await nextTick();
-  window.dispatchEvent(new CustomEvent('vatts:hmr-ready', { detail: pendingHmrReady.value }));
-  pendingHmrReady.value = null;
-});
-
-const copyBuildError = async () => {
-  try {
-    if (!buildError.value) return;
-    const payload = JSON.stringify(buildError.value, null, 2);
-    await navigator.clipboard.writeText(payload);
-  } catch {
-    // ignore
-  }
-};
-
-// --- Roteamento ---
-const findRouteForPath = (path) => {
-  for (const route of props.routes) {
-    const regexPattern = route.pattern
-        .replace(/\[\[\.\.\.(\w+)\]\]/g, '(?<$1>.+)?')
-        .replace(/\[\.\.\.(\w+)\]/g, '(?<$1>.+)')
-        .replace(/\/\[\[(\w+)\]\]/g, '(?:/(?<$1>[^/]+))?')
-        .replace(/\[\[(\w+)\]\]/g, '(?<$1>[^/]+)?')
-        .replace(/\[(\w+)\]/g, '(?<$1>[^/]+)');
-    const regex = new RegExp(`^${regexPattern}/?$`);
-    const match = path.match(regex);
-    if (match) {
-      return {
-        componentPath: route.componentPath,
-        params: match.groups || {},
-        metadata: route.metadata
-      };
-    }
-  }
-  return null;
-};
-
-// Estado da Rota
-const CurrentPageComponent = shallowRef(null);
-const params = ref({});
-
-const updateRoute = () => {
-  const currentPath = window.location.pathname.replace("index.html", '');
-
-  // Atualiza a chave para garantir re-render na mesma rota com params diferentes
-  currentPathKey.value = currentPath;
-
-  const match = findRouteForPath(currentPath);
-  if (match) {
-    CurrentPageComponent.value = props.componentMap[match.componentPath];
-    params.value = match.params;
-
-    if (match.metadata?.title != null) {
-      document.title = match.metadata.title;
-    }
-  } else {
-    CurrentPageComponent.value = null;
-    params.value = {};
-  }
-};
-
-// --- Computed ---
-const resolvedContent = computed(() => {
-  // Agora valida puramente se o componente da rota atual existe no window.location
-  if (!CurrentPageComponent.value) {
-    const NotFoundComponent = window.__VATTS_NOT_FOUND__;
-    if (NotFoundComponent) return NotFoundComponent;
-
-    const DefaultNotFound = window.__VATTS_DEFAULT_NOT_FOUND__;
-    return DefaultNotFound || 'div';
-  }
-  return CurrentPageComponent.value;
-});
-
-const contentProps = computed(() => {
-  if (!CurrentPageComponent.value) return {};
-  return { params: params.value };
-});
-
-const resolvedLayout = computed(() => {
-  return props.layoutComponent || null;
-});
-
-// --- Lifecycle ---
-onMounted(() => {
-  updateRoute();
-
-  window.addEventListener('vatts:build-error', handleBuildError);
-  window.addEventListener('vatts:build-ok', handleBuildOk);
-  window.addEventListener('popstate', updateRoute);
-
-  const unsubscribeRouter = router.subscribe(updateRoute);
-
-  window.__HWEB_HMR__ = true;
-  const handleHMRUpdate = (event) => {
-    const { file, timestamp } = event.detail;
-    try {
-      pendingHmrReady.value = { file: file || null, timestamp };
-      hmrTimestamp.value = timestamp;
-      updateRoute();
-    } catch (error) {
-      console.error('❌ HMR Error:', error);
-    }
-  };
-  window.addEventListener('hmr:component-update', handleHMRUpdate);
-
-  onUnmounted(() => {
-    window.removeEventListener('vatts:build-error', handleBuildError);
-    window.removeEventListener('vatts:build-ok', handleBuildOk);
-    window.removeEventListener('popstate', updateRoute);
-    window.removeEventListener('hmr:component-update', handleHMRUpdate);
-    unsubscribeRouter();
-  });
-});
-</script>

package/dist/vue/BuildingPage.vue

@@ -1,281 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-
-const version = ref("1.0.0");
-
-try {
-  version.value = require("../../package.json").version;
-} catch (e) {}
-
-// CSS extraído para evitar que o Vue escape caracteres como '>' ou aspas
-// ATUALIZADO: Paleta de cores alterada para Vue.js Green
-const cssStyles = `
-  :root {
-    --bg-solid: #000000;
-    --card-bg: #0a0a0a;
-    /* PALETA: Vue.js Theme */
-    --vue-green: #42b883;       /* O verde principal do Vue */
-    --vue-dark: #35495e;        /* O azul escuro secundário do Vue (para substituir cinzas escuros) */
-    --primary: #ffffff;
-    --text-main: #ffffff;
-    /* Mudei o texto mudo de cinza para um tom mais claro do verde */
-    --text-muted: #a7c4bc;
-  }
-
-  body {
-    margin: 0;
-    padding: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: var(--bg-solid);
-    font-family: 'Inter', sans-serif;
-    color: var(--text-main);
-    overflow: hidden;
-    position: relative;
-  }
-
-  .container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    pointer-events: none;
-  }
-
-  .build-card {
-    pointer-events: auto;
-    position: relative;
-    width: 100%;
-    max-width: 420px;
-    background: var(--card-bg);
-    /* Borda sutil, mudei o brilho para verde */
-    box-shadow: 0 0 0 1px rgba(66, 184, 131, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
-    border-radius: 20px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-
-  .neon-line {
-    height: 1px;
-    width: 100%;
-    /* Linha de luz: Mudei do gradiente cinza/branco para o verde Vue */
-    background: linear-gradient(90deg, transparent, var(--vue-dark), var(--vue-green), var(--vue-dark), transparent);
-    box-shadow: 0 0 15px rgba(66, 184, 131, 0.2);
-  }
-
-  .content {
-    padding: 40px 32px;
-    width: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .logo-wrapper {
-    position: relative;
-    margin-bottom: 24px;
-  }
-
-  .logo-wrapper img {
-    width: 64px;
-    height: 64px;
-    object-fit: contain;
-    position: relative;
-    z-index: 2;
-    /* Removi o filtro grayscale para a logo do Vue brilhar na cor original */
-    filter: none;
-  }
-
-  .logo-glow {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 100%;
-    /* Mudei o brilho de fundo de branco para Verde Vue */
-    background: var(--vue-green);
-    filter: blur(25px);
-    opacity: 0.2; /* Aumentei um pouco a opacidade para destacar o verde */
-    border-radius: 50%;
-    animation: pulse 2s ease-in-out infinite;
-  }
-
-  h1 {
-    margin: 0;
-    font-size: 2rem;
-    font-weight: 800;
-    letter-spacing: -0.03em;
-    /* Gradiente do texto: De branco para Verde Vue */
-    background: linear-gradient(180deg, #ffffff 0%, var(--vue-green) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
-  h1 span {
-    /* O ".js" agora é verde sólido */
-    color: var(--vue-green);
-    -webkit-text-fill-color: var(--vue-green);
-  }
-
-  p {
-    margin: 8px 0 32px 0;
-    color: var(--text-muted);
-    font-size: 0.9rem;
-    font-weight: 500;
-  }
-
-  .terminal-box {
-    width: 100%;
-    background: rgba(66, 184, 131, 0.03); /* Fundo sutilmente verde */
-    border: 1px solid rgba(66, 184, 131, 0.1); /* Borda verde sutil */
-    border-radius: 12px;
-    padding: 16px;
-    text-align: left;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.75rem;
-    /* Cor do texto base do terminal alterada de cinza para um tom claro */
-    color: var(--text-muted);
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .term-line {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .term-spinner {
-    width: 10px;
-    height: 10px;
-    border: 2px solid rgba(66, 184, 131, 0.1); /* Borda inativa verde clara */
-    border-top-color: var(--vue-green); /* Spinner ativo verde vibrante */
-    border-radius: 50%;
-    animation: spin 0.6s linear infinite;
-  }
-
-  .file-name {
-    /* Nomes de arquivo agora num tom azulado/esverdeado claro */
-    color: #8fa3b3;
-  }
-  .accent {
-    /* O destaque "src/vatts.ts" agora é Verde Vue */
-    color: var(--vue-green);
-  }
-
-  .card-footer {
-    width: 100%;
-    padding: 12px 32px;
-    background: rgba(66, 184, 131, 0.03); /* Fundo sutil verde */
-    border-top: 1px solid rgba(66, 184, 131, 0.05); /* Borda sutil verde */
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 11px;
-    color: rgba(255,255,255,0.4);
-    box-sizing: border-box;
-  }
-
-  .status-active {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    /* Texto de status e versão agora em Verde Vue */
-    color: var(--vue-green);
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .dot {
-    width: 6px;
-    height: 6px;
-    /* O ponto de status agora é Verde Vue com brilho verde */
-    background-color: var(--vue-green);
-    border-radius: 50%;
-    box-shadow: 0 0 8px var(--vue-green);
-  }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
-    50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.1); }
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-`;
-
-// 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" />
-
-    <style v-html="cssStyles"></style>
-  </head>
-  <body>
-  <div class="building-screen-body">
-    <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/murillo-frazao-cunha/vatts-docs/master/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 style="color: var(--vue-green)">✓</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>
-
-  <script v-html="clientReloadScript"></script>
-  </body>
-  </html>
-</template>