Bugbash! (#263)

* fix(vscode): Markdown frontmatter should use TSX, not YAML

* test: add test for #153

* chore: bump deps

* chore: update to use @astrojs scope

* fix: Markdown parse error when only child is `{expression}`

* fix: update renderer edge cases

* fix: failing test

* fix: update renderer

5 files changed, 71 insertions, 0 deletions

diff --git a/packages/renderers/renderer-svelte/Wrapper.svelte b/packages/renderers/renderer-svelte/Wrapper.svelte
new file mode 100644
index 000000000..78d4a402b
--- /dev/null
+++ b/packages/renderers/renderer-svelte/Wrapper.svelte
@@ -0,0 +1,21 @@
+<script>
+/** 
+  * Why do we need a wrapper component?
+  * 
+  * Astro passes `children` as a string of HTML, so we need
+  * a way to render that content.
+  * 
+  * Rather than passing a magical prop which needs special 
+  * handling, using this wrapper allows Svelte users to just
+  * use `<slot />` like they would for any other component.
+  */
+const { __astro_component: Component, __astro_children, ...props } = $$props;
+</script>
+
+<svelte:component this={Component} {...props}>
+  {#if __astro_children}
+    <astro-fragment>
+      {@html __astro_children}
+    </astro-fragment>
+  {/if}
+</svelte:component>
diff --git a/packages/renderers/renderer-svelte/client.js b/packages/renderers/renderer-svelte/client.js
new file mode 100644
index 000000000..ec0047abf
--- /dev/null
+++ b/packages/renderers/renderer-svelte/client.js
@@ -0,0 +1,13 @@
+import SvelteWrapper from './Wrapper.svelte';
+
+export default (target) => {
+  return (component, props, children) => {
+    try {
+      new SvelteWrapper({
+        target,
+        props: { __astro_component: component, __astro_children: children, ...props },
+        hydrate: true,
+      });
+    } catch (e) {}
+  };
+};
diff --git a/packages/renderers/renderer-svelte/index.js b/packages/renderers/renderer-svelte/index.js
new file mode 100644
index 000000000..ba3468594
--- /dev/null
+++ b/packages/renderers/renderer-svelte/index.js
@@ -0,0 +1,7 @@
+export default {
+  name: '@astrojs/renderer-svelte',
+  snowpackPlugin: '@snowpack/plugin-svelte',
+  snowpackPluginOptions: { compilerOptions: { hydratable: true } },
+  client: './client',
+  server: './server',
+};
diff --git a/packages/renderers/renderer-svelte/package.json b/packages/renderers/renderer-svelte/package.json
new file mode 100644
index 000000000..8442f51b5
--- /dev/null
+++ b/packages/renderers/renderer-svelte/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@astrojs/renderer-svelte",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./server": "./server.js",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "svelte": "^3.35.0",
+    "@snowpack/plugin-svelte": "^3.7.0"
+  }
+}
diff --git a/packages/renderers/renderer-svelte/server.js b/packages/renderers/renderer-svelte/server.js
new file mode 100644
index 000000000..8b42a12a1
--- /dev/null
+++ b/packages/renderers/renderer-svelte/server.js
@@ -0,0 +1,15 @@
+import SvelteWrapper from './Wrapper.svelte';
+
+function check(Component) {
+  return Component['render'] && Component['$$render'];
+}
+
+async function renderToStaticMarkup(Component, props, children) {
+  const { html } = SvelteWrapper.render({ __astro_component: Component, __astro_children: children, ...props });
+  return { html };
+}
+
+export default {
+  check,
+  renderToStaticMarkup,
+};