Initial commit

frontend/src/admin.ts

@@ -0,0 +1,42 @@
+import type { SvelteComponent } from "svelte"
+import ContentBlock from "./lib/components/pagebuilder/ContentBlock.svelte"
+import ColumnsColumn from "./lib/components/pagebuilder/blocks/ColumnsColumn.svelte"
+
+function getRenderedElement(
+    component: typeof SvelteComponent,
+    options?: { props: { [key: string]: any }; addCss?: string[] },
+    nestedElements?: { tagName: string; className?: string }[]
+) {
+    const el = document.createElement("div")
+    el.attachShadow({ mode: "open" })
+
+    const body = document.createElement("body")
+
+    // build nested divs with css classes
+    let target: HTMLElement = body
+    nestedElements?.forEach((e) => {
+        const newElement = document.createElement(e.tagName)
+        if (e.className) newElement.className = e.className
+        target.appendChild(newElement)
+        target = newElement
+    })
+
+    el.shadowRoot.appendChild(body)
+
+    options?.addCss?.forEach((css) => {
+        const link = document.createElement("link")
+        link.rel = "stylesheet"
+        link.href = css
+        link.type = "text/css"
+        el.shadowRoot.appendChild(link)
+    })
+
+    new component({
+        target: target,
+        props: options?.props,
+    })
+
+    return el
+}
+
+export { ContentBlock, ColumnsColumn, getRenderedElement }