Fix prerelease bugs, reenable @astrojs/renderer-vue (#286)

* fix: add packages to external

* fix: improve renderer error message

* fix: reenable vue renderer

* chore: remove `extensions` from templates

* fix: reenable @astrojs/renderer-vue

* refactor: add types to snowpack plugin

* fix: update snowpack

* fix: use manual SSR wrapper for Svelte

* chore: add changesets

* chore: bump snowpack

* test: fix failing test

* chore: remove redundant entries

.changeset/long-masks-itch.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixed a number of bugs and re-enabled the `@astrojs/renderer-vue` renderer

.changeset/wise-olives-type.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/renderer-svelte': patch
+---
+
+Fixed a bug that was preventing SSR from working

packages/astro/package.json

@@ -87,7 +87,7 @@
     "sass": "^1.32.13",
     "shorthash": "^0.0.2",
     "slash": "^4.0.0",
-    "snowpack": "^3.5.2",
+    "snowpack": "^3.5.4",
     "source-map-support": "^0.5.19",
     "string-width": "^5.0.0",
     "tiny-glob": "^0.2.8",

packages/astro/snowpack-plugin.cjs

@@ -1,8 +1,8 @@
 const { readFile } = require('fs').promises;
-
 // Snowpack plugins must be CommonJS :(
 const transformPromise = import('./dist/compiler/index.js');
 
+/** @type {import('snowpack').SnowpackPluginFactory<any>} */
 module.exports = (snowpackConfig, { resolvePackageUrl, hmrPort, renderers, astroConfig } = {}) => {
   return {
     name: 'snowpack-astro',
@@ -54,7 +54,7 @@ ${contents}`;
       };
       const result = await compileComponent(contents, { compileOptions, filename: filePath, projectRoot });
       const output = {
-        '.js': result.contents,
+        '.js': { code: result.contents },
       };
       if (result.css) output['.css'] = result.css;
       return output;

packages/astro/src/compiler/codegen/index.ts

@@ -168,7 +168,7 @@ function getComponentWrapper(_name: string, { url, importSpecifier }: ComponentI
 
   const importInfo = kind ? { componentUrl: getComponentUrl(), componentExport: getComponentExport() } : {};
   return {
-    wrapper: `__astro_component(${name}, ${JSON.stringify({ hydrate: kind, displayName: name, ...importInfo })})`,
+    wrapper: `__astro_component(${name}, ${JSON.stringify({ hydrate: kind, displayName: _name, ...importInfo })})`,
     wrapperImport: `import {__astro_component} from '${internalImport('__astro_component.js')}';`,
   };
 }

packages/astro/src/frontend/__astro_component.ts

@@ -66,9 +66,22 @@ setup("${astroId}", async () => {
   return script;
 }
 
+const getComponentName = (Component: any, componentProps: any) => {
+  if (componentProps.displayName) return componentProps.displayName;
+  switch (typeof Component) {
+    case 'function': return Component.displayName ?? Component.name;
+    case 'string': return Component;
+    default: {
+      return Component;
+    }
+  } 
+}
+
 export const __astro_component = (Component: any, componentProps: AstroComponentProps = {} as any) => {
   if (Component == null) {
-    throw new Error(`Unable to render <${componentProps.displayName}> because it is ${Component}!\nDid you forget to import the component or is it possible there is a typo?`);
+    throw new Error(`Unable to render ${componentProps.displayName} because it is ${Component}!\nDid you forget to import the component or is it possible there is a typo?`);
+  } else if (typeof Component === 'string') {
+    throw new Error(`Astro is unable to render ${componentProps.displayName}!\nIs there a renderer to handle this type of component defined in your Astro config?`);
   }
 
   return async (props: any, ..._children: string[]) => {
@@ -81,7 +94,7 @@ export const __astro_component = (Component: any, componentProps: AstroComponent
       renderer = __rendererSources.length === 2 ? __renderers[1] : null;
 
       if (!renderer) {
-        const name = typeof Component === 'function' ? Component.displayName ?? Component.name : `{ ${Object.keys(Component).join(', ')} }`;
+        const name = getComponentName(Component, componentProps);
         throw new Error(`No renderer found for ${name}! Did you forget to add a renderer to your Astro config?`);
       }
     }

packages/astro/src/runtime.ts

@@ -269,8 +269,7 @@ interface CreateSnowpackOptions {
 }
 
 const DEFAULT_HMR_PORT = 12321;
-// '@astrojs/renderer-vue' disabled due to a bug
-const DEFAULT_RENDERERS = ['@astrojs/renderer-svelte', '@astrojs/renderer-react', '@astrojs/renderer-preact'];
+const DEFAULT_RENDERERS = ['@astrojs/renderer-vue', '@astrojs/renderer-svelte', '@astrojs/renderer-react', '@astrojs/renderer-preact'];
 
 /** Create a new Snowpack instance to power Astro */
 async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackOptions) {
@@ -305,7 +304,10 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO
     (process.env as any).TAILWIND_DISABLE_TOUCH = true;
   }
 
-  const rendererInstances = (await Promise.all(renderers.map((renderer) => import(pathToFileURL(resolveDependency(renderer)).toString())))).map(({ default: raw }, i) => {
+  const rendererInstances = (await Promise.all(renderers.map((renderer) => {
+    const entrypoint = pathToFileURL(resolveDependency(renderer)).toString();
+    return import(entrypoint);
+  }))).map(({ default: raw }, i) => {
     const { name = renderers[i], client, server, snowpackPlugin: snowpackPluginName, snowpackPluginOptions } = raw;
 
     if (typeof client !== 'string') {
@@ -338,7 +340,7 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO
   astroPluginOptions.renderers = rendererInstances;
 
   // Make sure that Snowpack builds our renderer plugins
-  const knownEntrypoints = [].concat(...(rendererInstances.map((renderer) => [renderer.server, renderer.client]) as any)) as string[];
+  const knownEntrypoints = [].concat(...(rendererInstances.map((renderer) => [renderer.server, renderer.client]) as any));
   const rendererSnowpackPlugins = rendererInstances.filter((renderer) => renderer.snowpackPlugin).map((renderer) => renderer.snowpackPlugin) as string | [string, any];
 
   const snowpackConfig = await loadConfiguration({
@@ -374,7 +376,7 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO
     },
     packageOptions: {
       knownEntrypoints,
-      external: snowpackExternals,
+      external: snowpackExternals
     },
   });
 

packages/astro/test/fixtures/astro-markdown/astro.config.mjs

@@ -1,7 +1,7 @@
 export default {
-  extensions: {
-    '.jsx': 'preact',
-  },
+  renderers: [
+    '@astrojs/renderer-preact'
+  ],
   buildOptions: {
     sitemap: false,
   },

packages/create-astro/src/templates/blog/astro.config.mjs

@@ -3,9 +3,6 @@ export default {
   // pages: './src/pages',   // Path to Astro components, pages, and data
   // dist: './dist',       // When running `astro build`, path to final static output
   // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
-  extensions: {
-    // '.jsx': 'react',    // Set this to "preact" or "react" to determine what *.jsx files should load
-  },
   buildOptions: {
     // site: '',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
     // sitemap: true,      // Generate sitemap (set to "false" to disable)

packages/create-astro/src/templates/starter/astro.config.mjs

@@ -3,9 +3,6 @@ export default {
   // pages: './src/pages',   // Path to Astro components, pages, and data
   // dist: './dist',       // When running `astro build`, path to final static output
   // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
-  extensions: {
-    // '.jsx': 'react',    // Set this to "preact" or "react" to determine what *.jsx files should load
-  },
   buildOptions: {
     // site: 'http://example.com',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
     // sitemap: true,      // Generate sitemap (set to "false" to disable)

packages/renderers/renderer-svelte/Wrapper.svelte.ssr.js

@@ -0,0 +1,18 @@
+/* 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;
+
+	return `${validate_component(Component || missing_component, "svelte:component").$$render($$result, Object.assign(props), {}, {
+		default: () => `${__astro_children
+		? `<astro-fragment>${__astro_children}</astro-fragment>`
+		: ``}`
+	})}`;
+});
+
+export default App;

packages/renderers/renderer-svelte/server.js

@@ -1,4 +1,4 @@
-import SvelteWrapper from './Wrapper.svelte';
+import SvelteWrapper from './Wrapper.svelte.ssr.js';
 
 function check(Component) {
   return Component['render'] && Component['$$render'];

yarn.lock

@@ -8906,10 +8906,10 @@ smartwrap@^1.2.3:
     wcwidth "^1.0.1"
     yargs "^15.1.0"
 
-snowpack@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/snowpack/-/snowpack-3.5.2.tgz#0b23619be535b22ebdda1ab3eba3444acbf35b91"
-  integrity sha512-TQQT5PXxeDr4gaMbp6nQrTDLX+Y8G5qI2wLqQdHLrpQEnq7W+gysn94+0xbOhnx0pFoVlSoFPjdQ83sETWl/9A==
+snowpack@^3.5.4:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/snowpack/-/snowpack-3.5.4.tgz#6f341714825f4080aeb2f7aa40a778c04c55934d"
+  integrity sha512-knm8Xv1Zh1/UW0jLuqu2f0VARN5WjZVeRWsFoSzdoXTsXaxctROVungRRirr++m4KhzHC32EG9K4+y28p1nknA==
   dependencies:
     cli-spinners "^2.5.0"
     default-browser-id "^2.0.0"