npm - suncy-my-npm-test - Versions diffs - 1.0.46 → 1.0.48 - Mend

suncy-my-npm-test 1.0.46 → 1.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/my-vue-webcomponents.es.js +193 -0
package/dist/my-vue-webcomponents.umd.js +1 -0
package/package.json +7 -3
package/src/vue2-wrapper.js +29 -0
package/dist/suncy-my-npm-test.css +0 -1
package/dist/suncy-my-npm-test.es.js +0 -45
package/dist/suncy-my-npm-test.umd.js +0 -1

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

@@ -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 ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,19 +1,22 @@
 {
   "name": "suncy-my-npm-test",
-  "version": "1.0.46",
+  "version": "1.0.48",
   "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/style.css": "./dist/style.css"
+    "./dist/*": "./dist/*",
+    "./vue2": "./src/vue2-wrapper.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/vue2-wrapper.js"
   ],
   "types": "dist/index.d.ts",
   "peerDependencies": {
@@ -21,6 +24,7 @@
   },
   "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",

package/src/vue2-wrapper.js ADDED Viewed

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+// Vue 2 兼容性包装
+export const Vue2Plugin = {
+  install(Vue, options) {
+    // 动态加载 Web Components
+    const script = document.createElement('script')
+    script.src = options.cdnUrl || './my-vue-webcomponents.umd.js'
+    document.head.appendChild(script)
+    // 组件加载完成后注册
+    script.onload = () => {
+      // 通过全局变量访问组件
+      if (window.MyWebComponents && window.MyWebComponents.register) {
+        window.MyWebComponents.register()
+      }
+    }
+    // 也可以提供 Vue 2 组件版本
+    // Vue.component('MyButton', {
+    //   props: ['type'],
+    //   template: `
+    //     <my-button :type="type" @click="$emit('click')">
+    //       <slot></slot>
+    //     </my-button>
+    //   `,
+    // })
+  },
+}

package/dist/suncy-my-npm-test.css DELETED Viewed

	@@ -1 +0,0 @@
1	- h1[data-v-6cb782b8]{font-weight:500;font-size:2.6rem;position:relative;top:-10px}h3[data-v-6cb782b8]{font-size:1.2rem}.greetings h1[data-v-6cb782b8],.greetings h3[data-v-6cb782b8]{text-align:center}@media(min-width:1024px){.greetings h1[data-v-6cb782b8],.greetings h3[data-v-6cb782b8]{text-align:left}}

package/dist/suncy-my-npm-test.es.js DELETED Viewed

@@ -1,45 +0,0 @@
-import { defineComponent as a, openBlock as c, createElementBlock as i, createElementVNode as o, toDisplayString as p, createTextVNode as n } from "vue";
-const d = { class: "greetings" }, _ = { class: "green" }, m = /* @__PURE__ */ a({
-  __name: "HelloWorld",
-  props: {
-    msg: {}
-  },
-  setup(t) {
-    return (r, e) => (c(), i("div", d, [
-      o("h1", _, p(t.msg), 1),
-      e[0] || (e[0] = o("h3", null, [
-        n(" You’ve successfully created a project with "),
-        o("a", {
-          href: "https://vite.dev/",
-          target: "_blank",
-          rel: "noopener"
-        }, "Vite"),
-        n(" + "),
-        o("a", {
-          href: "https://vuejs.org/",
-          target: "_blank",
-          rel: "noopener"
-        }, "Vue 3"),
-        n(". What's next? ")
-      ], -1)),
-      e[1] || (e[1] = o("iframe", {
-        src: "/static/index.html",
-        width: "100%",
-        height: "400px"
-      }, null, -1))
-    ]));
-  }
-}), u = (t, r) => {
-  const e = t.__vccOpts || t;
-  for (const [s, l] of r)
-    e[s] = l;
-  return e;
-}, g = /* @__PURE__ */ u(m, [["__scopeId", "data-v-6cb782b8"]]), f = {
-  install(t) {
-    t.component("HelloWorld", g);
-  }
-};
-export {
-  g as HelloWorld,
-  f as default
-};

package/dist/suncy-my-npm-test.umd.js DELETED Viewed

@@ -1 +0,0 @@

- (function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.SuncyMyNpmTest={},t.Vue))})(this,(function(t,e){"use strict";const l={class:"greetings"},d={class:"green"},r=((n,s)=>{const o=n.__vccOpts||n;for(const[i,a]of s)o[i]=a;return o})(e.defineComponent({__name:"HelloWorld",props:{msg:{}},setup(n){return(s,o)=>(e.openBlock(),e.createElementBlock("div",l,[e.createElementVNode("h1",d,e.toDisplayString(n.msg),1),o[0]||(o[0]=e.createElementVNode("h3",null,[e.createTextVNode(" You’ve successfully created a project with "),e.createElementVNode("a",{href:"https://vite.dev/",target:"_blank",rel:"noopener"},"Vite"),e.createTextVNode(" + "),e.createElementVNode("a",{href:"https://vuejs.org/",target:"_blank",rel:"noopener"},"Vue 3"),e.createTextVNode(". What's next? ")],-1)),o[1]||(o[1]=e.createElementVNode("iframe",{src:"/static/index.html",width:"100%",height:"400px"},null,-1))]))}}),[["__scopeId","data-v-6cb782b8"]]),c={install(n){n.component("HelloWorld",r)}};t.HelloWorld=r,t.default=c,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));