forgeframe 0.0.2 → 0.0.4
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.
- package/README.md +44 -4
- package/dist/communication/bridge.d.ts +2 -2
- package/dist/communication/messenger.d.ts +9 -0
- package/dist/constants.d.ts +1 -5
- package/dist/core/consumer.d.ts +28 -1
- package/dist/forgeframe.js +563 -368
- package/dist/forgeframe.umd.cjs +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/props/index.d.ts +1 -1
- package/dist/props/normalize.d.ts +11 -0
- package/dist/props/schema.d.ts +11 -3
- package/dist/types.d.ts +9 -4
- package/dist/window/helpers.d.ts +5 -1
- package/package.json +7 -2
package/README.md
CHANGED
|
@@ -55,6 +55,7 @@ Imagine a payment company (like Stripe) wants to let merchants embed a checkout
|
|
|
55
55
|
## Table of Contents
|
|
56
56
|
|
|
57
57
|
- [Installation](#installation)
|
|
58
|
+
- [Start Here (Most Users)](#start-here-most-users)
|
|
58
59
|
- [Quick Start](#quick-start)
|
|
59
60
|
- [Step-by-Step Guide](#step-by-step-guide)
|
|
60
61
|
- [1. Define a Component](#1-define-a-component)
|
|
@@ -63,8 +64,8 @@ Imagine a payment company (like Stripe) wants to let merchants embed a checkout
|
|
|
63
64
|
- [4. Handle Events](#4-handle-events)
|
|
64
65
|
- [Props System](#props-system)
|
|
65
66
|
- [Host Window API (hostProps)](#host-window-api-hostprops)
|
|
66
|
-
- [Templates](#templates)
|
|
67
|
-
- [React Integration](#react-integration)
|
|
67
|
+
- [Templates (Advanced)](#templates-advanced)
|
|
68
|
+
- [React Integration (Optional)](#react-integration-optional)
|
|
68
69
|
- [Advanced Features](#advanced-features)
|
|
69
70
|
- [API Reference](#api-reference)
|
|
70
71
|
- [TypeScript](#typescript)
|
|
@@ -80,6 +81,17 @@ npm install forgeframe
|
|
|
80
81
|
|
|
81
82
|
---
|
|
82
83
|
|
|
84
|
+
## Start Here (Most Users)
|
|
85
|
+
|
|
86
|
+
Use this path for typical integrations:
|
|
87
|
+
|
|
88
|
+
1. Follow [Quick Start](#quick-start) to get a working component.
|
|
89
|
+
2. Use [Step-by-Step Guide](#step-by-step-guide) to add typed props and callbacks.
|
|
90
|
+
3. Use [Props System](#props-system) and [Host Window API (hostProps)](#host-window-api-hostprops) as your primary references.
|
|
91
|
+
4. Treat sections marked **Advanced** as optional unless you specifically need them.
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
83
95
|
## Quick Start
|
|
84
96
|
|
|
85
97
|
> **`Consumer`**
|
|
@@ -281,6 +293,8 @@ await instance.render('#container');
|
|
|
281
293
|
| `resize` | Component was resized |
|
|
282
294
|
| `focus` | Component received focus |
|
|
283
295
|
|
|
296
|
+
If all you need is embed + typed props + callbacks, you can stop here and use the API reference as needed.
|
|
297
|
+
|
|
284
298
|
---
|
|
285
299
|
|
|
286
300
|
## Props System
|
|
@@ -386,6 +400,28 @@ const MyComponent = ForgeFrame.create({
|
|
|
386
400
|
});
|
|
387
401
|
```
|
|
388
402
|
|
|
403
|
+
### Passing Props via URL or POST Body (Advanced)
|
|
404
|
+
|
|
405
|
+
Use prop definition flags to include specific values in the host page's initial HTTP request:
|
|
406
|
+
|
|
407
|
+
```typescript
|
|
408
|
+
const Checkout = ForgeFrame.create({
|
|
409
|
+
tag: 'checkout',
|
|
410
|
+
url: 'https://payments.example.com/checkout',
|
|
411
|
+
props: {
|
|
412
|
+
sessionToken: { schema: prop.string(), queryParam: true }, // ?sessionToken=...
|
|
413
|
+
csrf: { schema: prop.string(), bodyParam: true }, // POST body field "csrf"
|
|
414
|
+
userId: { schema: prop.string(), bodyParam: 'user_id' }, // custom body field name
|
|
415
|
+
},
|
|
416
|
+
});
|
|
417
|
+
```
|
|
418
|
+
|
|
419
|
+
- `queryParam`: appends to the URL query string for initial load.
|
|
420
|
+
- `bodyParam`: sends values in a hidden form `POST` for initial load (iframe and popup).
|
|
421
|
+
- `bodyParam` only affects the initial navigation; later `updateProps()` uses postMessage.
|
|
422
|
+
- Object values are JSON-stringified. Function and `undefined` values are skipped.
|
|
423
|
+
- Most apps do not need this unless the host server requires initial URL/body parameters.
|
|
424
|
+
|
|
389
425
|
### Updating Props
|
|
390
426
|
|
|
391
427
|
Props can be updated after rendering.
|
|
@@ -507,7 +543,9 @@ const data = await instance.exports.getFormData();
|
|
|
507
543
|
|
|
508
544
|
---
|
|
509
545
|
|
|
510
|
-
## Templates
|
|
546
|
+
## Templates (Advanced)
|
|
547
|
+
|
|
548
|
+
Use this section only when you need custom containers/loading UI beyond the default behavior.
|
|
511
549
|
|
|
512
550
|
### Container Template
|
|
513
551
|
|
|
@@ -581,7 +619,7 @@ const MyComponent = ForgeFrame.create({
|
|
|
581
619
|
|
|
582
620
|
---
|
|
583
621
|
|
|
584
|
-
## React Integration
|
|
622
|
+
## React Integration (Optional)
|
|
585
623
|
|
|
586
624
|
### Basic Usage
|
|
587
625
|
|
|
@@ -652,6 +690,8 @@ const ProfileReact = createComponent(ProfileComponent);
|
|
|
652
690
|
|
|
653
691
|
## Advanced Features
|
|
654
692
|
|
|
693
|
+
Most integrations can skip this section initially and return only when a specific requirement appears.
|
|
694
|
+
|
|
655
695
|
### Popup Windows
|
|
656
696
|
|
|
657
697
|
Render as a popup instead of iframe.
|
|
@@ -150,7 +150,7 @@ export declare class FunctionBridge {
|
|
|
150
150
|
*
|
|
151
151
|
* @public
|
|
152
152
|
*/
|
|
153
|
-
export declare function serializeFunctions(obj: unknown, bridge: FunctionBridge,
|
|
153
|
+
export declare function serializeFunctions(obj: unknown, bridge: FunctionBridge, stack?: WeakSet<object>): unknown;
|
|
154
154
|
/**
|
|
155
155
|
* Recursively deserializes all function references in an object.
|
|
156
156
|
*
|
|
@@ -163,5 +163,5 @@ export declare function serializeFunctions(obj: unknown, bridge: FunctionBridge,
|
|
|
163
163
|
*
|
|
164
164
|
* @public
|
|
165
165
|
*/
|
|
166
|
-
export declare function deserializeFunctions(obj: unknown, bridge: FunctionBridge, targetWin: Window, targetDomain: string,
|
|
166
|
+
export declare function deserializeFunctions(obj: unknown, bridge: FunctionBridge, targetWin: Window, targetDomain: string, stack?: WeakSet<object>): unknown;
|
|
167
167
|
export {};
|
|
@@ -57,6 +57,10 @@ export declare class Messenger {
|
|
|
57
57
|
private allowedOrigins;
|
|
58
58
|
/** @internal */
|
|
59
59
|
private allowedOriginPatterns;
|
|
60
|
+
/** @internal */
|
|
61
|
+
private wildcardPatternRegistry;
|
|
62
|
+
/** @internal */
|
|
63
|
+
private sourceUidRegistry;
|
|
60
64
|
/**
|
|
61
65
|
* Creates a new Messenger instance.
|
|
62
66
|
*
|
|
@@ -86,6 +90,11 @@ export declare class Messenger {
|
|
|
86
90
|
* @internal
|
|
87
91
|
*/
|
|
88
92
|
private isOriginTrusted;
|
|
93
|
+
/**
|
|
94
|
+
* Resolves source identity from the browser event context.
|
|
95
|
+
* @internal
|
|
96
|
+
*/
|
|
97
|
+
private resolveVerifiedSource;
|
|
89
98
|
/**
|
|
90
99
|
* Sends a message and waits for a response.
|
|
91
100
|
*
|
package/dist/constants.d.ts
CHANGED
|
@@ -154,8 +154,4 @@ export type MessageName = (typeof MESSAGE_NAME)[keyof typeof MESSAGE_NAME];
|
|
|
154
154
|
* @internal
|
|
155
155
|
*/
|
|
156
156
|
export declare const WINDOW_NAME_PREFIX = "__forgeframe__";
|
|
157
|
-
|
|
158
|
-
* Current library version.
|
|
159
|
-
* @public
|
|
160
|
-
*/
|
|
161
|
-
export declare const VERSION = "0.0.1";
|
|
157
|
+
export declare const VERSION: string;
|
package/dist/core/consumer.d.ts
CHANGED
|
@@ -72,6 +72,8 @@ export declare class ConsumerComponent<P extends Record<string, unknown>, X = un
|
|
|
72
72
|
/** @internal */
|
|
73
73
|
private initPromise;
|
|
74
74
|
/** @internal */
|
|
75
|
+
private hostInitialized;
|
|
76
|
+
/** @internal */
|
|
75
77
|
private rendered;
|
|
76
78
|
/** @internal */
|
|
77
79
|
private destroyed;
|
|
@@ -156,7 +158,7 @@ export declare class ConsumerComponent<P extends Record<string, unknown>, X = un
|
|
|
156
158
|
* Updates the component props and sends them to the host.
|
|
157
159
|
*
|
|
158
160
|
* @remarks
|
|
159
|
-
* Props are normalized and
|
|
161
|
+
* Props are normalized and validated before being sent to the host window.
|
|
160
162
|
*
|
|
161
163
|
* @param newProps - Partial props object to merge with existing props
|
|
162
164
|
*/
|
|
@@ -239,6 +241,16 @@ export declare class ConsumerComponent<P extends Record<string, unknown>, X = un
|
|
|
239
241
|
* @internal
|
|
240
242
|
*/
|
|
241
243
|
private buildUrl;
|
|
244
|
+
/**
|
|
245
|
+
* Builds POST body parameters from props marked with bodyParam.
|
|
246
|
+
* @internal
|
|
247
|
+
*/
|
|
248
|
+
private buildBodyParams;
|
|
249
|
+
/**
|
|
250
|
+
* Submits a hidden form to navigate a target window via POST.
|
|
251
|
+
* @internal
|
|
252
|
+
*/
|
|
253
|
+
private submitBodyForm;
|
|
242
254
|
/**
|
|
243
255
|
* Builds the window.name payload for the host window.
|
|
244
256
|
* @internal
|
|
@@ -269,6 +281,21 @@ export declare class ConsumerComponent<P extends Record<string, unknown>, X = un
|
|
|
269
281
|
* @internal
|
|
270
282
|
*/
|
|
271
283
|
private setupMessageHandlers;
|
|
284
|
+
/**
|
|
285
|
+
* Sets up host lifecycle command handlers.
|
|
286
|
+
* @internal
|
|
287
|
+
*/
|
|
288
|
+
private setupHostLifecycleHandlers;
|
|
289
|
+
/**
|
|
290
|
+
* Sets up host data exchange handlers.
|
|
291
|
+
* @internal
|
|
292
|
+
*/
|
|
293
|
+
private setupHostDataHandlers;
|
|
294
|
+
/**
|
|
295
|
+
* Gets sibling component instances for a request.
|
|
296
|
+
* @internal
|
|
297
|
+
*/
|
|
298
|
+
private getSiblingInstances;
|
|
272
299
|
/**
|
|
273
300
|
* Registers cleanup handlers for the instance.
|
|
274
301
|
* @internal
|