Created
July 11, 2024 00:34
-
-
Save jcfranco/5d82e35574a2608294dfd3a9debab7f5 to your computer and use it in GitHub Desktop.
script to list component, subcomponent CSS props and warnings if there are potentially missing props
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // assumes script is in calcite-design-system/packages/calcite-components/support/ | |
| import { promises as fs } from "fs"; | |
| import { resolve } from "path"; | |
| import type { JsonDocs } from "../calcite-components/dist/extras/docs-json.d.ts"; | |
| (async () => { | |
| const docsJsonPath = resolve("../calcite-components/dist/extras/docs-json.json"); | |
| const docsJsonContent = await fs.readFile(docsJsonPath, "utf8"); | |
| const docsJson: JsonDocs = JSON.parse(docsJsonContent); | |
| const componentData: { | |
| tag: string; | |
| currentProps: string[]; | |
| subcomponents: { tag: string; subcomponentProps: string[] }[]; | |
| potentialMissingProps: string[]; | |
| }[] = []; | |
| docsJson.components.forEach((component) => { | |
| const currentProps = component.styles.map((style) => style.name); | |
| const subcomponents = component.dependencies.map((dependency) => { | |
| const subcomponent = docsJson.components.find((c) => c.tag === dependency)!; | |
| const subcomponentProps = subcomponent.styles.map((style) => style.name); | |
| return { tag: subcomponent.tag, subcomponentProps }; | |
| }); | |
| const potentialMissingProps = subcomponents.reduce<string[]>((acc, subcomponent) => { | |
| const subcomponentTokenStart = `--${component.tag}-${subcomponent.tag.replace("calcite-", "")}`; | |
| if (!currentProps.some((prop) => prop.startsWith(subcomponentTokenStart))) { | |
| acc.push(subcomponentTokenStart); | |
| } | |
| return acc; | |
| }, []); | |
| componentData.push({ | |
| tag: component.tag, | |
| currentProps, | |
| subcomponents, | |
| potentialMissingProps, | |
| }); | |
| }); | |
| componentData.forEach(({ tag, currentProps, subcomponents, potentialMissingProps }) => { | |
| console.log(`\n============================`); | |
| console.log(`Component: <${tag}>`); | |
| console.log(`============================\n`); | |
| console.log(` - Current CSS props:`); | |
| if (currentProps.length) { | |
| currentProps.forEach((prop) => { | |
| console.log(` - ${prop}`); | |
| }); | |
| } else { | |
| console.log(" - none"); | |
| } | |
| console.log(`\n - Subcomponents (direct):`); | |
| if (subcomponents.length) { | |
| subcomponents.forEach(({ tag: subTag, subcomponentProps }) => { | |
| console.log(` - <${subTag}>:`); | |
| if (subcomponentProps.length) { | |
| subcomponentProps.forEach((prop) => { | |
| console.log(` - ${prop}`); | |
| }); | |
| } else { | |
| console.log(" - none"); | |
| } | |
| }); | |
| } else { | |
| console.log(" - none"); | |
| } | |
| if (potentialMissingProps.length) { | |
| console.log(`\n - Potential missing subcomponent CSS props:`); | |
| potentialMissingProps.forEach((prop) => { | |
| console.log(` - ${prop}`); | |
| }); | |
| } else { | |
| console.log(" - none"); | |
| } | |
| console.log(`\n============================\n`); | |
| }); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment