Adding ComponentFixture

Author: David-Desmaisons

generator/index.js

@@ -1,4 +1,5 @@
 const { renameFiles, updateFile } = require('./fileHelper')
+const { updateExample } = ('./updateTemplateWithCompnentFixture')
 const readmeUpdater = require('./readmeUpdater');
 const licenseList = require('spdx-license-list/full');
 
@@ -22,11 +23,11 @@ function replaceInLicense(licenseTextTemplate, sourceText, newText) {
     .replace(new RegExp(`\\[${sourceText}\\]`), newText)
 }
 
-module.exports = (api, { addBadges, addLicense, componentName, copyrightHolders, licenseName, useVueDoc, useVueStyleguidist }) => {
+module.exports = (api, { addBadges, addLicense, componentName, copyrightHolders, licenseName, useComponentFixture, useVueDoc, useVueStyleguidist }) => {
 
   const useLint = api.hasPlugin('eslint')
   const packageName = api.generator.pkg.name
-  const context = { addBadges, addLicense, componentName, licenseName, packageName, useLint, useVueDoc, useVueStyleguidist }
+  const context = { addBadges, addLicense, componentName, licenseName, packageName, useComponentFixture, useLint, useVueDoc, useVueStyleguidist }
 
   api.extendPackage({
     main: `dist/${packageName}.umd.js`,
@@ -72,33 +73,45 @@ module.exports = (api, { addBadges, addLicense, componentName, copyrightHolders,
     })
   }
 
+  if (useComponentFixture) {
+    api.extendPackage({
+      devDependencies: {
+        'component-fixture': "^0.3.0"
+      }
+    })
+  }
+
   if (addLicense) {
     api.extendPackage({
-      license : licenseName
+      license: licenseName
     })
   }
 
   api.render('./template')
 
   api.postProcessFiles(files => {
-    const hasTest = api.hasPlugin('unit-mocha') || api.hasPlugin('unit-jest')
+    const hasTest = api.hasPlugin('unit-mocha') || api.hasPlugin('unit-jest');
     if (hasTest) {
-      updateFile(files, 'tests/unit/HelloWorld.spec.js', content => content.replace(/HelloWorld/g, componentName))
+      updateFile(files, 'tests/unit/HelloWorld.spec.js', content => content.replace(/HelloWorld/g, componentName));
     }
 
-    updateFile(files, 'README.md', content => readmeUpdater(content, context))
+    updateFile(files, 'README.md', content => readmeUpdater(content, context));
+
+    if (useComponentFixture) {
+      updateFile(files, 'src/App.vue', updateExample);
+    }
 
     const immutableFiles = ['src/components/HelloWorld.vue', 'src/index.js']
     renameFiles(files, /^src\//, 'example/', (file) => immutableFiles.indexOf(file) !== -1)
     renameFiles(files, /\/HelloWorld\./, `/${componentName}.`)
 
     if (!addLicense) {
-      return
+      return;
     }
 
     const licenseTextTemplate = licenseList[licenseName].licenseText;
-    const year = new Date().getFullYear()
-    const licenseText = replaceInLicense(licenseTextTemplate, 'year', year)
-    files['LICENSE'] = replaceInLicense(licenseText, 'copyright holders', copyrightHolders)
+    const year = new Date().getFullYear();
+    const licenseText = replaceInLicense(licenseTextTemplate, 'year', year);
+    files['LICENSE'] = replaceInLicense(licenseText, 'copyright holders', copyrightHolders);
   })
 }

generator/updateTemplateWithCompnentFixture.js

@@ -0,0 +1,30 @@
+const templateUpdater = (m) => `<component-fixture>
+
+${m}
+
+<Editor slot="control" slot-scope="scope" v-bind="scope"/>
+
+</component-fixture>`;
+
+const componentTemplateRegex = /<HelloWorld (.)*\/>/g;
+
+
+const script = '<script>';
+const scriptUpdater = `<script>
+import { ComponentFixture, Editor } from 'component-fixture'`;
+
+const exportComponents = '  components: {';
+const exportUpdater = `  components: {
+    ComponentFixture,
+    Editor,`;
+
+function updateExample(content) {
+  const updatedTemplate = content.replace(componentTemplateRegex, templateUpdater);
+  const updatedScript = updatedTemplate.replace(script, scriptUpdater);
+  const updatedExport = updatedScript.replace(exportComponents, exportUpdater);
+  return updatedExport;
+}
+
+module.exports = {
+  updateExample
+};

prompts.js

@@ -1,63 +1,70 @@
 
 const licensesInformation = require('spdx-license-list/spdx-simple.json')
 const licenses = licensesInformation.map(name => ({
-    name,
-    value: name
+  name,
+  value: name
 }));
 
 const prompts = module.exports = [
-    {
-        type: 'input',
-        name: 'componentName',
-        message: 'Enter the component name:'
-    },
-    {
-        type: 'confirm',
-        name: 'useVueStyleguidist',
-        message: 'Use vue-styleguidist to generate documentation?',
-        default: true,
-        group: 'Documentation',
-    },
-    {
-        type: 'confirm',
-        name: 'useVueDoc',
-        message: 'Use vuedoc.md to automatically generate README API section?',
-        default: true,
-        group: 'Documentation'
-    },
-    {
-        type: 'confirm',
-        name: 'addBadges',
-        message: 'Add project badges to README.md?',
-        default: true,
-        group: 'Documentation'
-    },
-    {
-        type: 'confirm',
-        name: 'addLicense',
-        message: 'Add license?',
-        group: 'License',
-        default: false
-    },
-    {
-        type: 'list',
-        name: 'licenseName',
-        when: answer => answer.addLicense,
-        message: 'Choose a license:',
-        group: 'License',
-        choices: licenses,
-        default: 'MIT'
-    },
-    {
-        type: 'input',
-        name: 'copyrightHolders',
-        when: answer => answer.addLicense,
-        message: 'Enter copyright holders:',
-        group: 'License',
-    },
+  {
+    type: 'input',
+    name: 'componentName',
+    message: 'Enter the component name:'
+  },
+  {
+    type: 'confirm',
+    name: 'useComponentFixture',
+    message: 'Use componentFixture to build example?',
+    default: false,
+    group: 'Example',
+  },
+  {
+    type: 'confirm',
+    name: 'useVueStyleguidist',
+    message: 'Use vue-styleguidist to generate documentation?',
+    default: false,
+    group: 'Documentation',
+  },
+  {
+    type: 'confirm',
+    name: 'useVueDoc',
+    message: 'Use vuedoc.md to automatically generate README API section?',
+    default: true,
+    group: 'Documentation'
+  },
+  {
+    type: 'confirm',
+    name: 'addBadges',
+    message: 'Add project badges to README.md?',
+    default: true,
+    group: 'Documentation'
+  },
+  {
+    type: 'confirm',
+    name: 'addLicense',
+    message: 'Add license?',
+    group: 'License',
+    default: false
+  },
+  {
+    type: 'list',
+    name: 'licenseName',
+    when: answer => answer.addLicense,
+    message: 'Choose a license:',
+    group: 'License',
+    choices: licenses,
+    default: 'MIT'
+  },
+  {
+    type: 'input',
+    name: 'copyrightHolders',
+    when: answer => answer.addLicense,
+    message: 'Enter copyright holders:',
+    group: 'License',
+  },
 ]
 
 module.exports.getPrompts = pkg => {
-    prompts[0].default = pkg.name
-    return prompts
+  prompts[0].default = pkg.name
+  return prompts
 }