@univerjs/ui-adapter-web-component 0.8.3-nightly.202507010644

package/README.md

@@ -0,0 +1 @@
+# @univerjs/ui-adapter-web-component

package/lib/cjs/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@univerjs/core"),p=require("@univerjs/ui"),u=require("react");var l=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=(r,e,n)=>e in r?l(r,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):r[e]=n,_=(r,e,n,t)=>{for(var o=t>1?void 0:t?s(e,n):e,i=r.length-1,c;i>=0;i--)(c=r[i])&&(o=c(o)||o);return o},m=(r,e)=>(n,t)=>e(n,t,r),f=(r,e,n)=>d(r,e+"",n);exports.UniverWebComponentAdapterPlugin=class extends a.Plugin{constructor(e={},n,t){super(),this._config=e,this._injector=n,this._componentManager=t}onStarting(){this._componentManager.setHandler("web-component",(e,n)=>()=>u.cloneElement(u.createElement(g,{component:e,props:{name:n}})))}};f(exports.UniverWebComponentAdapterPlugin,"pluginName","UNIVER_UI_ADAPTER_WEB_COMPONENT_PLUGIN");exports.UniverWebComponentAdapterPlugin=_([a.DependentOn(p.UniverUIPlugin),m(1,a.Inject(a.Injector)),m(2,a.Inject(p.ComponentManager))],exports.UniverWebComponentAdapterPlugin);function g(r){const{component:e,props:n}=r,{name:t}=n!=null?n:{};if(!t)throw new Error("WebComponentComponentWrapper requires a name prop to define the custom element.");customElements.get(t)||customElements.define(t,e);const o=u.useRef(null);return u.useEffect(()=>{if(!o.current)return;const i=document.createElement(t);return o.current.appendChild(i),()=>{var c;(c=o.current)==null||c.removeChild(i)}},[]),u.createElement("div",{ref:o})}

package/lib/es/index.js

@@ -0,0 +1,47 @@
+import { DependentOn as l, Inject as a, Injector as s, Plugin as f } from "@univerjs/core";
+import { UniverUIPlugin as _, ComponentManager as d } from "@univerjs/ui";
+import { cloneElement as g, createElement as u, useRef as v, useEffect as P } from "react";
+var C = Object.defineProperty, E = Object.getOwnPropertyDescriptor, b = (e, n, r) => n in e ? C(e, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[n] = r, h = (e, n, r, t) => {
+  for (var o = t > 1 ? void 0 : t ? E(n, r) : n, m = e.length - 1, p; m >= 0; m--)
+    (p = e[m]) && (o = p(o) || o);
+  return o;
+}, i = (e, n) => (r, t) => n(r, t, e), w = (e, n, r) => b(e, n + "", r);
+let c = class extends f {
+  constructor(e = {}, n, r) {
+    super(), this._config = e, this._injector = n, this._componentManager = r;
+  }
+  onStarting() {
+    this._componentManager.setHandler("web-component", (e, n) => () => g(
+      u(O, {
+        component: e,
+        props: {
+          name: n
+        }
+      })
+    ));
+  }
+};
+w(c, "pluginName", "UNIVER_UI_ADAPTER_WEB_COMPONENT_PLUGIN");
+c = h([
+  l(_),
+  i(1, a(s)),
+  i(2, a(d))
+], c);
+function O(e) {
+  const { component: n, props: r } = e, { name: t } = r != null ? r : {};
+  if (!t)
+    throw new Error("WebComponentComponentWrapper requires a name prop to define the custom element.");
+  customElements.get(t) || customElements.define(t, n);
+  const o = v(null);
+  return P(() => {
+    if (!o.current) return;
+    const m = document.createElement(t);
+    return o.current.appendChild(m), () => {
+      var p;
+      (p = o.current) == null || p.removeChild(m);
+    };
+  }, []), u("div", { ref: o });
+}
+export {
+  c as UniverWebComponentAdapterPlugin
+};

package/lib/index.js

@@ -0,0 +1,47 @@
+import { DependentOn as l, Inject as a, Injector as s, Plugin as f } from "@univerjs/core";
+import { UniverUIPlugin as _, ComponentManager as d } from "@univerjs/ui";
+import { cloneElement as g, createElement as u, useRef as v, useEffect as P } from "react";
+var C = Object.defineProperty, E = Object.getOwnPropertyDescriptor, b = (e, n, r) => n in e ? C(e, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[n] = r, h = (e, n, r, t) => {
+  for (var o = t > 1 ? void 0 : t ? E(n, r) : n, m = e.length - 1, p; m >= 0; m--)
+    (p = e[m]) && (o = p(o) || o);
+  return o;
+}, i = (e, n) => (r, t) => n(r, t, e), w = (e, n, r) => b(e, n + "", r);
+let c = class extends f {
+  constructor(e = {}, n, r) {
+    super(), this._config = e, this._injector = n, this._componentManager = r;
+  }
+  onStarting() {
+    this._componentManager.setHandler("web-component", (e, n) => () => g(
+      u(O, {
+        component: e,
+        props: {
+          name: n
+        }
+      })
+    ));
+  }
+};
+w(c, "pluginName", "UNIVER_UI_ADAPTER_WEB_COMPONENT_PLUGIN");
+c = h([
+  l(_),
+  i(1, a(s)),
+  i(2, a(d))
+], c);
+function O(e) {
+  const { component: n, props: r } = e, { name: t } = r != null ? r : {};
+  if (!t)
+    throw new Error("WebComponentComponentWrapper requires a name prop to define the custom element.");
+  customElements.get(t) || customElements.define(t, n);
+  const o = v(null);
+  return P(() => {
+    if (!o.current) return;
+    const m = document.createElement(t);
+    return o.current.appendChild(m), () => {
+      var p;
+      (p = o.current) == null || p.removeChild(m);
+    };
+  }, []), u("div", { ref: o });
+}
+export {
+  c as UniverWebComponentAdapterPlugin
+};

package/lib/types/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { UniverWebComponentAdapterPlugin } from './plugin';

package/lib/types/plugin.d.ts

@@ -0,0 +1,17 @@
+import { Injector, Plugin } from '@univerjs/core';
+import { ComponentManager } from '@univerjs/ui';
+/**
+ * The plugin that allows Univer to use web components as UI components.
+ */
+export declare class UniverWebComponentAdapterPlugin extends Plugin {
+    private readonly _config;
+    protected readonly _injector: Injector;
+    protected readonly _componentManager: ComponentManager;
+    static pluginName: string;
+    constructor(_config: {} | undefined, _injector: Injector, _componentManager: ComponentManager);
+    onStarting(): void;
+}
+export declare function WebComponentComponentWrapper(options: {
+    component: CustomElementConstructor;
+    props?: Record<string, any>;
+}): import('react').DetailedReactHTMLElement<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/lib/umd/index.js

@@ -0,0 +1 @@
+(function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("@univerjs/core"),require("@univerjs/ui"),require("react")):typeof define=="function"&&define.amd?define(["exports","@univerjs/core","@univerjs/ui","react"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r.UniverUiAdapterWebComponent={},r.UniverCore,r.UniverUi,r.React))})(this,function(r,i,a,m){"use strict";var d=Object.defineProperty,f=Object.getOwnPropertyDescriptor,l=(t,e,n)=>e in t?d(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,v=(t,e,n,o)=>{for(var u=o>1?void 0:o?f(e,n):e,p=t.length-1,c;p>=0;p--)(c=t[p])&&(u=c(u)||u);return u},s=(t,e)=>(n,o)=>e(n,o,t),_=(t,e,n)=>l(t,e+"",n);r.UniverWebComponentAdapterPlugin=class extends i.Plugin{constructor(e={},n,o){super(),this._config=e,this._injector=n,this._componentManager=o}onStarting(){this._componentManager.setHandler("web-component",(e,n)=>()=>m.cloneElement(m.createElement(C,{component:e,props:{name:n}})))}},_(r.UniverWebComponentAdapterPlugin,"pluginName","UNIVER_UI_ADAPTER_WEB_COMPONENT_PLUGIN"),r.UniverWebComponentAdapterPlugin=v([i.DependentOn(a.UniverUIPlugin),s(1,i.Inject(i.Injector)),s(2,i.Inject(a.ComponentManager))],r.UniverWebComponentAdapterPlugin);function C(t){const{component:e,props:n}=t,{name:o}=n!=null?n:{};if(!o)throw new Error("WebComponentComponentWrapper requires a name prop to define the custom element.");customElements.get(o)||customElements.define(o,e);const u=m.useRef(null);return m.useEffect(()=>{if(!u.current)return;const p=document.createElement(o);return u.current.appendChild(p),()=>{var c;(c=u.current)==null||c.removeChild(p)}},[]),m.createElement("div",{ref:u})}Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@univerjs/ui-adapter-web-component",
+  "version": "0.8.3-nightly.202507010644",
+  "private": false,
+  "description": "Web component adapter for Univer UI",
+  "author": "DreamNum <developer@univer.ai>",
+  "license": "Apache-2.0",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/univer"
+  },
+  "homepage": "https://univer.ai",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dream-num/univer"
+  },
+  "bugs": {
+    "url": "https://github.com/dream-num/univer/issues"
+  },
+  "keywords": [
+    "univer"
+  ],
+  "exports": {
+    ".": {
+      "import": "./lib/es/index.js",
+      "require": "./lib/cjs/index.js",
+      "types": "./lib/types/index.d.ts"
+    },
+    "./*": {
+      "import": "./lib/es/*",
+      "require": "./lib/cjs/*",
+      "types": "./lib/types/index.d.ts"
+    },
+    "./lib/*": "./lib/*"
+  },
+  "main": "./lib/es/index.js",
+  "types": "./lib/types/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "files": [
+    "lib"
+  ],
+  "peerDependencies": {
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+  },
+  "dependencies": {
+    "@univerjs/core": "0.8.3-nightly.202507010644",
+    "@univerjs/ui": "0.8.3-nightly.202507010644"
+  },
+  "devDependencies": {
+    "react": "18.3.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vitest": "^3.2.4",
+    "@univerjs-infra/shared": "0.8.3"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "coverage": "vitest run --coverage",
+    "lint:types": "tsc --noEmit",
+    "build": "univer-cli build"
+  },
+  "module": "./lib/es/index.js"
+}