plan(textarea-editor): use curl-based vendoring (subagent-executable)
The original Task 1 instructed a human to click through prismjs.com's configurator UI — a step a subagent can't perform. Replace with direct curl from jsdelivr for both Prism components (core + clike + bash concatenated) and CodeJar, plus a sed-based ESM-export strip and a window-global shim. Updates the vendor README template accordingly. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mwiegand
parent
9618109f0f
commit
1ec5e80a73
1 changed files with 62 additions and 26 deletions
|
|
@ -51,40 +51,75 @@
|
||||||
- Create: `l4d2web/l4d2web/static/vendor/codejar.js`
|
- Create: `l4d2web/l4d2web/static/vendor/codejar.js`
|
||||||
- Create: `l4d2web/l4d2web/static/vendor/README.md`
|
- Create: `l4d2web/l4d2web/static/vendor/README.md`
|
||||||
|
|
||||||
- [ ] **Step 1: Build the Prism custom bundle**
|
- [ ] **Step 1: Assemble the Prism bundle via curl**
|
||||||
|
|
||||||
Open `https://prismjs.com/download.html#themes=prism&languages=clike+bash` in a browser. Set theme = "Default". Tick languages: `clike` (Bash depends on it), `bash`. Leave all plugins unchecked. Click "Download JS" and "Download CSS". Save them as `l4d2web/l4d2web/static/vendor/prism.js` and `l4d2web/l4d2web/static/vendor/prism.css`.
|
Prism ships per-component files at `cdn.jsdelivr.net/npm/prismjs@1.29.0/`. We concatenate three components — `core` (required), `clike` (bash depends on it), `bash` — into a single self-contained `prism.js`. Theme CSS is grabbed separately.
|
||||||
|
|
||||||
Verify the version string:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
head -1 l4d2web/l4d2web/static/vendor/prism.js | grep -oE 'v[0-9.]+'
|
|
||||||
```
|
|
||||||
|
|
||||||
Expected: a version like `v1.29.0`. Note it for the README.
|
|
||||||
|
|
||||||
- [ ] **Step 2: Download CodeJar**
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
mkdir -p l4d2web/l4d2web/static/vendor
|
mkdir -p l4d2web/l4d2web/static/vendor
|
||||||
curl -fsSL -o l4d2web/l4d2web/static/vendor/codejar.js \
|
VER=1.29.0
|
||||||
https://raw.githubusercontent.com/antonmedv/codejar/v4.0.0/codejar.js
|
BASE=https://cdn.jsdelivr.net/npm/prismjs@${VER}
|
||||||
|
|
||||||
|
# Concatenate core + clike + bash into one file, in the required load order.
|
||||||
|
{
|
||||||
|
echo "/* Prism v${VER} — core + clike + bash, assembled from ${BASE}/components/ */"
|
||||||
|
curl -fsSL "${BASE}/components/prism-core.min.js"
|
||||||
|
echo # newline separator between components
|
||||||
|
curl -fsSL "${BASE}/components/prism-clike.min.js"
|
||||||
|
echo
|
||||||
|
curl -fsSL "${BASE}/components/prism-bash.min.js"
|
||||||
|
} > l4d2web/l4d2web/static/vendor/prism.js
|
||||||
|
|
||||||
|
# Theme CSS (the default "prism" theme).
|
||||||
|
curl -fsSL -o l4d2web/l4d2web/static/vendor/prism.css \
|
||||||
|
"${BASE}/themes/prism.min.css"
|
||||||
```
|
```
|
||||||
|
|
||||||
Inspect the first few lines to confirm it's a CodeJar source file with the expected `export function CodeJar(...)` signature. Then convert it to a script that exposes `CodeJar` on `window` (the UMD form CodeJar ships is ESM; we need a `<script>`-loadable form):
|
Verify:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Append a small global-export shim
|
ls -la l4d2web/l4d2web/static/vendor/prism.{js,css}
|
||||||
|
grep -c 'Prism.languages.bash' l4d2web/l4d2web/static/vendor/prism.js
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: `prism.js` around 15–25 KB; `prism.css` around 1–3 KB. Grep count ≥1 (confirming the bash grammar got included).
|
||||||
|
|
||||||
|
- [ ] **Step 2: Download CodeJar from unpkg**
|
||||||
|
|
||||||
|
CodeJar publishes a browser-ready bundle to npm. unpkg/jsdelivr serve it directly:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
VER=4.0.0
|
||||||
|
curl -fsSL -o l4d2web/l4d2web/static/vendor/codejar.js \
|
||||||
|
"https://cdn.jsdelivr.net/npm/codejar@${VER}/codejar.js"
|
||||||
|
```
|
||||||
|
|
||||||
|
Inspect the first 5 lines to confirm it's a valid JS module:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
head -5 l4d2web/l4d2web/static/vendor/codejar.js
|
||||||
|
```
|
||||||
|
|
||||||
|
If the file uses ES module `export` syntax (`export function CodeJar` or `export { CodeJar }`), strip the export keyword and append a global shim so `<script>` tags can load it directly:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Strip ESM exports, then expose CodeJar on window.
|
||||||
|
sed -i.bak \
|
||||||
|
-e 's/^export function /function /' \
|
||||||
|
-e 's/^export { CodeJar }.*$//' \
|
||||||
|
-e 's/^export { CodeJar as default }.*$//' \
|
||||||
|
l4d2web/l4d2web/static/vendor/codejar.js
|
||||||
|
rm -f l4d2web/l4d2web/static/vendor/codejar.js.bak
|
||||||
|
|
||||||
cat >> l4d2web/l4d2web/static/vendor/codejar.js <<'EOF'
|
cat >> l4d2web/l4d2web/static/vendor/codejar.js <<'EOF'
|
||||||
|
|
||||||
// Browser global shim: surface CodeJar on window so non-module
|
// Browser global shim: surface CodeJar on window so non-module
|
||||||
// <script> tags can call it. The export above is preserved for
|
// <script> tags can call it.
|
||||||
// consumers that import the file as an ES module.
|
|
||||||
window.CodeJar = CodeJar;
|
window.CodeJar = CodeJar;
|
||||||
EOF
|
EOF
|
||||||
```
|
```
|
||||||
|
|
||||||
If the downloaded file uses ES `export` syntax that browsers refuse outside of `type="module"`, replace `export function CodeJar` with `function CodeJar` before the shim. Verify by opening the file and reading the first 5 lines.
|
If the CDN serves a UMD/IIFE bundle that already exposes `window.CodeJar`, the sed lines are no-ops and the final `window.CodeJar = CodeJar` will fail. In that case, open the file with `head -20` to confirm CodeJar is already on window, and either remove the shim or wrap it in a `typeof CodeJar !== 'undefined'` check. **If unsure, BLOCK and report what the file actually contains so the controller can advise.**
|
||||||
|
|
||||||
- [ ] **Step 3: Record SHA256s and source URLs in README.md**
|
- [ ] **Step 3: Record SHA256s and source URLs in README.md**
|
||||||
|
|
||||||
|
|
@ -99,16 +134,17 @@ verbatim from the upstream releases below. The strict CSP
|
||||||
|
|
||||||
| File | Upstream | Version | SHA256 |
|
| File | Upstream | Version | SHA256 |
|
||||||
|---|---|---|---|
|
|---|---|---|---|
|
||||||
| `prism.js` | https://prismjs.com/download.html (theme=prism, languages=clike,bash) | v1.29.0 | `<sha>` |
|
| `prism.js` | jsdelivr concat: prism-core.min.js + prism-clike.min.js + prism-bash.min.js | v1.29.0 | `<sha>` |
|
||||||
| `prism.css` | https://prismjs.com/download.html (theme=prism) | v1.29.0 | `<sha>` |
|
| `prism.css` | https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css | v1.29.0 | `<sha>` |
|
||||||
| `codejar.js` | https://github.com/antonmedv/codejar (release v4.0.0) + browser-global shim | v4.0.0 | `<sha>` |
|
| `codejar.js` | https://cdn.jsdelivr.net/npm/codejar@4.0.0/codejar.js + ESM-strip + browser-global shim | v4.0.0 | `<sha>` |
|
||||||
|
|
||||||
## Regenerating
|
## Regenerating
|
||||||
|
|
||||||
- **Prism:** Use the same configurator URL, tick the same languages,
|
- **Prism:** Re-run the three-component concat in Task 1 Step 1 of
|
||||||
re-download both files, drop in place.
|
`docs/superpowers/plans/2026-05-16-textarea-code-editor.md` with
|
||||||
- **CodeJar:** `curl` the raw release file as in this plan's Task 1
|
an updated `VER`, then re-download the theme CSS.
|
||||||
Step 2, then re-append the `window.CodeJar = CodeJar` shim.
|
- **CodeJar:** Re-download from jsdelivr per the same plan's Task 1
|
||||||
|
Step 2, strip ESM exports, re-append the `window.CodeJar` shim.
|
||||||
|
|
||||||
Bump the version + SHA columns in this table after any update.
|
Bump the version + SHA columns in this table after any update.
|
||||||
```
|
```
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue