feat(project generator): add support for rollup and browserify (#92)

affects: @knot/cli

examples/browserify-react/package.json

@@ -19,12 +19,13 @@
   },
   "devDependencies": {
     "@knot/browserify-plugin": "1.1.0",
-    "@types/watchify": "^3.7.4",
+    "@types/yargs": "^13.0.4",
     "browserify": "^16.5.0",
     "cypress": "^3.2.0",
     "http-server": "^0.12.0",
     "start-server-and-test": "^1.7.13",
     "ts-node": "^8.1.0",
-    "typescript": "^3.4.3"
+    "typescript": "^3.4.3",
+    "yargs": "^15.0.2"
   }
 }

packages/utilities/cli/README.md

@@ -1,5 +1,7 @@
 # @knot/cli
 
+> A command-line tool for simplifying the creation and maintainance of knot projects.
+
 [![npm](https://img.shields.io/npm/v/@knot/cli?style=flat-square)](http://npm.im/@knot/cli)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=flat-square)](https://lerna.js.org/)
@@ -9,8 +11,6 @@
 
 [![CircleCI](https://img.shields.io/circleci/build/gh/effervescentia/knot?style=flat-square&token=c6d265c2c3ae9fea01043c75299974616b6498b0)](https://circleci.com/gh/effervescentia/knot)
 
-> A command-line tool for simplifying the creation and maintainance of knot projects.
-
 Created both as a new project generator, and eventual single-entrypoint for interacting with knot code and tooling.
 Additional commands will be introduced for improving the ease of maintaining a knot project through adding or modifying elements of the codebase.
 

packages/utilities/cli/package.json

@@ -20,15 +20,13 @@
   "dependencies": {
     "@types/commander": "^2.12.2",
     "@types/gulp": "^4.0.6",
-    "@types/gulp-filter": "^3.0.33",
     "@types/gulp-rename": "^0.0.33",
     "@types/gulp-template": "^5.0.1",
     "@types/inquirer": "^6.0.3",
     "chalk": "^2.4.2",
     "commander": "^2.20.0",
     "gulp": "^4.0.2",
     "gulp-conflict": "^0.4.0",
-    "gulp-filter": "^6.0.0",
     "gulp-rename": "^1.4.0",
     "gulp-template": "^5.0.0",
     "inquirer": "^6.3.1",

packages/utilities/cli/src/index.ts

@@ -2,7 +2,6 @@ import chalk from 'chalk';
 import { Command } from 'commander';
 import gulp from 'gulp';
 import conflict from 'gulp-conflict';
-import filter from 'gulp-filter';
 import rename from 'gulp-rename';
 import template from 'gulp-template';
 import inquirer from 'inquirer';
@@ -13,26 +12,41 @@ const INTERPOLATION_PATTERN = /#{([\S\s]+?)}/g;
 
 const program = new Command('knot');
 
-enum ProjectType {
-  WEBPACK_REACT = 'webpack + react'
+enum BundlerType {
+  WEBPACK = 'webpack',
+  ROLLUP = 'rollup',
+  BROWSERIFY = 'browserify'
 }
 
-const PROJECT_DIRS: Record<ProjectType, string> = {
-  [ProjectType.WEBPACK_REACT]: 'webpack_react'
-};
+enum FrameworkType {
+  REACT = 'react'
+}
 
 program.version('1.0.0');
 
 program
   .command('init [target_dir]')
   .description('Setup a new knot project')
   .action(async (targetDir = '.') => {
-    const { projectType } = await inquirer.prompt<{
-      readonly projectType: string;
+    const { frameworkType } = await inquirer.prompt<{
+      readonly frameworkType: string;
+    }>({
+      choices: [FrameworkType.REACT],
+      message: 'Which rendering library do you want to use?',
+      name: 'frameworkType',
+      type: 'list'
+    });
+
+    const { bundlerType } = await inquirer.prompt<{
+      readonly bundlerType: string;
     }>({
-      choices: [ProjectType.WEBPACK_REACT],
-      message: 'What type of project do you want to create?',
-      name: 'projectType',
+      choices: [
+        BundlerType.WEBPACK,
+        BundlerType.BROWSERIFY,
+        BundlerType.ROLLUP
+      ],
+      message: 'Which bundler do you want to use?',
+      name: 'bundlerType',
       type: 'list'
     });
 
@@ -50,27 +64,39 @@ program
     }>({
       message: 'What is the name of your project?',
       name: 'projectName',
-      type: 'input'
+      type: 'input',
+      filter: value => value.trim(),
+      validate: value =>
+        value.trim().length !== 0 || 'Project name must not be empty'
     });
 
     console.log(
       `${chalk.blue(
         '!'
-      )} Thank you! Generating files for a knot project (${projectName}) with "${projectType}" now...`
+      )} Thank you! Generating files for a knot project (${projectName}) with "${frameworkType} + ${bundlerType}" now...`
     );
 
-    const sourceDir = path.resolve(
-      __dirname,
-      '../..',
-      'templates',
-      PROJECT_DIRS[projectType]
-    );
+    const templatesDir = path.resolve(__dirname, '../..', 'templates');
+    const commonDir = path.resolve(templatesDir, 'common');
+    const httpsDir = path.resolve(templatesDir, 'https');
+    const frameworkDir = path.resolve(templatesDir, frameworkType);
+    const bundlerDir = path.resolve(templatesDir, bundlerType);
 
     const webpackPluginVersion = await latestVersion('@knot/webpack-plugin');
+    const rollupPluginVersion = await latestVersion('@knot/rollup-plugin');
+    const browserifyPluginVersion = await latestVersion(
+      '@knot/browserify-plugin'
+    );
 
     gulp
-      .src(`${sourceDir}/**`)
-      .pipe(filter(file => isHTTPS || file.basename !== 'certs'))
+      .src(
+        [
+          commonDir,
+          frameworkDir,
+          bundlerDir,
+          ...(isHTTPS ? [httpsDir] : [])
+        ].map(dir => `${dir}/**`)
+      )
       .pipe(
         rename(file => {
           if (file.basename.startsWith('_')) {
@@ -83,7 +109,13 @@ program
           {
             isHTTPS,
             projectName,
-            webpackPluginVersion
+            bundlerType,
+            frameworkType,
+            pluginVersions: {
+              browserify: browserifyPluginVersion,
+              webpack: webpackPluginVersion,
+              rollup: rollupPluginVersion
+            }
           },
           { interpolate: INTERPOLATION_PATTERN }
         )

packages/utilities/cli/templates/browserify/_package.json

@@ -0,0 +1,21 @@
+{
+  "name": "#{projectName}",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "ts-node browserify.ts"<% if (isHTTPS) { %>,
+    "start": "http-server -p 1337 -S -C certs/localhost.crt -K certs/localhost.key -o",
+    "gen-certs": "mkcert -install && mkcert -cert-file ./certs/localhost.crt -key-file ./certs/localhost.key localhost 127.0.0.1 ::1"<% } else { %>,
+    "start": "http-server -p 1337 -o"<% } %>
+  }<% if (frameworkType === 'react') { %>,
+  "dependencies": {
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  }<% } %>,
+  "devDependencies": {
+    "@knot/browserify-plugin": "#{pluginVersions.browserify}",
+    "browserify": "^16.5.0",
+    "http-server": "^0.12.0",
+    "ts-node": "^8.1.0",
+    "typescript": "^3.4.3"
+  }
+}

packages/utilities/cli/templates/browserify/browserify.ts

@@ -0,0 +1,10 @@
+import knotify from '@knot/browserify-plugin';
+import * as browserify from 'browserify';
+import * as fs from 'fs';
+import * as path from 'path';
+
+browserify('src/index.js')
+  .plugin(knotify)
+  .bundle()
+  .on('error', error => console.error(error.toString()))
+  .pipe(fs.createWriteStream(path.join(__dirname, 'bundle.js')));

packages/utilities/cli/templates/webpack_react/README.md → packages/utilities/cli/templates/common/README.md

@@ -27,7 +27,7 @@ To build a bundled version of the `knot` app:
 yarn build
 ```
 
-To run a local dev server at `https://localhost:1337`:
+To run a local dev server at `http<% if (isHTTPS) { %>s<% } %>://localhost:1337`:
 
 ```sh
 yarn start

packages/utilities/cli/templates/webpack_react/_.gitignore → packages/utilities/cli/templates/common/_.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 certs/
-dist/
+dist/
+bundle.js

packages/utilities/cli/templates/webpack_react/index.html → packages/utilities/cli/templates/common/index.html

@@ -9,7 +9,8 @@
 </head>
 
 <body>
-  <div id="app"></div>
+  <div id="app"></div><% if (['browserify', 'rollup'].includes(bundlerType)) { %>
+  <script src="bundle.js"></script><% } %>
 </body>
 
 </html>

packages/utilities/cli/templates/rollup/_package.json

@@ -0,0 +1,25 @@
+{
+  "name": "#{projectName}",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "rollup --config rollup.config.ts"<% if (isHTTPS) { %>,
+    "start": "http-server -p 1337 -S -C certs/localhost.crt -K certs/localhost.key -o",
+    "gen-certs": "mkcert -install && mkcert -cert-file ./certs/localhost.crt -key-file ./certs/localhost.key localhost 127.0.0.1 ::1"<% } else { %>,
+    "start": "http-server -p 1337 -o"<% } %>
+  }<% if (frameworkType === 'react') { %>,
+  "dependencies": {
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  }<% } %>,
+  "devDependencies": {
+    "@knot/rollup-plugin": "#{pluginVersions.rollup}",
+    "@rollup/plugin-commonjs": "^11.0.0",
+    "@rollup/plugin-node-resolve": "^6.0.0",
+    "@types/rollup-plugin-node-globals": "^1.4.0",
+    "http-server": "^0.12.0",
+    "rollup": "^1.27.14",
+    "rollup-plugin-node-globals": "^1.4.0",
+    "ts-node": "^8.1.0",
+    "typescript": "^3.4.3"
+  }
+}

packages/utilities/cli/templates/rollup/rollup.config.ts

@@ -0,0 +1,23 @@
+import knotPlugin from '@knot/rollup-plugin';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import nodeGlobals from 'rollup-plugin-node-globals';
+
+export default args => ({
+  input: 'src/index.js',
+  output: {
+    file: 'bundle.js',
+    format: 'iife'
+  },
+  plugins: [
+    knotPlugin(),
+    resolve(),
+    commonjs({
+      namedExports: {
+        react: ['createElement', 'Component', 'Fragment'],
+        'react-dom': ['render']
+      }
+    }),
+    nodeGlobals()
+  ]
+});

packages/utilities/cli/templates/webpack_react/_package.json → packages/utilities/cli/templates/webpack/_package.json

@@ -6,9 +6,13 @@
     "dev": "webpack --watch --mode development",
     "start": "webpack-dev-server --mode development"<% if (isHTTPS) { %>,
     "gen-certs": "mkcert -install && mkcert -cert-file ./certs/localhost.crt -key-file ./certs/localhost.key localhost 127.0.0.1 ::1"<% } %>
-  },
+  }<% if (frameworkType === 'react') { %>,
+  "dependencies": {
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  }<% } %>,
   "devDependencies": {
-    "@knot/webpack-plugin": "#{webpackPluginVersion}",
+    "@knot/webpack-plugin": "#{pluginVersions.webpack}",
     "html-webpack-plugin": "^3.2.0",
     "ts-node": "^8.1.0",
     "typescript": "^3.4.3",