Skip to content

feat: add @shikijs/stream and @shikijs/magic-move packages#1283

Merged
antfu merged 2 commits into
mainfrom
opencode/swift-harbor
Jun 2, 2026
Merged

feat: add @shikijs/stream and @shikijs/magic-move packages#1283
antfu merged 2 commits into
mainfrom
opencode/swift-harbor

Conversation

@antfu

@antfu antfu commented Jun 2, 2026

Copy link
Copy Markdown
Member

Summary

Ports two community packages — antfu/shiki-stream and shikijs/shiki-magic-move — into this monorepo as official @shikijs/* packages.

Old name New name
shiki-stream @shikijs/stream
shiki-magic-move @shikijs/magic-move

Implementation and playgrounds are preserved verbatim from upstream; only package identity and monorepo integration changed.

What's in each package

@shikijs/stream — streaming colorization, useful for highlighting LLM output and other text streams. Exposes:

  • . — core (CodeToTokenTransformStream, RecallToken, etc.)
  • ./vue, ./react, ./solid — renderer components

@shikijs/magic-move — smoothly animated code blocks (used by Slidev). Exposes:

  • ./core, ./renderer, ./types, ./style.css — framework-agnostic
  • ./vue, ./react, ./solid, ./svelte — framework adapters
  • web-component build (reachable via dist/web-component.mjs)

Source rewrites (minimum needed for the rename)

  • packages/magic-move/src/index.ts — error message refers to @shikijs/magic-move
  • packages/magic-move/src/svelte/*.svelte — cross-subpath imports updated (shiki-magic-move/types@shikijs/magic-move/types, etc.). These are runtime imports that Svelte's bundler resolves against the published package name, so they have to match the new name.

CSS class names (shiki-magic-move-*, shiki-stream) and custom-element tag names (shiki-magic-move, shiki-magic-move-precompiled, shiki-magic-move-renderer) are kept as-is because they are public CSS / DOM API surfaces — changing them would break downstream consumers.

Monorepo infrastructure changes

  • pnpm-workspace.yaml
    • New catalog entries for unbuild, framework Vite plugins (Vue / React / Solid / Svelte), and babel presets (@babel/preset-typescript, @babel/preset-react, babel-preset-solid).
    • Added overrides: { semver: ^7.8.0 } to satisfy the workspace's trustPolicy: no-downgradevite-plugin-solid → @babel/core pulls in semver@6.3.1, which lacks provenance. Both upstreams already pin semver to ^7.x in their own resolutions for the same reason.
  • tsconfig.json
    • jsx: preserve and allowImportingTsExtensions: true to support the Solid .tsx re-exports (packages/stream/src/solid/index.ts does export * from './renderer.tsx').
    • paths entries for @shikijs/stream{,/vue,/react,/solid} and @shikijs/magic-move{,/core,/renderer,/types,/vue,/react,/solid,/svelte}.
  • test/exports.test.ts — extended the existing resolveExportEntries filter to skip framework-adapter subpaths (./vue, ./react, ./solid, ./svelte) because the root vitest env doesn't load the Solid / Svelte / React JSX toolchains. Also skips the @shikijs/magic-move bare entry which intentionally throws by upstream design.
  • docs/.vitepress/config.ts — added Stream and Magic Move entries to the INTEGRATIONS array (nav + sidebar).
  • New docs pagesdocs/packages/stream.md, docs/packages/magic-move.md, modeled on the existing transformers.md / monaco.md pattern.

Verification

  • pnpm install ✅ clean
  • pnpm -r run build ✅ all 21 workspace packages including both new ones
  • pnpm typecheck (vue-tsc) ✅ zero errors
  • pnpm exec vitest run packages/stream packages/magic-move test/exports.test.ts ✅ 4 files / 23 tests pass
  • Full workspace test run ✅ 77 / 77 files, 606 / 606 tests

Pre-existing notes (not introduced by this PR)

  • packages/shiki/test/bundle.test.ts > bundle-full is slow under workspace contention — passes in ~8s in isolation but can time out at the 30s default when the full workspace runs in parallel. Pre-existing flake, not caused by this change.
  • Two unrelated snapshots showed drift when I ran vitest -u (engine-javascript record + a Vue grammar HTML snapshot in shiki tests). Both are upstream drift that already exists on main — reverted, out of scope here.

Follow-ups (deliberately out of scope)

  • Publish deprecation notices on the old npm packages (shiki-stream, shiki-magic-move) that point at the new @shikijs/* names — needs an explicit release step.
  • The playgrounds still link to the original upstream GitHub repos (e.g. https://github.com/antfu/shiki-stream). Kept as-is per the migration spec; easy to update later if you want them to point at this monorepo.

Ports antfu/shiki-stream and shikijs/shiki-magic-move into the monorepo
as official packages under the @shikijs/* namespace. Implementation and
playgrounds are kept verbatim from upstream; only package identity and
monorepo integration changed.

Packages:
- @shikijs/stream (was shiki-stream): streaming colorization,
  Vue/React/Solid renderer subpaths. Useful for highlighting LLM
  output and other text streams.
- @shikijs/magic-move (was shiki-magic-move): smoothly animated code
  blocks, with Vue/React/Solid/Svelte/web-component adapters.

Source rewrites (minimum needed for rename):
- magic-move src/index.ts: error message refers to new package name.
- magic-move .svelte components: cross-subpath imports updated to
  @shikijs/magic-move/{types,core,renderer}.

Infra:
- pnpm-workspace.yaml: catalog entries for unbuild, framework plugins,
  babel presets; semver override to satisfy trust-policy
  (vite-plugin-solid -> @babel/core pulls in semver@6.3.1 which lacks
  provenance).
- tsconfig.json: jsx: preserve and allowImportingTsExtensions for the
  Solid .tsx re-exports; paths for both packages and all subpaths.
- test/exports.test.ts: filter framework-adapter subpaths (their
  toolchains aren't loaded in the root vitest env) and the magic-move
  bare entry (throws by design upstream).
- docs/packages/{stream,magic-move}.md: new doc pages modeled on the
  existing transformers/monaco pages.
- docs/.vitepress/config.ts: INTEGRATIONS sidebar entries.
@netlify

netlify Bot commented Jun 2, 2026

Copy link
Copy Markdown

Deploy Preview for shiki-matsu ready!

Name Link
🔨 Latest commit 1bc1367
🔍 Latest deploy log https://app.netlify.com/projects/shiki-matsu/deploys/6a1ed1d5a4c5c70008cb596a
😎 Deploy Preview https://deploy-preview-1283--shiki-matsu.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Jun 2, 2026

Copy link
Copy Markdown

Deploy Preview for shiki-next ready!

Name Link
🔨 Latest commit 1bc1367
🔍 Latest deploy log https://app.netlify.com/projects/shiki-next/deploys/6a1ed1d5fcd07400083a7851
😎 Deploy Preview https://deploy-preview-1283--shiki-next.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov

codecov Bot commented Jun 2, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.50%. Comparing base (c809af9) to head (1bc1367).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #1283   +/-   ##
=======================================
  Coverage   89.50%   89.50%           
=======================================
  Files          79       79           
  Lines        3516     3516           
  Branches     1000     1000           
=======================================
  Hits         3147     3147           
  Misses        331      331           
  Partials       38       38           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Lint fixes for the @shikijs/stream and @shikijs/magic-move port:

- eslint.config.js: disable ts/explicit-function-return-type for the two
  new packages, matching the existing override pattern for Vue files and
  docs. The new packages ship framework adapter components whose return
  types are inferred from JSX.
- packages/stream/src/react/renderer.ts: drop two upstream
  eslint-disable directives that target react-hooks-extra/* rules. The
  plugins they reference are not loaded in this monorepo's lint env, so
  the directives surface as 'rule not found' errors.
- pnpm-workspace.yaml: move overrides after packages (yaml/sort-keys)
  and remove the duplicate diff-match-patch-es catalog entry; the
  pre-existing testing catalog already has it.
- packages/magic-move/package.json: route diff-match-patch-es through
  catalog:testing to consolidate on the existing entry.
- tsconfig.json: reorder allowImportingTsExtensions after types
  (jsonc/sort-keys).
- vitest.config.ts: exclude packages/stream and packages/magic-move
  from coverage, matching the existing precedent for packages/cli,
  packages/monaco, and packages/vitepress-twoslash (integration packages
  hard to cover via unit tests). Fixes codecov/patch and codecov/project.
@antfu antfu merged commit d031f9b into main Jun 2, 2026
15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant