Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove DOM component from scaffolder #175

Merged
merged 1 commit into from
Feb 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions cli/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@ export default {
frontSrcDir: resolve("apps/front/src"),

// Scaffold components
bundleType: ["react", "dom"],
componentCompatibleFolders: ["components", "pages"],
componentsTemplatesDir: resolve("cli/tasks/scaffold-component/templates"),
twigTemplates: resolve("apps/back/web/app/themes/CherAmi/templates"),

// Scaffold WP
wpTheme: resolve("apps/back/web/app/themes/CherAmi"),
Expand Down
111 changes: 18 additions & 93 deletions cli/tasks/scaffold-component/scaffold-component.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,44 +51,15 @@ const _reactComponentBuilder = async ({
})
}

/**
* DOM Component builder
*/
const _domComponentBuilder = async ({
componentPath,
upperComponentName,
componentsTemplatesDir,
twigComponentPath,
}) => {
// scaffold component file
await createFile({
templateFilePath: `${componentsTemplatesDir}/dom/component.ts.template`,
destinationFilePath: `${componentPath}/${upperComponentName}.ts`,
replaceExpressions: { upperComponentName },
})
// scaffold scss module
await createFile({
templateFilePath: `${componentsTemplatesDir}/dom/component.scss.template`,
destinationFilePath: `${componentPath}/${upperComponentName}.scss`,
replaceExpressions: { upperComponentName },
})
// scaffold Twig
await createFile({
templateFilePath: `${componentsTemplatesDir}/dom/component.twig.template`,
destinationFilePath: `${twigComponentPath}/${upperComponentName}.twig`,
replaceExpressions: { upperComponentName },
})
}

/**
* @name index
* @description Ask question and scaffold a component with a specific script template
*/
const _scaffoldComponent = ({
srcDir,
pComponentType, // dom | react
componentCompatibleFolders,
componentsTemplatesDir,
pComponentType, // react | ...
}) => {
return new Promise(async (resolve) => {
// Get sub-folder
Expand All @@ -104,36 +75,22 @@ const _scaffoldComponent = ({
componentName = answer.componentName
})

// formated name "lowerCase"
// formatted name "lowerCase"
let lowerComponentName = changeCase.camelCase(componentName)
// formated name "UpperCase"
// formatted name "UpperCase"
let upperComponentName = changeCase.pascalCase(componentName)
// Base path of the component (no extension at the end here)
let componentPath = `${srcDir}/${subFolder}/${lowerComponentName}`
let twigComponentPath = `${config.twigTemplates}/${subFolder}`
log("component will be created here: componentPath", componentPath)

// build REACT component
if (pComponentType === "react") {
await _reactComponentBuilder({
subFolder,
upperComponentName,
componentPath,
componentCompatibleFolders,
componentsTemplatesDir,
})
}

// build DOM component
if (pComponentType === "dom") {
await _domComponentBuilder({
upperComponentName,
componentPath,
twigComponentPath,
componentCompatibleFolders,
componentsTemplatesDir,
})
}
await _reactComponentBuilder({
subFolder,
upperComponentName,
componentPath,
componentCompatibleFolders,
componentsTemplatesDir,
})

// final log
logs.done("Component created.")
Expand All @@ -143,45 +100,13 @@ const _scaffoldComponent = ({

// ----------------------------------------------------------------------------- PUBLIC

const scaffoldComponent = () => {
const TYPES = [
{
name: "React component",
exec: () =>
_scaffoldComponent({
pComponentType: "react",
componentCompatibleFolders: config.componentCompatibleFolders,
componentsTemplatesDir: config.componentsTemplatesDir,
srcDir: config.frontSrcDir,
}),
},
{
name: "DOM component",
exec: () =>
_scaffoldComponent({
pComponentType: "dom",
componentCompatibleFolders: config.componentCompatibleFolders,
componentsTemplatesDir: config.componentsTemplatesDir,
srcDir: config.frontSrcDir,
}),
},
]

let scaffolderTypes = TYPES.map((scaffolder) => scaffolder.name)

// List available scaffolders to user
Inquirer.prompt({
type: "list",
name: "type",
message: "What kind of component to create?",
choices: scaffolderTypes,
pageSize: 20,
}).then((answer) => {
// Get scaffolder index
const scaffolderIndex = scaffolderTypes.indexOf(answer.type)
// Start this scaffolder
TYPES[scaffolderIndex].exec()
(async ()=>
{
await _scaffoldComponent({
pComponentType: "react",
componentCompatibleFolders: config.componentCompatibleFolders,
componentsTemplatesDir: config.componentsTemplatesDir,
srcDir: config.frontSrcDir,
})
}

scaffoldComponent()
})()
Loading