wip

benchmark/client/App.vue

@@ -1,78 +1,72 @@
 <script setup lang="ts" vapor>
-import {
- ref,
- shallowRef,
- triggerRef,
- type ShallowRef,
- createSelector,
-} from '@vue/vapor'
+import { signal, createSelector, type Signal } from '@vue/vapor'
 import { buildData } from './data'
 import { defer, wrap } from './profiling'
 
 const isVapor = !!import.meta.env.IS_VAPOR
 
-const selected = ref<number>()
-const rows = shallowRef<
+const selected = signal<number>()
+const rows = signal<
  {
  id: number
- label: ShallowRef<string>
+ label: Signal<string>
  }[]
 >([])
 
 // Bench Add: https://jsbench.me/45lzxprzmu/1
 const add = wrap('add', () => {
- rows.value.push(...buildData(1000))
- triggerRef(rows)
+ rows().push(...buildData(1000))
+ rows.set(rows())
 })
 
 const remove = wrap('remove', (id: number) => {
- rows.value.splice(
- rows.value.findIndex(d => d.id === id),
+ rows().splice(
+ rows().findIndex(d => d.id === id),
  1,
  )
- triggerRef(rows)
+ rows.set(rows())
 })
 
 const select = wrap('select', (id: number) => {
- selected.value = id
+ selected.set(id)
 })
 
 const run = wrap('run', () => {
- rows.value = buildData()
- selected.value = undefined
+ rows.set(buildData())
+ selected.set(undefined)
 })
 
 const update = wrap('update', () => {
- const _rows = rows.value
+ const _rows = rows()
  for (let i = 0, len = _rows.length; i < len; i += 10) {
  _rows[i].label.value += ' !!!'
  }
 })
 
 const runLots = wrap('runLots', () => {
- rows.value = buildData(10000)
- selected.value = undefined
+ rows.set(buildData(10000))
+ selected.set(undefined)
 })
 
 const clear = wrap('clear', () => {
- rows.value = []
- selected.value = undefined
+ rows.set([])
+ selected.set(undefined)
 })
 
 const swapRows = wrap('swap', () => {
- const _rows = rows.value
+ const _rows = rows()
  if (_rows.length > 998) {
  const d1 = _rows[1]
  const d998 = _rows[998]
  _rows[1] = d998
  _rows[998] = d1
- triggerRef(rows)
+ rows.set(rows())
  }
 })
 
 async function bench() {
  for (let i = 0; i < 30; i++) {
- rows.value = []
+ rows.set([])
  await defer()
  await runLots()
  }
@@ -99,13 +93,13 @@ const isSelected = createSelector(selected)
  <table>
  <tbody>
  <tr
- v-for="row of rows"
+ v-for="row of rows()"
  :key="row.id"
- :class="{ danger: isSelected(row.id) }"
+ :class="{ danger: selected() === row.id }"
  >
  <td>{{ row.id }}</td>
  <td>
- <a @click="select(row.id)">{{ row.label.value }}</a>
+ <a @click="select(row.id)">{{ row.label() }}</a>
  </td>
  <td>
  <button @click="remove(row.id)">x</button>

benchmark/client/data.ts

@@ -1,4 +1,4 @@
-import { shallowRef } from '@vue/vapor'
+import { signal } from '@vue/vapor'
 
 let ID = 1
 
@@ -66,7 +66,7 @@ export function buildData(count = 1000) {
  for (let i = 0; i < count; i++)
  data.push({
  id: ID++,
- label: shallowRef(
+ label: signal(
  adjectives[_random(adjectives.length)] +
  ' ' +
  colours[_random(colours.length)] +

benchmark/index.js

@@ -130,7 +130,7 @@ async function buildApp(isVapor) {
  colors.blue(`\nBuilding ${isVapor ? 'Vapor' : 'Virtual DOM'} app...\n`),
  )
 
- process.env.NODE_ENV = 'production'
+ if (!devBuild) process.env.NODE_ENV = 'production'
  const CompilerSFC = await import(
  '../packages/compiler-sfc/dist/compiler-sfc.cjs.js'
  )

packages/runtime-vapor/package.json

@@ -35,8 +35,9 @@
  },
  "homepage": "https://github.com/vuejs/core-vapor/tree/dev/packages/runtime-vapor#readme",
  "dependencies": {
- "@vue/shared": "workspace:*",
+ "@johnsoncodehk/signals": "/Users/kevin/Developer/open-source/vue-signals",
  "@vue/reactivity": "workspace:*",
- "@vue/runtime-shared": "workspace:*"
+ "@vue/runtime-shared": "workspace:*",
+ "@vue/shared": "workspace:*"
  }
 }

packages/runtime-vapor/src/apiCreateFor.ts

@@ -1,11 +1,9 @@
 import {
  type EffectScope,
- type ShallowRef,
+ type Signal,
  effectScope,
- isReactive,
- shallowRef,
- triggerRef,
-} from '@vue/reactivity'
+ signal,
+} from '@johnsoncodehk/signals'
 import { isArray, isObject, isString } from '@vue/shared'
 import {
  createComment,
@@ -24,9 +22,9 @@ import { withMemo } from './memo'
 interface ForBlock extends Fragment {
  scope: EffectScope
  state: [
- item: ShallowRef<any>,
- key: ShallowRef<any>,
- index: ShallowRef<number | undefined>,
+ item: Signal<any>,
+ key: Signal<any>,
+ index: Signal<number | undefined>,
  ]
  key: any
  memo: any[] | undefined
@@ -253,9 +251,9 @@ export const createFor = (
 
  const [item, key, index] = getItem(source, idx)
  const state = [
- shallowRef(item),
- shallowRef(key),
- shallowRef(index),
+ signal(item),
+ signal(key),
+ signal(index),
  ] as ForBlock['state']
  const block: ForBlock = (newBlocks[idx] = {
  nodes: null!, // set later
@@ -330,7 +328,7 @@ export const createFor = (
  newKey !== key.value ||
  newIndex !== index.value ||
  // shallowRef list
- (isObject(newItem) && !isReactive(newItem))
+ (isObject(newItem) && true)
  if (needsUpdate) updateState(block, newItem, newKey, newIndex)
  }
 
@@ -347,14 +345,9 @@ function updateState(
  newIndex: number | undefined,
 ) {
  const [item, key, index] = block.state
- const oldItem = item.value
  item.value = newItem
  key.value = newKey
  index.value = newIndex
-
- if (oldItem === newItem && !isReactive(oldItem)) {
- triggerRef(item)
- }
 }
 
 export function createForSlots(

packages/runtime-vapor/src/apiCreateIf.ts

@@ -1,6 +1,6 @@
 import { renderEffect } from './renderEffect'
 import { type Block, type Fragment, fragmentKey } from './apiRender'
-import { type EffectScope, effectScope } from '@vue/reactivity'
+import { type EffectScope, effectScope } from '@johnsoncodehk/signals'
 import { createComment, createTextNode, insert, remove } from './dom/element'
 
 type BlockFn = () => Block

packages/runtime-vapor/src/apiCreateSelector.ts

@@ -1,22 +1,16 @@
-import {
- type MaybeRefOrGetter,
- type ShallowRef,
- onScopeDispose,
- shallowRef,
- toValue,
-} from '@vue/reactivity'
+import { type Signal, signal } from '@johnsoncodehk/signals'
 import { watchEffect } from './apiWatch'
 
 export function createSelector<T, U extends T>(
- source: MaybeRefOrGetter<T>,
+ source: () => T,
  fn: (key: U, value: T) => boolean = (key, value) => key === value,
 ): (key: U) => boolean {
  let subs = new Map()
  let val: T
  let oldVal: U
 
  watchEffect(() => {
- val = toValue(source)
+ val = source()
  const keys = [...subs.keys()]
  for (let i = 0, len = keys.length; i < len; i++) {
  const key = keys[i]
@@ -32,11 +26,11 @@ export function createSelector<T, U extends T>(
  })
 
  return key => {
- let l: ShallowRef<boolean | undefined> & { _count?: number }
- if (!(l = subs.get(key))) subs.set(key, (l = shallowRef()))
+ let l: Signal<boolean | undefined> & { _count?: number }
+ if (!(l = subs.get(key))) subs.set(key, (l = signal()))
  l.value
  l._count ? l._count++ : (l._count = 1)
- onScopeDispose(() => (l._count! > 1 ? l._count!-- : subs.delete(key)))
+ // onScopeDispose(() => (l._count! > 1 ? l._count!-- : subs.delete(key)))
  return l.value !== undefined ? l.value : fn(key, val)
  }
 }

packages/runtime-vapor/src/apiLifecycle.ts

@@ -5,10 +5,10 @@ import {
 } from './component'
 import { warn } from './warning'
 import {
- type DebuggerEvent,
+ // type DebuggerEvent,
  pauseTracking,
  resetTracking,
-} from '@vue/reactivity'
+} from '@johnsoncodehk/signals'
 import { ErrorTypeStrings, callWithAsyncErrorHandling } from './errorHandling'
 import { toHandlerKey } from '@vue/shared'
 import { VaporLifecycleHooks } from './enums'
@@ -77,7 +77,7 @@ export const onBeforeUnmount: CreateHook = createHook(
 )
 export const onUnmounted: CreateHook = createHook(VaporLifecycleHooks.UNMOUNTED)
 
-export type DebuggerHook = (e: DebuggerEvent) => void
+export type DebuggerHook = (e: any) => void
 export const onRenderTriggered: CreateHook = createHook<DebuggerHook>(
  VaporLifecycleHooks.RENDER_TRIGGERED,
 )

packages/runtime-vapor/src/apiRender.ts

@@ -9,17 +9,13 @@ import { insert, querySelector, remove } from './dom/element'
 import { flushPostFlushCbs, queuePostFlushCb } from './scheduler'
 import { invokeLifecycle } from './componentLifecycle'
 import { VaporLifecycleHooks } from './enums'
-import {
- pauseTracking,
- proxyRefs,
- resetTracking,
- shallowReadonly,
-} from '@vue/reactivity'
+import { pauseTracking, resetTracking } from '@johnsoncodehk/signals'
 import { isArray, isFunction, isObject } from '@vue/shared'
 import { fallThroughAttrs } from './componentAttrs'
 import { VaporErrorCodes, callWithErrorHandling } from './errorHandling'
 import { endMeasure, startMeasure } from './profiling'
 import { devtoolsComponentAdded } from './devtools'
+import { proxyRefs } from '@vue/reactivity'
 
 export const fragmentKey: unique symbol = Symbol(__DEV__ ? `fragmentKey` : ``)
 
@@ -57,7 +53,7 @@ export function setupComponent(
  setupFn,
  instance,
  VaporErrorCodes.SETUP_FUNCTION,
- [__DEV__ ? shallowReadonly(props) : props, setupContext],
+ [__DEV__ ? props : props, setupContext],
  )
  resetTracking()
  }

packages/runtime-vapor/src/index.ts

@@ -162,3 +162,5 @@ export const devtools = (
 export const setDevtoolsHook = (
  __DEV__ || __ESM_BUNDLER__ ? _setDevtoolsHook : NOOP
 ) as typeof _setDevtoolsHook
+
+export * from '@johnsoncodehk/signals'

packages/runtime-vapor/src/renderEffect.ts

@@ -1,4 +1,4 @@
-import { EffectFlags, ReactiveEffect, getCurrentScope } from '@vue/reactivity'
+// import { EffectFlags, ReactiveEffect, getCurrentScope } from '@vue/reactivity'
 import { invokeArrayFns } from '@vue/shared'
 import {
  type ComponentInternalInstance,
@@ -13,15 +13,16 @@ import {
 } from './scheduler'
 import { VaporErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
 import { memoStack } from './memo'
+import { effect as effect2 } from '@johnsoncodehk/signals'
 
 export function renderEffect(cb: () => void): void {
  const instance = getCurrentInstance()
- const scope = getCurrentScope()
+ // const scope = getCurrentScope()
 
- if (scope) {
- const baseCb = cb
- cb = () => scope.run(baseCb)
- }
+ // if (scope) {
+ //  const baseCb = cb
+ //  cb = () => scope.run(baseCb)
+ // }
 
  if (instance) {
  const baseCb = cb
@@ -40,25 +41,25 @@ export function renderEffect(cb: () => void): void {
  memoCaches = memos.map(memo => memo())
  }
 
- const effect = new ReactiveEffect(() =>
+ const effect = effect2(() =>
  callWithAsyncErrorHandling(cb, instance, VaporErrorCodes.RENDER_FUNCTION),
  )
 
- effect.scheduler = () => queueJob(job)
- if (__DEV__ && instance) {
- effect.onTrack = instance.rtc
- ? e => invokeArrayFns(instance.rtc!, e)
- : void 0
- effect.onTrigger = instance.rtg
- ? e => invokeArrayFns(instance.rtg!, e)
- : void 0
- }
- effect.run()
+ // effect.scheduler = () => queueJob(job)
+ // if (__DEV__ && instance) {
+ //  effect.onTrack = instance.rtc
+ //  ? e => invokeArrayFns(instance.rtc!, e)
+ //  : void 0
+ //  effect.onTrigger = instance.rtg
+ //  ? e => invokeArrayFns(instance.rtg!, e)
+ //  : void 0
+ // }
+ // effect.run()
 
  function job() {
- if (!(effect.flags & EffectFlags.ACTIVE) || !effect.dirty) {
- return
- }
+ // if (!(effect.flags & EffectFlags.ACTIVE) || !effect.dirty) {
+ //  return
+ // }
 
  if (memos) {
  let dirty: boolean | undefined

packages/vue-vapor/package.json

@@ -58,6 +58,7 @@
  "homepage": "https://github.com/vuejs/core-vapor/tree/main/packages/vapor#readme",
  "dependencies": {
  "@vue/runtime-vapor": "workspace:*",
- "@vue/compiler-vapor": "workspace:*"
+ "@vue/compiler-vapor": "workspace:*",
+ "@johnsoncodehk/signals": "link:/Users/kevin/Developer/open-source/vue-signals"
  }
 }