import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync } from 'fs' import { join } from 'path' import { optimize } from 'svgo' import { BUBLIC_ROOT, readJsonIfExists, writeFile, writeJsonFile, writeStringFile, writeTypescriptFile, } from './lib/file' // We'll need to copy the assets into these folders const PUBLIC_FOLDER_PATHS = [ join(BUBLIC_ROOT, 'packages', 'assets'), join(BUBLIC_ROOT, 'apps', 'examples', 'www'), ] const FONT_MAPPING: Record = { 'IBMPlexMono-Medium': 'monospace', 'IBMPlexSerif-Medium': 'serif', 'IBMPlexSans-Medium': 'sansSerif', 'Shantell_Sans-Normal-SemiBold': 'draw', } const ASSETS_FOLDER_PATH = join(BUBLIC_ROOT, 'assets') const collectedAssetUrls: { imports: { name: string; from: string }[] assets: { fonts: Record icons: Record translations: Record embedIcons: Record } } = { imports: [], assets: { fonts: {}, icons: {}, translations: {}, embedIcons: {} }, } // 1. ICONS async function copyIcons() { // Get a list of all icons const icons = readdirSync(join(ASSETS_FOLDER_PATH, 'icons', 'icon')).filter((icon) => icon.endsWith('.svg') ) // Write list of names into icon-names.json (just the name, not extension) const iconNames = icons.map((name) => name.replace('.svg', '')) const sourceFolderPath = join(ASSETS_FOLDER_PATH, 'icons', 'icon') // Create the optimized SVGs const optimizedSvgs = icons.map((icon) => { const iconPath = join(sourceFolderPath, icon) const content = readFileSync(iconPath, 'utf8') const svg = optimize(content, { path: iconPath }) return { fileName: icon, data: svg.data } }) // Optimize all of the svg icons and write them into the new folders for (const folderPath of PUBLIC_FOLDER_PATHS) { const publicIconsRootFolderPath = join(folderPath, 'icons') const pulicIconsFolderPath = join(publicIconsRootFolderPath, 'icon') if (existsSync(publicIconsRootFolderPath)) { rmSync(publicIconsRootFolderPath, { recursive: true }) } // Create the folders mkdirSync(publicIconsRootFolderPath, { recursive: true }) mkdirSync(pulicIconsFolderPath, { recursive: true }) // Copy each optimized icons into the new folder for (const { fileName, data } of optimizedSvgs) { await writeStringFile(join(pulicIconsFolderPath, fileName), data) } // Write the JSON file containing all of the names of the icons await writeJsonFile(join(pulicIconsFolderPath, 'icon-names.json'), iconNames) } // Get the names of all of the svg icons and create a TypeScript file of valid icon names const iconTypeFile = ` /** @public */ export type TLUiIconType = ${icons.map((icon) => JSON.stringify(icon.replace('.svg', ''))).join(' | ')} /** @public */ export const TLUiIconTypes = [ ${icons.map((icon) => JSON.stringify(icon.replace('.svg', ''))).join(', ')} ] as const` await writeTypescriptFile( join(BUBLIC_ROOT, 'packages', 'ui', 'src', 'lib', 'icon-types.ts'), iconTypeFile ) // add to the asset declaration file for (const icon of icons) { const name = icon.replace('.svg', '') const variableName = camelCase(`${name}IconUrl`) collectedAssetUrls.imports.push({ name: variableName, from: `icons/icon/${icon}`, }) collectedAssetUrls.assets.icons[name] = variableName } } // 2. EMBED-ICONS async function copyEmbedIcons() { const folderName = 'embed-icons' const extension = '.png' const sourceFolderPath = join(ASSETS_FOLDER_PATH, folderName) const itemsToCopy = readdirSync(sourceFolderPath).filter((icon) => icon.endsWith(extension)) for (const publicFolderPath of PUBLIC_FOLDER_PATHS) { const destinationFolderPath = join(publicFolderPath, folderName) // Delete the folder if it exists if (existsSync(destinationFolderPath)) { rmSync(destinationFolderPath, { recursive: true }) } // Make the new folder mkdirSync(destinationFolderPath, { recursive: true }) // Copy all items into the new folder for (const item of itemsToCopy) { await writeFile(join(destinationFolderPath, item), readFileSync(join(sourceFolderPath, item))) } } // add to the asset declaration file for (const item of itemsToCopy) { const name = item.replace(extension, '') const variableName = camelCase(`${name}EmbedIconUrl`) collectedAssetUrls.imports.push({ name: variableName, from: `${folderName}/${item}`, }) collectedAssetUrls.assets.embedIcons[name] = variableName } } // 3. FONTS async function copyFonts() { const folderName = 'fonts' const extension = '.woff2' const sourceFolderPath = join(ASSETS_FOLDER_PATH, folderName) const itemsToCopy = readdirSync(sourceFolderPath).filter((icon) => icon.endsWith(extension)) for (const publicFolderPath of PUBLIC_FOLDER_PATHS) { const destinationFolderPath = join(publicFolderPath, folderName) // Delete the folder if it exists if (existsSync(destinationFolderPath)) { rmSync(destinationFolderPath, { recursive: true }) } // Make the new folder mkdirSync(destinationFolderPath) // Copy all items into the new folder for (const item of itemsToCopy) { await writeFile(join(destinationFolderPath, item), readFileSync(join(sourceFolderPath, item))) } } // add to the asset declaration file for (const item of itemsToCopy) { const itemWithoutExtension = item.replace(extension, '') const name = FONT_MAPPING[itemWithoutExtension] if (!name) { console.log('Font mapping not found for', itemWithoutExtension) process.exit(1) } const variableName = camelCase(`${name}FontUrl`) collectedAssetUrls.imports.push({ name: variableName, from: `${folderName}/${item}`, }) collectedAssetUrls.assets.fonts[name] = variableName } } // 3. TRANSLATIONS async function copyTranslations() { const folderName = 'translations' const extension = '.json' const sourceFolderPath = join(ASSETS_FOLDER_PATH, folderName) const itemsToCopy = readdirSync(sourceFolderPath).filter((item) => item.endsWith(extension)) for (const publicFolderPath of PUBLIC_FOLDER_PATHS) { const destinationFolderPath = join(publicFolderPath, folderName) // Delete the folder if it exists if (existsSync(destinationFolderPath)) { rmSync(destinationFolderPath, { recursive: true }) } // Make the new folder mkdirSync(destinationFolderPath) // Copy all items into the new folder for (const item of itemsToCopy) { await writeFile(join(destinationFolderPath, item), readFileSync(join(sourceFolderPath, item))) } } // Create hardcoded files const uiPath = join(BUBLIC_ROOT, 'packages', 'ui', 'src', 'lib', 'hooks', 'useTranslation') // languages.ts const languagesSource = await readJsonIfExists(join(sourceFolderPath, 'languages.json'))! const languagesFilePath = join(uiPath, 'languages.ts') const languagesFile = ` /** @public */ export const LANGUAGES = ${JSON.stringify(languagesSource)} as const ` await writeTypescriptFile(languagesFilePath, languagesFile) const schemaPath = join(BUBLIC_ROOT, 'packages', 'tlschema', 'src') const schemaLanguagesFilePath = join(schemaPath, 'languages.ts') await writeTypescriptFile(schemaLanguagesFilePath, languagesFile) // main.ts const defaultTranslation = await readJsonIfExists(join(sourceFolderPath, 'main.json'))! const defaultTranslationFilePath = join(uiPath, 'defaultTranslation.ts') const defaultTranslationFile = ` /** @internal */ export const DEFAULT_TRANSLATION = ${JSON.stringify(defaultTranslation)} ` await writeTypescriptFile(defaultTranslationFilePath, defaultTranslationFile) // translationKeys.ts const translationKeys = Object.keys(defaultTranslation).map((key) => `'${key}'`) const translationKeysFilePath = join(uiPath, 'TLTranslationKey.ts') const translationKeysFile = ` /** @public */ export type TLTranslationKey = ${translationKeys.join(' | ')} ` await writeTypescriptFile(translationKeysFilePath, translationKeysFile) // add to the asset declaration file for (const item of itemsToCopy) { const name = item.replace(extension, '') const variableName = camelCase(`${name}TranslationUrl`) collectedAssetUrls.imports.push({ name: variableName, from: `${folderName}/${item}`, }) collectedAssetUrls.assets.translations[name] = variableName } } // 4. ASSET DECLARATION FILE async function writeAssetDeclarationFile() { const assetDeclarationFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'src', 'index.ts') let assetDeclarationFile = ` // eslint-disable-next-line @typescript-eslint/triple-slash-reference /// import {formatAssetUrl, AssetUrlOptions} from './utils'; ` for (const { name, from } of collectedAssetUrls.imports) { assetDeclarationFile += `import ${name} from '../${from}';\n` } assetDeclarationFile += ` /** @public */ export function getBundlerAssetUrls(opts?: AssetUrlOptions) { return { ${Object.entries(collectedAssetUrls.assets) .flatMap(([type, assets]) => [ `${type}: {`, ...Object.entries(assets).map( ([name, variableName]) => `${JSON.stringify(name)}: formatAssetUrl(${variableName}, opts),` ), '},', ]) .join('\n')} } as const } ` await writeTypescriptFile(assetDeclarationFilePath, assetDeclarationFile) } function camelCase(name: string) { return name.replace(/[_-]([a-z0-9])/gi, (g) => g[1].toUpperCase()) } // --- RUN async function main() { console.log('Copying icons...') await copyIcons() console.log('Copying embed icons...') await copyEmbedIcons() console.log('Copying fonts...') await copyFonts() console.log('Copying translations...') await copyTranslations() console.log('Writing asset declaration file...') await writeAssetDeclarationFile() console.log('Done!') } main()