vue-zero-ai 1.1.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 hopegiver
+
+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,154 @@
+# vue-zero
+
+Zero-build Vue 3 router for AI-driven development.
+
+- AI only needs standard Vue 3 knowledge — no special syntax to learn
+- No build step — runs directly in the browser via CDN
+- Nuxt-style file-based routing — conventions AI already knows
+- Bootstrap 5 + Notion-inspired design system out of the box
+- Cloudflare Workers full-stack ready
+
+## Quick Start
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="/assets/css/base.css" rel="stylesheet">
+  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+  <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.prod.js"></script>
+  <script src="https://unpkg.com/vue-zero-ai/dist/vue-zero.js"></script>
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+    VueZero.createApp()
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
+```
+
+Create `.vue` files in `pages/` and they become routes automatically:
+
+```
+pages/
+  index.vue        → /
+  about.vue        → /about
+  users/
+    index.vue      → /users
+    [id].vue       → /users/:id
+```
+
+## How It Works
+
+1. List your pages in `pages/pages.json`: `["index", "about", "users/index", "users/[id]"]`
+2. Write standard Vue 3 Options API `.vue` files
+3. That's it. No build, no config, no CLI.
+
+## Features
+
+**File-based routing** — Nuxt-style dynamic routes, catch-all routes, nested routes.
+
+**Auto components** — Put `.vue` files in `components/` and list them in `components/components.json`. They're globally available in all pages.
+
+**Layouts** — `layouts/default.vue` wraps all pages. Use `layout: 'admin'` or `layout: false` per page.
+
+**Auth guard** — When `auth.enabled: true`, all pages are protected by default. Mark public pages with `auth: false`. Built-in JWT support.
+
+**Page titles** — Set `title: 'My Page'` and `document.title` updates on navigation.
+
+**Design system** — Bootstrap 5 base with Notion-inspired `base.css` tokens (colors, typography, spacing, shadows). All rem-based for consistent scaling.
+
+**CSP friendly** — Script evaluation uses Blob URL + dynamic import instead of `eval`/`new Function`. No `unsafe-eval` required.
+
+## Page Example
+
+```vue
+<template>
+  <div class="container py-4">
+    <h1 class="mb-3">{{ heading }}</h1>
+    <div class="card p-4">
+      <ul class="list-unstyled mb-0">
+        <li v-for="user in users" :key="user.id" class="py-2 border-bottom">
+          <router-link :to="'/users/' + user.id">{{ user.name }}</router-link>
+          <span class="text-muted small ms-2">{{ user.email }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: 'Users',
+  data() {
+    return { heading: 'Users', users: [] }
+  },
+  async mounted() {
+    const res = await fetch('/api/users')
+    const data = await res.json()
+    this.users = data.users
+  }
+}
+</script>
+```
+
+## Full-Stack with Cloudflare Workers
+
+vue-zero pairs with [Hono](https://hono.dev) on Cloudflare Workers for a complete full-stack setup:
+
+```
+my-app/
+  wrangler.toml
+  server/             # Hono backend
+    index.js
+    api/
+    dao/
+    middleware/
+    utils/
+  app/                # vue-zero frontend
+    index.html
+    pages/
+    components/
+    layouts/
+    assets/css/
+```
+
+```toml
+# wrangler.toml
+name = "my-app"
+main = "server/index.js"
+compatibility_date = "2024-01-01"
+
+[assets]
+directory = "./app"
+not_found_handling = "single-page-application"
+run_worker_first = ["/api/*"]
+```
+
+## Options
+
+```js
+VueZero.createApp({
+  pagesDir: 'pages',           // default
+  componentsDir: 'components', // default
+  layoutsDir: 'layouts',       // default
+  auth: {
+    enabled: true,
+    loginPage: '/login',
+  }
+})
+```
+
+## Rules for AI
+
+1. **Register files** — Add pages to `pages/pages.json`, components to `components/components.json` (without `.vue` extension). Or run `npm run scan`.
+2. **Options API only** — No `<script setup>`, no Composition API, no TypeScript
+3. **No `<style scoped>`** — Use Bootstrap classes + `base.css` tokens. Use class names for isolation when needed.
+4. **404 page** — `pages/404.vue` is auto-detected. Do NOT add it to `pages.json`
+
+## License
+
+[MIT](LICENSE)

package/dist/vue-zero.js

@@ -0,0 +1,12 @@
+var VueZero=(()=>{var j=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var J=Object.prototype.hasOwnProperty;var Y=(n,e,t)=>e in n?j(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var Q=(n,e)=>{for(var t in e)j(n,t,{get:e[t],enumerable:!0})},Z=(n,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of F(e))!J.call(n,r)&&r!==t&&j(n,r,{get:()=>e[r],enumerable:!(s=q(e,r))||s.enumerable});return n};var ee=n=>Z(j({},"__esModule",{value:!0}),n);var d=(n,e,t)=>Y(n,typeof e!="symbol"?e+"":e,t);var ie={};Q(ie,{createApp:()=>ae});var C=class{constructor(e){d(this,"pagesDir");this.pagesDir=e.replace(/\/$/,"")}async scan(){let e=`${this.pagesDir}/pages.json`;try{let t=await fetch(e);if(!t.ok)throw new Error(`${t.status}`);let s=await t.json();return s.forEach(r=>{r.endsWith(".vue")&&console.error(`[vue-zero] pages.json entry should not include ".vue" extension (got: "${r}"). Use "${r.replace(/\.vue$/,"")}"`)}),s.map(r=>this.fileToRoute(r))}catch{return console.warn(`[vue-zero] pages.json not found at ${e}. Create it: ["index", "about", ...]`),[]}}fileToRoute(e){let t=e.replace(/\.vue$/,""),r=t.split("/").map(u=>this.segmentToPath(u)),a=r[r.length-1],c;a===""?(r.pop(),c=r.length===0?"/":"/"+r.join("/")):c="/"+r.join("/");let m=t.replace(/\//g,"-").replace(/[\[\]\.]/g,"").replace(/\.\.\./g,"");return{path:c,filePath:`${this.pagesDir}/${e.endsWith(".vue")?e:e+".vue"}`,name:m}}segmentToPath(e){return e.startsWith("[...")&&e.endsWith("]")?":"+e.slice(4,-1)+"*":e.startsWith("[")&&e.endsWith("]")?":"+e.slice(1,-1):e==="index"?"":e}};var D=class{constructor(){d(this,"injected",new Map);d(this,"activePageId",null)}inject(e,t,s="component"){if(!e.trim()||this.injected.has(t))return;let r=document.createElement("style");r.setAttribute("data-vue-zero",t),r.setAttribute("data-scope",s),r.textContent=e,document.head.appendChild(r),this.injected.set(t,{el:r,scope:s})}remove(e){let t=this.injected.get(e);t&&(t.el.remove(),this.injected.delete(e))}switchPage(e){for(let[t,s]of this.injected)s.scope==="page"&&(s.el.disabled=t!==e);this.activePageId=e}clearPages(){}clear(){this.injected.forEach(e=>e.el.remove()),this.injected.clear()}};var W=new D;function B(){return W}function te(n){let e={template:"",script:"",style:""},t=/<template(\s[^>]*)?>/.exec(n);if(t){let a=t.index+t[0].length,c=/<template(\s[^>]*)?>/gi,m=/<\/template>/gi,u=1,p=a;for(;p<n.length;){c.lastIndex=p,m.lastIndex=p;let b=c.exec(n),v=m.exec(n),w=b?b.index:1/0,h=v?v.index:1/0;if(h===1/0)break;if(w<h)u++,p=w+b[0].length;else{if(u--,u===0){e.template=n.slice(a,h).trim();break}p=h+11}}}let s=/<script(\s[^>]*)?>/.exec(n);if(s){let a=s.index+s[0].length,c=n.indexOf("<\/script>",a);c!==-1&&(e.script=n.slice(a,c).trim())}let r=/<style(\s[^>]*)?>/.exec(n);if(r){let a=r.index+r[0].length,c=n.indexOf("</style>",a);c!==-1&&(e.style=n.slice(a,c).trim())}return e}async function ne(n){if(!n.trim())return{};let e=new Blob([n],{type:"text/javascript"}),t=URL.createObjectURL(e);try{return(await import(t)).default??{}}catch(s){return console.error("[vue-zero] SfcParser: script eval failed",s),{}}finally{URL.revokeObjectURL(t)}}async function S(n,e,t="component"){let s=await fetch(n);if(!s.ok)throw new Error(`[vue-zero] failed to fetch ${n} (${s.status})`);let r=await s.text(),a=te(r),c=a.template,m=a.script,u=a.style,p=await ne(m);return u&&W.inject(u,e,t),{template:c,componentOptions:p,style:u}}var L=class{constructor(e){d(this,"componentsDir");d(this,"cache",new Map);this.componentsDir=e.replace(/\/$/,"")}async readManifest(){let e=`${this.componentsDir}/components.json`;try{let t=await fetch(e);if(!t.ok)throw new Error(`${t.status}`);return await t.json()}catch{return[]}}async loadAll(e){let t={};return await Promise.all(e.map(async s=>{try{t[s]=await this.load(s)}catch{console.error(`[vue-zero] components.json\uC5D0 "${s}"\uC774 \uB4F1\uB85D\uB418\uC5B4 \uC788\uC9C0\uB9CC \uD30C\uC77C\uC744 \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4: ${this.componentsDir}/${s}.vue`)}})),t}async load(e){if(this.cache.has(e))return this.cache.get(e);let t=`${this.componentsDir}/${e}.vue`,{template:s,componentOptions:r}=await S(t,`component-${e}`),a={...r,name:e,template:s};return this.cache.set(e,a),a}};var E=class{constructor(e={}){d(this,"config");this.config={enabled:e.enabled??!1,loginPage:e.loginPage??"/login",tokenKey:e.tokenKey??"token"}}isEnabled(){return this.config.enabled}isAuthenticated(){try{let e=localStorage.getItem(this.config.tokenKey);if(!e)return!1;let t=JSON.parse(atob(e.split(".")[1]));return t.exp&&t.exp*1e3<Date.now()?(localStorage.removeItem(this.config.tokenKey),!1):!0}catch{return!1}}getLoginPage(){return this.config.loginPage}};function oe(n){for(let e of["pagesDir","componentsDir","layoutsDir"]){let t=n[e];t!==void 0&&t.includes("\\")&&console.error(`[vue-zero] "${e}" must use "/" as separator (got: "${t}")`)}n.auth&&!n.auth.enabled&&(n.auth.loginPage||n.auth.tokenKey)&&console.warn('[vue-zero] auth options are set but "enabled" is false \u2014 auth guard will not run')}var re=`
+.vue-zero-progress {
+  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99999;
+  background: #42b883; transform-origin: left; transform: scaleX(0);
+  transition: transform 0.2s ease; pointer-events: none;
+}
+.vue-zero-progress.loading { transform: scaleX(0.8); transition: transform 8s cubic-bezier(0.1, 0.05, 0, 1); }
+.vue-zero-progress.done { transform: scaleX(1); opacity: 0; transition: transform 0.1s ease, opacity 0.4s ease 0.1s; }
+`;function se(){let n=document.createElement("style");n.textContent=re,document.head.appendChild(n);let e=document.createElement("div");return e.className="vue-zero-progress",document.body.appendChild(e),{start(){e.className="vue-zero-progress",e.offsetWidth,e.classList.add("loading")},done(){e.classList.remove("loading"),e.classList.add("done")}}}async function ae(n={}){oe(n);let e=(n.baseDir??"/").replace(/\/$/,""),t=e+"/"+(n.pagesDir??"pages").replace(/^\//,"").replace(/\/$/,""),s=e+"/"+(n.componentsDir??"components").replace(/^\//,"").replace(/\/$/,""),r=e+"/"+(n.layoutsDir??"layouts").replace(/^\//,"").replace(/\/$/,""),a=new E(n.auth),c=new L(s),m=new C(t),u=B(),p=se(),[b,v]=await Promise.all([c.readManifest(),m.scan()]),w=await c.loadAll(b);v.length===0&&console.warn('[vue-zero] No pages found. Create pages/pages.json: ["index", "about", ...]');let h=new Map,O=new Map,$=new Map,M=new Map,_=new Map,T=new Map,K=new Map(v.map(o=>[o.name,o]));async function P(o,i){if(h.has(o))return h.get(o);let l=await S(i,`page-${o}`,"page");return h.set(o,l),l}let U=new Set(["html","body","head","base","meta","link","style","script","noscript","template","slot","component","div","span","p","a","br","hr","img","input","button","select","option","textarea","form","label","fieldset","legend","table","thead","tbody","tfoot","tr","th","td","caption","colgroup","col","ul","ol","li","dl","dt","dd","h1","h2","h3","h4","h5","h6","header","footer","main","nav","section","article","aside","details","summary","dialog","figure","figcaption","video","audio","source","canvas","svg","iframe","embed","object","pre","code","blockquote","strong","em","small","sub","sup","mark"]);function R(o,i){if(O.has(o))return O.get(o);U.has(o)&&console.error(`[vue-zero] \uD398\uC774\uC9C0 \uD30C\uC77C\uBA85 "${o}"\uC740 HTML \uC608\uC57D \uD0DC\uADF8\uC640 \uCDA9\uB3CC\uD569\uB2C8\uB2E4. \uD30C\uC77C\uBA85\uC744 \uBCC0\uACBD\uD558\uC138\uC694.`);let l=Vue.defineComponent({...i.componentOptions,name:o,template:i.template,components:w});O.set(o,l);let g=i.componentOptions,y=g.layout;return M.set(o,y===!1?!1:y??"default"),_.set(o,g.title??null),T.set(o,g.auth!==!1),l}async function H(o){if($.has(o))return $.get(o);let i=`${r}/${o}.vue`;try{let{template:l,componentOptions:g}=await S(i,`layout-${o}`,"layout"),y=l.replace(/<slot\s*\/>/,"<router-view />").replace(/<slot><\/slot>/,"<router-view />"),f=Vue.defineComponent({...g,name:`layout-${o}`,template:y,components:w});return $.set(o,f),f}catch{return console.warn(`[vue-zero] layout "${o}.vue" not found \u2014 rendering page without layout`),$.set(o,null),null}}let z=`${t}/404.vue`,V=(await fetch(z)).ok,N=v.map(o=>({path:o.path,name:o.name,component:async()=>{let i=await P(o.name,o.filePath);return R(o.name,i)}}));V&&N.push({path:"/:pathMatch(.*)*",name:"404",component:async()=>{let o=await P("404",z);return R("404",o)}});let x=VueRouter.createRouter({history:VueRouter.createWebHistory(),routes:N,scrollBehavior(o,i,l){return l||{top:0}}}),A=Vue.shallowRef(null),I=Vue.ref("__pending__");x.beforeEach(async o=>{p.start();let i=String(o.name),l=K.get(i);try{if(l){let f=await P(l.name,l.filePath);R(i,f)}else if(i==="404"&&V){let f=await P("404",z);R("404",f)}let g=M.get(i);if(g===!1)A.value=null,I.value="__none__";else{let f=g??"default",G=await H(f);A.value=G,I.value=f}u.switchPage(`page-${i}`);let y=_.get(i);if(y&&(document.title=y),a.isEnabled()&&T.get(i)&&!a.isAuthenticated())return p.done(),a.getLoginPage()}catch(g){return console.error(`[vue-zero] \uD398\uC774\uC9C0 \uB85C\uB4DC \uC2E4\uD328: ${o.fullPath}`,g),p.done(),!1}}),x.afterEach(()=>{p.done()}),x.onError(o=>{console.error("[vue-zero] navigation error:",o)});let X=Vue.defineComponent({name:"LayoutWrapper",setup(){return{currentLayout:A,currentLayoutName:I}},template:`
+      <component v-if="currentLayout" :is="currentLayout" :key="currentLayoutName" />
+      <router-view v-else-if="currentLayoutName !== '__pending__'" />
+    `}),k=Vue.createApp({template:"<LayoutWrapper />",components:{LayoutWrapper:X}});k.use(x),k.config.errorHandler=(o,i,l)=>{console.error(`[vue-zero] runtime error (${l}):`,o)},Object.entries(w).forEach(([o,i])=>{k.component(o,i)}),await x.isReady(),k.mount("#app")}return ee(ie);})();

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "vue-zero-ai",
+  "version": "1.1.3",
+  "description": "Zero-build Vue 3 router for AI-driven development",
+  "main": "dist/vue-zero.js",
+  "files": [
+    "dist/vue-zero.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hopegiver/vue-zero.git"
+  },
+  "homepage": "https://github.com/hopegiver/vue-zero",
+  "author": "hopegiver",
+  "type": "module",
+  "scripts": {
+    "dev": "node --watch build.js",
+    "build": "node build.js"
+  },
+  "keywords": [
+    "vue",
+    "router",
+    "zero-build",
+    "no-build"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "esbuild": "^0.28.0",
+    "typescript": "^6.0.3"
+  }
+}