-
Notifications
You must be signed in to change notification settings - Fork 0
build: cdn management. #1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
bde0439
chore: prettier.
knightedcodemonkey 5c0e2e8
chore: better cdn management.
knightedcodemonkey 847d4f7
build: sass fallbacks.
knightedcodemonkey 5dc19c6
ci: run build esm instead.
knightedcodemonkey de9b305
docs: update wording around build usage.
knightedcodemonkey cdc828b
build: jspmga targets, strengthen matching.
knightedcodemonkey File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -32,4 +32,7 @@ jobs: | |
| path: npm-debug.log | ||
|
|
||
| - name: Lint | ||
| run: npm run lint | ||
| run: npm run lint | ||
|
|
||
| - name: Build | ||
| run: npm run build:esm | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| node_modules | ||
| node_modules | ||
| dist |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| # Build And Deploy | ||
|
|
||
| This project uses two runtime modes: | ||
|
|
||
| - Local development mode: dynamic CDN resolution from `src/cdn.js` with esm.sh as default. | ||
| - Production mode: JSPM-generated import map injected into `dist/index.html` and hosted on GitHub Pages. | ||
|
|
||
knightedcodemonkey marked this conversation as resolved.
Show resolved
Hide resolved
knightedcodemonkey marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ## Local Development | ||
|
|
||
| Install dependencies and start the local server: | ||
|
|
||
| ```sh | ||
| npm ci | ||
| npm run dev | ||
| ``` | ||
|
|
||
| The app loads from `src/index.html` and keeps the dynamic CDN fallback behavior for fast iteration and debugging. | ||
|
|
||
| ## Production Build | ||
|
|
||
| Create a production-ready `dist` folder: | ||
|
|
||
| ```sh | ||
| npm run build | ||
| ``` | ||
|
|
||
| Select a different production primary CDN at build time: | ||
|
|
||
| ```sh | ||
| KNIGHTED_PRIMARY_CDN=esm npm run build | ||
| KNIGHTED_PRIMARY_CDN=jspmGa npm run build | ||
| ``` | ||
|
|
||
| Convenience scripts are also available: | ||
|
|
||
| ```sh | ||
| npm run build:esm | ||
| npm run build:jspm | ||
| npm run build:importmap-mode | ||
| ``` | ||
|
|
||
| ### Build Mode Matrix | ||
|
|
||
| <!-- prettier-ignore-start --> | ||
| | Mode | Resolver | Import map step | JSPM index needed | Typical use | | ||
| | --- | --- | --- | --- | --- | | ||
| | `importMap` | Import map in `dist/index.html` | Yes | Yes | Default production mode | | ||
| | `esm` | `src/cdn.js` (`esm.sh` primary) | No | No | Stable fallback mode | | ||
| | `jspmGa` | `src/cdn.js` (`ga.jspm.io` primary) | No | No | Direct ga.jspm.io testing | | ||
| <!-- prettier-ignore-end --> | ||
|
|
||
| Mode notes: | ||
|
|
||
| - `importMap`: Preferred production mode when JSPM has indexed the required graph. | ||
| - `esm`: Stable fallback mode while waiting on JSPM indexing. | ||
| - `jspmGa`: Direct ga.jspm.io URL mode without import-map generation. | ||
|
|
||
| This runs two steps: | ||
|
|
||
| 1. `npm run build:prepare` | ||
|
|
||
| - Copies `src` to `dist` | ||
| - Injects `window.__KNIGHTED_PRIMARY_CDN__` into `dist/index.html` | ||
|
|
||
| 2. `npm run build:importmap` | ||
|
|
||
| - Runs only when `KNIGHTED_PRIMARY_CDN=importMap` | ||
| - Runs `jspm link` with `--provider jspm.io` | ||
| - Injects an inline import map into `dist/index.html` | ||
| - Adds integrity metadata and modulepreload links | ||
| - Pins the following packages through resolution overrides: | ||
| - `sass=1.93.2` | ||
| - `less=4.4.2` | ||
| - Traces generated `dist/prod-imports.js` | ||
| - Import specifiers come from `importMap` entries in `src/cdn.js` (`cdnImportSpecs`) | ||
|
|
||
| Preview the built site locally: | ||
|
|
||
| ```sh | ||
| npm run preview | ||
| ``` | ||
|
|
||
| ## CI And Deployment | ||
|
|
||
| - CI workflow (`.github/workflows/ci.yml`) installs dependencies, runs lint, and runs `npm run build`. | ||
knightedcodemonkey marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| - Deploy workflow (`.github/workflows/deploy.yml`) builds the production site and publishes `dist` to GitHub Pages. | ||
|
|
||
| ## Notes | ||
|
|
||
| - In production, the preferred/default mode is import-map-based resolution (`window.__KNIGHTED_PRIMARY_CDN__ = "importMap"`). | ||
| - In `importMap` mode, runtime resolution is import-map first; if a specifier is missing from the generated map, runtime falls back through the CDN | ||
| provider chain configured in `src/cdn.js`. | ||
| - In `esm` and `jspmGa` modes, runtime resolution is handled entirely by the CDN provider chain configured in `src/cdn.js` without an import map. | ||
|
|
||
| ### Sass Loading Gotchas | ||
|
|
||
| - Symptom: switching to Sass mode shows `Unable to load Sass compiler for browser usage: Dynamic require of "url" is not supported`. | ||
| - Cause: some `esm.sh` Sass outputs currently include runtime paths that are not browser-safe for this app. | ||
| - Current mitigation: `src/cdn.js` keeps `esm.sh` first, then falls back to `unpkg` for Sass via `sass@1.93.2/sass.default.js?module`. | ||
| - Important context: this can appear even if the Sass URL has not changed in this repo, because CDN-transformed module output can change upstream. | ||
| - If this regresses again: | ||
| - Verify Sass import candidates in `src/cdn.js`. | ||
| - Reproduce directly in browser devtools with `await import('<candidate-url>')`. | ||
| - Keep at least one known browser-safe fallback provider in the Sass candidate list. | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.