Implement fallback capability (#44)

* Implement fallback capability

This makes it possible for a dynamic component to render fallback content on the server.

The mechanism is a special `static` prop passed to the component. If `static` is true then the component knows it can render static content.

Putting aside the word `static`, is this the right approach? I think giving components the flexibility to make the decision themselves *is* the right approach.

However in this case we have a special property that is passed in non-explicitly. I think we have to do it this way because if the caller passes in a prop it will get serialized and appear on the client. By making this something we *add* during rendering, it only happens on the server (and only when using `:load`).

Assuming this is the right approach, is `static` the right name for this prop? Other candidates:

* `server`

That's all I have!

* Use `import.meta.env.astro` to tell if running in SSR mode.

* Run formatter

4 files changed, 36 insertions, 13 deletions

diff --git a/src/build.ts b/src/build.ts
index 25d5e5ec6..ffae6fac0 100644
--- a/src/build.ts
+++ b/src/build.ts
@@ -61,7 +61,7 @@ export async function build(astroConfig: AstroConfig): Promise<0 | 1> {
 
   const runtime = await createRuntime(astroConfig, { logging: runtimeLogging });
   const { runtimeConfig } = runtime;
-  const { snowpack } = runtimeConfig;
+  const { backendSnowpack: snowpack } = runtimeConfig;
   const resolve = (pkgName: string) => snowpack.getUrlForPackage(pkgName);
 
   const imports = new Set<string>();
diff --git a/src/frontend/render/renderer.ts b/src/frontend/render/renderer.ts
index d7afc0558..9589cef85 100644
--- a/src/frontend/render/renderer.ts
+++ b/src/frontend/render/renderer.ts
@@ -5,7 +5,7 @@ interface DynamicRenderContext {
 }
 
 export interface Renderer {
-  renderStatic(Component: any): (props: Record<string, string>, ...children: any[]) => string;
+  renderStatic(Component: any): (props: Record<string, any>, ...children: any[]) => string;
   render(context: { root: string; Component: string; props: string; [key: string]: string }): string;
   imports?: Record<string, string[]>;
 }
diff --git a/src/runtime.ts b/src/runtime.ts
index f36ef1225..e0ac09de7 100644
--- a/src/runtime.ts
+++ b/src/runtime.ts
@@ -10,9 +10,12 @@ import { loadConfiguration, logger as snowpackLogger, startServer as startSnowpa
 interface RuntimeConfig {
   astroConfig: AstroConfig;
   logging: LogOptions;
-  snowpack: SnowpackDevServer;
-  snowpackRuntime: SnowpackServerRuntime;
-  snowpackConfig: SnowpackConfig;
+  backendSnowpack: SnowpackDevServer;
+  backendSnowpackRuntime: SnowpackServerRuntime;
+  backendSnowpackConfig: SnowpackConfig;
+  frontendSnowpack: SnowpackDevServer;
+  frontendSnowpackRuntime: SnowpackServerRuntime;
+  frontendSnowpackConfig: SnowpackConfig;
 }
 
 type LoadResultSuccess = {
@@ -29,7 +32,7 @@ export type LoadResult = LoadResultSuccess | LoadResultNotFound | LoadResultErro
 snowpackLogger.level = 'silent';
 
 async function load(config: RuntimeConfig, rawPathname: string | undefined): Promise<LoadResult> {
-  const { logging, snowpack, snowpackRuntime } = config;
+  const { logging, backendSnowpackRuntime, frontendSnowpack } = config;
   const { astroRoot } = config.astroConfig;
 
   const fullurl = new URL(rawPathname || '/', 'https://example.org/');
@@ -43,7 +46,8 @@ async function load(config: RuntimeConfig, rawPathname: string | undefined): Pro
   // Non-Astro pages (file resources)
   if (!existsSync(selectedPageLoc) && !existsSync(selectedPageMdLoc)) {
     try {
-      const result = await snowpack.loadUrl(reqPath);
+      console.log('loading', reqPath);
+      const result = await frontendSnowpack.loadUrl(reqPath);
 
       // success
       return {
@@ -63,7 +67,7 @@ async function load(config: RuntimeConfig, rawPathname: string | undefined): Pro
 
   for (const url of [`/_astro/pages/${selectedPage}.astro.js`, `/_astro/pages/${selectedPage}.md.js`]) {
     try {
-      const mod = await snowpackRuntime.importModule(url);
+      const mod = await backendSnowpackRuntime.importModule(url);
       debug(logging, 'resolve', `${reqPath} -> ${url}`);
       let html = (await mod.exports.__renderPage({
         request: {
@@ -128,7 +132,7 @@ interface RuntimeOptions {
   logging: LogOptions;
 }
 
-export async function createRuntime(astroConfig: AstroConfig, { logging }: RuntimeOptions): Promise<AstroRuntime> {
+async function createSnowpack(astroConfig: AstroConfig, env: Record<string, any>) {
   const { projectRoot, astroRoot, extensions } = astroConfig;
 
   const internalPath = new URL('./frontend/', import.meta.url);
@@ -170,23 +174,42 @@ export async function createRuntime(astroConfig: AstroConfig, { logging }: Runti
       external: ['@vue/server-renderer', 'node-fetch'],
     },
   });
+
+  const envConfig = snowpackConfig.env || (snowpackConfig.env = {});
+  Object.assign(envConfig, env);
+
   snowpack = await startSnowpackServer({
     config: snowpackConfig,
     lockfile: null,
   });
   const snowpackRuntime = snowpack.getServerRuntime();
 
+  return { snowpack, snowpackRuntime, snowpackConfig };
+}
+
+export async function createRuntime(astroConfig: AstroConfig, { logging }: RuntimeOptions): Promise<AstroRuntime> {
+  const { snowpack: backendSnowpack, snowpackRuntime: backendSnowpackRuntime, snowpackConfig: backendSnowpackConfig } = await createSnowpack(astroConfig, {
+    astro: true,
+  });
+
+  const { snowpack: frontendSnowpack, snowpackRuntime: frontendSnowpackRuntime, snowpackConfig: frontendSnowpackConfig } = await createSnowpack(astroConfig, {
+    astro: false,
+  });
+
   const runtimeConfig: RuntimeConfig = {
     astroConfig,
     logging,
-    snowpack,
-    snowpackRuntime,
-    snowpackConfig,
+    backendSnowpack,
+    backendSnowpackRuntime,
+    backendSnowpackConfig,
+    frontendSnowpack,
+    frontendSnowpackRuntime,
+    frontendSnowpackConfig,
   };
 
   return {
     runtimeConfig,
     load: load.bind(null, runtimeConfig),
-    shutdown: () => snowpack.shutdown(),
+    shutdown: () => Promise.all([backendSnowpack.shutdown(), frontendSnowpack.shutdown()]).then(() => void 0),
   };
 }
diff --git a/src/style-stuff.ts b/src/style-stuff.ts
deleted file mode 100644
index e69de29bb..000000000
--- a/src/style-stuff.ts
+++ /dev/null