chore(package): use Babel and pika-pack

.browserslistrc

@@ -0,0 +1,6 @@
+### Browsers that we support
+
+>0.2%
+not dead
+not ie < 11
+not op_mini all

.eslintignore

@@ -3,3 +3,4 @@ coverage/
 dist/
 dll/
 node_modules/
+pkg/

.gitignore

@@ -17,5 +17,6 @@ docs/src/exampleSources
 docs/dist/
 dll/
 node_modules/
+pkg/
 stats/
 .vscode/

build/gulp/tasks/test-circulars/config.ts

@@ -1,6 +1,7 @@
 import config from '../../../../config'
 
-const reactPackageDist = (filePath: string) => config.paths.packageDist('react', 'es', filePath)
+const reactPackageDist = (filePath: string) =>
+  config.paths.packages('react', 'pkg', 'dist-src', filePath)
 
 export const cyclesToSkip = [
   [reactPackageDist('components/Tree/Tree.js'), reactPackageDist('components/Tree/TreeItem.js')],

build/gulp/tasks/test-circulars/index.ts

@@ -8,7 +8,7 @@ import config from '../../../../config'
 import { cyclesToSkip } from './config'
 import { buildWebpackConfig, configureCircularDependencyCheckPlugin, isCycleToSkip } from './utils'
 
-const entryFilePath = config.paths.packageDist('react', 'es', 'index.js')
+const entryFilePath = config.paths.packages('react', 'pkg', 'dist-src', 'index.js')
 const outputFilePath = path.resolve(__dirname, 'result.js')
 
 task('test:circulars:run', done => {

build/gulp/tasks/test-circulars/utils.ts

@@ -1,5 +1,6 @@
 import path from 'path'
 import CircularDependencyPlugin from 'circular-dependency-plugin'
+import { webpack as lernaAliases } from 'lerna-alias'
 
 import config from '../../../../config'
 
@@ -44,5 +45,8 @@ export const buildWebpackConfig = ({
       filename: path.basename(outputFilePath),
     },
     plugins,
+    resolve: {
+      alias: lernaAliases({ sourceDirectory: 'pkg/dist-web' }),
+    },
   }
 }

build/gulp/tasks/test-projects.tsx

@@ -51,7 +51,7 @@ const packStardustPackages = async (logger: Function): Promise<PackedPackages> =
   await Promise.all(
     Object.keys(stardustPackages).map(async (packageName: string) => {
       const filename = tmp.tmpNameSync({ prefix: `stardust-`, postfix: '.tgz' })
-      const directory = stardustPackages[packageName]
+      const directory = path.resolve(stardustPackages[packageName], 'pkg')
 
       await runIn(directory)(`yarn pack --filename ${filename}`)
       logger(`✔️Package "${packageName}" was packed to ${filename}`)

build/webpack.config.stats.ts

@@ -1,5 +1,6 @@
 import CleanWebpackPlugin from 'clean-webpack-plugin'
 import fs from 'fs'
+import { webpack as lernaAliases } from 'lerna-alias'
 import path from 'path'
 import webpack from 'webpack'
 import config from '../config'
@@ -64,6 +65,7 @@ const makeConfig = (srcPath, name) => ({
     new webpack.DefinePlugin(config.compiler_globals),
   ],
   resolve: {
+    alias: lernaAliases({ sourceDirectory: 'pkg/dist-web' }),
     extensions: ['.ts', '.tsx', '.js', '.json'],
   },
   performance: {

gulpfile.js

@@ -4,8 +4,9 @@ const { task, series, parallel } = require('gulp')
 const path = require('path')
 const tsPaths = require('tsconfig-paths')
 
-const config = require('./config').default
 const { compilerOptions } = require('./build/tsconfig.docs.json')
+const config = require('./config').default
+const sh = require('./build/gulp/sh').default
 
 // add node_modules/.bin to the path so we can invoke .bin CLIs in tasks
 process.env.PATH =
@@ -16,9 +17,10 @@ tsPaths.register({
   paths: compilerOptions.paths,
 })
 
+task('bundle:all-packages', () => sh('lerna run build'))
+
 // load tasks in order of dependency usage
 require('./build/gulp/tasks/dll')
-require('./build/gulp/tasks/bundle')
 require('./build/gulp/tasks/docs')
 require('./build/gulp/tasks/screener')
 require('./build/gulp/tasks/stats')

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "scripts": {
     "build": "gulp build",
-    "build:bundle": "gulp bundle:all-packages",
+    "build:bundle": "lerna run build",
     "build:docs": "gulp --series dll build:docs",
     "ci": "yarn lint && yarn prettier && yarn test --strict",
     "clean:cache": "gulp clean:cache",
@@ -18,11 +18,11 @@
     "precommit": "lint-staged",
     "prepush": "gulp git:prepush",
     "postcommit": "git update-index --again",
-    "prerelease": "yarn ci && cross-env NODE_ENV=production yarn build",
-    "postrelease": "yarn deploy:docs",
-    "release:major": "yarn prerelease && lerna publish major && yarn postrelease",
-    "release:minor": "yarn prerelease && lerna publish minor && yarn postrelease",
-    "release:patch": "yarn prerelease && lerna publish patch && yarn postrelease",
+    "prerelease": "yarn ci",
+    "postrelease": "cross-env NODE_ENV=production yarn build && lerna publish from-package --contents pkg && yarn deploy:docs",
+    "release:major": "yarn prerelease && lerna version major && yarn postrelease",
+    "release:minor": "yarn prerelease && lerna version minor && yarn postrelease",
+    "release:patch": "yarn prerelease && lerna version patch && yarn postrelease",
     "prestart": "yarn satisfied",
     "start": "cross-env SKIP_ERRORS=true gulp --series dll docs",
     "stats:build": "gulp stats",
@@ -92,7 +92,6 @@
     "gulp-plumber": "^1.2.0",
     "gulp-remember": "^1.0.1",
     "gulp-transform": "^3.0.5",
-    "gulp-typescript": "^5.0.0",
     "gulp-util": "^3.0.8",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",

packages/docs-components/package.json

@@ -4,20 +4,22 @@
   "version": "0.31.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/stardust-ui/react/issues",
+  "@pika/pack": {
+    "pipeline": [
+      ["@pika/plugin-standard-pkg", { "exclude": ["test/**/*"] }],
+      ["@pika/plugin-build-node"],
+      ["@pika/plugin-build-web"],
+      ["@stardust-ui/internal-tooling/pika-plugin-bundle-types"]
+    ]
+  },
   "dependencies": {
+    "@babel/runtime-corejs2": "^7.4.5",
     "object.values": "^1.1.0",
     "prismjs": "^1.16.0",
-    "prop-types": "^15.6.1",
-    "tslib": "^1.9.3"
+    "prop-types": "^15.6.1"
   },
-  "files": [
-    "dist"
-  ],
   "homepage": "https://github.com/stardust-ui/react/tree/master/packages/docs-components",
-  "jsnext:main": "dist/es/index.js",
   "license": "MIT",
-  "main": "dist/commonjs/index.js",
-  "module": "dist/es/index.js",
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
@@ -27,8 +29,6 @@
   },
   "repository": "stardust-ui/react.git",
   "scripts": {
-    "build": "gulp bundle:package:no-umd --package docs-components"
-  },
-  "sideEffects": false,
-  "types": "dist/es/index.d.ts"
+    "build": "cross-env NODE_ENV=production pika-pack build"
+  }
 }

packages/docs-components/src/knobs/useKnobValues.ts

@@ -1,4 +1,4 @@
-import * as values from 'object.values'
+import values from 'object.values'
 import * as React from 'react'
 
 import KnobsContext from './KnobContext'

packages/internal-tooling/babel/index.js

@@ -7,12 +7,15 @@ module.exports = {
   plugins: [
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-syntax-dynamic-import',
-    '@babel/plugin-transform-runtime',
+    ['@babel/plugin-transform-runtime', { corejs: 2 }],
   ],
   env: {
     development: {
       plugins: ['react-hot-loader/babel'],
     },
+    production: {
+      plugins: ['lodash'],
+    },
     test: {
       presets: [['@babel/preset-env', { modules: 'commonjs' }]],
     },

packages/internal-tooling/package.json

@@ -9,11 +9,17 @@
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
+    "@pika/pack": "^0.3.7",
+    "@pika/plugin-build-node": "^0.4.0",
+    "@pika/plugin-build-web": "^0.4.0",
+    "@pika/plugin-standard-pkg": "^0.4.0",
     "@types/jest": "^24.0.11",
     "@types/jest-axe": "^2.2.3",
     "@typescript-eslint/eslint-plugin": "^1.6.0",
     "@typescript-eslint/parser": "^1.6.0",
     "babel-jest": "^24.5.0",
+    "babel-plugin-lodash": "^3.3.4",
+    "cross-env": "^5.2.0",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^4.1.0",
@@ -24,12 +30,16 @@
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-react-hooks": "^1.6.0",
     "jest": "^24.5.0",
-    "jest-axe": "^3.1.1"
+    "jest-axe": "^3.1.1",
+    "rollup": "^1.11.3",
+    "rollup-plugin-dts": "^0.15.1",
+    "typescript": "^3.3.3333"
   },
   "files": [
     "babel",
     "eslint",
-    "jest"
+    "jest",
+    "pika-plugin-bundle-types"
   ],
   "publishConfig": {
     "access": "public"

packages/internal-tooling/pika-plugin-bundle-types/README.md

@@ -0,0 +1,38 @@
+# @stardust-ui/internal-tooling/pika-plugin-bundle-types
+
+> A [@pika/pack](https://github.com/pikapkg/pack) build plugin.
+> Generates definitions with TypeScript and then creates a bundle from your TypeScript type definitions, using [rollup-plugin-dts](https://github.com/Swatinem/rollup-plugin-dts).
+
+
+## Install
+
+```sh
+# npm:
+npm install @stardust-ui/internal-tooling --save-dev
+# yarn:
+yarn add @stardust-ui/internal-tooling --dev
+```
+
+
+## Usage
+
+```json
+{
+  "name": "example-package-json",
+  "version": "1.0.0",
+  "@pika/pack": {
+    "pipeline": [
+      ["@pika/plugin-standard-pkg"],
+      ["@stardust-ui/internal-tooling/pika-plugin-bundle-types"]
+    ]
+  }
+}
+```
+
+For more information about @pika/pack & help getting started, [check out the main project repo](https://github.com/pikapkg/pack).
+
+
+## Result
+
+1. Generates a single file with TypeScript definitions for your package build: `dist-types/`
+1. Adds a "types" entrypoint to your built `package.json` manifest.