diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
index c05565b6a..63c5e4b2d 100644
--- a/.github/workflows/CI.yml
+++ b/.github/workflows/CI.yml
@@ -16,30 +16,47 @@ jobs:
os: [ubuntu-latest, windows-latest]
steps:
- - uses: actions/checkout@v2
- - uses: actions/setup-node@v2
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
with:
- node-version: '14'
+ node-version: 16
+
+ - name: pnpm setup
+ uses: pnpm/action-setup@v2.2.4
+ with:
+ version: 7.17.0
+ run_install: true
- name: cache pnpm modules
- uses: actions/cache@v2
+ uses: actions/cache@v3
with:
path: ~/.pnpm-store
key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-
- - name: pnpm setup
- uses: pnpm/action-setup@v2.1.0
- with:
- version: 6.31.0
- run_install: true
+ - name: Install dependencies
+ run: pnpm install
+
+ - name: Install E2E test browsers
+ if: runner.os != 'Windows'
+ run: pnpm dlx playwright install --with-deps chromium
- - run: pnpm run build
- run: pnpm run update
+ - run: pnpm run build
- run: pnpm run gen
working-directory: ./packages/site
- run: pnpm run test
- env:
- CI: true
+
+ - name: Run E2E tests
+ if: runner.os != 'Windows'
+ run: pnpm run test:e2e
+
+ - name: Upload E2E results
+ uses: actions/upload-artifact@v3
+ if: runner.os != 'Windows'
+ with:
+ name: playwright-report
+ path: playwright-report/
+ retention-days: 30
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index f38e38cde..605d2334a 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -8,26 +8,32 @@ jobs:
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v1
- - uses: actions/setup-node@v2
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
with:
- node-version: '14'
+ node-version: 16
- name: cache pnpm modules
- uses: actions/cache@v2
+ uses: actions/cache@v3
with:
path: ~/.pnpm-store
key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-
- - uses: pnpm/action-setup@v2.1.0
+ - name: pnpm setup
+ uses: pnpm/action-setup@v2.2.4
with:
- version: 6.31.0
+ version: 7.17.0
run_install: true
- - run: pnpm run build
- run: pnpm run update
+ - run: pnpm run build
+
+ - run: pnpm run test
+
+ - name: Run E2E tests
+ run: pnpm run test:e2e
- name: Deploy npm Packages
run: npx pleb publish
diff --git a/.gitignore b/.gitignore
index d19810276..a7d26a37e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ node_modules
tsconfig.tsbuildinfo
tmp
-.DS_Store
\ No newline at end of file
+.DS_Store
+playwright-report/
\ No newline at end of file
diff --git a/package.json b/package.json
index cd6878523..bcd3c5e27 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
"dev": "pnpm -r --parallel watch",
"fmt": "prettier --write packages/**/*.ts",
"test": "cross-env NODE_OPTIONS=--max-old-space-size=4096 jest --colors",
+ "test:e2e": "npm run test:e2e:localserver & pnpm dlx playwright test",
+ "test:e2e:localserver": "node ./scripts/e2e/local-server.mjs",
"update": "npm run update:themes && npm run update:grammars",
"update:themes": "bash ./scripts/pullThemes.sh",
"update:grammars": "bash ./scripts/pullGrammars.sh"
@@ -21,7 +23,8 @@
]
},
"devDependencies": {
- "@rollup/plugin-commonjs": "^23.0.7",
+ "@playwright/test": "^1.29.0",
+ "@rollup/plugin-commonjs": "^24.0.0",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-replace": "^5.0.2",
"@rollup/plugin-terser": "^0.2.1",
@@ -47,6 +50,7 @@
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-dts": "^5.1.1",
"rollup-plugin-esbuild": "^5.0.0",
+ "superstatic": "^9.0.0",
"ts-jest": "^29.0.5",
"tsup": "^6.5.0",
"typescript": "^4.9.4",
@@ -55,6 +59,6 @@
},
"license": "MIT",
"dependencies": {
- "esbuild": "^0.16.7"
+ "esbuild": "^0.16.10"
}
}
diff --git a/packages/renderer-path/package.json b/packages/renderer-path/package.json
index 12881e1b1..597534155 100644
--- a/packages/renderer-path/package.json
+++ b/packages/renderer-path/package.json
@@ -25,10 +25,10 @@
"watch": "rollup -c -w"
},
"peerDependencies": {
- "shiki": "^0.12.0"
+ "shiki": "^0.12.1"
},
"devDependencies": {
- "@types/node": "^18.11.15",
+ "@types/node": "^18.11.17",
"@types/opentype.js": "^1.3.4",
"opentype.js": "^1.3.4",
"shiki": "^0.13.0"
diff --git a/packages/renderer-svg/package.json b/packages/renderer-svg/package.json
index 5173ccb44..5d9dff086 100644
--- a/packages/renderer-svg/package.json
+++ b/packages/renderer-svg/package.json
@@ -25,11 +25,11 @@
},
"peerDependencies": {
"playwright": "^1.9.2",
- "shiki": "^0.12.0"
+ "shiki": "^0.12.1"
},
"devDependencies": {
- "@types/node": "^18.11.15",
- "playwright": "^1.28.1",
+ "@types/node": "^18.11.17",
+ "playwright": "^1.29.0",
"shiki": "^0.13.0"
}
}
diff --git a/packages/shiki/.gitignore b/packages/shiki/.gitignore
new file mode 100644
index 000000000..75e854d8d
--- /dev/null
+++ b/packages/shiki/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/
diff --git a/packages/shiki/package.json b/packages/shiki/package.json
index d2628c5bd..8397db3cd 100644
--- a/packages/shiki/package.json
+++ b/packages/shiki/package.json
@@ -37,7 +37,7 @@
"vscode-textmate": "^8.0.0"
},
"devDependencies": {
- "@types/node": "^18.11.15"
+ "@types/node": "^18.11.17"
},
"browser": {
"fs": false,
diff --git a/packages/shiki/rollup.config.mjs b/packages/shiki/rollup.config.mjs
index 975e8aa65..101eb2303 100644
--- a/packages/shiki/rollup.config.mjs
+++ b/packages/shiki/rollup.config.mjs
@@ -57,7 +57,6 @@ export default defineConfig([
},
{
input: 'src/index.ts',
- external,
output: {
file: 'dist/index.browser.mjs',
format: 'esm',
diff --git a/packages/shiki/src/__tests__/__fixtures__/index_browser.html b/packages/shiki/src/__tests__/__fixtures__/index_browser.html
new file mode 100644
index 000000000..84c1e5022
--- /dev/null
+++ b/packages/shiki/src/__tests__/__fixtures__/index_browser.html
@@ -0,0 +1,20 @@
+
+
+ Test Browser
+
+
+
diff --git a/packages/shiki/src/__tests__/__fixtures__/index_browser_custom_cdn.html b/packages/shiki/src/__tests__/__fixtures__/index_browser_custom_cdn.html
new file mode 100644
index 000000000..7cf28c696
--- /dev/null
+++ b/packages/shiki/src/__tests__/__fixtures__/index_browser_custom_cdn.html
@@ -0,0 +1,22 @@
+
+
+ Test Browser - Custom CDN
+
+
+
diff --git a/packages/shiki/src/__tests__/__fixtures__/index_browser_custom_paths.html b/packages/shiki/src/__tests__/__fixtures__/index_browser_custom_paths.html
new file mode 100644
index 000000000..743916291
--- /dev/null
+++ b/packages/shiki/src/__tests__/__fixtures__/index_browser_custom_paths.html
@@ -0,0 +1,25 @@
+
+
+ Test Browser - Custom Paths
+
+
+
diff --git a/packages/shiki/src/__tests__/__fixtures__/index_browser_custom_wasm.html b/packages/shiki/src/__tests__/__fixtures__/index_browser_custom_wasm.html
new file mode 100644
index 000000000..ba8fc34bd
--- /dev/null
+++ b/packages/shiki/src/__tests__/__fixtures__/index_browser_custom_wasm.html
@@ -0,0 +1,23 @@
+
+
+ Test Browser - Custom Wasm
+
+
+
diff --git a/packages/shiki/src/__tests__/__fixtures__/index_jsdelivr.html b/packages/shiki/src/__tests__/__fixtures__/index_jsdelivr.html
new file mode 100644
index 000000000..a500c689a
--- /dev/null
+++ b/packages/shiki/src/__tests__/__fixtures__/index_jsdelivr.html
@@ -0,0 +1,20 @@
+
+
+ Test jsDelivr
+
+
+
+
+
+
+
diff --git a/packages/shiki/src/__tests__/__fixtures__/index_unpkg.html b/packages/shiki/src/__tests__/__fixtures__/index_unpkg.html
new file mode 100644
index 000000000..dd066450d
--- /dev/null
+++ b/packages/shiki/src/__tests__/__fixtures__/index_unpkg.html
@@ -0,0 +1,20 @@
+
+
+ Test unpgk
+
+
+
+
+
+
+
diff --git a/packages/shiki/src/__tests__/e2e.browser.spec.ts b/packages/shiki/src/__tests__/e2e.browser.spec.ts
new file mode 100644
index 000000000..75a176113
--- /dev/null
+++ b/packages/shiki/src/__tests__/e2e.browser.spec.ts
@@ -0,0 +1,88 @@
+// @ts-check
+import { chromium, test, expect } from '@playwright/test'
+
+test.describe('Browser bundle', async () => {
+ test(`with default paths loads embedded languages and renders code block`, async () => {
+ const browser = await chromium.launch()
+ const page = await browser.newPage()
+
+ let countLanguageRequests = 0
+
+ page.on('response', response => {
+ if (response.url().endsWith('tmLanguage.json')) countLanguageRequests++
+ })
+
+ await page.goto(`/index_browser.html`)
+
+ const codeLocator = await page.getByRole('code')
+
+ await expect(codeLocator).toBeVisible()
+
+ expect(countLanguageRequests).toBeGreaterThan(1)
+
+ await browser.close()
+ })
+
+ test(`with custom path loads embedded languages and renders code block`, async () => {
+ const browser = await chromium.launch()
+ const page = await browser.newPage()
+
+ let countLanguageRequests = 0
+
+ page.on('response', response => {
+ if (response.url().endsWith('tmLanguage.json')) countLanguageRequests++
+ })
+
+ await page.goto(`/index_browser_custom_paths.html`)
+
+ const codeLocator = await page.getByRole('code')
+
+ await expect(codeLocator).toBeVisible()
+
+ expect(countLanguageRequests).toBeGreaterThan(1)
+
+ await browser.close()
+ })
+
+ test(`with custom setCDN loads embedded languages and renders code block`, async () => {
+ const browser = await chromium.launch()
+ const page = await browser.newPage()
+
+ let countLanguageRequests = 0
+
+ page.on('response', response => {
+ if (response.url().endsWith('tmLanguage.json')) countLanguageRequests++
+ })
+
+ await page.goto(`/index_browser_custom_cdn.html`)
+
+ const codeLocator = await page.getByRole('code')
+
+ await expect(codeLocator).toBeVisible()
+
+ expect(countLanguageRequests).toBeGreaterThan(1)
+
+ await browser.close()
+ })
+
+ test(`with custom setWasm loads embedded languages and renders code block`, async () => {
+ const browser = await chromium.launch()
+ const page = await browser.newPage()
+
+ let countLanguageRequests = 0
+
+ page.on('response', response => {
+ if (response.url().endsWith('tmLanguage.json')) countLanguageRequests++
+ })
+
+ await page.goto(`/index_browser_custom_wasm.html`)
+
+ const codeLocator = await page.getByRole('code')
+
+ await expect(codeLocator).toBeVisible()
+
+ expect(countLanguageRequests).toBeGreaterThan(1)
+
+ await browser.close()
+ })
+})
diff --git a/packages/shiki/src/__tests__/e2e.cdn.spec.ts b/packages/shiki/src/__tests__/e2e.cdn.spec.ts
new file mode 100644
index 000000000..7ad473295
--- /dev/null
+++ b/packages/shiki/src/__tests__/e2e.cdn.spec.ts
@@ -0,0 +1,62 @@
+// @ts-check
+import { chromium, test, expect } from '@playwright/test'
+
+const CDN_CONFIGURATIONS = [
+ { name: 'jsDelivr', url: 'https://cdn.jsdelivr.net/npm/shiki' },
+ { name: 'unpkg', url: 'https://unpkg.com/shiki' }
+]
+
+test.describe('CDN bundle', () => {
+ for (const cdnConfig of CDN_CONFIGURATIONS) {
+ test(`for ${cdnConfig.name} loads embedded languages and renders code block`, async ({
+ baseURL
+ }) => {
+ const browser = await chromium.launch()
+ const page = await browser.newPage()
+
+ let countLanguageRequests = 0
+
+ await page.route('**', async route => {
+ const request = route.request()
+
+ let requestURL = request.url()
+
+ // Checking if all requests go to the CDN
+ if (!requestURL.endsWith('.html')) {
+ expect(requestURL).toContain(cdnConfig.url)
+ requestURL = normalizeURL(requestURL, cdnConfig.url, baseURL)
+
+ // Counting language requests
+ if (requestURL.endsWith('tmLanguage.json')) countLanguageRequests++
+ }
+
+ const response = await page.request.fetch(requestURL)
+
+ route.fulfill({
+ response
+ })
+ })
+
+ await page.goto(`/index_${cdnConfig.name.toLowerCase()}.html`)
+
+ const codeLocator = await page.getByRole('code')
+
+ await expect(codeLocator).toBeVisible()
+
+ expect(countLanguageRequests).toBeGreaterThan(1)
+
+ await browser.close()
+ })
+ }
+})
+
+function normalizeURL(remoteUrl, cdnUrl, baseUrl) {
+ // If it's not the base CDN call we're removing the version number
+ // and modify the request to serve from localhost
+ if (remoteUrl !== cdnUrl) {
+ return remoteUrl
+ .replace(cdnUrl, baseUrl)
+ .replace(/@[0-9]\.[0-9][0-9]?\.[0-9][0-9]?(\.[0-9][0-9])?/, '')
+ }
+ return remoteUrl
+}
diff --git a/packages/site/gen-palenight.js b/packages/site/gen-palenight.js
index 5705e7714..ac868549c 100644
--- a/packages/site/gen-palenight.js
+++ b/packages/site/gen-palenight.js
@@ -4,7 +4,7 @@ const shiki = require('shiki')
shiki
.getHighlighter({
- theme: 'material-palenight'
+ theme: 'material-theme-palenight'
})
.then(highlighter => {
const md = markdown({
diff --git a/packages/site/index.html b/packages/site/index.html
index a2b590d2c..fdf59a1ca 100644
--- a/packages/site/index.html
+++ b/packages/site/index.html
@@ -5,7 +5,7 @@ shiki
Shiki is a beautiful Syntax Highlighter.
It uses TextMate grammar to tokenize strings, and colors the tokens with VS Code themes. In short, Shiki generates HTML that looks exactly like your code in VS Code, and it works great in your static website generator (or your dynamic website).
It's simple to use:
-const shiki = require ( ' shiki ' ) const shiki = require ( ' shiki ' ) shiki . getHighlighter ( { theme : ' nord ' shiki
// </code></pre> Here's me using Shiki and markdown-it to generate this page:
-const fs = require ( ' fs ' ) const fs = require ( ' fs ' ) const markdown = require ( ' markdown-it ' ) const shiki = require ( ' shiki ' ) shiki
} ) Why Shiki though? Take a look at this monstrous TextMate grammar . It's what highlights TypeScript code in VS Code. Insane, I know. But it gets the color right.
-import * as React from ' react ' ; import * as React from ' react ' ; import ' ./App.css ' ; import Hello from ' ./components/Hello ' ; shiki
export default App ; Besides VS Code, TextMate (of course), Sublime Text and Atom all support TextMate grammar . If you can get syntax highlighting to work for your favorite language in any one of them, try to find its grammar and load it in Shiki to syntax highlight it:
-const shiki = require ( ' shiki ' ) const shiki = require ( ' shiki ' ) shiki . getHighlighter ( { theme : ' nord ' , shiki
Over 100 programming languages are supported out of the box, including a traditional Chinese one, 文言 :
Shiki can load any VS Code themes. Just change this line:
-shiki . getHighlighter ( { shiki . getHighlighter ( { theme : ' material-theme-palenight ' } ) shiki
You can find all bundled themes in shiki-themes , and use them like:
-shiki . getHighlighter ( { shiki . getHighlighter ( { // 'dark-plus' | 'light-plus' => for the classic VS Code feel // 'github-dark' | 'github-light' => for the GitHub feel // 'material-theme-*' => for the materialists shiki
But really, any VS Code theme will do. Here's anotherglitchinthematrix/monochrome :
Embedded language like Vue works great, too:
-<template> <template> <div id = " app " > <h1> My Todo App! </h1> < TodoList / > < TodoList /> </div> </template> shiki
} </script> <style lang = " scss " > <style lang = " scss " > # app { max-width : 400 px; margin : 0 auto; shiki
and use the full arsenal of vector editing tools to enhance your code presentation:
You can also build custom renderers to generate anything — a different HTML structure, SVG, or even images:
-const shiki = require ( ' shiki ' ) const shiki = require ( ' shiki ' ) shiki . getHighlighter ( { theme : ' nord ' const shiki = require ( ' shiki ' ) const shiki = require ( ' shiki ' ) shiki . getHighlighter ({ theme: JSON. parse ( fs . readFileSync ( ' ./monochrome-dark-subtle.json ' , ' utf-8 ' )) theme: JSON . parse ( fs . readFileSync ( ' ./monochrome-dark-subtle.json ' , ' utf-8 ' )) }) import * as React from ' react ' ; import * as React from ' react ' ; import ' ./App.css ' ; import Hello from ' ./components/Hello ' ; Midnight takes your heart and your soul Midnight takes your heart and your soul While your heart is as high as your soul Put your heart without your soul into your heart
-
+
const fs = require ( ' fs ' )
diff --git "a/packages/site/\346\226\207\350\250\200.html" "b/packages/site/\346\226\207\350\250\200.html"
index fb409ecfc..9c657bda8 100644
--- "a/packages/site/\346\226\207\350\250\200.html"
+++ "b/packages/site/\346\226\207\350\250\200.html"
@@ -1,4 +1,4 @@
-吾有 一 言 。 曰 「「春日宴。」」 。 書之 。 吾有 一 言 。 曰 「「春日宴。」」 。 書之 。 有數 九 。 名之曰 「酒數」 。 恆為是 。 若 「酒數」 等於 零 者乃止也 。 