• should raise error and ignore children when v-html is present
• should raise error if has no expression

br: https://github.com/Ubugeeei/vuejs-core/tree/feat/v-model

I'm currently working on the implementation.

branch: https://github.com/Ubugeeei/vuejs-core/tree/feat/v-on-modifier

related: #4

Props

I'm going to work on props/emit from now on (I plan to separate them into separate PRs).
Regarding the design, there are already some points that I'm concerned about.
First, let's consider the design of propsOptions.

Based on some comments in previous PRs, I feel that components should be expressed as functions that return Block.
Now, in order to implement props, we need to store the runtime types, default values, and user-defined props definitions somewhere.

Discussion 1

It is likely that the interface will be defined through defineProps for now, but I'm wondering if we are assuming that users will use Props Option in the Options API format.

Discussion 2

How should we store the options information of user-defined props in the component?
Since this is an internal matter, I think it will be stored in ComponentInternalInstance.
The problem is how to store it.
Currently, in the compiler,

export default (props, { expose }) => {
  // .
  // .
  return t0;
}; // satisfies BlockFn

code like this is planned to be outputted. (Currently, the output is represented as setup or render options, but referring to the interface Block in runtime-vapor/render, it seems to be temporary.)

And ComponentInternalInstance is generated in the form of receiving BlockFn as follows:

export function render(
  comp: BlockFn,
  container: string | ParentNode
): ComponentInternalInstance {
  const instance = createComponentInstance(comp);
  // .
  // .
}

So, we need to discuss how to store user-defined props options.

Drafts

• define internal

  https://github.com/sxzz/vue-simple-props

  // how provide propsOptions? (e.g. default value) 
  export default ({ expose }) => {
    const props = useProps();
    // ...
    return t0;
  };

  export default ({ expose }) => {
    const props = useProps({ p1: { type: String, default: "v" } });
    // ...
    return t0;
  };

  ---

  const useProps = (options: PropsOptions) => {
    const i = getCurrentInstance()
    i.propsOptions = option
    // or no use options, and refer to attrs like https://github.com/sxzz/vue-simple-props
  }

• export internal options

  export default {
    props: { p1: { type: String, default: "v" } },
    blockFn: (props, { expose }) => {
      // ...
      return t0;
    },
  };

  export const props = { p1: { type: String, default: "v" } };
  
  export default (props, { expose }) => {
    // ...
  
    return t0;
  };

About

doc: https://vuejs.org/api/built-in-directives.html#v-bind

Describe the Issue

In the v-show directive, I noticed an issue regarding the incorrect parameter being used.

Steps to Reproduce

1. Set the visible default value to false in the playground.
2. Use the v-show directive with a value of true.

It appears that the source value returned in the beforeMount function is a function (_ctx.visible). Therefore, it is suggested to use the value parameter, similar to how it is used in the updated function.

// setup
const map = new Map()
const weakMap = new WeakMap()
const node = document.querySelector('#title')

// 85M ops/s ± 1.33%
// 87.99 % slower

map.set(node, { a: 'b' })
const a = map.get(node)

// 708M ops/s ± 0.47%
// Fastest

node.$$a = 'b'
const a = node.$$a

// 56M ops/s ± 0.98%
// 92.1 % slower

weakMap.set(node, { a: 'b' })
const a = weakMap.get(node)

• metadata
• dirs

Related docs: https://vuejs.org/guide/reusability/custom-directives.html#directive-hooks

Wait for #67

related: #4
PR: #47

https://github.com/krausest/js-framework-benchmark

related #4

I've submitted a PR concerning Props, so I'll proceed with the implementation of Emits based on that branch.

The current implementation of effect within the vue-vapor project does not fully conform to the standard watchEffect behavior, particularly lacking in comprehensive flush timing options.

We aim to align vue-vapor's watchEffect with the standard version by introducing detailed flush options (pre, post, sync). A fully realized flush mechanism will facilitate the implementation of the beforeUpdate directive lifecycle hook.
In addition, we plan to introduce a new onEffectCleanup API analogous to onScopeDispose, which will aid in implementing dynamic arguments for v-on. first, extend watchEffect in the runtime-vapor package. If necessary later, extract it to the reactivity package.

• Runtime (taken by @sxzz)
• Compiler

I will try to improve the unit test of existing features.

• children 985d4c7
  • don't walk the entire dom tree
  • const node = children(node, ...paths)
  • e.g const n1 = children(t0, 1, 2, 3) -> t0.childNodes[1].childNodes[2].childNodes[3]
• hoist template d10a1a3
• template abbreviation of end tag
• effect grouping [needs benchmark]
  • group by expression?
  • group by node?
• simplify v-on 38865c7
  • check undefined
  • put withKeys / withModifers inside of on
• grouping multiple interpolations 14813ce 68b0caf
• simplify renderEffect with a single statement 9ffd4b6

   _renderEffect(() => {
     _setText(n9, _ctx.remaining)
   })

• return Fragment directly, without inserting/appending/prepending 99da2e5

In the todo list, I noticed that the modifiers for v-bind are not being checked. If no one's already on it, I'd be willing to try and help implement it.

related: #4

LifeCycles

Currently, we are working on Props in parallel with #25,
but it seems that we can proceed with LifeCycles on a separate axis, so we will continue with it during the discussion as well.

Some implementations seem to be able to start, while others cannot be started yet or require discussion.
If you have editing rights for this comment, please add the situation to the Todo.

Todo

• onBeforeMount
• onMounted
  #46
• onUnmounted
  #46
• onBeforeUnmount
• onUpdated
  #89
• onBeforeUpdate
  #89
• onErrorCaptured
  #71
• onRenderTracked
• onRenderTriggered
• onActivated
• onDeactivated
• onServerPrefetch

Existing PR: #83 #78

Wait for #67

related: #99

We need two kinds of tests: test each single functions (something like test patchProp function) and you mentioned integration test (e2e): test API that the user will be using. (like createApp + ref...)

#99 (comment)

The v-show command updated hook function reported an initialization error and failed to work as expected.

We should extract transformer logic. See packages/compiler-core/src/transforms

v-memo in vapor mode is completely different, compared to vue-core. Since in vapor mode, we use effect (aka watchEffect) to track & update DOM nodes.

So to implement it, I think watch function is enough.

<div v-memo="[msg]">{{ msg }}{{ count }}</div>

Compiles to

watch([msg], () => {
  setText(...)
})

• Runtime watch function
• Compiler part

• runtime
• compiler

Setup a CI job to publish packages on npm after each push event.

Maybe I can help to support it

I will add unit tests for custom directives

See packages/vue/examples/composition/todomvc.html

Currently, we cannot run Vue Vapor on browsers yet. Wait #108

Let's copy the compilation code and inline it temporarily.

Taken by @LittleSound

Should be consistent with the existing runtime, returning a proxy object for the component instance

high impact performance

related: #4 #81

related: #4

Most of the basic APIs related to component runtime have been basically implemented or are waiting for merging. I think it's time to complete the basic implementation of the component Compiler part.

related: #4

<template>
   <button @click="inc">inc</button>
   <div v-once :id="count"></div>
</template>

The above use case id will be dynamically updated

@vue/compiler-vapor now cannot run on browsers (mode === 'function').

See

I've noticed in several PRs that there are reviews mentioning not to import runtime-core or compiler-core into vapor.

Indeed, it seems this isn't written anywhere, so we should compile the constraints and either lint the imports or include them in the contribution guide.

Even if we introduce linting, I think it might not be clear how to address it, so documentation is probably better. (Something along the lines of 'please implement by copying').

https://vuejs.org/guide/reusability/custom-directives.html#introduction

• reactive bindings
• updated hook

import {
  template,
  children,
  withDirectives,
  effect,
  setText,
  render,
  getCurrentInstance,
  on,
  ref,
  unmountComponent
} from '../src'
import type { DirectiveBinding, DirectiveHook, ComponentInternalInstance } from '../src'
import {afterEach, beforeEach, describe, expect} from "vitest";
import { defineComponent, nextTick } from "@vue/runtime-core";

let host: HTMLElement

const initHost = () => {
  host = document.createElement('div')
  host.setAttribute('id', 'host')
  document.body.appendChild(host)
}
beforeEach(() => {
  initHost()
})
afterEach(() => {
  host.remove()
})
describe('test', () =>{
  test('unmountComponent', async () => {
    let _instance: ComponentInternalInstance | null = null
    const Comp = defineComponent({
      __name: "directive",
      setup() {
        _instance = getCurrentInstance()
        const count = ref(0);
        const __returned__ = { count };
        Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
        return __returned__;
      },
      render(ctx: any){
        const t0 = template("<div></div>");
        const n0 = t0();
        const { 0: [n1] } = children(n0 as ChildNode);
        effect(() => {
          setText(n1 as Element, void 0, ctx.count);
        });
        return n0;
      }
    });
    render(Comp as any, {}, '#host')
    await nextTick()
    expect(host.innerHTML).toBe('<div>0</div>')
    unmountComponent(_instance!)
  })
})

run the unit test code and I get an error
NotFoundError: The node to be removed is not a child of this node.

I want to write test for this module. Just like this. Can i?

v-on modifiers

Runtime

Functionally unified with vue/core, we can use it directly
The withModifiers method and withKeys method in packages/runtime-dom/src/directives/vOn.ts wrap the handler function to implement the function.

Compiler

The compiler compiles separately for the categories of modifiers

<h1 @click.stop ="msg = 'a'">{{msg}}</h1>

->

 _effect(() => {
    _on(n7, "click", _withModifiers( _ctx.inc , ["stop"]));
  });

<input @keyup.enter="onEnter" />

->

 _effect(() => {
    _on(n7, "keyup", _withKeys( _ctx.inc , ["enter"]));
  });

<input @click.once="onEnter" />

->

 _effect(() => {
    _on(n7, "click",  _ctx.inc , { once: true });
  });

related: #4 #74

related: #47 (comment)

I implemented Component's Proxy in the PR that implements props, but found that it was erased in this commit.

Without it, I don't know how to access props from the render function, since the ctx I receive as argument to the render function does not include props.

this issue blocks #81, #42, #47, #54

I am assuming the following code, or am I wrong? 🤔

const Comp = defineComponent({
  props: ['foo'],
  setup() {
    const __returned__ = {}
    Object.defineProperty(__returned__, '__isScriptSetup', {
      enumerable: false,
      value: true,
    })
    return __returned__
  },
  render(_ctx: any) {
    const t0 = template('<div></div>')
    const n0 = t0()
    const {
      0: [n1],
    } = children(n0)
    watchEffect(() => {
      setText(n1, void 0, _ctx.foo) // here!
    })
    return n0
  },
})

i am trying to do the test for the module

import { ref } from '@vue/reactivity'
import { children, on, template, vModelDynamic, withDirectives } from '../src'
import { makeRender } from './_utils'
import { nextTick } from '@vue/runtime-dom'

const define = makeRender()

const triggerEvent = (type: string, el: Element) => {
  const event = new Event(type)
  el.dispatchEvent(event)
}

describe('directive: v-show', () => {
  it('should work with text input', async () => {
    const spy = vi.fn()

    const data = ref<string | null>(null)
    const { host } = define(() => {
      const t0 = template('<input />')
      const n0 = t0()
      const n1 = children(n0, 0) as HTMLInputElement
      withDirectives(n1, [[vModelDynamic, () => data.value]])
      on(n1, 'update:modelValue', val => (data.value = val))
      on(n1, 'input', () => () => spy(data.value))
      return n0
    }).render()

    const input = host.querySelector('input')!

    expect(input.value).toEqual('')

    input.value = 'foo'
    triggerEvent('input', input)
    await nextTick()
    expect(data.value).toEqual('foo')
    expect(spy).toHaveBeenCalledWith('foo')
  })
})

the last expect expect(spy).toHaveBeenCalledWith('foo') got error. Because the event 'input', () => () => spy(data.value) added before v-model 's input event. I think custom input event should add after v-model ' s input event. Maybe cache these custom event, after add v-model 's input event, add them all.

Component (Runtime)

• Base Implementation
  #5
• Basic APIs
  • props
    #25
    #40
  • emits (PR)
    #41
    #103
  • attrs
    #124
    • inheritAttrs?
  • slots
    #53
  • expose
    #75
  • provide/inject
  • SetupHelpers
  • ..
• LifeCycle Hooks
  #31
• Other APIs
  • Template Refs
  • currentInstance
    • getCurrentInstance
    • setCurrentInstance
  • AsyncComponent
  • ..
• What is the API that is the target for the drop?
  ref: https://x.com/sanxiaozhizi/status/1719734796832932062?s=20
• Integration of Vapor components and regular non-Vapor components
• ..