merge next into main (#2705)
* Unflag the static build (#2652) * Unflag the static build * Only set legacyBuild to false if experimentalSSR is true * Use legacy build when we have to * Put a few more tests into legacy mode * Last two * Make astro-basic use the legacy build * Adds a changeset * Mark the lit test as legacy * Update yarn lock * Update based on feedback * Add --legacy-build flag * Move astro-basic test to use static build (#2682) * Move some tests over to the static build (#2677) * Move some tests over to the static build * Fix assets tests * Fix the assets tests * Fix for the client:only components * Moves asset tests to the static build * Move postcss test over to static build * Bring back legacy build for astro-basic test * Move astro-basic test to use static build * Migrate more tests to the static build (#2693) * fix: disable HMR during build (#2684) * Migrate more tests to the static build * Only prepend links in non-legacy mode * Add the 0-css tests * Convert all CSS tests to the static build * Migrate Astro global tests * Remove .only * Fix static build tests * Migrate a few more * More tests * Move the lit test back to legacy * Increase the test timeout Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> * Improve `head` injection behavior (#2436) * feat: add renderHead util to server * feat: remove `layouts` from config, Vite plugin * fix: improve head injection during rendering * chore: update compiler * fix: do not escape links * chore: enter `pre` mode * Replace `send` with `sirv` (#2713) * remove send * Create thick-ravens-chew.md * I feel like I'm going to screw something up * working finally! * rewrite req.url * Add tiny bit of doc * Update .gitignore Co-authored-by: Evan Boehs <evan@boehs.org> * Move remaining tests to the static build (#2712) * Move lit test to the static build * Migrate astro-env plugin to work in the static build * Do not remove vite:define * Adds a changeset * Add a warning when passing the --experimental-static-build flag (#2718) * Add a warning when passing the --experimental-static-build flag * Disable the lint warning * [ci] release (next) (#2721) * [ci] release (next) * chore: update changeset Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Nate Moore <nate@skypack.dev> * 404 page (#2719) * Fix: build to 404.html in the static build * Adds a changeset * fix pnpm install missing peer deps * fix svelte version in workspace * fix lockfile * fix(webapi): add dev script * improve preview reliability (#2739) * improve preview reliability - fix broken tests * shamefully hoist to unblock * remove lit from test running * chore: update lockfile Co-authored-by: Matthew Phillips <matthew@skypack.dev> Co-authored-by: Evan Boehs <evan@boehs.org> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Fred K. Schott <fkschott@gmail.com>
This commit is contained in:
Nate Moore
GitHub
parent
c139829b10
commit
72c2c86e9d
130 changed files with 2439 additions and 2455 deletions
5
.changeset/five-stingrays-collect.md
Normal file
5
.changeset/five-stingrays-collect.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Fixes the static build to write to 404.html
|
||||
5
.changeset/fresh-ladybugs-think.md
Normal file
5
.changeset/fresh-ladybugs-think.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Fixes use of private .env variables with the static build
|
||||
19
.changeset/modern-elephants-burn.md
Normal file
19
.changeset/modern-elephants-burn.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
'astro': minor
|
||||
---
|
||||
|
||||
New default build strategy
|
||||
|
||||
This change marks the "static build" as the new default build strategy. If you are unfamiliar with this build strategy check out the [migration guide](https://docs.astro.build/en/migrate/#planned-deprecations) on how to change your code to be compatible with this new bulid strategy.
|
||||
|
||||
If you'd like to keep using the old build strategy, use the flag `--legacy-build` both in your `astro dev` and `astro build` scripts, for ex:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"build": "astro build --legacy-build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Note that the legacy build *is* deprecated and will be removed in a future version. You should only use this flag until you have the time to migration your code.
|
||||
7
.changeset/new-pianos-boil.md
Normal file
7
.changeset/new-pianos-boil.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
'astro': minor
|
||||
---
|
||||
|
||||
## Updated `<head>` and `<body>` behavior
|
||||
|
||||
Since `astro@0.21`, Astro placed certain restrictions on what files could use `<head>` or `<body>` tags. In `astro@0.24`, the restrictions have been lifted. Astro will be able to correctly handle `<head>` and `<body>` tags in _any_ component, not just those in `src/pages/` or `src/layouts/`.
|
||||
57
.changeset/pre.json
Normal file
57
.changeset/pre.json
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
{
|
||||
"mode": "pre",
|
||||
"tag": "next",
|
||||
"initialVersions": {
|
||||
"@example/blog": "0.0.1",
|
||||
"@example/blog-multiple-authors": "0.0.1",
|
||||
"@example/component": "0.0.1",
|
||||
"@example/my-component-demo": "0.0.1",
|
||||
"@example/my-component": "0.0.1",
|
||||
"@example/docs": "0.0.1",
|
||||
"@example/env-vars": "0.0.1",
|
||||
"@example/fast-build": "0.0.1",
|
||||
"@example/framework-alpine": "0.0.1",
|
||||
"@example/framework-lit": "0.0.1",
|
||||
"@example/framework-multiple": "0.0.1",
|
||||
"@example/framework-preact": "0.0.1",
|
||||
"@example/framework-react": "0.0.1",
|
||||
"@example/framework-solid": "0.0.1",
|
||||
"@example/framework-svelte": "0.0.1",
|
||||
"@example/framework-vue": "0.0.1",
|
||||
"@example/minimal": "0.0.1",
|
||||
"@example/non-html-pages": "0.0.1",
|
||||
"@example/portfolio": "0.0.1",
|
||||
"@example/portfolio-svelte": "0.0.1",
|
||||
"@example/ssr": "0.0.1",
|
||||
"@example/starter": "0.0.1",
|
||||
"@example/subpath": "0.0.1",
|
||||
"@example/with-markdown": "0.0.1",
|
||||
"@example/with-markdown-plugins": "0.0.2",
|
||||
"@example/with-markdown-shiki": "0.0.1",
|
||||
"@example/with-nanostores": "0.0.1",
|
||||
"@example/with-tailwindcss": "0.0.1",
|
||||
"@example/with-vite-plugin-pwa": "0.0.1",
|
||||
"astro": "0.23.3",
|
||||
"@astrojs/parser": "0.22.1",
|
||||
"@astrojs/prism": "0.4.0",
|
||||
"@astrojs/test-custom-element-renderer": "0.1.0",
|
||||
"@astrojs/test-static-build-pkg": "0.0.3",
|
||||
"create-astro": "0.7.1",
|
||||
"@astrojs/markdown-remark": "0.6.2",
|
||||
"@astrojs/renderer-lit": "0.4.0",
|
||||
"@astrojs/renderer-preact": "0.5.0",
|
||||
"@astrojs/renderer-react": "0.5.0",
|
||||
"@astrojs/renderer-solid": "0.4.0",
|
||||
"@astrojs/renderer-svelte": "0.4.0",
|
||||
"@astrojs/renderer-vue": "0.4.0",
|
||||
"astro-scripts": "0.0.1",
|
||||
"astro.build": "0.0.1",
|
||||
"docs": "0.0.7"
|
||||
},
|
||||
"changesets": [
|
||||
"fresh-ladybugs-think",
|
||||
"modern-elephants-burn",
|
||||
"new-pianos-boil",
|
||||
"thick-ravens-chew"
|
||||
]
|
||||
}
|
||||
5
.changeset/thick-ravens-chew.md
Normal file
5
.changeset/thick-ravens-chew.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
"astro": patch
|
||||
---
|
||||
|
||||
Replace `send` dependency with `sirv`
|
||||
32
.npmrc
32
.npmrc
|
|
@ -3,19 +3,19 @@ prefer-workspace-packages=true
|
|||
link-workspace-packages=true
|
||||
save-workspace-protocol=false # This prevents the examples to have the `workspace:` prefix
|
||||
|
||||
use-node-version=14.19.0
|
||||
|
||||
# Rather than shamefully hoisting everything, just make problematic packages public
|
||||
public-hoist-pattern[]=autoprefixer
|
||||
public-hoist-pattern[]=astro
|
||||
public-hoist-pattern[]=remark-*
|
||||
public-hoist-pattern[]=rehype-*
|
||||
public-hoist-pattern[]=react
|
||||
public-hoist-pattern[]=react-dom
|
||||
public-hoist-pattern[]=preact
|
||||
public-hoist-pattern[]=preact-render-to-string
|
||||
public-hoist-pattern[]=vue
|
||||
public-hoist-pattern[]=svelte
|
||||
public-hoist-pattern[]=solid-js
|
||||
public-hoist-pattern[]=lit
|
||||
public-hoist-pattern[]=@webcomponents/template-shadowroot
|
||||
shamefully-hoist=true
|
||||
# TODO: We would like to move to individual opt-in hoisting, but Astro was not originally
|
||||
# written with this in mind. In the future, it would be good to hoist individual packages only.
|
||||
# public-hoist-pattern[]=autoprefixer
|
||||
# public-hoist-pattern[]=astro
|
||||
# public-hoist-pattern[]=remark-*
|
||||
# public-hoist-pattern[]=rehype-*
|
||||
# public-hoist-pattern[]=react
|
||||
# public-hoist-pattern[]=react-dom
|
||||
# public-hoist-pattern[]=preact
|
||||
# public-hoist-pattern[]=preact-render-to-string
|
||||
# public-hoist-pattern[]=vue
|
||||
# public-hoist-pattern[]=svelte
|
||||
# public-hoist-pattern[]=solid-js
|
||||
# public-hoist-pattern[]=lit
|
||||
# public-hoist-pattern[]=@webcomponents/template-shadowroot
|
||||
|
|
|
|||
0
comp.txt
0
comp.txt
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-preact": "^0.5.0",
|
||||
"astro": "^0.23.7",
|
||||
"astro": "^0.24.0-next.0",
|
||||
"sass": "^1.49.8"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.23.7",
|
||||
"astro": "^0.24.0-next.0",
|
||||
"@astrojs/renderer-preact": "^0.5.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.23.7",
|
||||
"@example/my-component": "workspace:*"
|
||||
"@example/my-component": "workspace:*",
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,6 @@
|
|||
"serve": "astro --project-root demo preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,12 +9,16 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@algolia/client-search": "^4.12.0",
|
||||
"@docsearch/css": "^3.0.0",
|
||||
"@docsearch/react": "^1.0.0-alpha.28"
|
||||
"@docsearch/react": "^3.0.0",
|
||||
"@types/react": "^17.0.39",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-react": "^0.5.0",
|
||||
"@astrojs/renderer-preact": "^0.5.0",
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ export default function Search() {
|
|||
initialScrollY={window.scrollY}
|
||||
onClose={onClose}
|
||||
indexName={(CONFIG as any).ALGOLIA.indexName}
|
||||
appId={(CONFIG as any).ALGOLIA.appId}
|
||||
apiKey={(CONFIG as any).ALGOLIA.apiKey}
|
||||
transformItems={(items) => {
|
||||
return items.map((item) => {
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ export const KNOWN_LANGUAGES = {
|
|||
// See "Algolia" section of the README for more information.
|
||||
// export const ALGOLIA = {
|
||||
// indexName: 'XXXXXXXXXX',
|
||||
// appId: 'XXXXXXXXXX',
|
||||
// apiKey: 'XXXXXXXXXX',
|
||||
// }
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,6 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
"devDependencies": {
|
||||
"@astrojs/renderer-vue": "^0.4.0",
|
||||
"@astrojs/renderer-preact": "^0.5.0",
|
||||
"astro": "^0.23.7",
|
||||
"sass": "^1.49.8",
|
||||
"astro": "^0.24.0-next.0",
|
||||
"preact": "~10.6.5",
|
||||
"unocss": "^0.15.5",
|
||||
"vite-imagetools": "^4.0.1",
|
||||
"@astrojs/renderer-vue": "^0.4.0"
|
||||
"vite-imagetools": "^4.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,6 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-lit": "^0.4.0",
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
"@astrojs/renderer-preact": "^0.5.0",
|
||||
"@astrojs/renderer-react": "^0.5.0",
|
||||
"@astrojs/renderer-solid": "^0.4.0",
|
||||
"@astrojs/renderer-svelte": "^0.4.0",
|
||||
"@astrojs/renderer-svelte": "^0.5.1",
|
||||
"@astrojs/renderer-vue": "^0.4.0",
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-preact": "^0.5.0",
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-react": "^0.5.0",
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-solid": "^0.4.0",
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-svelte": "^0.4.0",
|
||||
"astro": "^0.23.7"
|
||||
"@astrojs/renderer-svelte": "^0.5.1",
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-vue": "^0.4.0",
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,6 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,6 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-svelte": "^0.4.0",
|
||||
"astro": "^0.23.7"
|
||||
"@astrojs/renderer-svelte": "^0.5.1",
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-preact": "^0.5.0",
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,9 @@
|
|||
"server": "node server/server.mjs"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-svelte": "^0.4.0",
|
||||
"astro": "^0.23.7",
|
||||
"@astrojs/renderer-svelte": "^0.5.1",
|
||||
"astro": "^0.24.0-next.0",
|
||||
"unocss": "^0.15.5",
|
||||
"vite-imagetools": "^4.0.1",
|
||||
"@astrojs/renderer-svelte": "^0.5.1"
|
||||
"vite-imagetools": "^4.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,6 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.23.7",
|
||||
"@astrojs/renderer-react": "^0.5.0"
|
||||
"@astrojs/renderer-react": "^0.5.0",
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/markdown-remark": "^0.6.1",
|
||||
"astro": "^0.23.7",
|
||||
"astro": "^0.24.0-next.0",
|
||||
"hast-util-select": "5.0.1",
|
||||
"rehype-autolink-headings": "^6.1.0",
|
||||
"rehype-slug": "^5.0.0",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/markdown-remark": "^0.6.1",
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
"devDependencies": {
|
||||
"@astrojs/renderer-preact": "^0.5.0",
|
||||
"@astrojs/renderer-react": "^0.5.0",
|
||||
"@astrojs/renderer-svelte": "^0.4.0",
|
||||
"@astrojs/renderer-svelte": "^0.5.1",
|
||||
"@astrojs/renderer-vue": "^0.4.0",
|
||||
"@astrojs/markdown-remark": "^0.6.1",
|
||||
"astro": "^0.23.7"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,18 +13,18 @@
|
|||
"@nanostores/react": "^0.1.5",
|
||||
"@nanostores/vue": "^0.4.1",
|
||||
"nanostores": "^0.5.7",
|
||||
"solid-nanostores": "0.0.6"
|
||||
"solid-nanostores": "0.0.6",
|
||||
"preact": "^10.6.5",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"vue": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-react": "^0.5.0",
|
||||
"@astrojs/renderer-svelte": "^0.4.0",
|
||||
"@astrojs/renderer-vue": "^0.4.0",
|
||||
"@astrojs/renderer-preact": "^0.5.0",
|
||||
"@astrojs/renderer-solid": "^0.4.0",
|
||||
"astro": "^0.23.7",
|
||||
"@astrojs/renderer-preact": "^0.5.0",
|
||||
"@astrojs/renderer-react": "^0.5.0",
|
||||
"@astrojs/renderer-svelte": "^0.5.1",
|
||||
"@astrojs/renderer-vue": "^0.4.0"
|
||||
"astro": "^0.24.0-next.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/renderer-preact": "^0.5.0",
|
||||
"astro": "^0.23.7",
|
||||
"postcss": "^8.3.8",
|
||||
"astro": "^0.24.0-next.0",
|
||||
"autoprefixer": "^10.4.0",
|
||||
"tailwindcss": "^3.0.5",
|
||||
"@astrojs/renderer-preact": "^0.5.0"
|
||||
"tailwindcss": "^3.0.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.23.7",
|
||||
"astro": "^0.24.0-next.0",
|
||||
"vite-plugin-pwa": "0.11.11",
|
||||
"workbox-window": "^6.5.0"
|
||||
}
|
||||
|
|
|
|||
23
package.json
23
package.json
|
|
@ -43,7 +43,8 @@
|
|||
"peerDependencyRules": {
|
||||
"ignoreMissing": [
|
||||
"@babel/core",
|
||||
"@babel/plugin-transform-react-jsx"
|
||||
"@babel/plugin-transform-react-jsx",
|
||||
"vite"
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
@ -51,20 +52,20 @@
|
|||
"@astrojs/webapi": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@changesets/changelog-github": "^0.4.2",
|
||||
"@changesets/cli": "^2.16.0",
|
||||
"@octokit/action": "^3.15.4",
|
||||
"@typescript-eslint/eslint-plugin": "^5.0.0",
|
||||
"@typescript-eslint/parser": "^5.0.0",
|
||||
"@changesets/changelog-github": "^0.4.3",
|
||||
"@changesets/cli": "^2.21.1",
|
||||
"@octokit/action": "^3.18.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.14.0",
|
||||
"@typescript-eslint/parser": "^5.14.0",
|
||||
"del": "^6.0.0",
|
||||
"esbuild": "0.13.7",
|
||||
"eslint": "^8.0.1",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint": "^8.10.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"execa": "^6.0.0",
|
||||
"prettier": "^2.4.1",
|
||||
"execa": "^6.1.0",
|
||||
"prettier": "^2.5.1",
|
||||
"pretty-bytes": "^6.0.0",
|
||||
"tiny-glob": "^0.2.8",
|
||||
"tiny-glob": "^0.2.9",
|
||||
"turbo": "^1.1.5",
|
||||
"typescript": "4.5.2"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,35 @@
|
|||
# astro
|
||||
|
||||
## 0.24.0-next.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#2705](https://github.com/withastro/astro/pull/2705) [`8ce63ee6`](https://github.com/withastro/astro/commit/8ce63ee658677ecabcb3068f00413b51e7db30ef) Thanks [@natemoo-re](https://github.com/natemoo-re)! - New default build strategy
|
||||
|
||||
This change marks the "static build" as the new default build strategy. If you are unfamiliar with this build strategy check out the [migration guide](https://docs.astro.build/en/migrate/#planned-deprecations) on how to change your code to be compatible with this new bulid strategy.
|
||||
|
||||
If you'd like to keep using the old build strategy, use the flag `--legacy-build` both in your `astro dev` and `astro build` scripts, for ex:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"build": "astro build --legacy-build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Note that the legacy build _is_ deprecated and will be removed in a future version. You should only use this flag until you have the time to migration your code.
|
||||
|
||||
- **Updated `<head>` and `<body>` behavior**
|
||||
|
||||
Since `astro@0.21`, Astro placed certain restrictions on what files could use `<head>` or `<body>` tags. In `astro@0.24`, the restrictions have been lifted. Astro will be able to correctly handle `<head>` and `<body>` tags in _any_ component, not just those in `src/pages/` or `src/layouts/`.
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#2705](https://github.com/withastro/astro/pull/2705) [`176d4082`](https://github.com/withastro/astro/commit/176d4082ca642e3d7b996529f1efed7048b4d04f) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Fixes use of private .env variables with the static build
|
||||
|
||||
* [#2705](https://github.com/withastro/astro/pull/2705) [`a483c044`](https://github.com/withastro/astro/commit/a483c0446ba222edf4258f4683cd918ea209b8f4) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Replace `send` dependency with `sirv`
|
||||
|
||||
## 0.23.7
|
||||
|
||||
### Patch Changes
|
||||
|
|
@ -96,12 +126,12 @@
|
|||
```typescript
|
||||
// src/pages/company.json.ts
|
||||
export async function get() {
|
||||
return {
|
||||
body: JSON.stringify({
|
||||
name: 'Astro Technology Company',
|
||||
url: 'https://astro.build/',
|
||||
}),
|
||||
};
|
||||
return {
|
||||
body: JSON.stringify({
|
||||
name: 'Astro Technology Company',
|
||||
url: 'https://astro.build/',
|
||||
}),
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -263,12 +293,12 @@
|
|||
```typescript
|
||||
// src/pages/company.json.ts
|
||||
export async function get() {
|
||||
return {
|
||||
body: JSON.stringify({
|
||||
name: 'Astro Technology Company',
|
||||
url: 'https://astro.build/',
|
||||
}),
|
||||
};
|
||||
return {
|
||||
body: JSON.stringify({
|
||||
name: 'Astro Technology Company',
|
||||
url: 'https://astro.build/',
|
||||
}),
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -1623,10 +1653,10 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
|
|||
|
||||
```js
|
||||
export default {
|
||||
markdownOptions: {
|
||||
remarkPlugins: ['remark-slug', ['remark-autolink-headings', { behavior: 'prepend' }]],
|
||||
rehypePlugins: ['rehype-slug', ['rehype-autolink-headings', { behavior: 'prepend' }]],
|
||||
},
|
||||
markdownOptions: {
|
||||
remarkPlugins: ['remark-slug', ['remark-autolink-headings', { behavior: 'prepend' }]],
|
||||
rehypePlugins: ['rehype-slug', ['rehype-autolink-headings', { behavior: 'prepend' }]],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
|
@ -1646,10 +1676,10 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
|
|||
|
||||
```js
|
||||
export default {
|
||||
name: '@matthewp/my-renderer',
|
||||
server: './server.js',
|
||||
client: './client.js',
|
||||
hydrationPolyfills: ['./my-polyfill.js'],
|
||||
name: '@matthewp/my-renderer',
|
||||
server: './server.js',
|
||||
client: './client.js',
|
||||
hydrationPolyfills: ['./my-polyfill.js'],
|
||||
};
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "astro",
|
||||
"version": "0.23.7",
|
||||
"version": "0.24.0-next.0",
|
||||
"description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
|
||||
"type": "module",
|
||||
"author": "withastro",
|
||||
|
|
@ -54,11 +54,11 @@
|
|||
"dev": "astro-scripts dev \"src/**/*.ts\"",
|
||||
"postbuild": "astro-scripts copy \"src/**/*.astro\"",
|
||||
"benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js",
|
||||
"test": "mocha --parallel --timeout 15000 --ignore **/lit-element.test.js && mocha **/lit-element.test.js",
|
||||
"test:match": "mocha --timeout 15000 -g"
|
||||
"test": "mocha --parallel --timeout 20000 --ignore **/lit-element.test.js && mocha --timeout 20000 **/lit-element.test.js",
|
||||
"test:match": "mocha --timeout 20000 -g"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/compiler": "^0.11.4",
|
||||
"@astrojs/compiler": "^0.12.0-next.8",
|
||||
"@astrojs/language-server": "^0.8.6",
|
||||
"@astrojs/markdown-remark": "^0.6.4",
|
||||
"@astrojs/prism": "0.4.0",
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
"resolve": "^1.20.0",
|
||||
"rollup": "^2.64.0",
|
||||
"semver": "^7.3.5",
|
||||
"send": "^0.17.1",
|
||||
"sirv": "^2.0.2",
|
||||
"serialize-javascript": "^6.0.0",
|
||||
"shiki": "^0.10.0",
|
||||
"shorthash": "^0.0.2",
|
||||
|
|
|
|||
|
|
@ -27,8 +27,10 @@ export interface CLIFlags {
|
|||
hostname?: string;
|
||||
port?: number;
|
||||
config?: string;
|
||||
/** @deprecated */
|
||||
experimentalStaticBuild?: boolean;
|
||||
experimentalSsr?: boolean;
|
||||
legacyBuild?: boolean;
|
||||
drafts?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -266,12 +268,19 @@ export interface AstroUserConfig {
|
|||
*/
|
||||
drafts?: boolean;
|
||||
/**
|
||||
* Experimental: Enables "static build mode" for faster builds.
|
||||
* Enables "legacy build mode" for compatibility with older Astro versions.
|
||||
* Default: false
|
||||
*/
|
||||
legacyBuild?: boolean;
|
||||
/**
|
||||
* @deprecated
|
||||
* Experimental: Enables "static build mode" for faster builds.
|
||||
* Default: true
|
||||
*/
|
||||
experimentalStaticBuild?: boolean;
|
||||
/**
|
||||
* Enable a build for SSR support.
|
||||
* Default: false
|
||||
*/
|
||||
experimentalSsr?: boolean;
|
||||
};
|
||||
|
|
@ -506,17 +515,6 @@ export type Params = Record<string, string | undefined>;
|
|||
|
||||
export type Props = Record<string, unknown>;
|
||||
|
||||
export interface RenderPageOptions {
|
||||
request: {
|
||||
params?: Params;
|
||||
url: URL;
|
||||
canonicalURL: URL;
|
||||
};
|
||||
children: any[];
|
||||
props: Props;
|
||||
css?: string[];
|
||||
}
|
||||
|
||||
type Body = string;
|
||||
|
||||
export interface EndpointOutput<Output extends Body = Body> {
|
||||
|
|
@ -634,7 +632,7 @@ export interface SSRElement {
|
|||
export interface SSRMetadata {
|
||||
renderers: Renderer[];
|
||||
pathname: string;
|
||||
experimentalStaticBuild: boolean;
|
||||
legacyBuild: boolean;
|
||||
}
|
||||
|
||||
export interface SSRResult {
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export class App {
|
|||
const scripts = createModuleScriptElementWithSrcSet(info.scripts, manifest.site);
|
||||
|
||||
return render({
|
||||
experimentalStaticBuild: true,
|
||||
legacyBuild: false,
|
||||
links,
|
||||
logging: defaultLogOptions,
|
||||
markdownRender: manifest.markdown.render,
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ class AstroBuilder {
|
|||
timer.buildStart = performance.now();
|
||||
|
||||
// Use the new faster static based build.
|
||||
if (this.config.buildOptions.experimentalStaticBuild) {
|
||||
if (!this.config.buildOptions.legacyBuild) {
|
||||
await staticBuild({
|
||||
allPages,
|
||||
astroConfig: this.config,
|
||||
|
|
|
|||
|
|
@ -38,9 +38,10 @@ export interface StaticBuildOptions {
|
|||
|
||||
const MAX_CONCURRENT_RENDERS = 10;
|
||||
|
||||
const STATUS_CODE_PAGES = new Set(['/404', '/500']);
|
||||
|
||||
function addPageName(pathname: string, opts: StaticBuildOptions): void {
|
||||
const pathrepl = opts.astroConfig.buildOptions.pageUrlFormat === 'directory' ? '/index.html' : pathname === '/' ? 'index.html' : '.html';
|
||||
opts.pageNames.push(pathname.replace(/\/?$/, pathrepl).replace(/^\//, ''));
|
||||
opts.pageNames.push(pathname.replace(/\/?$/, '/').replace(/^\//, ''));
|
||||
}
|
||||
|
||||
// Gives back a facadeId that is relative to the root.
|
||||
|
|
@ -131,6 +132,8 @@ export async function staticBuild(opts: StaticBuildOptions) {
|
|||
const topLevelImports = new Set([
|
||||
// Any component that gets hydrated
|
||||
...metadata.hydratedComponentPaths(),
|
||||
// Client-only components
|
||||
...metadata.clientOnlyComponentPaths(),
|
||||
// Any hydration directive like astro/client/idle.js
|
||||
...metadata.hydrationDirectiveSpecifiers(),
|
||||
// The client path for each renderer
|
||||
|
|
@ -182,6 +185,7 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp
|
|||
logLevel: 'error',
|
||||
mode: 'production',
|
||||
build: {
|
||||
...viteConfig.build,
|
||||
emptyOutDir: false,
|
||||
manifest: ssr,
|
||||
minify: false,
|
||||
|
|
@ -360,12 +364,12 @@ async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: G
|
|||
debug('build', `Generating: ${pathname}`);
|
||||
|
||||
const site = astroConfig.buildOptions.site;
|
||||
const links = createLinkStylesheetElementSet(linkIds, site);
|
||||
const links = createLinkStylesheetElementSet(linkIds.reverse(), site);
|
||||
const scripts = createModuleScriptElementWithSrcSet(hoistedId ? [hoistedId] : [], site);
|
||||
|
||||
try {
|
||||
const html = await render({
|
||||
experimentalStaticBuild: true,
|
||||
legacyBuild: false,
|
||||
links,
|
||||
logging,
|
||||
markdownRender: astroConfig.markdownOptions.render,
|
||||
|
|
@ -454,8 +458,7 @@ async function generateManifest(result: RollupOutput, opts: StaticBuildOptions,
|
|||
}
|
||||
|
||||
function getOutRoot(astroConfig: AstroConfig): URL {
|
||||
const rootPathname = appendForwardSlash(astroConfig.buildOptions.site ? new URL(astroConfig.buildOptions.site).pathname : '/');
|
||||
return new URL('.' + rootPathname, astroConfig.dist);
|
||||
return new URL('./', astroConfig.dist);
|
||||
}
|
||||
|
||||
function getServerRoot(astroConfig: AstroConfig): URL {
|
||||
|
|
@ -479,10 +482,16 @@ function getOutFolder(astroConfig: AstroConfig, pathname: string, routeType: Rou
|
|||
return new URL('.' + appendForwardSlash(npath.dirname(pathname)), outRoot);
|
||||
case 'page':
|
||||
switch (astroConfig.buildOptions.pageUrlFormat) {
|
||||
case 'directory':
|
||||
case 'directory': {
|
||||
if(STATUS_CODE_PAGES.has(pathname)) {
|
||||
return new URL('.' + appendForwardSlash(npath.dirname(pathname)), outRoot);
|
||||
}
|
||||
return new URL('.' + appendForwardSlash(pathname), outRoot);
|
||||
case 'file':
|
||||
}
|
||||
case 'file': {
|
||||
return new URL('.' + appendForwardSlash(npath.dirname(pathname)), outRoot);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -493,10 +502,17 @@ function getOutFile(astroConfig: AstroConfig, outFolder: URL, pathname: string,
|
|||
return new URL(npath.basename(pathname), outFolder);
|
||||
case 'page':
|
||||
switch (astroConfig.buildOptions.pageUrlFormat) {
|
||||
case 'directory':
|
||||
case 'directory': {
|
||||
if(STATUS_CODE_PAGES.has(pathname)) {
|
||||
const baseName = npath.basename(pathname);
|
||||
return new URL('./' + (baseName || 'index') + '.html', outFolder);
|
||||
}
|
||||
return new URL('./index.html', outFolder);
|
||||
case 'file':
|
||||
return new URL('./' + npath.basename(pathname) + '.html', outFolder);
|
||||
}
|
||||
case 'file': {
|
||||
const baseName = npath.basename(pathname);
|
||||
return new URL('./' + (baseName || 'index') + '.html', outFolder);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,11 +26,6 @@ export const AstroConfigSchema = z.object({
|
|||
.optional()
|
||||
.default('./src/pages')
|
||||
.transform((val) => new URL(val)),
|
||||
layouts: z
|
||||
.string()
|
||||
.optional()
|
||||
.default('./src/layouts')
|
||||
.transform((val) => new URL(val)),
|
||||
public: z
|
||||
.string()
|
||||
.optional()
|
||||
|
|
@ -60,7 +55,8 @@ export const AstroConfigSchema = z.object({
|
|||
.union([z.literal('file'), z.literal('directory')])
|
||||
.optional()
|
||||
.default('directory'),
|
||||
experimentalStaticBuild: z.boolean().optional().default(false),
|
||||
legacyBuild: z.boolean().optional().default(false),
|
||||
experimentalStaticBuild: z.boolean().optional().default(true),
|
||||
experimentalSsr: z.boolean().optional().default(false),
|
||||
drafts: z.boolean().optional().default(false),
|
||||
})
|
||||
|
|
@ -98,10 +94,6 @@ export async function validateConfig(userConfig: any, root: string): Promise<Ast
|
|||
.string()
|
||||
.default('./src/pages')
|
||||
.transform((val) => new URL(addTrailingSlash(val), fileProtocolRoot)),
|
||||
layouts: z
|
||||
.string()
|
||||
.default('./src/layouts')
|
||||
.transform((val) => new URL(addTrailingSlash(val), fileProtocolRoot)),
|
||||
public: z
|
||||
.string()
|
||||
.default('./public')
|
||||
|
|
@ -121,6 +113,11 @@ function addTrailingSlash(str: string): string {
|
|||
|
||||
/** Convert the generic "yargs" flag object into our own, custom TypeScript object. */
|
||||
function resolveFlags(flags: Partial<Flags>): CLIFlags {
|
||||
if(flags.experimentalStaticBuild) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn(`Passing --experimental-static-build is no longer necessary and is now the default. The flag will be removed in a future version of Astro.`)
|
||||
}
|
||||
|
||||
return {
|
||||
projectRoot: typeof flags.projectRoot === 'string' ? flags.projectRoot : undefined,
|
||||
site: typeof flags.site === 'string' ? flags.site : undefined,
|
||||
|
|
@ -128,7 +125,8 @@ function resolveFlags(flags: Partial<Flags>): CLIFlags {
|
|||
port: typeof flags.port === 'number' ? flags.port : undefined,
|
||||
config: typeof flags.config === 'string' ? flags.config : undefined,
|
||||
hostname: typeof flags.hostname === 'string' ? flags.hostname : undefined,
|
||||
experimentalStaticBuild: typeof flags.experimentalStaticBuild === 'boolean' ? flags.experimentalStaticBuild : false,
|
||||
legacyBuild: typeof flags.legacyBuild === 'boolean' ? flags.legacyBuild : false,
|
||||
experimentalStaticBuild: typeof flags.experimentalStaticBuild === 'boolean' ? flags.experimentalStaticBuild : true,
|
||||
experimentalSsr: typeof flags.experimentalSsr === 'boolean' ? flags.experimentalSsr : false,
|
||||
drafts: typeof flags.drafts === 'boolean' ? flags.drafts : false,
|
||||
};
|
||||
|
|
@ -147,6 +145,7 @@ function mergeCLIFlags(astroConfig: AstroUserConfig, flags: CLIFlags) {
|
|||
astroConfig.buildOptions.experimentalSsr = flags.experimentalSsr;
|
||||
if (flags.experimentalSsr) {
|
||||
astroConfig.buildOptions.experimentalStaticBuild = true;
|
||||
astroConfig.buildOptions.legacyBuild = false;
|
||||
}
|
||||
}
|
||||
if (typeof flags.drafts === 'boolean') astroConfig.buildOptions.drafts = flags.drafts;
|
||||
|
|
|
|||
|
|
@ -2,17 +2,15 @@ import type { AstroConfig } from '../../@types/astro';
|
|||
import type { LogOptions } from '../logger';
|
||||
import type { Stats } from 'fs';
|
||||
import type { AddressInfo } from 'net';
|
||||
|
||||
import http from 'http';
|
||||
import sirv from 'sirv';
|
||||
import { performance } from 'perf_hooks';
|
||||
import send from 'send';
|
||||
import { fileURLToPath } from 'url';
|
||||
import fs from 'fs';
|
||||
import * as msg from '../messages.js';
|
||||
import { error, info } from '../logger.js';
|
||||
import { subpathNotUsedTemplate, notFoundTemplate, default as template } from '../../template/4xx.js';
|
||||
import { appendForwardSlash, trimSlashes } from '../path.js';
|
||||
import { getLocalAddress } from '../dev/util.js';
|
||||
import { subpathNotUsedTemplate, notFoundTemplate } from '../../template/4xx.js';
|
||||
|
||||
interface PreviewOptions {
|
||||
logging: LogOptions;
|
||||
|
|
@ -25,28 +23,19 @@ export interface PreviewServer {
|
|||
stop(): Promise<void>;
|
||||
}
|
||||
|
||||
const HAS_FILE_EXTENSION_REGEXP = /^.*\.[^\\]+$/;
|
||||
|
||||
/** The primary dev action */
|
||||
export default async function preview(config: AstroConfig, { logging }: PreviewOptions): Promise<PreviewServer> {
|
||||
const startServerTime = performance.now();
|
||||
const pageUrlFormat = config.buildOptions.pageUrlFormat;
|
||||
const trailingSlash = config.devOptions.trailingSlash;
|
||||
const forceTrailingSlash = trailingSlash === 'always';
|
||||
const blockTrailingSlash = trailingSlash === 'never';
|
||||
|
||||
/** Default file served from a directory. */
|
||||
const defaultFile = 'index.html';
|
||||
|
||||
const defaultOrigin = 'http://localhost';
|
||||
|
||||
const sendOptions = {
|
||||
extensions: pageUrlFormat === 'file' ? ['html'] : false,
|
||||
index: false,
|
||||
root: fileURLToPath(config.dist),
|
||||
};
|
||||
|
||||
const trailingSlash = config.devOptions.trailingSlash
|
||||
/** Base request URL. */
|
||||
let baseURL = new URL(config.buildOptions.site || '/', defaultOrigin);
|
||||
|
||||
const staticFileServer = sirv(fileURLToPath(config.dist), {
|
||||
etag: true,
|
||||
maxAge: 0,
|
||||
})
|
||||
// Create the preview server, send static files out of the `dist/` directory.
|
||||
const server = http.createServer((req, res) => {
|
||||
const requestURL = new URL(req.url as string, defaultOrigin);
|
||||
|
|
@ -64,55 +53,25 @@ export default async function preview(config: AstroConfig, { logging }: PreviewO
|
|||
const isRoot = pathname === '/';
|
||||
const hasTrailingSlash = isRoot || pathname.endsWith('/');
|
||||
|
||||
let tryTrailingSlash = true;
|
||||
let tryHtmlExtension = true;
|
||||
|
||||
let url: URL;
|
||||
|
||||
const onErr = (message: string) => {
|
||||
function sendError(message: string) {
|
||||
res.statusCode = 404;
|
||||
res.end(notFoundTemplate(pathname, message));
|
||||
};
|
||||
|
||||
const onStat = (err: NodeJS.ErrnoException | null, stat: Stats) => {
|
||||
switch (true) {
|
||||
// retry nonexistent paths without an html extension
|
||||
case err && tryHtmlExtension && hasTrailingSlash && !blockTrailingSlash:
|
||||
case err && tryHtmlExtension && !hasTrailingSlash && !forceTrailingSlash && !pathname.endsWith('.html'):
|
||||
tryHtmlExtension = false;
|
||||
return fs.stat((url = new URL(url.pathname + '.html', url)), onStat);
|
||||
|
||||
// 404 on nonexistent paths (that are yet handled)
|
||||
case err !== null:
|
||||
return onErr('Path not found');
|
||||
|
||||
// 404 on directories when a trailing slash is present but blocked
|
||||
case stat.isDirectory() && hasTrailingSlash && blockTrailingSlash && !isRoot:
|
||||
return onErr('Prohibited trailing slash');
|
||||
|
||||
// 404 on directories when a trailing slash is missing but forced
|
||||
case stat.isDirectory() && !hasTrailingSlash && forceTrailingSlash && !isRoot:
|
||||
return onErr('Required trailing slash');
|
||||
|
||||
// retry on directories when a default file is missing but allowed (that are yet handled)
|
||||
case stat.isDirectory() && tryTrailingSlash:
|
||||
tryTrailingSlash = false;
|
||||
return fs.stat((url = new URL(url.pathname + (url.pathname.endsWith('/') ? defaultFile : '/' + defaultFile), url)), onStat);
|
||||
|
||||
// 404 on existent directories (that are yet handled)
|
||||
case stat.isDirectory():
|
||||
return onErr('Path not found');
|
||||
|
||||
// handle existent paths
|
||||
default:
|
||||
send(req, fileURLToPath(url), {
|
||||
extensions: false,
|
||||
index: false,
|
||||
}).pipe(res);
|
||||
switch (true) {
|
||||
case hasTrailingSlash && trailingSlash == 'never' && !isRoot:
|
||||
sendError('Not Found (devOptions.trailingSlash is set to "never")');
|
||||
return;
|
||||
case !hasTrailingSlash && trailingSlash == 'always' && !isRoot && !HAS_FILE_EXTENSION_REGEXP.test(pathname):
|
||||
sendError('Not Found (devOptions.trailingSlash is set to "always")');
|
||||
return;
|
||||
default: {
|
||||
// HACK: rewrite req.url so that sirv finds the file
|
||||
req.url = '/' + req.url?.replace(baseURL.pathname, '')
|
||||
staticFileServer(req, res, () => sendError('Not Found'));
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
fs.stat((url = new URL(trimSlashes(pathname), config.dist)), onStat);
|
||||
}
|
||||
});
|
||||
|
||||
let { hostname, port } = config.devOptions;
|
||||
|
|
@ -165,7 +124,9 @@ export default async function preview(config: AstroConfig, { logging }: PreviewO
|
|||
port,
|
||||
server: httpServer!,
|
||||
stop: async () => {
|
||||
httpServer.close();
|
||||
await new Promise((resolve, reject) => {
|
||||
httpServer.close((err) => err ? reject(err) : resolve(undefined));
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import type { ComponentInstance, EndpointHandler, MarkdownRenderOptions, Params, Props, Renderer, RouteData, SSRElement } from '../../@types/astro';
|
||||
import type { LogOptions } from '../logger.js';
|
||||
|
||||
import { renderEndpoint, renderPage } from '../../runtime/server/index.js';
|
||||
import { renderEndpoint, renderHead, renderToString } from '../../runtime/server/index.js';
|
||||
import { getParams } from '../routing/index.js';
|
||||
import { createResult } from './result.js';
|
||||
import { findPathItemByKey, RouteCache, callGetStaticPaths } from './route-cache.js';
|
||||
|
|
@ -50,7 +50,7 @@ async function getParamsAndProps(opts: GetParamsAndPropsOptions): Promise<[Param
|
|||
}
|
||||
|
||||
interface RenderOptions {
|
||||
experimentalStaticBuild: boolean;
|
||||
legacyBuild: boolean;
|
||||
logging: LogOptions;
|
||||
links: Set<SSRElement>;
|
||||
markdownRender: MarkdownRenderOptions;
|
||||
|
|
@ -66,7 +66,7 @@ interface RenderOptions {
|
|||
}
|
||||
|
||||
export async function render(opts: RenderOptions): Promise<string> {
|
||||
const { experimentalStaticBuild, links, logging, origin, markdownRender, mod, pathname, scripts, renderers, resolve, route, routeCache, site } = opts;
|
||||
const { legacyBuild, links, logging, origin, markdownRender, mod, pathname, scripts, renderers, resolve, route, routeCache, site } = opts;
|
||||
|
||||
const [params, pageProps] = await getParamsAndProps({
|
||||
logging,
|
||||
|
|
@ -87,7 +87,7 @@ export async function render(opts: RenderOptions): Promise<string> {
|
|||
if (!Component.isAstroComponentFactory) throw new Error(`Unable to SSR non-Astro component (${route?.component})`);
|
||||
|
||||
const result = createResult({
|
||||
experimentalStaticBuild,
|
||||
legacyBuild,
|
||||
links,
|
||||
logging,
|
||||
markdownRender,
|
||||
|
|
@ -100,10 +100,17 @@ export async function render(opts: RenderOptions): Promise<string> {
|
|||
scripts,
|
||||
});
|
||||
|
||||
let html = await renderPage(result, Component, pageProps, null);
|
||||
let html = await renderToString(result, Component, pageProps, null);
|
||||
|
||||
// handle final head injection if it hasn't happened already
|
||||
if (html.indexOf("<!--astro:head:injected-->") == -1) {
|
||||
html = await renderHead(result) + html;
|
||||
}
|
||||
// cleanup internal state flags
|
||||
html = html.replace("<!--astro:head:injected-->", '');
|
||||
|
||||
// inject <!doctype html> if missing (TODO: is a more robust check needed for comments, etc.?)
|
||||
if (experimentalStaticBuild && !/<!doctype html/i.test(html)) {
|
||||
if (!legacyBuild && !/<!doctype html/i.test(html)) {
|
||||
html = '<!DOCTYPE html>\n' + html;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import type * as vite from 'vite';
|
||||
import type { AstroConfig, ComponentInstance, Renderer, RouteData, RuntimeMode } from '../../../@types/astro';
|
||||
import type { AstroConfig, ComponentInstance, Renderer, RouteData, RuntimeMode, SSRElement } from '../../../@types/astro';
|
||||
import { LogOptions } from '../../logger.js';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { getStylesForURL } from './css.js';
|
||||
|
|
@ -48,14 +48,15 @@ export async function preload({ astroConfig, filePath, viteServer }: SSROptions)
|
|||
/** use Vite to SSR */
|
||||
export async function render(renderers: Renderer[], mod: ComponentInstance, ssrOpts: SSROptions): Promise<string> {
|
||||
const { astroConfig, filePath, logging, mode, origin, pathname, route, routeCache, viteServer } = ssrOpts;
|
||||
const legacy = astroConfig.buildOptions.legacyBuild;
|
||||
|
||||
// Add hoisted script tags
|
||||
const scripts = createModuleScriptElementWithSrcSet(
|
||||
astroConfig.buildOptions.experimentalStaticBuild && mod.hasOwnProperty('$$metadata') ? Array.from(mod.$$metadata.hoistedScriptPaths()) : []
|
||||
!legacy && mod.hasOwnProperty('$$metadata') ? Array.from(mod.$$metadata.hoistedScriptPaths()) : []
|
||||
);
|
||||
|
||||
// Inject HMR scripts
|
||||
if (mod.hasOwnProperty('$$metadata') && mode === 'development' && astroConfig.buildOptions.experimentalStaticBuild) {
|
||||
if (mod.hasOwnProperty('$$metadata') && mode === 'development' && !legacy) {
|
||||
scripts.add({
|
||||
props: { type: 'module', src: '/@vite/client' },
|
||||
children: '',
|
||||
|
|
@ -66,9 +67,31 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
|
|||
});
|
||||
}
|
||||
|
||||
// Pass framework CSS in as link tags to be appended to the page.
|
||||
let links = new Set<SSRElement>();
|
||||
if(!legacy) {
|
||||
[...getStylesForURL(filePath, viteServer)].forEach((href) => {
|
||||
if (mode === 'development' && svelteStylesRE.test(href)) {
|
||||
scripts.add({
|
||||
props: { type: 'module', src: href },
|
||||
children: '',
|
||||
});
|
||||
} else {
|
||||
links.add({
|
||||
props: {
|
||||
rel: 'stylesheet',
|
||||
href,
|
||||
'data-astro-injected': true,
|
||||
},
|
||||
children: '',
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let content = await coreRender({
|
||||
experimentalStaticBuild: astroConfig.buildOptions.experimentalStaticBuild,
|
||||
links: new Set(),
|
||||
legacyBuild: astroConfig.buildOptions.legacyBuild,
|
||||
links,
|
||||
logging,
|
||||
markdownRender: astroConfig.markdownOptions.render,
|
||||
mod,
|
||||
|
|
@ -80,7 +103,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
|
|||
// The legacy build needs these to remain unresolved so that vite HTML
|
||||
// Can do the resolution. Without this condition the build output will be
|
||||
// broken in the legacy build. This can be removed once the legacy build is removed.
|
||||
if (astroConfig.buildOptions.experimentalStaticBuild) {
|
||||
if (!astroConfig.buildOptions.legacyBuild) {
|
||||
const [, resolvedPath] = await viteServer.moduleGraph.resolveUrl(s);
|
||||
return resolvedPath;
|
||||
} else {
|
||||
|
|
@ -101,7 +124,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
|
|||
const tags: vite.HtmlTagDescriptor[] = [];
|
||||
|
||||
// dev only: inject Astro HMR client
|
||||
if (mode === 'development' && !astroConfig.buildOptions.experimentalStaticBuild) {
|
||||
if (mode === 'development' && legacy) {
|
||||
tags.push({
|
||||
tag: 'script',
|
||||
attrs: { type: 'module' },
|
||||
|
|
@ -113,31 +136,34 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
|
|||
}
|
||||
|
||||
// inject CSS
|
||||
[...getStylesForURL(filePath, viteServer)].forEach((href) => {
|
||||
if (mode === 'development' && svelteStylesRE.test(href)) {
|
||||
tags.push({
|
||||
tag: 'script',
|
||||
attrs: { type: 'module', src: href },
|
||||
injectTo: 'head',
|
||||
});
|
||||
} else {
|
||||
tags.push({
|
||||
tag: 'link',
|
||||
attrs: {
|
||||
rel: 'stylesheet',
|
||||
href,
|
||||
'data-astro-injected': true,
|
||||
},
|
||||
injectTo: 'head',
|
||||
});
|
||||
}
|
||||
});
|
||||
if(legacy) {
|
||||
[...getStylesForURL(filePath, viteServer)].forEach((href) => {
|
||||
if (mode === 'development' && svelteStylesRE.test(href)) {
|
||||
tags.push({
|
||||
tag: 'script',
|
||||
attrs: { type: 'module', src: href },
|
||||
injectTo: 'head',
|
||||
});
|
||||
} else {
|
||||
tags.push({
|
||||
tag: 'link',
|
||||
attrs: {
|
||||
rel: 'stylesheet',
|
||||
href,
|
||||
'data-astro-injected': true,
|
||||
},
|
||||
injectTo: 'head',
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// add injected tags
|
||||
content = injectTags(content, tags);
|
||||
|
||||
// run transformIndexHtml() in dev to run Vite dev transformations
|
||||
if (mode === 'development' && !astroConfig.buildOptions.experimentalStaticBuild) {
|
||||
if (mode === 'development' && astroConfig.buildOptions.legacyBuild) {
|
||||
const relativeURL = filePath.href.replace(astroConfig.projectRoot.href, '/');
|
||||
content = await viteServer.transformIndexHtml(relativeURL, content, pathname);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { renderSlot } from '../../runtime/server/index.js';
|
|||
import { warn, LogOptions } from '../logger.js';
|
||||
|
||||
export interface CreateResultArgs {
|
||||
experimentalStaticBuild: boolean;
|
||||
legacyBuild: boolean;
|
||||
logging: LogOptions;
|
||||
origin: string;
|
||||
markdownRender: MarkdownRenderOptions;
|
||||
|
|
@ -22,7 +22,7 @@ export interface CreateResultArgs {
|
|||
}
|
||||
|
||||
export function createResult(args: CreateResultArgs): SSRResult {
|
||||
const { experimentalStaticBuild, origin, markdownRender, params, pathname, renderers, resolve, site: buildOptionsSite } = args;
|
||||
const { legacyBuild, origin, markdownRender, params, pathname, renderers, resolve, site: buildOptionsSite } = args;
|
||||
|
||||
// Create the result object that will be passed into the render function.
|
||||
// This object starts here as an empty shell (not yet the result) but then
|
||||
|
|
@ -45,7 +45,7 @@ export function createResult(args: CreateResultArgs): SSRResult {
|
|||
url,
|
||||
},
|
||||
resolve(path: string) {
|
||||
if (experimentalStaticBuild) {
|
||||
if (!legacyBuild) {
|
||||
let extra = `This can be replaced with a dynamic import like so: await import("${path}")`;
|
||||
if (isCSSRequest(path)) {
|
||||
extra = `It looks like you are resolving styles. If you are adding a link tag, replace with this:
|
||||
|
|
@ -116,7 +116,7 @@ ${extra}`
|
|||
_metadata: {
|
||||
renderers,
|
||||
pathname,
|
||||
experimentalStaticBuild,
|
||||
legacyBuild
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ const STATUS_CODE_PAGE_REGEXP = /\/[0-9]{3}\/?$/;
|
|||
/** Construct sitemap.xml given a set of URLs */
|
||||
export function generateSitemap(pages: string[]): string {
|
||||
// TODO: find way to respect <link rel="canonical"> URLs here
|
||||
|
||||
// TODO: find way to exclude pages from sitemap
|
||||
|
||||
// copy just in case original copy is needed
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ export function createRouteManifest({ config, cwd }: { config: AstroConfig; cwd?
|
|||
basename,
|
||||
ext,
|
||||
parts,
|
||||
file: slash(file),
|
||||
file: file.replace(/\\/g, '/'),
|
||||
isDir,
|
||||
isIndex,
|
||||
isPage,
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export class AstroComponent {
|
|||
const html = htmlParts[i];
|
||||
const expression = expressions[i];
|
||||
|
||||
yield _render(unescapeHTML(html));
|
||||
yield unescapeHTML(html);
|
||||
yield _render(expression);
|
||||
}
|
||||
}
|
||||
|
|
@ -337,12 +337,14 @@ export function createAstro(filePathname: string, _site: string, projectRootStr:
|
|||
};
|
||||
}
|
||||
|
||||
const toAttributeString = (value: any) => String(value).replace(/&/g, '&').replace(/"/g, '"');
|
||||
const toAttributeString = (value: any, shouldEscape = true) => shouldEscape ?
|
||||
String(value).replace(/&/g, '&').replace(/"/g, '"') :
|
||||
value;
|
||||
|
||||
const STATIC_DIRECTIVES = new Set(['set:html', 'set:text']);
|
||||
|
||||
// A helper used to turn expressions into attribute key/value
|
||||
export function addAttribute(value: any, key: string) {
|
||||
export function addAttribute(value: any, key: string, shouldEscape = true) {
|
||||
if (value == null) {
|
||||
return '';
|
||||
}
|
||||
|
|
@ -372,15 +374,15 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
|
|||
if (value === true && (key.startsWith('data-') || htmlBooleanAttributes.test(key))) {
|
||||
return unescapeHTML(` ${key}`);
|
||||
} else {
|
||||
return unescapeHTML(` ${key}="${toAttributeString(value)}"`);
|
||||
return unescapeHTML(` ${key}="${toAttributeString(value, shouldEscape)}"`);
|
||||
}
|
||||
}
|
||||
|
||||
// Adds support for `<Component {...value} />
|
||||
export function spreadAttributes(values: Record<any, any>) {
|
||||
export function spreadAttributes(values: Record<any, any>, shouldEscape = true) {
|
||||
let output = '';
|
||||
for (const [key, value] of Object.entries(values)) {
|
||||
output += addAttribute(value, key);
|
||||
output += addAttribute(value, key, shouldEscape);
|
||||
}
|
||||
return unescapeHTML(output);
|
||||
}
|
||||
|
|
@ -403,20 +405,6 @@ export function defineScriptVars(vars: Record<any, any>) {
|
|||
return output;
|
||||
}
|
||||
|
||||
// Calls a component and renders it into a string of HTML
|
||||
export async function renderToString(result: SSRResult, componentFactory: AstroComponentFactory, props: any, children: any) {
|
||||
const Component = await componentFactory(result, props, children);
|
||||
let template = await renderAstroComponent(Component);
|
||||
return unescapeHTML(template);
|
||||
}
|
||||
|
||||
// Filter out duplicate elements in our set
|
||||
const uniqueElements = (item: any, index: number, all: any[]) => {
|
||||
const props = JSON.stringify(item.props);
|
||||
const children = item.children;
|
||||
return index === all.findIndex((i) => JSON.stringify(i.props) === props && i.children == children);
|
||||
};
|
||||
|
||||
// Renders an endpoint request to completion, returning the body.
|
||||
export async function renderEndpoint(mod: EndpointHandler, params: any) {
|
||||
const method = 'get';
|
||||
|
|
@ -431,15 +419,34 @@ export async function renderEndpoint(mod: EndpointHandler, params: any) {
|
|||
return body;
|
||||
}
|
||||
|
||||
// Calls a component and renders it into a string of HTML
|
||||
export async function renderToString(result: SSRResult, componentFactory: AstroComponentFactory, props: any, children: any) {
|
||||
const Component = await componentFactory(result, props, children);
|
||||
let template = await renderAstroComponent(Component);
|
||||
|
||||
// <!--astro:head--> injected by compiler
|
||||
// Must be handled at the end of the rendering process
|
||||
if (template.indexOf('<!--astro:head-->') > -1) {
|
||||
template = template.replace('<!--astro:head-->', await renderHead(result));
|
||||
}
|
||||
return template;
|
||||
}
|
||||
|
||||
// Filter out duplicate elements in our set
|
||||
const uniqueElements = (item: any, index: number, all: any[]) => {
|
||||
const props = JSON.stringify(item.props);
|
||||
const children = item.children;
|
||||
return index === all.findIndex((i) => JSON.stringify(i.props) === props && i.children == children);
|
||||
};
|
||||
|
||||
|
||||
// Renders a page to completion by first calling the factory callback, waiting for its result, and then appending
|
||||
// styles and scripts into the head.
|
||||
export async function renderPage(result: SSRResult, Component: AstroComponentFactory, props: any, children: any) {
|
||||
const template = await renderToString(result, Component, props, children);
|
||||
export async function renderHead(result: SSRResult) {
|
||||
const styles = Array.from(result.styles)
|
||||
.filter(uniqueElements)
|
||||
.map((style) => {
|
||||
const styleChildren = result._metadata.experimentalStaticBuild ? '' : style.children;
|
||||
|
||||
const styleChildren = !result._metadata.legacyBuild ? '' : style.children;
|
||||
return renderElement('style', {
|
||||
children: styleChildren,
|
||||
props: { ...style.props, 'astro-style': true },
|
||||
|
|
@ -460,17 +467,10 @@ export async function renderPage(result: SSRResult, Component: AstroComponentFac
|
|||
if (needsHydrationStyles) {
|
||||
styles.push(renderElement('style', { props: { 'astro-style': true }, children: 'astro-root, astro-fragment { display: contents; }' }));
|
||||
}
|
||||
|
||||
const links = Array.from(result.links)
|
||||
.filter(uniqueElements)
|
||||
.map((link) => renderElement('link', link));
|
||||
|
||||
// inject styles & scripts at end of <head>
|
||||
let headPos = template.indexOf('</head>');
|
||||
if (headPos === -1) {
|
||||
return links.join('\n') + styles.join('\n') + scripts.join('\n') + template; // if no </head>, prepend styles & scripts
|
||||
}
|
||||
return template.substring(0, headPos) + links.join('\n') + styles.join('\n') + scripts.join('\n') + template.substring(headPos);
|
||||
.map((link) => renderElement('link', link, false));
|
||||
return unescapeHTML(links.join('\n') + styles.join('\n') + scripts.join('\n') + '\n' + '<!--astro:head:injected-->');
|
||||
}
|
||||
|
||||
export async function renderAstroComponent(component: InstanceType<typeof AstroComponent>) {
|
||||
|
|
@ -513,7 +513,7 @@ function getHTMLElementName(constructor: typeof HTMLElement) {
|
|||
return assignedName;
|
||||
}
|
||||
|
||||
function renderElement(name: string, { props: _props, children = '' }: SSRElement) {
|
||||
function renderElement(name: string, { props: _props, children = '' }: SSRElement, shouldEscape = true) {
|
||||
// Do not print `hoist`, `lang`, `global`
|
||||
const { lang: _, 'data-astro-id': astroId, 'define:vars': defineVars, ...props } = _props;
|
||||
if (defineVars) {
|
||||
|
|
@ -530,5 +530,5 @@ function renderElement(name: string, { props: _props, children = '' }: SSRElemen
|
|||
children = defineScriptVars(defineVars) + '\n' + children;
|
||||
}
|
||||
}
|
||||
return `<${name}${spreadAttributes(props)}>${children}</${name}>`;
|
||||
return `<${name}${spreadAttributes(props, shouldEscape)}>${children}</${name}>`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ interface ComponentMetadata {
|
|||
interface CreateMetadataOptions {
|
||||
modules: ModuleInfo[];
|
||||
hydratedComponents: any[];
|
||||
clientOnlyComponents: any[];
|
||||
hydrationDirectives: Set<string>;
|
||||
hoisted: any[];
|
||||
}
|
||||
|
|
@ -22,6 +23,7 @@ export class Metadata {
|
|||
public modules: ModuleInfo[];
|
||||
public hoisted: any[];
|
||||
public hydratedComponents: any[];
|
||||
public clientOnlyComponents: any[];
|
||||
public hydrationDirectives: Set<string>;
|
||||
|
||||
private metadataCache: Map<any, ComponentMetadata | null>;
|
||||
|
|
@ -30,6 +32,7 @@ export class Metadata {
|
|||
this.modules = opts.modules;
|
||||
this.hoisted = opts.hoisted;
|
||||
this.hydratedComponents = opts.hydratedComponents;
|
||||
this.clientOnlyComponents = opts.clientOnlyComponents;
|
||||
this.hydrationDirectives = opts.hydrationDirectives;
|
||||
this.mockURL = new URL(filePathname, 'http://example.com');
|
||||
this.metadataCache = new Map<any, ComponentMetadata | null>();
|
||||
|
|
@ -66,6 +69,19 @@ export class Metadata {
|
|||
}
|
||||
}
|
||||
|
||||
*clientOnlyComponentPaths() {
|
||||
const found = new Set<string>();
|
||||
for (const metadata of this.deepMetadata()) {
|
||||
for (const component of metadata.clientOnlyComponents) {
|
||||
const path = metadata.resolvePath(component);
|
||||
if (path && !found.has(path)) {
|
||||
found.add(path);
|
||||
yield path;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all of the hydration specifiers used within this component.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -33,11 +33,8 @@ function safelyReplaceImportPlaceholder(code: string) {
|
|||
const configCache = new WeakMap<AstroConfig, CompilationCache>();
|
||||
|
||||
async function compile(config: AstroConfig, filename: string, source: string, viteTransform: TransformHook, opts: { ssr: boolean }): Promise<CompileResult> {
|
||||
// pages and layouts should be transformed as full documents (implicit <head> <body> etc)
|
||||
// everything else is treated as a fragment
|
||||
const filenameURL = new URL(`file://${filename}`);
|
||||
const normalizedID = fileURLToPath(filenameURL);
|
||||
const isPage = normalizedID.startsWith(fileURLToPath(config.pages)) || normalizedID.startsWith(fileURLToPath(config.layouts));
|
||||
const pathname = filenameURL.pathname.substr(config.projectRoot.pathname.length - 1);
|
||||
|
||||
let rawCSSDeps = new Set<string>();
|
||||
|
|
@ -47,22 +44,21 @@ async function compile(config: AstroConfig, filename: string, source: string, vi
|
|||
// use `sourcemap: "both"` so that sourcemap is included in the code
|
||||
// result passed to esbuild, but also available in the catch handler.
|
||||
const transformResult = await transform(source, {
|
||||
as: isPage ? 'document' : 'fragment',
|
||||
pathname,
|
||||
projectRoot: config.projectRoot.toString(),
|
||||
site: config.buildOptions.site,
|
||||
sourcefile: filename,
|
||||
sourcemap: 'both',
|
||||
internalURL: `/@fs${new URL('../runtime/server/index.js', import.meta.url).pathname}`,
|
||||
experimentalStaticExtraction: config.buildOptions.experimentalStaticBuild,
|
||||
experimentalStaticExtraction: !config.buildOptions.legacyBuild,
|
||||
// TODO add experimental flag here
|
||||
preprocessStyle: async (value: string, attrs: Record<string, string>) => {
|
||||
const lang = `.${attrs?.lang || 'css'}`.toLowerCase();
|
||||
|
||||
try {
|
||||
// In the static build, grab any @import as CSS dependencies for HMR.
|
||||
if (config.buildOptions.experimentalStaticBuild) {
|
||||
value = value.replace(/(?:@import)\s(?:url\()?\s?["\'](.*?)["\']\s?\)?(?:[^;]*);?/gi, (match, spec) => {
|
||||
if (!config.buildOptions.legacyBuild) {
|
||||
value.replace(/(?:@import)\s(?:url\()?\s?["\'](.*?)["\']\s?\)?(?:[^;]*);?/gi, (match, spec) => {
|
||||
rawCSSDeps.add(spec);
|
||||
// If the language is CSS: prevent `@import` inlining to prevent scoping of imports.
|
||||
// Otherwise: Sass, etc. need to see imports for variables, so leave in for their compiler to handle.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import type * as vite from 'vite';
|
||||
import type { AstroConfig } from '../@types/astro';
|
||||
import type { TransformPluginContext } from 'rollup';
|
||||
import MagicString from 'magic-string';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { loadEnv } from 'vite';
|
||||
|
|
@ -30,7 +31,7 @@ function getPrivateEnv(viteConfig: vite.ResolvedConfig, astroConfig: AstroConfig
|
|||
if (privateKeys.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return Object.fromEntries(privateKeys.map((key) => [key, fullEnv[key]]));
|
||||
return Object.fromEntries(privateKeys.map((key) => [key, JSON.stringify(fullEnv[key])]));
|
||||
}
|
||||
|
||||
function referencesPrivateKey(source: string, privateEnv: Record<string, any>) {
|
||||
|
|
@ -43,39 +44,56 @@ function referencesPrivateKey(source: string, privateEnv: Record<string, any>) {
|
|||
export default function envVitePlugin({ config: astroConfig }: EnvPluginOptions): vite.PluginOption {
|
||||
let privateEnv: Record<string, any> | null;
|
||||
let config: vite.ResolvedConfig;
|
||||
let replacements: Record<string, string>;
|
||||
let pattern: RegExp | undefined;
|
||||
return {
|
||||
name: 'astro:vite-plugin-env',
|
||||
enforce: 'pre',
|
||||
|
||||
configResolved(resolvedConfig) {
|
||||
config = resolvedConfig;
|
||||
if (config.envPrefix) {
|
||||
}
|
||||
},
|
||||
|
||||
async transform(source, id, options) {
|
||||
const ssr = options?.ssr === true;
|
||||
if (!ssr) return source;
|
||||
if (!source.includes('import.meta')) return source;
|
||||
if (!/\benv\b/.test(source)) return source;
|
||||
|
||||
if(!ssr) {
|
||||
return source;
|
||||
}
|
||||
|
||||
if(!source.includes('import.meta') || !/\benv\b/.test(source)) {
|
||||
return source;
|
||||
}
|
||||
|
||||
if (typeof privateEnv === 'undefined') {
|
||||
privateEnv = getPrivateEnv(config, astroConfig);
|
||||
if(privateEnv) {
|
||||
const entries = Object.entries(privateEnv).map(([key, value]) => ([`import.meta.env.${key}`, value]));
|
||||
replacements = Object.fromEntries(entries);
|
||||
pattern = new RegExp(
|
||||
// Do not allow preceding '.', but do allow preceding '...' for spread operations
|
||||
'(?<!(?<!\\.\\.)\\.)\\b(' +
|
||||
Object.keys(replacements)
|
||||
.map((str) => {
|
||||
return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
|
||||
})
|
||||
.join('|') +
|
||||
// prevent trailing assignments
|
||||
')\\b(?!\\s*?=[^=])', 'g');
|
||||
}
|
||||
}
|
||||
if (!privateEnv) return source;
|
||||
|
||||
if (!privateEnv || !pattern) return source;
|
||||
if (!referencesPrivateKey(source, privateEnv)) return source;
|
||||
|
||||
// Find matches for *private* env and do our own replacement.
|
||||
const s = new MagicString(source);
|
||||
// prettier-ignore
|
||||
s.prepend(`import.meta.env = new Proxy(import.meta.env, {` +
|
||||
`get(target, prop, reciever) {` +
|
||||
`const PRIVATE = ${JSON.stringify(privateEnv)};` +
|
||||
`if (typeof PRIVATE[prop] !== 'undefined') {` +
|
||||
`return PRIVATE[prop];` +
|
||||
`}` +
|
||||
`return Reflect.get(target, prop, reciever);` +
|
||||
`}` +
|
||||
`});\n`);
|
||||
let match: RegExpExecArray | null
|
||||
|
||||
while ((match = pattern.exec(source))) {
|
||||
const start = match.index
|
||||
const end = start + match[0].length
|
||||
const replacement = '' + replacements[match[1]]
|
||||
s.overwrite(start, end, replacement)
|
||||
}
|
||||
|
||||
return s.toString();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,12 +15,17 @@ describe('CSS', function () {
|
|||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/0-css/',
|
||||
renderers: ['@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
|
||||
vite: {
|
||||
build: {
|
||||
assetsInlineLimit: 0
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// test HTML and CSS contents for accuracy
|
||||
describe('build', () => {
|
||||
this.timeout(30000); // test needs a little more time in CI
|
||||
this.timeout(45000); // test needs a little more time in CI
|
||||
|
||||
let $;
|
||||
let bundledCSS;
|
||||
|
|
@ -31,7 +36,7 @@ describe('CSS', function () {
|
|||
// get bundled CSS (will be hashed, hence DOM query)
|
||||
const html = await fixture.readFile('/index.html');
|
||||
$ = cheerio.load(html);
|
||||
const bundledCSSHREF = $('link[rel=stylesheet][href^=./assets/]').attr('href');
|
||||
const bundledCSSHREF = $('link[rel=stylesheet][href^=/assets/]').attr('href');
|
||||
bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
|
||||
});
|
||||
|
||||
|
|
@ -47,7 +52,8 @@ describe('CSS', function () {
|
|||
expect(el2.attr('class')).to.equal(`visible ${scopedClass}`);
|
||||
|
||||
// 2. check CSS
|
||||
expect(bundledCSS).to.include(`.blue.${scopedClass}{color:#b0e0e6}.color\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`);
|
||||
const expected = `.blue.${scopedClass}{color:#b0e0e6}.color\\\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`;
|
||||
expect(bundledCSS).to.include(expected);
|
||||
});
|
||||
|
||||
it('No <style> skips scoping', async () => {
|
||||
|
|
@ -60,7 +66,8 @@ describe('CSS', function () {
|
|||
});
|
||||
|
||||
it('Using hydrated components adds astro-root styles', async () => {
|
||||
expect(bundledCSS).to.include('display:contents');
|
||||
const inline = $('style').html();
|
||||
expect(inline).to.include('display: contents');
|
||||
});
|
||||
|
||||
it('<style lang="sass">', async () => {
|
||||
|
|
@ -217,7 +224,7 @@ describe('CSS', function () {
|
|||
it('<style>', async () => {
|
||||
const el = $('#svelte-css');
|
||||
const classes = el.attr('class').split(' ');
|
||||
const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
|
||||
const scopedClass = classes.find((name) => name !== 'svelte-css' && /^svelte-[A-Za-z0-9-]+/.test(name));
|
||||
|
||||
// 1. check HTML
|
||||
expect(el.attr('class')).to.include('svelte-css');
|
||||
|
|
@ -229,7 +236,7 @@ describe('CSS', function () {
|
|||
it('<style lang="sass">', async () => {
|
||||
const el = $('#svelte-sass');
|
||||
const classes = el.attr('class').split(' ');
|
||||
const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
|
||||
const scopedClass = classes.find((name) => name !== 'svelte-sass' && /^svelte-[A-Za-z0-9-]+/.test(name));
|
||||
|
||||
// 1. check HTML
|
||||
expect(el.attr('class')).to.include('svelte-sass');
|
||||
|
|
@ -241,7 +248,7 @@ describe('CSS', function () {
|
|||
it('<style lang="scss">', async () => {
|
||||
const el = $('#svelte-scss');
|
||||
const classes = el.attr('class').split(' ');
|
||||
const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
|
||||
const scopedClass = classes.find((name) => name !== 'svelte-scss' && /^svelte-[A-Za-z0-9-]+/.test(name));
|
||||
|
||||
// 1. check HTML
|
||||
expect(el.attr('class')).to.include('svelte-scss');
|
||||
|
|
@ -272,11 +279,6 @@ describe('CSS', function () {
|
|||
expect((await fixture.fetch(href)).status).to.equal(200);
|
||||
});
|
||||
|
||||
it('resolves CSS in src/', async () => {
|
||||
const href = $('link[href$="linked.css"]').attr('href');
|
||||
expect((await fixture.fetch(href)).status).to.equal(200);
|
||||
});
|
||||
|
||||
// Skipped until upstream fix lands
|
||||
// Our fix: https://github.com/withastro/astro/pull/2106
|
||||
// OG Vite PR: https://github.com/vitejs/vite/pull/5940
|
||||
|
|
|
|||
|
|
@ -11,7 +11,14 @@ describe('Assets', () => {
|
|||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/astro-assets/' });
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-assets/',
|
||||
vite: {
|
||||
build: {
|
||||
assetsInlineLimit: 0
|
||||
}
|
||||
}
|
||||
});
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
|
|
@ -19,7 +26,7 @@ describe('Assets', () => {
|
|||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
const imgPath = $('img').attr('src');
|
||||
const data = await fixture.readFile('/' + imgPath);
|
||||
const data = await fixture.readFile( imgPath);
|
||||
expect(!!data).to.equal(true);
|
||||
});
|
||||
|
||||
|
|
@ -29,7 +36,7 @@ describe('Assets', () => {
|
|||
const srcset = $('img').attr('srcset');
|
||||
const candidates = matchSrcset(srcset);
|
||||
const match = candidates.find((a) => a.density === 2);
|
||||
const data = await fixture.readFile('/' + match.url);
|
||||
const data = await fixture.readFile(match.url);
|
||||
expect(!!data).to.equal(true);
|
||||
});
|
||||
|
||||
|
|
@ -39,14 +46,14 @@ describe('Assets', () => {
|
|||
const srcset = $('img').attr('srcset');
|
||||
const candidates = matchSrcset(srcset);
|
||||
const match = candidates.find((a) => a.density === 3);
|
||||
const data = await fixture.readFile('/' + match.url);
|
||||
const data = await fixture.readFile(match.url);
|
||||
expect(!!data).to.equal(true);
|
||||
});
|
||||
|
||||
it('built image from an import specifier', async () => {
|
||||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
const src = '/' + $('#import-no-url').attr('src');
|
||||
const src = $('#import-no-url').attr('src');
|
||||
const data = await fixture.readFile(src);
|
||||
expect(!!data).to.equal(true);
|
||||
});
|
||||
|
|
@ -54,7 +61,7 @@ describe('Assets', () => {
|
|||
it('built image from an import specifier using ?url', async () => {
|
||||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
const src = '/' + $('#import-url').attr('src');
|
||||
const src = $('#import-url').attr('src');
|
||||
const data = await fixture.readFile(src);
|
||||
expect(!!data).to.equal(true);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ describe('Astro basics', () => {
|
|||
let previewServer;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/astro-basic/' });
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-basic/',
|
||||
});
|
||||
await fixture.build();
|
||||
previewServer = await fixture.preview();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@ describe('Client only components', () => {
|
|||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/astro-client-only/' });
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-client-only/',
|
||||
});
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
|
|
@ -16,19 +18,10 @@ describe('Client only components', () => {
|
|||
|
||||
// test 1: <astro-root> is empty
|
||||
expect($('astro-root').html()).to.equal('');
|
||||
const src = $('script').attr('src');
|
||||
const $script = $('script');
|
||||
const script = $script.html();
|
||||
|
||||
const script = await fixture.readFile(src);
|
||||
// test 2: svelte renderer is on the page
|
||||
const exp = /import\("(.\/client.*)"\)/g;
|
||||
let match, svelteRenderer;
|
||||
while ((match = exp.exec(script))) {
|
||||
svelteRenderer = match[1].replace(/^\./, '/assets/');
|
||||
}
|
||||
expect(svelteRenderer).to.be.ok;
|
||||
|
||||
// test 3: can load svelte renderer
|
||||
const svelteClient = await fixture.readFile(svelteRenderer);
|
||||
expect(svelteClient).to.be.ok;
|
||||
expect(/import\(".\/PersistentCounter.*/g.test(script)).to.be.ok;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
/**
|
||||
* UNCOMMENT: add support for functional components in frontmatter
|
||||
import { expect } from 'chai';
|
||||
import cheerio from 'cheerio';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/astro-components/' });
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
// TODO: add support for functional components in frontmatter
|
||||
describe('Components tests', () => {
|
||||
it('Astro components are able to render framework components', async () => {
|
||||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: Renders Astro component
|
||||
const $astro = $('#astro');
|
||||
expect($astro.children()).to.have.lengthOf(3);
|
||||
|
||||
// test 2: Renders React component
|
||||
const $react = $('#react');
|
||||
expect($react).not.to.have.lengthOf(0);
|
||||
|
||||
// test 3: Renders Vue component
|
||||
const $vue = $('#vue');
|
||||
expect($vue).not.to.have.lengthOf(0);
|
||||
|
||||
// test 4: Renders Svelte component
|
||||
const $svelte = $('#svelte');
|
||||
expect($svelte).not.to.have.lengthOf(0);
|
||||
});
|
||||
|
||||
it('Allows Components defined in frontmatter', async () => {
|
||||
const html = await fixture.readFile('/frontmatter-component/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('h1')).to.have.lengthOf(1);
|
||||
});
|
||||
|
||||
it('Still throws an error for undefined components', async () => {
|
||||
const result = await fixture.readFile('/undefined-component/index.html');
|
||||
expect(result.status).to.equal(500);
|
||||
});
|
||||
|
||||
it('Client attrs not added', async () => {
|
||||
const html = await fixture.readFile('/client/index.html');
|
||||
expect(html).not.to.include(`"client:load": true`);
|
||||
});
|
||||
});
|
||||
*/
|
||||
|
||||
it.skip('is skipped', () => {});
|
||||
|
|
@ -6,7 +6,9 @@ describe('CSS Bundling (ESM import)', () => {
|
|||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling-import/' });
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-css-bundling-import/',
|
||||
});
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
|
|
@ -32,8 +34,7 @@ describe('CSS Bundling (ESM import)', () => {
|
|||
expect(css.indexOf('p{color:green}')).to.be.greaterThan(css.indexOf('p{color:#00f}'));
|
||||
});
|
||||
|
||||
// TODO: re-enable this
|
||||
it.skip('no empty CSS files', async () => {
|
||||
it('no empty CSS files', async () => {
|
||||
for (const page of ['/page-1/index.html', '/page-2/index.html']) {
|
||||
const html = await fixture.readFile(page);
|
||||
const $ = cheerio.load(html);
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
import { expect } from 'chai';
|
||||
import cheerio from 'cheerio';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
|
||||
describe('nested layouts', () => {
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling-nested-layouts/' });
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
it('page-1 has all CSS', async () => {
|
||||
const html = await fixture.readFile('/page-1/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
const stylesheets = $('link[rel=stylesheet]')
|
||||
.toArray()
|
||||
.map((el) => el.attribs.href);
|
||||
|
||||
// page-one.[hash].css exists
|
||||
expect(stylesheets.some((href) => /page-one\.\w+\.css/.test(href))).to.be.true;
|
||||
});
|
||||
|
||||
it('page-2 has all CSS', async () => {
|
||||
const html = await fixture.readFile('/page-2/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
const stylesheets = $('link[rel=stylesheet]')
|
||||
.toArray()
|
||||
.map((el) => el.attribs.href);
|
||||
|
||||
// page-one.[hash].css exists
|
||||
expect(stylesheets.some((href) => /page-one\.\w+\.css/.test(href))).to.be.true;
|
||||
// page-2.[hash].css exists
|
||||
expect(stylesheets.some((href) => /page-2\.\w+\.css/.test(href))).to.be.true;
|
||||
});
|
||||
});
|
||||
|
|
@ -5,11 +5,9 @@ import { loadFixture } from './test-utils.js';
|
|||
// note: the hashes should be deterministic, but updating the file contents will change hashes
|
||||
// be careful not to test that the HTML simply contains CSS, because it always will! filename and quanity matter here (bundling).
|
||||
const EXPECTED_CSS = {
|
||||
'/index.html': ['./assets/index', './assets/typography'], // don’t match hashes, which change based on content
|
||||
'/one/index.html': ['../assets/one'],
|
||||
'/two/index.html': ['../assets/two', '../assets/typography'],
|
||||
'/preload/index.html': ['../assets/preload'],
|
||||
'/preload-merge/index.html': ['../assets/preload-merge'],
|
||||
'/index.html': ['/assets/index'], // don’t match hashes, which change based on content
|
||||
'/one/index.html': ['/assets/one'],
|
||||
'/two/index.html': ['/assets/two'],
|
||||
};
|
||||
const UNEXPECTED_CSS = ['/src/components/nav.css', '../css/typography.css', '../css/colors.css', '../css/page-index.css', '../css/page-one.css', '../css/page-two.css'];
|
||||
|
||||
|
|
@ -17,7 +15,9 @@ describe('CSS Bundling', function () {
|
|||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling/' });
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-css-bundling/',
|
||||
});
|
||||
await fixture.build({ mode: 'production' });
|
||||
});
|
||||
|
||||
|
|
@ -43,21 +43,7 @@ describe('CSS Bundling', function () {
|
|||
expect(link).to.have.lengthOf(0);
|
||||
}
|
||||
|
||||
// test 3: preload tags was not removed and attributes was preserved
|
||||
if (filepath === '/preload/index.html') {
|
||||
const stylesheet = $('link[rel="stylesheet"][href^="../assets/preload"]');
|
||||
const preload = $('link[rel="preload"][href^="../assets/preload"]');
|
||||
expect(stylesheet[0].attribs.media).to.equal('print');
|
||||
expect(preload).to.have.lengthOf(1); // Preload tag was removed
|
||||
}
|
||||
|
||||
// test 4: preload tags was not removed and attributes was preserved
|
||||
if (filepath === '/preload-merge/index.html') {
|
||||
const preload = $('link[rel="preload"]');
|
||||
expect(preload).to.have.lengthOf(1);
|
||||
}
|
||||
|
||||
// test 5: assert all bundled CSS was built and contains CSS
|
||||
// test 3: assert all bundled CSS was built and contains CSS
|
||||
for (const url of builtCSS.keys()) {
|
||||
const css = await fixture.readFile(url);
|
||||
expect(css).to.be.ok;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@ describe('Dynamic components', () => {
|
|||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/astro-dynamic/' });
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-dynamic/',
|
||||
});
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
|
|
@ -14,7 +16,7 @@ describe('Dynamic components', () => {
|
|||
const html = await fixture.readFile('/index.html');
|
||||
|
||||
const $ = cheerio.load(html);
|
||||
expect($('script').length).to.eq(1);
|
||||
expect($('script').length).to.eq(2);
|
||||
});
|
||||
|
||||
it('Loads pages using client:media hydrator', async () => {
|
||||
|
|
@ -23,11 +25,7 @@ describe('Dynamic components', () => {
|
|||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: static value rendered
|
||||
let js = await fixture.readFile(new URL($('script').attr('src'), root).pathname);
|
||||
expect(js).to.include(`value:"(max-width: 700px)"`);
|
||||
|
||||
// test 2: dynamic value rendered
|
||||
expect(js).to.include(`value:"(max-width: 600px)"`);
|
||||
expect($('script').length).to.equal(2); // One for each
|
||||
});
|
||||
|
||||
it('Loads pages using client:only hydrator', async () => {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@ describe('Environment Variables', () => {
|
|||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/astro-envs/' });
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-envs/',
|
||||
});
|
||||
|
||||
await fixture.build();
|
||||
});
|
||||
|
|
@ -22,7 +24,7 @@ describe('Environment Variables', () => {
|
|||
});
|
||||
|
||||
it('includes public env in client-side JS', async () => {
|
||||
let dirs = await fixture.readdir('/assets');
|
||||
let dirs = await fixture.readdir('/');
|
||||
let found = false;
|
||||
|
||||
// Look in all of the .js files to see if the public env is inlined.
|
||||
|
|
@ -31,7 +33,7 @@ describe('Environment Variables', () => {
|
|||
await Promise.all(
|
||||
dirs.map(async (path) => {
|
||||
if (path.endsWith('.js')) {
|
||||
let js = await fixture.readFile(`/assets/${path}`);
|
||||
let js = await fixture.readFile(`/${path}`);
|
||||
if (js.includes('BLUE_BAYOU')) {
|
||||
found = true;
|
||||
}
|
||||
|
|
@ -43,7 +45,7 @@ describe('Environment Variables', () => {
|
|||
});
|
||||
|
||||
it('does not include private env in client-side JS', async () => {
|
||||
let dirs = await fixture.readdir('/assets');
|
||||
let dirs = await fixture.readdir('/');
|
||||
let found = false;
|
||||
|
||||
// Look in all of the .js files to see if the public env is inlined.
|
||||
|
|
@ -52,7 +54,7 @@ describe('Environment Variables', () => {
|
|||
await Promise.all(
|
||||
dirs.map(async (path) => {
|
||||
if (path.endsWith('.js')) {
|
||||
let js = await fixture.readFile(`/assets/${path}`);
|
||||
let js = await fixture.readFile(`/${path}`);
|
||||
if (js.includes('CLUB_33')) {
|
||||
found = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ describe('Astro.*', () => {
|
|||
projectRoot: './fixtures/astro-global/',
|
||||
buildOptions: {
|
||||
site: 'https://mysite.dev/blog/',
|
||||
sitemap: false,
|
||||
sitemap: false
|
||||
},
|
||||
});
|
||||
await fixture.build();
|
||||
|
|
@ -48,13 +48,6 @@ describe('Astro.*', () => {
|
|||
expect($('#site').attr('href')).to.equal('https://mysite.dev/blog/');
|
||||
});
|
||||
|
||||
it('Astro.resolve built', async () => {
|
||||
const html = await fixture.readFile('/resolve/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
expect($('img').attr('src')).to.include('assets/penguin.ccd44411.png'); // Main src/images
|
||||
expect($('#inner-child img').attr('src')).to.include('assets/penguin.b9ab122a.png');
|
||||
});
|
||||
|
||||
it('Astro.fetchContent() returns the correct "url" property, including buildOptions.site subpath', async () => {
|
||||
const html = await fixture.readFile('/posts/1/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ describe('Partial HTML ', async () => {
|
|||
let devServer;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/astro-partial-html/' });
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-partial-html/',
|
||||
});
|
||||
devServer = await fixture.startDevServer();
|
||||
});
|
||||
|
||||
|
|
@ -23,7 +25,12 @@ describe('Partial HTML ', async () => {
|
|||
expect(html).to.match(/^<!DOCTYPE html/);
|
||||
|
||||
// test 2: correct CSS present
|
||||
const css = $('style[astro-style]').html();
|
||||
const link = $('link').attr('href');
|
||||
const css = await fixture.fetch(link, {
|
||||
headers: {
|
||||
accept: 'text/css'
|
||||
}
|
||||
}).then(res => res.text());
|
||||
expect(css).to.match(/\.astro-[^{]+{color:red;}/);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,14 @@ describe('Scripts (hoisted and not)', () => {
|
|||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/astro-scripts/' });
|
||||
fixture = await loadFixture({
|
||||
projectRoot: './fixtures/astro-scripts/',
|
||||
vite: {
|
||||
build: {
|
||||
assetsInlineLimit: 0
|
||||
}
|
||||
}
|
||||
});
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
|
|
@ -38,8 +45,8 @@ describe('Scripts (hoisted and not)', () => {
|
|||
// test 2: attr removed
|
||||
expect($('script').attr('data-astro')).to.equal(undefined);
|
||||
|
||||
let entryURL = path.join('inline', $('script').attr('src'));
|
||||
let inlineEntryJS = await fixture.readFile(entryURL);
|
||||
const entryURL = $('script').attr('src');
|
||||
const inlineEntryJS = await fixture.readFile(entryURL);
|
||||
|
||||
// test 3: the JS exists
|
||||
expect(inlineEntryJS).to.be.ok;
|
||||
|
|
@ -53,7 +60,7 @@ describe('Scripts (hoisted and not)', () => {
|
|||
expect($('script')).to.have.lengthOf(2);
|
||||
|
||||
let el = $('script').get(1);
|
||||
let entryURL = path.join('external', $(el).attr('src'));
|
||||
let entryURL = $(el).attr('src');
|
||||
let externalEntryJS = await fixture.readFile(entryURL);
|
||||
|
||||
// test 2: the JS exists
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
import { expect } from 'chai';
|
||||
import cheerio from 'cheerio';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
|
||||
describe('Node builtins', () => {
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ projectRoot: './fixtures/builtins/' });
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
it('Can be used with the node: prefix', async () => {
|
||||
const html = await fixture.readFile('/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('#version').text()).to.equal('1.2.0');
|
||||
expect($('#dep-version').text()).to.equal('0.1.0');
|
||||
});
|
||||
|
||||
it('Can also be used with the non-prefixed version', async () => {
|
||||
const html = await fixture.readFile('/bare/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('h1').text()).to.equal('true');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import { expect } from 'chai';
|
||||
import { cli } from './test-utils.js';
|
||||
import { promises as fs } from 'fs';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
describe('astro cli', () => {
|
||||
it('astro', async () => {
|
||||
const proc = await cli();
|
||||
|
||||
expect(proc.stdout).to.include('astro - Futuristic web development tool');
|
||||
});
|
||||
|
||||
it('astro --version', async () => {
|
||||
const pkgURL = new URL('../package.json', import.meta.url);
|
||||
const pkgVersion = await fs.readFile(pkgURL, 'utf8').then((data) => JSON.parse(data).version);
|
||||
|
||||
const proc = await cli('--version');
|
||||
|
||||
expect(proc.stdout).to.equal(pkgVersion);
|
||||
});
|
||||
|
||||
[undefined, '0.0.0.0', '127.0.0.1'].forEach((hostname) => {
|
||||
it(`astro dev --hostname=${hostname}`, async () => {
|
||||
const projectRootURL = new URL('./fixtures/astro-basic/', import.meta.url);
|
||||
|
||||
const hostnameArgs = hostname ? ['--hostname', hostname] : [];
|
||||
const proc = cli('dev', '--project-root', fileURLToPath(projectRootURL), ...hostnameArgs);
|
||||
|
||||
let stdout = '';
|
||||
|
||||
for await (const chunk of proc.stdout) {
|
||||
stdout += chunk;
|
||||
|
||||
if (chunk.includes('Local:')) break;
|
||||
}
|
||||
|
||||
proc.kill();
|
||||
|
||||
expect(stdout).to.include('Local: http://localhost:3000');
|
||||
expect(stdout).to.include(`Network: http://${hostname ?? '127.0.0.1'}:3000`);
|
||||
});
|
||||
});
|
||||
|
||||
it('astro build', async () => {
|
||||
const projectRootURL = new URL('./fixtures/astro-basic/', import.meta.url);
|
||||
|
||||
const proc = await cli('build', '--project-root', fileURLToPath(projectRootURL));
|
||||
|
||||
expect(proc.stdout).to.include('Done');
|
||||
});
|
||||
});
|
||||
|
|
@ -47,8 +47,8 @@ describe('Custom Elements', () => {
|
|||
expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1);
|
||||
|
||||
// Hydration
|
||||
// test 3: Component and polyfill scripts bundled together
|
||||
expect($('script[type=module]')).to.have.lengthOf(1);
|
||||
// test 3: Component and polyfill scripts bundled separately
|
||||
expect($('script[type=module]')).to.have.lengthOf(2);
|
||||
});
|
||||
|
||||
it('Polyfills are added even if not hydrating', async () => {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import VueScoped from '../components/VueScoped.vue';
|
|||
import VueScss from '../components/VueScss.vue';
|
||||
import ReactDynamic from '../components/ReactDynamic.jsx';
|
||||
|
||||
import importedUrl from '../styles/imported-url.css?url';
|
||||
import '../styles/imported-url.css';
|
||||
---
|
||||
|
||||
<html>
|
||||
|
|
@ -36,10 +36,15 @@ import importedUrl from '../styles/imported-url.css?url';
|
|||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="/global.css">
|
||||
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.css')}>
|
||||
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.scss')}>
|
||||
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.sass')}>
|
||||
<link rel="stylesheet" type="text/css" href={importedUrl}>
|
||||
<style>
|
||||
@import '../styles/linked.css';
|
||||
</style>
|
||||
<style lang="scss">
|
||||
@import '../styles/linked.scss';
|
||||
</style>
|
||||
<style lang="sass">
|
||||
@import '../styles/linked.sass'
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import p2Url from '../images/penguin2.jpg?url';
|
|||
</style>
|
||||
<body>
|
||||
<h1>Icons</h1>
|
||||
<img src={Astro.resolve('../images/twitter.png')} srcset={`${Astro.resolve('../images/twitter.png')} 1x, ${Astro.resolve('../images/twitter@2x.png')} 2x, ${Astro.resolve('../images/twitter@3x.png')} 3x`} />
|
||||
<img src={(await import('../images/twitter.png')).default} srcset={`${(await import('../images/twitter.png')).default} 1x, ${(await import('../images/twitter@2x.png')).default} 2x, ${(await import('../images/twitter@3x.png')).default} 3x`} />
|
||||
<img srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 600w, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 800w">
|
||||
<img srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 1.5x, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 2x">
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
---
|
||||
import ReactComponent from './Component.jsx';
|
||||
import VueComponent from './Component.vue';
|
||||
import SvelteComponent from './Component.svelte';
|
||||
---
|
||||
|
||||
<div id="astro">
|
||||
<ReactComponent />
|
||||
<VueComponent />
|
||||
<SvelteComponent />
|
||||
</div>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import { h } from 'preact';
|
||||
|
||||
export default function PreactComponent({ children }) {
|
||||
return <div id="preact">{children}</div>;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<div id="svelte">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<template>
|
||||
<div id="vue">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
export interface Props {
|
||||
test: string;
|
||||
}
|
||||
---
|
||||
<h1 id="direct-props-h1">{props.test}</h1>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
import SvelteComponent from '../components/Component.svelte';
|
||||
---
|
||||
<html>
|
||||
<head><title>Components</title></head>
|
||||
<body>
|
||||
<SvelteComponent client:load />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
const { level = 1 } = Astro.props;
|
||||
const Element = `h${level}`;
|
||||
---
|
||||
|
||||
<Element>Hello world!</Element>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
import AstroComponent from '../components/Component.astro';
|
||||
---
|
||||
<html>
|
||||
<head><title>Components</title></head>
|
||||
<body>
|
||||
<AstroComponent />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
import PropsComponent from "../components/Props-Component.astro"
|
||||
---
|
||||
<PropsComponent test="test string"/>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
---
|
||||
function FnComponent() {
|
||||
const lame = 'ugh';
|
||||
return <h2>Hey</h2>
|
||||
}
|
||||
const Defined = 'h1'
|
||||
---
|
||||
|
||||
<FnComponent />
|
||||
<Defined>Hello world!</Defined>
|
||||
<Undefined />
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
---
|
||||
import "../styles/site.css"
|
||||
|
||||
const {title} = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>{title}</title>
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul>
|
||||
<li><a href="/page-1">Page 1</a></li>
|
||||
<li><a href="/page-2">Page 2</a></li>
|
||||
<!-- <li><a href="/page-2-reduced-layout">Page 2 reduced layout</a></li> -->
|
||||
</ul>
|
||||
<slot></slot>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
import BaseLayout from "./BaseLayout.astro"
|
||||
import "../styles/page-one.css"
|
||||
|
||||
const {title} = Astro.props;
|
||||
---
|
||||
|
||||
<BaseLayout title={title}>
|
||||
<main id="page">
|
||||
<slot></slot>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
---
|
||||
import PageLayout from "../layouts/PageLayout.astro"
|
||||
|
||||
const date = new Date();
|
||||
---
|
||||
|
||||
<PageLayout title="Page 1">
|
||||
<h1>Page 1</h1>
|
||||
<p>This page has styling in dev-server. But the built page has no styling. </p>
|
||||
<p>Check <code>dist/page-1/index.html</code>. There are no stylesheets imported.</p>
|
||||
<p>Additionally, there is an empty js file in the <code>dist/assets</code> folder. Thankfully the file is not required by any page.</p>
|
||||
<p>Execute the build <code>npm run build</code> and preview it <code>npx http-server dist/</code> at <a href="https://github-qoihup--8080.local.webcontainer.io/page-1/">https://github-qoihup--8080.local.webcontainer.io/page-1/</a></p>
|
||||
|
||||
<p>Date: {date}</p>
|
||||
</PageLayout>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
import PageLayout from "../layouts/PageLayout.astro"
|
||||
import "../styles/page-two.css"
|
||||
---
|
||||
|
||||
<PageLayout title="Page 2">
|
||||
<h1>Page 2</h1>
|
||||
<p>Nothing to see here. Check <a href="/page-1">Page 1</a></p>
|
||||
</PageLayout>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
p {
|
||||
color: blue;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
p {
|
||||
color: green;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
p {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h1 {
|
||||
outline: 1px solid red;
|
||||
}
|
||||
|
|
@ -4,9 +4,11 @@ import Nav from '../components/Nav.astro';
|
|||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href={Astro.resolve('../css/typography.css')}>
|
||||
<link rel="stylesheet" href={Astro.resolve('../css/colors.css')}>
|
||||
<link rel="stylesheet" href={Astro.resolve('../css/page-index.css')}>
|
||||
<style>
|
||||
@import '../css/typography.css';
|
||||
@import '../css/colors.css';
|
||||
@import '../css/page-index.css';
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Nav />
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@ import Nav from '../components/Nav.astro';
|
|||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href={Astro.resolve('../css/typography.css')} />
|
||||
<link rel="stylesheet" href={Astro.resolve('../css/page-one.css')} />
|
||||
<style>
|
||||
@import '../css/typography.css';
|
||||
@import '../css/page-one.css';
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Nav />
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
---
|
||||
import Nav from '../components/Nav.astro';
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preload" as="style" href={Astro.resolve('../css/page-preload-merge.css')} />
|
||||
<link rel="preload" as="style" href={Astro.resolve('../css/page-preload-merge-2.css')} />
|
||||
|
||||
<link rel="stylesheet" href={Astro.resolve('../css/page-preload-merge.css')} />
|
||||
<link rel="stylesheet" href={Astro.resolve('../css/page-preload-merge-2.css')} />
|
||||
</head>
|
||||
<body>
|
||||
<Nav />
|
||||
<h1>Preload merge page</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
import Nav from '../components/Nav.astro';
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preload" as="style" href={Astro.resolve('../css/page-preload.css')} />
|
||||
<link rel="stylesheet" href={Astro.resolve('../css/page-preload.css')} media="print" onload="this.media='all'" />
|
||||
</head>
|
||||
<body>
|
||||
<Nav />
|
||||
<h1>Preload page</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,9 +4,11 @@ import Nav from '../components/Nav.astro';
|
|||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href={Astro.resolve('../css/typography.css')} />
|
||||
<link rel="stylesheet" href={Astro.resolve('../css/colors.css')} />
|
||||
<link rel="stylesheet" href={Astro.resolve('../css/page-two.css')} />
|
||||
<style>
|
||||
@import '../css/typography.css';
|
||||
@import '../css/colors.css';
|
||||
@import '../css/page-two.css';
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Nav />
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
const penguinUrl = Astro.resolve('../images/penguin.png');
|
||||
---
|
||||
<img src={penguinUrl} />
|
||||
<img src="../images/penguin.png" />
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
const penguinUrl = Astro.resolve('./images/penguin.png');
|
||||
---
|
||||
<div id="inner-child">
|
||||
<img src={penguinUrl} />
|
||||
</div>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB |
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
import Child from '../components/ChildResolve.astro';
|
||||
import InnerChild from '../components/nested/InnerChild.astro';
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing</title>
|
||||
</head>
|
||||
<body>
|
||||
<Child />
|
||||
<InnerChild />
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue