Remove @vue/reactive

Author: ws-rushx

README.md

@@ -5,7 +5,7 @@
 - Only ~6kb
 - Vue-compatible template syntax
 - DOM-based, mutates in place
-- Driven by `@vue/reactivity`
+- Driven by reactivity engine wrote by [Mark Backes](https://github.com/themarcba)
 
 ## Status
 
@@ -284,7 +284,7 @@ avoid flash rendreng which happen until `petite-vue` loaded, after it load it wi
 
 ### Global State Management
 
-You can use the `reactive` method (re-exported from `@vue/reactivity`) to create global state singletons:
+You can use the `reactive` method to create global state singletons:
 
 ```html
 <script type="module">

package.json

@@ -33,7 +33,6 @@
   },
   "homepage": "https://github.com/ws-rush/power-vue#readme",
   "devDependencies": {
-    "@vue/reactivity": "^3.2.27",
     "@vue/shared": "^3.2.27",
     "chalk": "^4.1.1",
     "conventional-changelog-cli": "^2.1.1",

src/app.ts

@@ -1,4 +1,4 @@
-import { reactive } from '@vue/reactivity'
+import { reactive } from './reactivity'
 import { Block } from './block'
 import { Directive } from './directives'
 import { bindContextMethods, createContext } from './context'

src/block.ts

@@ -1,7 +1,7 @@
 import { Context, createContext } from './context'
 import { walk } from './walk'
 import { remove } from '@vue/shared'
-import { stop } from '@vue/reactivity'
+// import { stop } from './reactivity'
 
 export class Block {
   template: Element | DocumentFragment
@@ -90,7 +90,8 @@ export class Block {
     this.ctx.blocks.forEach((child) => {
       child.teardown()
     })
-    this.ctx.effects.forEach(stop)
+    // here maybe we need loop on targetMap and depMap to stop
+    // this.ctx.effects.forEach((effect) => stop)
     this.ctx.cleanups.forEach((fn) => fn())
   }
 }

src/context.ts

@@ -1,19 +1,16 @@
-import {
-  effect as rawEffect,
-  reactive,
-  ReactiveEffectRunner
-} from '@vue/reactivity'
+import { effect as rawEffect, reactive } from '@vue/reactivity'
 import { Block } from './block'
 import { Directive } from './directives'
 import { queueJob } from './scheduler'
 import { inOnce } from './walk'
+
 export interface Context {
   key?: any
   scope: Record<string, any>
   dirs: Record<string, Directive>
   blocks: Block[]
   effect: typeof rawEffect
-  effects: ReactiveEffectRunner[]
+  effects: (() => void)[]
   cleanups: (() => void)[]
   delimiters: [string, string]
   delimitersRE: RegExp
@@ -32,13 +29,13 @@ export const createContext = (parent?: Context): Context => {
     effect: (fn) => {
       if (inOnce) {
         queueJob(fn)
-        return fn as any
+        return fn
       }
-      const e: ReactiveEffectRunner = rawEffect(fn, {
-        scheduler: () => queueJob(e)
+      const effect: any = rawEffect(fn, {
+        scheduler: () => queueJob(effect)
       })
-      ctx.effects.push(e)
-      return e
+      ctx.effects.push(effect)
+      return effect
     }
   }
   return ctx
@@ -52,8 +49,6 @@ export const createScopedContext = (ctx: Context, data = {}): Context => {
   const reactiveProxy = reactive(
     new Proxy(mergedScope, {
       set(target, key, val, receiver) {
-        // when setting a property that doesn't exist on current scope,
-        // do not create it on the current scope and fallback to parent scope.
         if (receiver === reactiveProxy && !target.hasOwnProperty(key)) {
           return Reflect.set(parentScope, key, val)
         }

src/directives/index.ts

@@ -1,5 +1,5 @@
 import { Context } from '../context'
-import { effect as rawEffect } from '@vue/reactivity'
+import { effect as rawEffect } from '../reactivity'
 import { bind } from './bind'
 import { on } from './on'
 import { show } from './show'

src/index.ts

@@ -1,7 +1,7 @@
 export { define } from './define'
 export { createApp } from './app'
 export { nextTick } from './scheduler'
-export { reactive } from '@vue/reactivity'
+export { reactive } from './reactivity'
 
 import { createApp } from './app'
 

src/reactivity.ts

@@ -0,0 +1,88 @@
+// ----------------------------------------------------------------
+// Vue 3 Reactivity
+// Marc Backes (@themarcba)
+// ----------------------------------------------------------------
+
+let activeEffect: (() => void) | null = null;
+const targetMap = new WeakMap<object, Map<any, Set<() => void>>>();
+
+// Register an effect
+function track(target: object, key: any) {
+  // Get depsMap from targetMap
+  let depsMap = targetMap.get(target);
+  if (!depsMap) {
+    // new depsMap if it doesn't exist yet
+    depsMap = new Map();
+    targetMap.set(target, depsMap);
+  }
+
+  // Get dep from depsMap
+  let dep = depsMap.get(key);
+  if (!dep) {
+    // new dep if it doesn't exist yet
+    dep = new Set();
+    depsMap.set(key, dep);
+  }
+
+  // Add effect
+  if (activeEffect) dep.add(activeEffect);
+}
+
+// Execute all registered effects for the target/key combination
+function trigger(target: object, key: any) {
+  // Get depsMap from targetMap
+  const depsMap = targetMap.get(target);
+  // If there is no depsMap, no need to resume
+  if (!depsMap) return;
+
+  // Get dep from depsMap
+  const dep = depsMap.get(key);
+  // If there is no dep, no need to resume
+  if (!dep) return;
+
+  // Execute all effects
+  dep.forEach((effect) => effect());
+}
+
+// Makes an object "reactive". Changes will be triggered once the property is tracked
+function reactive<T extends object>(target: T): T {
+  const handler: ProxyHandler<T> = {
+    // Intercept getter
+    get(target, key, receiver) {
+      const result = Reflect.get(target, key, receiver);
+      track(target, key);
+      return result;
+    },
+    // Intercept setter
+    set(target, key, value, receiver) {
+      const result = Reflect.set(target, key, value, receiver);
+      trigger(target, key); // trigger a change in the target
+      return result;
+    },
+  };
+
+  return new Proxy(target, handler);
+}
+
+// Watcher
+function effect(fn: () => void) {
+  activeEffect = fn;
+  // Only execute when there is an activeEffect
+  if (activeEffect) activeEffect();
+  activeEffect = null;
+
+    // Return the function for easier cleanup
+    return fn;
+
+
+}
+
+// function stop(effect: () => void) {
+//     for (const [target, depsMap] of targetMap) {
+//       for (const depSet of depsMap.values()) {
+//         depSet.delete(effect);
+//       }
+//     }
+// }  
+
+export { reactive, effect };