Add working Example

WeTransfer · Aug 12, 2024 · 9ea92bf · 9ea92bf
1 parent e09ba82
commit 9ea92bf
Show file tree

Hide file tree

Showing 7 changed files with 1,829 additions and 89 deletions.
diff --git a/example/assets/ChildFrame.html b/example/assets/ChildFrame.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<body>
+<h1>Child Frame</h1>
+
+<button>Increment counter</button>
+<script type="module" src="/child.js"></script>
+</body>
+</html>
diff --git a/example/assets/child.js b/example/assets/child.js
@@ -0,0 +1,11 @@
+const { ChildFrame } = require("../../build/index");
+
+
+
+(function() {
+    const frameEvents = new ChildFrame();
+
+    document.querySelector("button").addEventListener("click", function () {
+    frameEvents.run.updateCounter();
+    });
+})();
diff --git a/example/assets/index.html b/example/assets/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<h1>Parent Frame</h1>
+<p>Counter: <span id="counter">0</span></p>
+
+<iframe id="childFrame" src="./ChildFrame.html?_origin=localhost:3030&_placement=TEST" width="500" height="500"></iframe>
+
+<script type="text/javascript" src="/parent.js"></script>
+
+</body>
+</html>
diff --git a/example/assets/parent.js b/example/assets/parent.js
@@ -0,0 +1,31 @@
+/* eslint-disable */
+
+const { ParentFrame } = require("../../build/index");
+
+(function() {
+    const state = {
+        counter: 0,
+    };
+
+    console.log('test')
+    const element = document.getElementById("childFrame");
+    console.log(element)
+
+    new ParentFrame({
+        child: document.getElementById("childFrame"),
+        methods: {
+            updateCounter: function () {
+                state.counter = state.counter++;
+                this.send("counterUpdated", {
+                    counter: state.counter,
+                });
+
+                const counterElement = document.getElementById("counter");
+                counterElement.innerHTML = state.counter;
+                console.log('!!!')
+            },
+        },
+        listeners: ["counterUpdated"],
+        scripts: [],
+    });
+})();
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -0,0 +1,22 @@
+/* eslint-disable */
+
+const path = require('path');
+
+module.exports = {
+    entry: {
+        parent: path.resolve(__dirname, './assets/parent.js'),
+        child: path.resolve(__dirname, './assets/child.js'),
+    },
+    output: {
+      filename: '[name].js',
+      path: path.resolve(__dirname, 'assets/build'),
+    },
+    mode: 'production',
+    target: "web",
+    devServer: {
+        static: {
+          directory: path.join(__dirname, 'assets'),
+        },
+        port: 3030,
+    },  
+};
diff --git a/package.json b/package.json
@@ -57,7 +57,9 @@
     "ts-jest": "^29.1.5",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.3",
+    "webpack": "^5.93.0",
+    "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {},
   "config": {