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

Handle loading the Code package in the static build (#2337)

Browse source 
* Handle loading the Code package

Fixes #2329

* Use Code the normal way

* Adds a changeset

* Only resolve browser path if there is no common ancestor

* Update examples/fast-build/src/pages/index.astro

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
This commit is contained in:
Matthew Phillips 2022-01-07 16:28:27 -05:00 committed by GitHub
parent c3c054c912
commit 180dfcf2fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 87 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/silent-moles-provide.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix using the Code component in static build

8
examples/fast-build/src/pages/index.astro
View file

@ -3,6 +3,7 @@ import imgUrl from '../images/penguin.jpg';
import grayscaleUrl from '../images/random.jpg?grayscale=true'; import grayscaleUrl from '../images/random.jpg?grayscale=true';
import Greeting from '../components/Greeting.vue'; import Greeting from '../components/Greeting.vue';
import Counter from '../components/Counter.vue'; import Counter from '../components/Counter.vue';
import { Code } from 'astro/components';
--- ---
<html> <html>
@ -32,6 +33,13 @@ import Counter from '../components/Counter.vue';
<img src={grayscaleUrl} /> <img src={grayscaleUrl} />
</section> </section>
<section>
<h1>Astro components</h1>
<Code lang="css" code={`body {
color: salmon;
}`} />
</section>
<section> <section>
<h1>Hydrated component</h1> <h1>Hydrated component</h1>
<Counter client:idle /> <Counter client:idle />

2
packages/astro/package.json
View file

@ -73,6 +73,7 @@
"@web/parse5-utils": "^1.3.0", "@web/parse5-utils": "^1.3.0",
"astring": "^1.7.5", "astring": "^1.7.5",
"ci-info": "^3.2.0", "ci-info": "^3.2.0",
"common-ancestor-path": "^1.0.1",
"connect": "^3.7.0", "connect": "^3.7.0",
"eol": "^0.9.1", "eol": "^0.9.1",
"es-module-lexer": "^0.9.3", "es-module-lexer": "^0.9.3",
@ -115,6 +116,7 @@
"@astrojs/parser": "^0.22.0", "@astrojs/parser": "^0.22.0",
"@babel/types": "^7.15.6", "@babel/types": "^7.15.6",
"@types/chai": "^4.2.22", "@types/chai": "^4.2.22",
"@types/common-ancestor-path": "^1.0.0",
"@types/connect": "^3.4.35", "@types/connect": "^3.4.35",
"@types/mime": "^2.0.3", "@types/mime": "^2.0.3",
"@types/mocha": "^9.0.0", "@types/mocha": "^9.0.0",

24
packages/astro/src/core/build/static-build.ts
View file

@ -1,5 +1,5 @@
import type { OutputChunk, PreRenderedChunk, RollupOutput } from 'rollup'; import type { OutputChunk, PreRenderedChunk, RollupOutput } from 'rollup';
import type { Plugin as VitePlugin } from '../vite'; import type { Plugin as VitePlugin, UserConfig } from '../vite';
import type { AstroConfig, RouteCache, SSRElement } from '../../@types/astro'; import type { AstroConfig, RouteCache, SSRElement } from '../../@types/astro';
import type { AllPagesData } from './types'; import type { AllPagesData } from './types';
import type { LogOptions } from '../logger'; import type { LogOptions } from '../logger';
@ -13,7 +13,7 @@ import npath from 'path';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import glob from 'fast-glob'; import glob from 'fast-glob';
import vite from '../vite.js'; import vite from '../vite.js';
import { debug, info, error } from '../../core/logger.js'; import { debug, error } from '../../core/logger.js';
import { createBuildInternals } from '../../core/build/internal.js'; import { createBuildInternals } from '../../core/build/internal.js';
import { rollupPluginAstroBuildCSS } from '../../vite-plugin-build-css/index.js'; import { rollupPluginAstroBuildCSS } from '../../vite-plugin-build-css/index.js';
import { getParamsAndProps } from '../ssr/index.js'; import { getParamsAndProps } from '../ssr/index.js';
@ -112,6 +112,11 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp
async function clientBuild(opts: StaticBuildOptions, internals: BuildInternals, input: Set<string>) { async function clientBuild(opts: StaticBuildOptions, internals: BuildInternals, input: Set<string>) {
const { astroConfig, viteConfig } = opts; const { astroConfig, viteConfig } = opts;
// Nothing to do if there is no client-side JS.
if(!input.size) {
return null;
}
return await vite.build({ return await vite.build({
logLevel: 'error', logLevel: 'error',
mode: 'production', mode: 'production',
@ -258,6 +263,21 @@ export function vitePluginNewBuild(input: Set<string>, internals: BuildInternals
return { return {
name: '@astro/rollup-plugin-new-build', name: '@astro/rollup-plugin-new-build',
config(config, options) {
const extra: Partial<UserConfig> = {};
const noExternal = [], external = [];
if(options.command === 'build' && config.build?.ssr) {
noExternal.push('astro');
external.push('shiki');
}
// @ts-ignore
extra.ssr = {
external, noExternal
};
return extra;
},
configResolved(resolvedConfig) { configResolved(resolvedConfig) {
// Delete this hook because it causes assets not to be built // Delete this hook because it causes assets not to be built
const plugins = resolvedConfig.plugins as VitePlugin[]; const plugins = resolvedConfig.plugins as VitePlugin[];

5
packages/astro/src/vite-plugin-astro/index.ts
View file

@ -8,6 +8,7 @@ import { AstroDevServer } from '../core/dev/index.js';
import { getViteTransform, TransformHook } from './styles.js'; import { getViteTransform, TransformHook } from './styles.js';
import { parseAstroRequest } from './query.js'; import { parseAstroRequest } from './query.js';
import { cachedCompilation, invalidateCompilation } from './compile.js'; import { cachedCompilation, invalidateCompilation } from './compile.js';
import ancestor from 'common-ancestor-path';
const FRONTMATTER_PARSE_REGEXP = /^\-\-\-(.*)^\-\-\-/ms; const FRONTMATTER_PARSE_REGEXP = /^\-\-\-(.*)^\-\-\-/ms;
interface AstroPluginOptions { interface AstroPluginOptions {
@ -36,7 +37,9 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
let { filename, query } = parseAstroRequest(id); let { filename, query } = parseAstroRequest(id);
if (query.astro) { if (query.astro) {
if (query.type === 'style') { if (query.type === 'style') {
if (filename.startsWith('/') && !filename.startsWith(config.projectRoot.pathname)) { if(filename.startsWith('/@fs')) {
filename = filename.slice('/@fs'.length);
} else if (filename.startsWith('/') && !ancestor(filename, config.projectRoot.pathname)) {
filename = new URL('.' + filename, config.projectRoot).pathname; filename = new URL('.' + filename, config.projectRoot).pathname;
} }
const transformResult = await cachedCompilation(config, filename, null, viteTransform, opts); const transformResult = await cachedCompilation(config, filename, null, viteTransform, opts);

10
packages/astro/test/fixtures/static-build-code-component/src/pages/index.astro vendored Normal file
View file

@ -0,0 +1,10 @@
---
import {Code} from 'astro/components';
---
<html>
<head><title>Testing</title></head>
<body>
<h1>Test</h1>
<Code lang="js" code={`const foo = 'bar';`} />
</body>
</html>

25
packages/astro/test/static-build-code-component.test.js Normal file
View file

@ -0,0 +1,25 @@
import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
describe('Code component inside static build', () => {
let fixture;
before(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/static-build-code-component/',
renderers: [],
buildOptions: {
experimentalStaticBuild: true,
}
});
await fixture.build();
});
it('Is able to build successfully', async () => {
const html = await fixture.readFile('/index.html');
const $ = cheerio.load(html);
expect($('pre').length, 1, 'pre tag loaded');
});
});

10
yarn.lock
View file

@ -1732,6 +1732,11 @@
resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.0.tgz#23509ebc1fa32f1b4d50d6a66c4032d5b8eaabdc" resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.0.tgz#23509ebc1fa32f1b4d50d6a66c4032d5b8eaabdc"
integrity sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw== integrity sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw==
"@types/common-ancestor-path@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@types/common-ancestor-path/-/common-ancestor-path-1.0.0.tgz#4274e2f96cf193dc42c9af221c6abf3a53f77827"
integrity sha512-RuLE14U0ewtlGo81hOjQtzXl3RsVlTkbHqfpsbl9V1hIhAxF30L5ru1Q6C1x7L7d7zs434HbMBeFrdd7fWVQ2Q==
"@types/connect@^3.4.35": "@types/connect@^3.4.35":
version "3.4.35" version "3.4.35"
resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1" resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1"
@ -3146,6 +3151,11 @@ commander@^2.20.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
common-ancestor-path@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz#4f7d2d1394d91b7abdf51871c62f71eadb0182a7"
integrity sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==
common-tags@^1.8.0: common-tags@^1.8.0:
version "1.8.2" version "1.8.2"
resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6" resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"