From c9d833ee0b58934a3aed0d0d64299664777209ee Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Tue, 1 Jun 2021 18:41:08 -0500 Subject: [PATCH] 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 | 5 +++++ .changeset/wise-olives-type.md | 5 +++++ packages/astro/package.json | 2 +- packages/astro/snowpack-plugin.cjs | 4 ++-- packages/astro/src/compiler/codegen/index.ts | 2 +- .../astro/src/frontend/__astro_component.ts | 17 +++++++++++++++-- packages/astro/src/runtime.ts | 12 +++++++----- .../fixtures/astro-markdown/astro.config.mjs | 6 +++--- .../src/templates/blog/astro.config.mjs | 3 --- .../src/templates/starter/astro.config.mjs | 3 --- .../renderer-svelte/Wrapper.svelte.ssr.js | 18 ++++++++++++++++++ packages/renderers/renderer-svelte/server.js | 2 +- yarn.lock | 8 ++++---- 13 files changed, 62 insertions(+), 25 deletions(-) create mode 100644 .changeset/long-masks-itch.md create mode 100644 .changeset/wise-olives-type.md create mode 100644 packages/renderers/renderer-svelte/Wrapper.svelte.ssr.js diff --git a/.changeset/long-masks-itch.md b/.changeset/long-masks-itch.md new file mode 100644 index 0000000000..6828d9482f --- /dev/null +++ b/.changeset/long-masks-itch.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixed a number of bugs and re-enabled the `@astrojs/renderer-vue` renderer diff --git a/.changeset/wise-olives-type.md b/.changeset/wise-olives-type.md new file mode 100644 index 0000000000..9e63363b05 --- /dev/null +++ b/.changeset/wise-olives-type.md @@ -0,0 +1,5 @@ +--- +'@astrojs/renderer-svelte': patch +--- + +Fixed a bug that was preventing SSR from working diff --git a/packages/astro/package.json b/packages/astro/package.json index c8249d036c..a4e29e1cfd 100644 --- a/packages/astro/package.json +++ b/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", diff --git a/packages/astro/snowpack-plugin.cjs b/packages/astro/snowpack-plugin.cjs index 40dbf628a8..9a208e2623 100644 --- a/packages/astro/snowpack-plugin.cjs +++ b/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} */ 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; diff --git a/packages/astro/src/compiler/codegen/index.ts b/packages/astro/src/compiler/codegen/index.ts index 4a7b4a3351..68ff8d853f 100644 --- a/packages/astro/src/compiler/codegen/index.ts +++ b/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')}';`, }; } diff --git a/packages/astro/src/frontend/__astro_component.ts b/packages/astro/src/frontend/__astro_component.ts index ad8bed7ff1..0d3d3a299c 100644 --- a/packages/astro/src/frontend/__astro_component.ts +++ b/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?`); } } diff --git a/packages/astro/src/runtime.ts b/packages/astro/src/runtime.ts index 134d5e5bb1..57f09b6b71 100644 --- a/packages/astro/src/runtime.ts +++ b/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 }, }); diff --git a/packages/astro/test/fixtures/astro-markdown/astro.config.mjs b/packages/astro/test/fixtures/astro-markdown/astro.config.mjs index c8631c5039..d940a67c98 100644 --- a/packages/astro/test/fixtures/astro-markdown/astro.config.mjs +++ b/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, }, diff --git a/packages/create-astro/src/templates/blog/astro.config.mjs b/packages/create-astro/src/templates/blog/astro.config.mjs index bd7b757463..c7583a774f 100644 --- a/packages/create-astro/src/templates/blog/astro.config.mjs +++ b/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) diff --git a/packages/create-astro/src/templates/starter/astro.config.mjs b/packages/create-astro/src/templates/starter/astro.config.mjs index 20c3d6eff2..e16ed1327a 100644 --- a/packages/create-astro/src/templates/starter/astro.config.mjs +++ b/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) diff --git a/packages/renderers/renderer-svelte/Wrapper.svelte.ssr.js b/packages/renderers/renderer-svelte/Wrapper.svelte.ssr.js new file mode 100644 index 0000000000..cdd544c735 --- /dev/null +++ b/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_children}` + : ``}` + })}`; +}); + +export default App; diff --git a/packages/renderers/renderer-svelte/server.js b/packages/renderers/renderer-svelte/server.js index 8b42a12a1a..a2eda85a31 100644 --- a/packages/renderers/renderer-svelte/server.js +++ b/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']; diff --git a/yarn.lock b/yarn.lock index 1bf6b6f620..7ca6b42080 100644 --- a/yarn.lock +++ b/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"