@web-widget/react 0.0.1 → 0.0.2

package/dist/babel-plugin.d.ts

@@ -1,6 +1,26 @@
 import { PluginPass } from '@babel/core';
 import { Visitor } from '@babel/traverse';
 
+/**
+ * This adds web-widget source path to JSX tags.
+ *
+ * == JSX Literals ==
+ *
+ * import MyComponent from "../widgets/my-component.jsx";
+ * ...
+ * <MyComponent as="web-widget" title="My component" />
+ *
+ * becomes:
+ *
+ * import { defineWebWidget } from "@web-widget/react/web-widget";
+ * const MyComponent = defineWebWidget(() => import("../widgets/my-component.jsx"), "/routes/", {
+ *   name: "MyComponent",
+ *   recovering: true
+ * });
+ * ...
+ * <MyComponent title="My component" />
+ */
+
 type Config = {
     base: string;
     root: string;

package/dist/babel-plugin.js

@@ -2,6 +2,7 @@
 import { addNamed } from "@babel/helper-module-imports";
 import { declare } from "@babel/helper-plugin-utils";
 import { types as t } from "@babel/core";
+var TAGNAME = "web-widget";
 function createWebWidgetVariableDeclaration(definer, component, source, base, options) {
   const getType = (object) => Object.prototype.toString.call(object).slice(8, -1).toLocaleLowerCase();
   return t.variableDeclaration("const", [
@@ -81,21 +82,25 @@ var babel_plugin_default = declare((api) => {
           return;
         }
         const attributes = container.openingElement.attributes;
-        const clientAttr = attributes.find(
-          (attr) => t.isJSXAttribute(attr) && (attr.name.name === "client" || attr.name.name === "clientOnly")
+        const widgetAttr = attributes.find(
+          (attr) => t.isJSXAttribute(attr) && attr.name.name === "as" && t.isStringLiteral(attr.value) && attr.value.value.startsWith(TAGNAME)
         );
-        if (!clientAttr) {
+        if (!widgetAttr) {
           return;
         }
+        const mode = t.isStringLiteral(widgetAttr.value) ? widgetAttr.value.value.replace(TAGNAME + ":", "") : "";
+        const loadingAttr = attributes.find(
+          (attr) => t.isJSXAttribute(attr) && attr.name.name === "loading"
+        ) || void 0;
         container.openingElement.attributes = container.openingElement.attributes.filter(
-          (attr) => attr !== clientAttr
+          (attr) => attr !== widgetAttr && attr !== loadingAttr
         );
         const options = {
           name: container.openingElement.name.name,
-          recovering: config.isServer && clientAttr.name.name !== "clientOnly"
+          recovering: config.isServer && mode !== "client"
         };
-        if (t.isStringLiteral(clientAttr.value) && clientAttr.value.value) {
-          options.loading = clientAttr.value.value;
+        if (loadingAttr && loadingAttr.value && t.isStringLiteral(loadingAttr.value)) {
+          options.loading = loadingAttr.value.value;
         }
         const importDeclaration = binding.path.parent;
         const source = importDeclaration.source.value;

package/dist/react.client.d.ts

@@ -1,5 +1,5 @@
 import * as _web_widget_schema from '@web-widget/schema';
-export * from '@web-widget/schema/client';
+export * from '@web-widget/schema/client-helpers';
 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';

package/dist/react.client.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 var __ENV__ = {
   server: true
 };
-var MODULE_REG = /\b(?:import|__vite_ssr_dynamic_import__)\(["']([^"']*?)["']\)/;
+var MODULE_REG = /\b(?:import|__vite_ssr_dynamic_import__)\(["']([^"']*)["']\)/;
 function getFilename(loader) {
   const match = String(loader).match(MODULE_REG);
   const id = match?.[1];
@@ -167,34 +167,45 @@ function defineClientOnly(loader, base, { loading, name } = {}) {
 // 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";
+import {
+  defineRender,
+  isRouteRenderContext
+} from "@web-widget/schema/client-helpers";
+export * from "@web-widget/schema/client-helpers";
 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);
+var render = defineRender(async (context, component, props) => {
+  const { recovering, container } = context;
+  if (!container) {
+    throw new Error(`Container required.`);
+  }
+  let root;
+  return {
+    async mount() {
+      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 {
-        throw new Error("Async widget components are not supported.");
+        vnode = createElement2(component, props);
       }
-    } else {
-      vnode = createElement2(component, props);
-    }
-    if (recovering) {
-      hydrateRoot(container, vnode);
-    } else {
-      createRoot(container).render(vnode);
+      if (recovering) {
+        root = hydrateRoot(container, vnode);
+      } else {
+        root = createRoot(container);
+        root.render(vnode);
+      }
+    },
+    async unmount() {
+      root?.unmount();
+      root = null;
     }
-  }
-);
+  };
+});
 export {
   WebWidget,
   WebWidgetClient,

package/dist/react.server.d.ts

@@ -1,5 +1,5 @@
 import * as _web_widget_schema from '@web-widget/schema';
-export * from '@web-widget/schema/server';
+export * from '@web-widget/schema/server-helpers';
 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';

package/dist/react.server.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 var __ENV__ = {
   server: true
 };
-var MODULE_REG = /\b(?:import|__vite_ssr_dynamic_import__)\(["']([^"']*?)["']\)/;
+var MODULE_REG = /\b(?:import|__vite_ssr_dynamic_import__)\(["']([^"']*)["']\)/;
 function getFilename(loader) {
   const match = String(loader).match(MODULE_REG);
   const id = match?.[1];
@@ -167,26 +167,24 @@ function defineClientOnly(loader, base, { loading, name } = {}) {
 // 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";
+import { defineRender, isRouteRenderContext } from "@web-widget/schema/server-helpers";
+export * from "@web-widget/schema/server-helpers";
 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.");
-      }
+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 {
-      vnode = createElement2(component, props);
+      throw new Error("Async widget components are not supported.");
     }
-    return ReactDOMServer.renderToReadableStream(vnode);
+  } else {
+    vnode = createElement2(component, props);
   }
-);
+  return ReactDOMServer.renderToReadableStream(vnode);
+});
 export {
   WebWidget,
   WebWidgetClient,

package/globals.d.ts

@@ -1,9 +1,8 @@
 type _IntrinsicAttributes = IntrinsicAttributes;
-type loading = boolean | "lazy";
 
 declare namespace JSX {
   interface IntrinsicAttributes extends _IntrinsicAttributes {
-    client?: loading;
-    clientOnly?: loading;
+    as?: "web-widget" | "web-widget:server" | "web-widget:client" | any;
+    loading?: "lazy" | any;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-widget/react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "exports": {
     ".": {
@@ -36,7 +36,7 @@
     "@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"
+    "@web-widget/schema": "0.0.4"
   },
   "peerDependencies": {
     "@vitejs/plugin-react": "^4.0.2",