feat(cli): support passing remote file url (#1139)

Author: o-az

docs/packages/cli.md

@@ -7,11 +7,17 @@ Shiki in the command line.
 ## Usage
 
 The Shiki CLI works like `cat` command, but with syntax highlighting.
+It also supports remote files.
 
 ```bash
 npx @shikijs/cli README.md
 ```
 
+```bash
+npx @shikijs/cli \
+  'https://github.com/shikijs/shiki/blob/main/taze.config.ts?raw=true'
+```
+
 ## Install
 
 You can also install it globally. Command aliases `@shikijs/cli`, `shiki`, `skat` are registered.

packages/cli/src/cli.ts

@@ -6,6 +6,37 @@ import cac from 'cac'
 import { version } from '../package.json'
 import { codeToANSI } from './code-to-ansi'
 
+export function isUrl(path: string): boolean {
+  return path.startsWith('http://') || path.startsWith('https://')
+}
+
+export function getExtFromUrl(url: string): string {
+  try {
+    const pathname = new URL(url).pathname
+    return parse(pathname).ext.slice(1)
+  }
+  catch {
+    return ''
+  }
+}
+
+export async function readSource(path: string): Promise<{ content: string, ext: string }> {
+  if (isUrl(path)) {
+    const response = await fetch(path)
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ${path}: ${response.status} ${response.statusText}`)
+    }
+    const content = await response.text()
+    const ext = getExtFromUrl(path)
+    return { content, ext }
+  }
+  else {
+    const content = await fs.readFile(path, 'utf-8')
+    const ext = parse(path).ext.slice(1)
+    return { content, ext }
+  }
+}
+
 export async function run(
   argv = process.argv,
   log = console.log,
@@ -22,9 +53,9 @@ export async function run(
   const files = args
 
   const codes = await Promise.all(files.map(async (path) => {
-    const content = await fs.readFile(path, 'utf-8')
-    const ext = options.lang || parse(path).ext.slice(1)
-    return await codeToANSI(content, ext as BundledLanguage, options.theme)
+    const { content, ext } = await readSource(path)
+    const lang = options.lang || ext
+    return await codeToANSI(content, lang as BundledLanguage, options.theme)
   }))
 
   for (const code of codes)

packages/cli/test/cli.test.ts

@@ -0,0 +1,130 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { getExtFromUrl, isUrl, readSource, run } from '../src/cli'
+
+describe('isUrl', () => {
+  it('valid URL', () => {
+    expect(isUrl('http://localhost:3000/file.ts')).toBe(true)
+    expect(isUrl('https://raw.githubusercontent.com/shikijs/shiki/refs/heads/main/taze.config.ts')).toBe(true)
+    expect(isUrl('/absolute/path/file.ts')).toBe(false)
+    expect(isUrl('relative/path/file.ts')).toBe(false)
+    expect(isUrl('file.ts')).toBe(false)
+  })
+})
+
+describe('getExtFromUrl', () => {
+  it('extracts extension', () => {
+    expect(getExtFromUrl('https://example.com/file.ts')).toBe('ts')
+    expect(getExtFromUrl('https://shiki.style/guide.html')).toBe('html')
+  })
+
+  it('handles query params', () => {
+    expect(getExtFromUrl('https://github.com/shikijs/shiki/blob/main/taze.config.ts?raw=true')).toBe('ts')
+  })
+
+  it('invalid URL', () => {
+    expect(getExtFromUrl('not-a-url')).toBe('')
+  })
+})
+
+describe('readSource', () => {
+  const testDir = path.join(import.meta.dirname, '__fixtures__')
+  const testFile = path.join(testDir, 'test.ts')
+  const testContent = 'const x: number = 1'
+
+  beforeEach(async () => {
+    await fs.mkdir(testDir, { recursive: true })
+    await fs.writeFile(testFile, testContent)
+  })
+
+  afterEach(async () => {
+    await fs.rm(testDir, { recursive: true, force: true })
+  })
+
+  it('local file', async () => {
+    const result = await readSource(testFile)
+    expect(result.content).toBe(testContent)
+    expect(result.ext).toBe('ts')
+  })
+
+  it('remote URL', async () => {
+    const mockContent = 'export const foo = "bar"'
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: true,
+      text: () => Promise.resolve(mockContent),
+    }))
+
+    const result = await readSource('https://example.com/file.js')
+    expect(result.content).toBe(mockContent)
+    expect(result.ext).toBe('js')
+
+    vi.unstubAllGlobals()
+  })
+
+  it('failed fetch', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: false,
+      status: 404,
+      statusText: 'Not Found',
+    }))
+
+    await expect(readSource('https://example.com/missing.js'))
+      .rejects
+      .toThrowError('Failed to fetch https://example.com/missing.js: 404 Not Found')
+
+    vi.unstubAllGlobals()
+  })
+})
+
+describe('run', () => {
+  const testDir = path.join(import.meta.dirname, '__fixtures__')
+  const testFile = path.join(testDir, 'sample.ts')
+
+  beforeEach(async () => {
+    await fs.mkdir(testDir, { recursive: true })
+    await fs.writeFile(testFile, 'const x = 1')
+  })
+
+  afterEach(async () => {
+    await fs.rm(testDir, { recursive: true, force: true })
+  })
+
+  it('local file', async () => {
+    const output: string[] = []
+    await run(['node', 'shiki', testFile], msg => output.push(msg))
+
+    expect(output.length).toBe(1)
+    expect(output[0]).toContain('const')
+  })
+
+  it('remote URL', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: true,
+      text: () => Promise.resolve('const y = 2'),
+    }))
+
+    const output: string[] = []
+    await run(['node', 'shiki', 'https://example.com/code.ts'], msg => output.push(msg))
+
+    expect(output.length).toBe(1)
+    expect(output[0]).toContain('const')
+
+    vi.unstubAllGlobals()
+  })
+
+  it('--lang option', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: true,
+      text: () => Promise.resolve('print("hello")'),
+    }))
+
+    const output: string[] = []
+    await run(['node', 'shiki', '--lang', 'python', 'https://example.com/code'], msg => output.push(msg))
+
+    expect(output.length).toBe(1)
+    expect(output[0]).toContain('print')
+
+    vi.unstubAllGlobals()
+  })
+})