michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix building of dynamic Svelte components (#115)

Browse source 
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.
This commit is contained in:
Matthew Phillips 2021-04-19 16:13:53 -04:00 committed by GitHub
parent b25d2cc93e
commit cc1a318c41
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 75 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/build.ts
View file

@ -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) {

4
src/build/bundle.ts
View file

@ -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}`);

13
test/astro-dynamic.test.js
View file

@ -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();

22
test/fixtures/astro-dynamic/astro/components/SvelteCounter.svelte vendored Normal file
View file

@ -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>

3
test/fixtures/astro-dynamic/astro/pages/index.astro vendored
View file

@ -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>

27
test/helpers.js
View file

@ -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);
});
}