From fdf3d9c86f2f3987eecf9120e5804d03a6cc5c26 Mon Sep 17 00:00:00 2001 From: Juan Esteban Date: Sun, 8 Sep 2024 19:50:03 -0500 Subject: [PATCH] add more print with to prettier config --- .prettierrc | 2 +- src/constants/config.constants.ts | 3 ++- src/controller/lun.controller.ts | 43 +++++++++---------------------- src/models/config.models.ts | 3 +++ src/templates/base.ts | 9 ++++--- src/templates/componentWithJs.ts | 6 ++--- src/templates/componentWithTsx.ts | 28 ++++++++++---------- src/templates/pages/withJs.ts | 4 +-- src/templates/pages/withTs.ts | 4 +-- 9 files changed, 41 insertions(+), 61 deletions(-) diff --git a/.prettierrc b/.prettierrc index 824ca84..225fc59 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,5 @@ "semi": true, "singleQuote": true, "tabWidth": 2, - "printWidth": 90 + "printWidth": 100 } \ No newline at end of file diff --git a/src/constants/config.constants.ts b/src/constants/config.constants.ts index a3b6999..c7fda87 100644 --- a/src/constants/config.constants.ts +++ b/src/constants/config.constants.ts @@ -6,6 +6,7 @@ export const defaultConfig: LunConfig = { defaultTemplate: 'react', provider: 'context', css: 'module', + className: 'clsx', }; -export const extsConfigFile = ['js', 'cjs']; +export const extsConfigFile = ['js', 'cjs', 'mjs']; diff --git a/src/controller/lun.controller.ts b/src/controller/lun.controller.ts index c8d8111..9331a14 100644 --- a/src/controller/lun.controller.ts +++ b/src/controller/lun.controller.ts @@ -13,27 +13,19 @@ import type { Css, CreatePage, CreateContext, + ClassName, } from '../models'; -import { - templateCSS, - templateComponent, - templateIndexComponent, -} from '../templates/base'; +import { templateCSS, templateComponent, templateIndexComponent } from '../templates/base'; import { getTemplateIndex, getTemplatePage } from '../templates/pages'; import { getTemplateContext } from '../templates/contexts'; export class Lun { private options: LunConfig = defaultConfig; private dir: string = getRootPath(defaultConfig.root); - private dirFolderPage: string = getRootPath( - defaultConfig.root, - defaultConfig.pagesFolder, - ); - private dirFolderContext: string = getRootPath( - defaultConfig.root, - defaultConfig.provider, - ); + private dirFolderPage: string = getRootPath(defaultConfig.root, defaultConfig.pagesFolder); + private dirFolderContext: string = getRootPath(defaultConfig.root, defaultConfig.provider); private cssType: Css = 'module'; + private className: ClassName = 'clsx'; setOptions(value: LunConfig) { this.options = value; @@ -41,6 +33,7 @@ export class Lun { this.dirFolderPage = getRootPath(this.options.root, this.options.pagesFolder); this.dirFolderContext = getRootPath(this.options.root, this.options.provider); this.cssType = this.options.css; + this.className = this.options.className; } private printCreate = ({ type, name }: PrintCreate) => { @@ -54,8 +47,7 @@ export class Lun { getFullPathComponent = (componentName: string, filename: string) => getRootPath(this.dir, `components/${componentName}/${filename}`); - getPathComponentsFolder = (folder: string = '') => - getRootPath(this.dir, `components/${folder}`); + getPathComponentsFolder = (folder: string = '') => getRootPath(this.dir, `components/${folder}`); createComponent({ componentName, type }: CreateComponent) { if (!componentName || typeof componentName === 'object') { @@ -70,6 +62,7 @@ export class Lun { component: componentName, type: typeTemplate, cssType: this.cssType, + className: this.className, }); const fileIndex = templateIndexComponent({ component: componentName, @@ -113,14 +106,8 @@ export class Lun { const { extIndex, extComponent } = getExt(typeTemplate); const folderPath = this.dirFolderContext; const folderContextComponent = path.resolve(folderPath, contextName); - const templateContext = path.resolve( - folderContextComponent, - `${contextName}.${extComponent}`, - ); - const templateIndexContext = path.resolve( - folderContextComponent, - `index.${extIndex}`, - ); + const templateContext = path.resolve(folderContextComponent, `${contextName}.${extComponent}`); + const templateIndexContext = path.resolve(folderContextComponent, `index.${extIndex}`); if (!fs.existsSync(folderPath)) fs.mkdirSync(folderPath); if (!fs.existsSync(folderContextComponent)) fs.mkdirSync(folderContextComponent); @@ -154,14 +141,8 @@ export class Lun { if (!fs.existsSync(folderPath)) fs.mkdirSync(folderPath); if (!fs.existsSync(folderPageComponent)) fs.mkdirSync(folderPageComponent); - fs.writeFileSync( - templatePage, - getTemplatePage({ name: pageName, type: typeTemplate }), - ); - fs.writeFileSync( - templateIndexPage, - getTemplateIndex({ name: pageName, type: typeTemplate }), - ); + fs.writeFileSync(templatePage, getTemplatePage({ name: pageName, type: typeTemplate })); + fs.writeFileSync(templateIndexPage, getTemplateIndex({ name: pageName, type: typeTemplate })); this.printCreate({ type: 'page', name: pageName }); } diff --git a/src/models/config.models.ts b/src/models/config.models.ts index 9aca4c4..e7e685c 100644 --- a/src/models/config.models.ts +++ b/src/models/config.models.ts @@ -4,6 +4,8 @@ export type Css = 'vanilla' | 'module'; export type PagesFolderName = 'views' | 'pages'; +export type ClassName = 'clsx' | 'classNames'; + export interface LunConfig { /** by default [src] - options: 'src' | 'app' | string */ root: string; @@ -15,4 +17,5 @@ export interface LunConfig { provider: string; /** css - vanilla or module */ css: Css; + className: ClassName; } diff --git a/src/templates/base.ts b/src/templates/base.ts index 43783f9..3c4e581 100644 --- a/src/templates/base.ts +++ b/src/templates/base.ts @@ -1,4 +1,4 @@ -import { Css, Template } from '../models'; +import { ClassName, Css, Template } from '../models'; import { componentWithJs } from './componentWithJs'; import { componentWithTsx } from './componentWithTsx'; @@ -6,12 +6,13 @@ interface TemplateProps { component: string; type: Template; cssType: Css; + className: ClassName; } -export const templateComponent = ({ component, type, cssType }: TemplateProps) => { +export const templateComponent = ({ component, type, cssType, className }: TemplateProps) => { const fun = type === 'react' ? componentWithJs : componentWithTsx; - return fun(component, cssType); + return fun(component, cssType, className); }; export const templateCSS = `.container { @@ -21,7 +22,7 @@ export const templateCSS = `.container { export const templateIndexComponent = ({ component, type, -}: Omit) => { +}: Omit) => { if (type === 'react') { return `export { default as ${component} } from './${component}' `; diff --git a/src/templates/componentWithJs.ts b/src/templates/componentWithJs.ts index 6ecf765..958d0c6 100644 --- a/src/templates/componentWithJs.ts +++ b/src/templates/componentWithJs.ts @@ -1,8 +1,8 @@ -import { Css } from '../models'; +import { ClassName, Css } from '../models'; -export const componentWithJs = (componentName: string, type: Css) => { +export const componentWithJs = (componentName: string, type: Css, className: ClassName) => { return `import { forwardRef } from 'react' -import cn from 'classnames' +import cn from '${className}' ${ type === 'module' diff --git a/src/templates/componentWithTsx.ts b/src/templates/componentWithTsx.ts index ccd7af6..ca36e6a 100644 --- a/src/templates/componentWithTsx.ts +++ b/src/templates/componentWithTsx.ts @@ -1,29 +1,27 @@ -import { Css } from '../models'; +import { ClassName, Css } from '../models'; -export const componentWithTsx = (componentName: string, type: Css) => { - return `import { FC, DetailedHTMLProps, HTMLAttributes, forwardRef } from 'react'; -import cn from 'classnames'; +export const componentWithTsx = (componentName: string, type: Css, className: ClassName) => { + return `import { FC, ComponentProps, forwardRef } from 'react'; +import ${className} from '${className}'; -${ - type === 'module' - ? `import s from './${componentName}.module.css'` - : `import './${componentName}.css'` -} - -interface ${componentName}Props extends DetailedHTMLProps, HTMLDivElement> { - // +import ${type === 'module' ? `s from './${componentName}.module.css'` : `'./${componentName}.css'`} + +type PrimitiveProps = Omit, 'ref'> + +interface ${componentName}Props extends PrimitiveProps { + // your props } - + const ${componentName} = forwardRef( ({ className, children, ...props }, ref) => { return ( -
+
{children}
); } ) as FC<${componentName}Props>; - + export default ${componentName}; export type { ${componentName}Props } diff --git a/src/templates/pages/withJs.ts b/src/templates/pages/withJs.ts index b804b87..b44a1a5 100644 --- a/src/templates/pages/withJs.ts +++ b/src/templates/pages/withJs.ts @@ -11,7 +11,5 @@ export const withJs = ({ name }: Props) => { `; }; -export const indexWithJs = ({ - name, -}: Props) => `export { default as ${name} } from './${name}'; +export const indexWithJs = ({ name }: Props) => `export { default as ${name} } from './${name}'; `; diff --git a/src/templates/pages/withTs.ts b/src/templates/pages/withTs.ts index 18eae56..9852c0e 100644 --- a/src/templates/pages/withTs.ts +++ b/src/templates/pages/withTs.ts @@ -11,7 +11,5 @@ export const withTs = ({ name }: Props) => { `; }; -export const indexWithTs = ({ - name, -}: Props) => `export { default as ${name} } from './${name}'; +export const indexWithTs = ({ name }: Props) => `export { default as ${name} } from './${name}'; `;