kobaltedev / kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.
https://kobalte.dev
MIT License
1.27k stars 69 forks source link

feat: allow importing individual components #390

Closed aminya closed 5 months ago

aminya commented 6 months ago

This makes it possible to import the individual components from dist/source. Previously, this was not possible due to package.json not exporting these despite files being included in the package.

Fixes #35 Closes #267

The documentation update was done via this script:

script ```js import { readdir, stat, writeFile, readFile } from "fs/promises"; import { basename, extname, join } from "path"; // Define the regex const regex = /## Import\n\n```ts\nimport \{ (\w*) \} from "@kobalte\/core";\n```/; function kebabCaseToTitleCase(kebabCase) { return kebabCase .split("-") // Split the string on hyphens .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter of each word .join(""); // Join the words back together } // Function to process a path async function processPath(filePath, extension) { const fileStat = await stat(filePath); if (fileStat.isDirectory()) { await processDirectory(filePath); } else if (fileStat.isFile() && extname(filePath) === extension) { const fileName = basename(filePath, extension); const componentNameTitleCase = kebabCaseToTitleCase(fileName); const newImport = `import * as ${componentNameTitleCase} from "@kobalte/core/${fileName}";`; // Find the old import via regex let fileContent = await readFile(filePath, "utf-8"); const oldImportMatch = fileContent.match(regex); if (oldImportMatch !== null) { console.log(`Updating ${filePath}`); const oldImport = oldImportMatch[0]; const imports = `${oldImport} or \`\`\`ts ${newImport} \`\`\``; // Add the new import statement after the old import fileContent = fileContent.replace(oldImport, imports); await writeFile(filePath, fileContent, "utf-8"); } } } // Recursive function to process each .mdx file async function processDirectory(dir) { const files = await readdir(dir); await Promise.all(files.map(file => processPath(join(dir, file), ".mdx"))); } // Start processing from the start directory try { // Define the directory to start from const startDir = "apps/docs/src/routes/docs/core/components"; await processDirectory(startDir); } catch (err) { console.error(err, err.stack); process.exit(1); } ```
netlify[bot] commented 6 months ago

Deploy Preview for kobalte ready!

Name Link
Latest commit 35782d04056cb90c83e3507b13f51d2c683bdc74
Latest deploy log https://app.netlify.com/sites/kobalte/deploys/662f3238f6478a0008fcad28
Deploy Preview https://deploy-preview-390--kobalte.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

jer3m01 commented 6 months ago

Awesome thanks! Will be merging soon.

jer3m01 commented 5 months ago

Integrated this in #391 and changed the API. Thanks for your PR!