breaking changes for next version of klap (#26)

breaking changes for next version of klap

README.md

@@ -1,15 +1,16 @@
 # klap :clap:
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 a zero config, zero dependency bundler for tiny javascript packages.
 
-[![Build Status](https://travis-ci.org/osdevisnot/klap.svg?branch=master)](https://travis-ci.org/osdevisnot/klap)
-![David](https://img.shields.io/david/osdevisnot/klap)
-![David](https://img.shields.io/david/dev/osdevisnot/klap)
-![npm](https://img.shields.io/npm/v/klap)
-![NPM](https://img.shields.io/npm/l/klap)
+<!-- prettier-ignore-start -->
+[![Build Status](https://img.shields.io/travis/osdevisnot/klap/master?style=flat-square)](https://travis-ci.org/osdevisnot/klap)
+![David](https://img.shields.io/david/osdevisnot/klap?style=flat-square)
+![David](https://img.shields.io/david/dev/osdevisnot/klap?style=flat-square)
+![npm](https://img.shields.io/npm/v/klap?style=flat-square)
+![NPM](https://img.shields.io/npm/l/klap?style=flat-square)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+<!-- prettier-ignore-end -->
 
 <table border="0">
 <tr><td>
@@ -38,13 +39,13 @@ a zero config, zero dependency bundler for tiny javascript packages.
 
 ## :plate_with_cutlery: Usage
 
-First, setup your project using `klap init`:
+First, initialize your project using `klap init`:
 
 ```bash
 npx klap init
 ```
 
-**Prefer Typescript Setup ?** `init` using `ts` argument:
+**Prefer Typescript ?** initialize using `ts` argument:
 
 ```bash
 npx klap init ts
@@ -56,7 +57,7 @@ npx klap init ts
 npx klap init tsx
 ```
 
-This will create a minimal `package.json` with `source`, `main`, `module` and `browser` entries and the `build`, `watch` and `start` scripts.
+The `init` command will create a minimal `package.json` with `source`, `main`, `module` and `browser` entries and the `build`, `watch` and `start` scripts.
 
 ```jsonc
 {
@@ -87,21 +88,20 @@ Then use `npm run` or `yarn` to invoke npm scripts as you normally would.
 
 `klap` uses sensible defaults for most part. However, as needed, use below properties in `package.json` to fine tune `klap`. You can also use `cli flags` to control config options for `klap`.
 
-| option              | cli flag(s)           | description                               | default                           |
-| ------------------- | --------------------- | ----------------------------------------- | --------------------------------- |
-| `source`            | -s&nbsp;--source      | source file to compile and bundle         | `src/index.js`                    |
-| `klap.name`         | -n&nbsp;--name        | package name for `umd` bundles            | sanitized `pkg.name`              |
-| `klap.port`         | -p&nbsp;--port        | port for development server               | `1234`                            |
-| `klap.target`       | -t&nbsp;--target      | target for development server (`umd|es`)  | `es`                              |
-| `browserslist`      | -b&nbsp;--browserlist | browserlist compatible compilation target | `>1%, not ie 11, not op_mini all` |
-| `klap.example`      | -e&nbsp;--example     | location of index js/ts file for example  | `public/index.js`                 |
-| `klap.fallback`     | -f&nbsp;--fallback    | location of index html file for example   | `public/index.html`               |
-| `klap.sourcemap`    | --no-sourcemap        | sourcemaps for builds                     | `true`                            |
-| `klap.minify`       | --no-minify           | minification for builds                   | `true`                            |
-| `klap.pragma`       | --pragma              | pragma for `jsx` and `tsx` compilation    | `React.createElement`             |
-| `klap.frag`         | --frag                | pragma for `jsx` and `tsx` fragments      | `React.Fragment`                  |
-| `klap.globals`      |                       | global names for umd bundles              | `{}`                              |
-| `klap.namedExports` |                       | named exports for commonjs modules        | `{}`                              |
+| option              | cli flag(s)           | description                                      | default                           |
+| ------------------- | --------------------- | ------------------------------------------------ | --------------------------------- |
+| `source`            | -s&nbsp;--source      | source file to compile and bundle                | `src/index.js`                    |
+| `browserslist`      | -b&nbsp;--browserlist | browserlist compatible compilation target        | `>1%, not ie 11, not op_mini all` |
+| `klap.name`         | -n&nbsp;--name        | package name for `umd` bundles                   | sanitized `pkg.name`              |
+| `klap.port`         | -p&nbsp;--port        | port for development server                      | `1234`                            |
+| `klap.example`      | -e&nbsp;--example     | location of index js/ts file for start command   | `public/index.js` or `pkg.source` |
+| `klap.fallback`     | -f&nbsp;--fallback    | location of index html file for start command    | `public/index.html`               |
+| `klap.closure`      | -c&nbsp;--closure     | minify using google closure compiler over terser | `false`                           |
+| `klap.target`       | -t&nbsp;--target      | target for development server (`umd|es`)         | `es`                              |
+| `klap.sourcemap`    | --no-sourcemap        | sourcemaps for builds                            | `true`                            |
+| `klap.minify`       | --no-minify           | minification for builds                          | `true`                            |
+| `klap.globals`      |                       | global names for umd bundles                     | `{}`                              |
+| `klap.namedExports` |                       | named exports for commonjs modules               | `{}`                              |
 
 > Note: See default [browserlist coverage](https://browserl.ist/?q=%3E1%25%2C+not+ie+11%2C+not+op_mini+all)
 
@@ -111,7 +111,7 @@ Then use `npm run` or `yarn` to invoke npm scripts as you normally would.
 
 Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).
 
-Created with ♥ by [@osdevisnot](https://github.com/osdevisnot) and [all contributors](https://github.com/osdevisnot/klap/graphs/contributors).
+Created with ❤️ by [@osdevisnot](https://github.com/osdevisnot) and [all contributors](https://github.com/osdevisnot/klap/graphs/contributors).
 
 ## Contributors ✨
 
@@ -129,6 +129,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

package.json

@@ -15,7 +15,7 @@
   },
   "scripts": {
     "prebuild": "patch-package",
-    "build": "ncc build src/klap.js -mo dist",
+    "build": "ncc build src/klap.js -mo dist -e google-closure-compiler",
     "prepare": "yarn build",
     "prepub": "yarn setup",
     "pub": "yarn build && npm version",
@@ -24,7 +24,7 @@
     "presetup": "git clean -fdX",
     "setup": "yarn",
     "test": "echo 'run ./test.sh'",
-    "watch": "ncc build src/klap.js -wo dist"
+    "watch": "yarn build --watch"
   },
   "config": {
     "commitizen": {
@@ -33,6 +33,7 @@
   },
   "prettier": "@osdevisnot/prettier",
   "devDependencies": {
+    "@ampproject/rollup-plugin-closure-compiler": "0.18.1",
     "@babel/core": "7.7.7",
     "@babel/plugin-proposal-class-properties": "7.7.4",
     "@babel/plugin-proposal-object-rest-spread": "7.7.7",
@@ -42,7 +43,7 @@
     "@babel/preset-typescript": "7.7.7",
     "@osdevisnot/prettier": "4.0.0",
     "@rollup/plugin-replace": "2.3.0",
-    "@types/node": "12.12.21",
+    "@types/node": "13.1.2",
     "@zeit/ncc": "0.20.5",
     "babel-plugin-macros": "2.8.0",
     "babel-plugin-styled-components": "1.10.6",
@@ -66,7 +67,7 @@
     "rollup-pluginutils": "2.8.2",
     "semantic-release": "15.14.0",
     "servor": "3.0.5",
-    "sort-package-json": "1.31.0",
+    "sort-package-json": "1.35.0",
     "terser": "4.4.3",
     "typescript": "3.7.4"
   }

src/babel.js

@@ -13,9 +13,22 @@ import pluginTransformRegen from '@babel/plugin-transform-regenerator';
 import pluginStyledComponents from 'babel-plugin-styled-components';
 import pluginMacros from 'babel-plugin-macros';
 
+let hasReact = pkg =>
+  ['dependencies', 'devDependencies', 'peerDependencies'].reduce(
+    (last, current) => last || (pkg[current] && pkg[current]['react']),
+    false
+  );
+
 export const babelConfig = (command, pkg, options) => {
   const extensions = [...DEFAULT_EXTENSIONS, '.ts', '.tsx', '.json'];
-  const { browserlist, pragma, frag, format } = options;
+  const { browserlist, format } = options;
+
+  // Note: when using `React`, presetTs needs `React` as jsxPragma,
+  // vs presetReact needs `React.createElement`,
+  // but when using `h` as pragma, both presets needs it to be just `h`
+  let [jsxPragma, pragma, pragmaFrag] = hasReact(pkg)
+    ? ['React', 'React.createElement', 'React.Fragment']
+    : ['h', 'h', 'h'];
 
   const presets = [
     [
@@ -28,16 +41,8 @@ export const babelConfig = (command, pkg, options) => {
         exclude: ['transform-async-to-generator', 'transform-regenerator'],
       },
     ],
-    // Note: when using `React`, presetTs needs `React` as jsxPragma, vs presetReact needs `React.createElement`, but when using `h` as pragma, both presets needs it to be just `h`
-    [
-      presetTs,
-      {
-        jsxPragma: pragma.split('.').shift(),
-        isTSX: true,
-        allExtensions: true,
-      },
-    ],
-    [presetReact, { pragma, pragmaFrag: frag }],
+    [presetTs, { jsxPragma, isTSX: true, allExtensions: true }],
+    [presetReact, { pragma, pragmaFrag }],
   ];
 
   const plugins = [

src/init.js

@@ -45,10 +45,8 @@ const writePackage = async (template, { user, email }) => {
       start: 'klap start',
       watch: 'klap watch',
     },
-    prettier: '@osdevisnot/prettier',
     devDependencies: {
       [cli.name]: cli.version,
-      '@osdevisnot/prettier': cli.devDependencies['@osdevisnot/prettier'],
     },
   });
   if (template !== 'js') {
@@ -88,8 +86,17 @@ const writeFiles = async (pkg, template) => {
     defaults,
     templates[template.substring(0, 2)]
   );
+  const variations = {
+    LICENSE: ['LICENSE.md', 'LICENSE.txt'],
+  };
   for (let [file, content] of Object.entries(files)) {
-    if (!(await exists(file))) {
+    let shouldCreate = true;
+    await Promise.all(
+      [file]
+        .concat(variations[file])
+        .map(async f => (await exists(f)) && (shouldCreate = false))
+    );
+    if (shouldCreate) {
       await write(file, content);
       info(`\t- wrote ./${file}`);
     }

src/klap.js

@@ -4,6 +4,7 @@ import { rollup, watch } from 'rollup';
 import { error, info } from './logger';
 import { getOptions } from './options';
 import { plugins } from './plugins';
+import { exists } from './utils';
 
 const defaultOptions = { esModule: false, strict: false, freeze: false };
 
@@ -52,9 +53,10 @@ const buildConfig = (command, pkg, options) => {
   return { inputOptions, outputOptions };
 };
 
-const startConfig = (command, pkg, options) => {
+const startConfig = async (command, pkg, options) => {
   const { module, browser } = pkg;
-  const { name, globals, example: input, sourcemap, target } = options;
+  const { name, globals, example, source, sourcemap, target } = options;
+  const input = (await exists(example)) ? example : source;
   let inputOptions, outputOptions;
   if (target === 'es') {
     inputOptions = {
@@ -87,7 +89,7 @@ const startConfig = (command, pkg, options) => {
 const deleteDirs = async pkg => {
   const dirs = {};
   ['main', 'module', 'browser'].map(
-    type => pkg[type] && (dirs[dirname(pkg[type]) + '/*.js'] = true)
+    type => pkg[type] && (dirs[dirname(pkg[type]) + '/*.{js,map}'] = true)
   );
   await del(Object.keys(dirs));
 };
@@ -142,7 +144,7 @@ const klap = async (command, pkg) => {
       watcher.on('event', processWatcher);
       break;
     case 'start':
-      config = startConfig(command, pkg, options);
+      config = await startConfig(command, pkg, options);
       watchOptions = {
         ...config.inputOptions,
         output: config.outputOptions,

src/options.js

@@ -2,24 +2,25 @@ import getopts from 'getopts';
 import { safePackageName } from './utils';
 
 const getOptions = pkg => {
-  const { klap = {}, source = 'src/index.js' } = pkg;
+  const {
+    klap = {},
+    source = 'src/index.js',
+    browserlist = '>1%, not ie 11, not op_mini all',
+  } = pkg;
   const {
     name = pkg.name,
     port = 1234,
     sourcemap = true,
     minify = true,
-    pragma = 'React.createElement',
-    frag = 'React.Fragment',
     target = 'es',
     globals = {},
     namedExports = {},
     fallback = 'public/index.html',
     example = 'public/index.js',
-    browserlist = '>1%, not ie 11, not op_mini all',
+    closure = false,
   } = klap;
   const opts = getopts(process.argv.slice(2), {
-    boolean: ['sourcemap', 'minify'],
-    string: ['pragma', 'frag'],
+    boolean: ['sourcemap', 'minify', 'closure'],
     alias: {
       name: 'n',
       port: 'p',
@@ -28,6 +29,7 @@ const getOptions = pkg => {
       fallback: 'f',
       example: 'e',
       browserlist: 'b',
+      closure: 'c',
     },
     default: {
       name: safePackageName(name),
@@ -36,11 +38,10 @@ const getOptions = pkg => {
       target,
       sourcemap,
       minify,
-      pragma,
-      frag,
       fallback,
       example,
       browserlist,
+      closure,
     },
   });
   return { ...opts, globals, namedExports };

src/plugins.js

@@ -5,6 +5,7 @@ import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
 import replace from '@rollup/plugin-replace';
 import sourcemaps from 'rollup-plugin-sourcemaps';
+import compiler from '@ampproject/rollup-plugin-closure-compiler';
 
 import { terser } from './packages/terser';
 import { sizeme } from './packages/sizeme';
@@ -14,7 +15,7 @@ import { babelConfig } from './babel';
 
 const plugins = (command, pkg, options) => {
   const { extensions, presets, plugins } = babelConfig(command, pkg, options);
-  const { sourcemap, minify, fallback, port, namedExports } = options;
+  const { sourcemap, minify, fallback, port, namedExports, closure } = options;
 
   const babelDefaults = { babelrc: false, configFile: false, compact: false };
 
@@ -35,7 +36,11 @@ const plugins = (command, pkg, options) => {
       plugins,
     }),
     replace({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }),
-    command !== 'start' && minify && terser({ sourcemap, warnings: false }),
+    command !== 'start' &&
+      minify &&
+      (closure
+        ? compiler({ compilation_level: 'ADVANCED' })
+        : terser({ sourcemap, warnings: false })),
     command !== 'start' && sizeme(),
     command === 'start' && servor({ fallback, port }),
   ].filter(Boolean);