@emailmaker/extensions-react 0.9.0-dev.1

package/README.md

@@ -0,0 +1,72 @@
+# ⚛️ `extensions-react`
+
+`@emailmaker/extensions-react` нужен для React-плагинов.
+
+## Что в нем есть
+
+- `ComponentRegistry`
+- `createComponentIdentifier()`
+- поддержка React-компонентов в API
+
+## Что можно делать
+
+После установки пакета вы можете передавать JSX прямо в API:
+
+```ts
+import { SettingsPanelApi } from '@emailmaker/extensions-app';
+import '@emailmaker/extensions-react';
+
+settingsPanel.showSettingsPanel({
+  content: <MyPanel />,
+});
+```
+
+## Когда использовать JSX
+
+Прямой JSX — лучший путь по умолчанию для React-плагина:
+
+```ts
+settingsPanel.showSettingsPanel({
+  content: <MyPanel value={state} />,
+});
+```
+
+Он хорош, когда:
+
+- не нужен стабильный `ComponentId`
+- не нужен `override()`
+- UI используется локально в одном месте
+
+## Когда использовать `ComponentRegistry`
+
+`ComponentRegistry` нужен, если:
+
+- компонент должен быть доступен по `ComponentId`
+- нужна возможность `override()`
+- компонент используется в нескольких местах через `{ type, props }`
+- нужен стабильный идентификатор для контракта между частями плагина
+
+Пример:
+
+```ts
+import { createComponentIdentifier } from '@emailmaker/extensions-app';
+import { ComponentRegistry } from '@emailmaker/extensions-react';
+
+const PanelId = createComponentIdentifier<{ value: string }>('MyPanel');
+
+ComponentRegistry.add(PanelId, MyPanel);
+
+settingsPanel.showSettingsPanel({
+  content: {
+    type: PanelId,
+    props: { value: 'hello' },
+  },
+});
+```
+
+## Короткое правило
+
+- для React-плагина ставьте `@emailmaker/extensions-react`
+- для обычного React UI чаще всего достаточно JSX
+- если нужен идентификатор компонента, используйте `ComponentRegistry`
+

package/externals.json

@@ -0,0 +1,94 @@
+{
+  "react": [
+    "promise __emailmaker__.modules",
+    "React"
+  ],
+  "react-dom": [
+    "promise __emailmaker__.modules",
+    "ReactDom"
+  ],
+  "react-dom/client": [
+    "promise __emailmaker__.modules",
+    "ReactDomClient"
+  ],
+  "react/jsx-runtime": [
+    "promise __emailmaker__.modules",
+    "ReactJsxRuntime"
+  ],
+  "react/jsx-dev-runtime": [
+    "promise __emailmaker__.modules",
+    "ReactJsxDevRuntime"
+  ],
+  "prop-types": [
+    "promise __emailmaker__.modules",
+    "PropTypes"
+  ],
+  "react-router-dom": [
+    "promise __emailmaker__.modules",
+    "ReactRouterDom"
+  ],
+  "antd": [
+    "promise __emailmaker__.modules",
+    "Antd"
+  ],
+  "@ant-design/icons": [
+    "promise __emailmaker__.modules",
+    "AntDesignIcons"
+  ],
+  "@ant-design/cssinjs": [
+    "promise __emailmaker__.modules",
+    "AntDesignCssinjs"
+  ],
+  "@ant-design/pro-layout": [
+    "promise __emailmaker__.modules",
+    "AntDesignProLayout"
+  ],
+  "classnames": [
+    "promise __emailmaker__.modules",
+    "Classnames"
+  ],
+  "dayjs": [
+    "promise __emailmaker__.modules",
+    "Dayjs"
+  ],
+  "uuid": [
+    "promise __emailmaker__.modules",
+    "Uuid"
+  ],
+  "@emailmaker/runtime/core": [
+    "promise __emailmaker__.modules",
+    "Core"
+  ],
+  "di": [
+    "promise __emailmaker__.modules",
+    "Core"
+  ],
+  "@emailmaker/runtime/di": [
+    "promise __emailmaker__.modules",
+    "Core"
+  ],
+  "disposable": [
+    "promise __emailmaker__.modules",
+    "Core"
+  ],
+  "@emailmaker/runtime/disposable": [
+    "promise __emailmaker__.modules",
+    "Core"
+  ],
+  "guid": [
+    "promise __emailmaker__.modules",
+    "Core"
+  ],
+  "@emailmaker/runtime/guid": [
+    "promise __emailmaker__.modules",
+    "Core"
+  ],
+  "app-core": [
+    "promise __emailmaker__.modules",
+    "Core"
+  ],
+  "@emailmaker/runtime/app-core": [
+    "promise __emailmaker__.modules",
+    "Core"
+  ]
+}

package/index.js

@@ -0,0 +1,206 @@
+import { Component as e, Fragment as t, createElement as n, createRef as r, isValidElement as i } from "react";
+import { createComponentIdentifier as a } from "@emailmaker/extensions-app";
+//#region \0rolldown/runtime.js
+var o = Object.defineProperty, s = Object.getOwnPropertyDescriptor, c = Object.getOwnPropertyNames, l = Object.prototype.hasOwnProperty, u = (e, t) => {
+	let n = {};
+	for (var r in e) o(n, r, {
+		get: e[r],
+		enumerable: !0
+	});
+	return t || o(n, Symbol.toStringTag, { value: "Module" }), n;
+}, d = (e, t, n, r) => {
+	if (t && typeof t == "object" || typeof t == "function") for (var i = c(t), a = 0, u = i.length, d; a < u; a++) d = i[a], !l.call(e, d) && d !== n && o(e, d, {
+		get: ((e) => t[e]).bind(null, d),
+		enumerable: !(r = s(t, d)) || r.enumerable
+	});
+	return e;
+}, f = (e, t, n) => (d(e, t, "default"), n && d(n, t, "default")), p = /* @__PURE__ */ u({});
+import * as m from "@emailmaker/runtime/di";
+f(p, m);
+//#endregion
+//#region packages/extensions-core/components/DomComponentRegistry.ts
+var h = class {
+	_factories = /* @__PURE__ */ new Map();
+	add(e, t) {
+		let n = e;
+		return this._factories.set(n, t), { dispose: () => {
+			this._factories.get(n) === t && this._factories.delete(n);
+		} };
+	}
+	get(e) {
+		return this._factories.get(e);
+	}
+}, g = (0, p.createIdentifier)("DomComponentRegistry");
+function _(e, t = g) {
+	return p.DependencyResolver.getOrCreateInstance(t, () => new h());
+}
+//#endregion
+//#region packages/extensions-core/components/ComponentRegistry.ts
+function v(e) {
+	return typeof e == "function";
+}
+function y(e) {
+	return i(e);
+}
+function b(e) {
+	return typeof e == "function" || y(e);
+}
+function x(e) {
+	return typeof e == "object" && !!e && "type" in e && "props" in e && !y(e);
+}
+function S(e, t) {
+	return n(e, t);
+}
+function C(t) {
+	return class extends e {
+		_ref = r();
+		_instance;
+		componentDidMount() {
+			this._ref.current && (this._instance = t(this.props), this._ref.current.appendChild(this._instance.node));
+		}
+		componentDidUpdate(e) {
+			this._instance?.update && this._instance.update(this.props);
+		}
+		componentWillUnmount() {
+			this._instance?.dispose && this._instance.dispose();
+		}
+		render() {
+			return n("div", { ref: this._ref });
+		}
+	};
+}
+var w = class {
+	_components = /* @__PURE__ */ new Map();
+	_domAdapters = /* @__PURE__ */ new Map();
+	constructor(e) {
+		this._domComponentRegistry = e;
+	}
+	add(e, t) {
+		return this.override(e, () => t);
+	}
+	addDom(e, t) {
+		let n = e;
+		this._domAdapters.delete(n);
+		let r = this._domComponentRegistry.add(e, t);
+		return { dispose: () => {
+			this._domAdapters.delete(n), r.dispose();
+		} };
+	}
+	override(e, t) {
+		let n = e, r = this._components.get(n);
+		r || (r = { replacers: [] }, this._components.set(n, r));
+		let i = () => {
+			let e = r.replacers.findIndex((e) => e.replacer === t);
+			e >= 0 && (r.replacers.splice(e, 1), this._recomputeComponent(n, r));
+		};
+		return r.replacers.push({
+			replacer: t,
+			dispose: i
+		}), this._recomputeComponent(n, r), { dispose: i };
+	}
+	_recomputeComponent(e, t) {
+		t.component = t.replacers.reduce((e, { replacer: t }) => t(e), void 0);
+	}
+	get(e) {
+		if (b(e)) return e;
+		let t = e, n = this._components.get(t);
+		if (n?.component) return n.component;
+		let r = this._domComponentRegistry.get(e);
+		if (r) {
+			let e = this._domAdapters.get(t);
+			return e || (e = C(r), this._domAdapters.set(t, e)), e;
+		}
+	}
+	_resolveComponentInput(e) {
+		if (e == null) return null;
+		if (typeof e == "number" || typeof e == "boolean" || y(e)) return e;
+		if (typeof e == "string") {
+			let t = this.get(e);
+			return y(t) ? t : t ? S(t) : e;
+		}
+		if (v(e)) return S(e);
+		if (x(e)) {
+			let t = this.get(e.type);
+			return y(t) ? t : t ? S(t, e.props) : null;
+		}
+		return null;
+	}
+	getReactNode(e) {
+		return this._resolveComponentInput(e);
+	}
+	getReactElement(e) {
+		let r = this._resolveComponentInput(e);
+		return y(r) ? r : typeof r == "string" || r == null || typeof r == "boolean" || typeof r == "number" ? n(t, null, r) : n(t, null);
+	}
+}, T = (0, p.createIdentifier)("ComponentRegistry");
+function E(e, t = T) {
+	return p.DependencyResolver.getOrCreateInstance(t, () => new w(_(p.DependencyResolver, g)));
+}
+//#endregion
+//#region src/extensions/react/src/index.ts
+(function(e) {
+	if (!(!e || typeof e != "object")) {
+		var t = e.__emailmaker__ ||= {}, n = t.__compat ||= {};
+		n.host = n.host || null, n.packages = n.packages || {}, n.warned = n.warned || {}, n.normalizeVersion ||= function(e) {
+			return String(e || "").split("-")[0] || "0.0.0";
+		}, n.parseVersion ||= function(e) {
+			var t = n.normalizeVersion(e).split(".");
+			return {
+				major: parseInt(t[0] || "0", 10),
+				minor: parseInt(t[1] || "0", 10),
+				patch: parseInt(t[2] || "0", 10)
+			};
+		}, n.compareVersions ||= function(e, t) {
+			var r = n.parseVersion(e), i = n.parseVersion(t);
+			return r.major === i.major ? r.minor === i.minor ? r.patch - i.patch : r.minor - i.minor : r.major - i.major;
+		}, n.satisfies ||= function(e, t) {
+			if (!t || t === "*" || t === "latest") return !0;
+			var r = n.normalizeVersion(e), i = String(t || "").trim();
+			if (!i) return !0;
+			if (i.charAt(0) === "^") {
+				var a = n.parseVersion(i.slice(1)), o = n.parseVersion(r);
+				return n.compareVersions(r, i.slice(1)) < 0 ? !1 : a.major > 0 ? o.major === a.major : a.minor > 0 ? o.major === 0 && o.minor === a.minor : o.major === 0 && o.minor === 0 && o.patch === a.patch;
+			}
+			return n.normalizeVersion(r) === n.normalizeVersion(i);
+		}, n.warnOnce ||= function(e, t, r) {
+			n.warned[e] || (n.warned[e] = !0, console.warn("[compat]", t, r || ""));
+		}, n.validateAll ||= function() {
+			var e = n.host, t = n.packages || {};
+			e && e.supports && Object.keys(t).forEach(function(r) {
+				var i = t[r], a = e.supports[r];
+				a && !n.satisfies(i.version, a) && n.warnOnce("host:" + r + ":" + i.version + ":" + a, "Host supports a different package version range.", {
+					packageId: r,
+					packageVersion: i.version,
+					supportedRange: a,
+					hostVersion: e.version
+				});
+			}), Object.keys(t).forEach(function(r) {
+				var i = t[r], a = i.requires || {};
+				Object.keys(a).forEach(function(o) {
+					var s = a[o], c = o === "host" ? e && e.version : t[o] && t[o].version;
+					c && (n.satisfies(c, s) || n.warnOnce(r + ":" + o + ":" + c + ":" + s, "Loaded package is outside the declared compatibility range.", {
+						packageId: r,
+						packageVersion: i.version,
+						targetId: o,
+						targetVersion: c,
+						requiredRange: s
+					}));
+				});
+			});
+		}, n.registerHost ||= function(e) {
+			n.host = e, n.validateAll();
+		}, n.registerPackage ||= function(e) {
+			n.packages[e.id] = e, n.validateAll();
+		}, t.__compat.registerPackage({
+			id: "extensions-react",
+			version: "0.9.0-dev.1",
+			requires: {
+				host: "^1.0.105",
+				"extensions-api": "^0.9.0"
+			}
+		});
+	}
+})(typeof window < "u" ? window : typeof globalThis < "u" ? globalThis : void 0);
+var D = E(p.DependencyResolver);
+//#endregion
+export { D as ComponentRegistry, a as createComponentIdentifier };

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@emailmaker/extensions-react",
+  "version": "0.9.0-dev.1",
+  "private": false,
+  "description": "React adapter for the Emailmaker extensions API.",
+  "main": "index.js",
+  "types": "types.d.ts",
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "antd": "5.11.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "@types/react": "18.2.70",
+    "@types/react-dom": "18.2.0",
+    "@emailmaker/runtime": "0.9.0-dev.1",
+    "@emailmaker/extensions-app": "0.9.0-dev.1"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "jsx": "react",
+    "module": "NodeNext",
+    "moduleResolution": "nodenext",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": false,
+    "outDir": "dist"
+  },
+  "files": [
+    "types.d.ts"
+  ]
+}

package/types.d.ts

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { ComponentId, ComponentType, IDisposable, createComponentIdentifier } from '@emailmaker/extensions-app';
+
+declare module '@emailmaker/extensions-app' {
+  interface ComponentInputRegistry<Props = unknown> {
+    reactComponent: React.ComponentClass<Props> | React.FunctionComponent<Props>;
+    reactElement: React.ReactElement;
+  }
+}
+/**
+ * Type alias for either a React component type or a React element.
+ * @template P The type of the component's props.
+ */
+type ReactNode<P> = React.ComponentClass<P> | React.FunctionComponent<P> | React.ReactElement;
+/**
+ * Function type for replacing a component with another.
+ * @template P The type of the component's props.
+ * @param {ReactNode<P> | undefined} base - The original component to be replaced.
+ * @returns {ReactNode<P>} The new component replacing the original.
+ */
+type ComponentReplacer<P> = (base: ReactNode<P> | undefined) => ReactNode<P>;
+/**
+ * Component Registry interface for managing React components dynamically.
+ */
+interface IComponentRegistry {
+  /**
+   * Adds a component to the registry.
+   * @template P The type of the component's props.
+   * @param {ComponentId<P>} id - The component identifier.
+   * @param {ReactNode<P>} component - The component instance.
+   * @returns {Disposable} A disposable instance to remove the component.
+   */
+  add<P>(id: ComponentId<P>, component: ReactNode<P>): IDisposable;
+  /**
+   * Overrides an existing component with a new replacer function.
+   * @template P The type of the component's props.
+   * @param {ComponentId<P>} id - The component identifier.
+   * @param {ComponentReplacer<P>} replacer - The replacer function.
+   * @returns {Disposable} A disposable instance for cleanup.
+   */
+  override<P>(id: ComponentId<P>, replacer: ComponentReplacer<P>): IDisposable;
+  /**
+   * Retrieves a registered component by its identifier.
+   * @template P The type of the component's props.
+   * @param {ComponentId<P> | ReactNode<P>} id - The component identifier or component instance.
+   * @returns {ReactNode<P> | undefined} The registered component or undefined if not found.
+   */
+  get<P>(id: ComponentId<P> | ReactNode<P>): ReactNode<P> | undefined;
+  /**
+   * Resolves a component into a ReactNode (React component instance or primitive value).
+   * @template P The type of the component's props.
+   * @param {ComponentType<P> | string | number | boolean | null | undefined} componentTypeObj - The component type object.
+   * @returns {React.ReactNode} The resolved React node.
+   */
+  getReactNode<P>(componentTypeObj: ComponentType<P> | string | number | boolean | null | undefined): React.ReactNode;
+  /**
+   * Resolves a component into a ReactElement.
+   * @template P The type of the component's props.
+   * @param {ComponentType<P>} componentTypeObj - The component type object.
+   * @returns {React.ReactElement} The resolved React element.
+   */
+  getReactElement<P>(componentTypeObj: ComponentType<P>): React.ReactElement;
+}
+declare const ComponentRegistry: IComponentRegistry;
+export { ComponentRegistry, ComponentReplacer, IComponentRegistry, createComponentIdentifier };