withastro · natemoo-re · May 26, 2021 · May 24, 2021 · May 24, 2021 · May 24, 2021
diff --git a/.changeset/shaggy-countries-battle.md b/.changeset/shaggy-countries-battle.md
@@ -0,0 +1,18 @@
+---
+'astro': minor
+---
+
+**This is a breaking change**
+
+Updated the rendering pipeline for `astro` to truly support any framework.
+
+For the vast majority of use cases, `astro` should _just work_ out of the box. Astro now depends on `@astro-renderer/preact`, `@astro-renderer/react`, `@astro-renderer/svelte`, and `@astro-renderer/vue`, rather than these being built into the core library. This opens the door for anyone to contribute additional renderers for Astro to support their favorite framework, as well as the ability for users to control which renderers should be used.
+
+**Features**
+- Expose a pluggable interface for controlling server-side rendering and client-side hydration
+- Allows components from different frameworks to be nested within each other. 
+  > Note: `svelte` currently does support non-destructive hydration, so components from other frameworks cannot currently be nested inside of a Svelte component. See https://github.com/sveltejs/svelte/issues/4308.
+
+**Breaking Changes**
+- To improve compiler performance, improve framework support, and minimize JS payloads, any children passed to hydrated components are automatically wrapped with an `<astro-fragment>` element.
+
diff --git a/.changeset/smooth-toes-tan.md b/.changeset/smooth-toes-tan.md
@@ -0,0 +1,8 @@
+---
+'@astro-renderer/preact': minor
+'@astro-renderer/react': minor
+'@astro-renderer/svelte': minor
+'@astro-renderer/vue': minor
+---
+
+Initial release
diff --git a/examples/kitchen-sink/astro.config.mjs b/examples/kitchen-sink/astro.config.mjs
diff --git a/examples/kitchen-sink/src/components/A.astro b/examples/kitchen-sink/src/components/A.astro
@@ -0,0 +1,3 @@
+<div class="children">
+  <h1>Hello Astro (A)</h1>
+</div>
diff --git a/examples/kitchen-sink/src/components/B.astro b/examples/kitchen-sink/src/components/B.astro
@@ -0,0 +1,3 @@
+<div class="children">
+  <h1>Hello Astro (B)</h1>
+</div>
diff --git a/examples/kitchen-sink/src/components/PreactCounter.tsx b/examples/kitchen-sink/src/components/PreactCounter.tsx
@@ -2,7 +2,7 @@ import { h, Fragment } from 'preact';
 import { useState } from 'preact/hooks';
 
 /** a counter written in Preact */
-export default function PreactCounter({ children }) {
+export function PreactCounter({ children }) {
   const [count, setCount] = useState(0);
   const add = () => setCount((i) => i + 1);
   const subtract = () => setCount((i) => i - 1);

diff --git a/examples/kitchen-sink/src/components/ReactCounter.jsx b/examples/kitchen-sink/src/components/ReactCounter.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 /** a counter written in React */
-export default function ReactCounter({ children }) {
+export function Counter({ children }) {
   const [count, setCount] = useState(0);
   const add = () => setCount((i) => i + 1);
   const subtract = () => setCount((i) => i - 1);

diff --git a/examples/kitchen-sink/src/components/index.ts b/examples/kitchen-sink/src/components/index.ts
@@ -0,0 +1,2 @@
+export { default as A } from './A.astro';
+export { default as B } from './B.astro';
diff --git a/examples/kitchen-sink/src/pages/index.astro b/examples/kitchen-sink/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
-import ReactCounter from '../components/ReactCounter.jsx';
-import PreactCounter from '../components/PreactCounter.tsx';
+import { A, B as Renamed } from '../components';
+import * as react from '../components/ReactCounter.jsx';
+import { PreactCounter } from '../components/PreactCounter.tsx';
 import VueCounter from '../components/VueCounter.vue';
 import SvelteCounter from '../components/SvelteCounter.svelte';
 ---
@@ -30,22 +31,28 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
   </head>
   <body>
       <main>
-        <ReactCounter:load>
+
+        <react.Counter:visible>
             <h1>Hello React!</h1>
             <p>What's up?</p>
-        </ReactCounter:load>
+        </react.Counter:visible>
 
-        <PreactCounter:load>
-            <h1>Hello Preact!</h1>
-        </PreactCounter:load>
+        <PreactCounter:visible>
+          <h1>Hello Preact!</h1>
+        </PreactCounter:visible>
 
-        <VueCounter:load>
+        <VueCounter:visible>
             <h1>Hello Vue!</h1>
-        </VueCounter:load>
+        </VueCounter:visible>
 
-        <SvelteCounter:load>
+        <SvelteCounter:visible>
             <h1>Hello Svelte!</h1>
-        </SvelteCounter:load>
+        </SvelteCounter:visible>
+
+        <A />
+
+        <Renamed />
+
       </main>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -10,10 +10,12 @@
     "dev:vscode": "lerna run dev --scope astro-languageserver --scope astro-vscode --scope astro-parser --parallel --stream",
     "format": "prettier -w \"**/*.{js,jsx,ts,tsx,md,json}\"",
     "lint": "eslint \"packages/**/*.ts\"",
-    "test": "lerna run test --scope astro --scope prettier-plugin-astro --scope create-astro --stream"
+    "test": "lerna run test --scope astro --scope prettier-plugin-astro --scope create-astro --stream",
+    "test:core": "yarn workspace astro run test"
   },
   "workspaces": [
     "packages/*",
+    "packages/renderers/*",
     "examples/*",
     "tools/*",
     "scripts",

diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -31,24 +31,27 @@
     "test": "uvu test -i fixtures -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",
     "@babel/code-frame": "^7.12.13",
     "@babel/generator": "^7.13.9",
     "@babel/parser": "^7.13.15",
     "@babel/traverse": "^7.13.15",
     "@silvenon/remark-smartypants": "^1.0.0",
     "@snowpack/plugin-postcss": "^1.4.0",
     "@snowpack/plugin-sass": "^1.4.0",
-    "@snowpack/plugin-svelte": "^3.7.0",
-    "@snowpack/plugin-vue": "^2.5.0",
-    "@vue/server-renderer": "^3.0.10",
     "acorn": "^7.4.0",
+    "astring": "^1.7.4",
     "astro-parser": "0.11.0",
     "astro-prism": "0.0.2",
     "autoprefixer": "^10.2.5",
     "cheerio": "^1.0.0-rc.6",
     "del": "^6.0.0",
     "es-module-lexer": "^0.4.1",
     "esbuild": "^0.10.1",
+    "estree-util-value-to-estree": "^1.2.0",
     "estree-walker": "^3.0.0",
     "fast-xml-parser": "^3.19.0",
     "fdir": "^5.0.0",
@@ -68,11 +71,7 @@
     "picomatch": "^2.2.3",
     "postcss": "^8.2.15",
     "postcss-icss-keyframes": "^0.2.1",
-    "preact": "^10.5.13",
-    "preact-render-to-string": "^5.1.18",
     "prismjs": "^1.23.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
     "rehype-parse": "^7.0.1",
     "rehype-raw": "^5.1.0",
     "rehype-stringify": "^8.0.0",
@@ -88,10 +87,8 @@
     "snowpack": "^3.5.1",
     "source-map-support": "^0.5.19",
     "string-width": "^5.0.0",
-    "svelte": "^3.35.0",
     "tiny-glob": "^0.2.8",
     "unified": "^9.2.1",
-    "vue": "^3.0.10",
     "yargs-parser": "^20.2.7"
   },
   "devDependencies": {

diff --git a/packages/astro/snowpack-plugin.cjs b/packages/astro/snowpack-plugin.cjs
@@ -3,22 +3,53 @@ const { readFile } = require('fs').promises;
 // Snowpack plugins must be CommonJS :(
 const transformPromise = import('./dist/compiler/index.js');
 
-module.exports = function (snowpackConfig, { resolvePackageUrl, extensions, astroConfig } = {}) {
+module.exports = function (snowpackConfig, { resolvePackageUrl, renderers, astroConfig } = {}) {
   return {
     name: 'snowpack-astro',
-    knownEntrypoints: [],
     resolve: {
       input: ['.astro', '.md'],
       output: ['.js', '.css'],
     },
+    /** 
+      * This injects our renderer plugins to the Astro runtime (as a bit of a hack).
+      *
+      * In a world where Snowpack supports virtual files, this won't be necessary and
+      * should be refactored to a virtual file that is imported by the runtime.
+      *
+      * Take a look at `/src/frontend/__astro_component.ts`. It relies on both
+      * `__rendererSources` and `__renderers` being defined, so we're creating those here.
+      *
+      * The output of this is the following (or something very close to it):
+      *
+      * ```js
+      * import * as __renderer_0 from '/_snowpack/link/packages/renderers/vue/index.js';
+      * import * as __renderer_1 from '/_snowpack/link/packages/renderers/svelte/index.js';
+      * import * as __renderer_2 from '/_snowpack/link/packages/renderers/preact/index.js';
+      * import * as __renderer_3 from '/_snowpack/link/packages/renderers/react/index.js';
+      * let __rendererSources = ["/_snowpack/link/packages/renderers/vue/client.js", "/_snowpack/link/packages/renderers/svelte/client.js", "/_snowpack/link/packages/renderers/preact/client.js", "/_snowpack/link/packages/renderers/react/client.js"];
+      * let __renderers = [__renderer_0, __renderer_1, __renderer_2, __renderer_3];
+      * // the original file contents
+      * ```
+      */
+    async transform({contents, id, fileExt}) {
+      if (fileExt === '.js' && /__astro_component\.js/g.test(id)) {
+        const rendererServerPackages = await Promise.all(renderers.map(({ server }) => resolvePackageUrl(server)));
+        const rendererClientPackages = await Promise.all(renderers.map(({ client }) => resolvePackageUrl(client)));
+        const result = `${rendererServerPackages.map((pkg, i) => `import __renderer_${i} from "${pkg}";`).join('\n')}
+let __rendererSources = [${rendererClientPackages.map(pkg => `"${pkg}"`).join(', ')}];
+let __renderers = [${rendererServerPackages.map((_, i) => `__renderer_${i}`).join(', ')}];
+${contents}`;
+        return result;
+      }
+    },
     async load({ filePath }) {
       const { compileComponent } = await transformPromise;
       const projectRoot = snowpackConfig.root;
       const contents = await readFile(filePath, 'utf-8');
       const compileOptions = {
         astroConfig,
         resolvePackageUrl,
-        extensions,
+        renderers,
       };
       const result = await compileComponent(contents, { compileOptions, filename: filePath, projectRoot });
       const output = {

diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -1,3 +1,5 @@
+import type { ImportSpecifier, ImportDefaultSpecifier, ImportNamespaceSpecifier } from '@babel/types';
+
 export interface AstroConfigRaw {
   dist: string;
   projectRoot: string;
@@ -6,8 +8,6 @@ export interface AstroConfigRaw {
   jsx?: string;
 }
 
-export type ValidExtensionPlugins = 'astro' | 'react' | 'preact' | 'svelte' | 'vue';
-
 export interface AstroMarkdownOptions {
   /** Enable or disable footnotes syntax extension */
   footnotes: boolean;
@@ -19,7 +19,7 @@ export interface AstroConfig {
   projectRoot: URL;
   astroRoot: URL;
   public: URL;
-  extensions?: Record<string, ValidExtensionPlugins>;
+  renderers?: string[];
   /** Options for rendering markdown content */
   markdownOptions?: Partial<AstroMarkdownOptions>;
   /** Options specific to `astro build` */
@@ -171,3 +171,10 @@ export interface CollectionResult<T = any> {
   /** Matched parameters, if any */
   params: Params;
 }
+
+export interface ComponentInfo {
+  url: string;
+  importSpecifier: ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier;
+}
+
+export type Components = Map<string, ComponentInfo>;
diff --git a/packages/astro/src/@types/compiler.ts b/packages/astro/src/@types/compiler.ts
@@ -1,11 +1,10 @@
 import type { LogOptions } from '../logger';
-import type { AstroConfig, RuntimeMode, ValidExtensionPlugins } from './astro';
+import type { AstroConfig, RuntimeMode } from './astro';
 
 export interface CompileOptions {
   logging: LogOptions;
   resolvePackageUrl: (p: string) => Promise<string>;
   astroConfig: AstroConfig;
-  extensions?: Record<string, ValidExtensionPlugins>;
   mode: RuntimeMode;
   tailwindConfig?: string;
 }
diff --git a/packages/astro/src/build.ts b/packages/astro/src/build.ts
@@ -6,6 +6,7 @@ import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { performance } from 'perf_hooks';
+import eslexer from 'es-module-lexer';
 import cheerio from 'cheerio';
 import del from 'del';
 import { bold, green, yellow } from 'kleur/colors';
@@ -94,6 +95,8 @@ export async function build(astroConfig: AstroConfig): Promise<0 | 1> {
     // after pages are built, build depTree
     timer.deps = performance.now();
     const scanPromises: Promise<void>[] = [];
+
+    await eslexer.init;
     for (const id of Object.keys(buildState)) {
       if (buildState[id].contentType !== 'text/html') continue; // only scan HTML files
       const pageDeps = findDeps(buildState[id].contents as string, {
@@ -237,8 +240,16 @@ export function findDeps(html: string, { astroConfig, srcPath }: { astroConfig:
 
   $('script').each((i, el) => {
     const src = $(el).attr('src');
-    if (src && !isRemote(src)) {
+    if (src) {
+      if (isRemote(src)) return;
       pageDeps.js.add(getDistPath(src, { astroConfig, srcPath }));
+    } else {
+      const text = $(el).html();
+      if (!text) return;
+      const [imports] = eslexer.parse(text);
+      for (const spec of imports) {
+        if (spec.n) pageDeps.js.add(spec.n);
+      }
     }
   });