arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-24 17:00:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(templates): infer variants types in generated theme

Browse Source
This commit is contained in:
Benjamin Canac
2024-12-18 12:45:51 +01:00
parent 607792ea25
commit 2c99bb80c7
1 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/templates.ts
View File

@@ -24,29 +24,47 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
const template = (theme as any)[component] const template = (theme as any)[component]
const result = typeof template === 'function' ? template(options) : template const result = typeof template === 'function' ? template(options) : template
const variants = Object.keys(result.variants || {}) const variants = Object.entries(result.variants || {})
.filter(([_, values]) => {
const keys = Object.keys(values as Record<string, unknown>)
return keys.some(key => key !== 'true' && key !== 'false')
})
.map(([key]) => key)
let json = JSON.stringify(result, null, 2) let json = JSON.stringify(result, null, 2)
for (const variant of variants) { for (const variant of variants) {
json = json.replace(new RegExp(`("${variant}": "[^"]+")`, 'g'), '$1 as const') json = json.replace(new RegExp(`("${variant}": "[^"]+")`, 'g'), `$1 as typeof ${variant}[number]`)
json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, 'g'), (_, before, match, after) => { json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, 'g'), (_, before, match, after) => {
const replaced = match.replace(/("[^"]+")/g, '$1 as const') const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`)
return `${before}${replaced}${after}` return `${before}${replaced}${after}`
}) })
} }
// For local development, directly import from theme function generateVariantDeclarations(variants: string[]) {
if (process.env.DEV) { return variants.map((variant) => {
return [ const keys = Object.keys(result.variants[variant])
`import template from ${JSON.stringify(fileURLToPath(new URL(`./theme/${kebabCase(component)}`, import.meta.url)))}`, return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`
`const result = typeof template === 'function' ? template(${JSON.stringify(options)}) : template`, })
`const json = ${json}`,
`export default result as typeof json`
].join('\n')
} }
return `export default ${json}` // For local development, import directly from theme
if (process.env.DEV) {
const templatePath = fileURLToPath(new URL(`./theme/${kebabCase(component)}`, import.meta.url))
return [
`import template from ${JSON.stringify(templatePath)}`,
...generateVariantDeclarations(variants),
`const result = typeof template === 'function' ? template(${JSON.stringify(options, null, 2)}) : template`,
`const theme = ${json}`,
`export default result as typeof theme`
].join('\n\n')
}
// For production build
return [
...generateVariantDeclarations(variants),
`export default ${json}`
].join('\n\n')
} }
}) })
} }