@baokaibo/nanofront 1.0.0

package/README.md

@@ -0,0 +1,64 @@
+# NanoFront
+
+极简类 Vue 前端框架，零依赖，体积 < 10KB
+
+## 特性
+
+- 🌀 **响应式数据** - 基于 Proxy 的响应式系统
+- 📝 **模板引擎** - 支持 Mustache 语法、`n-if`、`n-for`、`n-show` 指令
+- 🔗 **事件绑定** - 简洁的 `@click` 等事件绑定
+- 🧩 **组件系统** - 支持组件定义和复用
+- 🛤️ **Hash 路由** - 轻量级 Hash 路由
+- 📦 **全局状态** - 内置响应式状态管理
+- 🌐 **HTTP 模块** - 简洁的请求封装
+- ⚡ **CLI 工具** - `nanofront` 命令快速创建项目
+
+## 安装
+
+```bash
+npm install nanofront
+```
+
+## 快速开始
+
+```javascript
+import Nano from 'nanofront';
+
+// 定义组件
+const Home = {
+  template: `
+    <div>
+      <h1>首页</h1>
+      <p>欢迎使用 NanoFront!</p>
+    </div>
+  `
+};
+
+// 注册路由
+Nano.router([
+  { path: '/', component: Home },
+  { path: '*', component: Home }
+]);
+
+// 启动应用
+Nano.start('#app');
+```
+
+## CLI 使用
+
+安装后，可以直接运行 `nanofront` 命令启动项目创建器：
+
+```bash
+npx nanofront
+# 或全局安装后
+npm install -g nanofront
+nanofront
+```
+
+## 文档
+
+更多用法请查看 [demo/index.html](./demo/index.html)
+
+## License
+
+MIT

package/bin/nanofront.js

@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+
+import { spawn } from 'child_process';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+import fs from 'fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const packageDir = resolve(__dirname, '..');
+
+async function startServer() {
+  const port = 3000;
+  const url = `http://localhost:${port}`;
+
+  console.log('🚀 启动 NanoFront 项目创建器...\n');
+  console.log(`📍 访问 ${url} 创建您的项目\n`);
+
+  // 检查本地 node_modules 是否存在
+  const nodeModules = resolve(packageDir, 'node_modules');
+  const needsInstall = !fs.existsSync(nodeModules);
+
+  if (needsInstall) {
+    console.log('📦 正在安装依赖...\n');
+    await new Promise((resolve, reject) => {
+      const install = spawn('npm', ['install'], {
+        cwd: packageDir,
+        stdio: 'inherit',
+        shell: true
+      });
+      install.on('close', (code) => {
+        if (code === 0) resolve();
+        else reject(new Error('安装依赖失败'));
+      });
+    });
+  }
+
+  // 使用 Vite 启动开发服务器
+  const vite = spawn('npx', ['vite', '--port', String(port)], {
+    cwd: packageDir,
+    stdio: 'inherit',
+    shell: true,
+    env: {
+      ...process.env,
+      FORCE_COLOR: '1'
+    }
+  });
+
+  // 自动打开浏览器
+  setTimeout(() => {
+    const isWindows = process.platform === 'win32';
+    const command = isWindows ? 'start' : 'open';
+    const args = isWindows ? [url] : [url];
+    
+    spawn(command, args, {
+      detached: true,
+      stdio: 'ignore',
+      shell: true
+    }).unref();
+  }, 1500);
+
+  vite.on('close', (code) => {
+    process.exit(code);
+  });
+}
+
+startServer().catch(err => {
+  console.error(err.message);
+  process.exit(1);
+});

package/nano/core/index.js

@@ -0,0 +1,66 @@
+// Component system
+import { reactive, effect } from '../reactive/index.js';
+import { render } from '../render/index.js';
+
+const components = new Map();
+
+function component(name, options) {
+  components.set(name, options);
+}
+
+function mount(selector, options) {
+  const container = typeof selector === 'string'
+    ? document.querySelector(selector)
+    : selector;
+
+  if (!container) throw new Error(`Cannot find element: ${selector}`);
+
+  const data = reactive(
+    typeof options.data === 'function' ? options.data() : (options.data || {})
+  );
+
+  const methods = options.methods || {};
+
+  // Bind methods to data context
+  Object.keys(methods).forEach(key => {
+    methods[key] = methods[key].bind(data);
+  });
+
+  effect(() => {
+    render(container, options.template, data, methods);
+    // Mount child components after render
+    mountChildComponents(container, data);
+    // Call mounted hook if exists
+    if (options.mounted && typeof options.mounted === 'function') {
+      options.mounted.call(data);
+    }
+  });
+
+  return data;
+}
+
+function mountChildComponents(container, parentData) {
+  if (!container) return;
+  components.forEach((options, name) => {
+    try {
+      const elements = container.querySelectorAll(name);
+      elements.forEach(el => {
+        if (!el) return;
+        const data = reactive(
+          typeof options.data === 'function' ? options.data() : (options.data || {})
+        );
+        const methods = options.methods || {};
+        Object.keys(methods).forEach(key => {
+          methods[key] = methods[key].bind(data);
+        });
+        effect(() => {
+          render(el, options.template, data, methods);
+        });
+      });
+    } catch (e) {
+      // Ignore querySelectorAll errors
+    }
+  });
+}
+
+export { component, mount, components };

package/nano/http/index.js

@@ -0,0 +1,34 @@
+// HTTP module wrapping fetch
+const http = {
+  async get(url, options = {}) {
+    const res = await fetch(url, { method: 'GET', ...options });
+    return res.json();
+  },
+
+  async post(url, body, options = {}) {
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', ...options.headers },
+      body: JSON.stringify(body),
+      ...options
+    });
+    return res.json();
+  },
+
+  async put(url, body, options = {}) {
+    const res = await fetch(url, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json', ...options.headers },
+      body: JSON.stringify(body),
+      ...options
+    });
+    return res.json();
+  },
+
+  async delete(url, options = {}) {
+    const res = await fetch(url, { method: 'DELETE', ...options });
+    return res.json();
+  }
+};
+
+export { http };

package/nano/index.d.ts

@@ -0,0 +1,47 @@
+export interface ComponentOptions {
+  template: string;
+  data?: () => Record<string, unknown>;
+  methods?: Record<string, (...args: unknown[]) => unknown>;
+}
+
+export interface RouteConfig {
+  path: string;
+  component: ComponentOptions;
+}
+
+export interface StoreState extends Record<string, unknown> {}
+
+export interface Http {
+  get<T = unknown>(url: string, options?: RequestInit): Promise<T>;
+  post<T = unknown>(url: string, body: unknown, options?: RequestInit): Promise<T>;
+  put<T = unknown>(url: string, body: unknown, options?: RequestInit): Promise<T>;
+  delete<T = unknown>(url: string, options?: RequestInit): Promise<T>;
+}
+
+export declare function reactive<T extends object>(data: T): T;
+export declare function effect(fn: () => void): void;
+export declare function component(name: string, options: ComponentOptions): void;
+export declare function mount(selector: string | Element, options: ComponentOptions): Record<string, unknown>;
+export declare function router(routes: RouteConfig[]): void;
+export declare function start(containerSelector?: string): void;
+export declare function navigate(path: string): void;
+export declare function store<T extends StoreState>(initialState: T): T;
+export declare function getStore<T extends StoreState>(): T | null;
+export declare function subscribe(fn: (state: StoreState) => void): () => void;
+export declare const http: Http;
+
+declare const Nano: {
+  reactive: typeof reactive;
+  effect: typeof effect;
+  component: typeof component;
+  mount: typeof mount;
+  router: typeof router;
+  start: typeof start;
+  navigate: typeof navigate;
+  store: typeof store;
+  getStore: typeof getStore;
+  subscribe: typeof subscribe;
+  http: Http;
+};
+
+export default Nano;

package/nano/index.js

@@ -0,0 +1,23 @@
+// NanoFront - main entry point
+import { reactive, effect } from './reactive/index.js';
+import { component, mount } from './core/index.js';
+import { router, start, navigate } from './router/index.js';
+import { store, getStore, subscribe } from './store/index.js';
+import { http } from './http/index.js';
+
+const Nano = {
+  reactive,
+  effect,
+  component,
+  mount,
+  router,
+  start,
+  navigate,
+  store,
+  getStore,
+  subscribe,
+  http
+};
+
+export default Nano;
+export { reactive, effect, component, mount, router, start, navigate, store, getStore, subscribe, http };

package/nano/nano.bundle.js

@@ -0,0 +1,202 @@
+/*!
+ * NanoFront v1.0.0
+ * A minimal Vue-like frontend framework, zero dependencies, < 10KB
+ */
+(function (global) {
+  'use strict';
+
+  // ── Reactive ────────────────────────────────────────────────────────────────
+  let activeEffect = null;
+
+  function effect(fn) {
+    activeEffect = fn;
+    fn();
+    activeEffect = null;
+  }
+
+  function reactive(data) {
+    const deps = new Map();
+    function getDep(key) {
+      if (!deps.has(key)) deps.set(key, new Set());
+      return deps.get(key);
+    }
+    return new Proxy(data, {
+      get(target, key) {
+        if (activeEffect) getDep(key).add(activeEffect);
+        return target[key];
+      },
+      set(target, key, value) {
+        target[key] = value;
+        getDep(key).forEach(fn => fn());
+        return true;
+      }
+    });
+  }
+
+  // ── Render ──────────────────────────────────────────────────────────────────
+  function compile(template, data) {
+    return template.replace(/\{\{\s*(\w+)\s*\}\}/g, (_, key) => {
+      const val = data[key];
+      return val !== undefined ? val : '';
+    });
+  }
+
+  function bindEvents(el, methods, data) {
+    const events = ['click', 'input', 'change', 'submit'];
+    events.forEach(evt => {
+      el.querySelectorAll('*').forEach(node => {
+        const method = node.getAttribute('@' + evt);
+        if (!method) return;
+        node.removeAttribute('@' + evt);
+        if (methods && typeof methods[method] === 'function') {
+          node.addEventListener(evt, e => methods[method].call(data, e));
+        }
+      });
+    });
+  }
+
+  function render(container, template, data, methods) {
+    const html = compile(template, data);
+    container.innerHTML = html;
+    bindEvents(container, methods, data);
+  }
+
+  // ── Component ───────────────────────────────────────────────────────────────
+  const components = new Map();
+
+  function component(name, options) {
+    components.set(name, options);
+  }
+
+  function mount(selector, options) {
+    const container = typeof selector === 'string'
+      ? document.querySelector(selector)
+      : selector;
+    if (!container) throw new Error('Cannot find element: ' + selector);
+
+    const data = reactive(
+      typeof options.data === 'function' ? options.data() : (options.data || {})
+    );
+    const methods = options.methods || {};
+    Object.keys(methods).forEach(key => { methods[key] = methods[key].bind(data); });
+
+    effect(() => {
+      render(container, options.template, data, methods);
+      mountChildComponents(container);
+    });
+
+    return data;
+  }
+
+  function mountChildComponents(container) {
+    components.forEach((options, name) => {
+      container.querySelectorAll(name).forEach(el => {
+        const data = reactive(
+          typeof options.data === 'function' ? options.data() : (options.data || {})
+        );
+        const methods = options.methods || {};
+        Object.keys(methods).forEach(key => { methods[key] = methods[key].bind(data); });
+        effect(() => { render(el, options.template, data, methods); });
+      });
+    });
+  }
+
+  // ── Router ──────────────────────────────────────────────────────────────────
+  const routes = new Map();
+  let currentView = null;
+  let outlet = null;
+
+  function router(config) {
+    config.forEach(({ path, component: comp }) => routes.set(path, comp));
+  }
+
+  function start(containerSelector) {
+    outlet = typeof containerSelector === 'string'
+      ? document.querySelector(containerSelector || '#app')
+      : containerSelector;
+    window.addEventListener('hashchange', resolve);
+    resolve();
+  }
+
+  function resolve() {
+    const hash = location.hash.slice(1) || '/';
+    const comp = routes.get(hash) || routes.get('*');
+    if (!comp || !outlet) return;
+    if (currentView === comp) return;
+    currentView = comp;
+    mount(outlet, comp);
+  }
+
+  function navigate(path) {
+    location.hash = path;
+  }
+
+  // ── Store ───────────────────────────────────────────────────────────────────
+  let _store = null;
+  const subscribers = new Set();
+
+  function store(initialState) {
+    _store = reactive(initialState);
+    Object.keys(initialState).forEach(key => {
+      effect(() => {
+        void _store[key];
+        subscribers.forEach(fn => fn(_store));
+      });
+    });
+    return _store;
+  }
+
+  function getStore() { return _store; }
+
+  function subscribe(fn) {
+    subscribers.add(fn);
+    return () => subscribers.delete(fn);
+  }
+
+  // ── HTTP ────────────────────────────────────────────────────────────────────
+  const http = {
+    async get(url, options) {
+      const res = await fetch(url, Object.assign({ method: 'GET' }, options));
+      return res.json();
+    },
+    async post(url, body, options) {
+      options = options || {};
+      const res = await fetch(url, Object.assign({
+        method: 'POST',
+        headers: Object.assign({ 'Content-Type': 'application/json' }, options.headers),
+        body: JSON.stringify(body)
+      }, options));
+      return res.json();
+    },
+    async put(url, body, options) {
+      options = options || {};
+      const res = await fetch(url, Object.assign({
+        method: 'PUT',
+        headers: Object.assign({ 'Content-Type': 'application/json' }, options.headers),
+        body: JSON.stringify(body)
+      }, options));
+      return res.json();
+    },
+    async delete(url, options) {
+      const res = await fetch(url, Object.assign({ method: 'DELETE' }, options));
+      return res.json();
+    }
+  };
+
+  // ── Public API ──────────────────────────────────────────────────────────────
+  const Nano = {
+    reactive, effect,
+    component, mount,
+    router, start, navigate,
+    store, getStore, subscribe,
+    http
+  };
+
+  // UMD export
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = Nano;
+  } else {
+    global.Nano = Nano;
+  }
+
+}(typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : this));

package/nano/reactive/index.js

@@ -0,0 +1,31 @@
+// Reactive system using Proxy
+let activeEffect = null;
+
+function effect(fn) {
+  activeEffect = fn;
+  fn();
+  activeEffect = null;
+}
+
+function reactive(data) {
+  const deps = new Map();
+
+  function getDep(key) {
+    if (!deps.has(key)) deps.set(key, new Set());
+    return deps.get(key);
+  }
+
+  return new Proxy(data, {
+    get(target, key) {
+      if (activeEffect) getDep(key).add(activeEffect);
+      return target[key];
+    },
+    set(target, key, value) {
+      target[key] = value;
+      getDep(key).forEach(fn => fn());
+      return true;
+    }
+  });
+}
+
+export { reactive, effect };

package/nano/render/index.js

@@ -0,0 +1,272 @@
+// Template engine: Mustache interpolation + n-if + n-for + n-show + event binding
+
+// Helper: evaluate expression with data context
+function evalExpr(expr, data) {
+  try {
+    const keys = Object.keys(data);
+    const values = Object.values(data);
+    const fn = new Function(...keys, `return (${expr})`);
+    return fn(...values);
+  } catch (e) {
+    return false;
+  }
+}
+
+// Process n-for: <tag n-for="item in array">...</tag>
+function processForLoop(template, data) {
+  // Match elements with n-for attribute
+  const forRegex = /<([a-z]+)\s+n-for="(\w+)\s+in\s+(\w+)"[^>]*>/gi;
+  
+  let result = template;
+  let match;
+  const matches = [];
+  
+  // Find all n-for elements
+  while ((match = forRegex.exec(template)) !== null) {
+    matches.push({
+      fullMatch: match[0],
+      tagName: match[1],
+      itemName: match[2],
+      arrayName: match[3],
+      startIndex: match.index
+    });
+  }
+  
+  // Process from end to start to preserve indices
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const m = matches[i];
+    const array = data[m.arrayName];
+    
+    // If no array or not array, remove element
+    if (!array || !Array.isArray(array) || array.length === 0) {
+      const closeTag = `</${m.tagName}>`;
+      const closeIndex = template.indexOf(closeTag, m.startIndex);
+      if (closeIndex !== -1) {
+        const fullElement = template.substring(m.startIndex, closeIndex + closeTag.length);
+        result = result.replace(fullElement, '');
+      }
+      continue;
+    }
+    
+    // Find the element's content in original template
+    const startTagEnd = m.startIndex + m.fullMatch.length;
+    const closeTag = `</${m.tagName}>`;
+    const closeIndex = template.indexOf(closeTag, startTagEnd);
+    
+    if (closeIndex === -1) continue;
+    
+    const innerTemplate = template.substring(startTagEnd, closeIndex);
+    
+    // Generate HTML for each item
+    let itemsHtml = '';
+    array.forEach((item, idx) => {
+      let processed = innerTemplate;
+      
+      // Process nested n-for first (recursively)
+      processed = processForLoop(processed, { ...data, [m.itemName]: item, index: idx });
+      
+      // Process n-if inside the loop
+      processed = processIfInLoop(processed, item, idx, m.itemName);
+      
+      // Replace {{item.name}} and {{item.age}} patterns
+      processed = processed.replace(/\{\{\s*(\w+)\.(\w+)\s*\}\}/g, (fullMatch, obj, prop) => {
+        if (obj === m.itemName && item && typeof item === 'object') {
+          return item[prop] !== undefined ? String(item[prop]) : '';
+        }
+        return fullMatch;
+      });
+      
+      // Replace {{item}} pattern
+      processed = processed.replace(/\{\{\s*(\w+)\s*\}\}/g, (fullMatch, key) => {
+        if (key === m.itemName) {
+          return typeof item === 'object' ? '' : String(item);
+        }
+        // Check data context
+        if (data[key] !== undefined) {
+          return String(data[key]);
+        }
+        return fullMatch;
+      });
+      
+      itemsHtml += processed;
+    });
+    
+    // Replace the entire n-for element with generated items
+    const fullElement = template.substring(m.startIndex, closeIndex + closeTag.length);
+    result = result.replace(fullElement, itemsHtml);
+  }
+  
+  return result;
+}
+
+// Process n-if inside n-for loop
+function processIfInLoop(template, item, idx, itemName) {
+  let result = template;
+  
+  const ifRegex = /<([a-z]+)\s+n-if="([^"]+)"[^>]*>/gi;
+  let match;
+  const matches = [];
+  
+  while ((match = ifRegex.exec(template)) !== null) {
+    matches.push({
+      fullMatch: match[0],
+      tagName: match[1],
+      condition: match[2],
+      startIndex: match.index
+    });
+  }
+  
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const m = matches[i];
+    
+    // Evaluate condition
+    let truthy = false;
+    try {
+      if (m.condition.includes(itemName)) {
+        // Handle item.property access
+        if (m.condition.includes('.')) {
+          const parts = m.condition.split('.');
+          const prop = parts[parts.length - 1];
+          truthy = !!(item && item[prop]);
+        } else {
+          truthy = !!item;
+        }
+      } else {
+        truthy = !!idx;
+      }
+    } catch (e) {
+      truthy = false;
+    }
+    
+    const startTagEnd = m.startIndex + m.fullMatch.length;
+    const closeTag = `</${m.tagName}>`;
+    const closeIndex = result.indexOf(closeTag, startTagEnd);
+    
+    if (closeIndex === -1) continue;
+    
+    const innerContent = result.substring(startTagEnd, closeIndex);
+    const fullElement = result.substring(m.startIndex, closeIndex + closeTag.length);
+    
+    result = result.replace(fullElement, truthy ? innerContent : '');
+  }
+  
+  return result;
+}
+
+// Process n-if at root level
+function processIfDirective(template, data) {
+  let result = template;
+  
+  const ifRegex = /<([a-z]+)\s+n-if="([^"]+)"[^>]*>/gi;
+  let match;
+  const matches = [];
+  
+  while ((match = ifRegex.exec(template)) !== null) {
+    matches.push({
+      fullMatch: match[0],
+      tagName: match[1],
+      condition: match[2],
+      startIndex: match.index
+    });
+  }
+  
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const m = matches[i];
+    const truthy = evalExpr(m.condition, data);
+    
+    const startTagEnd = m.startIndex + m.fullMatch.length;
+    const closeTag = `</${m.tagName}>`;
+    const closeIndex = result.indexOf(closeTag, startTagEnd);
+    
+    if (closeIndex === -1) continue;
+    
+    const innerContent = result.substring(startTagEnd, closeIndex);
+    const fullElement = result.substring(m.startIndex, closeIndex + closeTag.length);
+    
+    result = result.replace(fullElement, truthy ? innerContent : '');
+  }
+  
+  return result;
+}
+
+// Process n-show at root level
+function processShowDirective(template, data) {
+  let result = template;
+  
+  const showRegex = /<([a-z]+)\s+n-show="([^"]+)"([^>]*)>/gi;
+  let match;
+  const matches = [];
+  
+  while ((match = showRegex.exec(template)) !== null) {
+    matches.push({
+      fullMatch: match[0],
+      tagName: match[1],
+      condition: match[2],
+      otherAttrs: match[3],
+      startIndex: match.index
+    });
+  }
+  
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const m = matches[i];
+    const truthy = evalExpr(m.condition, data);
+    
+    if (!truthy) {
+      const replacement = `<${m.tagName}${m.otherAttrs} style="display:none">`;
+      result = result.replace(m.fullMatch, replacement);
+    }
+  }
+  
+  return result;
+}
+
+function compile(template, data) {
+  let result = template;
+  
+  // 1. Process n-for (includes nested n-if)
+  result = processForLoop(result, data);
+  
+  // 2. Process n-show at root level
+  result = processShowDirective(result, data);
+  
+  // 3. Process n-if at root level
+  result = processIfDirective(result, data);
+  
+  // 4. Mustache interpolation
+  result = result.replace(/\{\{\s*(\w+)\s*\}\}/g, (_, key) => {
+    const val = data[key];
+    return val !== undefined ? val : '';
+  });
+  
+  return result;
+}
+
+function bindEvents(el, methods, data) {
+  if (!el) return;
+  
+  const events = ['click', 'input', 'change', 'submit'];
+  events.forEach(evt => {
+    try {
+      const nodes = el.querySelectorAll('*');
+      nodes.forEach(node => {
+        if (!node) return;
+        const method = node.getAttribute(`@${evt}`);
+        if (!method) return;
+        node.removeAttribute(`@${evt}`);
+        if (methods && typeof methods[method] === 'function') {
+          node.addEventListener(evt, e => methods[method].call(data, e));
+        }
+      });
+    } catch (e) {
+      // Ignore querySelectorAll errors
+    }
+  });
+}
+
+function render(container, template, data, methods) {
+  const html = compile(template, data);
+  container.innerHTML = html;
+  bindEvents(container, methods, data);
+}
+
+export { compile, render, bindEvents };

package/nano/router/index.js

@@ -0,0 +1,42 @@
+// Hash-based router
+import { mount } from '../core/index.js';
+
+const routes = new Map();
+let currentView = null;
+let outlet = null;
+
+function router(config) {
+  config.forEach(({ path, component }) => {
+    routes.set(path, component);
+  });
+}
+
+function start(containerSelector = '#app') {
+  outlet = typeof containerSelector === 'string'
+    ? document.querySelector(containerSelector)
+    : containerSelector;
+
+  window.addEventListener('hashchange', resolve);
+  resolve();
+}
+
+function resolve() {
+  const hash = location.hash.slice(1) || '/';
+  const component = routes.get(hash) || routes.get('*');
+  if (!component || !outlet) return;
+
+  if (currentView === component) return;
+  currentView = component;
+
+  try {
+    mount(outlet, component);
+  } catch (e) {
+    console.error('Mount error:', e);
+  }
+}
+
+function navigate(path) {
+  location.hash = path;
+}
+
+export { router, start, navigate };

package/nano/store/index.js

@@ -0,0 +1,31 @@
+// Global state store
+import { reactive, effect } from '../reactive/index.js';
+
+let _store = null;
+const subscribers = new Set();
+
+function store(initialState) {
+  _store = reactive(initialState);
+
+  // Notify subscribers on any change
+  const keys = Object.keys(initialState);
+  keys.forEach(key => {
+    effect(() => {
+      void _store[key]; // track
+      subscribers.forEach(fn => fn(_store));
+    });
+  });
+
+  return _store;
+}
+
+function getStore() {
+  return _store;
+}
+
+function subscribe(fn) {
+  subscribers.add(fn);
+  return () => subscribers.delete(fn);
+}
+
+export { store, getStore, subscribe };

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@baokaibo/nanofront",
+  "version": "1.0.0",
+  "description": "极简类 Vue 前端框架，零依赖，< 10KB",
+  "type": "module",
+  "main": "./nano/index.js",
+  "module": "./nano/index.js",
+  "types": "./nano/index.d.ts",
+  "bin": {
+    "nanofront": "./bin/nanofront.js"
+  },
+  "preferGlobal": true,
+  "exports": {
+    ".": {
+      "import": "./nano/index.js",
+      "types": "./nano/index.d.ts"
+    }
+  },
+  "files": [
+    "nano",
+    "bin",
+    "package.json"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0"
+  },
+  "keywords": [
+    "framework",
+    "frontend",
+    "reactive",
+    "vue-like",
+    "minimal",
+    "cli"
+  ],
+  "license": "MIT"
+}