feat: added iframe component

src/streamsync/core.py

@@ -650,6 +650,14 @@ def _transform_page_open(self, ev) -> str:
         payload = str(ev.payload)
         return payload
 
+    def _transform_load(self, ev) -> Dict:
+        payload = ev.payload
+        url = payload.get("url")
+        tf_payload = {
+            "url": url,
+        }
+        return tf_payload
+
     def _transform_change(self, ev) -> str:
         payload = str(ev.payload)
         return payload

tests/test_core.py

@@ -382,6 +382,19 @@ def test_hashchange(self) -> None:
             },
         }
 
+    def test_load(self) -> None:
+        ev = StreamsyncEvent(
+            type="ss-load",
+            instancePath=self.root_instance_path,
+            payload={
+                "url": "/myPage",
+            }
+        )
+        self.ed.transform(ev)
+        assert ev.payload == {
+            "url": "/myPage",
+        }
+
     def test_webcam(self) -> None:
         ev = StreamsyncEvent(
             type="ss-webcam",

ui/src/core/templateMap.ts

@@ -19,6 +19,7 @@ import CoreSeparator from "../core_components/CoreSeparator.vue";
 import CoreTab from "../core_components/CoreTab.vue";
 import CoreTabs from "../core_components/CoreTabs.vue";
 import CoreImage from "../core_components/CoreImage.vue";
+import CoreIFrame from "../core_components/CoreIFrame.vue";
 import CoreTimer from "../core_components/CoreTimer.vue";
 import CoreWebcamCapture from "../core_components/CoreWebcamCapture.vue";
 import CoreVegaLiteChart from "../core_components/CoreVegaLiteChart.vue";
@@ -64,6 +65,7 @@ const templateMap = {
 	horizontalstack: CoreHorizontalStack,
 	separator: CoreSeparator,
 	image: CoreImage,
+  iframe: CoreIFrame,
 	icon: CoreIcon,
 	timer: CoreTimer,
 	textinput: CoreTextInput,

ui/src/core_components/CoreIFrame.vue

@@ -0,0 +1,106 @@
+<template>
+	<div class="CoreIFrame" v-on:click="handleClick" ref="rootEl">
+		<iframe
+      @load="handleLoad" 
+			:src="fields.src.value"
+			draggable="false"
+		/>
+    <div class="mask" />
+	</div>
+</template>
+
+<script lang="ts">
+import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { cssClasses, secondaryTextColor } from "../renderer/sharedStyleFields";
+import { getClick } from "../renderer/syntheticEvents";
+
+const description = "A component to embed an external resource in an iframe.";
+
+const loadHandlerStub = `
+def load_handler(state):
+
+	# Sets status message when resource is loaded
+
+	state["status"] = "Page loaded"`;
+
+export default {
+	streamsync: {
+		name: "IFrame",
+		description,
+		category: "Content",
+		fields: {
+			src: {
+				name: "Source",
+				default: '',
+				desc: "A valid URL. Alternatively, you can provide a state reference to a Matplotlib figure or a packed file.",
+				type: FieldType.Text,
+			},
+			cssClasses,
+		},
+		events: {
+			"ss-load": {
+				desc: "Fires when the resource has successfully loaded.",
+				stub: loadHandlerStub.trim(),
+			},
+		},
+	},
+};
+</script>
+
+<script setup lang="ts">
+import { Ref, computed, inject, ref } from "vue";
+import injectionKeys from "../injectionKeys";
+
+const rootEl:Ref<HTMLElement> = ref(null); 
+const fields = inject(injectionKeys.evaluatedFields);
+
+function handleClick(ev: MouseEvent) {
+	const ssEv = getClick(ev);
+	rootEl.value.dispatchEvent(ssEv);
+}
+function handleLoad(ev) {
+  console.log(ev.target.src);
+	const payload = {
+    url: ev.target.src,
+	};
+	const event = new CustomEvent("ss-load", {
+		detail: {
+			payload,
+		},
+	});
+	rootEl.value.dispatchEvent(event);
+}
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CoreIFrame {
+  position: relative;
+  width: 100%;
+  height: 80vh;
+}
+
+.CoreIFrame  iframe {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+  border-radius: 12px;
+  border: 1px solid var(--separatorColor);
+}
+
+.CoreIFrame .mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 12px;
+}
+
+.CoreIFrame.selected .mask {
+  display: none;
+}
+</style>