suncy-my-npm-test 1.0.45 → 1.0.47

package/README.md

@@ -0,0 +1,48 @@
+# my-vue-project
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

package/dist/my-vue-webcomponents.es.js

@@ -0,0 +1,193 @@
+import { createApp as x, h as w, openBlock as m, createElementBlock as g, normalizeClass as E, createElementVNode as l, toDisplayString as f, renderSlot as h, createTextVNode as S, createCommentVNode as A, ref as k, computed as D } from "vue";
+function N(o, { shadow: n = !0, styles: s = [] } = {}) {
+  const e = s.join("");
+  class i extends HTMLElement {
+    static observedAttributes = o.props ? Object.keys(o.props) : [];
+    constructor() {
+      super(), n && this.attachShadow({ mode: "open" }), this._app = null, this._props = {}, this._mounted = !1;
+    }
+    connectedCallback() {
+      this.mount();
+    }
+    disconnectedCallback() {
+      this.unmount();
+    }
+    attributeChangedCallback(t, a, r) {
+      a !== r && (this._props[t] = this.parseAttribute(t, r), this._mounted && this.updateProps());
+    }
+    // 解析属性值
+    parseAttribute(t, a) {
+      const r = o.props && o.props[t];
+      if (a != null) {
+        if (r) {
+          if (r === Boolean)
+            return a !== "false" && a !== null;
+          if (r === Number)
+            return Number(a);
+          if (r === Array || r === Object)
+            try {
+              return JSON.parse(a);
+            } catch {
+              return a;
+            }
+        }
+        return a;
+      }
+    }
+    // 序列化属性值
+    serializeAttribute(t) {
+      return t == null ? null : typeof t == "boolean" ? t ? "" : null : typeof t == "object" ? JSON.stringify(t) : String(t);
+    }
+    mount() {
+      if (this._mounted) return;
+      if (this._props = {}, o.props)
+        for (const r of Object.keys(o.props)) {
+          const d = this.getAttribute(r);
+          this._props[r] = this.parseAttribute(r, d);
+        }
+      const t = n ? this.shadowRoot : this;
+      if (e) {
+        const r = document.createElement("style");
+        r.textContent = e, t.appendChild(r);
+      }
+      const a = x({
+        ...o,
+        props: Object.keys(this._props),
+        setup(r, { attrs: d, slots: c, emit: L }) {
+          const v = (u, p) => {
+            this.dispatchEvent(
+              new CustomEvent(u, {
+                detail: p,
+                bubbles: !0,
+                composed: !0
+              })
+            );
+          }, y = (u, ...p) => {
+            const C = u.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+            v(C, p[0]);
+          };
+          return o.setup ? o.setup(r, { attrs: d, slots: c, emit: y }) : {};
+        },
+        render() {
+          return w(o, this.$props);
+        }
+      });
+      a.mount(t), this._app = a, this._mounted = !0;
+    }
+    unmount() {
+      this._app && (this._app.unmount(), this._app = null), this._mounted = !1;
+    }
+    updateProps() {
+      this._app && this._app._instance && Object.assign(this._app._instance.props, this._props);
+    }
+    // 暴露一些方法供外部调用
+    get vueInstance() {
+      return this._app ? this._app._instance : null;
+    }
+  }
+  return i;
+}
+const O = ".hello-world[data-v-c907aa73]{padding:20px;border-radius:8px;font-family:Arial,sans-serif;transition:all .3s ease}.hello-world.light[data-v-c907aa73]{background-color:#fff;color:#333;border:1px solid #e0e0e0}.hello-world.dark[data-v-c907aa73]{background-color:#333;color:#fff;border:1px solid #555555}.hello-world h1[data-v-c907aa73]{margin:0 0 16px;color:#42b983}.content[data-v-c907aa73]{margin-bottom:16px;padding:12px;background-color:#0000000d;border-radius:4px}.dark .content[data-v-c907aa73]{background-color:#ffffff1a}button[data-v-c907aa73],input[data-v-c907aa73]{margin:8px 4px;padding:8px 16px;border:1px solid #ddd;border-radius:4px;font-size:14px}.dark button[data-v-c907aa73],.dark input[data-v-c907aa73]{background-color:#444;color:#fff;border-color:#666}button[data-v-c907aa73]{background-color:#42b983;color:#fff;border:none;cursor:pointer;transition:background-color .3s}button[data-v-c907aa73]:hover{background-color:#3aa876}.details[data-v-c907aa73]{margin-top:16px;padding:12px;background-color:#42b9831a;border-radius:4px}.actions[data-v-c907aa73]{margin-top:20px;padding-top:16px;border-top:1px solid #eee}.dark .actions[data-v-c907aa73]{border-top-color:#555}", j = (o, n) => {
+  const s = o.__vccOpts || o;
+  for (const [e, i] of n)
+    s[e] = i;
+  return s;
+}, I = {
+  name: "HelloWorld",
+  // Web Components 的属性声明
+  props: {
+    msg: {
+      type: String,
+      default: "Hello World"
+    },
+    value: {
+      type: String,
+      default: ""
+    },
+    theme: {
+      type: String,
+      default: "light",
+      validator: (o) => ["light", "dark"].includes(o)
+    },
+    count: {
+      type: Number,
+      default: 0
+    }
+  },
+  // 自定义事件
+  emits: ["click", "input", "count-changed"],
+  setup(o, { emit: n }) {
+    const s = k(!1), e = k(o.count), i = D(() => `${o.msg} (${e.value})`);
+    return {
+      showDetails: s,
+      internalCount: e,
+      message: i,
+      handleClick: () => {
+        n("click", { message: "Button clicked!" });
+      },
+      handleInput: (c) => {
+        n("input", c.target.value);
+      },
+      increment: () => {
+        e.value++, n("count-changed", e.value);
+      },
+      decrement: () => {
+        e.value--, n("count-changed", e.value);
+      },
+      toggleDetails: () => {
+        s.value = !s.value;
+      }
+    };
+  }
+}, H = { class: "content" }, W = ["value"], z = {
+  key: 0,
+  class: "details"
+}, B = { class: "actions" };
+function T(o, n, s, e, i, b) {
+  return m(), g("div", {
+    class: E(["hello-world", s.theme])
+  }, [
+    l("h1", null, f(s.msg), 1),
+    l("div", H, [
+      h(o.$slots, "default", {}, () => [
+        n[5] || (n[5] = S("Default Content", -1))
+      ], !0),
+      h(o.$slots, "footer", {}, void 0, !0)
+    ]),
+    l("button", {
+      onClick: n[0] || (n[0] = (...t) => e.handleClick && e.handleClick(...t))
+    }, "Click me"),
+    l("input", {
+      value: s.value,
+      onInput: n[1] || (n[1] = (...t) => e.handleInput && e.handleInput(...t)),
+      placeholder: "Type something..."
+    }, null, 40, W),
+    e.showDetails ? (m(), g("div", z, [
+      l("p", null, "Count: " + f(s.count), 1),
+      l("button", {
+        onClick: n[2] || (n[2] = (...t) => e.increment && e.increment(...t))
+      }, "+"),
+      l("button", {
+        onClick: n[3] || (n[3] = (...t) => e.decrement && e.decrement(...t))
+      }, "-")
+    ])) : A("", !0),
+    l("div", B, [
+      h(o.$slots, "actions", {}, () => [
+        l("button", {
+          onClick: n[4] || (n[4] = (...t) => e.toggleDetails && e.toggleDetails(...t))
+        }, f(e.showDetails ? "Hide" : "Show") + " Details", 1)
+      ], !0)
+    ])
+  ], 2);
+}
+const V = /* @__PURE__ */ j(I, [["render", T], ["styles", [O]], ["__scopeId", "data-v-c907aa73"]]), J = [], _ = N(V, {
+  shadow: !0,
+  styles: J
+});
+customElements.define("hello-world", _);
+typeof window < "u" && (window.MyVueWebComponents = {
+  HelloWorldElement: _
+});
+export {
+  _ as HelloWorldElement
+};

package/dist/my-vue-webcomponents.umd.js

@@ -0,0 +1 @@
+(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.MyVueWebComponents={},i.Vue))})(this,(function(i,t){"use strict";function b(n,{shadow:r=!0,styles:s=[]}={}){const o=s.join("");class d extends HTMLElement{static observedAttributes=n.props?Object.keys(n.props):[];constructor(){super(),r&&this.attachShadow({mode:"open"}),this._app=null,this._props={},this._mounted=!1}connectedCallback(){this.mount()}disconnectedCallback(){this.unmount()}attributeChangedCallback(e,l,a){l!==a&&(this._props[e]=this.parseAttribute(e,a),this._mounted&&this.updateProps())}parseAttribute(e,l){const a=n.props&&n.props[e];if(l!=null){if(a){if(a===Boolean)return l!=="false"&&l!==null;if(a===Number)return Number(l);if(a===Array||a===Object)try{return JSON.parse(l)}catch{return l}}return l}}serializeAttribute(e){return e==null?null:typeof e=="boolean"?e?"":null:typeof e=="object"?JSON.stringify(e):String(e)}mount(){if(this._mounted)return;if(this._props={},n.props)for(const a of Object.keys(n.props)){const c=this.getAttribute(a);this._props[a]=this.parseAttribute(a,c)}const e=r?this.shadowRoot:this;if(o){const a=document.createElement("style");a.textContent=o,e.appendChild(a)}const l=t.createApp({...n,props:Object.keys(this._props),setup(a,{attrs:c,slots:u,emit:W}){const w=(f,h)=>{this.dispatchEvent(new CustomEvent(f,{detail:h,bubbles:!0,composed:!0}))},N=(f,...h)=>{const V=f.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase();w(V,h[0])};return n.setup?n.setup(a,{attrs:c,slots:u,emit:N}):{}},render(){return t.h(n,this.$props)}});l.mount(e),this._app=l,this._mounted=!0}unmount(){this._app&&(this._app.unmount(),this._app=null),this._mounted=!1}updateProps(){this._app&&this._app._instance&&Object.assign(this._app._instance.props,this._props)}get vueInstance(){return this._app?this._app._instance:null}}return d}const g=".hello-world[data-v-c907aa73]{padding:20px;border-radius:8px;font-family:Arial,sans-serif;transition:all .3s ease}.hello-world.light[data-v-c907aa73]{background-color:#fff;color:#333;border:1px solid #e0e0e0}.hello-world.dark[data-v-c907aa73]{background-color:#333;color:#fff;border:1px solid #555555}.hello-world h1[data-v-c907aa73]{margin:0 0 16px;color:#42b983}.content[data-v-c907aa73]{margin-bottom:16px;padding:12px;background-color:#0000000d;border-radius:4px}.dark .content[data-v-c907aa73]{background-color:#ffffff1a}button[data-v-c907aa73],input[data-v-c907aa73]{margin:8px 4px;padding:8px 16px;border:1px solid #ddd;border-radius:4px;font-size:14px}.dark button[data-v-c907aa73],.dark input[data-v-c907aa73]{background-color:#444;color:#fff;border-color:#666}button[data-v-c907aa73]{background-color:#42b983;color:#fff;border:none;cursor:pointer;transition:background-color .3s}button[data-v-c907aa73]:hover{background-color:#3aa876}.details[data-v-c907aa73]{margin-top:16px;padding:12px;background-color:#42b9831a;border-radius:4px}.actions[data-v-c907aa73]{margin-top:20px;padding-top:16px;border-top:1px solid #eee}.dark .actions[data-v-c907aa73]{border-top-color:#555}",k=(n,r)=>{const s=n.__vccOpts||n;for(const[o,d]of r)s[o]=d;return s},y={name:"HelloWorld",props:{msg:{type:String,default:"Hello World"},value:{type:String,default:""},theme:{type:String,default:"light",validator:n=>["light","dark"].includes(n)},count:{type:Number,default:0}},emits:["click","input","count-changed"],setup(n,{emit:r}){const s=t.ref(!1),o=t.ref(n.count),d=t.computed(()=>`${n.msg} (${o.value})`);return{showDetails:s,internalCount:o,message:d,handleClick:()=>{r("click",{message:"Button clicked!"})},handleInput:u=>{r("input",u.target.value)},increment:()=>{o.value++,r("count-changed",o.value)},decrement:()=>{o.value--,r("count-changed",o.value)},toggleDetails:()=>{s.value=!s.value}}}},_={class:"content"},C=["value"],x={key:0,class:"details"},E={class:"actions"};function S(n,r,s,o,d,m){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["hello-world",s.theme])},[t.createElementVNode("h1",null,t.toDisplayString(s.msg),1),t.createElementVNode("div",_,[t.renderSlot(n.$slots,"default",{},()=>[r[5]||(r[5]=t.createTextVNode("Default Content",-1))],!0),t.renderSlot(n.$slots,"footer",{},void 0,!0)]),t.createElementVNode("button",{onClick:r[0]||(r[0]=(...e)=>o.handleClick&&o.handleClick(...e))},"Click me"),t.createElementVNode("input",{value:s.value,onInput:r[1]||(r[1]=(...e)=>o.handleInput&&o.handleInput(...e)),placeholder:"Type something..."},null,40,C),o.showDetails?(t.openBlock(),t.createElementBlock("div",x,[t.createElementVNode("p",null,"Count: "+t.toDisplayString(s.count),1),t.createElementVNode("button",{onClick:r[2]||(r[2]=(...e)=>o.increment&&o.increment(...e))},"+"),t.createElementVNode("button",{onClick:r[3]||(r[3]=(...e)=>o.decrement&&o.decrement(...e))},"-")])):t.createCommentVNode("",!0),t.createElementVNode("div",E,[t.renderSlot(n.$slots,"actions",{},()=>[t.createElementVNode("button",{onClick:r[4]||(r[4]=(...e)=>o.toggleDetails&&o.toggleDetails(...e))},t.toDisplayString(o.showDetails?"Hide":"Show")+" Details",1)],!0)])],2)}const p=b(k(y,[["render",S],["styles",[g]],["__scopeId","data-v-c907aa73"]]),{shadow:!0,styles:[]});customElements.define("hello-world",p),typeof window<"u"&&(window.MyVueWebComponents={HelloWorldElement:p}),i.HelloWorldElement=p,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/dist/static/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SuncyMyNpmTest</title>
+  </head>
+  <body>
+    <div style="color: red">AAAA</div>
+  </body>
+</html>

package/package.json

@@ -1,56 +1,61 @@
-{
-    "name": "suncy-my-npm-test",
-    "version": "1.0.45",
-    "description": "A Vue2 component library",
-    "main": "lib/index.umd.min.js",
-    "module": "lib/index.esm.js",
-    "unpkg": "lib/index.umd.min.js",
-    "jsdelivr": "lib/index.umd.min.js",
-    "files": [
-      "lib",
-      "packages"
-    ],
-    "scripts": {
-      "serve": "vue-cli-service serve",
-      "build": "vue-cli-service build",
-      "build:lib": "vue-cli-service build --target lib --name suncy-my-npm-test ./packages/index.js",
-      "lint": "vue-cli-service lint",
-      "prepublishOnly": "npm run build:lib"
-    },
-    "dependencies": {
-      "core-js": "^3.8.3",
-      "vue": "^2.6.14"
-    },
-    "devDependencies": {
-      "@vue/cli-plugin-babel": "~5.0.8",
-      "@vue/cli-service": "~5.0.8",
-      "vue-template-compiler": "^2.6.14",
-      "sass": "^1.32.7",
-      "sass-loader": "^12.0.0",
-      "eslint": "^8.7.0",
-      "eslint-plugin-vue": "^8.4.1"
-    },
-    "peerDependencies": {
-      "vue": "^2.6.0"
-    },
-    "browserslist": [
-      "> 1%",
-      "last 2 versions",
-      "not dead"
-    ],
-    "keywords": [
-      "vue2",
-      "component",
-      "library"
-    ],
-    "author": "Your Name",
-    "license": "MIT",
-    "repository": {
-      "type": "git",
-      "url": "git+https://github.com/yourname/suncy-my-npm-test.git"
-    },
-    "bugs": {
-      "url": "https://github.com/yourname/suncy-my-npm-test/issues"
-    },
-    "homepage": "https://github.com/yourname/suncy-my-npm-test#readme"
-  }
+{
+  "name": "suncy-my-npm-test",
+  "version": "1.0.47",
+  "private": false,
+  "type": "module",
+  "main": "./dist/suncy-my-npm-test.umd.js",
+  "module": "./dist/suncy-my-npm-test.es.js",
+  "unpkg": "./dist/my-vue-webcomponents.umd.js",
+  "exports": {
+    ".": {
+      "import": "./dist/suncy-my-npm-test.es.js",
+      "require": "./dist/suncy-my-npm-test.umd.js"
+    },
+    "./dist/*": "./dist/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build:wc": "vite build --mode wc",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "build:lib": "vite build --mode lib",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix --cache",
+    "format": "prettier --write --experimental-cli src/"
+  },
+  "dependencies": {
+    "pinia": "^3.0.4",
+    "vue": "^3.0.0",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@tsconfig/node24": "^24.0.4",
+    "@types/node": "^24.10.9",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitejs/plugin-vue-jsx": "^5.1.3",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "~10.7.0",
+    "jiti": "^2.6.1",
+    "npm-run-all2": "^8.0.4",
+    "prettier": "3.8.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-copy": "^0.1.6",
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vue-tsc": "^3.2.2"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}

package/packages/components/MyButton.vue

@@ -1,76 +0,0 @@
-<template>
-    <button 
-      class="my-button" 
-      :class="[typeClass, sizeClass]"
-      @click="$emit('click')"
-    >
-      <slot></slot>
-    </button>
-  </template>
-  
-  <script>
-  export default {
-    name: 'MyButton',
-    props: {
-      type: {
-        type: String,
-        default: 'default',
-        validator: (value) => ['default', 'primary', 'success', 'warning', 'danger'].includes(value)
-      },
-      size: {
-        type: String,
-        default: 'medium',
-        validator: (value) => ['small', 'medium', 'large'].includes(value)
-      }
-    },
-    computed: {
-      typeClass() {
-        return `my-button--${this.type}`
-      },
-      sizeClass() {
-        return `my-button--${this.size}`
-      }
-    }
-  }
-  </script>
-  
-  <style scoped>
-  .my-button {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 14px;
-    transition: all 0.3s;
-  }
-  
-  .my-button--default {
-    background: #f0f0f0;
-    color: #333;
-  }
-  
-  .my-button--primary {
-    background: #409eff;
-    color: white;
-  }
-  
-  .my-button--success {
-    background: #67c23a;
-    color: white;
-  }
-  
-  .my-button--small {
-    padding: 8px 16px;
-    font-size: 12px;
-  }
-  
-  .my-button--medium {
-    padding: 10px 20px;
-    font-size: 14px;
-  }
-  
-  .my-button--large {
-    padding: 12px 24px;
-    font-size: 16px;
-  }
-  </style>

package/packages/index.js

@@ -1,27 +0,0 @@
-import MyButton from './components/MyButton.vue'
-
-const components = {
-  MyButton,
-}
-
-const install = function(Vue) {
-  if (install.installed) return
-  
-  Object.keys(components).forEach(key => {
-    Vue.component(components[key].name, components[key])
-  })
-}
-
-// 自动安装
-if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue)
-}
-
-export default {
-  install,
-  ...components
-}
-
-export {
-  MyButton,
-}