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

.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,12 @@ 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]
+      // TODO: remove this condition
+      let directory = stardustPackages[packageName]
+
+      if (fs.existsSync(path.resolve(directory, 'pkg'))) {
+        directory = path.resolve(directory, '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: {

package.json

@@ -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",

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": {
     "object.values": "^1.1.0",
     "prismjs": "^1.16.0",
     "prop-types": "^15.6.1",
     "tslib": "^1.9.3"
   },
-  "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

@@ -13,6 +13,9 @@ module.exports = {
     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 @@
+# @pika/plugin-build-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.

packages/internal-tooling/pika-plugin-bundle-types/index.js

@@ -0,0 +1,56 @@
+const path = require('path')
+const fs = require('fs')
+const { rollup } = require('rollup')
+const { dts } = require('rollup-plugin-dts')
+
+const build = async ({ cwd, manifest, out, reporter }) => {
+  const tsConfig = path.join(cwd, 'tsconfig.json')
+
+  if (manifest.types) {
+    console.info(
+      [
+        '\n',
+        'ℹ️  dist-types/: ',
+        'Your "package.json" contains "types" field, generation is skipped.',
+      ].join(' '),
+    )
+    return
+  }
+
+  if (!fs.existsSync(tsConfig)) {
+    console.error(
+      ['\n', '⚠️  dist-types/: ', 'Ensure that your package contains "tsconfig.json" file.'].join(
+        ' ',
+      ),
+    )
+    throw new Error(`Failed to build: dist-types/`)
+  }
+
+  const typingsOutputDir = path.join(out, 'dist-types')
+  const typingsOutputFile = path.join(typingsOutputDir, 'index.d.ts')
+
+  await (async () => {
+    const result = await rollup({
+      // TODO: make this list configurable
+      external: ['fela', 'lodash', 'react', 'prop-types', 'react-dom'],
+      input: path.resolve(cwd, 'src', 'index.ts'),
+      plugins: [dts({ tsconfig: tsConfig })],
+    })
+
+    await result.write({
+      file: typingsOutputFile,
+      format: 'es',
+    })
+  })()
+
+  reporter.created(typingsOutputFile, 'types')
+}
+
+const manifest = manifest => {
+  manifest.types = manifest.types || 'dist-types/index.d.ts'
+}
+
+module.exports = {
+  build,
+  manifest,
+}

packages/react-component-event-listener/package.json

@@ -3,6 +3,14 @@
   "description": "React components for binding events on the global scope.",
   "version": "0.31.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
+  "@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"]
+    ]
+  },
   "bugs": "https://github.com/stardust-ui/react/issues",
   "dependencies": {
     "prop-types": "^15.6.1",
@@ -12,14 +20,8 @@
     "@stardust-ui/internal-tooling": "^0.31.0",
     "lerna-alias": "^3.0.3-0"
   },
-  "files": [
-    "dist"
-  ],
   "homepage": "https://github.com/stardust-ui/react/tree/master/packages/react-component-event-listener",
-  "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"
@@ -29,8 +31,6 @@
   },
   "repository": "stardust-ui/react.git",
   "scripts": {
-    "build": "gulp bundle:package:no-umd --package react-component-event-listener"
-  },
-  "sideEffects": false,
-  "types": "dist/es/index.d.ts"
+    "build": "cross-env NODE_ENV=production pika-pack build"
+  }
 }

packages/react-component-event-listener/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "isolatedModules": false,
+    "outDir": "pkg/dist-types",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

packages/react-component-nesting-registry/package.json

@@ -3,6 +3,14 @@
   "description": "Registers a DOM nodes within a context.",
   "version": "0.31.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
+  "@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"]
+    ]
+  },
   "bugs": "https://github.com/stardust-ui/react/issues",
   "dependencies": {
     "prop-types": "^15.6.1",
@@ -12,14 +20,8 @@
     "@stardust-ui/internal-tooling": "^0.31.0",
     "lerna-alias": "^3.0.3-0"
   },
-  "files": [
-    "dist"
-  ],
   "homepage": "https://github.com/stardust-ui/react/tree/master/packages/react-component-nesting-registry",
-  "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"
@@ -29,8 +31,6 @@
   },
   "repository": "stardust-ui/react.git",
   "scripts": {
-    "build": "gulp bundle:package:no-umd --package react-component-nesting-registry"
-  },
-  "sideEffects": false,
-  "types": "dist/es/index.d.ts"
+    "build": "cross-env NODE_ENV=production pika-pack build"
+  }
 }

packages/react-component-nesting-registry/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "isolatedModules": false,
+    "outDir": "pkg/dist-types",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}