@dotbase/safe-frame-sync 1.0.0
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 +79 -0
- package/dist/index.d.ts +28 -0
- package/dist/index.es.js +13 -0
- package/dist/index.umd.js +1 -0
- package/package.json +41 -0
package/README.md
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# safe-frame-sync
|
|
2
|
+
|
|
3
|
+
Typesafe iframe and parent communication between Dotstudio and Dotclinic.
|
|
4
|
+
|
|
5
|
+
This library provides a **Pub/Sub** system for secure, typesafe communication between a parent host and an iframe, abstracting `window.top.postMessage` and `window.onmessage`. Events and corresponding payloads are typed to ensure error-free communication and improve developer experience.
|
|
6
|
+
|
|
7
|
+
## Collaboration
|
|
8
|
+
|
|
9
|
+
### Setup
|
|
10
|
+
|
|
11
|
+
Install dependencies with:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
### Build
|
|
18
|
+
|
|
19
|
+
To build the package, run:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm run build
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Publish
|
|
26
|
+
|
|
27
|
+
The package is published on npmjs.
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm publish
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Usage
|
|
34
|
+
|
|
35
|
+
First, add the dependency to the project:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm add @dotbase/safe-frame-sync
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
The package provides two essential functions:
|
|
42
|
+
|
|
43
|
+
* `publishMessage` for sending typed messages
|
|
44
|
+
* `subscribeMessage` for listening to specific typed messages
|
|
45
|
+
|
|
46
|
+
Currently there are three message types and each of them specifies a data interface:
|
|
47
|
+
|
|
48
|
+
* `editResource`
|
|
49
|
+
* `createResource`
|
|
50
|
+
* `closeBuilder`
|
|
51
|
+
|
|
52
|
+
### Message Types
|
|
53
|
+
|
|
54
|
+
### In Parent
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
import { subscribeMessage } from "@dotbase/safe-frame-sync"
|
|
58
|
+
|
|
59
|
+
// Somewhere in your code
|
|
60
|
+
subscribeMessage("createResource", (data) => {
|
|
61
|
+
// Your callback implementation with type-safe data
|
|
62
|
+
console.log(data)
|
|
63
|
+
})
|
|
64
|
+
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### In Iframe
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
import { publishMessage } from "@dotbase/safe-frame-sync"
|
|
71
|
+
|
|
72
|
+
// Somewhere in your code
|
|
73
|
+
publishMessage({
|
|
74
|
+
type: "createResource";
|
|
75
|
+
resourceId: "some-uuid";
|
|
76
|
+
resourceName: "Some Name";
|
|
77
|
+
workflowType: "document";
|
|
78
|
+
})
|
|
79
|
+
```
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export type MessageType = "editResource" | "createResource" | "closeBuilder";
|
|
2
|
+
export type WorkflowType = "document" | "patient-report";
|
|
3
|
+
export interface EditResourceType {
|
|
4
|
+
type: "editResource";
|
|
5
|
+
resourceId: string;
|
|
6
|
+
resourceName: string;
|
|
7
|
+
workflowType: WorkflowType;
|
|
8
|
+
}
|
|
9
|
+
export interface CreateResourceType {
|
|
10
|
+
type: "createResource";
|
|
11
|
+
resourceId: string;
|
|
12
|
+
resourceName: string;
|
|
13
|
+
workflowType: WorkflowType;
|
|
14
|
+
}
|
|
15
|
+
export interface CloseBuilderType {
|
|
16
|
+
type: "closeBuilder";
|
|
17
|
+
}
|
|
18
|
+
export type MesssageDataType = EditResourceType | CreateResourceType | CloseBuilderType;
|
|
19
|
+
export interface MessageDataMapType {
|
|
20
|
+
editResource: EditResourceType;
|
|
21
|
+
createResource: CreateResourceType;
|
|
22
|
+
closeBuilder: CloseBuilderType;
|
|
23
|
+
}
|
|
24
|
+
export declare const publishMessage: (data: MesssageDataType) => void;
|
|
25
|
+
declare function subscribeMessage(type: "closeBuilder", callback: (data: MessageDataMapType["closeBuilder"]) => void): void;
|
|
26
|
+
declare function subscribeMessage(type: "editResource", callback: (data: MessageDataMapType["editResource"]) => void): void;
|
|
27
|
+
declare function subscribeMessage(type: "createResource", callback: (data: MessageDataMapType["createResource"]) => void): void;
|
|
28
|
+
export { subscribeMessage };
|
package/dist/index.es.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(e,s){typeof exports=="object"&&typeof module<"u"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(e=typeof globalThis<"u"?globalThis:e||self,s(e["safe-frame-sync"]={}))})(this,function(e){"use strict";const s=i=>{var n;(n=window.top)==null||n.postMessage(i,"*")};function o(i,n){window.onmessage=function(t){t.data.type===i&&n(t.data)}}e.publishMessage=s,e.subscribeMessage=o,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@dotbase/safe-frame-sync",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Typesafe iframe and parent communication between Dotstudio and Dotclinic",
|
|
5
|
+
"homepage": "https://github.com/dot-base/safe-frame-sync",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"main": "./dist/index.umd.js",
|
|
11
|
+
"module": "./dist/index.es.js",
|
|
12
|
+
"type": "module",
|
|
13
|
+
"scripts": {
|
|
14
|
+
"dev": "vite",
|
|
15
|
+
"build": "tsc && vite build",
|
|
16
|
+
"preview": "vite preview"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
|
20
|
+
"eslint": "^8.57.0",
|
|
21
|
+
"eslint-config-prettier": "^9.1.0",
|
|
22
|
+
"eslint-config-standard-with-typescript": "^43.0.1",
|
|
23
|
+
"eslint-plugin-import": "^2.29.1",
|
|
24
|
+
"eslint-plugin-n": "^16.6.2",
|
|
25
|
+
"eslint-plugin-promise": "^6.2.0",
|
|
26
|
+
"globals": "^15.3.0",
|
|
27
|
+
"prettier": "3.2.5",
|
|
28
|
+
"typescript": "^5.4.5",
|
|
29
|
+
"vite": "^5.2.0",
|
|
30
|
+
"vite-plugin-dts": "^3.9.1"
|
|
31
|
+
},
|
|
32
|
+
"repository": {
|
|
33
|
+
"type": "git",
|
|
34
|
+
"url": "git+https://github.com/dot-base/safe-frame-sync.git"
|
|
35
|
+
},
|
|
36
|
+
"author": "",
|
|
37
|
+
"license": "ISC",
|
|
38
|
+
"bugs": {
|
|
39
|
+
"url": "https://github.com/dot-base/safe-frame-sync/issues"
|
|
40
|
+
}
|
|
41
|
+
}
|