@web-widget/react 0.0.1

package/dist/babel-plugin.d.ts

@@ -0,0 +1,14 @@
+import { PluginPass } from '@babel/core';
+import { Visitor } from '@babel/traverse';
+
+type Config = {
+    base: string;
+    root: string;
+    isServer: boolean;
+};
+declare const _default: (api: object, options: Record<string, any> | null | undefined, dirname: string) => {
+    name: string;
+    visitor: Visitor<PluginPass>;
+};
+
+export { Config, _default as default };

package/dist/babel-plugin.js

@@ -0,0 +1,127 @@
+// src/babel-plugin.ts
+import { addNamed } from "@babel/helper-module-imports";
+import { declare } from "@babel/helper-plugin-utils";
+import { types as t } from "@babel/core";
+function createWebWidgetVariableDeclaration(definer, component, source, base, options) {
+  const getType = (object) => Object.prototype.toString.call(object).slice(8, -1).toLocaleLowerCase();
+  return t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.identifier(component),
+      t.callExpression(t.identifier(definer), [
+        t.arrowFunctionExpression(
+          [],
+          t.callExpression(t.import(), [t.stringLiteral(source)])
+        ),
+        t.stringLiteral(base),
+        t.objectExpression(
+          Object.keys(options).map((key) => {
+            const value = options[key];
+            const type = getType(value);
+            switch (type) {
+              case "string":
+                return t.objectProperty(
+                  t.identifier(key),
+                  t.stringLiteral(value)
+                );
+              case "number":
+                return t.objectProperty(
+                  t.identifier(key),
+                  t.numericLiteral(value)
+                );
+              case "boolean":
+                return t.objectProperty(
+                  t.identifier(key),
+                  t.booleanLiteral(value)
+                );
+              case "null":
+                return t.objectProperty(t.identifier(key), t.nullLiteral());
+            }
+            throw new Error(`Type not supported: ${key}=${value}`);
+          })
+        )
+      ])
+    )
+  ]);
+}
+var babel_plugin_default = declare((api) => {
+  api.assertVersion(7);
+  let config;
+  const visitor = {
+    Program: {
+      enter(path, { opts }) {
+        config = opts;
+      }
+    },
+    JSXOpeningElement(path, state) {
+      if (!state.filename) {
+        return;
+      }
+      const name = path.node.name;
+      let bindingName;
+      if (t.isJSXIdentifier(name)) {
+        bindingName = name.name;
+      } else if (t.isJSXMemberExpression(name)) {
+        let object = name.object;
+        while (t.isJSXMemberExpression(object)) {
+          object = object.object;
+        }
+        bindingName = object.name;
+      } else if (t.isJSXNamespacedName(name)) {
+        bindingName = name.namespace.name;
+      } else {
+        return;
+      }
+      const binding = path.scope.getBinding(bindingName);
+      if (binding && t.isImportDeclaration(binding.path.parent)) {
+        const container = path.container;
+        if (!t.isJSXElement(container)) {
+          return;
+        }
+        if (!t.isJSXIdentifier(container.openingElement.name)) {
+          return;
+        }
+        const attributes = container.openingElement.attributes;
+        const clientAttr = attributes.find(
+          (attr) => t.isJSXAttribute(attr) && (attr.name.name === "client" || attr.name.name === "clientOnly")
+        );
+        if (!clientAttr) {
+          return;
+        }
+        container.openingElement.attributes = container.openingElement.attributes.filter(
+          (attr) => attr !== clientAttr
+        );
+        const options = {
+          name: container.openingElement.name.name,
+          recovering: config.isServer && clientAttr.name.name !== "clientOnly"
+        };
+        if (t.isStringLiteral(clientAttr.value) && clientAttr.value.value) {
+          options.loading = clientAttr.value.value;
+        }
+        const importDeclaration = binding.path.parent;
+        const source = importDeclaration.source.value;
+        const importName = addNamed(
+          path,
+          "defineWebWidget",
+          "@web-widget/react"
+        );
+        const base = config.base;
+        binding.path.parentPath?.replaceWith(
+          createWebWidgetVariableDeclaration(
+            importName.name,
+            container.openingElement.name.name,
+            source,
+            base,
+            options
+          )
+        );
+      }
+    }
+  };
+  return {
+    name: "@web-widget/react:web-widget",
+    visitor
+  };
+});
+export {
+  babel_plugin_default as default
+};

package/dist/react.client.d.ts

@@ -0,0 +1,21 @@
+import * as _web_widget_schema from '@web-widget/schema';
+export * from '@web-widget/schema/client';
+export { C as ClientOptions, D as DefineWebWidgetOptions, W as WebWidget, b as WebWidgetClient, a as WebWidgetClientProps, c as WebWidgetProps, _ as __ENV__, W as default, e as defineClient, f as defineClientOnly, d as defineWebWidget, r as renderServerWidget } from './web-widget-ec342172.js';
+import 'react/jsx-runtime';
+import 'react';
+
+declare const render: (context: _web_widget_schema.ClientWidgetRenderContext<unknown> | _web_widget_schema.ClientRouteRenderContext<unknown, Record<string, string>>) => Promise<void | {
+    mount?: (() => void | Promise<void>) | undefined;
+    unmount?: (() => void | Promise<void>) | undefined;
+    update?: (({ data }: {
+        data: Record<string, any>;
+    }) => void | Promise<void>) | undefined;
+} | {
+    mount?: (() => void | Promise<void>) | undefined;
+    unmount?: (() => void | Promise<void>) | undefined;
+    update?: (({ data }: {
+        data: Record<string, any>;
+    }) => void | Promise<void>) | undefined;
+}>;
+
+export { render };

package/dist/react.client.js

@@ -0,0 +1,208 @@
+// src/web-widget.tsx
+import { Suspense, createElement, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+var __ENV__ = {
+  server: true
+};
+var MODULE_REG = /\b(?:import|__vite_ssr_dynamic_import__)\(["']([^"']*?)["']\)/;
+function getFilename(loader) {
+  const match = String(loader).match(MODULE_REG);
+  const id = match?.[1];
+  if (!id) {
+    throw new Error(`The url for the module was not found: ${loader}`);
+  }
+  return id;
+}
+async function readableStreamToString(stream) {
+  const decoder = new TextDecoder();
+  const reader = stream.getReader();
+  let result = "";
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done)
+        break;
+      const chunk = decoder.decode(value, { stream: true });
+      result += chunk;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+  return result;
+}
+function WebWidgetClient({
+  base,
+  data,
+  import: url,
+  innerHTML = "",
+  loading,
+  name,
+  recovering
+}) {
+  const attrs = {
+    base,
+    data: JSON.stringify(data),
+    import: url,
+    loading,
+    name,
+    rendertarget: "light"
+  };
+  if (recovering && typeof recovering !== "string") {
+    Object.assign(attrs, {
+      recovering: ""
+    });
+  }
+  return createElement("web-widget", {
+    ...attrs,
+    dangerouslySetInnerHTML: { __html: innerHTML }
+  });
+}
+async function renderServerWidget(loader, data) {
+  const module = await loader();
+  if (typeof module.render !== "function") {
+    const url = getFilename(loader);
+    throw new Error(`The module does not export a 'render' method: ${url}`);
+  }
+  const result = await module.render({
+    meta: module.meta ?? {},
+    // TODO 处理 Meta 中的相对路径资产
+    module,
+    data
+  });
+  if (result instanceof ReadableStream) {
+    return await readableStreamToString(result);
+  } else if (typeof result === "string") {
+    return result;
+  } else {
+    const url = getFilename(loader);
+    throw new Error(`Render results in an unknown format: ${url}`);
+  }
+}
+function WebWidget({
+  base,
+  children,
+  data,
+  fallback,
+  import: url,
+  loader,
+  loading,
+  name,
+  recovering
+}) {
+  if (!base) {
+    throw new Error(`Missing base`);
+  }
+  if (children) {
+    throw new Error(`No support for 'children'`);
+  }
+  if (recovering && !loader) {
+    throw new Error(`Missing loader`);
+  }
+  const WebWidgetClientFactory = lazy(async () => {
+    let innerHTML = "";
+    if (__ENV__.server && recovering && loader) {
+      innerHTML = await renderServerWidget(loader, data);
+    }
+    return {
+      default: function WebWidgetClientFactory2() {
+        return /* @__PURE__ */ jsx(
+          WebWidgetClient,
+          {
+            ...{
+              base,
+              data,
+              import: url,
+              loading,
+              name,
+              innerHTML,
+              recovering
+            }
+          }
+        );
+      }
+    };
+  });
+  return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(WebWidgetClientFactory, {}) });
+}
+function defineWebWidget(loader, base, { loading, name, recovering = true } = {}) {
+  const url = getFilename(loader);
+  return function WebWidgetFactory({
+    children,
+    fallback,
+    ...data
+  }) {
+    return /* @__PURE__ */ jsx(
+      WebWidget,
+      {
+        ...{
+          base,
+          data,
+          fallback,
+          import: url,
+          loader,
+          loading,
+          name,
+          recovering
+        },
+        children
+      }
+    );
+  };
+}
+function defineClient(loader, base, { loading, name } = {}) {
+  return defineWebWidget(loader, base, {
+    loading,
+    name,
+    recovering: true
+  });
+}
+function defineClientOnly(loader, base, { loading, name } = {}) {
+  return defineWebWidget(loader, base, {
+    loading,
+    name,
+    recovering: false
+  });
+}
+
+// src/client.ts
+import { createElement as createElement2 } from "react";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import { defineRender, isRouteRenderContext } from "@web-widget/schema/client";
+export * from "@web-widget/schema/client";
+Reflect.defineProperty(__ENV__, "server", {
+  value: false
+});
+var render = defineRender(
+  async (context, component, props) => {
+    const { recovering, container } = context;
+    if (!container) {
+      throw new Error(`Container required.`);
+    }
+    let vnode;
+    if (typeof component === "function" && component.constructor.name === "AsyncFunction") {
+      if (isRouteRenderContext(context)) {
+        vnode = await component(props);
+      } else {
+        throw new Error("Async widget components are not supported.");
+      }
+    } else {
+      vnode = createElement2(component, props);
+    }
+    if (recovering) {
+      hydrateRoot(container, vnode);
+    } else {
+      createRoot(container).render(vnode);
+    }
+  }
+);
+export {
+  WebWidget,
+  WebWidgetClient,
+  __ENV__,
+  WebWidget as default,
+  defineClient,
+  defineClientOnly,
+  defineWebWidget,
+  render,
+  renderServerWidget
+};

package/dist/react.server.d.ts

@@ -0,0 +1,9 @@
+import * as _web_widget_schema from '@web-widget/schema';
+export * from '@web-widget/schema/server';
+export { C as ClientOptions, D as DefineWebWidgetOptions, W as WebWidget, b as WebWidgetClient, a as WebWidgetClientProps, c as WebWidgetProps, _ as __ENV__, W as default, e as defineClient, f as defineClientOnly, d as defineWebWidget, r as renderServerWidget } from './web-widget-ec342172.js';
+import 'react/jsx-runtime';
+import 'react';
+
+declare const render: (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>) => Promise<string | ReadableStream<any>>;
+
+export { render };

package/dist/react.server.js

@@ -0,0 +1,200 @@
+// src/web-widget.tsx
+import { Suspense, createElement, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+var __ENV__ = {
+  server: true
+};
+var MODULE_REG = /\b(?:import|__vite_ssr_dynamic_import__)\(["']([^"']*?)["']\)/;
+function getFilename(loader) {
+  const match = String(loader).match(MODULE_REG);
+  const id = match?.[1];
+  if (!id) {
+    throw new Error(`The url for the module was not found: ${loader}`);
+  }
+  return id;
+}
+async function readableStreamToString(stream) {
+  const decoder = new TextDecoder();
+  const reader = stream.getReader();
+  let result = "";
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done)
+        break;
+      const chunk = decoder.decode(value, { stream: true });
+      result += chunk;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+  return result;
+}
+function WebWidgetClient({
+  base,
+  data,
+  import: url,
+  innerHTML = "",
+  loading,
+  name,
+  recovering
+}) {
+  const attrs = {
+    base,
+    data: JSON.stringify(data),
+    import: url,
+    loading,
+    name,
+    rendertarget: "light"
+  };
+  if (recovering && typeof recovering !== "string") {
+    Object.assign(attrs, {
+      recovering: ""
+    });
+  }
+  return createElement("web-widget", {
+    ...attrs,
+    dangerouslySetInnerHTML: { __html: innerHTML }
+  });
+}
+async function renderServerWidget(loader, data) {
+  const module = await loader();
+  if (typeof module.render !== "function") {
+    const url = getFilename(loader);
+    throw new Error(`The module does not export a 'render' method: ${url}`);
+  }
+  const result = await module.render({
+    meta: module.meta ?? {},
+    // TODO 处理 Meta 中的相对路径资产
+    module,
+    data
+  });
+  if (result instanceof ReadableStream) {
+    return await readableStreamToString(result);
+  } else if (typeof result === "string") {
+    return result;
+  } else {
+    const url = getFilename(loader);
+    throw new Error(`Render results in an unknown format: ${url}`);
+  }
+}
+function WebWidget({
+  base,
+  children,
+  data,
+  fallback,
+  import: url,
+  loader,
+  loading,
+  name,
+  recovering
+}) {
+  if (!base) {
+    throw new Error(`Missing base`);
+  }
+  if (children) {
+    throw new Error(`No support for 'children'`);
+  }
+  if (recovering && !loader) {
+    throw new Error(`Missing loader`);
+  }
+  const WebWidgetClientFactory = lazy(async () => {
+    let innerHTML = "";
+    if (__ENV__.server && recovering && loader) {
+      innerHTML = await renderServerWidget(loader, data);
+    }
+    return {
+      default: function WebWidgetClientFactory2() {
+        return /* @__PURE__ */ jsx(
+          WebWidgetClient,
+          {
+            ...{
+              base,
+              data,
+              import: url,
+              loading,
+              name,
+              innerHTML,
+              recovering
+            }
+          }
+        );
+      }
+    };
+  });
+  return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(WebWidgetClientFactory, {}) });
+}
+function defineWebWidget(loader, base, { loading, name, recovering = true } = {}) {
+  const url = getFilename(loader);
+  return function WebWidgetFactory({
+    children,
+    fallback,
+    ...data
+  }) {
+    return /* @__PURE__ */ jsx(
+      WebWidget,
+      {
+        ...{
+          base,
+          data,
+          fallback,
+          import: url,
+          loader,
+          loading,
+          name,
+          recovering
+        },
+        children
+      }
+    );
+  };
+}
+function defineClient(loader, base, { loading, name } = {}) {
+  return defineWebWidget(loader, base, {
+    loading,
+    name,
+    recovering: true
+  });
+}
+function defineClientOnly(loader, base, { loading, name } = {}) {
+  return defineWebWidget(loader, base, {
+    loading,
+    name,
+    recovering: false
+  });
+}
+
+// src/server.ts
+import { createElement as createElement2 } from "react";
+import * as ReactDOMServer from "react-dom/server.browser";
+import { defineRender, isRouteRenderContext } from "@web-widget/schema/server";
+export * from "@web-widget/schema/server";
+Reflect.defineProperty(__ENV__, "server", {
+  value: true
+});
+var render = defineRender(
+  async (context, component, props) => {
+    let vnode;
+    if (typeof component === "function" && component.constructor.name === "AsyncFunction") {
+      if (isRouteRenderContext(context)) {
+        vnode = await component(props);
+      } else {
+        throw new Error("Async widget components are not supported.");
+      }
+    } else {
+      vnode = createElement2(component, props);
+    }
+    return ReactDOMServer.renderToReadableStream(vnode);
+  }
+);
+export {
+  WebWidget,
+  WebWidgetClient,
+  __ENV__,
+  WebWidget as default,
+  defineClient,
+  defineClientOnly,
+  defineWebWidget,
+  render,
+  renderServerWidget
+};

package/dist/vite-plugin.d.ts

@@ -0,0 +1,6 @@
+import { Plugin, PluginOption } from 'vite';
+import { Options } from '@vitejs/plugin-react';
+
+declare function ReactWebWidgetVitePlugin(options?: Options): Plugin | PluginOption;
+
+export { ReactWebWidgetVitePlugin as default };

package/dist/vite-plugin.js

@@ -0,0 +1,57 @@
+// src/vite-plugin.ts
+import react from "@vitejs/plugin-react";
+function ReactWebWidgetVitePlugin(options = {}) {
+  let config;
+  return [
+    {
+      name: "@web-widget/react:get-config",
+      enforce: "pre",
+      config(config2) {
+        var _a;
+        config2.resolve || (config2.resolve = {});
+        (_a = config2.resolve).alias || (_a.alias = {});
+        const aliases = [
+          { find: "react-dom/server", replacement: "react-dom/server.browser" }
+        ];
+        if (Array.isArray(config2.resolve.alias)) {
+          config2.resolve.alias = [...config2.resolve.alias, ...aliases];
+        } else {
+          for (const alias of aliases) {
+            config2.resolve.alias[alias.find] = alias.replacement;
+          }
+        }
+      },
+      configResolved(resolvedConfig) {
+        config = resolvedConfig;
+      }
+    },
+    ...react({
+      ...options,
+      babel: {
+        ...options?.babel,
+        plugins: [
+          // @ts-expect-error
+          ...options?.babel?.plugins || [],
+          [
+            "@web-widget/react/babel-plugin",
+            {
+              get base() {
+                const isServer = !!config.build.ssr;
+                return isServer ? config.base + config.build.assetsDir + "/" : config.base;
+              },
+              get root() {
+                return config.root;
+              },
+              get isServer() {
+                return !!config.build.ssr || config.command === "serve";
+              }
+            }
+          ]
+        ]
+      }
+    })
+  ];
+}
+export {
+  ReactWebWidgetVitePlugin as default
+};

package/dist/web-widget-ec342172.d.ts

@@ -0,0 +1,60 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { WidgetModule } from '@web-widget/schema';
+
+declare const __ENV__: {
+    server: boolean;
+};
+type JSONValue = string | number | boolean | {
+    [x: string]: JSONValue;
+} | Array<JSONValue>;
+type JSONProps = {
+    [x: string]: JSONValue;
+};
+type Loader = () => Promise<WidgetModule>;
+interface WebWidgetClientProps {
+    base: string;
+    data: JSONProps;
+    import: string;
+    innerHTML?: string;
+    loading?: string;
+    name?: string;
+    recovering: boolean;
+}
+declare function WebWidgetClient({ base, data, import: url, innerHTML, loading, name, recovering, }: WebWidgetClientProps): react.DOMElement<{
+    dangerouslySetInnerHTML: {
+        __html: string;
+    };
+    base: string;
+    data: string;
+    import: string;
+    loading: string | undefined;
+    name: string | undefined;
+    rendertarget: string;
+}, Element>;
+declare function renderServerWidget(loader: Loader, data: any): Promise<string>;
+interface WebWidgetProps extends WebWidgetClientProps {
+    fallback?: ReactNode;
+    children?: ReactNode | undefined;
+    loader?: Loader;
+}
+declare function WebWidget({ base, children, data, fallback, import: url, loader, loading, name, recovering, }: WebWidgetProps): react_jsx_runtime.JSX.Element;
+type WebWidgetFactoryProps = JSONProps & {
+    children?: ReactNode;
+    fallback?: ReactNode;
+};
+interface DefineWebWidgetOptions {
+    loading?: string;
+    name?: string;
+    recovering?: boolean;
+}
+declare function defineWebWidget(loader: Loader, base: string, { loading, name, recovering }?: DefineWebWidgetOptions): ({ children, fallback, ...data }: WebWidgetFactoryProps) => react_jsx_runtime.JSX.Element;
+interface ClientOptions {
+    loading?: "lazy";
+    name?: string;
+}
+declare function defineClient(loader: Loader, base: string, { loading, name }?: ClientOptions): ({ children, fallback, ...data }: WebWidgetFactoryProps) => react_jsx_runtime.JSX.Element;
+declare function defineClientOnly(loader: Loader, base: string, { loading, name }?: ClientOptions): ({ children, fallback, ...data }: WebWidgetFactoryProps) => react_jsx_runtime.JSX.Element;
+
+export { ClientOptions as C, DefineWebWidgetOptions as D, WebWidget as W, __ENV__ as _, WebWidgetClientProps as a, WebWidgetClient as b, WebWidgetProps as c, defineWebWidget as d, defineClient as e, defineClientOnly as f, renderServerWidget as r };

package/globals.d.ts

@@ -0,0 +1,9 @@
+type _IntrinsicAttributes = IntrinsicAttributes;
+type loading = boolean | "lazy";
+
+declare namespace JSX {
+  interface IntrinsicAttributes extends _IntrinsicAttributes {
+    client?: loading;
+    clientOnly?: loading;
+  }
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@web-widget/react",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "worker": {
+        "types": "./dist/react.server.d.ts",
+        "default": "./dist/react.server.js"
+      },
+      "browser": {
+        "types": "./dist/react.client.d.ts",
+        "default": "./dist/react.client.js"
+      },
+      "default": {
+        "types": "./dist/react.server.d.ts",
+        "default": "./dist/react.server.js"
+      }
+    },
+    "./babel-plugin": {
+      "types": "./dist/babel-plugin.d.ts",
+      "default": "./dist/babel-plugin.js"
+    },
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin.d.ts",
+      "default": "./dist/vite-plugin.js"
+    },
+    "./globals": "./globals.d.ts"
+  },
+  "files": [
+    "dist",
+    "globals.d.ts"
+  ],
+  "dependencies": {
+    "@babel/core": "^7.22.5",
+    "@babel/helper-module-imports": "^7.22.5",
+    "@babel/helper-plugin-utils": "^7.22.5",
+    "@babel/traverse": "^7.22.5",
+    "@web-widget/schema": "0.0.1"
+  },
+  "peerDependencies": {
+    "@vitejs/plugin-react": "^4.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/babel__core": "^7.20.1",
+    "@types/babel__helper-module-imports": "^7.18.0",
+    "@types/babel__helper-plugin-utils": "^7.10.0",
+    "@types/babel__traverse": "^7.20.1",
+    "@types/node": "^20.3.1",
+    "@types/react": "^18.2.9",
+    "@types/react-dom": "^18.0.6",
+    "tsup": "^7.0.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.9"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm exec tsup",
+    "dev": "pnpm exec tsup --watch"
+  }
+}