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

* Handle loading the Code package Fixes withastro#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 <[email protected]> Co-authored-by: Nate Moore <[email protected]>
harrytran998 · Jan 7, 2022 · 180dfcf · 180dfcf
1 parent c3c054c
commit 180dfcf
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 4 deletions.
diff --git a/.changeset/silent-moles-provide.md b/.changeset/silent-moles-provide.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix using the Code component in static build
diff --git a/examples/fast-build/src/pages/index.astro b/examples/fast-build/src/pages/index.astro
@@ -3,6 +3,7 @@ import imgUrl from '../images/penguin.jpg';
 import grayscaleUrl from '../images/random.jpg?grayscale=true';
 import Greeting from '../components/Greeting.vue';
 import Counter from '../components/Counter.vue';
+import { Code } from 'astro/components';
 ---
 
 <html>
@@ -32,9 +33,16 @@ import Counter from '../components/Counter.vue';
  <img src={grayscaleUrl} />
  </section>
 
+ <section>
+ <h1>Astro components</h1>
+ <Code lang="css" code={`body {
+ color: salmon;
+}`} />
+ </section>
+
  <section>
  <h1>Hydrated component</h1>
  <Counter client:idle />
  </section>
 </body>
-</html>
+</html>
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -73,6 +73,7 @@
  "@web/parse5-utils": "^1.3.0",
  "astring": "^1.7.5",
  "ci-info": "^3.2.0",
+ "common-ancestor-path": "^1.0.1",
  "connect": "^3.7.0",
  "eol": "^0.9.1",
  "es-module-lexer": "^0.9.3",
@@ -115,6 +116,7 @@
  "@astrojs/parser": "^0.22.0",
  "@babel/types": "^7.15.6",
  "@types/chai": "^4.2.22",
+ "@types/common-ancestor-path": "^1.0.0",
  "@types/connect": "^3.4.35",
  "@types/mime": "^2.0.3",
  "@types/mocha": "^9.0.0",

diff --git a/packages/astro/src/core/build/static-build.ts b/packages/astro/src/core/build/static-build.ts
@@ -1,5 +1,5 @@
 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 { AllPagesData } from './types';
 import type { LogOptions } from '../logger';
@@ -13,7 +13,7 @@ import npath from 'path';
 import { fileURLToPath } from 'url';
 import glob from 'fast-glob';
 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 { rollupPluginAstroBuildCSS } from '../../vite-plugin-build-css/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>) {
  const { astroConfig, viteConfig } = opts;
 
+ // Nothing to do if there is no client-side JS.
+ if(!input.size) {
+ return null;
+ }
+
  return await vite.build({
  logLevel: 'error',
  mode: 'production',
@@ -258,6 +263,21 @@ export function vitePluginNewBuild(input: Set<string>, internals: BuildInternals
  return {
  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) {
  // Delete this hook because it causes assets not to be built
  const plugins = resolvedConfig.plugins as VitePlugin[];

diff --git a/packages/astro/src/vite-plugin-astro/index.ts b/packages/astro/src/vite-plugin-astro/index.ts
@@ -8,6 +8,7 @@ import { AstroDevServer } from '../core/dev/index.js';
 import { getViteTransform, TransformHook } from './styles.js';
 import { parseAstroRequest } from './query.js';
 import { cachedCompilation, invalidateCompilation } from './compile.js';
+import ancestor from 'common-ancestor-path';
 
 const FRONTMATTER_PARSE_REGEXP = /^\-\-\-(.*)^\-\-\-/ms;
 interface AstroPluginOptions {
@@ -36,7 +37,9 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
  let { filename, query } = parseAstroRequest(id);
  if (query.astro) {
  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;
  }
  const transformResult = await cachedCompilation(config, filename, null, viteTransform, opts);

diff --git a/packages/astro/test/fixtures/static-build-code-component/src/pages/index.astro b/packages/astro/test/fixtures/static-build-code-component/src/pages/index.astro
@@ -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>
diff --git a/packages/astro/test/static-build-code-component.test.js b/packages/astro/test/static-build-code-component.test.js
@@ -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');
+ });
+});
diff --git a/yarn.lock b/yarn.lock
@@ -1732,6 +1732,11 @@
  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.0.tgz#23509ebc1fa32f1b4d50d6a66c4032d5b8eaabdc"
  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":
  version "3.4.35"
  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"
  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:
  version "1.8.2"
  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"