Skip to content

Commit fc5d8ae

Browse files
jourdainjourdain
authored
Merge pull request #2 from Kitware/support-cross-origin-parent-communication
Add a JS lib to support trame-client API through an iframe
2 parents ec30fff + 817132b commit fc5d8ae

File tree

18 files changed

+6060
-2
lines changed

18 files changed

+6060
-2
lines changed

‎js-lib/.eslintrc.cjs‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* eslint-env node */
2+
require("@rushstack/eslint-patch/modern-module-resolution");
3+
4+
module.exports = {
5+
root: true,
6+
extends: [
7+
"eslint:recommended",
8+
"@vue/eslint-config-prettier",
9+
],
10+
env : {
11+
browser : true,
12+
es6 : true,
13+
},
14+
rules : {
15+
"no-unused-vars" : 2,
16+
"no-undef" : 2
17+
},
18+
parserOptions: {
19+
sourceType: "module",
20+
ecmaVersion: "latest",
21+
},
22+
};

‎js-lib/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist

‎js-lib/LICENSE‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
Apache Software License 2.0
2+
3+
Copyright (c) 2024, Kitware Inc.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.

‎js-lib/README.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Trame iframe client library for plain JS
2+
This library aims to simplify interaction between a trame application living inside an iframe and its iframe parent.
3+
This work is inspired by the [official trame-client js lib](https://github.com/Kitware/trame-client/tree/master/js-lib)
4+
5+
## Examples
6+
- [Vite](./examples/vite/)
7+
8+
## Usage
9+
First you need to grab the iframe that contains your trame application.
10+
```js
11+
import ClientCommunicator from "@kitware/trame-iframe-client";
12+
13+
const iframe = document.getElementById("trame_app");
14+
const iframe_url = "http://localhost:3000";
15+
16+
const trame = new ClientCommunicator(iframe, iframe_url);
17+
18+
// set
19+
trame.state.set("a", 2);
20+
trame.state.set('b', 3);
21+
trame.state.update({
22+
a: 2.5,
23+
b: 3.5,
24+
c: 4.5,
25+
})
26+
27+
// get
28+
console.log(trame.state.get("c"));
29+
console.log(trame.state.get('a'));
30+
31+
32+
// simple api for state change
33+
trame.state.watch(
34+
["a", "b", "c"],
35+
(a, b, c) => {
36+
console.log(`a(${a}) or b(${b}) or c(${c}) have changed`);
37+
}
38+
);
39+
40+
// -----------------------------------
41+
// Method execution API
42+
// -----------------------------------
43+
44+
// method execution on Python side
45+
trame.trigger("name", ['arg_0', 'arg_1'], { kwarg_0: 1, kwarg_1: 2 });
46+
```

‎js-lib/examples/vite/README.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Vite project
2+
3+
This example use npm package to illustrate how to use the trame iframe client.
4+
5+
## Trame setup
6+
7+
```bash
8+
python3 -m venv .venv
9+
source .venv/bin/activate
10+
pip install trame trame-iframe
11+
```
12+
13+
## Build the client
14+
15+
```bash
16+
cd client
17+
npm i
18+
npm run build
19+
```
20+
21+
## Running example
22+
23+
```bash
24+
python ./server.py --port 3000 --server
25+
```

‎js-lib/examples/vite/client/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎js-lib/examples/vite/client/counter.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export function setupCounter(element, trame) {
2+
trame.state.onReady(() => {
3+
trame.state.watch(["count"], (count) => {
4+
console.log(`count is ${count}`);
5+
element.innerHTML = `count is ${count}`;
6+
});
7+
});
8+
element.addEventListener("click", () => trame.trigger("add"));
9+
}

‎js-lib/examples/vite/client/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/main.js"></script>
11+
</body>
12+
</html>

‎js-lib/examples/vite/client/main.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import ClientCommunicator from "@kitware/trame-iframe-client";
2+
import "./style.css";
3+
import { setupCounter } from "./counter.js";
4+
5+
document.querySelector("#app").innerHTML = `
6+
<div>
7+
<h1>Hello Trame !</h1>
8+
<div class="card">
9+
<button id="counter" type="button"></button>
10+
<button id="play" type="button">Auto update</button>
11+
<button id="subtract" type="button">-1</button>
12+
<iframe src="http://localhost:3000" frameborder="0" id="trame_app"></iframe>
13+
</div>
14+
</div>
15+
`;
16+
17+
const url = "http://localhost:3000";
18+
const iframe = document.getElementById("trame_app");
19+
20+
iframe.addEventListener("load", () => {
21+
const trame = new ClientCommunicator(iframe, url);
22+
setupCounter(document.querySelector("#counter"), trame);
23+
document
24+
.querySelector("#play")
25+
.addEventListener("click", () => trame.trigger("toggle_play"));
26+
document
27+
.querySelector("#subtract")
28+
.addEventListener("click", () => trame.trigger("subtract"));
29+
});

‎js-lib/examples/vite/client/package.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "trame",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"main": "main.js",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"devDependencies": {
12+
"vite": "^5.2.0"
13+
},
14+
"dependencies": {
15+
"@kitware/trame-iframe-client": "/home/jules/projects/kitware/trame/repos/trame-iframe/js-lib/dist/trame-iframe.mjs"
16+
}
17+
}

0 commit comments

Comments
 (0)