From 2525578ecb5a6fcdfa3be2cbdadb25f796dd0c44 Mon Sep 17 00:00:00 2001 From: wusaby-rush <19160044@su.edu.ye> Date: Sat, 16 Jul 2022 14:18:17 +0000 Subject: [PATCH 01/19] Add petite-vue plugins support --- README.md | 29 +++++++++++++++++++++++++++++ src/app.ts | 5 +++++ 2 files changed, 34 insertions(+) diff --git a/README.md b/README.md index efa2241..0dd84fa 100644 --- a/README.md +++ b/README.md @@ -306,6 +306,35 @@ createApp({ }).mount() ``` +### Use Plugins + +You can write custome directive then distrbute it as a pacage, then add it to create vue, like: + +```html +
+ +
+ + +``` + +A plugin code similar to vue plugins code: + +```js +// inside log.js plugin file +export default { + install: (app, options) => { + app.directive('log', ({exp}) => { + console.log(exp) + }) + } +} +``` + ## Examples Check out the [examples directory](https://github.com/vuejs/petite-vue/tree/main/examples). diff --git a/src/app.ts b/src/app.ts index 4a17bbc..e0e2107 100644 --- a/src/app.ts +++ b/src/app.ts @@ -42,6 +42,11 @@ export const createApp = (initialData?: any) => { } }, + use(plugin: any, options = {}) { + plugin.install(this, options) + return this + }, + mount(el?: string | Element | null) { if (typeof el === 'string') { el = document.querySelector(el) From b66a6dd7dd850bcc3c6f2929419f1e454dbdad8d Mon Sep 17 00:00:00 2001 From: wusaby-rush Date: Mon, 29 Aug 2022 03:03:01 +0300 Subject: [PATCH 02/19] Add `$root` refer to component root element Some times like in dialogs we need access to root component from child nodes, also it is a way to access root element from `v-scope` . the next snippet from another PR to expose `$el` to scope, but this PR can solve the same problem also ```html ``` --- README.md | 11 ++++++++++- src/walk.ts | 1 + tests/ref.html | 3 ++- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0dd84fa..0661cd7 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,14 @@ {{ count }} + + + ``` - Use `v-scope` to mark regions on the page that should be controlled by `petite-vue`. @@ -346,10 +354,11 @@ Check out the [examples directory](https://github.com/vuejs/petite-vue/tree/main - `v-scope` - `v-effect` - `@vue:mounted` & `@vue:unmounted` events +- `$root` refer to component root element ### Has Different Behavior -- In expressions, `$el` points to the current element the directive is bound to (instead of component root element) +- 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 diff --git a/src/walk.ts b/src/walk.ts index f996461..0c8976d 100644 --- a/src/walk.ts +++ b/src/walk.ts @@ -40,6 +40,7 @@ export const walk = (node: Node, ctx: Context): ChildNode | null | void => { // v-scope if ((exp = checkAttr(el, 'v-scope')) || exp === '') { const scope = exp ? evaluate(ctx.scope, exp) : {} + scope.$root = el ctx = createScopedContext(ctx, scope) if (scope.$template) { resolveTemplate(el, scope.$template) diff --git a/tests/ref.html b/tests/ref.html index ccb71fa..989587d 100644 --- a/tests/ref.html +++ b/tests/ref.html @@ -9,7 +9,8 @@ v-scope="{ dynamicRef: 'x', show: true }" v-effect="console.log({ x: $refs.x, y: $refs.y, input: $refs.input })" > -

Accessing root el: id is {{ $refs.root.id }}

+

Accessing root el (with ref): id is {{ $refs.root.id }}

+

Accessing root el (with $root): id is {{ $refs.root.id }}

Span with dynamic ref From 980daf577fd7e31b5a3239db10fcec18dbce2970 Mon Sep 17 00:00:00 2001 From: wusaby-rush Date: Mon, 29 Aug 2022 18:27:32 +0300 Subject: [PATCH 03/19] Change scope of ref with `v-scope` --- src/walk.ts | 4 ++++ tests/ref.html | 6 +++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/walk.ts b/src/walk.ts index 0c8976d..426406e 100644 --- a/src/walk.ts +++ b/src/walk.ts @@ -15,6 +15,7 @@ const modifierRE = /\.([\w-]+)/g export let inOnce = false export const walk = (node: Node, ctx: Context): ChildNode | null | void => { + const parentCtx = ctx const type = node.nodeType if (type === 1) { // Element @@ -55,6 +56,9 @@ export const walk = (node: Node, ctx: Context): ChildNode | null | void => { // ref if ((exp = checkAttr(el, 'ref'))) { + if (ctx !== parentCtx) { + applyDirective(el, ref, `"${exp}"`, parentCtx) + } applyDirective(el, ref, `"${exp}"`, ctx) } diff --git a/tests/ref.html b/tests/ref.html index 989587d..4885faa 100644 --- a/tests/ref.html +++ b/tests/ref.html @@ -7,7 +7,7 @@ id="root" ref="root" v-scope="{ dynamicRef: 'x', show: true }" - v-effect="console.log({ x: $refs.x, y: $refs.y, input: $refs.input })" + v-effect="console.log({ x: $refs.x, y: $refs.y, input: $refs.input, modal: $refs.modal })" >

Accessing root el (with ref): id is {{ $refs.root.id }}

Accessing root el (with $root): id is {{ $refs.root.id }}

@@ -20,10 +20,10 @@ -
+