Fix edit component for build

willnode · Jul 25, 2024 · e160686 · e160686
1 parent 5ef3c56
commit e160686
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 81 deletions.
diff --git a/public/component-client.js b/public/component-client.js
@@ -1,6 +1,7 @@
 class ComponentPreviewElement extends HTMLElement {
   #shadowRoot;
   #cachedSrc;
+  #observer;
 
   constructor() {
     super();
@@ -9,15 +10,20 @@ class ComponentPreviewElement extends HTMLElement {
     this.#cachedSrc = {};
     // @ts-ignore
     this.#shadowRoot.dataset = this.dataset;
+    this.#observer = new MutationObserver(() => {
+      this.#shadowRoot.innerHTML = this.getAttribute('schema') || '';
+      requestAnimationFrame(() => this.#processScripts());
+  });
   }
 
   connectedCallback() {
     this.#shadowRoot.innerHTML = this.getAttribute('schema') || '';
     requestAnimationFrame(() => this.#processScripts());
+    this.#observer.observe(this, { attributes: true });
   }
 
   disconnectedCallback() {
-    //
+    this.#observer.disconnect();
   }
 
   adoptedCallback() {

diff --git a/src/components/editor/component.tsx b/src/components/editor/component.tsx
@@ -1,74 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { parse } from "yaml";
 
-const HTMLElementShim: any = typeof HTMLElement === 'undefined' ? Object : HTMLElement;
-
-const CustomElementsShim: any = typeof CustomElementRegistry === 'undefined' ? null : customElements;
-
-export class ComponentPreviewElement extends HTMLElementShim {
-    #shadowRoot: ShadowRoot;
-    #cachedSrc: Record<string, string>;
-    #observer: MutationObserver;
-
-    constructor() {
-        super();
-
-        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        this.#cachedSrc = {};
-        // @ts-ignore
-        this.#shadowRoot.dataset = this.dataset;
-        this.#observer = new MutationObserver(() => {
-            this.#shadowRoot.innerHTML = this.getAttribute('schema') || '';
-            requestAnimationFrame(() => this.#processScripts());
-        });
-
-    }
-
-    connectedCallback() {
-        // @ts-ignore
-        this.#observer.observe(this, { attributes: true });
-        this.#shadowRoot.innerHTML = this.getAttribute('schema') || '';
-        requestAnimationFrame(() => this.#processScripts());
-    }
-
-    disconnectedCallback() {
-        this.#observer.disconnect();
-    }
-
-    adoptedCallback() {
-        console.log("Custom element moved to new page.");
-    }
-
-    get #scripts() {
-        return this.#shadowRoot.querySelectorAll('script');
-    }
-
-    #scopedEval = (script: string) =>
-        Function(script).bind(this.#shadowRoot)();
-
-    async #processScripts() {
-        let scripts = this.#scripts;
-        for (const s of scripts) {
-            if (!s.src) {
-                this.#scopedEval(s.innerHTML);
-                continue;
-            }
-            if (this.#cachedSrc[s.src]) {
-                continue;
-            }
-            try {
-                let a = await fetch(s.src);
-                let b = await a.text();
-                this.#scopedEval(b);
-                this.#cachedSrc[s.src] = b;
-            } catch (error) {
-                console.error(error);
-            }
-        }
-    }
-}
-
-
 export function ComponentPreview({ schema, config }: any) {
     let dataConf = useMemo(() => {
         try {
@@ -87,9 +19,7 @@ export function ComponentPreview({ schema, config }: any) {
 
     let ElemName = 'preview-component';
     useEffect(() => {
-        if (CustomElementsShim && !CustomElementsShim.get(ElemName))
-            CustomElementsShim.define(ElemName, ComponentPreviewElement);
-    }, [ElemName])
+      }, [ElemName])
 
     // @ts-ignore
     return <ElemName schema={schema} {...dataConf}></ElemName>
@@ -112,11 +42,6 @@ export function ComponentRender({ component, data }: any) {
     }, [data])
 
     let ElemName = 'preview-component';
-    useEffect(() => {
-        if (CustomElementsShim && !CustomElementsShim.get(ElemName))
-            CustomElementsShim.define(ElemName, ComponentPreviewElement);
-    }, [ElemName])
-
     // @ts-ignore
     return <ElemName schema={component.schema} {...dataConf}></ElemName>
 }
diff --git a/src/pages/admin/view-component/[view]/_builder.tsx b/src/pages/admin/view-component/[view]/_builder.tsx
@@ -29,8 +29,8 @@ const save = (id: string): SubmitHandler<any> => {
 
 type Props = {
   id: string,
-  schema: string,
-  config: string,
+  schema: string | null,
+  config: string | null,
 }
 
 // Render Puck editor
@@ -56,7 +56,7 @@ export default function Editor({ id, schema, config }: Props) {
             <FormItem className="grow">
               <Textarea
                 className="form-control"
-                defaultValue={field.value}
+                defaultValue={field.value || ''}
                 name="config"
                 onChange={field.onChange}
                 placeholder={"# Config\nmock:\n  title: My Component!"}
@@ -71,7 +71,7 @@ export default function Editor({ id, schema, config }: Props) {
             <FormItem className="grow">
               <Textarea
                 className="form-control"
-                defaultValue={field.value}
+                defaultValue={field.value || ''}
                 name="schema"
                 onChange={field.onChange}
                 placeholder={"<!-- HTML body\n(style: use @import instead of href)\n(scripts: use this instead of document) -->\n<div id='tag'></div>\n<script src='https://unpkg.com/jquery/dist/jquery.min.js'>\n<script>$('#tag').text(this.dataset.title)</script>"}

diff --git a/src/pages/admin/view-component/[view]/builder.astro b/src/pages/admin/view-component/[view]/builder.astro
@@ -24,5 +24,6 @@ if (!view || view.teamId != teamId) {
 
 <Layout title="New View">
     <BuilderView id={id} schema={view.schema} config={view.config} client:only="react" />
+    <script type="module" src="/component-client.js"></script>
 </Layout>