Renderer plugins (#231)

* refactor: pluggable renderers

* refactor: cache renderer per component

* docs: update comments on snowpack plugin `transform` method

* docs: add comments to renderer plugins

* refactor: convert components to Map

* fix: pass children through to astro __render

* refactor: move Components/ComponentInfo to shared types

* refactor: remove `gatherRuntimes` step, just scan output for imports

* refactor: update isComponentTag logic

* chore: move dependencies to renderers

* fix: cross-platform transform injection

* feat: defer renderer to react, fallback to preact

* fix: use double quotes in generated script

* test: fix failing children tests

* test: add workspaceRoot to all tests

* fix: pass props to renderer check

* chore: add test:core script back for convenience

* chore: remove unused external

* chore: rename renderers

* chore: add astring, estree-util-value-to-estree

* chore: render-component => __astro_component

* refactor: split hydrate logic to own file

* refactor: use `astro-fragment` rather than `div`

* chore: remove unused hooks

* chore: delete unused file

* chore: add changesets

* fix: Astro renderer should be async

* fix: remove <astro-fragment> for static content

* test: fix failing test

* chore: normalize config interface

* feat: allow renderers to inject a snowpackPlugin

* fix: resolve import URL before using dynamic import

* refactor: update renderers to use separate /server entrypoint

* refactor: update server renderer interface

* fix: get renderers working again

* test: debug failing test

* test: better debug

* test: better debug

* test: remove debug

* fix: support esm and cjs packages via "resolve"

* refactor: split hydrate functions into individual files

* fix: dependency resolution relative to projectRoot

* fix: @snowpack/plugin-postcss needs to be hoisted

* fix: do not test prettier-plugin-astro as it's not ready for primetime

5 files changed, 71 insertions, 0 deletions

diff --git a/packages/renderers/svelte/Wrapper.svelte b/packages/renderers/svelte/Wrapper.svelte
new file mode 100644
index 000000000..78d4a402b
--- /dev/null
+++ b/packages/renderers/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/svelte/client.js b/packages/renderers/svelte/client.js
new file mode 100644
index 000000000..d873377c6
--- /dev/null
+++ b/packages/renderers/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/svelte/index.js b/packages/renderers/svelte/index.js
new file mode 100644
index 000000000..b26d9f634
--- /dev/null
+++ b/packages/renderers/svelte/index.js
@@ -0,0 +1,7 @@
+export default {
+  name: '@astro-renderer/svelte',
+  snowpackPlugin: '@snowpack/plugin-svelte',
+  snowpackPluginOptions: { compilerOptions: { hydratable: true } },
+  client: './client',
+  server: './server'
+};
diff --git a/packages/renderers/svelte/package.json b/packages/renderers/svelte/package.json
new file mode 100644
index 000000000..7ce4664fd
--- /dev/null
+++ b/packages/renderers/svelte/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@astro-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/svelte/server.js b/packages/renderers/svelte/server.js
new file mode 100644
index 000000000..101dca535
--- /dev/null
+++ b/packages/renderers/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
+};