From 8fbf6da5e03f8881d276f734a42171f6e1cb544b Mon Sep 17 00:00:00 2001
From: Luca Fabbian <luca.fabbian.1999@gmail.com>
Date: Wed, 8 Nov 2023 15:07:53 +0100
Subject: [PATCH] Added `watchEffect`

---
 README.md    | 31 ++++++++++++++++++++++++-------
 src/index.ts |  2 +-
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index daeb4a5..a950e1c 100644
--- a/README.md
+++ b/README.md
@@ -9,9 +9,9 @@
 
 ## Status
 
-- `petite-vue` is a great and kinda stable library, but it's development inactive for now, so I decided make this fork to continue development. feel free to open issue or PR.
+- `petite-vue` it's not mantained anymore, hence we will provide bug fixes and handle feature requests. Feel free to open issue or PR.
+- this fork is focused on web components, but we will provide new generic features too
 
-- my focus is support plugins, and better support fo web components
 
 ## Usage
 
@@ -315,6 +315,22 @@ You can use the `reactive` method (re-exported from `@vue/reactivity`) to create
 </div>
 ```
 
+Use `watchEffect` to re-run a function every time its dependencies changes.
+
+```js
+
+import { watchEffect, reactive } from 'https://unpkg.com/pico-vue?module'
+
+const store = reactive({
+  count: 0,
+})
+
+watchEffect( () => console.log(store.count))
+
+store.count++
+
+```
+
 ### Custom Directives
 
 Custom directives are also supported but with a different interface:
@@ -372,7 +388,7 @@ createApp({
 
 ### Use Plugins
 
-You can write custome directive then distrbute it as a pacage, then add it to create vue, like:
+You can write custome directive then distrbute it as a package, then add it to create vue, like:
 
 ```html
 <div v-scope="{counter: 0}" v-log="inside pico-vue scope">
@@ -381,7 +397,7 @@ You can write custome directive then distrbute it as a pacage, then add it to cr
 
 <script type="module">
   import log from './log'
-  import { createApp } from 'peteite-vue'
+  import { createApp } from 'pico-vue'
   createApp().use(log).mount()
 </script>
 ```
@@ -405,19 +421,20 @@ Check out the [examples directory](https://github.com/ws-rush/pico-vue/tree/main
 
 ## Features
 
-### `pico-vue` only
+### `pico-vue`/`petite-vue` only
 
 - `v-scope`
 - `v-effect`
 - `@vue:mounted` & `@vue:unmounted` events
-- `$root` refer to component root element
+- `$root` refers to the component root element
 
-### Has Different Behavior
+### Different Behavior from `petite-vue`
 
 - In expressions, `$el` points to the current element the directive is bound to (instead of component root element which accessed by `$root`)
 - `createApp()` accepts global state instead of a component
 - Components are simplified into object-returning functions
 - Custom directives have a different interface
+- exported `watchEffect`
 
 ### Vue Compatible
 
diff --git a/src/index.ts b/src/index.ts
index 10cc9e0..17574b4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,6 @@
 export { createApp } from './app'
 export { nextTick } from './scheduler'
-export { reactive } from '@vue/reactivity'
+export { reactive, effect as watchEffect } from '@vue/reactivity'
 
 import { createApp } from './app'