Builds into target directories (cjs, esm, umd), properly emits type d…

…efinitions

.gitignore

@@ -9,7 +9,10 @@ node_modules
 /coverage
 
 # Build
-lib
+cjs
+esm
+umd
+types
 
 # Cypress
 cypress/fixtures

.npmignore

@@ -1,10 +1,10 @@
 # Configurations
-.circleci
 .github
+.circleci
 .storybook
 .vscode
 .babelrc
-babel.config.js
+*.config.js
 .gitignore
 .prettierrc
 tsconfig.*

.storybook/webpack.config.js

@@ -4,7 +4,7 @@ module.exports = async ({ config }) => {
   const target = process.env.TARGET || 'cjs'
 
   config.resolve.alias = {
-    'atomic-layout': path.resolve(__dirname, `../lib/${target}.js`),
+    'atomic-layout': path.resolve(__dirname, `../${target}`),
     '@stories': path.resolve(__dirname, '../examples'),
   }
   return config

package.json

@@ -3,17 +3,17 @@
   "version": "0.8.1",
   "description": "Physical representation of layout composition to create declarative, responsive layouts in React.",
   "esnext": "src/index.ts",
-  "main": "lib/cjs.js",
-  "module": "lib/esm.js",
-  "umd:main": "lib/umd.js",
-  "types": "lib/types/index.d.ts",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "umd:main": "umd/index.js",
+  "types": "types/index.d.ts",
   "scripts": {
     "start": "rollup -c -w --environment NODE_ENV:production,TARGET:cjs",
     "storybook": "start-storybook -p 6020",
     "lint": "tslint -c ./tslint.json 'src/**/*.{ts,tsx}'",
-    "clean": "rimraf lib && exit 0",
-    "build": "yarn clean && yarn build:types && yarn build:rollup",
-    "build:rollup": "rollup -c --environment NODE_ENV:production",
+    "clean": "rimraf cjs umd esm types && exit 0",
+    "build": "yarn clean && yarn build:types && yarn build:all",
+    "build:all": "rollup -c --environment NODE_ENV:production",
     "build:cjs": "rollup -c --environment NODE_ENV:production,TARGET:cjs",
     "build:umd": "rollup -c --environment NODE_ENV:production,TARGET:umd",
     "build:esm": "rollup -c --environment NODE_ENV:production,TARGET:esm",
@@ -40,7 +40,7 @@
   },
   "bundlesize": [
     {
-      "path": "./lib/cjs.js",
+      "path": "./cjs/index.js",
       "maxSize": "20 kB"
     }
   ],

rollup.config.js

@@ -5,13 +5,17 @@ import commonjs from 'rollup-plugin-commonjs'
 import sourceMaps from 'rollup-plugin-sourcemaps'
 import babel from 'rollup-plugin-babel'
 import ttypescript from 'ttypescript'
-import compileTypescript from 'rollup-plugin-typescript2'
+import tsPlugin from 'rollup-plugin-typescript2'
 import { terser } from 'rollup-plugin-terser'
 import packageJson from './package.json'
 
 // Import as CJS since writing Babel config in ES
 // makes it unreadable by other tools (i.e. storybook).
 const babelConfig = require('./babel.config')
+const BUILD_DIR = '.'
+const getPath = (filepath) => {
+  return path.resolve(BUILD_DIR, filepath)
+}
 
 const nodeEnv = process.env.NODE_ENV
 const target = process.env.TARGET
@@ -24,14 +28,20 @@ const external = (moduleName) => {
 }
 
 const typescript = () => {
-  return compileTypescript({
+  return tsPlugin({
     clean: true,
     // Disable type checking during the build
     // to increase the build speed. Types must be
     // checked during the local development.
     // They may also be checked during type definition
     // emitting (ttsc)
     check: false,
+    tsconfigOverride: {
+      compilerOptions: {
+        declaration: false,
+        emitDeclarationOnly: false,
+      },
+    },
     // Provide custom TypeScript instance so it can
     // resolve path aliases (i.e. "@utils/").
     typescript: ttypescript,
@@ -50,7 +60,7 @@ const buildCjs = () => ({
   input,
   external,
   output: {
-    file: `./lib/cjs.js`,
+    file: getPath(packageJson.main),
     format: 'cjs',
     exports: 'named',
     sourcemap: PRODUCTION,
@@ -84,7 +94,7 @@ const buildUmd = () => ({
     name: 'AtomicLayout',
     format: 'umd',
     exports: 'named',
-    file: `./lib/umd.js`,
+    file: getPath(packageJson['umd:main']),
     globals: {
       react: 'React',
       'styled-components': 'styled',
@@ -118,7 +128,7 @@ const buildEsm = () => ({
   input,
   external,
   output: {
-    file: packageJson.module,
+    file: getPath(packageJson.module),
     format: 'esm',
     sourcemap: PRODUCTION,
   },

tsconfig.json

@@ -5,8 +5,9 @@
     "module": "es6",
     "target": "esnext",
     "moduleResolution": "node",
-    "outDir": "lib/types",
+    "outDir": "types",
     "declaration": true,
+    "emitDeclarationOnly": true,
     "noImplicitThis": false,
     "esModuleInterop": true,
     "jsx": "react",