@swiftbrowser/react 0.14.1 → 0.15.0

package/dist/components/images.d.ts

@@ -21,7 +21,9 @@ export interface AsyncImageProps extends ViewModifiers {
 /**
  * `AsyncImage(url:)`: the page loads the image to learn its size (the
  * engine lays a remote image out by its pixel size, as the Swift core does
- * after its `image` request), then shows it.
+ * after its `image` request), then shows it. In a SwiftBrowser Native app,
+ * which has no page to load it with, the URL goes to the renderer at once
+ * and SwiftUI's own `AsyncImage` loads it.
  */
 export declare function AsyncImage(props: AsyncImageProps): ReactNode;
 //# sourceMappingURL=images.d.ts.map

package/dist/components/images.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/components/images.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAA8B,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAE9E,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAUD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,CAuC5D"}
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/components/images.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAA8B,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAE9E,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAmBD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,CAgC5D"}

package/dist/index.js

@@ -1237,7 +1237,7 @@ function segmentsOf(children, style, into) {
     }
     if (element.type === Image$1) {
       const props = element.props;
-      into.push({ image: imageProps(props), style });
+      into.push({ image: imageProps$1(props), style });
       return;
     }
   };
@@ -1279,7 +1279,7 @@ function placeholder(node, redacted) {
 function openURL(url) {
   if (typeof window !== "undefined") window.open(url, "_blank", "noopener");
 }
-function imageProps(props) {
+function imageProps$1(props) {
   if (props.systemName !== void 0) return { systemName: props.systemName };
   if (props.url !== void 0) return { url: props.url, resizable: props.resizable ?? false, width: props.width ?? 0, height: props.height ?? 0 };
   return { name: props.name ?? "", resizable: props.resizable ?? false };
@@ -1289,7 +1289,7 @@ function Image$1(props) {
   const environment = useViewEnvironment();
   const redacted = takeModifier(modifiers, "redacted") ?? environment.redacted;
   const mode = takeModifier(modifiers, "symbolRenderingMode") ?? environment.symbolRenderingMode;
-  const own = imageProps(props);
+  const own = imageProps$1(props);
   const element = props.systemName !== void 0 && mode === "palette" ? { ...own, renderingMode: "palette" } : own;
   if (props.accessibilityLabel) element["accessibilityLabel"] = props.accessibilityLabel;
   return applyModifiers(placeholder(sb("image", element), redacted), modifiers);
@@ -3399,6 +3399,9 @@ function EditButton(props) {
   return applyModifiers(/* @__PURE__ */ jsx(Button, { title: editing ? "Done" : "Edit", editMode: editing ? "active" : "inactive", action: () => setEditing(!editing) }), modifiers);
 }
 const loaded = /* @__PURE__ */ new Map();
+function inNativeApp() {
+  return typeof Image === "undefined" && globalThis.__sbNative !== void 0;
+}
 function AsyncImage(props) {
   const { own, modifiers } = splitProps(props);
   const [state, setState] = useState(() => loaded.get(own.url) ?? null);
@@ -3425,19 +3428,19 @@ function AsyncImage(props) {
       live = false;
     };
   }, [own.url]);
+  if (inNativeApp()) {
+    return applyModifiers(sb("image", { ...imageProps(own), url: own.url, width: 0, height: 0 }), modifiers);
+  }
   if (state === null) return own.placeholder ?? null;
   if (state === "failed") return own.failure ?? own.placeholder ?? null;
-  return applyModifiers(
-    sb("image", {
-      url: state.url,
-      resizable: own.resizable ?? false,
-      width: state.width,
-      height: state.height,
-      ...own.webInteractions ? { webInteractions: true } : {},
-      ...own.accessibilityLabel ? { accessibilityLabel: own.accessibilityLabel } : {}
-    }),
-    modifiers
-  );
+  return applyModifiers(sb("image", { ...imageProps(own), url: state.url, width: state.width, height: state.height }), modifiers);
+}
+function imageProps(own) {
+  return {
+    resizable: own.resizable ?? false,
+    ...own.webInteractions ? { webInteractions: true } : {},
+    ...own.accessibilityLabel ? { accessibilityLabel: own.accessibilityLabel } : {}
+  };
 }
 function BarMark(_props) {
   return null;