unreal-toolkit-next 0.1.21 → 0.1.24

package/README.md

@@ -14,22 +14,25 @@ with your hosted Unreal Engine streaming web application.
 npm install unreal-toolkit-next
 ```
 
-* Default Toolkit Import Libraries
-```javascript
+* Unreal Toolkit Runtime Library
+```typescript
 import UnrealToolkit from 'unreal-toolkit';
-```
 
-* Unreal Toolkit Event Bus Usage
-```typescript
-// Post WM_HELLO message to Unreal Engine
-UnrealToolkit.EventBus.PostWindowMessage("WM_HELLO", ["Hello World!"]);
+// Create cross origin isolated iframe window
+const iframe = UnrealToolkit.Bridge.CreateWindow("game");
+iframe.src = "your.unrealtoolkitproject.com";
 
-// Handle WM_MY_EVENT message from Unreal Engine
-UnrealToolkit.EventBus.OnWindowMessage("WM_MY_EVENT", (args:string[]) => {
+// Handle message from Unreal Engine content
+UnrealToolkit.Bridge.OnWindowMessage("WM_EVENT", (args:string[]) => {
    console.log("My Event Args: ", args);
 });
+
+// Post message safely to Unreal Engine content
+UnrealToolkit.Bridge.PostWindowMessage("WM_HELLO", ["Hello World!"]);
 ```
 
+## Additional Reference Information
+
 * Unreal Toolkit Content Frame Style
 ```css
 iframe {
@@ -43,12 +46,22 @@ iframe {
 }
 ```
 
-* Unreal Toolkit Content Frame Window
+* Unreal Toolkit Content Frame Settings
 ```html
 <iframe
-  src="your.unrealtoolkitproject.com"
   crossorigin="anonymous"
   allow="cross-origin-isolated"
   sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-pointer-lock">
 </iframe>
 ```
+
+* Unreal Toolkit Required Response Headers
+```json
+headers: {
+   'Access-Control-Allow-Origin': '*',
+   'Cross-Origin-Opener-Policy': 'same-origin',
+   'Cross-Origin-Embedder-Policy': 'require-corp',
+   'Cross-Origin-Resource-Policy': 'cross-origin',
+   'Permissions-Policy': 'cross-origin-isolated=*'
+}
+```

package/dist/index.d.ts

@@ -1,29 +1,36 @@
 /** ES6 Module Imports */
 /**
- * Unreal Toolkit (Static Manager Pattern)
+ * Unreal Toolkit Runtime Library
  * @class UnrealToolkit - All rights reserved (c) 2024 Mackey Kinard
  */
 export declare class UnrealToolkit {
-    private static _EventBus;
-    /** Unreal Toolkit event message bus
+    private static _Bridge;
+    /** Unreal Toolkit Communication Bridge (Event Bus)
      * @example
-     * ```typescript
-     * // Post WM_HELLO message to Unreal Engine
-     * UnrealToolkit.EventBus.PostWindowMessage("WM_HELLO", ["Hello World!"]);
+     *   ```typescript
+     *   import UnrealToolkit from 'unreal-toolkit';
      *
-     * // Handle WM_MY_EVENT message from Unreal Engine
-     * UnrealToolkit.EventBus.OnWindowMessage("WM_MY_EVENT", (args:string[]) => {
-     *    console.log("My Event Args: ", args);
-     * });
-     * ```
-    */
-    static get EventBus(): UnrealMessageBus;
+     *   // Create cross origin isolated iframe window
+     *   const iframe = UnrealToolkit.Bridge.CreateWindow("game");
+     *   iframe.src = "your.unrealtoolkitproject.com";
+     *
+     *   // Handle message from Unreal Engine content
+     *   UnrealToolkit.Bridge.OnWindowMessage("WM_EVENT", (args:string[]) => {
+     *   console.log("My Event Args: ", args);
+     *   });
+     *
+     *   // Post message safely to Unreal Engine content
+     *   UnrealToolkit.Bridge.PostWindowMessage("WM_HELLO", ["Hello World!"]);
+     *   ```
+     */
+    static get Bridge(): EventBus;
 }
 /**
- * Unreal Toolkit Message Bus (Asynchronous Post Message Communication)
- * @class UnrealMessageBus - All rights reserved (c) 2024 Mackey Kinard
+ * Unreal Toolkit Event Bus (Asynchronous Post Message Communication)
+ * @class EventBus - All rights reserved (c) 2024 Mackey Kinard
  */
-export declare class UnrealMessageBus {
+export declare class EventBus {
+    static PostWindowID: string;
     static AllowedOrigin: string;
     static TargetOrigin: string;
     static ContentFrames: NodeListOf<HTMLIFrameElement>;
@@ -40,6 +47,11 @@ export declare class UnrealMessageBus {
      * @returns void
      */
     OnWindowMessage(name: string, handler: (args: string[]) => void): void;
+    /** Creates or attaches a game window iframe
+     * @param id The iframe id to create
+     * @returns HTMLIFrameElement
+     */
+    CreateWindow(id: string, display?: string): HTMLIFrameElement;
     /** Remove event bus message handler
      * @param message The message to remove
      * @param handler The handler to remove
@@ -50,14 +62,14 @@ export declare class UnrealMessageBus {
      * @returns void
      */
     ResetHandlers(): void;
-    /** Dispose the unreal message bus
-     * @returns void
-     */
-    Dispose(): void;
     /** Resets the content frame list
      * @returns void
      */
     ResetContentFrames(): void;
+    /** Dispose the unreal message bus
+     * @returns void
+     */
+    Dispose(): void;
     /** Handle window message event
      * @param event The message event to handle
      * @returns void

package/dist/index.js

@@ -1,33 +1,39 @@
 /** ES6 Module Imports */
 /**
- * Unreal Toolkit (Static Manager Pattern)
+ * Unreal Toolkit Runtime Library
  * @class UnrealToolkit - All rights reserved (c) 2024 Mackey Kinard
  */
 export class UnrealToolkit {
-    /** Unreal Toolkit event message bus
+    /** Unreal Toolkit Communication Bridge (Event Bus)
      * @example
-     * ```typescript
-     * // Post WM_HELLO message to Unreal Engine
-     * UnrealToolkit.EventBus.PostWindowMessage("WM_HELLO", ["Hello World!"]);
+     *   ```typescript
+     *   import UnrealToolkit from 'unreal-toolkit';
      *
-     * // Handle WM_MY_EVENT message from Unreal Engine
-     * UnrealToolkit.EventBus.OnWindowMessage("WM_MY_EVENT", (args:string[]) => {
-     *    console.log("My Event Args: ", args);
-     * });
-     * ```
-    */
-    static get EventBus() {
-        if (UnrealToolkit._EventBus == null)
-            UnrealToolkit._EventBus = new UnrealMessageBus();
-        return UnrealToolkit._EventBus;
+     *   // Create cross origin isolated iframe window
+     *   const iframe = UnrealToolkit.Bridge.CreateWindow("game");
+     *   iframe.src = "your.unrealtoolkitproject.com";
+     *
+     *   // Handle message from Unreal Engine content
+     *   UnrealToolkit.Bridge.OnWindowMessage("WM_EVENT", (args:string[]) => {
+     *   console.log("My Event Args: ", args);
+     *   });
+     *
+     *   // Post message safely to Unreal Engine content
+     *   UnrealToolkit.Bridge.PostWindowMessage("WM_HELLO", ["Hello World!"]);
+     *   ```
+     */
+    static get Bridge() {
+        if (UnrealToolkit._Bridge == null)
+            UnrealToolkit._Bridge = new EventBus();
+        return UnrealToolkit._Bridge;
     }
 }
-UnrealToolkit._EventBus = null;
+UnrealToolkit._Bridge = null;
 /**
- * Unreal Toolkit Message Bus (Asynchronous Post Message Communication)
- * @class UnrealMessageBus - All rights reserved (c) 2024 Mackey Kinard
+ * Unreal Toolkit Event Bus (Asynchronous Post Message Communication)
+ * @class EventBus - All rights reserved (c) 2024 Mackey Kinard
  */
-export class UnrealMessageBus {
+export class EventBus {
     constructor() {
         this.ListenerDictionary = {};
         this.HandleWindowMessage = this.HandleWindowMessage.bind(this);
@@ -40,14 +46,16 @@ export class UnrealMessageBus {
      */
     PostWindowMessage(name, args) {
         try {
-            if (UnrealMessageBus.ContentFrames == null) {
-                UnrealMessageBus.ContentFrames = document.querySelectorAll("iframe");
+            if (EventBus.ContentFrames == null) {
+                EventBus.ContentFrames = document.querySelectorAll("iframe");
             }
-            if (UnrealMessageBus.ContentFrames != null) {
-                UnrealMessageBus.ContentFrames.forEach((frame) => {
+            if (EventBus.ContentFrames != null) {
+                EventBus.ContentFrames.forEach((frame) => {
                     var _a;
                     try {
-                        (_a = frame.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({ source: "unrealtoolkit", message: name, args: args }, UnrealMessageBus.TargetOrigin);
+                        if (EventBus.PostWindowID == null || EventBus.PostWindowID === "" || frame.id === EventBus.PostWindowID) {
+                            (_a = frame.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({ source: "unrealtoolkit", message: name, args: args }, EventBus.TargetOrigin);
+                        }
                     }
                     catch (e) {
                         console.warn(e);
@@ -55,7 +63,7 @@ export class UnrealMessageBus {
                 });
             }
             else {
-                console.warn("UnrealMessageBus: No Content Frames Found!");
+                console.warn("EventBus: No Content Frames Found!");
             }
         }
         catch (e) {
@@ -80,6 +88,34 @@ export class UnrealMessageBus {
         if (index < 0)
             listeners.push(handler);
     }
+    /** Creates or attaches a game window iframe
+     * @param id The iframe id to create
+     * @returns HTMLIFrameElement
+     */
+    CreateWindow(id, display = "block") {
+        const frame = document.getElementById(id);
+        if (frame != null)
+            return frame;
+        // Create a new iframe element
+        const iframe = document.createElement("iframe");
+        // Set the iframe properties
+        iframe.id = (id || "game");
+        iframe.allow = "cross-origin-isolated";
+        iframe.crossOrigin = "anonymous";
+        iframe.sandbox.add("allow-same-origin", "allow-scripts", "allow-popups", "allow-forms", "allow-pointer-lock");
+        // Apply the CSS styles
+        iframe.style.position = "absolute";
+        iframe.style.width = "100%";
+        iframe.style.height = "100%";
+        iframe.style.minHeight = "100vh";
+        iframe.style.border = "none";
+        iframe.style.outline = "none";
+        iframe.style.zIndex = "0";
+        iframe.style.display = (display || "block");
+        // Insert the iframe at the top of document body
+        document.body.insertBefore(iframe, document.body.firstChild);
+        return iframe;
+    }
     /** Remove event bus message handler
      * @param message The message to remove
      * @param handler The handler to remove
@@ -99,19 +135,20 @@ export class UnrealMessageBus {
     ResetHandlers() {
         this.ListenerDictionary = {};
     }
+    /** Resets the content frame list
+     * @returns void
+     */
+    ResetContentFrames() {
+        EventBus.ContentFrames = null;
+    }
     /** Dispose the unreal message bus
      * @returns void
      */
     Dispose() {
         this.ResetHandlers();
+        this.ResetContentFrames();
         window.removeEventListener("message", this.HandleWindowMessage);
     }
-    /** Resets the content frame list
-     * @returns void
-     */
-    ResetContentFrames() {
-        UnrealMessageBus.ContentFrames = null;
-    }
     /** Handle window message event
      * @param event The message event to handle
      * @returns void
@@ -119,8 +156,8 @@ export class UnrealMessageBus {
     HandleWindowMessage(event) {
         if (event == null || event.origin == null || event.data == null)
             return;
-        if (UnrealMessageBus.AllowedOrigin != null && UnrealMessageBus.AllowedOrigin !== "" && UnrealMessageBus.AllowedOrigin !== "*" && event.origin !== UnrealMessageBus.AllowedOrigin) {
-            console.warn("UnrealMessageBus: Invalid Origin: " + event.origin);
+        if (EventBus.AllowedOrigin != null && EventBus.AllowedOrigin !== "" && EventBus.AllowedOrigin !== "*" && event.origin !== EventBus.AllowedOrigin) {
+            console.warn("EventBus: Invalid Origin: " + event.origin);
             return;
         }
         var postMessage = null;
@@ -181,9 +218,10 @@ export class UnrealMessageBus {
         } });
     }
 }
-UnrealMessageBus.AllowedOrigin = "*";
-UnrealMessageBus.TargetOrigin = "*";
-UnrealMessageBus.ContentFrames = null;
+EventBus.PostWindowID = null;
+EventBus.AllowedOrigin = "*";
+EventBus.TargetOrigin = "*";
+EventBus.ContentFrames = null;
 /** Unreal Toolkit Runtime Module */
 console.log("Unreal Toolkit Runtime - Version 0.1.8");
 export default UnrealToolkit;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "unreal-toolkit-next",
-    "version": "0.1.21",
+    "version": "0.1.24",
     "description": "Unreal Toolkit Runtime Library (ES6)",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",