Fix building of dynamic Svelte components (#115)

Svelte component resolution wasn't handled correctly during the build. Note that in the future we need to consolidate a "framework" API, so this stuff is not sprinkled throughout the codebase.
withastro · Apr 19, 2021 · cc1a318 · cc1a318
1 parent b25d2cc
commit cc1a318
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 3 deletions.
diff --git a/src/build.ts b/src/build.ts
@@ -181,6 +181,7 @@ export async function build(astroConfig: AstroConfig): Promise<0 | 1> {
  );
  } catch (err) {
  error(logging, 'generate', err);
+ await runtime.shutdown();
  return 1;
  }
 
@@ -189,7 +190,13 @@ export async function build(astroConfig: AstroConfig): Promise<0 | 1> {
  }
 
  if (imports.size > 0) {
- await bundle(imports, { dist, runtime, astroConfig });
+ try {
+ await bundle(imports, { dist, runtime, astroConfig });
+ } catch(err) {
+ error(logging, 'generate', err);
+ await runtime.shutdown();
+ return 1;
+ }
  }
 
  for (let url of statics) {

diff --git a/src/build/bundle.ts b/src/build/bundle.ts
@@ -173,6 +173,10 @@ export async function collectDynamicImports(filename: URL, { astroConfig, loggin
  rel = rel.replace(/\.[^.]+$/, '.vue.js');
  break;
  }
+ case 'svelte': {
+ rel = rel.replace(/\.[^.]+$/, '.svelte.js');
+ break;
+ }
  }
 
  imports.add(`/_astro/${rel}`);

diff --git a/test/astro-dynamic.test.js b/test/astro-dynamic.test.js
@@ -1,11 +1,12 @@
 import { suite } from 'uvu';
 import * as assert from 'uvu/assert';
 import { doc } from './test-utils.js';
-import { setup } from './helpers.js';
+import { setup, setupBuild } from './helpers.js';
 
 const DynamicComponents = suite('Dynamic components tests');
 
 setup(DynamicComponents, './fixtures/astro-dynamic');
+setupBuild(DynamicComponents, './fixtures/astro-dynamic');
 
 DynamicComponents('Loads client-only packages', async ({ runtime }) => {
  let result = await runtime.load('/');
@@ -27,4 +28,14 @@ DynamicComponents('Loads client-only packages', async ({ runtime }) => {
  assert.equal(result.statusCode, 200, 'Can load react-dom');
 });
 
+DynamicComponents('Can be built', async ({ build }) => {
+ try {
+ await build();
+ assert.ok(true, 'Can build a project with svelte dynamic components');
+ } catch(err) {
+ console.log(err);
+ assert.ok(false, 'build threw');
+ }
+});
+
 DynamicComponents.run();
diff --git a/test/fixtures/astro-dynamic/astro/components/SvelteCounter.svelte b/test/fixtures/astro-dynamic/astro/components/SvelteCounter.svelte
@@ -0,0 +1,22 @@
+
+<script>
+ let children;
+ let count = 0;
+
+ function add() {
+ count += 1;
+ }
+
+ function subtract() {
+ count -= 1;
+ }
+</script>
+
+<div class="counter">
+ <button on:click={subtract}>-</button>
+ <pre>{ count }</pre>
+ <button on:click={add}>+</button>
+</div>
+<div class="children">
+ <slot />
+</div>
diff --git a/test/fixtures/astro-dynamic/astro/pages/index.astro b/test/fixtures/astro-dynamic/astro/pages/index.astro
@@ -1,9 +1,12 @@
 ---
 import Counter from '../components/Counter.jsx';
+import SvelteCounter from '../components/SvelteCounter.svelte';
 ---
 <html>
 <head><title>Dynamic pages</title></head>
 <body>
  <Counter:load />
+
+ <SvelteCounter:load />
 </body>
 </html>
diff --git a/test/helpers.js b/test/helpers.js
@@ -1,6 +1,7 @@
 import { fileURLToPath } from 'url';
-import { createRuntime } from '../lib/runtime.js';
+import { build as astroBuild } from '../lib/build.js';
 import { loadConfig } from '../lib/config.js';
+import { createRuntime } from '../lib/runtime.js';
 import * as assert from 'uvu/assert';
 /** setup fixtures for tests */
 export function setup(Suite, fixturePath) {
@@ -32,3 +33,27 @@ export function setup(Suite, fixturePath) {
  assert.equal(setupError, undefined);
  });
 }
+
+export function setupBuild(Suite, fixturePath) {
+ let build, setupError;
+
+ Suite.before(async (context) => {
+ const astroConfig = await loadConfig(fileURLToPath(new URL(fixturePath, import.meta.url)));
+
+ const logging = {
+ level: 'error',
+ dest: process.stderr,
+ };
+
+ build = (...args) => astroBuild(astroConfig, ...args);
+ context.build = build;
+ });
+
+ Suite.after(async () => {
+ // Shutdown i guess.
+ });
+
+ Suite('No errors creating a runtime', () => {
+ assert.equal(setupError, undefined);
+ });
+}