@zackt/create-ztweb 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 techzt13
+
+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/README.md

@@ -0,0 +1,133 @@
+# create-ztweb
+
+Scaffold a new **ztweb** project — a Vue 3 + Vite framework using `.zweb` file extensions.
+
+## What is ztweb?
+
+**ztweb** is a Vue 3 + Vite scaffolding tool that uses `.zweb` Single File Components instead of `.vue` files. `.zweb` files have the exact same syntax as Vue SFCs (`<template>`, `<script setup>`, `<style>` blocks), but use a custom file extension and are compiled by the included `vite-plugin-zweb` plugin.
+
+## Usage
+
+```bash
+# Using npm
+npm create ztweb@latest
+
+# Or specify a project name directly
+npm create ztweb@latest my-app
+
+# Using pnpm
+pnpm create ztweb
+
+# Using yarn
+yarn create ztweb
+```
+
+Then follow the prompts!
+
+Once scaffolded, run:
+
+```bash
+cd my-app
+npm install
+npm run dev
+```
+
+Your app will be running at `http://localhost:5173`
+
+## What Gets Scaffolded
+
+The CLI creates a complete Vue 3 + Vite project with:
+
+- **Vue 3** with Composition API (`<script setup>`)
+- **Vite 5** for blazing fast dev server and builds
+- **`.zweb` files** instead of `.vue` files
+- **vite-plugin-zweb** — a custom Vite plugin that compiles `.zweb` SFCs using `@vue/compiler-sfc`
+- Hot Module Replacement (HMR) for `.zweb` files
+- Support for `<style scoped>`, template expressions, directives, etc.
+- Sample components to get you started
+
+## How `.zweb` Files Work
+
+`.zweb` files are **Single File Components** with identical syntax to `.vue` files:
+
+```html
+<script setup>
+import { ref } from 'vue'
+const count = ref(0)
+</script>
+
+<template>
+  <button @click="count++">{{ count }}</button>
+</template>
+
+<style scoped>
+button { color: #42b883; }
+</style>
+```
+
+The only difference is the file extension. The `vite-plugin-zweb` plugin hooks into Vite's transform pipeline and uses Vue's official `@vue/compiler-sfc` to compile `.zweb` files into JavaScript modules.
+
+## Project Structure
+
+```
+my-app/
+├── index.html
+├── package.json
+├── vite.config.js
+├── jsconfig.json
+├── public/
+│   └── favicon.ico
+├── src/
+│   ├── main.js
+│   ├── App.zweb           # Main app component
+│   ├── style.css
+│   ├── assets/
+│   │   └── logo.svg
+│   └── components/
+│       └── HelloWorld.zweb
+└── vite-plugin-zweb/      # Custom Vite plugin (bundled locally)
+    ├── package.json
+    └── index.js
+```
+
+## Development Scripts
+
+```bash
+npm run dev      # Start dev server
+npm run build    # Build for production
+npm run preview  # Preview production build
+```
+
+## Contributing to create-ztweb
+
+To develop and test the CLI locally:
+
+```bash
+# Clone the repo
+git clone https://github.com/techzt13/ztweb.git
+cd ztweb
+
+# Install dependencies
+npm install
+
+# Link it globally for testing
+npm link
+
+# Test scaffolding
+create-ztweb my-test-app
+
+# Test the scaffolded app
+cd my-test-app
+npm install
+npm run dev
+```
+
+## License
+
+MIT
+
+## Links
+
+- [GitHub Repository](https://github.com/techzt13/ztweb)
+- [Vue.js Documentation](https://vuejs.org/)
+- [Vite Documentation](https://vitejs.dev/)

package/bin/create-ztweb.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+import('../src/index.js').then(({ default: init }) => {
+  init().catch((e) => {
+    console.error(e)
+    process.exit(1)
+  })
+})

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@zackt/create-ztweb",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Scaffold a new ztweb (Vue + Vite) project with .zweb file support",
+  "keywords": [
+    "ztweb",
+    "vue",
+    "vite",
+    "scaffold",
+    "cli",
+    "zweb"
+  ],
+  "license": "MIT",
+  "bin": {
+    "create-ztweb": "bin/create-ztweb.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "template",
+    "vite-plugin-zweb"
+  ],
+  "dependencies": {
+    "fs-extra": "^11.2.0",
+    "handlebars": "^4.7.8",
+    "kolorist": "^1.8.0",
+    "minimist": "^1.2.8",
+    "prompts": "^2.4.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/techzt13/ztweb.git"
+  }
+}

package/src/index.js

@@ -0,0 +1,636 @@
+import fs from 'fs-extra'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import prompts from 'prompts'
+import minimist from 'minimist'
+import { red, green, bold, cyan } from 'kolorist'
+import Handlebars from 'handlebars'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// Register Handlebars helper for equality checks
+Handlebars.registerHelper('eq', (a, b) => a === b)
+
+async function init() {
+  const argv = minimist(process.argv.slice(2))
+
+  let projectName = argv._[0]
+
+  const onCancel = () => {
+    console.log(red('✖') + ' Operation cancelled')
+    process.exit(1)
+  }
+
+  // If no project name provided, ask interactively
+  if (!projectName) {
+    const result = await prompts(
+      {
+        type: 'text',
+        name: 'projectName',
+        message: 'Project name:',
+        initial: 'ztweb-project',
+      },
+      { onCancel }
+    )
+    projectName = result.projectName
+  }
+
+  // Validate project name
+  if (!projectName || !isValidPackageName(projectName)) {
+    console.error(red('✖') + ' Invalid project name')
+    process.exit(1)
+  }
+
+  const targetDir = path.resolve(process.cwd(), projectName)
+
+  // Check if directory exists and handle confirmation
+  if (fs.existsSync(targetDir)) {
+    const files = fs.readdirSync(targetDir)
+    if (files.length > 0) {
+      const result = await prompts(
+        {
+          type: 'confirm',
+          name: 'overwrite',
+          message: `Directory ${cyan(projectName)} already exists and is not empty. Continue?`,
+          initial: false,
+        },
+        { onCancel }
+      )
+
+      if (!result.overwrite) {
+        console.log(red('✖') + ' Operation cancelled')
+        process.exit(1)
+      }
+    }
+  }
+
+  // Ask for optional features
+  const features = await prompts(
+    [
+      {
+        type: 'toggle',
+        name: 'useTypeScript',
+        message: 'Add TypeScript?',
+        initial: false,
+        active: 'Yes',
+        inactive: 'No',
+      },
+      {
+        type: 'toggle',
+        name: 'useJsx',
+        message: 'Add JSX Support?',
+        initial: false,
+        active: 'Yes',
+        inactive: 'No',
+      },
+      {
+        type: 'toggle',
+        name: 'useRouter',
+        message: 'Add ztweb Router for Single Page Application development?',
+        initial: false,
+        active: 'Yes',
+        inactive: 'No',
+      },
+      {
+        type: 'toggle',
+        name: 'usePinia',
+        message: 'Add Pinia for state management?',
+        initial: false,
+        active: 'Yes',
+        inactive: 'No',
+      },
+      {
+        type: 'toggle',
+        name: 'useVitest',
+        message: 'Add Vitest for Unit testing?',
+        initial: false,
+        active: 'Yes',
+        inactive: 'No',
+      },
+      {
+        type: 'select',
+        name: 'useE2e',
+        message: 'Add an End-to-End Testing Solution?',
+        choices: [
+          { title: 'No', value: false },
+          { title: 'Cypress', value: 'cypress' },
+          { title: 'Nightwatch', value: 'nightwatch' },
+          { title: 'Playwright', value: 'playwright' },
+        ],
+        initial: 0,
+      },
+      {
+        type: 'toggle',
+        name: 'useEslint',
+        message: 'Add ESLint for code quality?',
+        initial: false,
+        active: 'Yes',
+        inactive: 'No',
+      },
+      {
+        type: (prev, values) => (values.useEslint ? 'toggle' : null),
+        name: 'usePrettier',
+        message: 'Add Prettier for code formatting?',
+        initial: false,
+        active: 'Yes',
+        inactive: 'No',
+      },
+    ],
+    { onCancel }
+  )
+
+  const {
+    useTypeScript = false,
+    useJsx = false,
+    useRouter = false,
+    usePinia = false,
+    useVitest = false,
+    useE2e = false,
+    useEslint = false,
+    usePrettier = false,
+  } = features
+
+  const flags = {
+    projectName,
+    useTypeScript,
+    useJsx,
+    useRouter,
+    usePinia,
+    useVitest,
+    useE2e,
+    useEslint,
+    usePrettier,
+  }
+
+  // Create target directory
+  fs.ensureDirSync(targetDir)
+
+  console.log(green('✓') + ` Creating project in ${cyan(targetDir)}...`)
+
+  const templateDir = path.resolve(__dirname, '../template')
+  const pluginDir = path.resolve(__dirname, '../vite-plugin-zweb')
+
+  // Copy all template files (skip files we'll handle specially)
+  copyDirectory(templateDir, targetDir, flags)
+
+  // Copy vite-plugin-zweb directory
+  const targetPluginDir = path.join(targetDir, 'vite-plugin-zweb')
+  fs.copySync(pluginDir, targetPluginDir)
+
+  // Rename _gitignore to .gitignore
+  const gitignorePath = path.join(targetDir, '_gitignore')
+  if (fs.existsSync(gitignorePath)) {
+    fs.renameSync(gitignorePath, path.join(targetDir, '.gitignore'))
+  }
+
+  const ext = useTypeScript ? 'ts' : 'js'
+
+  // Generate vite.config (overwrite copied version with feature-aware version)
+  writeViteConfig(targetDir, flags)
+
+  // Generate src/main.js or main.ts
+  writeMainFile(targetDir, flags)
+
+  // Generate App.zweb (router vs non-router variant)
+  writeAppZweb(targetDir, useRouter)
+
+  // TypeScript config files
+  if (useTypeScript) {
+    writeTsConfig(targetDir)
+    fs.writeFileSync(
+      path.join(targetDir, 'env.d.ts'),
+      `/// <reference types="vite/client" />\n\ndeclare module '*.zweb' {\n  import type { DefineComponent } from 'vue'\n  const component: DefineComponent<{}, {}, any>\n  export default component\n}\n`
+    )
+    // Remove main.js (replaced by main.ts)
+    const oldMain = path.join(targetDir, 'src', 'main.js')
+    if (fs.existsSync(oldMain)) fs.removeSync(oldMain)
+  }
+
+  // Router files
+  if (useRouter) {
+    fs.ensureDirSync(path.join(targetDir, 'src', 'router'))
+    fs.ensureDirSync(path.join(targetDir, 'src', 'views'))
+    fs.writeFileSync(path.join(targetDir, 'src', 'router', `index.${ext}`), routerIndexContent())
+    fs.writeFileSync(path.join(targetDir, 'src', 'views', 'HomeView.zweb'), homeViewContent())
+    fs.writeFileSync(path.join(targetDir, 'src', 'views', 'AboutView.zweb'), aboutViewContent())
+  }
+
+  // Pinia store
+  if (usePinia) {
+    fs.ensureDirSync(path.join(targetDir, 'src', 'stores'))
+    fs.writeFileSync(
+      path.join(targetDir, 'src', 'stores', `counter.${ext}`),
+      counterStoreContent(useTypeScript)
+    )
+  }
+
+  // Vitest
+  if (useVitest) {
+    fs.ensureDirSync(path.join(targetDir, 'src', 'components', '__tests__'))
+    fs.writeFileSync(
+      path.join(targetDir, 'src', 'components', '__tests__', `HelloWorld.spec.${ext}`),
+      vitestSpecContent()
+    )
+  }
+
+  // E2E testing
+  if (useE2e === 'cypress') {
+    fs.writeFileSync(path.join(targetDir, 'cypress.config.js'), cypressConfigContent())
+    fs.ensureDirSync(path.join(targetDir, 'cypress', 'e2e'))
+    fs.writeFileSync(path.join(targetDir, 'cypress', 'e2e', 'example.cy.js'), cypressExampleContent())
+  } else if (useE2e === 'playwright') {
+    fs.writeFileSync(path.join(targetDir, 'playwright.config.js'), playwrightConfigContent())
+    fs.ensureDirSync(path.join(targetDir, 'e2e'))
+    fs.writeFileSync(path.join(targetDir, 'e2e', 'example.spec.js'), playwrightExampleContent())
+  } else if (useE2e === 'nightwatch') {
+    fs.writeFileSync(path.join(targetDir, 'nightwatch.conf.js'), nightwatchConfigContent())
+    fs.ensureDirSync(path.join(targetDir, 'nightwatch', 'e2e'))
+    fs.writeFileSync(
+      path.join(targetDir, 'nightwatch', 'e2e', 'example.js'),
+      nightwatchExampleContent()
+    )
+  }
+
+  // ESLint
+  if (useEslint) {
+    fs.writeFileSync(path.join(targetDir, 'eslint.config.js'), eslintConfigContent())
+  }
+
+  // Prettier
+  if (usePrettier) {
+    fs.writeFileSync(
+      path.join(targetDir, '.prettierrc.json'),
+      JSON.stringify({ semi: false, singleQuote: true, printWidth: 100 }, null, 2) + '\n'
+    )
+  }
+
+  console.log()
+  console.log(green('✅') + ` ztweb project ${bold(cyan(projectName))} created successfully!`)
+  console.log()
+  console.log(bold('Next steps:'))
+  console.log(`  ${cyan('cd ' + projectName)}`)
+  console.log(`  ${cyan('npm install')}`)
+  console.log(`  ${cyan('npm run dev')}`)
+  console.log()
+}
+
+// ---------------------------------------------------------------------------
+// Template rendering helpers
+// ---------------------------------------------------------------------------
+
+function copyDirectory(src, dest, flags) {
+  const files = fs.readdirSync(src)
+
+  for (const file of files) {
+    const srcPath = path.join(src, file)
+    const destPath = path.join(dest, file)
+    const stat = fs.statSync(srcPath)
+
+    if (stat.isDirectory()) {
+      fs.ensureDirSync(destPath)
+      copyDirectory(srcPath, destPath, flags)
+    } else if (file === 'package.json.hbs') {
+      const template = fs.readFileSync(srcPath, 'utf-8')
+      const compiledTemplate = Handlebars.compile(template)
+      const output = compiledTemplate(flags)
+      fs.writeFileSync(path.join(dest, 'package.json'), output)
+    } else if (file === 'vite.config.js.hbs') {
+      // handled separately via writeViteConfig
+    } else if (file === 'main.js' || file === 'main.ts') {
+      // handled separately via writeMainFile
+    } else if (file === 'App.zweb') {
+      // handled separately via writeAppZweb
+    } else if (file === 'vite.config.js') {
+      // handled separately via writeViteConfig
+    } else {
+      fs.copyFileSync(srcPath, destPath)
+    }
+  }
+}
+
+function writeViteConfig(targetDir, flags) {
+  const { useJsx, useTypeScript } = flags
+  const ext = useTypeScript ? 'ts' : 'js'
+  const lines = [`import { defineConfig } from 'vite'`, `import zweb from 'vite-plugin-zweb'`]
+  if (useJsx) lines.push(`import vueJsx from '@vitejs/plugin-vue-jsx'`)
+  lines.push(``)
+  lines.push(`export default defineConfig({`)
+  const plugins = useJsx ? `zweb(), vueJsx()` : `zweb()`
+  lines.push(`  plugins: [${plugins}],`)
+  lines.push(`})`)
+  lines.push(``)
+  fs.writeFileSync(path.join(targetDir, `vite.config.${ext}`), lines.join('\n'))
+  // Remove old .js if we wrote .ts
+  if (useTypeScript) {
+    const old = path.join(targetDir, 'vite.config.js')
+    if (fs.existsSync(old)) fs.removeSync(old)
+  }
+}
+
+function writeMainFile(targetDir, flags) {
+  const { useTypeScript, useRouter, usePinia } = flags
+  const ext = useTypeScript ? 'ts' : 'js'
+  const lines = [`import { createApp } from 'vue'`]
+  if (usePinia) lines.push(`import { createPinia } from 'pinia'`)
+  if (useRouter) lines.push(`import router from './router'`)
+  lines.push(`import './style.css'`)
+  lines.push(`import App from './App.zweb'`)
+  lines.push(``)
+  lines.push(`const app = createApp(App)`)
+  if (usePinia) lines.push(`app.use(createPinia())`)
+  if (useRouter) lines.push(`app.use(router)`)
+  lines.push(`app.mount('#app')`)
+  lines.push(``)
+  fs.ensureDirSync(path.join(targetDir, 'src'))
+  fs.writeFileSync(path.join(targetDir, 'src', `main.${ext}`), lines.join('\n'))
+}
+
+function writeAppZweb(targetDir, useRouter) {
+  let content
+  if (useRouter) {
+    content = `<script setup>
+import HelloWorld from './components/HelloWorld.zweb'
+</script>
+
+<template>
+  <div>
+    <nav>
+      <RouterLink to="/">Home</RouterLink>
+      <span> | </span>
+      <RouterLink to="/about">About</RouterLink>
+    </nav>
+    <RouterView />
+    <HelloWorld msg="Welcome to ztweb!" />
+  </div>
+</template>
+
+<style scoped>
+nav {
+  padding: 1em 0;
+}
+nav a {
+  font-weight: bold;
+  color: #42b883;
+  text-decoration: none;
+}
+nav a:hover {
+  text-decoration: underline;
+}
+</style>
+`
+  } else {
+    content = `<script setup>
+import HelloWorld from './components/HelloWorld.zweb'
+</script>
+
+<template>
+  <div>
+    <a href="https://github.com/techzt13/ztweb" target="_blank">
+      <img src="./assets/logo.svg" class="logo" alt="ztweb logo" />
+    </a>
+    <HelloWorld msg="Welcome to ztweb!" />
+  </div>
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>
+`
+  }
+  fs.ensureDirSync(path.join(targetDir, 'src'))
+  fs.writeFileSync(path.join(targetDir, 'src', 'App.zweb'), content)
+}
+
+function writeTsConfig(targetDir) {
+  const tsconfig = {
+    files: [],
+    references: [{ path: './tsconfig.app.json' }, { path: './tsconfig.node.json' }],
+  }
+  const tsconfigApp = {
+    extends: '@vue/tsconfig/tsconfig.dom.json',
+    include: ['env.d.ts', 'src/**/*', 'src/**/*.zweb'],
+    exclude: ['src/**/__tests__/*'],
+    compilerOptions: {
+      composite: true,
+      tsBuildInfoFile: './node_modules/.tmp/tsconfig.app.tsbuildinfo',
+      baseUrl: '.',
+      paths: { '@/*': ['./src/*'] },
+    },
+  }
+  const tsconfigNode = {
+    extends: '@tsconfig/node20/tsconfig.json',
+    include: ['vite.config.*', 'vitest.config.*', 'cypress/**/*', 'playwright/**/*'],
+    compilerOptions: {
+      composite: true,
+      tsBuildInfoFile: './node_modules/.tmp/tsconfig.node.tsbuildinfo',
+      module: 'ESNext',
+      moduleResolution: 'Bundler',
+      types: ['node'],
+    },
+  }
+  fs.writeFileSync(path.join(targetDir, 'tsconfig.json'), JSON.stringify(tsconfig, null, 2) + '\n')
+  fs.writeFileSync(
+    path.join(targetDir, 'tsconfig.app.json'),
+    JSON.stringify(tsconfigApp, null, 2) + '\n'
+  )
+  fs.writeFileSync(
+    path.join(targetDir, 'tsconfig.node.json'),
+    JSON.stringify(tsconfigNode, null, 2) + '\n'
+  )
+}
+
+function routerIndexContent(ext) {
+  return `import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.zweb'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView,
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('../views/AboutView.zweb'),
+    },
+  ],
+})
+
+export default router
+`
+}
+
+function homeViewContent() {
+  return `<template>
+  <main>
+    <h1>Home</h1>
+    <p>Welcome to the ztweb app!</p>
+  </main>
+</template>
+`
+}
+
+function aboutViewContent() {
+  return `<template>
+  <main>
+    <h1>About</h1>
+    <p>This is an About page built with ztweb.</p>
+  </main>
+</template>
+`
+}
+
+function counterStoreContent(useTypeScript) {
+  if (useTypeScript) {
+    return `import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref<number>(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
+`
+  }
+  return `import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
+`
+}
+
+function vitestSpecContent() {
+  return `import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import HelloWorld from '../HelloWorld.zweb'
+
+describe('HelloWorld', () => {
+  it('renders properly', () => {
+    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
+    expect(wrapper.text()).toContain('Hello Vitest')
+  })
+})
+`
+}
+
+function cypressConfigContent() {
+  return `import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173',
+  },
+})
+`
+}
+
+function cypressExampleContent() {
+  return `describe('My App', () => {
+  it('visits the app', () => {
+    cy.visit('/')
+    cy.contains('ztweb')
+  })
+})
+`
+}
+
+function playwrightConfigContent() {
+  return `import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './e2e',
+  use: {
+    baseURL: 'http://localhost:4173',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})
+`
+}
+
+function playwrightExampleContent() {
+  return `import { test, expect } from '@playwright/test'
+
+test('visits the app', async ({ page }) => {
+  await page.goto('/')
+  await expect(page).toHaveTitle(/ztweb/)
+})
+`
+}
+
+function nightwatchConfigContent() {
+  return `module.exports = {
+  src_folders: ['nightwatch/e2e'],
+  test_settings: {
+    default: {
+      launch_url: 'http://localhost:4173',
+      desiredCapabilities: {
+        browserName: 'chrome',
+      },
+    },
+  },
+}
+`
+}
+
+function nightwatchExampleContent() {
+  return `module.exports = {
+  'visits the app': function (browser) {
+    browser
+      .url(browser.launchUrl)
+      .waitForElementVisible('body')
+      .assert.titleContains('ztweb')
+      .end()
+  },
+}
+`
+}
+
+function eslintConfigContent() {
+  return `import pluginVue from 'eslint-plugin-vue'
+import js from '@eslint/js'
+
+export default [
+  js.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+  {
+    files: ['**/*.{js,ts,zweb}'],
+    rules: {},
+  },
+]
+`
+}
+
+function isValidPackageName(name) {
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(name)
+}
+
+export default init

package/template/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

package/template/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ztweb App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/template/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/template/package.json.hbs

@@ -0,0 +1,42 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    {{#if useTypeScript}}
+    "build": "vue-tsc && vite build",
+    {{else}}
+    "build": "vite build",
+    {{/if}}
+    "preview": "vite preview"{{#if useVitest}},
+    "test": "vitest"{{/if}}{{#if useE2e}},
+    {{#if (eq useE2e "cypress")}}"test:e2e": "cypress open"{{else if (eq useE2e "playwright")}}"test:e2e": "playwright test"{{else if (eq useE2e "nightwatch")}}"test:e2e": "nightwatch"{{/if}}{{/if}}{{#if useEslint}},
+    "lint": "eslint ."{{/if}}{{#if usePrettier}},
+    "format": "prettier --write ."{{/if}}
+  },
+  "dependencies": {
+    "vue": "^3.4.0"{{#if useRouter}},
+    "vue-router": "^4.3.0"{{/if}}{{#if usePinia}},
+    "pinia": "^2.1.0"{{/if}}
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.4.0",
+    "vite": "^5.0.0",
+    "vite-plugin-zweb": "file:./vite-plugin-zweb"{{#if useTypeScript}},
+    "typescript": "^5.4.0",
+    "vue-tsc": "^2.0.0"{{/if}}{{#if useJsx}},
+    "@vitejs/plugin-vue-jsx": "^4.0.0"{{/if}}{{#if useVitest}},
+    "vitest": "^1.5.0",
+    "@vue/test-utils": "^2.4.0",
+    "jsdom": "^24.0.0"{{/if}}{{#if (eq useE2e "cypress")}},
+    "cypress": "^13.0.0"{{else if (eq useE2e "playwright")}},
+    "@playwright/test": "^1.44.0"{{else if (eq useE2e "nightwatch")}},
+    "nightwatch": "^3.5.0"{{/if}}{{#if useEslint}},
+    "eslint": "^9.0.0",
+    "eslint-plugin-vue": "^9.25.0",
+    "@eslint/js": "^9.0.0"{{/if}}{{#if usePrettier}},
+    "prettier": "^3.2.0"{{/if}}
+  }
+}

package/template/public/favicon.ico

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="4" fill="#42b883"/>
+  <text x="16" y="24" font-family="Arial" font-size="18" font-weight="bold" fill="white" text-anchor="middle">ZT</text>
+</svg>

package/template/src/App.zweb

@@ -0,0 +1,24 @@
+<script setup>
+import HelloWorld from './components/HelloWorld.zweb'
+</script>
+
+<template>
+  <div>
+    <a href="https://github.com/techzt13/ztweb" target="_blank">
+      <img src="./assets/logo.svg" class="logo" alt="ztweb logo" />
+    </a>
+    <HelloWorld msg="Welcome to ztweb!" />
+  </div>
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

package/template/src/assets/logo.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#42b883;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#35495e;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="200" height="200" rx="20" fill="url(#grad)"/>
+  <text x="100" y="130" font-family="Arial, sans-serif" font-size="80" font-weight="bold" fill="white" text-anchor="middle">ZT</text>
+</svg>

package/template/src/components/HelloWorld.zweb

@@ -0,0 +1,39 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit <code>src/components/HelloWorld.zweb</code> to test HMR
+    </p>
+  </div>
+  <p>
+    Check out the
+    <a href="https://vuejs.org/guide/quick-start.html" target="_blank">Vue docs</a>,
+    and the
+    <a href="https://vitejs.dev/guide/" target="_blank">Vite docs</a>.
+  </p>
+  <p class="powered">Powered by <strong>ztweb</strong> — Vue + Vite with .zweb files</p>
+</template>
+
+<style scoped>
+.card {
+  padding: 2em;
+}
+h1 {
+  color: #42b883;
+}
+.powered {
+  margin-top: 2em;
+  color: #888;
+}
+</style>

package/template/src/main.js

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

package/template/src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/template/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import zweb from 'vite-plugin-zweb'
+
+export default defineConfig({
+  plugins: [zweb()],
+})

package/vite-plugin-zweb/index.js

@@ -0,0 +1,154 @@
+import { parse, compileScript, compileTemplate, compileStyleAsync } from '@vue/compiler-sfc'
+import { createHash } from 'crypto'
+
+export default function zwebPlugin() {
+  const cache = new Map()
+
+  return {
+    name: 'vite-plugin-zweb',
+
+    config() {
+      return {
+        resolve: {
+          extensions: ['.zweb', '.js', '.json']
+        }
+      }
+    },
+
+    async transform(code, id) {
+      if (!id.endsWith('.zweb')) return null
+
+      const filename = id.split('?')[0]
+
+      // Parse the SFC
+      const { descriptor, errors } = parse(code, {
+        filename,
+        sourceMap: true
+      })
+
+      if (errors.length) {
+        throw errors[0]
+      }
+
+      // Generate a scoped ID for this component
+      const scopeId = `data-v-${generateId(filename)}`
+
+      let output = ''
+      const attachedProps = []
+
+      // 1. Compile script block
+      if (descriptor.script || descriptor.scriptSetup) {
+        const script = compileScript(descriptor, {
+          id: scopeId,
+          inlineTemplate: false,
+          templateOptions: {
+            id: scopeId,
+            scoped: descriptor.styles.some(s => s.scoped),
+            slotted: descriptor.slotted
+          }
+        })
+
+        output += script.content.replace('export default', 'const __component__ =')
+        output += '\n'
+      } else {
+        output += 'const __component__ = {}\n'
+      }
+
+      // 2. Compile template block
+      if (descriptor.template) {
+        const template = compileTemplate({
+          id: scopeId,
+          source: descriptor.template.content,
+          filename,
+          scoped: descriptor.styles.some(s => s.scoped),
+          slotted: descriptor.slotted,
+          compilerOptions: {
+            mode: 'module',
+            scopeId: descriptor.styles.some(s => s.scoped) ? scopeId : undefined
+          }
+        })
+
+        if (template.errors.length) {
+          throw template.errors[0]
+        }
+
+        output += template.code.replace('export function render', 'function render')
+        output += '\n__component__.render = render\n'
+      }
+
+      // 3. Compile style blocks
+      if (descriptor.styles.length) {
+        for (let i = 0; i < descriptor.styles.length; i++) {
+          const style = descriptor.styles[i]
+          const compiled = await compileStyleAsync({
+            source: style.content,
+            filename,
+            id: scopeId,
+            scoped: style.scoped,
+            modules: style.module != null
+          })
+
+          if (compiled.errors.length) {
+            throw compiled.errors[0]
+          }
+
+          // Inject the style
+          output += `
+const __style${i}__ = document.createElement('style')
+__style${i}__.innerHTML = ${JSON.stringify(compiled.code)}
+document.head.appendChild(__style${i}__)
+`
+        }
+      }
+
+      // Add scoped ID if needed
+      if (descriptor.styles.some(s => s.scoped)) {
+        output += `\n__component__.__scopeId = "${scopeId}"\n`
+      }
+
+      // HMR support
+      if (!process.env.VITEST) {
+        output += `
+if (import.meta.hot) {
+  __component__.__hmrId = "${scopeId}"
+  import.meta.hot.accept(mod => {
+    if (!mod) return
+    const updated = mod.default
+    updated.__hmrId = "${scopeId}"
+    import.meta.hot.data.instances?.forEach(instance => {
+      if (instance.$.type.__hmrId === "${scopeId}") {
+        instance.$.type = updated
+        instance.$.proxy?.$forceUpdate()
+      }
+    })
+  })
+}
+`
+      }
+
+      output += '\n__component__.__file = ' + JSON.stringify(filename) + '\n'
+      output += 'export default __component__\n'
+
+      return {
+        code: output,
+        map: null
+      }
+    },
+
+    handleHotUpdate({ file, server }) {
+      if (file.endsWith('.zweb')) {
+        cache.delete(file)
+
+        const module = server.moduleGraph.getModuleById(file)
+        if (module) {
+          server.moduleGraph.invalidateModule(module)
+          return [module]
+        }
+      }
+    }
+  }
+}
+
+function generateId(filename) {
+  return createHash('md5').update(filename).digest('hex').substring(0, 8)
+}

package/vite-plugin-zweb/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "vite-plugin-zweb",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js",
+  "dependencies": {
+    "@vue/compiler-sfc": "^3.4.0"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0"
+  }
+}