Fix dynamic React components

examples/kitchen-sink/package.json

@@ -6,7 +6,6 @@
  "start": "nodemon -w ../../lib -x 'astro dev .'",
  "build": "astro build"
  },
- "dependencies": {},
  "devDependencies": {
  "astro": "file:../../",
  "nodemon": "^2.0.7"

snowpack-plugin.cjs

@@ -3,7 +3,7 @@ const { readFile } = require('fs').promises;
 // Snowpack plugins must be CommonJS :(
 const transformPromise = import('./lib/compiler/index.js');
 
-module.exports = function (snowpackConfig, { resolve, extensions, astroConfig } = {}) {
+module.exports = function (snowpackConfig, { resolvePackageUrl, extensions, astroConfig } = {}) {
  return {
  name: 'snowpack-astro',
  knownEntrypoints: [],
@@ -17,7 +17,7 @@ module.exports = function (snowpackConfig, { resolve, extensions, astroConfig }
  const contents = await readFile(filePath, 'utf-8');
  const compileOptions = {
  astroConfig,
- resolve,
+ resolvePackageUrl,
  extensions,
  };
  const result = await compileComponent(contents, { compileOptions, filename: filePath, projectRoot });

src/@types/compiler.ts

@@ -3,7 +3,7 @@ import type { AstroConfig, RuntimeMode, ValidExtensionPlugins } from './astro';
 
 export interface CompileOptions {
  logging: LogOptions;
- resolve: (p: string) => Promise<string>;
+ resolvePackageUrl: (p: string) => Promise<string>;
  astroConfig: AstroConfig;
  extensions?: Record<string, ValidExtensionPlugins>;
  mode: RuntimeMode;

src/build.ts

@@ -155,11 +155,11 @@ export async function build(astroConfig: AstroConfig): Promise<0 | 1> {
  const runtime = await createRuntime(astroConfig, { mode, logging: runtimeLogging });
  const { runtimeConfig } = runtime;
  const { backendSnowpack: snowpack } = runtimeConfig;
- const resolve = (pkgName: string) => snowpack.getUrlForPackage(pkgName);
+ const resolvePackageUrl = (pkgName: string) => snowpack.getUrlForPackage(pkgName);
 
  const imports = new Set<string>();
  const statics = new Set<string>();
- const collectImportsOptions = { astroConfig, logging, resolve, mode };
+ const collectImportsOptions = { astroConfig, logging, resolvePackageUrl, mode };
 
  const pages = await allPages(pageRoot);
 

src/build/bundle.ts

@@ -23,21 +23,21 @@ const { readFile } = fsPromises;
 type DynamicImportMap = Map<'vue' | 'react' | 'react-dom' | 'preact', string>;
 
 /** Add framework runtimes when needed */
-async function acquireDynamicComponentImports(plugins: Set<ValidExtensionPlugins>, resolve: (s: string) => Promise<string>): Promise<DynamicImportMap> {
+async function acquireDynamicComponentImports(plugins: Set<ValidExtensionPlugins>, resolvePackageUrl: (s: string) => Promise<string>): Promise<DynamicImportMap> {
  const importMap: DynamicImportMap = new Map();
  for (let plugin of plugins) {
  switch (plugin) {
  case 'vue': {
- importMap.set('vue', await resolve('vue'));
+ importMap.set('vue', await resolvePackageUrl('vue'));
  break;
  }
  case 'react': {
- importMap.set('react', await resolve('react'));
- importMap.set('react-dom', await resolve('react-dom'));
+ importMap.set('react', await resolvePackageUrl('react'));
+ importMap.set('react-dom', await resolvePackageUrl('react-dom'));
  break;
  }
  case 'preact': {
- importMap.set('preact', await resolve('preact'));
+ importMap.set('preact', await resolvePackageUrl('preact'));
  break;
  }
  }
@@ -64,13 +64,13 @@ const defaultExtensions: Readonly<Record<string, ValidExtensionPlugins>> = {
 
 interface CollectDynamic {
  astroConfig: AstroConfig;
- resolve: (s: string) => Promise<string>;
+ resolvePackageUrl: (s: string) => Promise<string>;
  logging: LogOptions;
  mode: RuntimeMode;
 }
 
 /** Gather necessary framework runtimes for dynamic components */
-export async function collectDynamicImports(filename: URL, { astroConfig, logging, resolve, mode }: CollectDynamic) {
+export async function collectDynamicImports(filename: URL, { astroConfig, logging, resolvePackageUrl, mode }: CollectDynamic) {
  const imports = new Set<string>();
 
  // Only astro files
@@ -98,7 +98,7 @@ export async function collectDynamicImports(filename: URL, { astroConfig, loggin
  fileID: '',
  compileOptions: {
  astroConfig,
- resolve,
+ resolvePackageUrl,
  logging,
  mode,
  },
@@ -135,7 +135,7 @@ export async function collectDynamicImports(filename: URL, { astroConfig, loggin
  };
  }
 
- const dynamic = await acquireDynamicComponentImports(plugins, resolve);
+ const dynamic = await acquireDynamicComponentImports(plugins, resolvePackageUrl);
 
  /** Add dynamic component runtimes to imports */
  function appendImports(rawName: string, importUrl: URL) {

src/compiler/codegen/index.ts

@@ -258,21 +258,21 @@ function compileExpressionSafe(raw: string): string {
 }
 
 /** Build dependency map of dynamic component runtime frameworks */
-async function acquireDynamicComponentImports(plugins: Set<ValidExtensionPlugins>, resolve: (s: string) => Promise<string>): Promise<DynamicImportMap> {
+async function acquireDynamicComponentImports(plugins: Set<ValidExtensionPlugins>, resolvePackageUrl: (s: string) => Promise<string>): Promise<DynamicImportMap> {
  const importMap: DynamicImportMap = new Map();
  for (let plugin of plugins) {
  switch (plugin) {
  case 'vue': {
- importMap.set('vue', await resolve('vue'));
+ importMap.set('vue', await resolvePackageUrl('vue'));
  break;
  }
  case 'react': {
- importMap.set('react', await resolve('react'));
- importMap.set('react-dom', await resolve('react-dom'));
+ importMap.set('react', await resolvePackageUrl('react'));
+ importMap.set('react-dom', await resolvePackageUrl('react-dom'));
  break;
  }
  case 'preact': {
- importMap.set('preact', await resolve('preact'));
+ importMap.set('preact', await resolvePackageUrl('preact'));
  break;
  }
  }
@@ -643,7 +643,7 @@ export async function codegen(ast: Ast, { compileOptions, filename }: CodeGenOpt
  };
 
  const { script, componentPlugins, createCollection } = compileModule(ast.module, state, compileOptions);
- state.dynamicImports = await acquireDynamicComponentImports(componentPlugins, compileOptions.resolve);
+ state.dynamicImports = await acquireDynamicComponentImports(componentPlugins, compileOptions.resolvePackageUrl);
 
  compileCss(ast.css, state);
 

src/runtime.ts

@@ -230,20 +230,27 @@ interface RuntimeOptions {
 }
 
 /** Create a new Snowpack instance to power Astro */
-async function createSnowpack(astroConfig: AstroConfig, env: Record<string, any>, mode: RuntimeMode) {
+interface CreateSnowpackOptions {
+ env: Record<string, any>;
+ mode: RuntimeMode;
+ resolvePackageUrl?: (pkgName: string) => Promise<string>;
+}
+
+async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackOptions) {
  const { projectRoot, astroRoot, extensions } = astroConfig;
+ const { env, mode, resolvePackageUrl } = options;
 
  const internalPath = new URL('./frontend/', import.meta.url);
 
  let snowpack: SnowpackDevServer;
  const astroPlugOptions: {
- resolve?: (s: string) => Promise<string>;
+ resolvePackageUrl?: (s: string) => Promise<string>;
  extensions?: Record<string, string>;
  astroConfig: AstroConfig;
  } = {
  astroConfig,
  extensions,
- resolve: async (pkgName: string) => snowpack.getUrlForPackage(pkgName),
+ resolvePackageUrl,
  };
 
  const mountOptions = {
@@ -258,7 +265,7 @@ async function createSnowpack(astroConfig: AstroConfig, env: Record<string, any>
  const snowpackConfig = await loadConfiguration({
  root: fileURLToPath(projectRoot),
  mount: mountOptions,
- mode: mode,
+ mode,
  plugins: [
  [fileURLToPath(new URL('../snowpack-plugin.cjs', import.meta.url)), astroPlugOptions],
  require.resolve('@snowpack/plugin-sass'),
@@ -293,20 +300,27 @@ async function createSnowpack(astroConfig: AstroConfig, env: Record<string, any>
 
 /** Core Astro runtime */
 export async function createRuntime(astroConfig: AstroConfig, { mode, logging }: RuntimeOptions): Promise<AstroRuntime> {
+ const resolvePackageUrl = async (pkgName: string) => frontendSnowpack.getUrlForPackage(pkgName);
+
  const { snowpack: backendSnowpack, snowpackRuntime: backendSnowpackRuntime, snowpackConfig: backendSnowpackConfig } = await createSnowpack(
  astroConfig,
  {
- astro: true,
- },
- mode
+ env: {
+ astro: true
+ },
+ mode,
+ resolvePackageUrl
+ }
  );
 
  const { snowpack: frontendSnowpack, snowpackRuntime: frontendSnowpackRuntime, snowpackConfig: frontendSnowpackConfig } = await createSnowpack(
  astroConfig,
  {
- astro: false,
- },
- mode
+ env: {
+ astro: false
+ },
+ mode
+ }
  );
 
  const runtimeConfig: RuntimeConfig = {

test/astro-dynamic.test.js

@@ -0,0 +1,30 @@
+import { suite } from 'uvu';
+import * as assert from 'uvu/assert';
+import { doc } from './test-utils.js';
+import { setup } from './helpers.js';
+
+const DynamicComponents = suite('Dynamic components tests');
+
+setup(DynamicComponents, './fixtures/astro-dynamic');
+
+DynamicComponents('Loads client-only packages', async ({ runtime }) => {
+ let result = await runtime.load('/');
+
+ assert.equal(result.statusCode, 200);
+
+ // Grab the react-dom import
+ const exp = /import\("(.+?)"\)/g;
+ let match, reactDomURL;
+ while(match = exp.exec(result.contents)) {
+ if(match[1].includes('react-dom')) {
+ reactDomURL = match[1];
+ }
+ }
+
+ assert.ok(reactDomURL, 'React dom is on the page');
+
+ result = await runtime.load(reactDomURL);
+ assert.equal(result.statusCode, 200, 'Can load react-dom');
+});
+
+DynamicComponents.run();

test/fixtures/astro-dynamic/astro/components/Counter.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function() {
+ return (
+ <div>
+ <button type="button">Increment -</button>
+ </div>
+ )
+}

test/fixtures/astro-dynamic/astro/pages/index.astro

@@ -0,0 +1,9 @@
+---
+import Counter from '../components/Counter.jsx';
+---
+<html>
+<head><title>Dynamic pages</title></head>
+<body>
+ <Counter:load />
+</body>
+</html>