71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
const prompts = require('prompts');
|
|
const changeCase = require('change-case');
|
|
const path = require('path');
|
|
const fs = require('fs-extra');
|
|
const glob = require('tiny-glob');
|
|
const { cyan, green, bold } = require('kleur');
|
|
|
|
const ROOT = path.resolve(__dirname, '../../');
|
|
const LIB = path.join(ROOT, 'src/components');
|
|
const TEMPLATE = path.join(__dirname, 'template');
|
|
|
|
const makeNewComponent = async () => {
|
|
const { name, folder } = await prompts([
|
|
{
|
|
type: 'text',
|
|
name: 'name',
|
|
message: 'What should we call your new component, e.g., ImagePack?',
|
|
},
|
|
{
|
|
type: 'text',
|
|
name: 'folder',
|
|
message: 'What folder should we put it in, e.g., Graphics?',
|
|
initial: 'Graphics',
|
|
},
|
|
]);
|
|
|
|
if (!name || !folder) return;
|
|
|
|
const componentName = changeCase.pascalCase(name);
|
|
const componentNameSlug = componentName.toLowerCase();
|
|
const componentFolder = folder;
|
|
const componentFolderSlug = folder.toLowerCase().replace(' ', '-');
|
|
const componentDir = path.join(LIB, componentName);
|
|
|
|
if (fs.existsSync(componentDir)) {
|
|
console.log('Oops! That component already exists. Try another name?');
|
|
return;
|
|
}
|
|
|
|
fs.mkdirSync(componentDir);
|
|
|
|
const files = await glob('**/*', { cwd: TEMPLATE, filesOnly: true });
|
|
|
|
for (const file of files) {
|
|
const writePath = path.join(
|
|
LIB,
|
|
file.replace(/YourComponent/g, componentName)
|
|
);
|
|
|
|
fs.ensureDirSync(path.dirname(writePath));
|
|
|
|
if (path.extname(file) === '.jpg') {
|
|
fs.copyFileSync(path.join(TEMPLATE, file), writePath);
|
|
continue;
|
|
} else {
|
|
const content = fs.readFileSync(path.join(TEMPLATE, file), 'utf8');
|
|
const writeContent = content
|
|
.replace(/YourComponentSlug/g, componentNameSlug)
|
|
.replace(/YourComponent/g, componentName)
|
|
.replace(/ComponentFolderSlug/g, componentFolderSlug)
|
|
.replace(/ComponentFolder/g, componentFolder);
|
|
fs.writeFileSync(writePath, writeContent);
|
|
}
|
|
}
|
|
|
|
console.log(
|
|
`${green('✔')} ${bold('Your component is ready at:')}\n📁 ${cyan(`src/components/${bold(componentName)}/${componentName}.svelte`)}`
|
|
);
|
|
};
|
|
|
|
makeNewComponent();
|