<!DOCTYPE html>
<html>
<head>
    <title>RealDom — Hello World</title>
    <script src="https://cxfjh.cn/js/rd/0.1.0.js"></script>
</head>
<body>
    <div>
        <h1>{{ message }}</h1>
        <p>计数器: {{ counter }}</p>
        <button r-click="counter.value++">增加</button>
        <button r-click="counter.value--">减少</button>
        <label>
            <input type="text" r-model="input">
            <span>姓名: {{ input }}</span>
        </label>
    </div>

    <script>
        const { ref, provide, onMounted } = RealDom;

        // 创建响应式数据
        const message = ref("Hello RealDom!");
        const counter = ref(10);

        // 向根作用域注入数据，使 r-model 等指令可用
        const input = ref("Hello");
        provide({ input });

        // DOM 渲染完成后执行
        onMounted(() => console.log("应用已启动"));
    </script>
</body>
</html>

<div r-data="{title: '我的待办事项', input: '', list: [{ text: '学习 RealDom', done: false }]}">
    <h2>{{ title }}</h2>
    <div>
        <input type="text" r-model="input" placeholder="输入待办事项...">
        <button r-click="list.push({text: input, done: false})">添加</button>
    </div>
    <div r-for="list">
        <span r-click="list[index].done = !list[index].done">
            {{ value.done ? '✓' : '○' }} {{ value.text }}
        </span>
        <span r-click="list.splice(index, 1)">×</span>
    </div>
    <p>总数: {{ list.length }} | 已完成: {{ list.filter(value => value.done).length }}</p>
</div>

数据变更 → Proxy 拦截 → 依赖收集 → 精准通知 → 批量异步更新 → DOM 渲染

const { ref } = RealDom;

// 创建响应式引用
const count = ref(0);
const name = ref("张三");

// JavaScript 代码中通过 .value 读写
console.log(count.value); // 0
count.value++;            // 修改值，触发视图更新
name.value = "李四";      // 修改值，触发视图更新

const { reactive } = RealDom;

// 对象响应式（深层嵌套自动代理）
const user = reactive({
    name: "李四",
    age: 20,
    address: { city: "北京" }
});

// 直接修改属性，无需 .value
user.age = 21;
user.address.city = "上海";  // 深层属性也自动响应

// 数组响应式
const list = reactive([1, 2, 3]);
list.push(4);          // 变异方法自动触发更新
list.splice(0, 1);     // splice 也自动响应
list[0] = 100;         // 索引赋值也自动响应

const { provide, ref } = RealDom;
const count = ref(0);
provide({ count });  // 注入后模板中可直接使用

const { watch, ref, reactive } = RealDom;

// 监听 ref
const count = ref(0);
watch(() => count.value, (newVal, oldVal) => {
    console.log(`计数从 ${oldVal} 变为 ${newVal}`);
});

// 监听 reactive 对象属性
const user = reactive({ name: "张三", age: 20 });
watch(() => user.age, (newAge, oldAge) => {
    console.log(`年龄从 ${oldAge} 变为 ${newAge}`);
}, { immediate: true });  // 立即执行一次

// 监听多个值
watch(
    () => [user.name, user.age],
    ([newName, newAge], [oldName, oldAge]) => {
        console.log(`${oldName}→${newName}, ${oldAge}→${newAge}`);
    }
);

// 只执行一次
const unwatch = watch(() => count.value, () => {
    console.log("count 变化了（仅触发一次）");
}, { once: true });

// 手动停止监听
// unwatch();

const { dom } = RealDom;

// 定义组件
const UserCard = dom("user-card", {
    template: `
        <div class="card">
            <h2>{{ $props.title }}</h2>
            <p>姓名: {{ name }}</p>
            <p ref="age">年龄: {{ age }}</p>
            <button r-click="grow()">长大一岁</button>
        </div>
    `,

    style: `
        .card {
            border: 1px solid #ddd;
            padding: 16px;
            border-radius: 8px;
        }
        .card button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
        }
    `,

    script: ({ $props, $refs }, { ref }) => {
        // setup 外定义的变量需要在 setup 中返回
        const name = ref("张三");

        const setup = (ctx) => {
            // ctx 上定义的变量无需返回，模板中直接可用
            ctx.age = ref(20);

            const grow = () => {
              ctx.age.value++;
              console.log($props.title, $refs.age.innerHTML)
            };

            // 手动返回的变量优先级高于 ctx 上的变量
            return { name, grow };
        };

        function mounted() {
            console.log("组件已挂载到 DOM");
            console.log(name.value);
            console.log(this.age.value);    // 通过 this 访问 ctx 上的变量
        }

        function unmounted() {
            console.log("组件即将销毁");
        }

        return { setup, mounted, unmounted };
    },

    props: {
        title: "默认标题",
    },
});

// 手动挂载组件
const instance = UserCard({
    props: { title: "用户信息" },
    to: "#app",
});

<script>
const { onMounted } = RealDom;

onMounted(() => {
    console.log("DOM 已准备就绪");
    // 可以安全地操作 DOM 元素
});
</script>

<div r-if="isVisible">这会根据条件显示或隐藏</div>
<div r-if="count.value > 10">当 count 大于 10 时显示</div>
<div r-if="user.loggedIn && user.role === 'admin'">管理员面板</div>

<script>
    const { ref, reactive } = RealDom;

    const isVisible = ref(true);
    const count = ref(5);
    const user = reactive({ loggedIn: true, role: "admin" });
</script>

<!-- 基础数组 -->
<ul>
    <li r-for="items">{{ value }}</li>
</ul>

<!-- 对象数组 + 自定义变量名 -->
<div r-for="users" value="user" index="i">
    <p>{{ i + 1 }}. {{ user.name }} — {{ user.age }}岁</p>
</div>

<!-- 配合 key 提升性能 -->
<div r-for="products" key="id">
    <h3>{{ value.title }}</h3>
</div>

<!-- 循环 5 次，索引从 1 开始 -->
<div r-for="5" start="1">第 {{ index }} 次</div>

<!-- 响应式变量控制次数 -->
<div r-for="loopCount">{{ index }}</div>

<!-- 嵌套循环（九九乘法表） -->
<div r-for="outer" index="i" start="1">
    <div r-for="i" index="j" start="1">
        {{ j }} × {{ i }} = {{ i * j }}
    </div>
</div>

<script>
const { ref, reactive } = RealDom;

const items = ref(["苹果", "香蕉", "橙子"]);
const loopCount = ref(3);
const outer = ref(3);

const users = reactive([
    { name: "张三", age: 25 },
    { name: "李四", age: 30 },
]);

const products = reactive([
    { id: 1, title: "笔记本电脑", price: 5999 },
    { id: 2, title: "手机", price: 3999 },
]);
</script>

<!-- 文本输入 -->
<input type="text" r-model="inputValue" placeholder="请输入内容">
<p>当前输入: {{ inputValue }}</p>

<!-- 数字输入 -->
<input type="number" r-model="numberValue">
<p>数字: {{ numberValue }}</p>

<!-- 复选框 -->
<input type="checkbox" r-model="isChecked"> 我同意条款
<p>状态: {{ isChecked }}</p>

<!-- 单选按钮 -->
<input type="radio" r-model="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" r-model="gender" value="female" id="female">
<label for="female">女</label>
<p>选择: {{ gender }}</p>

<!-- 下拉选择 -->
<select r-model="selectedOption">
    <option value="">请选择</option>
    <option value="a">选项A</option>
    <option value="b">选项B</option>
</select>
<p>选择: {{ selectedOption }}</p>

<script>
    const { provide, ref } = RealDom;

    const inputValue = ref("");
    const numberValue = ref(0);
    const isChecked = ref(false);
    const gender = ref("");
    const selectedOption = ref("");

    // 在 <script> 中定义的变量需要 provide 才能在 r-model 中使用
    provide({ inputValue, numberValue, isChecked, gender, selectedOption });
</script>

<!-- 基础点击 -->
<button r-click="handleClick()">点击我</button>

<!-- 双击 -->
<button r-click="counter.value++" dblclick>双击增加 {{ counter.value }}</button>

<!-- 键盘事件 + 按键过滤 -->
<input r-click="submit()" keydown="Enter" placeholder="按回车提交">

<!-- 键盘事件使用别名 -->
<input r-click="close()" keydown="esc" placeholder="按 ESC 关闭">

<script>
    const { ref } = RealDom;

    const counter = ref(0);

    const handleClick = () => console.log("按钮被点击了");
    const submit = () => console.log("提交表单");
    const close = () => console.log("关闭弹窗");
</script>

<!-- 基础用法 -->
<div r-data="{ name: 'RealDom', version: '0.1.0', features: ['轻量', '高性能'] }">
    <h1>{{ name }} v{{ version }}</h1>
    <ul>
        <li r-for="features">{{ value }}</li>
    </ul>
</div>

<!-- 嵌套使用 + r-model + r-click -->
<div r-data="{user: {name: '张三', age: 25}, count: 0}">
    <p>姓名: {{ user.name }}</p>
    <p>年龄: {{ user.age }}</p>
    <p><input r-model="count"> 当前计数: {{ count }}</p>
    <button r-click="user.age++">增长一岁</button>
    <button r-click="_.count++">增加计数</button>
</div>

<!-- 自动请求（GET） -->
<div r-api="https://lv.cxfjh.cn/loves/api/public/wish" list="data">
    <p>{{ value.id }}. {{ value.title }}</p>
</div>

<!-- 手动触发 + 自定义配置 -->
<div r-api="https://lv.cxfjh.cn/loves/api/public/wish" list="data" method="GET" manual refresh="#btn">
    <p>{{ value.title }}</p>
</div>
<button id="btn">点击加载数据</button>

<!-- POST 请求 + 自定义请求头 -->
<div r-api="url" list="data" method="POST" headers="requestHeaders" data-body="requestBody">
    <p>{{ value.name }}</p>
</div>

<!-- 手动渲染 + 自定义变量名 -->
<div r-api="url" list="data" method="GET" manual refresh="#loadBtn" arr="users">
    <span>请求状态: {{ _manual ? '成功' : '加载中...' }}</span>
    <div r-for="users">
        <p>{{ value.id }}. {{ value.title }}</p>
    </div>
</div>
<button id="loadBtn">点击加载</button>

<script>
    const { ref } = RealDom;
    
    const url = ref("https://lv.cxfjh.cn/loves/api/public/wish");

    const requestHeaders = {
        "Authorization": "Bearer token123",
        "Content-Type": "application/json",
    };

    const requestBody = ref({ content: "Hello RealDom" });
</script>

<!-- 基础挂载 -->
<div r-dom="user-card" id="user1"></div>

<!-- 传递 Props -->
<div r-dom="user-card" $title="'用户信息'" $email="'test@qq.com'"></div>

<!-- 动态 Props -->
<div r-dom="user-card" $title="userTitle" $count="10"></div>

<script>
    const { ref, onMounted } = RealDom;

    const userTitle = ref("动态标题");
    
    // 可通过 cpInsts.get 获取 r-dom 注册组件的实例
    let user1;
    onMounted(() => {
      user1 = RealDom.cpInsts.get(document.querySelector("#user1"))
    })
</script>

<!-- 路由内容 -->
<div r-page="home">
  <h3>【首页】 我是 view 容器的内容</h3>
</div>
<div r-page="settings" &route="view">
  <h3>【设置】 我是 view 容器的内容</h3>
</div>

<!-- 路由内容 -->
<div r-page="about" &route="info">
  <h3>【关于】 我是 info 容器的内容</h3>
</div>
<div r-page="mine" &route="info">
  <h3>【我的】 我是 info 容器的内容</h3>
</div>

<!-- 路由容器 -->
<div>
  <h1>view 容器</h1>
  <div route="view"></div>
</div>
<div>
  <h1>info 容器</h1>
  <div route="info"></div>
</div>

<!-- 路由导航 -->
<button r-route="home" route-active="r-x">view首页</button>
<button r-route="about" route-active>info关于</button>
<button r-route="settings" route-active>view设置</button>
<button r-click="router.nav('mine')">info我的</button>

<script>
  const { router } = RealDom;

  // 路由激活时触发
  router.add("mine", () => {
    console.log("路由激活");
  }, "info");

  router.add("about", () => {
    console.log("路由激活");
  }, "info");
</script>

dom("demo", {
    template: `
        <div>
            <h1 ref="title">标题</h1>
            <p ref="content">内容</p>
            <button r-click="changeStyle()">修改样式</button>
        </div>
    `,

    script: ({ $refs }) => {
        const setup = (ctx) => {
            ctx.changeStyle = () => $refs.title.style.color = "blue";
        };

        const mounted = () => {
            // $refs 在 mounted 中可用
            console.log($refs.title);     // <h1> 元素
            console.log($refs.content);   // <p> 元素
            $refs.title.style.color = "red";
        }

        return { setup, mounted };
    },
});

<!-- 声明页面 -->
<div r-page="home" &route="view"><h3>首页</h3></div>
<div r-page="about" &route="info"><h3>关于</h3></div>
<!-- 容器 -->
<div route="view"></div>
<div route="info"></div>

<p>{{ isLoggedIn.value ? '欢迎回来' : '请登录' }}</p>
<p>未完成: {{ tasks.filter(t => !t.completed).length }}</p>
<div class="{{ isActive.value ? 'active' : '' }}">动态类名</div>
<div style="color: {{ color }}; font-size: {{ size }}px;">动态样式</div>

const { regDir, parser, onElRemove, initDir } = RealDom;

regDir("r-tooltip", (el, expr, scope, deps) => {
    if (!initDir(el, expr, scope, "r-tooltip", "rTooltip")) return;
    const text = parser.parse(expr, scope, deps);
    el.setAttribute("title", String(text));
    onElRemove(el, () => el.removeAttribute("title"));
});

数据变更1 → batch.add(fn1) ┐
数据变更2 → batch.add(fn2) ├── 同一帧收集
数据变更3 → batch.add(fn3) ┘
                ↓  requestAnimationFrame
      batch._execute() → 遍历快照 → 一次性 DOM 更新

const { compile, reactive } = RealDom;
const scope = reactive({ name: "RealDom" });
const el = document.getElementById("dynamic");
el.innerHTML = `<p>{{ name }}</p>`;
compile(el, scope);  // 编译动态插入的 HTML

const { Dep } = RealDom;
const dep = new Dep();
dep.subscribe(() => console.log("全量通知"));
dep.subscribe(() => console.log("精准通知"), "name");
dep.notify("name");  // 精准 → 全量 降级策略
dep.subs     // Set<Function>          全量订阅者
dep.varSubs  // Map<string, Set<Fn>>  精准订阅者

const { onElRemove } = RealDom;
const id = setInterval(() => console.log("轮询"), 1000);
onElRemove(el, () => clearInterval(id));  // 元素移除时自动清理

const { regDir, parser, initDir, onElRemove } = RealDom;
regDir("r-my-directive", (el, expr, scope, deps) => {
    if (!initDir(el, expr, scope, "r-my-directive", "rMyDirective")) return;
    const value = parser.parse(expr, scope, deps);
    // ... 执行业务逻辑 ...
    onElRemove(el, () => { /* 清理资源 */ });
});

< r-data="{count: 0, user: {age: 20}}">
    <button> r-click="_.count++">修改基本类型</button>
    <button> r-click="user.age++">修改对象属性</button>
</div>