Merge branch 'master' into update-readme-4.0

.circleci/config.yml

@@ -149,6 +149,27 @@ jobs:
       - checkout-with-deps
       - run: npm run lint:md
 
+  usable-in-nodejs:
+    executor: node16-executor
+    steps:
+      - checkout-with-deps
+      - attach_workspace:
+          at: ./
+      - run: npm run prepare-package-json-for-release
+      - run:
+          name: "Installing lightweight-charts package into node_modules"
+          # this is hacky way to do something like `npm link lightweight-charts`
+          # but we cannot use `npm link` in CI
+          command: |
+            cd node_modules
+            ln -s ../ lightweight-charts
+      - run:
+          name: "Check CJS could be imported in NodeJS"
+          command: node -e "require('lightweight-charts')" --input-type=commonjs
+      - run:
+          name: "Check ESM could be imported in NodeJS"
+          command: node -e "import 'lightweight-charts'" --input-type=module
+
   unittests:
     executor: node16-executor
     environment:
@@ -330,6 +351,10 @@ workflows:
           filters: *default-filters
           requires:
             - build
+      - usable-in-nodejs:
+          filters: *default-filters
+          requires:
+            - build
       - unittests:
           filters: *default-filters
           requires:

.eslintrc.js

@@ -71,6 +71,7 @@ module.exports = {
 			files: [
 				'**/*.js',
 				'**/*.jsx',
+				'**/*.cjs',
 
 				// that's for md/mdx files
 				'**/*.javascript',

.size-limit.js

@@ -1,11 +1,21 @@
 // eslint-env node
 
 module.exports = [
+	{
+		name: 'CJS',
+		path: 'dist/lightweight-charts.production.cjs',
+		limit: '44.4 KB',
+	},
 	{
 		name: 'ESM',
-		path: 'dist/lightweight-charts.esm.production.js',
+		path: 'dist/lightweight-charts.production.mjs',
 		limit: '44.3 KB',
 	},
+	{
+		name: 'Standalone-ESM',
+		path: 'dist/lightweight-charts.standalone.production.mjs',
+		limit: '46.0 KB',
+	},
 	{
 		name: 'Standalone',
 		path: 'dist/lightweight-charts.standalone.production.js',

BUILDING.md

@@ -44,6 +44,7 @@ There are several included e2e tests available which can be run individually. Pl
   Note that at this step the website cannot work since it uses unpublished so far version. It will be fixed in the next steps.
 1. Create a git tag for this version with the format `vMAJ.MIN.PATCH` (see other tags).
 1. Run `npm run prepare-release` in the root folder.
+1. Run `npx publint` and ensure that there aren't any issues with the generated `package.json`.
 1. Run `npm publish` to publish changes to npm.
 1. Revert changes made in `package.json` file after `prepare-release` script.
 1. Bump the library's version in root `package.json` file to the next one (either major or minor depending on the planning and expected breaking changes).

index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+	module.exports = require('./dist/lightweight-charts.production.cjs');
+} else {
+	module.exports = require('./dist/lightweight-charts.development.cjs');
+}

package.json

@@ -12,12 +12,31 @@
     "type": "git",
     "url": "https://github.com/tradingview/lightweight-charts.git"
   },
-  "module": "dist/lightweight-charts.esm.production.js",
-  "main": "index.js",
+  "module": "dist/lightweight-charts.production.mjs",
+  "main": "index.cjs",
   "typings": "dist/typings.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": {
+        "types": "./dist/typings.d.ts",
+        "import": "./dist/lightweight-charts.development.mjs",
+        "require": "./dist/lightweight-charts.development.cjs"
+      },
+      "production": {
+        "types": "./dist/typings.d.ts",
+        "import": "./dist/lightweight-charts.production.mjs",
+        "require": "./dist/lightweight-charts.production.cjs"
+      },
+      "default": {
+        "types": "./dist/typings.d.ts",
+        "import": "./dist/lightweight-charts.production.mjs",
+        "require": "./index.cjs"
+      }
+    }
+  },
   "files": [
-    "dist/**",
-    "index.js"
+    "dist/**"
   ],
   "keywords": [
     "financial-charting-library",
@@ -107,9 +126,10 @@
     "build:watch": "npm-run-all tsc -p tsc-watch rollup-watch",
     "build:prod": "cross-env NODE_ENV=production npm run build",
     "build:release": "cross-env BUILD_TAG=release npm run build:prod",
-    "prepare-release": "npm-run-all clean build:release && node ./scripts/clean-package-json.js",
+    "prepare-release": "npm-run-all clean build:release && npm run prepare-package-json-for-release",
+    "prepare-package-json-for-release": "node ./scripts/clean-package-json.js",
     "size-limit": "size-limit",
-    "verify": "npm-run-all clean -p lint check-markdown-links build:prod -p check-dts-docs tsc-verify test size-limit",
+    "verify": "npm-run-all clean -p build:prod check-markdown-links -p lint check-dts-docs tsc-verify test size-limit",
     "test": "mocha tests/unittests/**/*.spec.ts"
   }
 }

rollup.config.js

@@ -17,16 +17,21 @@ const currentVersion = getCurrentVersion();
 
 const year = new Date().getFullYear();
 
-function getConfig(inputFile, type, isProd) {
-	const isModular = type === 'module';
-	const suffix = isModular ? 'esm' : 'standalone';
+function getConfig(
+	inputFile,
+	{ format, isProd, isStandalone }
+) {
 	const mode = isProd ? 'production' : 'development';
-
+	const extension = {
+		cjs: 'cjs',
+		esm: 'mjs',
+		iife: 'js',
+	}[format];
 	const config = {
 		input: inputFile,
 		output: {
-			format: isModular ? 'esm' : 'iife',
-			file: `./dist/lightweight-charts.${suffix}.${mode}.js`,
+			format,
+			file: `./dist/lightweight-charts${isStandalone ? '.standalone' : ''}.${mode}.${extension}`,
 			banner: `
 /*!
  * @license
@@ -41,41 +46,55 @@ function getConfig(inputFile, type, isProd) {
 				preventAssignment: true,
 				values: {
 					// make sure that this values are synced with src/typings/globals/index.d.ts
-					'process.env.NODE_ENV': JSON.stringify(isProd ? 'production' : 'development'),
+					'process.env.NODE_ENV': JSON.stringify(
+						isProd ? 'production' : 'development'
+					),
 					'process.env.BUILD_VERSION': JSON.stringify(currentVersion),
 				},
 			}),
-			isProd && terser({
-				output: {
-					comments: /@license/,
-					// eslint-disable-next-line camelcase
-					inline_script: true,
-				},
-				mangle: {
-					module: (type === 'module'),
-					properties: {
-						regex: /^_(private|internal)_/,
+			isProd &&
+				terser({
+					output: {
+						comments: /@license/,
+						// eslint-disable-next-line camelcase
+						inline_script: true,
 					},
-				},
-			}),
+					mangle: {
+						module: format === 'esm' || format === 'cjs',
+						properties: {
+							regex: /^_(private|internal)_/,
+						},
+					},
+				}),
 		],
-		external: id => isModular && /^fancy-canvas(\/.+)?$/.test(id),
+		external: id => !isStandalone && /^fancy-canvas(\/.+)?$/.test(id),
 	};
 
 	return config;
 }
 
-const configs = [
-	getConfig('./lib/prod/src/index.js', 'module', false),
-	getConfig('./lib/prod/src/standalone.js', 'standalone', false),
-];
-
+const modes = [false];
 if (process.env.NODE_ENV === 'production') {
+	modes.push(true);
+}
+
+const configs = [];
+modes.forEach(mode => {
 	configs.push(
-		getConfig('./lib/prod/src/index.js', 'module', true),
-		getConfig('./lib/prod/src/standalone.js', 'standalone', true)
+		getConfig('./lib/prod/src/index.js', { format: 'esm', isProd: mode }),
+		getConfig('./lib/prod/src/index.js', {
+			format: 'esm',
+			isProd: mode,
+			isStandalone: true,
+		}),
+		getConfig('./lib/prod/src/index.js', { format: 'cjs', isProd: mode }),
+		getConfig('./lib/prod/src/standalone.js', {
+			format: 'iife',
+			isProd: mode,
+			isStandalone: true,
+		})
 	);
-}
+});
 
 // eslint-disable-next-line no-console
 console.log(`Building version: ${currentVersion}`);

scripts/clean-package-json.js

@@ -20,6 +20,15 @@ function main() {
 	delete packageJson.devDependencies;
 	delete packageJson.scripts;
 
+	// unfortunately, it seems that for now it is impossible to put this line to package.json directly
+	// because for some reason tests don't work with that flag
+	// either mocha, ts-node or typescript does't want to work
+	// so let's add this setting on pre-publish phase
+	//
+	// Disabling this because we are setting the 'cjs' version for the 'main' key of the package.json
+	// thus the type shouldn't be module. When we drop support for cjs then we can re-enable this.
+	// packageJson.type = 'module';
+
 	fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', { encoding: 'utf-8' });
 }
 

scripts/compare-size-with-merge-base.js

@@ -10,7 +10,7 @@ const bytes = require('bytes');
 const sizeLimit = require('size-limit');
 const filePlugin = require('@size-limit/file');
 
-const sizeLimitConfig = require('../.size-limit');
+const sizeLimitConfig = require('../.size-limit.js');
 
 function run(cmd) {
 	try {

src/helpers/browsers.ts

@@ -24,6 +24,9 @@ export function isChrome(): boolean {
 
 // Determine whether the browser is running on windows.
 export function isWindows(): boolean {
+	if (!isRunningOnClientSide) {
+		return false;
+	}
 	// more accurate if available
 	if (
 		navigator?.userAgentData?.platform
@@ -35,6 +38,9 @@ export function isWindows(): boolean {
 
 // Determine whether the browser is Chromium based.
 export function isChromiumBased(): boolean {
+	if (!isRunningOnClientSide) {
+		return false;
+	}
 	if (!navigator.userAgentData) { return false; }
 	return navigator.userAgentData.brands.some(
 		(brand: UADataBrand) => {

tests/e2e/coverage/runner.js

@@ -5,7 +5,7 @@ const path = require('path');
 
 const Mocha = require('mocha');
 
-const serveLocalFiles = require('../serve-local-files').serveLocalFiles;
+const serveLocalFiles = require('../serve-local-files.js').serveLocalFiles;
 
 const mochaConfig = require('../../../.mocharc.js');
 

tests/e2e/graphics/README.md

@@ -45,6 +45,7 @@ If file is local then local server will be runner to serve that file (see [serve
 
     Let's say you run your tests in that way - `./runner.js ./golden/standalone/module.js ./test/standalone/module.js`.
     After that in `.gendata/test-case-name/1.golden.html` you can find a HTML page.
+
     To open this page properly you can run `./tests/e2e/serve-static-files.js golden.js:./golden/standalone/module.js test.js:./test/standalone/module.js` and then open that page in the browser to debug.
 
 1. The following environmental variables can be used to adjust the test:

tests/e2e/graphics/runner.js

@@ -8,7 +8,7 @@ const argv = yargs(process.argv.slice(4)).argv;
 
 const Mocha = require('mocha');
 
-const serveLocalFiles = require('../serve-local-files').serveLocalFiles;
+const serveLocalFiles = require('../serve-local-files.js').serveLocalFiles;
 
 const mochaConfig = require('../../../.mocharc.js');
 

tests/e2e/memleaks/runner.js

@@ -5,7 +5,7 @@ const path = require('path');
 
 const Mocha = require('mocha');
 
-const serveLocalFiles = require('../serve-local-files').serveLocalFiles;
+const serveLocalFiles = require('../serve-local-files.js').serveLocalFiles;
 
 const mochaConfig = require('../../../.mocharc.js');
 

website/docusaurus.config.js

@@ -12,7 +12,7 @@ const { default: pluginDocusaurus } = require('docusaurus-plugin-typedoc');
 const logger = require('@docusaurus/logger');
 
 const versions = require('./versions.json');
-const sizeLimits = require('../.size-limit');
+const sizeLimits = require('../.size-limit.js');
 
 const organizationName = process.env.GITHUB_ORGANIZATION_NAME || 'tradingview';
 const projectName = 'lightweight-charts';