wip

benchmark/client/App.vue

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

benchmark/client/data.ts

@@ -1,4 +1,4 @@
-import { signal } from '@vue/vapor'
+import { shallowRef } 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: signal(
+ label: shallowRef(
  adjectives[_random(adjectives.length)] +
  ' ' +
  colours[_random(colours.length)] +

packages/runtime-vapor/src/apiCreateFor.ts

@@ -3,7 +3,7 @@ import {
  type ShallowRef,
  effectScope,
  shallowRef,
-} from '/Users/johnsonchu/Desktop/GitHub/refs/vue'
+} from '@johnsoncodehk/signals/vue'
 import { isArray, isObject, isString } from '@vue/shared'
 import {
  createComment,

packages/runtime-vapor/src/apiCreateIf.ts

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

packages/runtime-vapor/src/apiCreateSelector.ts

@@ -1,19 +1,16 @@
-import {
- type ShallowRef,
- shallowRef,
-} from '/Users/johnsonchu/Desktop/GitHub/refs/vue'
-import { watchEffect } from './apiWatch'
+import { type ShallowRef, shallowRef } from '@johnsoncodehk/signals/vue'
+import { renderEffect } from './renderEffect'
 
 export function createSelector<T, U extends T>(
- source: () => T,
+ source: ShallowRef<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 = source()
+ renderEffect(() => {
+ val = source.value
  const keys = [...subs.keys()]
  for (let i = 0, len = keys.length; i < len; i++) {
  const key = keys[i]

packages/runtime-vapor/src/apiLifecycle.ts

@@ -8,7 +8,7 @@ import {
  // type DebuggerEvent,
  pauseTracking,
  resetTracking,
-} from '/Users/johnsonchu/Desktop/GitHub/refs/vue'
+} from '@johnsoncodehk/signals/vue'
 import { ErrorTypeStrings, callWithAsyncErrorHandling } from './errorHandling'
 import { toHandlerKey } from '@vue/shared'
 import { VaporLifecycleHooks } from './enums'

packages/runtime-vapor/src/apiRender.ts

@@ -9,10 +9,7 @@ import { insert, querySelector, remove } from './dom/element'
 import { flushPostFlushCbs, queuePostFlushCb } from './scheduler'
 import { invokeLifecycle } from './componentLifecycle'
 import { VaporLifecycleHooks } from './enums'
-import {
- pauseTracking,
- resetTracking,
-} from '/Users/johnsonchu/Desktop/GitHub/refs/vue'
+import { pauseTracking, resetTracking } from '@johnsoncodehk/signals/vue'
 import { isArray, isFunction, isObject } from '@vue/shared'
 import { fallThroughAttrs } from './componentAttrs'
 import { VaporErrorCodes, callWithErrorHandling } from './errorHandling'

packages/runtime-vapor/src/index.ts

@@ -4,7 +4,7 @@ export const version: string = __VERSION__
 export {
  // core
  type Ref,
- type ShallowRef,
+ // type ShallowRef,
  type DebuggerEvent,
  TrackOpTypes,
  TriggerOpTypes,
@@ -26,7 +26,7 @@ export {
  // advanced
  customRef,
  triggerRef,
- shallowRef,
+ // shallowRef,
  shallowReactive,
  shallowReadonly,
  markRaw,
@@ -163,4 +163,4 @@ export const setDevtoolsHook = (
  __DEV__ || __ESM_BUNDLER__ ? _setDevtoolsHook : NOOP
 ) as typeof _setDevtoolsHook
 
-export * from '/Users/johnsonchu/Desktop/GitHub/refs/vue'
+export * from '@johnsoncodehk/signals/vue'

packages/runtime-vapor/src/renderEffect.ts

@@ -16,7 +16,7 @@ import {
  ReactiveEffect,
  effect as effect2,
  getCurrentScope,
-} from '/Users/johnsonchu/Desktop/GitHub/refs/vue'
+} from '@johnsoncodehk/signals/vue'
 
 export function renderEffect(cb: () => void): void {
  const instance = getCurrentInstance()