initial commit

3 files changed, 90 insertions, 0 deletions

diff --git a/src/frontend/render/preact.ts b/src/frontend/render/preact.ts
new file mode 100644
index 000000000..eb588209c
--- /dev/null
+++ b/src/frontend/render/preact.ts
@@ -0,0 +1,27 @@
+import render from 'preact-render-to-string';
+import { h } from 'preact';
+import type { Component } from 'preact';
+
+export function __preact_static(PreactComponent: Component) {
+    return (attrs: Record<string, any>, ...children: any): string => {
+        let html = render(
+          h(
+            PreactComponent as any, // Preact's types seem wrong...
+            attrs,
+            children
+          )
+        );
+        return html;
+    };
+}
+
+export function __preact_dynamic(PreactComponent: Component, importUrl: string, preactUrl: string) {
+    const placeholderId = `placeholder_${String(Math.random())}`;
+    return (attrs: Record<string, string>, ...children: any) => {
+        return `<div id="${placeholderId}"></div><script type="module">
+            import {h, render} from '${preactUrl}';
+            import Component from '${importUrl}';
+            render(h(Component, ${JSON.stringify(attrs)}), document.getElementById('${placeholderId}'));
+        </script>`;
+    };
+}
diff --git a/src/frontend/render/svelte.ts b/src/frontend/render/svelte.ts
new file mode 100644
index 000000000..ffdf70254
--- /dev/null
+++ b/src/frontend/render/svelte.ts
@@ -0,0 +1,24 @@
+import { SvelteComponent as Component } from 'svelte';
+
+export function __svelte_static(SvelteComponent: Component) {
+  return (attrs: Record<string, any>, ...children: any): string => {
+    // TODO include head and css stuff too...
+    const { html } = SvelteComponent.render(attrs);
+  
+    return html;
+  };
+}
+
+export function __svelte_dynamic(SvelteComponent: Component, importUrl: string) {
+  const placeholderId = `placeholder_${String(Math.random())}`;
+  return (attrs: Record<string, string>, ...children: any) => {
+      return `<div id="${placeholderId}"></div><script type="module">
+          import Component from '${importUrl}';
+
+          new Component({
+            target: document.getElementById('${placeholderId}'),
+            props: ${JSON.stringify(attrs)}
+          });
+      </script>`;
+  };
+}
diff --git a/src/frontend/render/vue.ts b/src/frontend/render/vue.ts
new file mode 100644
index 000000000..f83c1665a
--- /dev/null
+++ b/src/frontend/render/vue.ts
@@ -0,0 +1,39 @@
+import type { Component } from 'vue';
+
+import { renderToString } from '@vue/server-renderer';
+import { createSSRApp, h as createElement } from 'vue';
+
+export function __vue_static(VueComponent: Component) {
+  return async (attrs: Record<string, any>, ...children: any): Promise<string> => {
+    const app = createSSRApp({
+      components: {
+        VueComponent
+      },
+      render() {
+        return createElement(VueComponent as any, attrs);
+      }
+    });
+
+    const html = await renderToString(app);
+
+    return html;
+  };
+}
+
+export function __vue_dynamic(VueComponent: Component, importUrl: string, vueUrl: string) {
+  const placeholderId = `placeholder_${String(Math.random())}`;
+  return (attrs: Record<string, string>, ...children: any) => {
+      return `<div id="${placeholderId}"></div><script type="module">
+          import Component from '${importUrl}';
+          import {createApp, h as createElement} from '${vueUrl}';
+
+          const App = {
+            render() {
+              return createElement(Component, ${JSON.stringify(attrs)});
+            }
+          };
+
+          createApp(App).mount(document.getElementById('${placeholderId}'));
+      </script>`;
+  };
+}
\ No newline at end of file