feat: add v-init

Author: yyx990803

README.md

@@ -42,9 +42,17 @@ Or, use the ES modules build:
 <script>
 ```
 
+### `v-init`
+
+Use `v-init` to execute one-off inline statements when an element is processed:
+
+```html
+<div id="foo" v-init="console.log($el.id)"></div>
+```
+
 ### `v-effect`
 
-Use `v-effect` to execute inline reactive statements:
+Use `v-effect` to execute **reactive** inline statements:
 
 ```html
 <div v-scope="{ count: 0 }">
@@ -53,6 +61,8 @@ Use `v-effect` to execute inline reactive statements:
 </div>
 ```
 
+The effect uses `count` which is a reactive data source, so it will re-run whenever `count` changes.
+
 ### Global Data
 
 The `createApp` function accepts a data object that serves as the root scope for all expressions. This can be used for simple global state management:
@@ -161,6 +171,7 @@ const html = ({ el, get, effect }) => {
 ### `petite-vue` only
 
 - `v-scope`
+- `v-init`
 - `v-effect`
 
 ### Has Different Behavior

src/directives/bind.ts

@@ -75,7 +75,11 @@ const setProp = (
         }
       }
     }
-  } else if (key in el && !forceAttrRE.test(key)) {
+  } else if (
+    !(el instanceof SVGElement) &&
+    key in el &&
+    !forceAttrRE.test(key)
+  ) {
     // @ts-ignore
     el[key] = value
     if (key === 'value') {

src/directives/index.ts

@@ -6,6 +6,7 @@ import { show } from './show'
 import { text } from './text'
 import { html } from './html'
 import { model } from './model'
+import { init } from './init'
 import { effect } from './effect'
 
 export interface Directive<T = Element> {
@@ -29,5 +30,6 @@ export const builtInDirectives: Record<string, Directive<any>> = {
   text,
   html,
   model,
+  init,
   effect
 }

src/directives/init.ts

@@ -0,0 +1,5 @@
+import { Directive } from '.'
+
+export const init: Directive = ({ get }) => {
+  get()
+}