# Vue 动态特性注入示例

## 输入 Vue SFC

```vue
<template>
  <div class="app">
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('Counter App')
const count = ref(0)

function increment() {
  count.value++
}

function decrement() {
  count.value--
}
</script>
```

## 输出：Enhanced HTML（带 _iris 后缀）

```html
<div_iris class="app">
  <h1_iris>{{ title }}</h1>
  <p_iris>Count: {{ count }}</p_iris>
  <button_iris @click="increment">+</button_iris>
  <button_iris @click="decrement">-</button_iris>
</div_iris>
```

**关键变化：**
- ✅ 所有 HTML 元素添加 `_iris` 后缀
- ✅ 保留 Vue 指令（@click, {{ }}）
- ✅ 特殊标签不添加后缀（template, script, style）

## 输出：Enhanced Script（注入动态特性）

```javascript
// ============================================
// Iris Vue Runtime - Dynamic Feature Handler
// ============================================

function createReactiveSystem() {
  const reactiveMap = new Map();
  
  function ref(value) {
    const wrapper = { value };
    Object.defineProperty(wrapper, 'value', {
      get() { return value; },
      set(newValue) {
        value = newValue;
        triggerUpdates();
      }
    });
    return wrapper;
  }
  
  function reactive(obj) {
    return new Proxy(obj, {
      set(target, key, value) {
        target[key] = value;
        triggerUpdates();
        return true;
      }
    });
  }
  
  function computed(fn) {
    return { get value() { return fn(); } };
  }
  
  function triggerUpdates() {
    if (typeof window !== 'undefined' && window._iris_update) {
      window._iris_update();
    }
  }
  
  return { ref, reactive, computed };
}

function createEventSystem() {
  const eventHandlers = new Map();
  
  function on(event, handler) {
    if (!eventHandlers.has(event)) {
      eventHandlers.set(event, []);
    }
    eventHandlers.get(event).push(handler);
  }
  
  function emit(event, ...args) {
    if (eventHandlers.has(event)) {
      eventHandlers.get(event).forEach(handler => handler(...args));
    }
  }
  
  function bindEvents(element) {
    const clickElements = element.querySelectorAll('[\\@click]');
    clickElements.forEach(el => {
      const handlerName = el.getAttribute('@click');
      el.addEventListener('click', () => {
        if (typeof window[handlerName] === 'function') {
          window[handlerName]();
        }
      });
      el.removeAttribute('@click');
    });
  }
  
  return { on, emit, bindEvents };
}

function compileTemplate(template) {
  function processInterpolations(html) {
    const interpolationRe = /\{\{\s*(.+?)\s*\}\}/g;
    return html.replace(interpolationRe, (match, expression) => {
      try {
        return eval(expression);
      } catch (e) {
        console.warn(`Failed to evaluate: ${expression}`, e);
        return match;
      }
    });
  }
  
  function processBindings(html) {
    const bindRe = /v-bind:([a-zA-Z-]+)="([^"]+)"/g;
    return html.replace(bindRe, (match, attr, value) => {
      try {
        const evaluatedValue = eval(value);
        return `${attr}="${evaluatedValue}"`;
      } catch (e) {
        console.warn(`Failed to evaluate binding: ${value}`, e);
        return match;
      }
    });
  }
  
  return { processInterpolations, processBindings };
}

function mountComponent(component) {
  const { ref, reactive, computed } = createReactiveSystem();
  const { on, emit, bindEvents } = createEventSystem();
  const { processInterpolations, processBindings } = compileTemplate();
  
  window.ref = ref;
  window.reactive = reactive;
  window.computed = computed;
  
  return {
    ref, reactive, computed,
    on, emit, bindEvents,
    processInterpolations, processBindings
  };
}

window._iris_vue_runtime = {
  createReactiveSystem,
  createEventSystem,
  compileTemplate,
  mountComponent
};

// ============================================
// 用户原始 Script
// ============================================

import { ref } from 'vue'

const title = ref('Counter App')
const count = ref(0)

function increment() {
  count.value++
}

function decrement() {
  count.value--
}

// ============================================
// Iris Initialization
// ============================================

(function() {
  'use strict';
  
  if (typeof window._iris_vue_runtime !== 'undefined') {
    const runtime = window._iris_vue_runtime.mountComponent();
    
    window._iris_component = {
      runtime,
      initialized: true,
      updatedAt: Date.now()
    };
    
    console.log('[Iris] Component mounted successfully');
  }
})();
```

## 处理流程

```
1. 原始 Vue SFC
   ↓
2. 展开子组件（如果有）
   ↓
3. 添加 _iris 后缀到 HTML 元素
   <div> → <div_iris>
   <button> → <button_iris>
   ↓
4. 注入 Vue Runtime 到 Script
   - 响应式系统（ref, reactive, computed）
   - 事件系统（@click 绑定）
   - 模板编译器（{{ }} 插值）
   ↓
5. 添加初始化代码
   - 挂载组件
   - 暴露到 window._iris_component
   ↓
6. 输出 Enhanced ParsedVueSFC
```

## Iris Engine 使用

```rust
use iris_sfc::load_vue_component;

let parsed = load_vue_component("src/App.vue")?;

// 获取增强后的 HTML（带 _iris 后缀）
let html_with_suffix = &parsed.template_html;
// => <div_iris class="app"><h1_iris>...</h1_iris></div_iris>

// 获取增强后的 Script（包含 Vue Runtime）
let script_with_runtime = &parsed.script_content;
// => "// Iris Vue Runtime...\n const title = ref('...'); ..."

// 获取原始 HTML（用于调试）
let original_html = &parsed.original_html;
// => <div class="app"><h1>...</h1></div>
```

## _iris 后缀的优势

1. **区分原生 HTML 和 Vue 元素**
   - `<div>` - 原生 HTML
   - `<div_iris>` - Vue 动态元素

2. **自定义渲染逻辑**
   - Iris 引擎可以识别 `_iris` 后缀
   - 应用特殊的渲染和更新策略

3. **避免命名冲突**
   - 不会与标准 HTML 元素混淆
   - 便于调试和开发者工具

4. **动态特性标记**
   - 所有带 `_iris` 的元素都支持：
     - 响应式更新
     - 事件绑定
     - 插值表达式

## 下一步

- [ ] 在 Iris Engine 中处理 `_iris` 后缀元素
- [ ] 实现 `window._iris_update` 回调
- [ ] 支持 v-if, v-for 等指令
- [ ] 优化响应式性能（依赖追踪）
