Skip to content

Commit c06ead9

Browse files
ws-rushxws-rushx
committed
Fix refrences
1 parent 251feaa commit c06ead9

File tree

3 files changed

+126
-70
lines changed

3 files changed

+126
-70
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## [1.0.2](https://github.com/ws-rush/power-vue/compare/v0.4.1...v1.0.2) (2023-02-23)
2+
3+
4+
15
## [1.0.1](https://github.com/wusaby-rush/power-vue/compare/v0.4.1...v1.0.1) (2023-02-18)
26

37

‎README.md

Lines changed: 115 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
>simple fork of petite-vue. I made it for feauters I needed in my projects, because development of petite-vue inactive.
1+
# power-vue
22

3-
# petite-vue
4-
5-
`petite-vue` is an alternative distribution of [Vue](https://vuejs.org) optimized for [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). It provides the same template syntax and reactivity mental model as standard Vue. However, it is specifically optimized for "sprinkling" a small amount of interactions on an existing HTML page rendered by a server framework. See more details on [how it differs from standard Vue](#comparison-with-standard-vue).
3+
`power-vue` is a fork of `petite-vue`, which is an alternative distribution of [Vue](https://vuejs.org) optimized for [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). It provides the same template syntax and reactivity mental model as standard Vue. However, it is specifically optimized for "sprinkling" a small amount of interactions on an existing HTML page rendered by a server framework. See more details on [how it differs from standard Vue](#comparison-with-standard-vue).
64

75
- Only ~6kb
86
- Vue-compatible template syntax
@@ -11,20 +9,16 @@
119

1210
## Status
1311

14-
>for this fork I will maintain it, if you face problem please report or make PR
15-
16-
- This is pretty new. There are probably bugs and there might still be API changes, so **use at your own risk.** Is it usable though? Very much. Check out the [examples](https://github.com/vuejs/petite-vue/tree/main/examples) to see what it's capable of.
17-
18-
- The issue list is intentionally disabled because I have higher priority things to focus on for now and don't want to be distracted. If you found a bug, you'll have to either workaround it or submit a PR to fix it yourself. That said, feel free to use the discussions tab to help each other out.
12+
- `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.
1913

20-
- Feature requests are unlikely to be accepted at this time - the scope of this project is intentionally kept to a bare minimum.
14+
- my focus is support plugins, and better support fo web components
2115

2216
## Usage
2317

24-
`petite-vue` can be used without a build step. Simply load it from a CDN:
18+
`power-vue` can be used without a build step. Simply load it from a CDN:
2519

2620
```html
27-
<script src="https://unpkg.com/petite-vue" defer init></script>
21+
<script src="https://unpkg.com/power-vue" defer init></script>
2822

2923
<!-- anywhere on the page -->
3024
<div v-scope="{ count: 0 }">
@@ -34,23 +28,23 @@
3428

3529
<!-- another example -->
3630
<textarea
37-
v-scope="{width: $root.offsetWidth, height: $root.offsetHeight}"
31+
v-scope="{width: $el.offsetWidth, height: $el.offsetHeight}"
3832
@click="width = $el.offsetWidth; height = $el.offsetHeight;"
3933
>
4034
{{ width }} &times; {{ height }}
4135
</textarea>
4236
```
4337

44-
- Use `v-scope` to mark regions on the page that should be controlled by `petite-vue`.
38+
- Use `v-scope` to mark regions on the page that should be controlled by `power-vue`.
4539
- The `defer` attribute makes the script execute after HTML content is parsed.
46-
- The `init` attribute tells `petite-vue` to automatically query and initialize all elements that have `v-scope` on the page.
40+
- The `init` attribute tells `power-vue` to automatically query and initialize all elements that have `v-scope` on the page.
4741

4842
### Manual Init
4943

5044
If you don't want the auto init, remove the `init` attribute and move the scripts to end of `<body>`:
5145

5246
```html
53-
<script src="https://unpkg.com/petite-vue"></script>
47+
<script src="https://unpkg.com/power-vue"></script>
5448
<script>
5549
PetiteVue.createApp().mount()
5650
</script>
@@ -60,7 +54,7 @@ Or, use the ES module build:
6054

6155
```html
6256
<script type="module">
63-
import { createApp } from 'https://unpkg.com/petite-vue?module'
57+
import { createApp } from 'https://unpkg.com/power-vue?module'
6458
createApp().mount()
6559
</script>
6660
```
@@ -69,9 +63,9 @@ Or, use the ES module build:
6963

7064
The short CDN URL is meant for prototyping. For production usage, use a fully resolved CDN URL to avoid resolving and redirect cost:
7165

72-
- Global build: `https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js`
66+
- Global build: `https://unpkg.com/power-vue@1.0.3/dist/power-vue.iife.js`
7367
- exposes `PetiteVue` global, supports auto init
74-
- ESM build: `https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.es.js`
68+
- ESM build: `https://unpkg.com/power-vue@1.0.3/dist/power-vue.es.js`
7569
- Must be used with `<script type="module">`
7670

7771
### Root Scope
@@ -80,7 +74,7 @@ The `createApp` function accepts a data object that serves as the root scope for
8074

8175
```html
8276
<script type="module">
83-
import { createApp } from 'https://unpkg.com/petite-vue?module'
77+
import { createApp } from 'https://unpkg.com/power-vue?module'
8478
8579
createApp({
8680
// exposed to all expressions
@@ -104,17 +98,17 @@ The `createApp` function accepts a data object that serves as the root scope for
10498
</div>
10599
```
106100

107-
Note `v-scope` doesn't need to have a value here and simply serves as a hint for `petite-vue` to process the element.
101+
Note `v-scope` doesn't need to have a value here and simply serves as a hint for `power-vue` to process the element.
108102

109103
### Explicit Mount Target
110104

111-
You can specify a mount target (selector or element) to limit `petite-vue` to only that region of the page:
105+
You can specify a mount target (selector or element) to limit `power-vue` to only that region of the page:
112106

113107
```js
114108
createApp().mount('#only-this-div')
115109
```
116110

117-
This also means you can have multiple `petite-vue` apps to control different regions on the same page:
111+
This also means you can have multiple `power-vue` apps to control different regions on the same page:
118112

119113
```js
120114
createApp({
@@ -126,46 +120,15 @@ createApp({
126120
}).mount('#app2')
127121
```
128122

129-
### Lifecycle Events
130-
131-
You can listen to the special `vue:mounted` and `vue:unmounted` lifecycle events for each element (the `vue:` prefix is required since v0.4.0):
132-
133-
```html
134-
<div
135-
v-if="show"
136-
@vue:mounted="console.log('mounted on: ', $el)"
137-
@vue:unmounted="console.log('unmounted: ', $el)"
138-
></div>
139-
```
140-
141-
### `v-effect`
142-
143-
Use `v-effect` to execute **reactive** inline statements:
144-
145-
```html
146-
<div v-scope="{ count: 0 }">
147-
<div v-effect="$el.textContent = count"></div>
148-
<button @click="count++">++</button>
149-
</div>
150-
```
151-
152-
The effect uses `count` which is a reactive data source, so it will re-run whenever `count` changes.
153-
154-
Another example of replacing the `todo-focus` directive found in the original Vue TodoMVC example:
155-
156-
```html
157-
<input v-effect="if (todo === editedTodo) $el.focus()" />
158-
```
159-
160123
### Components
161124

162-
The concept of "Components" are different in `petite-vue`, as it is much more bare-bones.
125+
The concept of "Components" are different in `power-vue`, as it is much more bare-bones.
163126

164127
First, reusable scope logic can be created with functions:
165128

166129
```html
167130
<script type="module">
168-
import { createApp } from 'https://unpkg.com/petite-vue?module'
131+
import { createApp } from 'https://unpkg.com/power-vue?module'
169132
170133
function Counter(props) {
171134
return {
@@ -201,7 +164,7 @@ If you also want to reuse a piece of template, you can provide a special `$templ
201164

202165
```html
203166
<script type="module">
204-
import { createApp } from 'https://unpkg.com/petite-vue?module'
167+
import { createApp } from 'https://unpkg.com/power-vue?module'
205168
206169
function Counter(props) {
207170
return {
@@ -230,13 +193,102 @@ If you also want to reuse a piece of template, you can provide a special `$templ
230193

231194
The `<template>` approach is recommended over inline strings because it is more efficient to clone from a native template element.
232195

196+
### Lifecycle Events
197+
198+
You can listen to the special `vue:mounted` and `vue:unmounted` lifecycle events for each element:
199+
200+
```html
201+
<div
202+
v-if="show"
203+
@vue:mounted="console.log('mounted on: ', $el)"
204+
@vue:unmounted="console.log('unmounted: ', $el)"
205+
></div>
206+
```
207+
208+
### globals
209+
210+
#### `$el`
211+
212+
represent the current element
213+
214+
#### `$root`
215+
216+
represent the element of `v-scope`
217+
218+
### directives
219+
220+
#### `v-text`
221+
222+
#### `v-bind`
223+
224+
#### `v-effect`
225+
226+
Use `v-effect` to execute **reactive** inline statements:
227+
228+
```html
229+
<div v-scope="{ count: 0 }">
230+
<div v-effect="$el.textContent = count"></div>
231+
<button @click="count++">++</button>
232+
</div>
233+
```
234+
235+
The effect uses `count` which is a reactive data source, so it will re-run whenever `count` changes.
236+
237+
Another example of replacing the `todo-focus` directive found in the original Vue TodoMVC example:
238+
239+
```html
240+
<input v-effect="if (todo === editedTodo) $el.focus()" />
241+
```
242+
243+
#### `v-if`
244+
245+
#### `v-show`
246+
247+
#### `v-for`
248+
249+
```html
250+
<div v-scope="[{name: 'rush', items: 3}, {...}]">
251+
<!-- v-for loop on arrays and objects -->
252+
<div v-for="customer in $data" :key="customer.name">
253+
<!-- print values -->
254+
<p v-for="value in customer" :key="value"> {{ value }} </p>
255+
<!-- print values and keys -->
256+
<p v-for="(value, key) in customer" :key="value"> {{ key }}: {{ value }} </p>
257+
</div>
258+
259+
<button @click="$data.push({name: 'random', ...})">add</button>
260+
</div>
261+
```
262+
263+
#### `v-model`
264+
265+
#### `v-on`
266+
267+
#### `v-cloak`
268+
269+
avoid flash rendreng which happen until `petite-vue` loaded, after it load it will remove these directives
270+
271+
>This directive is only needed in no-build-step setups
272+
273+
``` html
274+
<style>
275+
[v-cloak] {
276+
display: none;
277+
}
278+
</style>
279+
280+
<div v-cloak>
281+
{{ message }}
282+
</div>
283+
```
284+
233285
### Global State Management
234286

235287
You can use the `reactive` method (re-exported from `@vue/reactivity`) to create global state singletons:
236288

237289
```html
238290
<script type="module">
239-
import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
291+
import { createApp, reactive } from 'https://unpkg.com/power-vue?module'
240292
241293
const store = reactive({
242294
count: 0,
@@ -308,7 +360,7 @@ const html = ({ el, get, effect }) => {
308360
}
309361
```
310362

311-
### Custom Delimiters (0.3+)
363+
### Custom Delimiters
312364

313365
You can use custom delimiters by passing `$delimiters` to your root scope. This is useful when working alongside a server-side templating language that also uses mustaches:
314366

@@ -323,7 +375,7 @@ createApp({
323375
You can write custome directive then distrbute it as a pacage, then add it to create vue, like:
324376

325377
```html
326-
<div v-scope="{counter: 0}" v-log="inside petite-vue scope">
378+
<div v-scope="{counter: 0}" v-log="inside power-vue scope">
327379
<button @click="counter++">increase</button>
328380
</div>
329381

@@ -349,11 +401,11 @@ export default {
349401

350402
## Examples
351403

352-
Check out the [examples directory](https://github.com/vuejs/petite-vue/tree/main/examples).
404+
Check out the [examples directory](https://github.com/ws-rush/power-vue/tree/main/examples).
353405

354406
## Features
355407

356-
### `petite-vue` only
408+
### `power-vue` only
357409

358410
- `v-scope`
359411
- `v-effect`
@@ -390,7 +442,7 @@ Check out the [examples directory](https://github.com/vuejs/petite-vue/tree/main
390442
Some features are dropped because they have a relatively low utility/size ratio in the context of progressive enhancement. If you need these features, you should probably just use standard Vue.
391443

392444
- `ref()`, `computed()` etc.
393-
- Render functions (`petite-vue` has no virtual DOM)
445+
- Render functions (`power-vue` has no virtual DOM)
394446
- Reactivity for Collection Types (Map, Set, etc., removed for smaller size)
395447
- Transition, KeepAlive, Teleport, Suspense
396448
- `v-for` deep destructure

‎package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
"name": "power-vue",
33
"version": "1.0.2",
44
"description": "petite-vue fork with plugins support",
5-
"main": "dist/petite-vue.umd.js",
6-
"unpkg": "dist/petite-vue.iife.js",
7-
"jsdelivr": "dist/petite-vue.iife.js",
8-
"module": "./dist/petite-vue.es.js",
5+
"main": "dist/power-vue.umd.js",
6+
"unpkg": "dist/power-vue.iife.js",
7+
"jsdelivr": "dist/power-vue.iife.js",
8+
"module": "./dist/power-vue.es.js",
99
"exports": {
1010
".": {
1111
"import": "./dist/power-vue.es.js",
@@ -21,17 +21,17 @@
2121
},
2222
"repository": {
2323
"type": "git",
24-
"url": "git+https://github.com/wusaby-rush/power-vue.git"
24+
"url": "git+https://github.com/ws-rush/power-vue.git"
2525
},
2626
"keywords": [
2727
"vue"
2828
],
2929
"author": "Evan You",
3030
"license": "MIT",
3131
"bugs": {
32-
"url": "https://github.com/wusaby-rush/power-vue/discussions"
32+
"url": "https://github.com/ws-rush/power-vue/discussions"
3333
},
34-
"homepage": "https://github.com/wusaby-rush/power-vue#readme",
34+
"homepage": "https://github.com/ws-rush/power-vue#readme",
3535
"devDependencies": {
3636
"@vue/reactivity": "^3.2.27",
3737
"@vue/shared": "^3.2.27",

0 commit comments

Comments
 (0)