tradingview · SlicedSilver · Jul 29, 2024 · Jul 29, 2024 · Jul 29, 2024
diff --git a/.gitignore b/.gitignore
@@ -3,7 +3,12 @@ node_modules/
 npm-debug.log*
 package-lock.json
 
-debug.html
+/debug/**/*
+!/debug/README.md
+!/debug/debug-standalone.html.example
+!/debug/debug-esm.html.example
+!/debug/debug-esm.mjs.example
+
 
 # python
 *.pyc

diff --git a/debug/README.md b/debug/README.md
@@ -0,0 +1,71 @@
+# Debug Folder
+
+This folder is designed for creating and testing debug files that won't be
+committed to the repository. It's a safe space for contributors to experiment
+and test without affecting the main codebase.
+
+## Contents
+
+This folder contains example files to help you get started:
+
+- `debug-esm.html.example`
+- `debug-esm.js.example`
+- `debug-standalone.html.example`
+
+## Usage
+
+### ESM Version
+
+To use the ESM (ECMAScript Module) version:
+
+1. Serve the repository on a local HTTP server. For example, you can use:
+
+   ```bash
+   npx serve
+   ```
+
+2. Navigate to `http://localhost:3000/debug/debug-esm.html` in your browser.
+   - Note: The port number (3000 in this example) should match the output from
+     your HTTP server tool.
+   - Replace `debug-esm.html` with the name of your test file.
+
+### Standalone Version
+
+The standalone version can be opened directly in the browser without needing a
+local HTTP server.
+
+## Creating Your Own Debug Files
+
+1. Create a new file in this folder with a descriptive name (e.g.,
+   `my-debug-test.html` or `my-debug-test.js`).
+2. Use the example files as templates for your own debug files.
+3. These files will be automatically ignored by Git (via .gitignore), so they
+   won't be committed to the repository.
+
+## TypeScript Support
+
+This folder includes a `tsconfig.json` file to enable TypeScript type checking for JavaScript files. This allows you to get IDE warnings and suggestions based on JSDoc type annotations.
+
+To take advantage of this:
+
+1. Ensure your IDE is configured to use the `tsconfig.json` in this folder.
+2. Use JSDoc comments in your JavaScript files to provide type information.
+3. You should now see TypeScript warnings and suggestions in your IDE when working with .js and .mjs files in this folder.
+
+## Best Practices
+
+- Always use this folder for temporary debugging and testing.
+- Don't rely on files in this folder for actual project functionality.
+- Remember to clean up your debug files when you're done with them.
+
+## Contributing
+
+When contributing to the project:
+
+1. Use this debug folder to test your changes or experiments.
+2. Once you're confident in your changes, implement them in the main project
+   files.
+3. Do not commit any files from the debug folder to the repository.
+
+If you have any questions about using the debug folder, please reach out to the
+project maintainers.
diff --git a/debug/debug-esm.html.example b/debug/debug-esm.html.example
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
+	<title>ESM Debug page</title>
+</head>
+<body style="padding: 0; margin: 0;">
+	<div id="container" style="position: absolute; width: 100%; height: 100%;"></div>
+	<script src="./debug-esm.mjs" type="module"></script>
+</body>
+</html>
diff --git a/debug/debug-esm.mjs.example b/debug/debug-esm.mjs.example
@@ -0,0 +1,42 @@
+/* eslint-env browser */
+import {
+	createChart,
+} from '../dist/lightweight-charts.standalone.development.mjs';
+
+/** @type {HTMLDivElement | null} */
+const container = document.querySelector('#container');
+
+/** @type {import('../dist/typings').DeepPartial<import('../dist/typings').ChartOptions>} */
+const options = {
+	autoSize: true,
+};
+
+/** @type {import('../dist/typings').IChartApi} */
+const chart = createChart(container, options);
+
+// @ts-ignore expose the chart api for easier debugging
+window.chart = chart;
+
+const mainSeries = chart.addLineSeries({
+	priceFormat: {
+		minMove: 1,
+		precision: 0,
+	},
+});
+mainSeries.setData(generateData());
+
+function generateData() {
+	/** @type {import('../dist/typings').LineData[]} */
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: /** @type {import('../dist/typings').Time} */ (time.getTime() / 1000),
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+
+	return res;
+}
diff --git a/debug.html.example → debug/debug-standalone.html.example b/debug.html.example → debug/debug-standalone.html.example
@@ -4,9 +4,9 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
-	<title>Debug page</title>
+	<title>Standalone Debug page</title>
 
-	<script type="text/javascript" src="./dist/lightweight-charts.standalone.development.js"></script>
+	<script type="text/javascript" src="../dist/lightweight-charts.standalone.development.js"></script>
 </head>
 
 <body style="padding: 0; margin: 0;">
@@ -28,9 +28,9 @@
 			return res;
 		}
 
-		var chart = LightweightCharts.createChart(document.getElementById('container'));
+		const chart = LightweightCharts.createChart(document.getElementById('container'));
 
-		var mainSeries = chart.addLineSeries({
+		const mainSeries = chart.addLineSeries({
 			priceFormat: {
 				minMove: 1,
 				precision: 0,