Add example project

WeTransfer · Aug 13, 2024 · a1cb6de · a1cb6de
1 parent 9ea92bf
commit a1cb6de
Show file tree

Hide file tree

Showing 9 changed files with 216 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -26,9 +26,21 @@ Events are sent two way, parent frame to child frame and child frame to parent f
 ![Event Flow](./docs/images/event_flow.svg "Event FLow Diagram")
 Parent document
 
-## Example
+## Example Project
 
-In the main document:
+An example is included in the project in the `/example` folder. Run the following command to see it in action:
+
+```bash
+  yarn start:demo
+```
+
+Go to `http://localhost:3030` to see the demo app.
+
+![Example](./docs/images/example.png "Example")
+
+## Example Code
+
+In the parent document:
 
 ```typescript
 const state = {
@@ -38,7 +50,7 @@ const myAPI = new ParentFrame({
   child: document.querySelector("iframe"),
   methods: {
     updateCounter: function () {
-      state.counter = state.counter++;
+      state.counter++;
       this.send("counterUpdated", {
         counter: state.counter,
       });

diff --git a/docs/images/example.png b/docs/images/example.png
diff --git a/docs/working-with-frame-events.md b/docs/working-with-frame-events.md
@@ -10,16 +10,16 @@ new ParentFrame(options);
 
 ### Options
 
-| Name      | Type                |            |
-| --------- | ------------------- | ---------- |
-| child     | `HTMLIFrameElement` | `required` |
-| methods   | `object`            |            |
-| listeners | `string[]`          |            |
-| scripts   | `string[]`          |            |
+| Name               | Type                |            |
+| ------------------ | ------------------- | ---------- |
+| childFrameNode     | `HTMLIFrameElement` | `required` |
+| methods            | `object`            |            |
+| listeners          | `string[]`          |            |
+| scripts            | `string[]`          |            |
 
-#### child
+#### childFrameNode
 
-A child is a `HTMLIFrameElement` that is embedding a document with a ChildFrame instance into the parent document. This iframe must be attached to the DOM and ready to receive events.
+A childFrameNode is a `HTMLIFrameElement` that is embedding a document with a ChildFrame instance into the parent document. This iframe must be attached to the DOM and ready to receive events.
 
 When building your iframe source you must specify the parent origin in order to establish a secure connection.
 

diff --git a/example/assets/ChildFrame.html b/example/assets/ChildFrame.html
@@ -3,7 +3,16 @@
 <body>
 <h1>Child Frame</h1>
 
-<button>Increment counter</button>
+<button>Increment counter on parent frame</button>
+
+<h3>Messages received from parent frame:</h3>
+<ul id="messages"></ul>
+
 <script type="module" src="/child.js"></script>
+<style>
+    body { font-family: Helvetica, sans-serif; }
+    button { border: none; border-radius: 5px; background: black; color: white; padding: 12px; margin: 0 0 16px 0;}
+    #counter { font-weight: 900; color: green; }
+</style>
 </body>
 </html>
diff --git a/example/assets/child.js b/example/assets/child.js
@@ -1,11 +1,21 @@
-const { ChildFrame } = require("../../build/index");
+const { ChildFrame } = require('../../build/index');
 
+const addMessage = (text) => {
+    const messagesBox = document.getElementById('messages');
+    const message = document.createElement('li');
+    message.append(text);
+    messagesBox.append(message);
+}
 
+const frameEvents = new ChildFrame((data) => {
+    addMessage('Parent "Ready" event');
 
-(function() {
-    const frameEvents = new ChildFrame();
-
-    document.querySelector("button").addEventListener("click", function () {
-    frameEvents.run.updateCounter();
+    frameEvents.listeners.parentClicked(() => {
+        addMessage('Parent click event');
     });
-})();
+
+});
+
+document.querySelector('button').addEventListener('click', (data) => {
+  frameEvents.run.updateCounter();
+});
diff --git a/example/assets/index.html b/example/assets/index.html
@@ -5,9 +5,16 @@
 <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>
+<div>
+    <button id="sendParentEvent">Send Event From Parent</button>
+</div>
 
 <script type="text/javascript" src="/parent.js"></script>
-
+<style>
+    body { font-family: Helvetica, sans-serif; }
+    button { border: none; border-radius: 5px; background: black; color: white; padding: 12px; margin: 0 0 16px 0;}
+    #counter { font-weight: 900; color: green; }
+    iframe { border: 1px solid #ccc; }
+</style>
 </body>
 </html>
diff --git a/example/assets/parent.js b/example/assets/parent.js
@@ -1,31 +1,49 @@
 /* eslint-disable */
 
-const { ParentFrame } = require("../../build/index");
+const testDomain = 'http://localhost:3030'
 
-(function() {
+const { ParentFrame } = require('../../build/index');
+
+const childFrameNode = document.createElement('iframe');
+
+childFrameNode.src = `${testDomain}/ChildFrame.html?_origin=${testDomain}&_placement=TEST`
+
+childFrameNode.width = 500;
+childFrameNode.height = 360;
+
+childFrameNode.onload = ({ target }) => {
     const state = {
         counter: 0,
     };
 
-    console.log('test')
-    const element = document.getElementById("childFrame");
-    console.log(element)
+    console.log('test');
 
-    new ParentFrame({
-        child: document.getElementById("childFrame"),
+    const parentFrame = new ParentFrame({
+        childFrameNode: target,
         methods: {
-            updateCounter: function () {
-                state.counter = state.counter++;
-                this.send("counterUpdated", {
-                    counter: state.counter,
-                });
+            updateCounter: () => {
+                state.counter++;
 
-                const counterElement = document.getElementById("counter");
+                const counterElement = document.getElementById('counter');
                 counterElement.innerHTML = state.counter;
-                console.log('!!!')
             },
         },
-        listeners: ["counterUpdated"],
-        scripts: [],
+        listeners: ['parentClicked'],
+        scripts: [`
+            <script>
+                const el = document.createElement("div");
+                el.innerHTML = "This text is injected by the Parent Frame script.";
+                el.style = "background: yellow";
+                document.body.prepend(el)
+            </script>
+        `],
     });
-})();
+
+    const sendEventButton = document.getElementById('sendParentEvent');
+    sendEventButton.onclick = () => {
+        parentFrame.send('parentClicked');
+    }
+}
+
+
+document.body.appendChild(childFrameNode);
diff --git a/package.json b/package.json
@@ -26,7 +26,8 @@
     "lint:fix": "eslint src/**/*.ts --fix",
     "version:patch": "yarn version --patch",
     "version:minor": "yarn version --minor",
-    "version:major": "yarn version --major"
+    "version:major": "yarn version --major",
+    "start:demo": "yarn build && yarn webpack-dev-server --config ./example/webpack.config.js"
   },
   "lint-staged": {
     "**/*.ts": [
@@ -59,6 +60,7 @@
     "tslib": "^2.6.3",
     "typescript": "^5.5.3",
     "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {},