Output library assets in /lib/ paths (#2002)

Author: adidahiya

.circleci/config.yml

@@ -37,6 +37,7 @@ jobs:
           root: '.'
           paths:
             - packages/*/dist
+            - packages/*/lib
             - packages/*/src/generated
 
   lint:

.gitignore

@@ -20,6 +20,7 @@ yarn-error.log
 # Blueprint
 build
 dist
+lib
 generated
 coverage
 /docs

packages/core/karma.conf.js

@@ -24,13 +24,6 @@ module.exports = function (config) {
     });
     config.set(baseConfig);
     config.set({
-        webpack: Object.assign({}, baseConfig.webpack, {
-            entry: {
-                core: [
-                    path.resolve(__dirname, "test/index.ts"),
-                    path.resolve(__dirname, "dist/blueprint.css"),
-                ],
-            },
-        }),
-    })
+        // overrides here
+    });
 };

packages/core/package.json

@@ -2,17 +2,17 @@
   "name": "@blueprintjs/core",
   "version": "1.35.0",
   "description": "Core styles & components",
-  "main": "dist/index.js",
-  "module": "dist/esm/index.js",
-  "typings": "dist/esm/index.d.ts",
-  "style": "dist/blueprint.css",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "typings": "lib/esm/index.d.ts",
+  "style": "lib/css/blueprint.css",
   "unpkg": "dist/core.bundle.js",
   "scripts": {
     "compile": "npm-run-all -p 'compile:*'",
     "compile:esm": "tsc -p ./src",
     "compile:cjs": "tsc -p ./src/tsconfig.cjs.json",
     "compile:css": "sass-compile ./src",
-    "clean": "rm -rf dist/*",
+    "clean": "rm -rf dist/* && rm -rf lib/*",
     "dev": "npm-run-all -p 'compile:esm -- --watch' 'compile:css -- --watch'",
     "dist": "npm-run-all -s 'dist:*'",
     "dist:bundle": "NODE_ENV=production webpack",

packages/core/src/docs/variables.md

@@ -3,7 +3,13 @@
 Available for use with Sass and Less.
 
 ```css.scss
-@import "path/to/@blueprintjs/core/dist/variables";
+// Sass
+@import "path/to/@blueprintjs/core/lib/scss/variables";
+```
+
+```css.less
+// Less
+@import "path/to/@blueprintjs/core/lib/less/variables";
 ```
 
 The Sass `$` convention is used in this documentation for consistency with the original source code.

packages/core/src/tsconfig.cjs.json

@@ -2,6 +2,6 @@
     "extends": "./tsconfig",
     "compilerOptions": {
         "module": "commonjs",
-        "outDir": "../dist"
+        "outDir": "../lib/cjs"
     }
 }

packages/core/src/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "extends": "../../../config/tsconfig.base",
     "compilerOptions": {
-        "outDir": "../dist/esm"
+        "outDir": "../lib/esm"
     }
 }

packages/core/test/isotest.js

@@ -5,8 +5,8 @@
 
 const { generateIsomorphicTests } = require("@blueprintjs/test-commons");
 const React = require("react");
-// TODO: get this to work with require("@std/esm")(module)("../dist/esm")
-const Core = require("../dist");
+// TODO: get this to work with require("@std/esm")(module)("../lib/esm")
+const Core = require("../lib/cjs");
 
 const tooltipContent = { content: React.createElement("h1", {}, "content") };
 const customProps = {

packages/datetime/karma.conf.js

@@ -4,21 +4,15 @@
 
 const { createKarmaConfig } = require("@blueprintjs/karma-build-scripts");
 const path = require("path");
+const coreManifest = require("../core/package.json");
+const packageManifest = require("./package.json");
 
 module.exports = function (config) {
     const baseConfig = createKarmaConfig({
         dirname: __dirname,
     });
     config.set(baseConfig);
     config.set({
-        webpack: Object.assign({}, baseConfig.webpack, {
-            entry: {
-                datetime: [
-                    path.resolve(__dirname, "test/index.ts"),
-                    path.resolve(__dirname, "../core/dist/blueprint.css"),
-                    path.resolve(__dirname, "dist/blueprint-datetime.css"),
-                ],
-            },
-        }),
-    })
+        // overrides here
+    });
 };

packages/datetime/package.json

@@ -2,17 +2,17 @@
   "name": "@blueprintjs/datetime",
   "version": "1.25.1",
   "description": "Components for interacting with dates and times",
-  "main": "dist/index.js",
-  "module": "dist/esm/index.js",
-  "typings": "dist/esm/index.d.ts",
-  "style": "dist/blueprint-datetime.css",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "typings": "lib/esm/index.d.ts",
+  "style": "lib/css/blueprint-datetime.css",
   "unpkg": "dist/datetime.bundle.js",
   "scripts": {
     "compile": "npm-run-all -p 'compile:*'",
     "compile:esm": "tsc -p ./src",
     "compile:cjs": "tsc -p ./src/tsconfig.cjs.json",
     "compile:css": "sass-compile ./src",
-    "clean": "rm -rf dist/*",
+    "clean": "rm -rf dist/* && rm -rf lib/*",
     "dev": "npm-run-all -p 'compile:esm -- --watch' 'compile:css -- --watch'",
     "dist": "npm-run-all -s 'dist:*'",
     "dist:bundle": "NODE_ENV=production webpack",

packages/datetime/src/tsconfig.cjs.json

@@ -2,6 +2,6 @@
     "extends": "./tsconfig",
     "compilerOptions": {
         "module": "commonjs",
-        "outDir": "../dist"
+        "outDir": "../lib/cjs"
     }
 }

packages/datetime/src/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "extends": "../../../config/tsconfig.base",
     "compilerOptions": {
-        "outDir": "../dist/esm"
+        "outDir": "../lib/esm"
     }
 }

packages/datetime/test/isotest.js

@@ -5,7 +5,7 @@
 
 const { generateIsomorphicTests } = require("@blueprintjs/test-commons");
 const React = require("react");
-const DateTime = require("../dist");
+const DateTime = require("../lib/cjs");
 
 describe("DateTime isomorphic rendering", () => {
     generateIsomorphicTests(

packages/docs-app/src/blueprint.md

@@ -81,7 +81,7 @@ Blueprint as well. Some Blueprint components use the following ES2015 features:
       ...
       <!-- include dependencies manually -->
       <link href="path/to/node_modules/normalize.css/normalize.css" rel="stylesheet" />
-      <link href="path/to/node_modules/@blueprintjs/core/dist/blueprint.css" rel="stylesheet" />
+      <link href="path/to/node_modules/@blueprintjs/core/lib/css/blueprint.css" rel="stylesheet" />
       ...
     </head>
     ...
@@ -101,7 +101,8 @@ Blueprint supports the venerable [unpkg CDN](https://unpkg.com). Each package pr
 library on the `Blueprint` global variable: `Blueprint.Core`, `Blueprint.Datetime`, etc.
 
 These bundles _do not include_ external dependencies; your application will need to ensure that
-`normalize.css`, `React`, `classnames`, and `Tether` are available at runtime.
+`normalize.css`, `react`, `react-dom`, `react-transition-group`, `classnames`, `popper.js`, and
+`react-popper`are available at runtime.
 
 ```html
 <!DOCTYPE html>
@@ -110,16 +111,18 @@ These bundles _do not include_ external dependencies; your application will need
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>Blueprint Starter Kit</title>
-    <link href="https://unpkg.com/normalize.css@^4.1.1" rel="stylesheet" />
-    <link href="https://unpkg.com/@blueprintjs/core@^1.11.0/dist/blueprint.css" rel="stylesheet" />
+    <link href="https://unpkg.com/normalize.css@^7.0.0" rel="stylesheet" />
+    <link href="https://unpkg.com/@blueprintjs/core@^2.0.0/lib/css/blueprint.css" rel="stylesheet" />
   </head>
   <body>
     <script src="https://unpkg.com/classnames@^2.2"></script>
     <script src="https://unpkg.com/dom4@^1.8"></script>
-    <script src="https://unpkg.com/tether@^1.4"></script>
-    <script src="https://unpkg.com/react@^15.3.1/dist/react-with-addons.min.js"></script>
-    <script src="https://unpkg.com/react-dom@^15.3.1/dist/react-dom.min.js"></script>
-    <script src="https://unpkg.com/@blueprintjs/core@^1.11.0"></script>
+    <script src="https://unpkg.com/react@^16.2.0/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@^16.2.0/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/react-transition-group@^2.2.1/dist/react-transition-group.min.js"></script>
+    <script src="https://unpkg.com/popper.js@^1.12.6/dist/umd/popper.js"></script>
+    <script src="https://unpkg.com/react-popper@~0.7.4/dist/react-popper.min.js"></script>
+    <script src="https://unpkg.com/@blueprintjs/core@^2.0.0"></script>
 
     <div id="btn"></div>
     <script>

packages/docs-app/src/examples/datetime-examples/timePickerExample.tsx

@@ -11,7 +11,7 @@ import { PrecisionSelect } from "./common/precisionSelect";
 
 import { TimePicker, TimePickerPrecision } from "@blueprintjs/datetime";
 // tslint:disable-next-line:no-submodule-imports
-import { getDefaultMaxTime, getDefaultMinTime } from "@blueprintjs/datetime/dist/esm/timePicker";
+import { getDefaultMaxTime, getDefaultMinTime } from "@blueprintjs/datetime/lib/esm/timePicker";
 
 export interface ITimePickerExampleState {
     precision?: TimePickerPrecision;

packages/docs-app/src/index.scss

@@ -4,16 +4,16 @@
 @import "~normalize.css/normalize.css";
 
 // import these first because they're the base layer
-@import "~@blueprintjs/core/dist/blueprint.css";
-@import "~@blueprintjs/datetime/dist/blueprint-datetime.css";
-@import "~@blueprintjs/icons/dist/blueprint-icons.css";
-@import "~@blueprintjs/labs/dist/blueprint-labs.css";
-@import "~@blueprintjs/select/dist/blueprint-select.css";
-@import "~@blueprintjs/table/dist/table.css";
-@import "~@blueprintjs/timezone/dist/blueprint-timezone.css";
+@import "~@blueprintjs/core/lib/css/blueprint.css";
+@import "~@blueprintjs/datetime/lib/css/blueprint-datetime.css";
+@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
+@import "~@blueprintjs/labs/lib/css/blueprint-labs.css";
+@import "~@blueprintjs/select/lib/css/blueprint-select.css";
+@import "~@blueprintjs/table/lib/css/table.css";
+@import "~@blueprintjs/timezone/lib/css/blueprint-timezone.css";
 
 // then the docs theme styles
-@import "~@blueprintjs/docs-theme/dist/docs-theme.css";
+@import "~@blueprintjs/docs-theme/lib/css/docs-theme.css";
 @import "~@blueprintjs/docs-theme/src/styles/variables";
 
 // then our own styles

packages/docs-theme/package.json

@@ -2,17 +2,17 @@
   "name": "@blueprintjs/docs-theme",
   "version": "1.3.0",
   "description": "Blueprint theme for documentalist",
-  "main": "dist/index.js",
-  "module": "dist/esm/index.js",
-  "typings": "dist/esm/index.d.ts",
-  "style": "dist/docs-theme.css",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "typings": "lib/esm/index.d.ts",
+  "style": "lib/css/docs-theme.css",
   "unpkg": "dist/docs-theme.bundle.js",
   "scripts": {
     "compile": "npm-run-all -p 'compile:*'",
     "compile:esm": "tsc -p ./src",
     "compile:cjs": "tsc -p ./src/tsconfig.cjs.json",
     "compile:css": "sass-compile ./src",
-    "clean": "rm -rf dist/*",
+    "clean": "rm -rf dist/* && rm -rf lib/*",
     "dev": "npm-run-all -p 'compile:esm -- --watch' 'compile:css -- --watch'",
     "dist": "npm-run-all -s 'dist:*'",
     "dist:bundle": "NODE_ENV=production webpack",

packages/docs-theme/src/tsconfig.cjs.json

@@ -2,6 +2,6 @@
     "extends": "./tsconfig",
     "compilerOptions": {
         "module": "commonjs",
-        "outDir": "../dist"
+        "outDir": "../lib/cjs"
     }
 }

packages/docs-theme/src/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "extends": "../../../config/tsconfig.base",
     "compilerOptions": {
-        "outDir": "../dist/esm"
+        "outDir": "../lib/esm"
     }
 }

packages/icons/package.json

@@ -2,18 +2,18 @@
   "name": "@blueprintjs/icons",
   "version": "1.0.0",
   "description": "Components, fonts, icons, and css files for creating and displaying icons.",
-  "main": "dist/index.js",
-  "module": "dist/esm/index.js",
-  "typings": "dist/esm/index.d.ts",
-  "style": "dist/blueprint-icons.css",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "typings": "lib/esm/index.d.ts",
+  "style": "lib/css/blueprint-icons.css",
   "unpkg": "dist/icons.bundle.js",
   "scripts": {
     "compile": "npm-run-all -s 'compile:pre' -p 'compile:*'",
     "compile:pre": "generate-icons-source",
     "compile:esm": "tsc -p ./src",
     "compile:cjs": "tsc -p ./src/tsconfig.cjs.json",
     "compile:css": "sass-compile ./src",
-    "clean": "rm -rf dist/*",
+    "clean": "rm -rf dist/* && rm -rf lib/*",
     "dev": "npm-run-all -p 'compile:esm -- --watch' 'compile:css -- --watch'",
     "dist": "npm-run-all -s 'dist:*'",
     "dist:bundle": "NODE_ENV=production webpack",

packages/icons/src/_font-imports.scss

@@ -3,7 +3,7 @@
 
 @import "font-face";
 
-$icon-font-path: "../resources/icons" !default;
+$icon-font-path: "../../resources/icons" !default;
 $icon-font-formats: eot woff ttf !default;
 
 @include font-face("Icons16", "#{$icon-font-path}/icons-16", $file-formats: $icon-font-formats);

packages/icons/src/tsconfig.cjs.json

@@ -2,6 +2,6 @@
     "extends": "./tsconfig",
     "compilerOptions": {
         "module": "commonjs",
-        "outDir": "../dist"
+        "outDir": "../lib/cjs"
     }
 }

packages/icons/src/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "extends": "../../../config/tsconfig.base",
     "compilerOptions": {
-        "outDir": "../dist/esm"
+        "outDir": "../lib/esm"
     }
 }

packages/icons/test/isotest.js

@@ -5,7 +5,7 @@
 
 const { generateIsomorphicTests } = require("@blueprintjs/test-commons");
 const React = require("react");
-const Icons = require("../dist");
+const Icons = require("../lib/cjs");
 
 describe("Icons isomorphic rendering", () => {
     generateIsomorphicTests(

packages/karma-build-scripts/createKarmaConfig.js

@@ -4,7 +4,8 @@
 
 const path = require("path");
 const webpack = require("webpack");
-const webpackConfig = require("./webpack.karma.config");
+const coreManifest = require("../core/package.json");
+const webpackBuildScripts = require("@blueprintjs/webpack-build-scripts");
 
 const COVERAGE_PERCENT = 80;
 const COVERAGE_PERCENT_HIGH = 90;
@@ -16,6 +17,8 @@ const KARMA_SERVER_PORT = 9876;
  * @param coverageOverrides { [glob: string]: object }
  */
 module.exports = function createKarmaConfig({ dirname, coverageExcludes, coverageOverrides }) {
+    const packageManifest = require(`${dirname}/package.json`);
+
     return {
         basePath: dirname,
         browserNoActivityTimeout: 100000,
@@ -57,7 +60,8 @@ module.exports = function createKarmaConfig({ dirname, coverageExcludes, coverag
                 pattern: path.join(dirname, "resources/**/*"),
                 watched: false,
             },
-            path.join(dirname, "dist/**/*.css"),
+            path.join(dirname, `../core/${coreManifest.style}`),
+            path.join(dirname, packageManifest.style),
             path.join(dirname, "test/index.ts"),
         ],
         frameworks: ["mocha", "chai", "phantomjs-shim", "sinon"],
@@ -71,7 +75,13 @@ module.exports = function createKarmaConfig({ dirname, coverageExcludes, coverag
         },
         reporters: ["mocha", "coverage"],
         singleRun: true,
-        webpack: webpackConfig,
+        webpack: Object.assign({}, webpackBuildScripts.karmaConfig, {
+            entry: {
+                testIndex: [
+                    path.resolve(dirname, "test/index.ts"),
+                ],
+            },
+        }),
         webpackMiddleware: {
             noInfo: true,
             stats: {

packages/karma-build-scripts/package.json

@@ -6,6 +6,7 @@
     "test": "exit 0"
   },
   "dependencies": {
+    "@blueprintjs/webpack-build-scripts": "^0.3.0",
     "istanbul-instrumenter-loader": "^3.0.0",
     "karma": "^1.7.1",
     "karma-chai": "^0.1.0",