create-vitral 0.0.0-stage → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 João (joaogabriel15)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import { run } from './src/cli.js'
+
+run(process.argv.slice(2)).catch((err) => {
+  console.error(err.message)
+  process.exitCode = 1
+})

package/package.json

@@ -1,6 +1,50 @@
 {
   "name": "create-vitral",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.3.0",
+  "description": "Cria um host ou um remote vitral: npm create vitral@latest",
+  "keywords": [
+    "vitral",
+    "micro-frontend",
+    "micro-frontends",
+    "microfrontends",
+    "create",
+    "scaffold",
+    "template",
+    "cli",
+    "vite",
+    "react",
+    "vue",
+    "angular",
+    "svelte"
+  ],
+  "homepage": "https://github.com/joaogabriel15/vitral#readme",
+  "bugs": {
+    "url": "https://github.com/joaogabriel15/vitral/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/joaogabriel15/vitral.git",
+    "directory": "packages/create-vitral"
+  },
+  "license": "MIT",
+  "author": "João (https://github.com/joaogabriel15)",
+  "type": "module",
+  "bin": {
+    "create-vitral": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "src",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=20.19"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "test": "node --test test/create.test.js"
+  }
 }

package/src/cli.js

@@ -0,0 +1,53 @@
+import { createInterface } from 'node:readline/promises'
+import { create, DEFAULT_SRC, HOSTS, REMOTES } from './create.js'
+
+export const AJUDA = `Uso: npm create vitral@latest [pasta] -- [--host | --remote] [--framework nome] [--src url]
+
+  --host, --remote   o que criar
+  --framework, -f    hosts: ${HOSTS.join(', ')}
+                     remotes: ${REMOTES.join(', ')} (next, nuxt e sveltekit viram react, vue e svelte)
+  --src              vitral.json que o host carrega (padrão: ${DEFAULT_SRC})
+
+Sem as opções, o comando pergunta.`
+
+/** @param {string[]} argv */
+export function parseArgs(argv) {
+  const o = {}
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i]
+    if (a === '--host' || a === '--remote') o.kind = a.slice(2)
+    else if (a === '--framework' || a === '-f') o.framework = argv[++i]
+    else if (a === '--src') o.src = argv[++i]
+    else if (a === '--help' || a === '-h') o.help = true
+    else if (a.startsWith('-')) throw new Error(`Opção desconhecida: ${a}`)
+    else o.dir = a
+  }
+  return o
+}
+
+/**
+ * @param {string[]} argv
+ * @param {{ ask?: (q: string) => Promise<string>, log?: (m: string) => void }} [io]
+ */
+export async function run(argv, { ask, log = console.log } = {}) {
+  const o = parseArgs(argv)
+  if (o.help) return log(AJUDA)
+  let rl
+  const question = ask ?? ((q) => (rl ??= createInterface({ input: process.stdin, output: process.stdout })).question(q))
+  try {
+    o.dir ??= (await question('Pasta (meu-app): ')).trim() || 'meu-app'
+    o.kind ??= /^r/i.test(await question('Host ou remote? (h/r): ')) ? 'remote' : 'host'
+    const list = o.kind === 'host' ? HOSTS : REMOTES
+    if (!o.framework) {
+      const menu = list.map((f, i) => `${i + 1}. ${f}`).join('  ')
+      const answer = (await question(`Framework: ${menu}\n> `)).trim()
+      o.framework = list[Number(answer) - 1] ?? (answer || list[0])
+    }
+  } finally {
+    rl?.close()
+  }
+  const files = create(o)
+  log(`\nPronto: ${o.kind} ${o.framework} em ${o.dir}\n\n  cd ${o.dir}\n  npm install\n  npm run dev\n`)
+  if (o.kind === 'host') log(`O host carrega ${o.src ?? DEFAULT_SRC}. Suba o remote antes.`)
+  return files
+}

package/src/create.js

@@ -0,0 +1,108 @@
+// Gera um host ou um remote a partir de templates/. Sem dependências.
+import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, renameSync, statSync, writeFileSync } from 'node:fs'
+import { basename, join, relative, resolve, sep } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const TEMPLATES = fileURLToPath(new URL('../templates', import.meta.url))
+// vitral e create-vitral saem com a mesma versão ("fixed" no .changeset/config.json).
+const { version } = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8'))
+
+export const HOSTS = ['react', 'next', 'vue', 'nuxt', 'angular', 'sveltekit', 'solid', 'preact', 'lit', 'vanilla']
+export const REMOTES = ['react', 'vue', 'svelte', 'solid', 'preact', 'angular', 'lit', 'vanilla']
+/** Frameworks de app inteiro viram o remote do framework de componentes. */
+export const REMOTE_OF = { next: 'react', nuxt: 'vue', sveltekit: 'svelte' }
+export const DEFAULT_SRC = 'http://localhost:5174/vitral.json'
+
+const ANGULAR = ['@angular/core', '@angular/common', '@angular/compiler', '@angular/platform-browser'].map((d) => [d, '^22.0.0'])
+const ANGULAR_DEV = { '@analogjs/vite-plugin-angular': '^2.8.0', '@angular/build': '^22.0.0', '@angular/compiler-cli': '^22.0.0', typescript: '~6.0.0' }
+// fileURLToPath e não `.pathname`: no Windows e em pastas com espaço ou acento
+// `.pathname` dá "/C:/..." ou "%20" e o plugin não acha o tsconfig.
+const ANGULAR_TS = "angular({ tsconfig: fileURLToPath(new URL('./tsconfig.json', import.meta.url)) })"
+const ANGULAR_IMPORT = "import { fileURLToPath } from 'node:url'\nimport angular from '@analogjs/vite-plugin-angular'"
+
+// framework → [dependências, devDependencies, import do plugin do Vite, chamada]
+const VITE = {
+  react: [{ react: '^19.0.0', 'react-dom': '^19.0.0' }, { '@vitejs/plugin-react': '^6.0.0' }, "import react from '@vitejs/plugin-react'", 'react()'],
+  vue: [{ vue: '^3.5.0' }, { '@vitejs/plugin-vue': '^6.0.0' }, "import vue from '@vitejs/plugin-vue'", 'vue()'],
+  svelte: [{ svelte: '^5.0.0' }, { '@sveltejs/vite-plugin-svelte': '^7.0.0' }, "import { svelte } from '@sveltejs/vite-plugin-svelte'", 'svelte()'],
+  sveltekit: [{ svelte: '^5.0.0' }, { '@sveltejs/kit': '^3.0.0', '@sveltejs/vite-plugin-svelte': '^7.0.0' }, "import { sveltekit } from '@sveltejs/kit/vite'", 'sveltekit()'],
+  solid: [{ 'solid-js': '^1.9.0' }, { 'vite-plugin-solid': '^2.11.0' }, "import solid from 'vite-plugin-solid'", 'solid()'],
+  preact: [{ preact: '^10.0.0' }, { '@preact/preset-vite': '^2.10.0' }, "import preact from '@preact/preset-vite'", 'preact()'],
+  angular: [{ ...Object.fromEntries(ANGULAR), rxjs: '^7.8.0', tslib: '^2.8.0' }, ANGULAR_DEV, ANGULAR_IMPORT, ANGULAR_TS],
+  lit: [{ lit: '^3.3.0' }, {}, '', ''],
+  vanilla: [{}, {}, '', ''],
+}
+
+// Hosts fora do Vite: [dependências, devDependencies, script dev, porta]
+const APPS = {
+  next: [{ next: '^16.0.0', react: '^19.0.0', 'react-dom': '^19.0.0' }, {}, 'next dev', 3000],
+  nuxt: [{ nuxt: '^4.0.0', vue: '^3.5.0' }, {}, 'nuxt dev', 3000],
+}
+
+/**
+ * @param {{ dir: string, kind: 'host' | 'remote', framework: string, src?: string }} o
+ * @returns {string[]} arquivos criados, relativos a `dir`
+ */
+export function create({ dir, kind, framework, src = DEFAULT_SRC }) {
+  if (kind === 'remote') framework = REMOTE_OF[framework] ?? framework
+  const list = kind === 'host' ? HOSTS : REMOTES
+  if (!list.includes(framework)) throw new Error(`Template desconhecido: ${kind} ${framework}. Opções: ${list.join(', ')}.`)
+  if (existsSync(dir) && readdirSync(dir).length) throw new Error(`A pasta ${dir} não está vazia.`)
+  const name = basename(resolve(dir)).toLowerCase().replace(/[^a-z0-9-]/g, '-')
+  const app = APPS[framework]
+  const port = kind === 'remote' ? 5174 : (app?.[3] ?? 5173)
+  const vars = { __NAME__: name, __SRC__: src, __PORT__: String(port) }
+
+  mkdirSync(dir, { recursive: true })
+  copy(join(TEMPLATES, kind, framework), dir)
+  // index.html e e2e comuns. Next, Nuxt e SvelteKit têm a própria página.
+  const ownHtml = app || framework === 'sveltekit'
+  copy(join(TEMPLATES, kind, '_base'), dir, (f) => !ownHtml || !f.endsWith('.html'))
+  copy(join(TEMPLATES, '_comum'), dir)
+  renameSync(join(dir, '_gitignore'), join(dir, '.gitignore'))
+
+  const [deps, dev, imp, call] = app ? [app[0], app[1]] : VITE[framework]
+  const pkg = {
+    name,
+    version: '0.0.0',
+    private: true,
+    type: 'module',
+    scripts: { dev: app ? app[2] : 'vite', build: app ? app[2].replace('dev', 'build') : 'vite build', 'test:e2e': 'playwright test' },
+    dependencies: { vitral: `^${version}`, ...deps },
+    devDependencies: { ...dev, ...(app ? {} : { vite: '^8.0.0' }), '@playwright/test': '^1.56.0' },
+  }
+  writeFileSync(join(dir, 'package.json'), JSON.stringify(pkg, null, 2) + '\n')
+  if (!app) writeFileSync(join(dir, 'vite.config.js'), viteConfig(kind, framework, imp, call))
+
+  const files = walk(dir).map((f) => relative(dir, f).split(sep).join('/'))
+  const main = files.find((f) => /^src\/main\./.test(f))
+  for (const f of files) {
+    const path = join(dir, f)
+    const text = readFileSync(path, 'utf8')
+    const out = text.replace(/__[A-Z]+__/g, (k) => (k === '__MAIN__' ? `/${main}` : (vars[k] ?? k)))
+    if (out !== text) writeFileSync(path, out)
+  }
+  return files.sort()
+}
+
+function viteConfig(kind, framework, imp, call) {
+  const remote = kind === 'remote'
+  const imports = ["import { defineConfig } from 'vite'", imp, remote && "import vitral from 'vitral/vite'"].filter(Boolean)
+  const plugins = `  plugins: [${[call, remote && 'vitral()'].filter(Boolean).join(', ')}],`
+  const body = remote
+    ? `  // O remote é servido de qualquer pasta da CDN; em dev, na porta 5174.\n  base: './',\n${plugins}\n  server: { port: 5174 },`
+    : framework === 'vanilla' || framework === 'lit'
+      ? // `vitral/element` é importado dinamicamente: sem isto o Vite só o descobre
+        // depois de abrir a página e a recarrega no meio do carregamento.
+        `${plugins}\n  optimizeDeps: { include: ['vitral/auto', 'vitral/element'] },`
+      : plugins
+  return `${imports.join('\n')}\n\nexport default defineConfig({\n${body}\n})\n`
+}
+
+function copy(from, to, filter = () => true) {
+  if (existsSync(from)) cpSync(from, to, { recursive: true, filter: (f) => filter(f) })
+}
+
+function walk(dir) {
+  return readdirSync(dir).flatMap((f) => (statSync(join(dir, f)).isDirectory() ? walk(join(dir, f)) : [join(dir, f)]))
+}

package/templates/_comum/_gitignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.next
+.nuxt
+.output
+.svelte-kit
+test-results
+playwright-report

package/templates/_comum/playwright.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from '@playwright/test'
+
+// Rode uma vez: npx playwright install chromium
+export default defineConfig({
+  testDir: 'e2e',
+  use: { baseURL: 'http://localhost:__PORT__' },
+  webServer: { command: 'npm run dev', url: 'http://localhost:__PORT__', reuseExistingServer: true },
+})

package/templates/host/_base/e2e/host.spec.js

@@ -0,0 +1,8 @@
+import { expect, test } from '@playwright/test'
+
+// Suba o remote antes: npm run dev na pasta dele (__SRC__).
+test('o host mostra o remote', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.getByRole('heading', { level: 1 })).toBeVisible()
+  await expect(page.getByRole('heading', { name: 'Olá, host' })).toBeVisible()
+})

package/templates/host/_base/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8" />
+    <title>__NAME__</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="__MAIN__"></script>
+  </body>
+</html>

package/templates/host/angular/src/main.ts

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'
+import { bootstrapApplication } from '@angular/platform-browser'
+import 'vitral/auto'
+
+@Component({
+  selector: 'app-root',
+  // <vitral-remote> é um Web Component: o Angular só precisa deixar passar.
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <main>
+      <h1>Host Angular</h1>
+      <vitral-remote src="__SRC__" [props]="{ nome: 'host' }"></vitral-remote>
+    </main>
+  `,
+})
+class App {}
+
+document.getElementById('app')!.append(document.createElement('app-root'))
+bootstrapApplication(App)

package/templates/host/angular/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "useDefineForClassFields": false,
+    "skipLibCheck": true,
+    "lib": ["ES2022", "DOM"]
+  },
+  "files": ["src/main.ts"],
+  "angularCompilerOptions": { "strictTemplates": true }
+}

package/templates/host/lit/src/main.js

@@ -0,0 +1,13 @@
+import { LitElement, html } from 'lit'
+import 'vitral/auto'
+
+class HostApp extends LitElement {
+  render() {
+    return html`<main>
+      <h1>Host Lit</h1>
+      <vitral-remote src="__SRC__" .props=${{ nome: 'host' }}></vitral-remote>
+    </main>`
+  }
+}
+customElements.define('host-app', HostApp)
+document.getElementById('app').append(new HostApp())

package/templates/host/next/app/layout.jsx

@@ -0,0 +1,9 @@
+export const metadata = { title: '__NAME__' }
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="pt-BR">
+      <body>{children}</body>
+    </html>
+  )
+}

package/templates/host/next/app/page.jsx

@@ -0,0 +1,11 @@
+// <Remote> já é 'use client': renderiza o fallback no servidor e monta no cliente.
+import { Remote } from 'vitral/react'
+
+export default function Page() {
+  return (
+    <main>
+      <h1>Host Next</h1>
+      <Remote src="__SRC__" props={{ nome: 'host' }} fallback={<p>Carregando…</p>} />
+    </main>
+  )
+}

package/templates/host/nuxt/app/app.vue

@@ -0,0 +1,13 @@
+<!-- <VitralRemote> renderiza o fallback no servidor e monta no cliente. -->
+<script setup>
+import { VitralRemote } from 'vitral/vue'
+</script>
+
+<template>
+  <main>
+    <h1>Host Nuxt</h1>
+    <VitralRemote src="__SRC__" :props="{ nome: 'host' }">
+      <template #fallback><p>Carregando…</p></template>
+    </VitralRemote>
+  </main>
+</template>

package/templates/host/nuxt/nuxt.config.ts

@@ -0,0 +1,4 @@
+export default defineNuxtConfig({
+  compatibilityDate: '2026-10-01',
+  devtools: { enabled: false },
+})

package/templates/host/preact/src/main.jsx

@@ -0,0 +1,10 @@
+import { render } from 'preact'
+import { Remote } from 'vitral/preact'
+
+render(
+  <main>
+    <h1>Host Preact</h1>
+    <Remote src="__SRC__" props={{ nome: 'host' }} fallback={<p>Carregando…</p>} />
+  </main>,
+  document.getElementById('app'),
+)

package/templates/host/react/src/main.jsx

@@ -0,0 +1,9 @@
+import { createRoot } from 'react-dom/client'
+import { Remote } from 'vitral/react'
+
+createRoot(document.getElementById('app')).render(
+  <main>
+    <h1>Host React</h1>
+    <Remote src="__SRC__" props={{ nome: 'host' }} fallback={<p>Carregando…</p>} />
+  </main>,
+)

package/templates/host/solid/src/main.jsx

@@ -0,0 +1,12 @@
+import { render } from 'solid-js/web'
+import { Remote } from 'vitral/solid'
+
+render(
+  () => (
+    <main>
+      <h1>Host Solid</h1>
+      <Remote src="__SRC__" props={{ nome: 'host' }} fallback={<p>Carregando…</p>} />
+    </main>
+  ),
+  document.getElementById('app'),
+)

package/templates/host/sveltekit/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8" />
+    <title>__NAME__</title>
+    %sveltekit.head%
+  </head>
+  <body>
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

package/templates/host/sveltekit/src/routes/+page.svelte

@@ -0,0 +1,9 @@
+<!-- A action monta o remote só no navegador; no servidor fica a div vazia. -->
+<script>
+  import { remote } from 'vitral/svelte'
+</script>
+
+<main>
+  <h1>Host SvelteKit</h1>
+  <div use:remote={{ src: '__SRC__', props: { nome: 'host' } }}></div>
+</main>

package/templates/host/vanilla/src/main.js

@@ -0,0 +1,8 @@
+import 'vitral/auto'
+
+document.getElementById('app').innerHTML = `
+  <main>
+    <h1>Host JS</h1>
+    <vitral-remote src="__SRC__" props='{"nome":"host"}'></vitral-remote>
+  </main>
+`

package/templates/host/vue/src/App.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { VitralRemote } from 'vitral/vue'
+</script>
+
+<template>
+  <main>
+    <h1>Host Vue</h1>
+    <VitralRemote src="__SRC__" :props="{ nome: 'host' }">
+      <template #fallback><p>Carregando…</p></template>
+    </VitralRemote>
+  </main>
+</template>

package/templates/host/vue/src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/templates/remote/_base/e2e/remote.spec.js

@@ -0,0 +1,8 @@
+import { expect, test } from '@playwright/test'
+
+test('o remote monta e responde ao clique', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.getByRole('heading', { name: 'Olá, dev' })).toBeVisible()
+  await page.getByRole('button').click()
+  await expect(page.getByRole('button')).toHaveText('Cliques: 1')
+})

package/templates/remote/_base/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8" />
+    <title>__NAME__</title>
+    <script type="module">
+      import 'vitral/auto'
+    </script>
+  </head>
+  <body>
+    <!-- Só para desenvolver: monta o remote como um host faria. -->
+    <vitral-remote src="/vitral.json" props='{"nome":"dev"}'></vitral-remote>
+  </body>
+</html>

package/templates/remote/angular/src/App.ts

@@ -0,0 +1,16 @@
+import { Component, input, signal } from '@angular/core'
+
+// O plugin vitral embrulha o export default: não precisa de adaptador.
+@Component({
+  selector: 'app-remote',
+  template: `
+    <section>
+      <h2>Olá, {{ nome() }}</h2>
+      <button (click)="cliques.set(cliques() + 1)">Cliques: {{ cliques() }}</button>
+    </section>
+  `,
+})
+export default class App {
+  nome = input('mundo')
+  cliques = signal(0)
+}

package/templates/remote/angular/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "useDefineForClassFields": false,
+    "skipLibCheck": true,
+    "lib": ["ES2022", "DOM"]
+  },
+  "files": ["src/App.ts"],
+  "angularCompilerOptions": { "strictTemplates": true }
+}

package/templates/remote/lit/src/App.js

@@ -0,0 +1,19 @@
+import { LitElement, html } from 'lit'
+
+// O plugin vitral registra a tag e embrulha a classe: não precisa de adaptador.
+export default class App extends LitElement {
+  static properties = { nome: {}, cliques: { state: true } }
+
+  constructor() {
+    super()
+    this.nome = 'mundo'
+    this.cliques = 0
+  }
+
+  render() {
+    return html`<section>
+      <h2>Olá, ${this.nome}</h2>
+      <button @click=${() => this.cliques++}>Cliques: ${this.cliques}</button>
+    </section>`
+  }
+}

package/templates/remote/preact/src/App.jsx

@@ -0,0 +1,12 @@
+import { useState } from 'preact/hooks'
+
+// O plugin vitral embrulha o export default: não precisa de adaptador.
+export default function App({ nome = 'mundo' }) {
+  const [cliques, setCliques] = useState(0)
+  return (
+    <section>
+      <h2>Olá, {nome}</h2>
+      <button onClick={() => setCliques(cliques + 1)}>Cliques: {cliques}</button>
+    </section>
+  )
+}

package/templates/remote/react/src/App.jsx

@@ -0,0 +1,12 @@
+import { useState } from 'react'
+
+// O plugin vitral embrulha o export default: não precisa de adaptador.
+export default function App({ nome = 'mundo' }) {
+  const [cliques, setCliques] = useState(0)
+  return (
+    <section>
+      <h2>Olá, {nome}</h2>
+      <button onClick={() => setCliques(cliques + 1)}>Cliques: {cliques}</button>
+    </section>
+  )
+}

package/templates/remote/solid/src/App.jsx

@@ -0,0 +1,12 @@
+import { createSignal } from 'solid-js'
+
+// O plugin vitral embrulha o export default: não precisa de adaptador.
+export default function App(props) {
+  const [cliques, setCliques] = createSignal(0)
+  return (
+    <section>
+      <h2>Olá, {props.nome ?? 'mundo'}</h2>
+      <button onClick={() => setCliques(cliques() + 1)}>Cliques: {cliques()}</button>
+    </section>
+  )
+}

package/templates/remote/svelte/src/App.svelte

@@ -0,0 +1,10 @@
+<!-- O plugin vitral embrulha o export default: não precisa de adaptador. -->
+<script>
+  let { nome = 'mundo' } = $props()
+  let cliques = $state(0)
+</script>
+
+<section>
+  <h2>Olá, {nome}</h2>
+  <button onclick={() => cliques++}>Cliques: {cliques}</button>
+</section>

package/templates/remote/vanilla/src/App.js

@@ -0,0 +1,12 @@
+import { component, html } from 'vitral'
+
+// Remote sem framework: component() já tem mount/update/unmount.
+export default component({
+  state: { cliques: 0 },
+  render: ({ nome = 'mundo' }, state) => html`
+    <section>
+      <h2>Olá, ${nome}</h2>
+      <button onclick=${() => state.cliques++}>Cliques: ${state.cliques}</button>
+    </section>
+  `,
+})

package/templates/remote/vue/src/App.vue

@@ -0,0 +1,14 @@
+<!-- O plugin vitral embrulha o export default: não precisa de adaptador. -->
+<script setup>
+import { ref } from 'vue'
+
+defineProps({ nome: { type: String, default: 'mundo' } })
+const cliques = ref(0)
+</script>
+
+<template>
+  <section>
+    <h2>Olá, {{ nome }}</h2>
+    <button @click="cliques++">Cliques: {{ cliques }}</button>
+  </section>
+</template>

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.