vatts 2.2.6 → 2.3.0-canary.1

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

@@ -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 → frameworks/vue/components}/image/Image.vue

@@ -1,129 +1,129 @@
-<!--
- * 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: rawSrc, quality, width, height } = props;
-
-  // Normaliza o prop `src` primeiro para evitar o erro de inicialização
-  const src = (rawSrc && typeof rawSrc === 'string') ? rawSrc : (rawSrc && typeof rawSrc === 'object' ? (rawSrc.src || rawSrc.default || String(rawSrc)) : rawSrc);
-
-  // Agora a verificação do valor normalizado funciona perfeitamente
-  if(!src || (typeof src === "object" && src && (src.length === 0 || Object.keys(src).length === 0))) {
-    return null;
-  }
-
-  // Detecta se estamos em modo de export estático (SSG). Neste caso o endpoint de otimização não estará disponível
-  const isExportMode =
-      (
-          typeof window !== 'undefined' &&
-          (
-              window.__VATTS_MODE__ === 'export' ||
-              (window.__VATTS && window.__VATTS.mode === 'export') ||
-              window.__VATTS_EXPORT__ === true
-          )
-      ) ||
-      (
-          typeof process !== 'undefined' &&
-          process.env?.VATTS_MODE === 'exported'
-      );
-  // Se a imagem for Base64 (pequena) ou externa (http), ou se estamos em modo export, não otimizamos via backend local
-  const isOptimizable = src && typeof src === 'string' && !src.startsWith('data:') && ((baseUrl && src.startsWith(baseUrl)) || !src.startsWith('http')) && !isExportMode;
-
-  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-if="optimizedSrc !== null"
-      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: rawSrc, quality, width, height } = props;
+
+  // Normaliza o prop `src` primeiro para evitar o erro de inicialização
+  const src = (rawSrc && typeof rawSrc === 'string') ? rawSrc : (rawSrc && typeof rawSrc === 'object' ? (rawSrc.src || rawSrc.default || String(rawSrc)) : rawSrc);
+
+  // Agora a verificação do valor normalizado funciona perfeitamente
+  if(!src || (typeof src === "object" && src && (src.length === 0 || Object.keys(src).length === 0))) {
+    return null;
+  }
+
+  // Detecta se estamos em modo de export estático (SSG). Neste caso o endpoint de otimização não estará disponível
+  const isExportMode =
+      (
+          typeof window !== 'undefined' &&
+          (
+              window.__VATTS_MODE__ === 'export' ||
+              (window.__VATTS && window.__VATTS.mode === 'export') ||
+              window.__VATTS_EXPORT__ === true
+          )
+      ) ||
+      (
+          typeof process !== 'undefined' &&
+          process.env?.VATTS_MODE === 'exported'
+      );
+  // Se a imagem for Base64 (pequena) ou externa (http), ou se estamos em modo export, não otimizamos via backend local
+  const isOptimizable = src && typeof src === 'string' && !src.startsWith('data:') && ((baseUrl && src.startsWith(baseUrl)) || !src.startsWith('http')) && !isExportMode;
+
+  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-if="optimizedSrc !== null"
+      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/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);
+}