Added proper support for ES module exports (with some fixes for NodeJS context)

.circleci/config.yml

@@ -149,6 +149,24 @@ 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 "import 'lightweight-charts'" --input-type=module
+
   unittests:
     executor: node16-executor
     environment:
@@ -323,6 +341,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',

package.json

@@ -13,11 +13,23 @@
     "url": "https://github.com/tradingview/lightweight-charts.git"
   },
   "module": "dist/lightweight-charts.esm.production.js",
-  "main": "index.js",
   "typings": "dist/typings.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": {
+        "import": "./dist/lightweight-charts.esm.development.js"
+      },
+      "production": {
+        "import": "./dist/lightweight-charts.esm.production.js"
+      },
+      "default": {
+        "import": "./dist/lightweight-charts.esm.production.js"
+      }
+    }
+  },
   "files": [
-    "dist/**",
-    "index.js"
+    "dist/**"
   ],
   "keywords": [
     "financial-charting-library",
@@ -105,7 +117,8 @@
     "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",
     "test": "mocha tests/unittests/**/*.spec.ts"

scripts/clean-package-json.js

@@ -20,6 +20,12 @@ 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
+	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';

website/plugins/enhanced-codeblock/theme/CodeBlock/import-lightweight-charts-version.ts

@@ -2,7 +2,7 @@
 import type { Version } from '../../../../versions';
 
 export type LightweightChartsApi38 = typeof import('lightweight-charts-3.8');
-export type LightweightChartsApiCurrent = typeof import('../../../../..');
+export type LightweightChartsApiCurrent = typeof import('../../../../../dist/lightweight-charts.esm.development');
 
 export interface LightweightChartsApiTypeMap {
 	'3.8': LightweightChartsApi38;
@@ -47,7 +47,7 @@ export const importLightweightChartsVersion: LightweightChartsApiGetters = {
 		return { module, createChart };
 	},
 	current: async () => {
-		const module = await import('../../../../..');
+		const module = await import('../../../../../dist/lightweight-charts.esm.development');
 
 		const createChart: typeof module.createChart = (container: string | HTMLElement, options?: Parameters<typeof module.createChart>[1]) => {
 			const result = module.createChart(container, options);