diff options
author | 2021-03-15 13:22:05 -0400 | |
---|---|---|
committer | 2021-03-15 13:22:05 -0400 | |
commit | af6b029e95e9c98e6fb9c642915d461b8d7f448e (patch) | |
tree | d70972e10884de0363e7ce4dd2a0765dafcf3dc8 /src/frontend/render/svelte.ts | |
download | astro-af6b029e95e9c98e6fb9c642915d461b8d7f448e.tar.gz astro-af6b029e95e9c98e6fb9c642915d461b8d7f448e.tar.zst astro-af6b029e95e9c98e6fb9c642915d461b8d7f448e.zip |
initial commit
Diffstat (limited to 'src/frontend/render/svelte.ts')
-rw-r--r-- | src/frontend/render/svelte.ts | 24 |
1 files changed, 24 insertions, 0 deletions
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>`; + }; +} |