build.ts

import fs from 'node:fs/promises'
import path from 'node:path'
import babel from '@babel/core'
import {generate} from '@babel/generator'
import {pascalCase} from 'change-case'
import data from '@primer/octicons/build/data.json' with {type: 'json'}

const {types: t} = babel
const SOURCE_DIRECTORY = path.resolve(import.meta.dirname, '../src')
const GENERATED_DIRECTORY = path.join(SOURCE_DIRECTORY, 'generated')

await fs.mkdir(GENERATED_DIRECTORY, {recursive: true})

// Each icon is around 2-3kB in size, create modules around 100kB in size
const BUCKET_SIZE = 40
const modules = partition(Object.values(data), BUCKET_SIZE).map((icons, index) => {
  const filepath = path.join(GENERATED_DIRECTORY, `icons-${(index + 1).toString().padStart(2, '0')}.tsx`)

  const propsImportSpecifier = t.importSpecifier(
    t.identifier('OcticonReferenceProps'),
    t.identifier('OcticonReferenceProps'),
  )
  propsImportSpecifier.importKind = 'type'

  const imports = [
    // import {forwardRef} from 'react'
    t.importDeclaration(
      [t.importSpecifier(t.identifier('forwardRef'), t.identifier('forwardRef'))],
      t.stringLiteral('react'),
    ),

    // import {Icon} from '../Icon'
    t.importDeclaration([t.importSpecifier(t.identifier('Icon'), t.identifier('Icon'))], t.stringLiteral('../Icon')),

    // import type {OcticonReferenceProps} from '../types'
    t.importDeclaration([propsImportSpecifier], t.stringLiteral('../types')),
  ]

  const components = icons.flatMap(icon => {
    const symbolName = `${pascalCase(icon.name)}Symbol`
    const symbols = Object.entries(icon.heights).map(([height, size]) => {
      const id = `symbol-octicon-${icon.name}-${height}`

      const jsx = t.jsxElement(
        t.jsxOpeningElement(t.jsxIdentifier('symbol'), [
          t.jsxAttribute(t.jsxIdentifier('id'), t.stringLiteral(id)),
          t.jsxAttribute(t.jsxIdentifier('viewBox'), t.stringLiteral(`0 0 ${size.width} ${height}`)),
        ]),
        t.jsxClosingElement(t.jsxIdentifier('symbol')),
        svgToJSX(size.ast),
      )

      return {
        id,
        height,
        width: size.width,
        jsx,
      }
    })
    const symbolComponent = t.functionDeclaration(
      t.identifier(symbolName),
      [],
      t.blockStatement([
        t.returnStatement(
          symbols.length === 1
            ? symbols[0].jsx
            : t.jsxFragment(
                t.jsxOpeningFragment(),
                t.jsxClosingFragment(),
                symbols.map(symbol => symbol.jsx),
              ),
        ),
      ]),
    )

    const referenceName = `${pascalCase(icon.name)}Icon`
    const forwardRef = t.callExpression(t.identifier('forwardRef'), [
      t.functionExpression(
        t.identifier(referenceName),
        [t.identifier('props'), t.identifier('ref')],
        t.blockStatement([
          t.returnStatement(
            t.jsxElement(
              t.jsxOpeningElement(
                t.jsxIdentifier('Icon'),
                [
                  t.jsxSpreadAttribute(t.identifier('props')),
                  t.jsxAttribute(t.jsxIdentifier('ref'), t.jsxExpressionContainer(t.identifier('ref'))),
                  t.jsxAttribute(
                    t.jsxIdentifier('sizes'),
                    t.jsxExpressionContainer(
                      t.objectExpression(
                        symbols.map(symbol =>
                          t.objectProperty(
                            t.stringLiteral(symbol.height),
                            t.objectExpression([
                              t.objectProperty(t.stringLiteral('width'), t.numericLiteral(symbol.width)),
                              t.objectProperty(t.stringLiteral('id'), t.stringLiteral(symbol.id)),
                            ]),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
                true,
              ),
              t.jsxClosingElement(t.jsxIdentifier('Icon')),
              [],
            ),
          ),
        ]),
      ),
    ])

    forwardRef.typeParameters = t.tsTypeParameterInstantiation([
      t.tsTypeReference(t.identifier('SVGSVGElement')),
      t.tsTypeReference(t.identifier('OcticonReferenceProps')),
    ])

    const reference = t.variableDeclaration('const', [t.variableDeclarator(t.identifier(referenceName), forwardRef)])

    return [t.exportNamedDeclaration(symbolComponent), t.exportNamedDeclaration(reference)]
  })

  const body = [...imports, ...components]
  const program = t.addComment(
    t.program(body),
    'leading',
    `This file is auto-generated by 'script/build.ts'. Do not edit directly.`,
  )

  return {
    filepath,
    contents: generate(program).code,
    exports: icons.flatMap(icon => [`${pascalCase(icon.name)}Icon`, `${pascalCase(icon.name)}Symbol`]),
  }
})

for (const mod of modules) {
  await fs.writeFile(mod.filepath, mod.contents)
}

const indexFilePath = path.join(SOURCE_DIRECTORY, 'generated', 'index.ts')

const octiconsSymbolsPropsExportSpecifier = t.exportSpecifier(
  t.identifier('OcticonSymbolsProps'),
  t.identifier('OcticonSymbolsProps'),
)
octiconsSymbolsPropsExportSpecifier.exportKind = 'type'

const octiconsReferencePropsExportSpecifier = t.exportSpecifier(
  t.identifier('OcticonReferenceProps'),
  t.identifier('OcticonReferenceProps'),
)
octiconsReferencePropsExportSpecifier.exportKind = 'type'

const index = t.addComment(
  t.program([
    t.exportNamedDeclaration(
      null,
      [
        t.exportSpecifier(t.identifier('OcticonSymbols'), t.identifier('OcticonSymbols')),
        octiconsSymbolsPropsExportSpecifier,
      ],
      t.stringLiteral('../OcticonSymbols'),
    ),
    t.exportNamedDeclaration(null, [octiconsReferencePropsExportSpecifier], t.stringLiteral('../types')),
    ...modules.map(mod => {
      return t.exportNamedDeclaration(
        null,
        mod.exports.map(exportName => t.exportSpecifier(t.identifier(exportName), t.identifier(exportName))),
        t.stringLiteral(`./${path.basename(mod.filepath, path.extname(mod.filepath))}`),
      )
    }),
  ]),
  'leading',
  `This file is auto-generated by 'script/build.ts'. Do not edit directly.`,
)

await fs.writeFile(indexFilePath, generate(index).code)

function partition<T>(items: Array<T>, size: number): Array<Array<T>> {
  const result: Array<Array<T>> = []
  let bucket: Array<T> = []
  let count = 0

  for (const item of items) {
    if (count >= size) {
      result.push(bucket)
      bucket = []
      count = 0
    }

    bucket.push(item)
    count++
  }

  if (bucket.length > 0) {
    result.push(bucket)
  }

  return result
}

type SVGASTNode = {
  type: string
  name: string
  attributes: Record<string, string>
  children: Array<SVGASTNode>
}

function svgToJSX(node: SVGASTNode): Array<babel.types.JSXElement> {
  if (node.type === 'element') {
    const children = node.children.map(svgToJSX)

    if (node.name === 'svg') {
      if (children.length === 0) {
        throw new Error(`No children available for icon`)
      }

      return children.flat()
    }

    const attrs = Object.entries(node.attributes).map(([key, value]) => {
      if (typeof value !== 'string') {
        throw new Error(`Unknown value type: ${value}`)
      }
      return t.jsxAttribute(t.jsxIdentifier(key), t.stringLiteral(value))
    })
    const openingElement = t.jsxOpeningElement(t.jsxIdentifier(node.name), attrs, children.length === 0)
    const closingElement = t.jsxClosingElement(t.jsxIdentifier(node.name))

    if (children.length > 0) {
      return [t.jsxElement(openingElement, closingElement, children.flat(), false)]
    }

    return [t.jsxElement(openingElement, closingElement, [], true)]
  }

  throw new Error(`Unknown type: ${node.type}`)
}