Flagged SSR support (#2548)

* Checkpoint, basics are working

* Add the `--experimental-ssr` flag

* Adds the changeset

* Fixes population of getStaticPaths results

* Pass through the imported module

* Route manifest test

* Fix remaining tests

* Fix remaining tests

* Copy server assets over

* Fix types

* Allowing passing in the request to the Node version of App

* Improve the example app

* Gets CI to pass

6 files changed, 198 insertions, 0 deletions

diff --git a/examples/ssr/src/components/AddToCart.svelte b/examples/ssr/src/components/AddToCart.svelte
new file mode 100644
index 000000000..b03b8180a
--- /dev/null
+++ b/examples/ssr/src/components/AddToCart.svelte
@@ -0,0 +1,47 @@
+<script>
+	export let id = 0;
+
+	function addToCart() {
+		window.dispatchEvent(new CustomEvent('add-to-cart', {
+			detail: id
+		}));
+	}
+</script>
+<style>
+	button {
+  display:block;
+  padding:0.5em 1em 0.5em 1em;
+  border-radius:100px;
+  border:none;
+  font-size: 1.4em;
+  position:relative;
+  background:#0652DD;
+  cursor:pointer;
+  height:2em;
+  width:10em;
+  overflow:hidden;
+  transition:transform 0.1s;
+  z-index:1;
+}
+button:hover {
+  transform:scale(1.1);
+}
+
+.pretext {
+  color:#fff;
+  background:#0652DD;
+  position:absolute;
+  top:0;
+  left:0;
+  height:100%;
+  width:100%;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  font-family: 'Quicksand', sans-serif;
+	text-transform: uppercase;
+}
+</style>
+<button on:click={addToCart}>
+	<span class="pretext">Add to cart</span>
+</button>
diff --git a/examples/ssr/src/components/Cart.svelte b/examples/ssr/src/components/Cart.svelte
new file mode 100644
index 000000000..63dd1b5a5
--- /dev/null
+++ b/examples/ssr/src/components/Cart.svelte
@@ -0,0 +1,32 @@
+<script>
+	export let count = 0;
+	let items = new Set();
+
+	function onAddToCart(ev) {
+		const id = ev.detail;
+		items.add(id);
+		count++;
+	}
+</script>
+<style>
+	.cart {
+		display: flex;
+		align-items: center;
+	}
+	.cart :first-child {
+		margin-right: 5px;
+	}
+
+	.cart-icon {
+		font-size: 36px;
+	}
+
+	.count {
+		font-size: 24px;
+	}
+</style>
+<svelte:window on:add-to-cart={onAddToCart}/>
+<div class="cart">
+	<span class="material-icons cart-icon">shopping_cart</span>
+	<span class="count">{count}</span>
+</div>
diff --git a/examples/ssr/src/components/Container.astro b/examples/ssr/src/components/Container.astro
new file mode 100644
index 000000000..f982522b8
--- /dev/null
+++ b/examples/ssr/src/components/Container.astro
@@ -0,0 +1,12 @@
+---
+const { tag = 'div' } = Astro.props;
+const Tag = tag;
+---
+<style>
+	.container {
+		width: 1248px; /** TODO: responsive */
+		margin-left: auto;
+		margin-right: auto;
+	}
+</style>
+<Tag class="container"><slot /></Tag>
diff --git a/examples/ssr/src/components/Header.astro b/examples/ssr/src/components/Header.astro
new file mode 100644
index 000000000..2839c70d3
--- /dev/null
+++ b/examples/ssr/src/components/Header.astro
@@ -0,0 +1,31 @@
+---
+import TextDecorationSkip from './TextDecorationSkip.astro';
+import Cart from './Cart.svelte';
+---
+<style>
+	@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
+
+	header {
+		margin: 1rem 2rem;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	h1 {
+		margin: 0;
+		font-family: 'Lobster', cursive;
+		color: black;
+	}
+
+	a, a:visited {
+		color: inherit;
+		text-decoration: none;
+	}
+</style>
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<header>
+	<h1><a href="/"><TextDecorationSkip text="Online Store" /></a></h1>
+	<div class="right-pane">
+		<Cart client:idle />
+	</div>
+</header>
diff --git a/examples/ssr/src/components/ProductListing.astro b/examples/ssr/src/components/ProductListing.astro
new file mode 100644
index 000000000..c0af5a34c
--- /dev/null
+++ b/examples/ssr/src/components/ProductListing.astro
@@ -0,0 +1,61 @@
+---
+const { products } = Astro.props;
+---
+<style>
+	ul {
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+	}
+
+	figure {
+		width: 200px;
+		padding: 7px;
+		border: 1px solid black;
+		display: flex;
+		flex-direction: column;
+	}
+
+	figure figcaption {
+		text-align: center;
+		line-height: 1.6;
+	}
+
+	figure img {
+		width: 100%;
+		height: 250px;
+		object-fit: cover;
+	}
+
+	.product a {
+		display: block;
+		text-decoration: none;
+		color: inherit;
+	}
+
+	.name {
+		font-weight: 500;
+	}
+
+	.price {
+		font-size: 90%;
+		color: #787878;
+	}
+</style>
+<slot name="title"></slot>
+<ul>
+{products.map(product => (
+	<li class="product">
+		<a href={`/products/${product.id}`}>
+			<figure>
+				<img src={product.image} />
+				<figcaption>
+					<div class="name">{product.name}</div>
+					<div class="price">${product.price}</div>
+				</figcaption>
+			</figure>
+		</a>
+	</li>
+))}
+</ul>
diff --git a/examples/ssr/src/components/TextDecorationSkip.astro b/examples/ssr/src/components/TextDecorationSkip.astro
new file mode 100644
index 000000000..b35179ea8
--- /dev/null
+++ b/examples/ssr/src/components/TextDecorationSkip.astro
@@ -0,0 +1,15 @@
+---
+const { text } = Astro.props;
+const words = text.split(' ');
+const last = words.length - 1;
+---
+<style>
+ span {
+	text-decoration: underline;
+ }
+</style>
+{words.map((word, i) => (
+	<Fragment>
+		<span>{word}</span>{i !== last && (<Fragment>&#32;</Fragment>)}
+	</Fragment>
+))}