feat: Support Dev Expressions (Fix #47) (#48)

Author: osdevisnot

README.md

@@ -85,6 +85,8 @@ The `init` command will create a minimal `package.json` with `source`, `main`, `
 
 Then use `npm run` or `yarn` to invoke npm scripts as you normally would.
 
+> See [examples](examples) for common use cases using `klap`.
+
 ### :anger: Granular Control
 
 `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`.
@@ -134,6 +136,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!

cli.js

@@ -4,6 +4,13 @@ const { init, klap, read, log, error, info } = require('./dist');
 const { name, version } = require('./package.json');
 const command = process.argv[2];
 
+const defaultEnvironment = {
+  build: 'production',
+  prod: 'production',
+  watch: 'development',
+  start: 'development',
+};
+
 (async () => {
   switch (command) {
     case 'init':
@@ -15,7 +22,11 @@ const command = process.argv[2];
     case 'watch':
     case 'start':
       log(`${name}@${version} - Working on ${command}...`);
-      const pkg = JSON.parse(await read(path.join(process.cwd(), 'package.json')));
+      process.env.NODE_ENV =
+        process.env.NODE_ENV || defaultEnvironment[command];
+      const pkg = JSON.parse(
+        await read(path.join(process.cwd(), 'package.json'))
+      );
       await klap(command, pkg);
       break;
     case 'help':

examples/README.md

@@ -0,0 +1,9 @@
+{
+  "name": "dev-expressions",
+  "version": "0.0.0",
+  "private": true,
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "source": "src/index.js",
+  "browser": "dist/index.js"
+}

examples/dev-expressions/package.json

@@ -0,0 +1,6 @@
+export const sum = (a, b) => {
+  if (__DEV__) {
+    console.log('this console log should not end up in dist code');
+  }
+  return a + b;
+};

examples/dev-expressions/src/index.js

@@ -53,6 +53,7 @@
     "@types/node": "14.0.1",
     "@zeit/ncc": "0.22.1",
     "babel-plugin-codegen": "4.0.1",
+    "babel-plugin-dev-expression": "0.2.2",
     "babel-plugin-emotion": "10.0.33",
     "babel-plugin-macros": "2.8.0",
     "babel-plugin-styled-components": "1.10.7",

examples/minimal/public/index.html

@@ -6,6 +6,7 @@ import presetTs from '@babel/preset-typescript';
 import presetReact from '@babel/preset-react';
 
 // babel plugins
+import pluginDevExpression from 'babel-plugin-dev-expression';
 import pluginObjectRestSpread from '@babel/plugin-proposal-object-rest-spread';
 import pluginAsyncToPromise from 'babel-plugin-transform-async-to-promises';
 import pluginDecorators from '@babel/plugin-proposal-decorators';
@@ -56,6 +57,7 @@ export const babelConfig = (command, pkg, options) => {
   ];
 
   const plugins = [
+    pluginDevExpression,
     [pluginObjectRestSpread, { loose: true, useBuiltIns: true }],
     [pluginAsyncToPromise, { inlineHelpers: true, externalHelpers: true }],
     [pluginDecorators, { legacy: true }],

package.json

@@ -1,15 +1,15 @@
 #!/usr/bin/env bash
-# set -x
+set -x
 
 git clean -fdX
 
-npm install
+npm link
 
 npm run build
 
 cd examples
 
-for dir in minimal scaffold scaffold-typescript react-component react-typescript react-sc-typescript dynamic-imports
+for dir in $(ls)
 do
 	cd ${dir} && klap build && rm -rf dist/*.map && cd ..
 done