diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 598829d..0000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,25 +0,0 @@ -## [0.4.1](https://github.com/vuejs/petite-vue/compare/v0.4.0...v0.4.1) (2022-01-18) - -### Bug Fixes - -- custom delimiters in child contexts ([#90](https://github.com/vuejs/petite-vue/issues/90)) ([1bbd4d1](https://github.com/vuejs/petite-vue/commit/1bbd4d1c00c6c19f2ee6740e728fb274101fc6c9)) - -# [0.4.0](https://github.com/vuejs/petite-vue/compare/v0.3.0...v0.4.0) (2021-12-10) - -### Breaking Changes - -- require vue: prefix for lifecycle hooks ([a981928](https://github.com/vuejs/petite-vue/commit/a9819283f8504a9c2d0cea4d9d122028eba2d10d)) - -# [0.3.0](https://github.com/vuejs/petite-vue/compare/v0.2.3...v0.3.0) (2021-09-14) - -### Bug Fixes - -- fix parsing chained modifiers ([15f75e9](https://github.com/vuejs/petite-vue/commit/15f75e94db3ce1d3630d7ffc10e2db4748d94f3e)) -- fix v-cloak on toggle ([#71](https://github.com/vuejs/petite-vue/issues/71)) ([f41981b](https://github.com/vuejs/petite-vue/commit/f41981b32ae4832e58223f55c209fd112dfbede7)) -- v-for update on move ([#79](https://github.com/vuejs/petite-vue/issues/79)) ([9af4ea3](https://github.com/vuejs/petite-vue/commit/9af4ea35957053665e586556f7ffb90b9077db26)) -- **v-model:** ensure v-model listeners are attached before v-on ([06d3aa7](https://github.com/vuejs/petite-vue/commit/06d3aa79b066410fe4e270b1a9dad65cb8d3fb97)), closes [#65](https://github.com/vuejs/petite-vue/issues/65) - -### Features - -- bind methods to context ([#74](https://github.com/vuejs/petite-vue/issues/74)) ([167c49d](https://github.com/vuejs/petite-vue/commit/167c49d6940c6f35c6002093d8807ac0e835dcea)) -- custom delimiters ([eda903c](https://github.com/vuejs/petite-vue/commit/eda903c0a93fe048219b74b0a44064c87b553ad4)) diff --git a/README.md b/README.md index efa2241..a950e1c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# petite-vue +# pico-vue -`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). +`pico-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). - Only ~6kb - Vue-compatible template syntax @@ -9,36 +9,42 @@ ## Status -- 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. +- `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 -- 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. - -- Feature requests are unlikely to be accepted at this time - the scope of this project is intentionally kept to a bare minimum. ## Usage -`petite-vue` can be used without a build step. Simply load it from a CDN: +`pico-vue` can be used without a build step. Simply load it from a CDN: ```html - +
{{ count }}
+ + + ``` -- Use `v-scope` to mark regions on the page that should be controlled by `petite-vue`. +- Use `v-scope` to mark regions on the page that should be controlled by `pico-vue`. - The `defer` attribute makes the script execute after HTML content is parsed. -- The `init` attribute tells `petite-vue` to automatically query and initialize all elements that have `v-scope` on the page. +- The `init` attribute tells `pico-vue` to automatically query and initialize all elements that have `v-scope` on the page. ### Manual Init If you don't want the auto init, remove the `init` attribute and move the scripts to end of ``: ```html - + @@ -48,7 +54,7 @@ Or, use the ES module build: ```html ``` @@ -57,9 +63,9 @@ Or, use the ES module build: The short CDN URL is meant for prototyping. For production usage, use a fully resolved CDN URL to avoid resolving and redirect cost: -- Global build: `https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js` +- Global build: `https://unpkg.com/pico-vue@1.0.3/dist/pico-vue.iife.js` - exposes `PetiteVue` global, supports auto init -- ESM build: `https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.es.js` +- ESM build: `https://unpkg.com/pico-vue@1.0.3/dist/pico-vue.es.js` - Must be used with ` +``` + +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). +Check out the [examples directory](https://github.com/ws-rush/pico-vue/tree/main/examples). ## Features -### `petite-vue` only +### `pico-vue`/`petite-vue` only - `v-scope` - `v-effect` - `@vue:mounted` & `@vue:unmounted` events +- `$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) +- 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 @@ -348,7 +459,7 @@ Check out the [examples directory](https://github.com/vuejs/petite-vue/tree/main 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. - `ref()`, `computed()` etc. -- Render functions (`petite-vue` has no virtual DOM) +- Render functions (`pico-vue` has no virtual DOM) - Reactivity for Collection Types (Map, Set, etc., removed for smaller size) - Transition, KeepAlive, Teleport, Suspense - `v-for` deep destructure diff --git a/examples/components.html b/examples/components.html new file mode 100644 index 0000000..0b6722a --- /dev/null +++ b/examples/components.html @@ -0,0 +1,26 @@ + + + \ No newline at end of file diff --git a/examples/todomvc.html b/examples/todomvc.html index eb587c8..9524cfa 100644 --- a/examples/todomvc.html +++ b/examples/todomvc.html @@ -10,6 +10,7 @@