@charcoal-ui/icons-cli 5.8.1 → 5.9.0-beta.1

package/src/figma/FigmaFileClient.test.ts

@@ -0,0 +1,218 @@
+import path from 'node:path'
+import { readFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import fs from 'fs-extra'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { FigmaFileClient } from './FigmaFileClient'
+
+const { mockFile, mockFileImages, mockGotGet } = vi.hoisted(() => {
+  return {
+    mockFile: vi.fn(),
+    mockFileImages: vi.fn(),
+    mockGotGet: vi.fn(),
+  }
+})
+
+vi.mock('figma-js', () => {
+  return {
+    Client: vi.fn(() => ({
+      file: mockFile,
+      fileImages: mockFileImages,
+    })),
+  }
+})
+
+vi.mock('got', () => {
+  return {
+    default: {
+      get: mockGotGet,
+    },
+  }
+})
+
+function createV2FileResponse({
+  setName,
+  componentName,
+}: {
+  setName: string
+  componentName: string
+}) {
+  return {
+    data: {
+      document: {
+        children: [
+          {
+            type: 'CANVAS',
+            name: 'Icons 一覧',
+            children: [
+              {
+                type: 'FRAME',
+                name: 'Frame',
+                children: [
+                  {
+                    type: 'COMPONENT_SET',
+                    id: 'set-1',
+                    name: setName,
+                    children: [
+                      {
+                        type: 'COMPONENT',
+                        id: 'component-1',
+                        name: componentName,
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    },
+  }
+}
+
+describe('FigmaFileClient path traversal regression', () => {
+  let workDir: string
+  let consoleLogSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(async () => {
+    workDir = await fs.mkdtemp(path.join(tmpdir(), 'icons-cli-'))
+    consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => undefined)
+    await fs.remove(path.join(tmpdir(), 'escaped'))
+
+    mockGotGet.mockResolvedValue({
+      body: '<svg><path /></svg>',
+    })
+  })
+
+  afterEach(async () => {
+    consoleLogSpy.mockRestore()
+    vi.clearAllMocks()
+    await fs.remove(path.join(tmpdir(), 'escaped'))
+    await fs.remove(workDir)
+  })
+
+  it('v2 variant に ../ を含んでも OUTPUT_ROOT_DIR の外へ書き込まない', async () => {
+    mockFile.mockResolvedValue(
+      createV2FileResponse({
+        setName: 'alert',
+        componentName: 'size=../../escaped,color=default',
+      }),
+    )
+    mockFileImages.mockResolvedValue({
+      data: {
+        images: {
+          'component-1': 'https://example.com/icon.svg',
+        },
+      },
+    })
+
+    const outputRootDir = path.join(workDir, 'out')
+    const outsidePath = path.join(tmpdir(), 'escaped', 'default', 'alert.svg')
+
+    const client = new FigmaFileClient(
+      'https://www.figma.com/file/FILE_ID/Test',
+      'token',
+      'svg',
+      'v2',
+    )
+
+    await client.loadSvg(outputRootDir).catch((error) => error)
+
+    await expect(fs.pathExists(outsidePath)).resolves.toBe(false)
+  })
+
+  it('component set name に ../ を含んでも OUTPUT_ROOT_DIR の外へ書き込まない', async () => {
+    mockFile.mockResolvedValue(
+      createV2FileResponse({
+        setName: '../../pwned',
+        componentName: 'size=16',
+      }),
+    )
+    mockFileImages.mockResolvedValue({
+      data: {
+        images: {
+          'component-1': 'https://example.com/icon.svg',
+        },
+      },
+    })
+
+    const outputRootDir = path.join(workDir, 'out')
+    const outsidePath = path.join(workDir, 'pwned.svg')
+
+    const client = new FigmaFileClient(
+      'https://www.figma.com/file/FILE_ID/Test',
+      'token',
+      'svg',
+      'v2',
+    )
+
+    await client.loadSvg(outputRootDir).catch((error) => error)
+
+    await expect(fs.pathExists(outsidePath)).resolves.toBe(false)
+  })
+
+  it('正常な v2 名称なら想定ディレクトリに export される', async () => {
+    mockFile.mockResolvedValue(
+      createV2FileResponse({
+        setName: 'alert',
+        componentName: 'size=16,color=default',
+      }),
+    )
+    mockFileImages.mockResolvedValue({
+      data: {
+        images: {
+          'component-1': 'https://example.com/icon.svg',
+        },
+      },
+    })
+
+    const outputRootDir = path.join(workDir, 'out')
+    const outputFile = path.join(outputRootDir, '16', 'default', 'alert.svg')
+
+    const client = new FigmaFileClient(
+      'https://www.figma.com/file/FILE_ID/Test',
+      'token',
+      'svg',
+      'v2',
+    )
+
+    await client.loadSvg(outputRootDir)
+
+    await expect(fs.pathExists(outputFile)).resolves.toBe(true)
+    await expect(readFile(outputFile, 'utf8')).resolves.toBe(
+      '<svg><path /></svg>',
+    )
+  })
+
+  it('/design から始まる URL でも fileId を取得できる', async () => {
+    mockFile.mockResolvedValue(
+      createV2FileResponse({
+        setName: 'alert',
+        componentName: 'size=16,color=default',
+      }),
+    )
+    mockFileImages.mockResolvedValue({
+      data: {
+        images: {
+          'component-1': 'https://example.com/icon.svg',
+        },
+      },
+    })
+
+    const outputRootDir = path.join(workDir, 'out')
+    const outputFile = path.join(outputRootDir, '16', 'default', 'alert.svg')
+
+    const client = new FigmaFileClient(
+      'https://www.figma.com/design/FILE_ID/Test?node-id=1-2',
+      'token',
+      'svg',
+      'v2',
+    )
+
+    await client.loadSvg(outputRootDir)
+
+    expect(mockFile).toHaveBeenCalledWith('FILE_ID')
+    await expect(fs.pathExists(outputFile)).resolves.toBe(true)
+  })
+})

package/src/figma/FigmaFileClient.ts

@@ -9,7 +9,10 @@ import { concurrently } from '../concurrently'
 
 const DRY_RUN = Boolean(process.env.DRY_RUN)
 
-const matchPath = match<{ fileId: string; name: string }>('/file/:fileId/:name')
+const matchPath = match<{ fileId: string; name: string }>([
+  '/file/:fileId/:name',
+  '/design/:fileId/:name',
+])
 
 function extractParams(url: string): { fileId: string; nodeId?: string } {
   const { pathname, searchParams } = new URL(url)
@@ -43,8 +46,26 @@ function parseV2IconName(name: string) {
     .toLowerCase()
 }
 
+function resolveOutputPath(outputDir: string, filename: string) {
+  const normalizedOutputDir = path.resolve(outputDir)
+  const fullname = path.resolve(normalizedOutputDir, filename)
+  const relativePath = path.relative(normalizedOutputDir, fullname)
+
+  if (relativePath.startsWith('..') || path.isAbsolute(relativePath)) {
+    return null
+  }
+
+  return fullname
+}
+
 type ExportFormat = 'svg' | 'pdf'
 
+function sleep(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}
+
 interface Component {
   id: string
   name: string
@@ -60,8 +81,10 @@ export class FigmaFileClient {
   private readonly exportFormat: ExportFormat
   private readonly client: Figma.ClientInterface
   private readonly layoutVersion: FigmaIconFileLayoutVersion
+  private readonly requestSleepMs?: number
 
   private components: Record<string, Component> = {}
+  private hasRequested = false
 
   static async runFromCli(
     url: string,
@@ -69,8 +92,15 @@ export class FigmaFileClient {
     outputRootDir: string,
     exportFormat: ExportFormat,
     layoutVersion: FigmaIconFileLayoutVersion = 'v1',
+    requestSleepMs?: number,
   ) {
-    const client = new this(url, token, exportFormat, layoutVersion)
+    const client = new this(
+      url,
+      token,
+      exportFormat,
+      layoutVersion,
+      requestSleepMs,
+    )
 
     const outputDir = path.join(process.cwd(), outputRootDir, exportFormat)
 
@@ -87,6 +117,7 @@ export class FigmaFileClient {
     personalAccessToken: string,
     exportFormat: ExportFormat,
     layoutVersion: FigmaIconFileLayoutVersion,
+    requestSleepMs?: number,
   ) {
     this.client = Figma.Client({
       personalAccessToken,
@@ -98,6 +129,7 @@ export class FigmaFileClient {
 
     this.exportFormat = exportFormat
     this.layoutVersion = layoutVersion
+    this.requestSleepMs = requestSleepMs
   }
 
   async loadSvg(outputDir: string) {
@@ -140,6 +172,7 @@ export class FigmaFileClient {
   private async loadImageUrls() {
     console.log('Getting export urls')
 
+    await this.sleepBeforeRequest()
     const { data } = await this.client.fileImages(this.fileId, {
       format: this.exportFormat,
       ids: Object.keys(this.components),
@@ -153,46 +186,82 @@ export class FigmaFileClient {
   }
 
   private async downloadImages(outputDir: string) {
-    return concurrently(
-      Object.values(this.components).map((component) => async () => {
-        if (component.image === undefined) {
-          return
-        }
+    const components = Object.values(this.components)
+    const shouldSleepBetweenRequests = (this.requestSleepMs ?? 0) > 0
 
-        const filename = component.variant
-          ? `${parseV2IconName(component.variant)}/${component.name}.${
-              this.exportFormat
-            }`
-          : `${filenamify(component.name)}.${this.exportFormat}`
-        const fullname = path.join(outputDir, filename)
-        const dirname = path.dirname(fullname)
-
-        if (DRY_RUN) {
-          console.log(`[DRY_RUN] skip: ${filename} => ✅ writing...`)
-          return
-        }
+    const downloadImage = async (component: Component) => {
+      if (component.image === undefined) {
+        return
+      }
+
+      const filename = component.variant
+        ? `${parseV2IconName(component.variant)}/${component.name}.${this.exportFormat}`
+        : `${filenamify(component.name)}.${this.exportFormat}`
+      const fullname = resolveOutputPath(outputDir, filename)
 
-        const response = await got.get(
-          component.image,
-          this.exportFormat == 'pdf' ? { responseType: 'buffer' } : {},
-        )
+      if (fullname === null) {
+        console.log(`skip invalid output path: ${filename}`)
+        return
+      }
+
+      const dirname = path.dirname(fullname)
 
-        await ensureDir(dirname)
+      if (DRY_RUN) {
+        console.log(`[DRY_RUN] skip: ${filename} => ✅ writing...`)
+        return
+      }
 
-        console.log(`found: ${filename} => ✅ writing...`)
-        await writeFile(fullname, response.body, 'utf8')
-      }),
+      await this.sleepBeforeRequest()
+      const response = await got.get(
+        component.image,
+        this.exportFormat == 'pdf' ? { responseType: 'buffer' } : {},
+      )
+
+      await ensureDir(dirname)
+
+      console.log(`found: ${filename} => ✅ writing...`)
+      await writeFile(fullname, response.body, 'utf8')
+    }
+
+    // sleep指定時は直列実行
+    if (shouldSleepBetweenRequests) {
+      for (const component of components) {
+        await downloadImage(component)
+      }
+
+      return
+    }
+
+    // sleep未指定時は並列実行
+    return concurrently(
+      components.map((component) => async () => downloadImage(component)),
     )
   }
 
   private async getFile() {
     console.log('Processing response')
 
+    await this.sleepBeforeRequest()
     const { data } = await this.client.file(this.fileId.toString())
 
     return data
   }
 
+  private async sleepBeforeRequest() {
+    const requestSleepMs = this.requestSleepMs ?? 0
+
+    if (requestSleepMs <= 0) {
+      return
+    }
+
+    if (this.hasRequested) {
+      console.log(`Sleeping ${requestSleepMs}ms before next export request`)
+      await sleep(requestSleepMs)
+    }
+
+    this.hasRequested = true
+  }
+
   private findComponentsRecursively(child: Figma.Node) {
     if (child.type === 'COMPONENT') {
       const { name, id } = child

package/src/generateSource.test.ts

@@ -0,0 +1,68 @@
+import { mkdtemp, readFile, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
+import vm from 'node:vm'
+import fs from 'fs-extra'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { generateIconSource } from './generateSource'
+
+async function importEsmFromSource(source: string) {
+  return import(
+    `data:text/javascript;charset=utf-8,${encodeURIComponent(source)}`
+  )
+}
+
+describe('generateSource regression', () => {
+  let workDir: string
+
+  beforeEach(async () => {
+    workDir = await mkdtemp(path.join(tmpdir(), 'icons-cli-generate-source-'))
+  })
+
+  afterEach(async () => {
+    await fs.remove(workDir)
+  })
+
+  it('クォートやバックスラッシュを含むSVGでも埋め込みモジュールが壊れない', async () => {
+    const outputDir = path.join(workDir, 'icons')
+    const svgRoot = path.join(outputDir, 'svg', '16')
+    const svgContent = `<svg><text>'"\\"</text></svg>\n`
+
+    await fs.ensureDir(svgRoot)
+    await writeFile(path.join(svgRoot, 'Add.svg'), svgContent)
+
+    await generateIconSource(outputDir)
+
+    const generatedModule = await readFile(
+      path.join(outputDir, 'src', '16', 'Add.js'),
+      'utf8',
+    )
+    const imported = await importEsmFromSource(generatedModule)
+
+    expect(imported.default).toBe(`<svg><text>'"\\"</text></svg>`)
+  })
+
+  it('危険なキー名を含んでもCJSエントリポイントが壊れない', async () => {
+    const outputDir = path.join(workDir, 'icons')
+    const svgRoot = path.join(outputDir, 'svg', '16')
+    const iconName = String.raw`Bad'"Name\Icon`
+
+    await fs.ensureDir(svgRoot)
+    await writeFile(path.join(svgRoot, `${iconName}.svg`), '<svg />')
+
+    await generateIconSource(outputDir)
+
+    const entrypoint = await readFile(
+      path.join(outputDir, 'src', 'index.cjs'),
+      'utf8',
+    )
+    const context = {
+      module: { exports: {} as Record<string, unknown> },
+    }
+
+    const script = new vm.Script(entrypoint)
+    script.runInNewContext(context)
+
+    expect(Object.keys(context.module.exports)).toEqual([`16/${iconName}`])
+  })
+})

package/src/generateSource.ts

@@ -1,43 +1,52 @@
 import path from 'path'
 import { glob } from 'node:fs/promises'
 import fs from 'fs-extra'
+import { serializeJavaScriptValue } from './codegen'
 
-const generateIconSvgEmbeddedSource = (svgString: string) => {
+export const generateIconSvgEmbeddedSource = (svgString: string) => {
   const str = svgString.replace(/\r?\n/g, '')
 
   return `/** This file is auto generated. DO NOT EDIT BY HAND. */
-export default '${str}'
+export default ${serializeJavaScriptValue(str)}
 `
 }
 
-const generateMjsEntrypoint = (
+export const generateMjsEntrypoint = (
   icons: string[],
 ) => `/** This file is auto generated. DO NOT EDIT BY HAND. */
 
 export default {
 ${icons
-  .map((it) => `  '${it}': () => import('./${it}.js').then(m => m.default)`)
+  .map(
+    (it) =>
+      `  ${serializeJavaScriptValue(it)}: () => import(${serializeJavaScriptValue(`./${it}.js`)}).then(m => m.default)`,
+  )
   .join(',\n')}
 }
 `
 
-const generateCjsEntrypoint = (
+export const generateCjsEntrypoint = (
   icons: string[],
 ) => `/** This file is auto generated. DO NOT EDIT BY HAND. */
 
 module.exports = {
 ${icons
-  .map((it) => `  '${it}': () => import('./${it}.js').then(m => m.default)`)
+  .map(
+    (it) =>
+      `  ${serializeJavaScriptValue(it)}: () => import(${serializeJavaScriptValue(`./${it}.js`)}).then(m => m.default)`,
+  )
   .join(',\n')}
 }
 `
 
-const generateTypeDefinitionEntrypoint = (
+export const generateTypeDefinitionEntrypoint = (
   icons: string[],
 ) => `/** This file is auto generated. DO NOt EDIT BY HAND. */
 
 declare var _default: {
-${icons.map((it) => `  '${it}': () => Promise<string>`).join(';\n')}
+${icons
+  .map((it) => `  ${serializeJavaScriptValue(it)}: () => Promise<string>`)
+  .join(';\n')}
 };
 export default _default;
 `

package/src/getChangedFiles.ts

@@ -3,20 +3,25 @@ import path from 'path'
 import { execp } from './utils'
 
 /**
- * dir 内で変更があったファイル情報を for await で回せるようにするやつ
+ * dirs 内で変更があったファイル情報を for await で回せるようにするやつ
  */
-export async function* getChangedFiles(dir: string) {
-  if (!existsSync(dir))
-    throw new Error(`icons-cli: target directory not found (${dir})`)
+export async function* getChangedFiles(dirs: string[]) {
+  for (const dir of dirs) {
+    if (!existsSync(dir))
+      throw new Error(`icons-cli: target directory not found (${dir})`)
+  }
   const gitStatus = await collectGitStatus()
   for (const [relativePath, status] of gitStatus) {
-    const fullpath = path.resolve(process.cwd(), '../../', relativePath)
-    if (!fullpath.startsWith(`${dir}/`)) {
+    const fullpath = path.resolve(process.cwd(), relativePath)
+    if (!dirs.some((dir) => fullpath.startsWith(`${dir}/`))) {
       continue
     }
-    if (!existsSync(fullpath))
-      throw new Error(`icons-cli: could not load svg (${fullpath})`)
-    const content = await fs.readFile(fullpath, { encoding: 'utf-8' })
+    if (status !== 'deleted' && !existsSync(fullpath))
+      throw new Error(`icons-cli: could not find file (${fullpath})`)
+    const content =
+      status === 'deleted'
+        ? ''
+        : await fs.readFile(fullpath, { encoding: 'utf-8' })
     yield { relativePath, content, status }
   }
 }
@@ -26,7 +31,7 @@ async function collectGitStatus() {
     /**
      * @see https://git-scm.com/docs/git-status#_porcelain_format_version_1
      */
-    (await execp(`git status --porcelain`)).split('\n').map((s) => {
+    (await execp(`git status --porcelain -uall`)).split('\n').map((s) => {
       return [
         s.slice(3),
         s.startsWith(' M')

package/src/index.ts

@@ -47,18 +47,27 @@ void yargs
         default: 'v1',
         describe: 'Figma icon file layout version',
       },
+      sleepMs: {
+        type: 'number',
+        describe: 'Sleep duration between export requests in milliseconds',
+      },
     },
-    async ({ format, layout }) => {
+    async ({ format, layout, sleepMs }) => {
       mustBeDefined(FIGMA_FILE_URL, 'FIGMA_FILE_URL')
       mustBeDefined(FIGMA_TOKEN, 'FIGMA_TOKEN')
       mustBeDefined(OUTPUT_ROOT_DIR, 'OUTPUT_ROOT_DIR')
 
+      if (sleepMs !== undefined && sleepMs < 0) {
+        throw new TypeError('sleepMs must be 0 or greater.')
+      }
+
       await FigmaFileClient.runFromCli(
         FIGMA_FILE_URL,
         FIGMA_TOKEN,
         OUTPUT_ROOT_DIR,
         format as 'svg' | 'pdf',
         layout as 'v1' | 'v2',
+        sleepMs,
       )
     },
   )

package/src/utils.ts

@@ -1,4 +1,5 @@
 import { exec } from 'child_process'
+import { escape } from 'querystring'
 
 /**
  * FIXME: util.promisify を使うと node-libs-browser に入っている方が使われてしまい、壊れる
@@ -22,3 +23,12 @@ export function mustBeDefined<T>(
     throw new TypeError(`${name} must be defined.`)
   }
 }
+
+/**
+ * escapeだけでは ( ) が残るので、それも追加でエスケープする
+ * @param svg SVG string
+ * @returns SVG string encoded as data URI
+ */
+export function encodeSvgAsDataUri(svg: string): string {
+  return escape(svg).replaceAll('(', '%28').replaceAll(')', '%29')
+}