react-native-model-viewer-webview 0.1.0

package/src/ModelViewerWebView.tsx

@@ -0,0 +1,103 @@
+import { useMemo } from "react";
+
+import { WebView } from "react-native-webview";
+import type { WebViewMessageEvent, WebViewProps } from "react-native-webview";
+
+import {
+  buildModelViewerHtml,
+  isModelViewerErrorStatus,
+  MODEL_VIEWER_LOADED_EVENT,
+  parseModelViewerMessage,
+} from "./model-viewer-html";
+import type { ModelViewerHtmlOptions, ModelViewerStatus } from "./model-viewer-html";
+import { resolveModelSourceUri } from "./model-source";
+import type { ModelSource } from "./model-source";
+
+export type ModelViewerWebViewProps = Omit<WebViewProps, "onMessage" | "source"> & {
+  htmlOptions?: Omit<ModelViewerHtmlOptions, "modelUri">;
+  modelSource?: ModelSource;
+  modelUri?: string;
+  onModelError?: (status: ModelViewerStatus, event: WebViewMessageEvent) => void;
+  onModelLoaded?: (status: ModelViewerStatus, event: WebViewMessageEvent) => void;
+  onStatus?: (status: ModelViewerStatus, event: WebViewMessageEvent) => void;
+  webViewBaseUrl?: string;
+};
+
+export function ModelViewerWebView({
+  allowFileAccess = true,
+  allowFileAccessFromFileURLs = true,
+  allowUniversalAccessFromFileURLs = true,
+  androidLayerType = "hardware",
+  bounces = false,
+  domStorageEnabled = true,
+  htmlOptions,
+  javaScriptEnabled = true,
+  mixedContentMode = "always",
+  modelSource,
+  modelUri,
+  onModelError,
+  onModelLoaded,
+  onStatus,
+  originWhitelist = ["*"],
+  scrollEnabled = false,
+  setSupportMultipleWindows = false,
+  webViewBaseUrl = "https://localhost/",
+  ...webViewProps
+}: ModelViewerWebViewProps) {
+  const resolvedModelUri = useMemo(() => {
+    if (modelSource !== undefined) {
+      return resolveModelSourceUri(modelSource);
+    }
+
+    if (modelUri !== undefined) {
+      return modelUri;
+    }
+
+    throw new Error("ModelViewerWebView requires modelSource or modelUri.");
+  }, [modelSource, modelUri]);
+  const html = useMemo(
+    () =>
+      buildModelViewerHtml({
+        ...htmlOptions,
+        modelUri: resolvedModelUri,
+      }),
+    [htmlOptions, resolvedModelUri],
+  );
+
+  function handleMessage(event: WebViewMessageEvent) {
+    const status = parseModelViewerMessage(event.nativeEvent.data);
+
+    onStatus?.(status, event);
+
+    if (status.type === MODEL_VIEWER_LOADED_EVENT) {
+      onModelLoaded?.(status, event);
+      return;
+    }
+
+    if (isModelViewerErrorStatus(status)) {
+      onModelError?.(status, event);
+    }
+  }
+
+  return (
+    <WebView
+      allowFileAccess={allowFileAccess}
+      allowFileAccessFromFileURLs={allowFileAccessFromFileURLs}
+      allowUniversalAccessFromFileURLs={allowUniversalAccessFromFileURLs}
+      androidLayerType={androidLayerType}
+      bounces={bounces}
+      domStorageEnabled={domStorageEnabled}
+      javaScriptEnabled={javaScriptEnabled}
+      mixedContentMode={mixedContentMode}
+      onMessage={handleMessage}
+      originWhitelist={originWhitelist}
+      scrollEnabled={scrollEnabled}
+      setSupportMultipleWindows={setSupportMultipleWindows}
+      source={{
+        baseUrl: webViewBaseUrl,
+        html,
+      }}
+      {...webViewProps}
+    />
+  );
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+export {
+  ModelViewerWebView,
+  type ModelViewerWebViewProps,
+} from "./ModelViewerWebView";
+export {
+  buildModelViewerHtml,
+  DEFAULT_MODEL_VIEWER_SCRIPT_URL,
+  isModelViewerErrorStatus,
+  MODEL_VIEWER_DOM_READY_EVENT,
+  MODEL_VIEWER_LOADED_EVENT,
+  MODEL_VIEWER_MODEL_ERROR_EVENT,
+  MODEL_VIEWER_PAGE_ERROR_EVENT,
+  parseModelViewerMessage,
+  type ModelViewerHtmlOptions,
+  type ModelViewerStatus,
+} from "./model-viewer-html";
+export {
+  resolveModelSourceUri,
+  type ModelSource,
+} from "./model-source";

package/src/model-source.ts

@@ -0,0 +1,39 @@
+import { Image } from "react-native";
+import type { ImageSourcePropType } from "react-native";
+
+export type ModelSource =
+  | string
+  | number
+  | {
+      localUri?: null | string;
+      uri?: null | string;
+    };
+
+export function resolveModelSourceUri(modelSource: ModelSource): string {
+  if (typeof modelSource === "string") {
+    return modelSource;
+  }
+
+  if (
+    typeof modelSource === "object" &&
+    modelSource.localUri &&
+    modelSource.localUri.length > 0
+  ) {
+    return modelSource.localUri;
+  }
+
+  if (
+    typeof modelSource === "object" &&
+    modelSource.uri &&
+    modelSource.uri.length > 0
+  ) {
+    return modelSource.uri;
+  }
+
+  const resolved = Image.resolveAssetSource(modelSource as ImageSourcePropType);
+  if (resolved?.uri) {
+    return resolved.uri;
+  }
+
+  throw new Error("Unable to resolve model source URI.");
+}

package/src/model-viewer-html.ts

@@ -0,0 +1,207 @@
+export const DEFAULT_MODEL_VIEWER_SCRIPT_URL =
+  "https://ajax.googleapis.com/ajax/libs/model-viewer/4.2.0/model-viewer.min.js";
+
+export const MODEL_VIEWER_DOM_READY_EVENT = "dom-ready";
+export const MODEL_VIEWER_LOADED_EVENT = "model-loaded";
+export const MODEL_VIEWER_MODEL_ERROR_EVENT = "model-error";
+export const MODEL_VIEWER_PAGE_ERROR_EVENT = "page-error";
+
+export type ModelViewerStatus = {
+  message?: string;
+  rawData?: string;
+  type: string;
+};
+
+export type ModelViewerHtmlOptions = {
+  additionalAttributes?: Record<string, boolean | number | string | null | undefined>;
+  autoRotate?: boolean;
+  autoRotateDelay?: number | string;
+  backgroundColor?: string;
+  cameraControls?: boolean;
+  cameraOrbit?: string;
+  disablePan?: boolean;
+  exposure?: number | string;
+  interactionPrompt?: "auto" | "none";
+  maxCameraOrbit?: string;
+  minCameraOrbit?: string;
+  modelUri: string;
+  modelViewerScript?: string;
+  modelViewerScriptUrl?: string;
+  posterColor?: string;
+  rotationPerSecond?: string;
+  shadowIntensity?: number | string;
+};
+
+export function buildModelViewerHtml(options: ModelViewerHtmlOptions) {
+  const backgroundColor = sanitizeCssColor(options.backgroundColor ?? "#ffffff");
+  const posterColor = sanitizeCssColor(options.posterColor ?? backgroundColor);
+  const modelViewerScriptTag = getModelViewerScriptTag(options);
+  const attributes = [
+    htmlAttribute("src", options.modelUri),
+    htmlAttribute("camera-controls", options.cameraControls ?? true),
+    htmlAttribute("auto-rotate", options.autoRotate ?? false),
+    htmlAttribute("auto-rotate-delay", options.autoRotateDelay),
+    htmlAttribute("rotation-per-second", options.rotationPerSecond),
+    htmlAttribute("interaction-prompt", options.interactionPrompt ?? "none"),
+    htmlAttribute("camera-orbit", options.cameraOrbit),
+    htmlAttribute("min-camera-orbit", options.minCameraOrbit),
+    htmlAttribute("max-camera-orbit", options.maxCameraOrbit),
+    htmlAttribute("shadow-intensity", options.shadowIntensity),
+    htmlAttribute("exposure", options.exposure),
+    htmlAttribute("disable-pan", options.disablePan ?? false),
+    ...Object.entries(options.additionalAttributes ?? {}).map(([name, value]) =>
+      htmlAttribute(name, value),
+    ),
+  ].join("");
+
+  return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    ${modelViewerScriptTag}
+    <script>
+      function postStatus(type, message) {
+        window.ReactNativeWebView &&
+          window.ReactNativeWebView.postMessage(JSON.stringify({ type, message }));
+      }
+
+      window.addEventListener("error", function (event) {
+        postStatus("${MODEL_VIEWER_PAGE_ERROR_EVENT}", event.message || "Page error");
+      });
+
+      window.addEventListener("unhandledrejection", function (event) {
+        postStatus("${MODEL_VIEWER_PAGE_ERROR_EVENT}", String(event.reason || "Unhandled rejection"));
+      });
+
+      window.addEventListener("DOMContentLoaded", function () {
+        var viewer = document.querySelector("model-viewer");
+        postStatus("${MODEL_VIEWER_DOM_READY_EVENT}", "Model viewer DOM ready");
+
+        if (!viewer) {
+          postStatus("${MODEL_VIEWER_MODEL_ERROR_EVENT}", "model-viewer element was not created");
+          return;
+        }
+
+        viewer.addEventListener("load", function () {
+          postStatus("${MODEL_VIEWER_LOADED_EVENT}", "3D model loaded");
+        });
+
+        viewer.addEventListener("error", function (event) {
+          var detail = event.detail || {};
+          var sourceError = detail.sourceError || {};
+          postStatus(
+            "${MODEL_VIEWER_MODEL_ERROR_EVENT}",
+            sourceError.message || detail.message || "3D model failed to load"
+          );
+        });
+      });
+    </script>
+    <style>
+      html,
+      body {
+        background: ${backgroundColor};
+        height: 100%;
+        margin: 0;
+        overflow: hidden;
+        width: 100%;
+      }
+
+      model-viewer {
+        --poster-color: ${posterColor};
+        background: ${backgroundColor};
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <model-viewer${attributes}></model-viewer>
+  </body>
+</html>`;
+}
+
+export function parseModelViewerMessage(data: string): ModelViewerStatus {
+  try {
+    const parsed = JSON.parse(data) as { message?: unknown; type?: unknown };
+
+    if (parsed && typeof parsed.type === "string") {
+      return {
+        message: typeof parsed.message === "string" ? parsed.message : undefined,
+        rawData: data,
+        type: parsed.type,
+      };
+    }
+  } catch {
+    return {
+      message: data,
+      rawData: data,
+      type: MODEL_VIEWER_PAGE_ERROR_EVENT,
+    };
+  }
+
+  return {
+    message: data,
+    rawData: data,
+    type: MODEL_VIEWER_PAGE_ERROR_EVENT,
+  };
+}
+
+export function isModelViewerErrorStatus(status: ModelViewerStatus) {
+  return status.type.endsWith("error");
+}
+
+function getModelViewerScriptTag(options: ModelViewerHtmlOptions) {
+  if (options.modelViewerScript) {
+    return `<script type="module">${escapeScriptContent(options.modelViewerScript)}</script>`;
+  }
+
+  const scriptUrl = options.modelViewerScriptUrl ?? DEFAULT_MODEL_VIEWER_SCRIPT_URL;
+  return `<script type="module" src="${escapeHtmlAttribute(scriptUrl)}"></script>`;
+}
+
+function htmlAttribute(
+  name: string,
+  value: boolean | number | string | null | undefined,
+) {
+  if (!isSafeAttributeName(name)) {
+    return "";
+  }
+
+  if (value === false || value === null || value === undefined) {
+    return "";
+  }
+
+  if (value === true) {
+    return ` ${name}`;
+  }
+
+  return ` ${name}="${escapeHtmlAttribute(String(value))}"`;
+}
+
+function isSafeAttributeName(name: string) {
+  return /^[a-zA-Z][\w:.-]*$/.test(name);
+}
+
+function escapeHtmlAttribute(value: string) {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function escapeScriptContent(value: string) {
+  return value.replace(/<\/script/gi, "<\\/script");
+}
+
+function sanitizeCssColor(value: string) {
+  if (/^[#(),.%\w\s-]+$/.test(value)) {
+    return value;
+  }
+
+  return "#ffffff";
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2020"
+  },
+  "include": ["src"]
+}