npm - @hyve-sdk/js - Versions diffs - 2.4.4 → 2.5.0-canary.1 - Mend

@hyve-sdk/js 2.4.4 → 2.5.0-canary.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/react.d.mts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 /**
  * Telemetry configuration options
@@ -528,5 +528,21 @@ declare function HyveSdkProvider({ client, config, children, }: HyveSdkProviderP
  * }
  */
 declare function useHyveSdk(): HyveClient;
+interface MachineViewProps {
+    /** The machine ID to fetch and render */
+    machineId: string;
+    /** Optional className applied to the iframe */
+    className?: string;
+    /** Optional inline styles applied to the iframe */
+    style?: CSSProperties;
+}
+/**
+ * Fetches the render for a machine by ID and displays it inside a sandboxed iframe.
+ * Must be used within a HyveSdkProvider.
+ *
+ * @example
+ * <MachineView machineId="daily-streak" style={{ width: "100%", height: 400 }} />
+ */
+declare function MachineView({ machineId, className, style }: MachineViewProps): react_jsx_runtime.JSX.Element | null;
-export { HyveSdkProvider, useHyveSdk };
+export { HyveSdkProvider, MachineView, useHyveSdk };

package/dist/react.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 /**
  * Telemetry configuration options
@@ -528,5 +528,21 @@ declare function HyveSdkProvider({ client, config, children, }: HyveSdkProviderP
  * }
  */
 declare function useHyveSdk(): HyveClient;
+interface MachineViewProps {
+    /** The machine ID to fetch and render */
+    machineId: string;
+    /** Optional className applied to the iframe */
+    className?: string;
+    /** Optional inline styles applied to the iframe */
+    style?: CSSProperties;
+}
+/**
+ * Fetches the render for a machine by ID and displays it inside a sandboxed iframe.
+ * Must be used within a HyveSdkProvider.
+ *
+ * @example
+ * <MachineView machineId="daily-streak" style={{ width: "100%", height: 400 }} />
+ */
+declare function MachineView({ machineId, className, style }: MachineViewProps): react_jsx_runtime.JSX.Element | null;
-export { HyveSdkProvider, useHyveSdk };
+export { HyveSdkProvider, MachineView, useHyveSdk };

package/dist/react.js CHANGED Viewed

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var react_exports = {};
 __export(react_exports, {
   HyveSdkProvider: () => HyveSdkProvider,
+  MachineView: () => MachineView,
   useHyveSdk: () => useHyveSdk
 });
 module.exports = __toCommonJS(react_exports);
@@ -2228,8 +2229,73 @@ function useHyveSdk() {
   }
   return client;
 }
+function buildIframeHtml(js) {
+  return `<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        padding: 24px;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      #container { width: 100%; max-width: 480px; }
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script>
+      var container = document.getElementById('container');
+      ${js}
+    </script>
+  </body>
+</html>`;
+}
+function MachineView({ machineId, className, style }) {
+  const sdk = useHyveSdk();
+  const [state, setState] = (0, import_react.useState)({ status: "loading" });
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    setState({ status: "loading" });
+    sdk.getMachineRender(machineId).then((js) => {
+      if (!cancelled) {
+        setState({ status: "ready", html: buildIframeHtml(js) });
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        const message = err instanceof Error ? err.message : "Failed to load machine render";
+        setState({ status: "error", message });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [sdk, machineId]);
+  if (state.status === "loading") {
+    return null;
+  }
+  if (state.status === "error") {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "iframe",
+    {
+      srcDoc: state.html,
+      className,
+      style,
+      sandbox: "allow-scripts",
+      referrerPolicy: "no-referrer"
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   HyveSdkProvider,
+  MachineView,
   useHyveSdk
 });

package/dist/react.mjs CHANGED Viewed

@@ -2,7 +2,9 @@
 import {
   createContext,
   useContext,
-  useRef
+  useEffect,
+  useRef,
+  useState
 } from "react";
 // src/utils/index.ts
@@ -2207,7 +2209,72 @@ function useHyveSdk() {
   }
   return client;
 }
+function buildIframeHtml(js) {
+  return `<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        padding: 24px;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      #container { width: 100%; max-width: 480px; }
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script>
+      var container = document.getElementById('container');
+      ${js}
+    </script>
+  </body>
+</html>`;
+}
+function MachineView({ machineId, className, style }) {
+  const sdk = useHyveSdk();
+  const [state, setState] = useState({ status: "loading" });
+  useEffect(() => {
+    let cancelled = false;
+    setState({ status: "loading" });
+    sdk.getMachineRender(machineId).then((js) => {
+      if (!cancelled) {
+        setState({ status: "ready", html: buildIframeHtml(js) });
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        const message = err instanceof Error ? err.message : "Failed to load machine render";
+        setState({ status: "error", message });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [sdk, machineId]);
+  if (state.status === "loading") {
+    return null;
+  }
+  if (state.status === "error") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      srcDoc: state.html,
+      className,
+      style,
+      sandbox: "allow-scripts",
+      referrerPolicy: "no-referrer"
+    }
+  );
+}
 export {
   HyveSdkProvider,
+  MachineView,
   useHyveSdk
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyve-sdk/js",
-  "version": "2.4.4",
+  "version": "2.5.0-canary.1",
   "description": "Hyve SDK - TypeScript wrapper for Hyve game server integration",
   "private": false,
   "publishConfig": {