Add web components initial support

Author: ws-rushx

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [1.0.3](https://github.com/ws-rush/power-vue/compare/v0.4.1...v1.0.3) (2023-02-23)
+
+
+
 ## [1.0.2](https://github.com/ws-rush/power-vue/compare/v0.4.1...v1.0.2) (2023-02-23)
 
 

examples/components.html

@@ -1,26 +1,17 @@
 <script type="module">
-import { createApp } from '../src'
+import { define } from '../src'
 
 
 // Custom Elements
-export class MyCounter extends HTMLElement {
-  data() {
-    return {
-      $template: `<template>My count is {{ count }}<button @click="inc">++</button></template>`,
-      count: 0,
-      inc() {
-        this.count++
-      }
+define('my-counter', () => {
+  return {
+    $template: `<template>My count is {{ count }}<button @click="inc">++</button></template>`,
+    count: 0,
+    inc() {
+      this.count++
     }
   }
-
-  connectedCallback() {
-    this.setAttribute('v-scope', "$el.data()")
-    createApp().mount(this)
-  }
-}
-
-customElements.define("my-counter", MyCounter)
+})
 </script>
 
 <my-counter count="hello"></my-counter>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "power-vue",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "petite-vue fork with plugins support",
   "main": "dist/power-vue.umd.js",
   "unpkg": "dist/power-vue.iife.js",

src/define.ts

@@ -0,0 +1,12 @@
+import { createApp } from "./app"
+
+export function define(name: string, data: Function) {  
+    customElements.define(name, class extends HTMLElement {
+        data = data
+      
+        connectedCallback() {
+          this.setAttribute('v-scope', "$el.data()")
+          createApp().mount(this)
+        }
+      })
+}

src/index.ts

@@ -1,3 +1,4 @@
+export { define } from './define'
 export { createApp } from './app'
 export { nextTick } from './scheduler'
 export { reactive } from '@vue/reactivity'

vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
     minify: 'terser',
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
-      name: 'PetiteVue',
+      name: 'PowerVue',
       formats: ['es', 'umd', 'iife']
     },
     rollupOptions: {