Add mixin options

src/bin/tikuicli.ts

@@ -10,10 +10,11 @@ try {
   program
     .command('create <component> [destination]')
     .option('-p, --prefix <name>', 'prefix')
+    .option('--mo, --mixin-options', 'add options parameter to mixin')
     .description('create a component.')
     .addHelpText('after', '\nExample:\n $ tikui create -p tikui component src/atom')
     .action((component, destination, options) => {
-      createComponent(destination, component, options.prefix);
+      createComponent(destination, component, options.prefix, options.mixinOptions);
       console.log(`Creating component ${component} to ${path.resolve(destination)}`); // eslint-disable-line no-console
     });
 

src/cli/create-component.ts

@@ -20,8 +20,15 @@ const createDocumentationTitle = (component: string): string => {
 
 const capitalize = (sentence: string): string => sentence.length > 1 ? sentence.charAt(0).toUpperCase() + sentence.slice(1) : sentence.toUpperCase();
 
-const createMixin = (componentDirectory: string, component: string, prefix?: string): void => {
-  const content = `mixin ${dashPrefix(prefix)}${component}\n  .${dashPrefix(prefix)}${component} ${component}\n`;
+const createMixin = (componentDirectory: string, component: string, prefix?: string, mixinOptions?: boolean): void => {
+  let content = `mixin ${dashPrefix(prefix)}${component}\n  .${dashPrefix(prefix)}${component} ${component}\n`;
+  if(mixinOptions) {
+    content = `mixin ${dashPrefix(prefix)}${component}(options)\n` +
+    '\t-const opt = options || {};\n' +
+    '\t-const classList = [];\n' +
+    '\t-const classes = classList.length > 0 ? classList.join(\' \') : null;\n' +
+    `\t.${dashPrefix(prefix)}${component}(class=classes) ${component}\n`;
+  }
   const file = `${component}.mixin.pug`;
   createFile(componentDirectory, file);
   fs.writeFileSync(path.resolve(componentDirectory, file), content);
@@ -92,13 +99,13 @@ const assertForComponentName = (componentName: string) => {
   }
 };
 
-export const createComponent = (basePath: string, component: string, prefix?: string): void => {
+export const createComponent = (basePath: string, component: string, prefix?: string, mixinOptions?: boolean): void => {
   assertForComponentName(component);
   assertForPrefix(prefix);
 
   const componentDirectory = path.resolve(basePath, component);
   createDocumentation(componentDirectory, component);
-  createMixin(componentDirectory, component, prefix);
+  createMixin(componentDirectory, component, prefix, mixinOptions);
   createCode(componentDirectory, component, prefix);
   createRender(componentDirectory, component);
   createStyle(componentDirectory, component, prefix);

test/cli/create-component.spec.ts

@@ -124,4 +124,20 @@ describe('CLI tests', () => {
       .toThrow('The prefix should have alphabetic characters separated by dashes: "-" at position 4 is not allowed');
     expect(() => createComponent(FAKE_SRC_DIR, 'a-long-component')).not.toThrow();
   });
+
+  it('Should style manage mixin with options on component class', () => {
+    // When
+    createComponent(FAKE_SRC_DIR, 'component', 'prefix', true);
+
+    // Then
+    const { documentation, mixin, render, style } = componentFiles();
+    expect(documentation).toBe('## Component\n');
+    expect(mixin).toBe('mixin prefix-component(options)\n' +
+    '\t-const opt = options || {};\n' +
+    '\t-const classList = [];\n' +
+    '\t-const classes = classList.length > 0 ? classList.join(\' \') : null;\n' +
+    '\t.prefix-component(class=classes) component\n');
+    expect(render).toBe('extends /layout\n\nblock body\n  include component.code.pug\n');
+    expect(style).toBe('.prefix-component {\n  // component code\n}\n');
+  });
 });