7 files changed, 165 insertions, 0 deletions
diff --git a/packages/integrations/svelte/Wrapper.svelte b/packages/integrations/svelte/Wrapper.svelte
new file mode 100644
index 000000000..c1ee77d91
--- /dev/null
+++ b/packages/integrations/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 != null}
+    <astro-fragment>
+      {@html __astro_children}
+    </astro-fragment>
+  {/if}
+</svelte:component>
diff --git a/packages/integrations/svelte/Wrapper.svelte.ssr.js b/packages/integrations/svelte/Wrapper.svelte.ssr.js
new file mode 100644
index 000000000..9bca437b5
--- /dev/null
+++ b/packages/integrations/svelte/Wrapper.svelte.ssr.js
@@ -0,0 +1,14 @@
+/* App.svelte generated by Svelte v3.38.2 */
+import { create_ssr_component, missing_component, validate_component } from 'svelte/internal';
+
+const App = create_ssr_component(($$result, $$props, $$bindings, slots) => {
+	const { __astro_component: Component, __astro_children, ...props } = $$props;
+	const children = {};
+	if (__astro_children != null) {
+		children.default = () => `<astro-fragment>${__astro_children}</astro-fragment>`;
+	}
+
+	return `${validate_component(Component || missing_component, 'svelte:component').$$render($$result, Object.assign(props), {}, children)}`;
+});
+
+export default App;
diff --git a/packages/integrations/svelte/client.js b/packages/integrations/svelte/client.js
new file mode 100644
index 000000000..c10c7afa0
--- /dev/null
+++ b/packages/integrations/svelte/client.js
@@ -0,0 +1,14 @@
+import SvelteWrapper from './Wrapper.svelte';
+
+export default (target) => {
+	return (component, props, children) => {
+		delete props['class'];
+		try {
+			new SvelteWrapper({
+				target,
+				props: { __astro_component: component, __astro_children: children, ...props },
+				hydrate: true,
+			});
+		} catch (e) {}
+	};
+};
diff --git a/packages/integrations/svelte/package.json b/packages/integrations/svelte/package.json
new file mode 100644
index 000000000..a6fec87a4
--- /dev/null
+++ b/packages/integrations/svelte/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@astrojs/svelte",
+  "version": "0.0.1",
+  "description": "Use Svelte components within Astro",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "author": "withastro",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/withastro/astro.git",
+    "directory": "packages/integrations/svelte"
+  },
+  "bugs": "https://github.com/withastro/astro/issues",
+  "homepage": "https://astro.build",
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./*",
+    "./client.js": "./client.js",
+    "./server.js": "./server.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "astro-scripts build \"src/**/*.ts\" && tsc",
+    "dev": "astro-scripts dev \"src/**/*.ts\""
+  },
+  "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.37",
+    "postcss-load-config": "^3.1.1",
+    "svelte-preprocess": "^4.10.2"
+  },
+  "devDependencies": {
+    "astro": "workspace:*",
+    "astro-scripts": "workspace:*",
+    "svelte": "^3.46.4"
+  },
+  "peerDependencies": {
+    "svelte": "^3.46.4"
+  },
+  "engines": {
+    "node": "^14.15.0 || >=16.0.0"
+  }
+}
diff --git a/packages/integrations/svelte/server.js b/packages/integrations/svelte/server.js
new file mode 100644
index 000000000..c51b2f4b4
--- /dev/null
+++ b/packages/integrations/svelte/server.js
@@ -0,0 +1,15 @@
+import SvelteWrapper from './Wrapper.svelte.ssr.js';
+
+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,
+};
diff --git a/packages/integrations/svelte/src/index.ts b/packages/integrations/svelte/src/index.ts
new file mode 100644
index 000000000..f5a3dd945
--- /dev/null
+++ b/packages/integrations/svelte/src/index.ts
@@ -0,0 +1,48 @@
+import type { AstroIntegration, AstroRenderer } from 'astro';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import preprocess from 'svelte-preprocess';
+
+function getRenderer(): AstroRenderer {
+	return {
+		name: '@astrojs/svelte',
+		clientEntrypoint: '@astrojs/svelte/client.js',
+		serverEntrypoint: '@astrojs/svelte/server.js',
+	};
+}
+
+function getViteConfiguration(isDev: boolean) {
+	return {
+		optimizeDeps: {
+			include: ['@astrojs/svelte/client.js', 'svelte', 'svelte/internal'],
+			exclude: ['@astrojs/svelte/server.js'],
+		},
+		plugins: [
+			svelte({
+				emitCss: true,
+				compilerOptions: { dev: isDev, hydratable: true },
+				preprocess: [
+					preprocess({
+						less: true,
+						sass: { renderSync: true },
+						scss: { renderSync: true },
+						stylus: true,
+						typescript: true,
+					}),
+				],
+			}),
+		],
+	};
+}
+
+export default function (): AstroIntegration {
+	return {
+		name: '@astrojs/svelte',
+		hooks: {
+			// Anything that gets returned here is merged into Astro Config
+			'astro:config:setup': ({ command, updateConfig, addRenderer }) => {
+				addRenderer(getRenderer());
+				updateConfig({ vite: getViteConfiguration(command === 'dev') });
+			},
+		},
+	};
+}
diff --git a/packages/integrations/svelte/tsconfig.json b/packages/integrations/svelte/tsconfig.json
new file mode 100644
index 000000000..44baf375c
--- /dev/null
+++ b/packages/integrations/svelte/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "allowJs": true,
+    "module": "ES2020",
+    "outDir": "./dist",
+    "target": "ES2020"
+  }
+}