VueVapor

简要介绍一下，尤雨溪在 2022 Conf 上设想了一种无虚拟 dom 的 vue，此项目就是对无虚拟 dom 的 vue 的一个简单实现 目前为止，编译器全部手写，已经实现了基本的,编译流程，运行时还没写，一部分功能还是需要添加一些运行时的，并且我感觉没有虚拟 dom 也能进行 diff 差异运算更新，只是有点费脑子

task

• workspace build
  • scripts
  • rollup.config.js
  • 多线程序 build
  • 修改坚听 build
• compile-core
  • 框架
    • parser ast
    • traverser ast 遍历器
• compile-sfc
  • vapor
  • setup
  • default
• compile-vapor
  • dom 解析，生成代码
  • 组件解析
  • 类似与这样的{{}}模板解析与响应编译
  • dom 事件注册
  • 响应化的属性
• runtime-resolve
• runtime-core
• dev 开发实时预览效果

编译预览

编译前

<script lang="ts" setup vapor>
import { ref } from "@vue/reactivity";
import Index from "./index.vue";
const count = ref(0);
console.log(Index);

function handle() {
  count.value++;
  console.log(count.value);
}
</script>

<template>
  <div>
    <div>
      <Index :value="count" @click="handle"></Index>
      <input :value="count" />xx{{ count }}
      <button @click="handle">Add</button>
    </div>
  </div>
</template>

<style scoped></style>

编译后

import { effect, unref } from "@vue/reactivity";
import { ref } from "@vue/reactivity";

import Index from "./index.vue";

const sa = (e, key, value) => e.setAttribute(key, value);
const ae = (e, key, value) => e.addEventListener(key, value);
const ce = document.createElement.bind(document);
const ct = document.createTextNode.bind(document);

const cc = (Component, parentEl) => {
  const instance = {
    Component,
    props: {},
    el: [],
    parentEl,
    emit(type, value) {
      this.props[`@${type}`]?.(value);
    },
  };
  Component(instance.props, instance);
  return instance;
};
export default function (props, __context) {
  const count = ref(0);
  console.log(Index);

  function handle() {
    count.value++;
    console.log(count.value);
  }
  (function () {
    const $ = __context.el;
    $[0] = __context.parentEl;
    $[1] = ct("\n  ");
    $[2] = ce("div");
    $[3] = ct("\n");
    $[4] = ct("\n    ");
    $[5] = ce("div");
    $[6] = ct("\n  ");
    $[7] = ct("\n      ");
    $[8] = cc(Index, $[5]);
    $[9] = ct("\n      ");
    $[10] = ce("input");
    $[11] = ct("xx");
    $[12] = ct("");
    $[13] = ct("\n      ");
    $[14] = ce("button");
    $[15] = ct("\n    ");
    $[16] = ct("Add");

    $[0].append($[1], $[2], $[3]);
    $[2].append($[4], $[5], $[6]);
    $[5].append($[7], $[8], $[9], $[10], $[11], $[12], $[13], $[14], $[15]);
    $[14].append($[16]);

    effect(() => {
      $[8].props["value"] = unref(count);
      $[8].props["@click"] = handle;
    });
    effect(() => {
      sa($[10], "value", String(unref(count)));
    });
    effect(() => {
      $[12].nodeValue = String(unref(count));
    });
    effect(() => {
      ae($[14], "click", handle);
    });
  })();
}

Includes

• [email protected]
• build ([email protected])
• test ([email protected])

Get started

1. 创建文件夹

mkdir FolderName

2. 进入文件夹

cd FolderName

3. 下载模板

git clone https://github.com/mekefly/templates.git -b typescript-rollup-vitest ./

git branch -m main

thisPath 代表当前仓库的连接，你可以直接在上面地址栏复制

4. 安装依赖

pnpm install

5. 删除本仓库地址

git remote remove origin

6. 开始使用