diff options
Diffstat (limited to 'packages')
34 files changed, 113 insertions, 35 deletions
diff --git a/packages/astro/package.json b/packages/astro/package.json index 2a7e14381..309f10e36 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -32,10 +32,10 @@ "test": "uvu test -i fixtures -i benchmark -i test-utils.js" }, "dependencies": { - "@astro-renderer/preact": "0.0.1", - "@astro-renderer/react": "0.0.1", - "@astro-renderer/svelte": "0.0.1", - "@astro-renderer/vue": "0.0.1", + "@astrojs/renderer-preact": "0.0.1", + "@astrojs/renderer-react": "0.0.1", + "@astrojs/renderer-svelte": "0.0.1", + "@astrojs/renderer-vue": "0.0.1", "@babel/code-frame": "^7.12.13", "@babel/generator": "^7.13.9", "@babel/parser": "^7.13.15", @@ -86,7 +86,7 @@ "sass": "^1.32.13", "shorthash": "^0.0.2", "slash": "^4.0.0", - "snowpack": "^3.5.1", + "snowpack": "^3.5.2", "source-map-support": "^0.5.19", "string-width": "^5.0.0", "tiny-glob": "^0.2.8", diff --git a/packages/astro/src/compiler/codegen/index.ts b/packages/astro/src/compiler/codegen/index.ts index fa00e8c99..d2b661116 100644 --- a/packages/astro/src/compiler/codegen/index.ts +++ b/packages/astro/src/compiler/codegen/index.ts @@ -492,6 +492,10 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile break; } case 'MustacheTag': + if (state.markers.insideMarkdown) { + if (curr === 'out') curr = 'markdown'; + } + return; case 'Comment': return; case 'Fragment': @@ -623,7 +627,6 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile case 'Fragment': case 'Expression': case 'MustacheTag': - return; case 'CodeSpan': case 'CodeFence': return; diff --git a/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts b/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts index 116302c0f..7a038dd7a 100644 --- a/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts +++ b/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts @@ -98,7 +98,7 @@ export function scopeRule(selector: string, className: string) { /** PostCSS Scope plugin */ export default function astroScopedStyles(options: AstroScopedOptions): Plugin { return { - postcssPlugin: '@astro/postcss-scoped-styles', + postcssPlugin: '@astrojs/postcss-scoped-styles', Rule(rule) { rule.selector = scopeRule(rule.selector, options.className); }, diff --git a/packages/astro/src/frontend/__astro_component.ts b/packages/astro/src/frontend/__astro_component.ts index b6678c5e3..4e5990ca9 100644 --- a/packages/astro/src/frontend/__astro_component.ts +++ b/packages/astro/src/frontend/__astro_component.ts @@ -27,13 +27,16 @@ __renderers = [astro, ...__renderers]; const rendererCache = new WeakMap(); /** For a given component, resolve the renderer. Results are cached if this instance is encountered again */ -function resolveRenderer(Component: any, props: any = {}) { +async function resolveRenderer(Component: any, props: any = {}, children?: string) { if (rendererCache.has(Component)) { return rendererCache.get(Component); } for (const __renderer of __renderers) { - const shouldUse = __renderer.check(Component, props); + // Yes, we do want to `await` inside of this loop! + // __renderer.check can't be run in parallel, it + // returns the first match and skips any subsequent checks + const shouldUse = await __renderer.check(Component, props, children); if (shouldUse) { rendererCache.set(Component, __renderer); return __renderer; @@ -67,21 +70,21 @@ export const __astro_component = (Component: any, componentProps: AstroComponent 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?`); } - // First attempt at resolving a renderer (we don't have the props yet, so it might fail if they are required) - let renderer = resolveRenderer(Component); return async (props: any, ..._children: string[]) => { + const children = _children.join('\n'); + let renderer = await resolveRenderer(Component, props, children); + if (!renderer) { - // Second attempt at resolving a renderer (this time we have props!) - renderer = resolveRenderer(Component, props); + // If the user only specifies a single renderer, but the check failed + // for some reason... just default to their preferred renderer. + renderer = (__rendererSources.length === 2) ? __renderers[1] : null; - // Okay now we definitely can't resolve a renderer, so let's throw if (!renderer) { const name = typeof Component === 'function' ? Component.displayName ?? Component.name : `{ ${Object.keys(Component).join(', ')} }`; throw new Error(`No renderer found for ${name}! Did you forget to add a renderer to your Astro config?`); } } - const children = _children.join('\n'); const { html } = await renderer.renderToStaticMarkup(Component, props, children); // If we're NOT hydrating this component, just return the HTML if (!componentProps.hydrate) { diff --git a/packages/astro/src/runtime.ts b/packages/astro/src/runtime.ts index b350da596..40d4f5f8b 100644 --- a/packages/astro/src/runtime.ts +++ b/packages/astro/src/runtime.ts @@ -268,7 +268,7 @@ interface CreateSnowpackOptions { } const DEFAULT_HMR_PORT = 12321; -const DEFAULT_RENDERERS = ['@astro-renderer/vue', '@astro-renderer/svelte', '@astro-renderer/react', '@astro-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) { diff --git a/packages/astro/test/astro-components.test.js b/packages/astro/test/astro-components.test.js new file mode 100644 index 000000000..7de88b8de --- /dev/null +++ b/packages/astro/test/astro-components.test.js @@ -0,0 +1,30 @@ +import { suite } from 'uvu'; +import * as assert from 'uvu/assert'; +import { doc } from './test-utils.js'; +import { setup, setupBuild } from './helpers.js'; + +const Components = suite('Components tests'); + +setup(Components, './fixtures/astro-components'); +setupBuild(Components, './fixtures/astro-components'); + +Components('Astro components are able to render framework components', async ({ runtime }) => { + let result = await runtime.load('/'); + if (result.error) throw new Error(result); + + const $ = doc(result.contents); + + const $astro = $('#astro'); + assert.equal($astro.children().length, 3, 'Renders astro component'); + + const $react = $('#react'); + assert.not.type($react, 'undefined', 'Renders React component'); + + const $vue = $('#vue'); + assert.not.type($vue, 'undefined', 'Renders Vue component'); + + const $svelte = $('#svelte'); + assert.not.type($svelte, 'undefined', 'Renders Svelte component'); +}); + +Components.run(); diff --git a/packages/astro/test/astro-dynamic.test.js b/packages/astro/test/astro-dynamic.test.js index 3736bcd89..30bcf456c 100644 --- a/packages/astro/test/astro-dynamic.test.js +++ b/packages/astro/test/astro-dynamic.test.js @@ -15,7 +15,7 @@ DynamicComponents('Loads client-only packages', async ({ runtime }) => { const exp = /import\("(.+?)"\)/g; let match, reactRenderer; while ((match = exp.exec(result.contents))) { - if (match[1].includes('renderers/react/client.js')) { + if (match[1].includes('renderers/renderer-react/client.js')) { reactRenderer = match[1]; } } diff --git a/packages/astro/test/fixtures/astro-children/astro.config.mjs b/packages/astro/test/fixtures/astro-children/astro.config.mjs index a87cc51c9..2de93dc60 100644 --- a/packages/astro/test/fixtures/astro-children/astro.config.mjs +++ b/packages/astro/test/fixtures/astro-children/astro.config.mjs @@ -1,7 +1,7 @@ export default { renderers: [ - '@astro-renderer/preact', - '@astro-renderer/vue', - '@astro-renderer/svelte', + '@astrojs/renderer-preact', + '@astrojs/renderer-vue', + '@astrojs/renderer-svelte', ], }; diff --git a/packages/astro/test/fixtures/astro-components/snowpack.config.json b/packages/astro/test/fixtures/astro-components/snowpack.config.json new file mode 100644 index 000000000..8f034781d --- /dev/null +++ b/packages/astro/test/fixtures/astro-components/snowpack.config.json @@ -0,0 +1,3 @@ +{ + "workspaceRoot": "../../../../../" +} diff --git a/packages/astro/test/fixtures/astro-components/src/components/Component.astro b/packages/astro/test/fixtures/astro-components/src/components/Component.astro new file mode 100644 index 000000000..36dec11a2 --- /dev/null +++ b/packages/astro/test/fixtures/astro-components/src/components/Component.astro @@ -0,0 +1,11 @@ +--- +import ReactComponent from './Component.jsx'; +import VueComponent from './Component.vue'; +import SvelteComponent from './Component.svelte'; +--- + +<div id="astro"> + <ReactComponent /> + <VueComponent /> + <SvelteComponent /> +</div> diff --git a/packages/astro/test/fixtures/astro-components/src/components/Component.jsx b/packages/astro/test/fixtures/astro-components/src/components/Component.jsx new file mode 100644 index 000000000..f25176192 --- /dev/null +++ b/packages/astro/test/fixtures/astro-components/src/components/Component.jsx @@ -0,0 +1,5 @@ +import { h } from 'preact'; + +export default function PreactComponent({ children }) { + return <div id="preact">{children}</div>; +} diff --git a/packages/astro/test/fixtures/astro-components/src/components/Component.svelte b/packages/astro/test/fixtures/astro-components/src/components/Component.svelte new file mode 100644 index 000000000..4276a78b8 --- /dev/null +++ b/packages/astro/test/fixtures/astro-components/src/components/Component.svelte @@ -0,0 +1,3 @@ +<div id="svelte"> + <slot /> +</div> diff --git a/packages/astro/test/fixtures/astro-components/src/components/Component.vue b/packages/astro/test/fixtures/astro-components/src/components/Component.vue new file mode 100644 index 000000000..22e6e1143 --- /dev/null +++ b/packages/astro/test/fixtures/astro-components/src/components/Component.vue @@ -0,0 +1,9 @@ +<template> + <div id="vue"> + <slot /> + </div> +</template> + +<script> +export default {} +</script> diff --git a/packages/astro/test/fixtures/astro-components/src/pages/index.astro b/packages/astro/test/fixtures/astro-components/src/pages/index.astro new file mode 100644 index 000000000..4cadb30e6 --- /dev/null +++ b/packages/astro/test/fixtures/astro-components/src/pages/index.astro @@ -0,0 +1,9 @@ +--- +import AstroComponent from '../components/Component.astro'; +--- +<html> +<head><title>Components</title></head> +<body> + <AstroComponent /> +</body> +</html> diff --git a/packages/renderers/preact/client.js b/packages/renderers/renderer-preact/client.js index 2b8d4bd49..2b8d4bd49 100644 --- a/packages/renderers/preact/client.js +++ b/packages/renderers/renderer-preact/client.js diff --git a/packages/renderers/react/index.js b/packages/renderers/renderer-preact/index.js index fdc9e29d5..07ebe50e7 100644 --- a/packages/renderers/react/index.js +++ b/packages/renderers/renderer-preact/index.js @@ -1,5 +1,5 @@ export default { - name: '@astro-renderer/react', + name: '@astrojs/renderer-preact', client: './client', server: './server', }; diff --git a/packages/renderers/preact/package.json b/packages/renderers/renderer-preact/package.json index 063a28b50..c6bb915e9 100644 --- a/packages/renderers/preact/package.json +++ b/packages/renderers/renderer-preact/package.json @@ -1,5 +1,5 @@ { - "name": "@astro-renderer/preact", + "name": "@astrojs/renderer-preact", "version": "0.0.1", "type": "module", "exports": { diff --git a/packages/renderers/preact/server.js b/packages/renderers/renderer-preact/server.js index e8ece01ba..a14b710b1 100644 --- a/packages/renderers/preact/server.js +++ b/packages/renderers/renderer-preact/server.js @@ -2,15 +2,16 @@ import { h } from 'preact'; import { renderToString } from 'preact-render-to-string'; import StaticHtml from './static-html.js'; -function check(Component, props) { +function check(Component, props, children) { try { - return Boolean(renderToString(h(Component, props))); + const { html } = renderToStaticMarkup(Component, props, children) + return Boolean(html) } catch (e) {} return false; } function renderToStaticMarkup(Component, props, children) { - const html = renderToString(h(Component, props, h(StaticHtml, { value: children }))); + const html = renderToString(h(Component, { ...props, children: h(StaticHtml, { value: children }), innerHTML: children })); return { html }; } diff --git a/packages/renderers/preact/static-html.js b/packages/renderers/renderer-preact/static-html.js index 5a31a68af..5a31a68af 100644 --- a/packages/renderers/preact/static-html.js +++ b/packages/renderers/renderer-preact/static-html.js diff --git a/packages/renderers/react/client.js b/packages/renderers/renderer-react/client.js index b699a76d0..b699a76d0 100644 --- a/packages/renderers/react/client.js +++ b/packages/renderers/renderer-react/client.js diff --git a/packages/renderers/preact/index.js b/packages/renderers/renderer-react/index.js index cfd4ae8c6..af8e516b8 100644 --- a/packages/renderers/preact/index.js +++ b/packages/renderers/renderer-react/index.js @@ -1,5 +1,5 @@ export default { - name: '@astro-renderer/preact', + name: '@astrojs/renderer-react', client: './client', server: './server', }; diff --git a/packages/renderers/react/package.json b/packages/renderers/renderer-react/package.json index 7fb22d47a..91151b915 100644 --- a/packages/renderers/react/package.json +++ b/packages/renderers/renderer-react/package.json @@ -1,5 +1,5 @@ { - "name": "@astro-renderer/react", + "name": "@astrojs/renderer-react", "version": "0.0.1", "type": "module", "exports": { diff --git a/packages/renderers/react/server.js b/packages/renderers/renderer-react/server.js index aa3abc7bb..3518f6447 100644 --- a/packages/renderers/react/server.js +++ b/packages/renderers/renderer-react/server.js @@ -2,15 +2,16 @@ import { createElement as h } from 'react'; import { renderToStaticMarkup as renderToString } from 'react-dom/server.js'; import StaticHtml from './static-html.js'; -function check(Component, props) { +function check(Component, props, children) { try { - return Boolean(renderToString(h(Component, props))); + const { html } = renderToStaticMarkup(Component, props, children) + return Boolean(html) } catch (e) {} return false; } function renderToStaticMarkup(Component, props, children) { - const html = renderToString(h(Component, props, h(StaticHtml, { value: children }))); + const html = renderToString(h(Component, { ...props, children: h(StaticHtml, { value: children }), innerHTML: children })); return { html }; } diff --git a/packages/renderers/react/static-html.js b/packages/renderers/renderer-react/static-html.js index 1efc625d0..1efc625d0 100644 --- a/packages/renderers/react/static-html.js +++ b/packages/renderers/renderer-react/static-html.js diff --git a/packages/renderers/svelte/Wrapper.svelte b/packages/renderers/renderer-svelte/Wrapper.svelte index 78d4a402b..78d4a402b 100644 --- a/packages/renderers/svelte/Wrapper.svelte +++ b/packages/renderers/renderer-svelte/Wrapper.svelte diff --git a/packages/renderers/svelte/client.js b/packages/renderers/renderer-svelte/client.js index ec0047abf..ec0047abf 100644 --- a/packages/renderers/svelte/client.js +++ b/packages/renderers/renderer-svelte/client.js diff --git a/packages/renderers/svelte/index.js b/packages/renderers/renderer-svelte/index.js index 7cef83a2b..ba3468594 100644 --- a/packages/renderers/svelte/index.js +++ b/packages/renderers/renderer-svelte/index.js @@ -1,5 +1,5 @@ export default { - name: '@astro-renderer/svelte', + name: '@astrojs/renderer-svelte', snowpackPlugin: '@snowpack/plugin-svelte', snowpackPluginOptions: { compilerOptions: { hydratable: true } }, client: './client', diff --git a/packages/renderers/svelte/package.json b/packages/renderers/renderer-svelte/package.json index 7ce4664fd..8442f51b5 100644 --- a/packages/renderers/svelte/package.json +++ b/packages/renderers/renderer-svelte/package.json @@ -1,5 +1,5 @@ { - "name": "@astro-renderer/svelte", + "name": "@astrojs/renderer-svelte", "version": "0.0.1", "type": "module", "exports": { diff --git a/packages/renderers/svelte/server.js b/packages/renderers/renderer-svelte/server.js index 8b42a12a1..8b42a12a1 100644 --- a/packages/renderers/svelte/server.js +++ b/packages/renderers/renderer-svelte/server.js diff --git a/packages/renderers/vue/client.js b/packages/renderers/renderer-vue/client.js index 296fb8555..296fb8555 100644 --- a/packages/renderers/vue/client.js +++ b/packages/renderers/renderer-vue/client.js diff --git a/packages/renderers/vue/index.js b/packages/renderers/renderer-vue/index.js index 09fb8793e..016beec6b 100644 --- a/packages/renderers/vue/index.js +++ b/packages/renderers/renderer-vue/index.js @@ -1,5 +1,5 @@ export default { - name: '@astro-renderer/vue', + name: '@astrojs/renderer-vue', snowpackPlugin: '@snowpack/plugin-vue', client: './client', server: './server', diff --git a/packages/renderers/vue/package.json b/packages/renderers/renderer-vue/package.json index e3d77dd62..a01084328 100644 --- a/packages/renderers/vue/package.json +++ b/packages/renderers/renderer-vue/package.json @@ -1,5 +1,5 @@ { - "name": "@astro-renderer/vue", + "name": "@astrojs/renderer-vue", "version": "0.0.1", "type": "module", "exports": { @@ -11,6 +11,6 @@ "dependencies": { "vue": "^3.0.10", "@vue/server-renderer": "^3.0.10", - "@snowpack/plugin-vue": "^2.5.0" + "@snowpack/plugin-vue": "^2.6.0" } } diff --git a/packages/renderers/vue/server.js b/packages/renderers/renderer-vue/server.js index 3d3159634..3d3159634 100644 --- a/packages/renderers/vue/server.js +++ b/packages/renderers/renderer-vue/server.js diff --git a/packages/renderers/vue/static-html.js b/packages/renderers/renderer-vue/static-html.js index e623f1049..e623f1049 100644 --- a/packages/renderers/vue/static-html.js +++ b/packages/renderers/renderer-vue/static-html.js |