@web-widget/react 0.0.4 → 0.0.5

package/dist/babel-plugin.d.ts

@@ -1,26 +1,6 @@
 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

@@ -1,9 +1,17 @@
+// src/babel-plugin.ts
+import { dirname, join, relative } from "path";
+
+// src/web-widget.tsx
+import { Suspense, createElement, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+var ASSET_PLACEHOLDER = "asset://";
+
 // 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";
 var TAGNAME = "web-widget";
-function createWebWidgetVariableDeclaration(definer, component, source, base, options) {
+function createWebWidgetVariableDeclaration(definer, component, source, options) {
   const getType = (object) => Object.prototype.toString.call(object).slice(8, -1).toLocaleLowerCase();
   return t.variableDeclaration("const", [
     t.variableDeclarator(
@@ -13,7 +21,6 @@ function createWebWidgetVariableDeclaration(definer, component, source, base, op
           [],
           t.callExpression(t.import(), [t.stringLiteral(source)])
         ),
-        t.stringLiteral(base),
         t.objectExpression(
           Object.keys(options).map((key) => {
             const value = options[key];
@@ -95,13 +102,6 @@ var babel_plugin_default = declare((api) => {
         container.openingElement.attributes = container.openingElement.attributes.filter(
           (attr) => attr !== widgetAttr && attr !== loadingAttr
         );
-        const options = {
-          name: container.openingElement.name.name,
-          recovering: config.isServer && mode !== "client"
-        };
-        if (loadingAttr && loadingAttr.value && t.isStringLiteral(loadingAttr.value)) {
-          options.loading = loadingAttr.value.value;
-        }
         const importDeclaration = binding.path.parent;
         const source = importDeclaration.source.value;
         const importName = addNamed(
@@ -109,13 +109,20 @@ var babel_plugin_default = declare((api) => {
           "defineWebWidget",
           "@web-widget/react"
         );
-        const base = config.base;
+        const options = {
+          // base: config.base,
+          import: ASSET_PLACEHOLDER + relative(config.root, join(dirname(state.filename), source)),
+          name: container.openingElement.name.name,
+          recovering: config.isServer && mode !== "client"
+        };
+        if (loadingAttr && loadingAttr.value && t.isStringLiteral(loadingAttr.value)) {
+          options.loading = loadingAttr.value.value;
+        }
         binding.path.parentPath?.replaceWith(
           createWebWidgetVariableDeclaration(
             importName.name,
             container.openingElement.name.name,
             source,
-            base,
             options
           )
         );

package/dist/react.client.d.ts

@@ -1,6 +1,6 @@
 import * as _web_widget_schema from '@web-widget/schema';
 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';
+export { A as ASSET_PLACEHOLDER, 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-67fd682e.js';
 import 'react/jsx-runtime';
 import 'react';
 

package/dist/react.client.js

@@ -89,9 +89,6 @@ function WebWidget({
   name,
   recovering
 }) {
-  if (!base) {
-    throw new Error(`Missing base`);
-  }
   if (children) {
     throw new Error(`No support for 'children'`);
   }
@@ -124,8 +121,15 @@ function WebWidget({
   });
   return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(WebWidgetClientFactory, {}) });
 }
-function defineWebWidget(loader, base, { loading, name, recovering = true } = {}) {
-  const url = getFilename(loader);
+var ASSET_PLACEHOLDER = "asset://";
+function defineWebWidget(loader, {
+  base,
+  import: url,
+  loading,
+  name,
+  recovering = true
+}) {
+  const clientImport = url && !url.startsWith(ASSET_PLACEHOLDER) ? url : getFilename(loader);
   return function WebWidgetFactory({
     children,
     fallback,
@@ -138,7 +142,7 @@ function defineWebWidget(loader, base, { loading, name, recovering = true } = {}
           base,
           data,
           fallback,
-          import: url,
+          import: clientImport,
           loader,
           loading,
           name,
@@ -149,15 +153,17 @@ function defineWebWidget(loader, base, { loading, name, recovering = true } = {}
     );
   };
 }
-function defineClient(loader, base, { loading, name } = {}) {
-  return defineWebWidget(loader, base, {
+function defineClient(loader, { base, loading, name } = {}) {
+  return defineWebWidget(loader, {
+    base,
     loading,
     name,
     recovering: true
   });
 }
-function defineClientOnly(loader, base, { loading, name } = {}) {
-  return defineWebWidget(loader, base, {
+function defineClientOnly(loader, { base, loading, name } = {}) {
+  return defineWebWidget(loader, {
+    base,
     loading,
     name,
     recovering: false
@@ -200,6 +206,7 @@ var render = defineRender(async (context, component, props) => {
   };
 });
 export {
+  ASSET_PLACEHOLDER,
   WebWidget,
   WebWidgetClient,
   __ENV__,

package/dist/react.server.d.ts

@@ -1,6 +1,6 @@
 import * as _web_widget_schema from '@web-widget/schema';
 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';
+export { A as ASSET_PLACEHOLDER, 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-67fd682e.js';
 import 'react/jsx-runtime';
 import 'react';
 

package/dist/react.server.js

@@ -89,9 +89,6 @@ function WebWidget({
   name,
   recovering
 }) {
-  if (!base) {
-    throw new Error(`Missing base`);
-  }
   if (children) {
     throw new Error(`No support for 'children'`);
   }
@@ -124,8 +121,15 @@ function WebWidget({
   });
   return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(WebWidgetClientFactory, {}) });
 }
-function defineWebWidget(loader, base, { loading, name, recovering = true } = {}) {
-  const url = getFilename(loader);
+var ASSET_PLACEHOLDER = "asset://";
+function defineWebWidget(loader, {
+  base,
+  import: url,
+  loading,
+  name,
+  recovering = true
+}) {
+  const clientImport = url && !url.startsWith(ASSET_PLACEHOLDER) ? url : getFilename(loader);
   return function WebWidgetFactory({
     children,
     fallback,
@@ -138,7 +142,7 @@ function defineWebWidget(loader, base, { loading, name, recovering = true } = {}
           base,
           data,
           fallback,
-          import: url,
+          import: clientImport,
           loader,
           loading,
           name,
@@ -149,15 +153,17 @@ function defineWebWidget(loader, base, { loading, name, recovering = true } = {}
     );
   };
 }
-function defineClient(loader, base, { loading, name } = {}) {
-  return defineWebWidget(loader, base, {
+function defineClient(loader, { base, loading, name } = {}) {
+  return defineWebWidget(loader, {
+    base,
     loading,
     name,
     recovering: true
   });
 }
-function defineClientOnly(loader, base, { loading, name } = {}) {
-  return defineWebWidget(loader, base, {
+function defineClientOnly(loader, { base, loading, name } = {}) {
+  return defineWebWidget(loader, {
+    base,
     loading,
     name,
     recovering: false
@@ -182,6 +188,7 @@ var render = defineRender(async (context, component, props) => {
   return ReactDOMServer.renderToReadableStream(vnode);
 });
 export {
+  ASSET_PLACEHOLDER,
   WebWidget,
   WebWidgetClient,
   __ENV__,

package/dist/{web-widget-ec342172.d.ts → web-widget-67fd682e.d.ts}

@@ -14,7 +14,7 @@ type JSONProps = {
 };
 type Loader = () => Promise<WidgetModule>;
 interface WebWidgetClientProps {
-    base: string;
+    base?: string;
     data: JSONProps;
     import: string;
     innerHTML?: string;
@@ -26,7 +26,7 @@ declare function WebWidgetClient({ base, data, import: url, innerHTML, loading,
     dangerouslySetInnerHTML: {
         __html: string;
     };
-    base: string;
+    base: string | undefined;
     data: string;
     import: string;
     loading: string | undefined;
@@ -45,16 +45,20 @@ type WebWidgetFactoryProps = JSONProps & {
     fallback?: ReactNode;
 };
 interface DefineWebWidgetOptions {
+    base?: string;
+    import?: string;
     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;
+declare const ASSET_PLACEHOLDER = "asset://";
+declare function defineWebWidget(loader: Loader, { base, import: url, loading, name, recovering, }: DefineWebWidgetOptions): ({ children, fallback, ...data }: WebWidgetFactoryProps) => react_jsx_runtime.JSX.Element;
 interface ClientOptions {
+    base?: string;
     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;
+declare function defineClient(loader: Loader, { base, loading, name }?: ClientOptions): ({ children, fallback, ...data }: WebWidgetFactoryProps) => react_jsx_runtime.JSX.Element;
+declare function defineClientOnly(loader: Loader, { base, 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 };
+export { ASSET_PLACEHOLDER as A, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-widget/react",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "exports": {
     ".": {