chore: update to shiki

examples/astro/astro.config.ts

@@ -1,6 +1,3 @@
-import 'dotenv/config';
-Object.assign(process.env, { ASTRO_TELEMETRY_DISABLED: 1 });
-
 import mdx from '@astrojs/mdx';
 import tailwind from '@astrojs/tailwind';
 import { defineConfig } from 'astro/config';

package.json

@@ -14,13 +14,11 @@
     },
     "./package.json": "./package.json"
   },
-  "files": [
-    "dist",
-    "package.json"
-  ],
+  "files": ["dist", "package.json"],
+  "repository": "github:atomiks/rehype-pretty-code",
   "scripts": {
     "build": "tsup --config=tsup.config.ts",
-    "test": "vitest",
+    "test": "vitest --run",
     "format": "biome format . --write",
     "lint": "biome check --apply .",
     "typecheck": "tsc --project tsconfig.json --noEmit",
@@ -43,35 +41,29 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.5.3",
-    "@types/bun": "^1.0.3",
-    "@types/node": "^20.11.5",
+    "@types/bun": "^1.0.5",
+    "@types/node": "^20.11.16",
     "bumpp": "^9.3.0",
-    "bun": "^1.0.25",
+    "bun": "^1.0.26",
     "hast-util-to-html": "^9.0.0",
-    "husky": "^8.0.3",
+    "husky": "^9.0.10",
     "mdast-util-to-hast": "^13.1.0",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "remark": "^15.0.1",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
-    "vitest": "^1.2.1",
-    "shikiji": "^0.10.0",
-    "shikiji-transformers": "^0.10.0"
+    "vitest": "^1.2.2",
+    "@shikijs/transformers": "^1.0.0",
+    "shiki": "^1.0.0"
   },
   "peerDependencies": {
-    "shikiji": "^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0"
+    "shiki": "^1.0.0"
   },
   "engines": {
     "node": ">=18"
   },
-  "browserslist": [
-    "node 18"
-  ],
+  "browserslist": ["node 18"],
   "author": "https://github.com/atomiks",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/atomiks/rehype-pretty-code.git"
-  }
+  "license": "MIT"
 }

src/index.ts

@@ -1,12 +1,14 @@
 import type { Element, ElementContent, ElementData, Root } from 'hast';
-import type { Options, Theme } from './types';
-import type { CharsHighlighterOptions } from './types';
-import type { Highlighter, CodeToHastOptions } from 'shikiji';
+import type { Options, Theme, CharsHighlighterOptions } from './types';
+import {
+  type Highlighter,
+  type CodeToHastOptions,
+  getHighlighter as defaultGetHighlighter,
+} from 'shiki';
 import type { Transformer } from 'unified';
 import { visit } from 'unist-util-visit';
 import { toString as hastToString } from 'hast-util-to-string';
 import rangeParser from 'parse-numeric-range';
-import { getHighlighter as defaultGetHighlighter } from 'shikiji';
 import { unified } from 'unified';
 import rehypeParse from 'rehype-parse';
 import { charsHighlighter } from './chars/charsHighlighter';

src/types.ts

@@ -3,8 +3,8 @@ import type {
   Highlighter,
   BuiltinTheme,
   ThemeRegistrationRaw,
-  ShikijiTransformer,
-} from 'shikiji';
+  ShikiTransformer,
+} from 'shiki';
 import type { Element, Properties, Text } from 'hast';
 
 export type LineElement = Omit<Element, 'properties'> & {
@@ -24,7 +24,7 @@ export interface Options {
   keepBackground?: boolean;
   defaultLang?: string | { block?: string; inline?: string };
   tokensMap?: Record<string, string>;
-  transformers?: ShikijiTransformer[];
+  transformers?: ShikiTransformer[];
   filterMetaString?(str: string): string;
   getHighlighter?(
     options: BundledHighlighterOptions<any, any>,

src/utils.ts

@@ -1,6 +1,6 @@
 import type { Theme } from './types';
 import type { Element, ElementContent, Root, RootContent, Text } from 'hast';
-import type { ThemeRegistrationRaw } from 'shikiji';
+import type { ThemeRegistrationRaw } from 'shiki';
 import rangeParser from 'parse-numeric-range';
 
 export function isJSONTheme(value: any): value is ThemeRegistrationRaw {
@@ -55,6 +55,7 @@ export function parseBlockMetaString(
   defaultFallback: string,
 ) {
   let meta = filter(
+    // @ts-expect-error: TODO handle this
     (element.data?.meta ?? element.properties?.metastring ?? '') as string,
   );
 

test/fixtures.test.js

@@ -5,10 +5,10 @@ import { toHtml } from 'hast-util-to-html';
 import { toHast } from 'mdast-util-to-hast';
 import { dirname, join, parse } from 'node:path';
 import { remark } from 'remark';
-import { getHighlighter as shikiHighlighter } from 'shikiji';
+import { getHighlighter as shikiHighlighter } from 'shiki';
 import { fileURLToPath } from 'node:url';
 import qs from 'node:querystring';
-import { transformerNotationDiff } from 'shikiji-transformers';
+import { transformerNotationDiff } from '@shikijs/transformers';
 import prettier from 'prettier';
 
 const __filename = fileURLToPath(import.meta.url);

tsconfig.json

@@ -17,7 +17,7 @@
     "baseUrl": ".",
     "downlevelIteration": true
   },
-  "include": ["src/**/*", "scripts", "index.d.ts"],
+  "include": ["src/**/*", "scripts", "index.d.ts", "./scripts"],
   "files": ["tsup.config.ts"],
   "exclude": ["node_modules"]
 }

website/src/app/index.mdx

@@ -1,7 +1,7 @@
 {/* prettier-ignore */}
 <div>
   [`rehype-pretty-code`](https://github.com/atomiks/rehype-pretty-code) <span className="mix-blend-plus-lighter text-zinc-400/80">is a Rehype plugin powered by the</span>
-  [`shikiji`](https://github.com/antfu/shikiji) <span className="mix-blend-plus-lighter text-zinc-400/80">syntax highlighter that provides beautiful code blocks for Markdown or MDX. It works on both the server at build-time (avoiding runtime syntax highlighting) and on the client for dynamic highlighting.</span>
+  [`shiki`](https://github.com/shikijs/shiki) <span className="mix-blend-plus-lighter text-zinc-400/80">syntax highlighter that provides beautiful code blocks for Markdown or MDX. It works on both the server at build-time (avoiding runtime syntax highlighting) and on the client for dynamic highlighting.</span>
 </div>
 
 ## Editor-Grade Highlighting
@@ -119,11 +119,11 @@ Inline ANSI: `> Local: http://localhost:3000/{:ansi}`
 Install via your terminal:
 
 ```shell
-npm install rehype-pretty-code shikiji@^0.9.0
+npm install rehype-pretty-code shiki
 ```
 
-This package is ESM-only and currently supports `shikiji{:.string}`
-`^0.7.0 - ^0.9.0{:.string}`.
+This package is ESM-only and currently supports `shiki{:.string}`
+`^1.0.0-beta.0{:.string}`.
 
 > To use the latest version in Next.js, ensure your config file is `ESM`:
 > `next.config.mjs`. Here's a full example:
@@ -220,7 +220,7 @@ interface Options {
   keepBackground?: boolean;
   defaultLang?: string | { block?: string; inline?: string };
   tokensMap?: Record<string, string>;
-  transformers?: ShikijiTransformer[];
+  transformers?: ShikiTransformer[];
   filterMetaString?(str: string): string;
   getHighlighter?(options: BundledHighlighterOptions): Promise<Highlighter>;
   onVisitLine?(element: LineElement): void;
@@ -246,8 +246,8 @@ const options = {
 
 ### `theme{:.meta.object-literal.key}`
 
-The default theme is `github-dark-dimmed{:.string}`. Shikiji has a bunch of
-[pre-packaged themes](https://github.com/antfu/shikiji/blob/main/docs/themes.md),
+The default theme is `github-dark-dimmed{:.string}`. Shiki has a bunch of
+[pre-packaged themes](https://shiki.style/themes#themes),
 which can be specified as a plain string:
 
 ```js
@@ -302,14 +302,14 @@ const options = {
 
 ### `transformers{:.meta.object-literal.key}`
 
-[Transformers](https://github.com/antfu/shikiji#hast-transformers) are a
-Shikiji-native way to manipulate the `hAST` tree of the code blocks and further
+[Transformers](https://shiki.style/guide/transformers#transformers) are a
+Shiki-native way to manipulate the `hAST` tree of the code blocks and further
 extend the behavior of this plugin. The
-[`shikiji-transformers`](https://www.npmjs.com/package/shikiji-transformers)
+[`@shikijs/transformers`](https://npm.im/@shikijs/transformers)
 package provides some useful transformers.
 
 ```js
-import { transformerNotationDiff } from "shikiji-transformers";
+import { transformerNotationDiff } from '@shikijs/transformers';
 
 const options = {
   transformers: [transformerNotationDiff()],
@@ -544,7 +544,7 @@ const options = {
 
 Now, use the following CSS to display the variable colors — if a space is found
 in the theme name, then CSS variable keys based on the object are available
-([more info](https://github.com/antfu/shikiji#lightdark-dual-themes)):
+([more info](https://shiki.style/guide/dual-themes#light-dark-dual-themes)):
 
 ```scss
 code[data-theme*=" "],
@@ -598,10 +598,10 @@ const options = {
 
 To completely configure the highlighter, use the
 `getHighlighter{:.entity.name.function}` option. This is helpful if you'd like
-to configure other Shikiji options, such as `langs{:.meta.object-literal.key}`.
+to configure other Shiki options, such as `langs{:.meta.object-literal.key}`.
 
 ```js
-import { getHighlighter } from "shikiji";
+import { getHighlighter } from "shiki";
 
 const options = {
   getHighlighter: (options) =>