unreal-toolkit-next 0.1.21 → 0.1.22

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/README.md +24 -11
  2. package/dist/index.d.ts +32 -20
  3. package/dist/index.js +74 -36
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -14,22 +14,25 @@ with your hosted Unreal Engine streaming web application.
14
14
  npm install unreal-toolkit-next
15
15
  ```
16
16
 
17
- * Default Toolkit Import Libraries
18
- ```javascript
17
+ * Unreal Toolkit Runtime Library
18
+ ```typescript
19
19
  import UnrealToolkit from 'unreal-toolkit';
20
- ```
21
20
 
22
- * Unreal Toolkit Event Bus Usage
23
- ```typescript
24
- // Post WM_HELLO message to Unreal Engine
25
- UnrealToolkit.EventBus.PostWindowMessage("WM_HELLO", ["Hello World!"]);
21
+ // Create IFRAME window for Unreal Engine content
22
+ const iframe = UnrealToolkit.Bridge.CreateWindow("game");
23
+ iframe.src = "your.unrealtoolkitproject.com";
26
24
 
27
- // Handle WM_MY_EVENT message from Unreal Engine
28
- UnrealToolkit.EventBus.OnWindowMessage("WM_MY_EVENT", (args:string[]) => {
25
+ // Handle WM_EVENT message from Unreal Engine content
26
+ UnrealToolkit.Bridge.OnWindowMessage("WM_EVENT", (args:string[]) => {
29
27
  console.log("My Event Args: ", args);
30
28
  });
29
+
30
+ // Post WM_HELLO message safely to Unreal Engine content
31
+ UnrealToolkit.Bridge.PostWindowMessage("WM_HELLO", ["Hello World!"]);
31
32
  ```
32
33
 
34
+ ## Additional Reference Information
35
+
33
36
  * Unreal Toolkit Content Frame Style
34
37
  ```css
35
38
  iframe {
@@ -43,12 +46,22 @@ iframe {
43
46
  }
44
47
  ```
45
48
 
46
- * Unreal Toolkit Content Frame Window
49
+ * Unreal Toolkit Content Frame Settings
47
50
  ```html
48
51
  <iframe
49
- src="your.unrealtoolkitproject.com"
50
52
  crossorigin="anonymous"
51
53
  allow="cross-origin-isolated"
52
54
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-pointer-lock">
53
55
  </iframe>
54
56
  ```
57
+
58
+ * Unreal Toolkit Required Response Headers
59
+ ```json
60
+ headers: {
61
+ 'Access-Control-Allow-Origin': '*',
62
+ 'Cross-Origin-Opener-Policy': 'same-origin',
63
+ 'Cross-Origin-Embedder-Policy': 'require-corp',
64
+ 'Cross-Origin-Resource-Policy': 'cross-origin',
65
+ 'Permissions-Policy': 'cross-origin-isolated=*'
66
+ }
67
+ ```
package/dist/index.d.ts CHANGED
@@ -1,29 +1,36 @@
1
1
  /** ES6 Module Imports */
2
2
  /**
3
- * Unreal Toolkit (Static Manager Pattern)
3
+ * Unreal Toolkit Runtime Library
4
4
  * @class UnrealToolkit - All rights reserved (c) 2024 Mackey Kinard
5
5
  */
6
6
  export declare class UnrealToolkit {
7
- private static _EventBus;
8
- /** Unreal Toolkit event message bus
7
+ private static _Bridge;
8
+ /** Unreal Toolkit Communication Bridge (Event Bus)
9
9
  * @example
10
- * ```typescript
11
- * // Post WM_HELLO message to Unreal Engine
12
- * UnrealToolkit.EventBus.PostWindowMessage("WM_HELLO", ["Hello World!"]);
10
+ * ```typescript
11
+ * import UnrealToolkit from 'unreal-toolkit';
13
12
  *
14
- * // Handle WM_MY_EVENT message from Unreal Engine
15
- * UnrealToolkit.EventBus.OnWindowMessage("WM_MY_EVENT", (args:string[]) => {
16
- * console.log("My Event Args: ", args);
17
- * });
18
- * ```
19
- */
20
- static get EventBus(): UnrealMessageBus;
13
+ * // Create IFRAME window for Unreal Engine content
14
+ * const iframe = UnrealToolkit.Bridge.CreateWindow("game");
15
+ * iframe.src = "your.unrealtoolkitproject.com";
16
+ *
17
+ * // Handle WM_EVENT message from Unreal Engine content
18
+ * UnrealToolkit.Bridge.OnWindowMessage("WM_EVENT", (args:string[]) => {
19
+ * console.log("My Event Args: ", args);
20
+ * });
21
+ *
22
+ * // Post WM_HELLO message safely to Unreal Engine content
23
+ * UnrealToolkit.Bridge.PostWindowMessage("WM_HELLO", ["Hello World!"]);
24
+ * ```
25
+ */
26
+ static get Bridge(): EventMessageBus;
21
27
  }
22
28
  /**
23
- * Unreal Toolkit Message Bus (Asynchronous Post Message Communication)
24
- * @class UnrealMessageBus - All rights reserved (c) 2024 Mackey Kinard
29
+ * Unreal Toolkit Event Message Bus (Asynchronous Message Communication)
30
+ * @class EventMessageBus - All rights reserved (c) 2024 Mackey Kinard
25
31
  */
26
- export declare class UnrealMessageBus {
32
+ export declare class EventMessageBus {
33
+ static PostWindowID: string;
27
34
  static AllowedOrigin: string;
28
35
  static TargetOrigin: string;
29
36
  static ContentFrames: NodeListOf<HTMLIFrameElement>;
@@ -40,6 +47,11 @@ export declare class UnrealMessageBus {
40
47
  * @returns void
41
48
  */
42
49
  OnWindowMessage(name: string, handler: (args: string[]) => void): void;
50
+ /** Creates or attaches a game window iframe
51
+ * @param id The iframe id to create
52
+ * @returns HTMLIFrameElement
53
+ */
54
+ CreateWindow(id: string, display?: string): HTMLIFrameElement;
43
55
  /** Remove event bus message handler
44
56
  * @param message The message to remove
45
57
  * @param handler The handler to remove
@@ -50,14 +62,14 @@ export declare class UnrealMessageBus {
50
62
  * @returns void
51
63
  */
52
64
  ResetHandlers(): void;
53
- /** Dispose the unreal message bus
54
- * @returns void
55
- */
56
- Dispose(): void;
57
65
  /** Resets the content frame list
58
66
  * @returns void
59
67
  */
60
68
  ResetContentFrames(): void;
69
+ /** Dispose the unreal message bus
70
+ * @returns void
71
+ */
72
+ Dispose(): void;
61
73
  /** Handle window message event
62
74
  * @param event The message event to handle
63
75
  * @returns void
package/dist/index.js CHANGED
@@ -1,33 +1,39 @@
1
1
  /** ES6 Module Imports */
2
2
  /**
3
- * Unreal Toolkit (Static Manager Pattern)
3
+ * Unreal Toolkit Runtime Library
4
4
  * @class UnrealToolkit - All rights reserved (c) 2024 Mackey Kinard
5
5
  */
6
6
  export class UnrealToolkit {
7
- /** Unreal Toolkit event message bus
7
+ /** Unreal Toolkit Communication Bridge (Event Bus)
8
8
  * @example
9
- * ```typescript
10
- * // Post WM_HELLO message to Unreal Engine
11
- * UnrealToolkit.EventBus.PostWindowMessage("WM_HELLO", ["Hello World!"]);
9
+ * ```typescript
10
+ * import UnrealToolkit from 'unreal-toolkit';
12
11
  *
13
- * // Handle WM_MY_EVENT message from Unreal Engine
14
- * UnrealToolkit.EventBus.OnWindowMessage("WM_MY_EVENT", (args:string[]) => {
15
- * console.log("My Event Args: ", args);
16
- * });
17
- * ```
18
- */
19
- static get EventBus() {
20
- if (UnrealToolkit._EventBus == null)
21
- UnrealToolkit._EventBus = new UnrealMessageBus();
22
- return UnrealToolkit._EventBus;
12
+ * // Create IFRAME window for Unreal Engine content
13
+ * const iframe = UnrealToolkit.Bridge.CreateWindow("game");
14
+ * iframe.src = "your.unrealtoolkitproject.com";
15
+ *
16
+ * // Handle WM_EVENT message from Unreal Engine content
17
+ * UnrealToolkit.Bridge.OnWindowMessage("WM_EVENT", (args:string[]) => {
18
+ * console.log("My Event Args: ", args);
19
+ * });
20
+ *
21
+ * // Post WM_HELLO message safely to Unreal Engine content
22
+ * UnrealToolkit.Bridge.PostWindowMessage("WM_HELLO", ["Hello World!"]);
23
+ * ```
24
+ */
25
+ static get Bridge() {
26
+ if (UnrealToolkit._Bridge == null)
27
+ UnrealToolkit._Bridge = new EventMessageBus();
28
+ return UnrealToolkit._Bridge;
23
29
  }
24
30
  }
25
- UnrealToolkit._EventBus = null;
31
+ UnrealToolkit._Bridge = null;
26
32
  /**
27
- * Unreal Toolkit Message Bus (Asynchronous Post Message Communication)
28
- * @class UnrealMessageBus - All rights reserved (c) 2024 Mackey Kinard
33
+ * Unreal Toolkit Event Message Bus (Asynchronous Message Communication)
34
+ * @class EventMessageBus - All rights reserved (c) 2024 Mackey Kinard
29
35
  */
30
- export class UnrealMessageBus {
36
+ export class EventMessageBus {
31
37
  constructor() {
32
38
  this.ListenerDictionary = {};
33
39
  this.HandleWindowMessage = this.HandleWindowMessage.bind(this);
@@ -40,14 +46,16 @@ export class UnrealMessageBus {
40
46
  */
41
47
  PostWindowMessage(name, args) {
42
48
  try {
43
- if (UnrealMessageBus.ContentFrames == null) {
44
- UnrealMessageBus.ContentFrames = document.querySelectorAll("iframe");
49
+ if (EventMessageBus.ContentFrames == null) {
50
+ EventMessageBus.ContentFrames = document.querySelectorAll("iframe");
45
51
  }
46
- if (UnrealMessageBus.ContentFrames != null) {
47
- UnrealMessageBus.ContentFrames.forEach((frame) => {
52
+ if (EventMessageBus.ContentFrames != null) {
53
+ EventMessageBus.ContentFrames.forEach((frame) => {
48
54
  var _a;
49
55
  try {
50
- (_a = frame.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({ source: "unrealtoolkit", message: name, args: args }, UnrealMessageBus.TargetOrigin);
56
+ if (EventMessageBus.PostWindowID == null || EventMessageBus.PostWindowID === "" || frame.id === EventMessageBus.PostWindowID) {
57
+ (_a = frame.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({ source: "unrealtoolkit", message: name, args: args }, EventMessageBus.TargetOrigin);
58
+ }
51
59
  }
52
60
  catch (e) {
53
61
  console.warn(e);
@@ -55,7 +63,7 @@ export class UnrealMessageBus {
55
63
  });
56
64
  }
57
65
  else {
58
- console.warn("UnrealMessageBus: No Content Frames Found!");
66
+ console.warn("EventMessageBus: No Content Frames Found!");
59
67
  }
60
68
  }
61
69
  catch (e) {
@@ -80,6 +88,34 @@ export class UnrealMessageBus {
80
88
  if (index < 0)
81
89
  listeners.push(handler);
82
90
  }
91
+ /** Creates or attaches a game window iframe
92
+ * @param id The iframe id to create
93
+ * @returns HTMLIFrameElement
94
+ */
95
+ CreateWindow(id, display = "block") {
96
+ const frame = document.getElementById(id);
97
+ if (frame != null)
98
+ return frame;
99
+ // Create a new iframe element
100
+ const iframe = document.createElement("iframe");
101
+ // Set the iframe properties
102
+ iframe.id = (id || "game");
103
+ iframe.allow = "cross-origin-isolated";
104
+ iframe.crossOrigin = "anonymous";
105
+ iframe.sandbox.add("allow-same-origin", "allow-scripts", "allow-popups", "allow-forms", "allow-pointer-lock");
106
+ // Apply the CSS styles
107
+ iframe.style.position = "absolute";
108
+ iframe.style.width = "100%";
109
+ iframe.style.height = "100%";
110
+ iframe.style.minHeight = "100vh";
111
+ iframe.style.border = "none";
112
+ iframe.style.outline = "none";
113
+ iframe.style.zIndex = "0";
114
+ iframe.style.display = (display || "block");
115
+ // Insert the iframe at the top of document body
116
+ document.body.insertBefore(iframe, document.body.firstChild);
117
+ return iframe;
118
+ }
83
119
  /** Remove event bus message handler
84
120
  * @param message The message to remove
85
121
  * @param handler The handler to remove
@@ -99,19 +135,20 @@ export class UnrealMessageBus {
99
135
  ResetHandlers() {
100
136
  this.ListenerDictionary = {};
101
137
  }
138
+ /** Resets the content frame list
139
+ * @returns void
140
+ */
141
+ ResetContentFrames() {
142
+ EventMessageBus.ContentFrames = null;
143
+ }
102
144
  /** Dispose the unreal message bus
103
145
  * @returns void
104
146
  */
105
147
  Dispose() {
106
148
  this.ResetHandlers();
149
+ this.ResetContentFrames();
107
150
  window.removeEventListener("message", this.HandleWindowMessage);
108
151
  }
109
- /** Resets the content frame list
110
- * @returns void
111
- */
112
- ResetContentFrames() {
113
- UnrealMessageBus.ContentFrames = null;
114
- }
115
152
  /** Handle window message event
116
153
  * @param event The message event to handle
117
154
  * @returns void
@@ -119,8 +156,8 @@ export class UnrealMessageBus {
119
156
  HandleWindowMessage(event) {
120
157
  if (event == null || event.origin == null || event.data == null)
121
158
  return;
122
- if (UnrealMessageBus.AllowedOrigin != null && UnrealMessageBus.AllowedOrigin !== "" && UnrealMessageBus.AllowedOrigin !== "*" && event.origin !== UnrealMessageBus.AllowedOrigin) {
123
- console.warn("UnrealMessageBus: Invalid Origin: " + event.origin);
159
+ if (EventMessageBus.AllowedOrigin != null && EventMessageBus.AllowedOrigin !== "" && EventMessageBus.AllowedOrigin !== "*" && event.origin !== EventMessageBus.AllowedOrigin) {
160
+ console.warn("EventMessageBus: Invalid Origin: " + event.origin);
124
161
  return;
125
162
  }
126
163
  var postMessage = null;
@@ -181,9 +218,10 @@ export class UnrealMessageBus {
181
218
  } });
182
219
  }
183
220
  }
184
- UnrealMessageBus.AllowedOrigin = "*";
185
- UnrealMessageBus.TargetOrigin = "*";
186
- UnrealMessageBus.ContentFrames = null;
221
+ EventMessageBus.PostWindowID = null;
222
+ EventMessageBus.AllowedOrigin = "*";
223
+ EventMessageBus.TargetOrigin = "*";
224
+ EventMessageBus.ContentFrames = null;
187
225
  /** Unreal Toolkit Runtime Module */
188
226
  console.log("Unreal Toolkit Runtime - Version 0.1.8");
189
227
  export default UnrealToolkit;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unreal-toolkit-next",
3
- "version": "0.1.21",
3
+ "version": "0.1.22",
4
4
  "description": "Unreal Toolkit Runtime Library (ES6)",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",