generator-lit-element/generators/index.js

Scaffolds a empty lit-element module with tests and documentation

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
  // note: arguments and options should be defined in the constructor.
  constructor(args, opts) {
    super(args, opts);
    // And you can then access it later; e.g.
  }

  install() {
    this.npmInstall();
  }

	writing() {
   
    const pkgJson = {
      version: "0.0.1",
      name: this.answers.name,
      description: this.answers.description,
      main: this.answers.name +'.js',
      keywords: ['lit-element', 'polymer3', 'customElements'],
      devDependencies: {
        "wct-browser-legacy": "^1.0.1",
        "web-component-tester": "^6.7.1",
        "wct-headless": "^2.2.2"
      },
      dependencies: {
        "@webcomponents/webcomponentsjs": "^2.0.2",
        '@polymer/lit-element': '^0.5.2'
      }, 
      scripts: {
        'test': 'wct --npm', 
        'start': 'polymer serve --npm --open',
        'lint': 'polymer lint',
        'reset': 'rm -rf node_modules'
      }
    };

    const pkgLernaJson = {
      version: "0.0.1",
      name: this.answers.name,
      description: this.answers.description,
      main: this.answers.name +'.js',
      keywords: ['lit-element', 'polymer3', 'customElements'],
      devDependencies: {
        "wct-browser-legacy": "^1.0.1"
      },
      dependencies: {
        "@webcomponents/webcomponentsjs": "^2.0.2",
        '@polymer/lit-element': '^0.5.2'
      }, 
      "scripts": {
        "test": "../../node_modules/web-component-tester/bin/wct --npm --skip-update-check --skip-selenium-install",
        "start": "../../node_modules/polyserve/bin/polyserve --npm --open",
        "lint": "../../node_modules/polymer-cli/bin/polymer.js lint",
        "reset": "rm -rf node_modules && rm -f package-lock.json"
      }
    };


    const pkg = this.answers.lerna ? pkgLernaJson : pkgJson;

    // Extend or create package.json file in destination path
    this.fs.extendJSON(this.destinationPath('package.json'), pkg);

    var params = { 
      moduleName: this.answers.name,
      moduleDesc: this.answers.desc, 
      className: this.answers.className
    };

  
    this.fs.copyTpl(
      this.templatePath('README.md'),
      this.destinationPath('README.md'),
      params
    );

    this.fs.copyTpl(
      this.templatePath('basic-test.html'),
      this.destinationPath('test/basic-test.html'),
      params
    );

    this.fs.copyTpl(
      this.templatePath('demo.html'),
      this.destinationPath('demo/index.html'),
      params
    );
    
    this.fs.copyTpl(
      this.templatePath('index.html'),
      this.destinationPath('index.html'),
      params
    );

    this.fs.copyTpl(
      this.templatePath('element-template.js'),
      this.destinationPath(this.answers.name + '.js'),
      params
    )

    this.fs.copyTpl(
      this.templatePath('wct.conf.json'),
      this.destinationPath('wct.conf.json'),
      params
    );


    this.fs.copyTpl(
      this.templatePath('gitignore'),
      this.destinationPath('.gitignore'),
      params
    );    
    this.fs.copyTpl(
      this.templatePath('travis.yml'),
      this.destinationPath('.travis.yml'),
      params
    );

  }

  prompting() {
    var me = this;
    return this.prompt([{
      type    : 'input',
      name    : 'name',
      message : 'Your Element Name (needs one - dash e.g. foo-element)',
      default : this.appname // Default to current folder name
    },{
      type    : 'input',
      name    : 'description',
      message : 'Description of the Element',
      default : this.description  // Default to current folder name
    },
    {
      type    : 'confirm',
      name    : 'lerna',
      message : 'Use tools in parent lerna directory'
    }]).then((answers) => { 

      function camelize(str) {
        return str[0].toUpperCase() + str.replace(/-([a-z])/g, function(a, b) {
          return b.toUpperCase();
        }).slice(1);
      }

      me.answers = answers
      me.answers.className = camelize(answers.name);
    });
  }

};