Merge pull request #2204 from FormidableLabs/chore/vendor-d3

Add victory-vendor package for d3 dependencies

.babelrc → .babelrc.js

@@ -1,6 +1,6 @@
-{
-  "presets": ["@babel/react"],
-  "plugins": [
+module.exports = {
+  presets: ["@babel/preset-react"],
+  plugins: [
     "lodash",
     "@babel/proposal-class-properties",
     "@babel/transform-arrow-functions",
@@ -15,25 +15,17 @@
     "@babel/proposal-object-rest-spread",
     "@babel/plugin-proposal-export-namespace-from"
   ],
-  "env": {
-    "commonjs": {
-      "plugins": [
+  env: {
+    commonjs: {
+      plugins: [
         [
           "@babel/transform-modules-commonjs",
           {
-            "strict": false,
-            "allowTopLevelThis": true
-          }
-        ],
-        [
-          "module-resolver",
-          {
-            "alias": {
-              "^victory-(.+)/es/(.+)": "^victory-\\1/lib/\\2"
-            }
+            strict: false,
+            allowTopLevelThis: true
           }
         ]
       ]
     }
   }
-}
+};

.eslintignore

@@ -1,6 +1,4 @@
 node_modules
-config
-package-scripts.js
 storybook-static
 coverage
 dist

.prettierignore

@@ -2,7 +2,9 @@
 coverage
 dist
 lib
+lib-vendor
 es
+packages/victory-vendor/d3-*.js
 node_modules
 npm-debug.log*
 lerna-debug.log*

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Victory Changelog
 
+## UNRELEASED
+
+* Vendor in d3 libraries to new package `victory-vendor` and upgrade. Our CommonJS path now uses transpiled versions of the `d3-*` libraries while our ESM path continues to use the real underlying dependencies.
+    * Update our tests to only refer to _built_ versions of our libraries (in the past there was a mix of source and built). This means Karma uses the ESM version of libraries while Jest uses the CommonJS versions.
+    * Added very basic Node.js tests to catch future ESM issues.
+    * Switch all relative/prefixed import paths to be just `import <name> from "victory-<pkg>"`.
+    * Update various dependencies.
+
 ## 36.3.2 (2022-04-14)
 * Added functionality to be able to pass user props to components. Safe… by @dlcartright in https://github.com/FormidableLabs/victory/pull/2151
 * Bump moment from 2.29.1 to 2.29.2 by @dependabot in https://github.com/FormidableLabs/victory/pull/2186

CONTRIBUTING.md

@@ -30,42 +30,72 @@ Victory uses [`nps`](https://github.com/kentcdodds/nps) to organize package scri
 
 Clone this repo:
 
-```console
+```sh
 $ git clone https://github.com/FormidableLabs/victory.git
 $ cd victory
 ```
 
 Use [Yarn](https://yarnpkg.com/) to install dependencies:
 
-```console
+```sh
 $ yarn install
 ```
 
 Run a development server and check out the demos. This command will also build and watch `lib/` and `es/` directories in all packages, so your demos will always be in sync with code changes.
 
-```console
+```sh
 $ yarn start
 ```
 
 running this command will serve demo pages at http://localhost:3000/ and tests at http://localhost:3001/test/client/test.html
 
+As a useful tip if you're working in just one package in the monorepo, you can rebuild just that package:
+
+```sh
+$ lerna exec --scope <package name> -- yarn nps build-libs
+$ lerna exec --scope victory-core -- yarn nps build-libs
+```
+
 ## Checks, Tests
 
 When running a development server, tests will be served automatically at http://localhost:3001/test/client/test.html
 
 Tests may also be run in the terminal with:
 
-```console
+```sh
+# Build and run all tests.
 $ yarn nps test
+
+# Run just Karma tests (packages must be already built).
+$ yarn nps karma
+$ KARMA_CAPTURE_CONSOLE=true yarn nps karma # Same, but enable console logging in CLI
 ```
 
 If your terminal is under a proxy, you should turn off the proxy, or ChromeHeadless will not start properly.
 
+If you are debugging tests with Karma, it's usually easier to debug in a real browser. An example workflow:
+
+```sh
+# In one terminal run a watch on library files
+$ yarn nps watch
+
+# In another terminal the browser Karma server
+$ yarn nps server.test
+
+# Open a browser
+$ open http://localhost:3001/test/client/test.html
+```
+
 Victory uses eslint and prettier to maintain code style consistency. Before creating a pull request, please lint and format your changes with the following commands:
 
-```console
-$ yarn nps lint
-$ yarn nps format
+```sh
+# Lint
+$ yarn nps lint                                       # check
+$ lerna exec --scope <pkg name> -- yarn nps lint.fix  # fix specific package
+
+# Prettier
+$ yarn nps format.ci  # check
+$ yarn nps format.fix # fix
 ```
 
 ## Visual Tests
@@ -74,13 +104,13 @@ Victory relies heavily on visual regression testing with [Storybook](https://sto
 
 Write visual tests for new features by adding them in the `stories` directory. Run storybooks and check out changes. Storybooks are served from http://localhost:6006/
 
-```console
+```sh
 $ yarn storybook
 ```
 
 [Chromatic](https://www.chromaticqa.com/) provides automated visual testing. All internal PRs will trigger a new Chromatic build, which will be displayed along with CI status. Chromatic builds for Victory may be viewed in more detail here: https://www.chromaticqa.com/builds?appId=5b4acf7c54c0490024d5980b. Chromatic requires a secret app code to run, so PRs from external contributors will not automatically trigger a Chromatic build. For this reason, changes from external contributors will be checked out and opened as separate PRs so Chromatic may be used to verify any changes. Developers with access to the secret app code may also trigger a chromatic build manually with:
 
-```console
+```sh
 $ yarn chromatic
 ```
 
@@ -90,28 +120,28 @@ Victory uses [Lerna](https://lerna.js.org/) to automate versioning and publishin
 
 Each package must contain the following `version` script `package.json`:
 
-```
+```js
 "scripts": {
   "version": "nps build-libs && nps build-dists",
 }
 ```
 
 Before versioning, we run `lerna bootstrap` and `link-parent-bin` to ensure that each individual package has the `devDependencies` it needs to run its `version` script. Pre version checks are run _once_ for all packages, and are defined in the root directory `package.json`
 
-```
+```js
 "preversion": "lerna bootstrap && link-parent-bin && nps check"
 ```
 
 The following commands will let you try a version without publishing or creating git commits:
 
-```console
+```sh
 // This command bumps versions, runs checks, builds libs. No git commits will be made, and nothing will be published. `package.json` files in all packages will be altered, so be careful to clean up afterwards. This command will only run all pre-version scripts if there are committed changes to packages, so creating a test commit before running this command will typically be necessary.
 $ nps lerna-dry-run
 ```
 
 To publish a package _for real_
 
-```console
+```sh
 $ lerna publish
 ```
 

config/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "extends": ["formidable/configurations/es6-node", "prettier"],
+  "rules": {},
+  "globals": {}
+}

config/karma/karma.conf.coverage.js

@@ -5,11 +5,11 @@
  *
  * This configuration is the same as basic one-shot version, just with coverage.
  */
-var path = require("path");
-var webpackCovCfg = require("../webpack/webpack.config.coverage");
+const path = require("path");
+const webpackCovCfg = require("../webpack/webpack.config.coverage");
 
 // Replace with `__dirname` if using in project root.
-var ROOT = process.cwd();
+const ROOT = process.cwd();
 
 module.exports = function (config) {
   /* eslint-disable global-require */

config/karma/karma.conf.dev.js

@@ -1,14 +1,9 @@
 "use strict";
-var path = require("path");
+const path = require("path");
 
-var MAIN_PATH = path.join(process.cwd(), "test/client/main.js");
-var POLYFILL_PATH = path.join(
-  path.dirname(require.resolve("core-js/package.json")),
-  "es6/**/*.js"
-);
-var PREPROCESSORS = {};
+const MAIN_PATH = path.resolve("test/client/main.js");
+const PREPROCESSORS = {};
 PREPROCESSORS[MAIN_PATH] = ["webpack"];
-PREPROCESSORS[POLYFILL_PATH] = ["webpack"];
 
 /*
  * Karma Configuration: "dev" version.
@@ -36,10 +31,6 @@ module.exports = function (config) {
       // Sinon has issues with webpack. Do global include.
       require.resolve("sinon/pkg/sinon"),
 
-      // Polyfills for PhantomJS in React 16.
-      require.resolve("core-js/es6/map"),
-      require.resolve("core-js/es6/set"),
-
       // Test bundle (must be created via `npm run dev|hot|server-test`)
       "http://127.0.0.1:3001/assets/main.js"
     ],

config/karma/karma.conf.js

@@ -6,18 +6,13 @@
  * the test files one-off for just a single run. This is appropriate for a
  * CI environment or if you're not otherwise running `npm run dev|hot`.
  */
-var path = require("path");
-var webpack = require("webpack");
-var webpackCfg = require("../webpack/webpack.config.test");
+const path = require("path");
+const webpack = require("webpack");
+const webpackCfg = require("../webpack/webpack.config.test");
 
-var MAIN_PATH = path.join(process.cwd(), "test/client/main.js");
-var POLYFILL_PATH = path.join(
-  path.dirname(require.resolve("core-js/package.json")),
-  "es6/**/*.js"
-);
-var PREPROCESSORS = {};
+const MAIN_PATH = path.resolve("test/client/main.js");
+const PREPROCESSORS = {};
 PREPROCESSORS[MAIN_PATH] = ["webpack"];
-PREPROCESSORS[POLYFILL_PATH] = ["webpack"];
 
 module.exports = function (config) {
   /* eslint-disable global-require */
@@ -33,10 +28,6 @@ module.exports = function (config) {
       // Sinon has issues with webpack. Do global include.
       require.resolve("sinon/pkg/sinon"),
 
-      // Polyfills for PhantomJS in React 16.
-      require.resolve("core-js/es6/map"),
-      require.resolve("core-js/es6/set"),
-
       // Test bundle (created via local webpack-dev-server in this config).
       MAIN_PATH
     ],

config/webpack/demo/webpack.config.dev-ts.js

@@ -1,23 +1,20 @@
 "use strict";
 
-var path = require("path");
-var glob = require("glob");
-var LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
+const path = require("path");
+const glob = require("glob");
+const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
 
-var ROOT = process.cwd();
-var PACKAGES = glob.sync("packages/*/src", { root: ROOT });
-var FILES = PACKAGES.map(function (p) {
+const ROOT = process.cwd();
+const PACKAGES = glob.sync("packages/*/src", { root: ROOT });
+const FILES = PACKAGES.map(function (p) {
   return path.join(ROOT, p);
 });
-var DEMO = path.resolve("demo");
-var WDS_PORT = 3000;
+const DEMO = path.resolve("demo");
+const WDS_PORT = 3000;
 
 module.exports = {
   mode: "development",
   resolve: {
-    alias: {
-      "@packages": path.resolve("packages")
-    },
     extensions: [".ts", ".tsx", ".js", ".json"]
   },
   entry: "./demo/ts/app.tsx",
@@ -45,7 +42,11 @@ module.exports = {
         // Use include specifically of our sources.
         // Do _not_ use an `exclude` here.
         include: FILES,
-        loader: "babel-loader"
+        use: {
+          loader: "babel-loader",
+          // eslint-disable-next-line global-require
+          options: require("../../../.babelrc.js")
+        }
       }
     ]
   },

config/webpack/demo/webpack.config.dev.js

@@ -1,24 +1,19 @@
 "use strict";
 
-var path = require("path");
-var glob = require("glob");
-var LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
+const path = require("path");
+const glob = require("glob");
+const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
 
-var ROOT = process.cwd();
-var PACKAGES = glob.sync("packages/*/src", { root: ROOT });
-var FILES = PACKAGES.map(function (p) {
+const ROOT = process.cwd();
+const PACKAGES = glob.sync("packages/*/src", { root: ROOT });
+const FILES = PACKAGES.map(function (p) {
   return path.join(ROOT, p);
 });
-var DEMO = path.resolve("demo");
-var WDS_PORT = 3000;
+const DEMO = path.resolve("demo");
+const WDS_PORT = 3000;
 
 module.exports = {
   mode: "development",
-  resolve: {
-    alias: {
-      Packages: path.resolve("packages")
-    }
-  },
 
   devServer: {
     port: WDS_PORT,
@@ -50,7 +45,11 @@ module.exports = {
         // Use include specifically of our sources.
         // Do _not_ use an `exclude` here.
         include: FILES.concat([path.join(DEMO, "js")]),
-        loader: "babel-loader"
+        use: {
+          loader: "babel-loader",
+          // eslint-disable-next-line global-require
+          options: require("../../../.babelrc.js")
+        }
       }
     ]
   },

config/webpack/demo/webpack.config.hot.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _ = require("lodash");
-var base = require("./webpack.config.dev");
+const _ = require("lodash");
+const base = require("./webpack.config.dev");
 
 // Clone our own module object.
-var mod = _.cloneDeep(base.module);
-var firstLoader = mod.rules[0]; // eslint-disable-line no-magic-numbers
+const mod = _.cloneDeep(base.module);
+const firstLoader = mod.rules[0]; // eslint-disable-line no-magic-numbers
 
 // Update rules array. First loader needs react-hot-loader.
 firstLoader.rules = [require.resolve("react-hot-loader")]