Merge pull request #922 from edew/add-docs-versioning

.eslintignore

@@ -9,4 +9,5 @@
 **/node_modules
 
 /website/docs/api/**
-/website/build/**
+/website/versioned_docs/**/api/**
+/website/build/**

.eslintrc.js

@@ -1,3 +1,35 @@
+function getNamingConventionRules(additionalDefaultFormats = []) {
+	return [
+		{ selector: 'default', format: ['camelCase', ...additionalDefaultFormats], leadingUnderscore: 'forbid', trailingUnderscore: 'forbid' },
+
+		{ selector: 'variable', format: ['camelCase', 'UPPER_CASE'] },
+		// {
+		// 	selector: 'variable',
+		// 	types: ['boolean'],
+		// 	format: ['PascalCase'],
+		// 	prefix: ['is', 'should', 'has', 'can', 'did', 'will', 'show', 'enable', 'need'],
+		// },
+
+		{ selector: 'typeLike', format: ['PascalCase'] },
+		{ selector: 'enumMember', format: ['PascalCase'] },
+
+		{ selector: 'memberLike', modifiers: ['private'], leadingUnderscore: 'require', format: ['camelCase'] },
+		{ selector: 'memberLike', modifiers: ['protected'], leadingUnderscore: 'require', format: ['camelCase'] },
+
+		{
+			selector: 'property',
+			format: ['PascalCase'],
+			filter: {
+				match: true,
+				regex: '^(Area|Baseline|Bar|Candlestick|Histogram|Line)$',
+			},
+		},
+
+		// { selector: 'typeParameter', format: ['PascalCase'], prefix: ['T', 'U'] },
+	];
+}
+
+/** @type {import('eslint').Linter.Config} */
 module.exports = {
 	reportUnusedDisableDirectives: true,
 	env: {
@@ -105,7 +137,7 @@ module.exports = {
 			},
 		},
 		{
-			files: ['**/*.ts'],
+			files: ['**/*.ts', '**/*.tsx'],
 			excludedFiles: ['**/*.md/*.ts', 'dist/**'],
 			parser: '@typescript-eslint/parser',
 			extends: [
@@ -118,6 +150,23 @@ module.exports = {
 				project: 'tsconfig.json',
 				sourceType: 'module',
 			},
+			overrides: [
+				{
+					files: ['website/**/*.tsx'],
+					parserOptions: {
+						project: 'website/tsconfig.json',
+						sourceType: 'module',
+					},
+					rules: {
+						'@typescript-eslint/naming-convention': [
+							'error',
+
+							// allow PascalCase for react components
+							...getNamingConventionRules(['PascalCase']),
+						],
+					},
+				},
+			],
 			rules: {
 				'@typescript-eslint/array-type': [
 					'error',
@@ -169,32 +218,7 @@ module.exports = {
 				],
 				'@typescript-eslint/naming-convention': [
 					'error',
-					{ selector: 'default', format: ['camelCase'], leadingUnderscore: 'forbid', trailingUnderscore: 'forbid' },
-
-					{ selector: 'variable', format: ['camelCase', 'UPPER_CASE'] },
-					// {
-					// 	selector: 'variable',
-					// 	types: ['boolean'],
-					// 	format: ['PascalCase'],
-					// 	prefix: ['is', 'should', 'has', 'can', 'did', 'will', 'show', 'enable', 'need'],
-					// },
-
-					{ selector: 'typeLike', format: ['PascalCase'] },
-					{ selector: 'enumMember', format: ['PascalCase'] },
-
-					{ selector: 'memberLike', modifiers: ['private'], leadingUnderscore: 'require', format: ['camelCase'] },
-					{ selector: 'memberLike', modifiers: ['protected'], leadingUnderscore: 'require', format: ['camelCase'] },
-
-					{
-						selector: 'property',
-						format: ['PascalCase'],
-						filter: {
-							match: true,
-							regex: '^(Area|Baseline|Bar|Candlestick|Histogram|Line)$',
-						},
-					},
-
-					// { selector: 'typeParameter', format: ['PascalCase'], prefix: ['T', 'U'] },
+					...getNamingConventionRules(),
 				],
 				'@typescript-eslint/no-empty-interface': 'off',
 				'@typescript-eslint/no-empty-function': 'off',

.gitignore

@@ -22,9 +22,11 @@ debug.html
 /src/**/*.js
 /src/**/*.d.ts
 /website/docs/api/
+/website/versioned_docs/**/api/
 /website/build
 /website/.docusaurus
 /website/.cache-loader
+/website/.previous-typings-cache/*.d.ts
 
 !/src/typings/**/*.d.ts
 

package.json

@@ -93,8 +93,8 @@
     "tsc-verify": "tsc -b tsconfig.composite.json",
     "lint": "npm-run-all -p lint:**",
     "lint:js": "eslint --format=unix --ext .js,.md,.javascript ./",
-    "lint:ts": "eslint --format=unix --ext .ts,.typescript ./",
-    "lint:md": "./node_modules/.bin/markdownlint -i \"**/node_modules/**\" -i \"**/website/docs/api/**\" \"**/*.md\"",
+    "lint:ts": "eslint --format=unix --ext .ts,.typescript,.tsx ./",
+    "lint:md": "./node_modules/.bin/markdownlint -i \"**/node_modules/**\" -i \"**/website/docs/api/**\" -i \"**/website/versioned_docs/**/api/**\" \"**/*.md\"",
     "check-dts-docs": "eslint --format=unix ./dist/typings.d.ts",
     "check-markdown-links": "node scripts/check-markdown-links.js",
     "rollup": "rollup -c rollup.config.js",

website/.previous-typings-cache/tsconfig.json

@@ -0,0 +1,6 @@
+{
+	"include": [
+		"./*.d.ts",
+		"../../dist/typings.d.ts"
+	]
+}

website/README.md

@@ -38,6 +38,22 @@ _Note_: API documentation will not be generated unless you have already built th
 
 This will build the website into static files and push the files to the `gh-pages` branch.
 
+## Adding a new version
+
+Run the following command replacing $VERSION with the name of a version you would like to create. $VERSION should match one of the available versions of the package on [unpkg.com](unpkg.com)
+
+See [the Docusaurus versioning docs](https://docusaurus.io/docs/versioning#tagging-a-new-version) for an explanation of the Docusaurus versioning behaviour.
+
+```bash
+npm run docusaurus docs:version $VERSION
+```
+
+For example:
+
+```bash
+npm run docusaurus docs:version 3.7.0
+```
+
 ## CircleCI
 
 We use CircleCI to build, test, publish the library, and to deploy this website.

website/docs/intro.md

@@ -26,7 +26,7 @@ First of all, in a file where you would like to create a chart you need to impor
 import { createChart } from 'lightweight-charts';
 ```
 
-[`createChart`](/api#createchart) is the entry-point for creating charts. You can use it to create as many charts as you need:
+[`createChart`](/api/index.md#createchart) is the entry-point for creating charts. You can use it to create as many charts as you need:
 
 ```js
 import { createChart } from 'lightweight-charts';
@@ -38,13 +38,13 @@ const firstChart = createChart(firstContainer);
 const secondChart = createChart(secondContainer);
 ```
 
-The result of this function is a [`IChartApi`](/api/interfaces/IChartApi) object, which you need to use to work with a chart instance.
+The result of this function is a [`IChartApi`](/api/interfaces/IChartApi.md) object, which you need to use to work with a chart instance.
 
 ## Creating a series
 
 Once your chart is created it is ready to display data.
 
-The basic primitive to display a data is [a series](/api/interfaces/ISeriesApi).
+The basic primitive to display a data is [a series](/api/interfaces/ISeriesApi.md).
 There are different types of series:
 
 - Area
@@ -54,7 +54,7 @@ There are different types of series:
 - Histogram
 - Line
 
-To create a series with desired type you need to use appropriate method from [`IChartApi`](/api/interfaces/IChartApi).
+To create a series with desired type you need to use appropriate method from [`IChartApi`](/api/interfaces/IChartApi.md).
 All of them have the same naming `add<type>Series`, where `<type>` is a type of a series you'd like to create:
 
 ```js
@@ -80,7 +80,7 @@ Note that regardless of the series type, the API calls are the same (the type of
 
 ### Setting the data to a series
 
-To set the data (or to replace all data items) to a series you need to use [`ISeriesApi.setData`](/api/interfaces/ISeriesApi#setdata) method:
+To set the data (or to replace all data items) to a series you need to use [`ISeriesApi.setData`](/api/interfaces/ISeriesApi.md#setdata) method:
 
 ```js
 import { createChart } from 'lightweight-charts';
@@ -124,10 +124,10 @@ It's pretty easy, isn't it? That's it, your chart is ready to be displayed on th
 
 In a case when your data is updated (e.g. real-time updates) you might want to update the chart as well.
 
-But using [`ISeriesApi.setData`](/api/interfaces/ISeriesApi#setdata) very often might affect the performance and we do not recommend to do this.
+But using [`ISeriesApi.setData`](/api/interfaces/ISeriesApi.md#setdata) very often might affect the performance and we do not recommend to do this.
 Also it replaces all series data with the new one, and probably this is not what you're looking for.
 
-Thus, to update the data you can use a method [`ISeriesApi.update`](/api/interfaces/ISeriesApi#update).
+Thus, to update the data you can use a method [`ISeriesApi.update`](/api/interfaces/ISeriesApi.md#update).
 It allows you to update the last data item or add a new one much faster without affecting the performance:
 
 ```js

website/docs/migrations/from-v2-to-v3.md

@@ -10,8 +10,8 @@ In this document you can find the migration guide from the previous version to 3
 Previously, to handle changing visible time range you needed to use `subscribeVisibleTimeRangeChange` and `unsubscribeVisibleTimeRangeChange` to subscribe and unsubscribe from visible range events.
 These methods were available in the chart object  (e.g. you call it like `chart.subscribeVisibleTimeRangeChange(func)`).
 
-In 3.0 in order to make API more consistent with the new API we decided to move these methods to [ITimeScaleApi](/api/interfaces/ITimeScaleApi)
-(along with the new subscription methods [`ITimeScaleApi.subscribeVisibleLogicalRangeChange`](/api/interfaces/ITimeScaleApi#subscribevisiblelogicalrangechange) and [`ITimeScaleApi.unsubscribeVisibleLogicalRangeChange`](/api/interfaces/ITimeScaleApi#unsubscribevisiblelogicalrangechange)).
+In 3.0 in order to make API more consistent with the new API we decided to move these methods to [ITimeScaleApi](/api/interfaces/ITimeScaleApi.md)
+(along with the new subscription methods [`ITimeScaleApi.subscribeVisibleLogicalRangeChange`](/api/interfaces/ITimeScaleApi.md#subscribevisiblelogicalrangechange) and [`ITimeScaleApi.unsubscribeVisibleLogicalRangeChange`](/api/interfaces/ITimeScaleApi.md#unsubscribevisiblelogicalrangechange)).
 
 So, to migrate your code to 3.0 you just need to replace:
 

website/docs/price-scale.md

@@ -13,28 +13,28 @@ By default, chart has 2 predefined price scales: `left` and `right`, and an unli
 
 Only `left` and `right` price scales could be displayed on the chart, all overlay scales are hidden.
 
-If you want to change `left` price scale, you need to use [`leftPriceScale`](/api/interfaces/ChartOptions#leftpricescale) option, to change `right` price scale use [`rightPriceScale`](/api/interfaces/ChartOptions#rightrricescale), to change default options for an overlay price scale use [`overlayPriceScales`](/api/interfaces/ChartOptions#overlaypricescales) option.
+If you want to change `left` price scale, you need to use [`leftPriceScale`](/api/interfaces/ChartOptions.md#leftpricescale) option, to change `right` price scale use [`rightPriceScale`](/api/interfaces/ChartOptions.md#rightrricescale), to change default options for an overlay price scale use [`overlayPriceScales`](/api/interfaces/ChartOptions.md#overlaypricescales) option.
 
-Alternatively, you can use [`IChartApi.priceScale`](/api/interfaces/IChartApi#pricescale) method to get an API object of any price scale or [`ISeriesApi.priceScale`](/api/interfaces/ISeriesApi#pricescale) to get an API object of series' price scale (the price scale that the series is attached to).
+Alternatively, you can use [`IChartApi.priceScale`](/api/interfaces/IChartApi.md#pricescale) method to get an API object of any price scale or [`ISeriesApi.priceScale`](/api/interfaces/ISeriesApi.md#pricescale) to get an API object of series' price scale (the price scale that the series is attached to).
 
 ## Creating a price scale
 
 By default a chart has only 2 price scales: `left` and `right`.
 
-If you want to create an overlay price scale, you can simply assign [`priceScaleId`](/api/interfaces/SeriesOptionsCommon#pricescaleid) option to a series (note that a value should be differ from `left` and `right`) and a chart will automatically create an overlay price scale with provided ID.
+If you want to create an overlay price scale, you can simply assign [`priceScaleId`](/api/interfaces/SeriesOptionsCommon.md#pricescaleid) option to a series (note that a value should be differ from `left` and `right`) and a chart will automatically create an overlay price scale with provided ID.
 If a price scale with such ID already exists then a series will be attached to this existing price scale.
-Further you can use provided price scale ID to get its corresponding API object via [`IChartApi.priceScale`](/api/interfaces/IChartApi#pricescale) method.
+Further you can use provided price scale ID to get its corresponding API object via [`IChartApi.priceScale`](/api/interfaces/IChartApi.md#pricescale) method.
 
 ## Removing a price scale
 
-The default price scales (`left` and `right`) cannot be removed, you can only hide them by setting [`visible`](/api/interfaces/PriceScaleOptions#visible) option to `false`.
+The default price scales (`left` and `right`) cannot be removed, you can only hide them by setting [`visible`](/api/interfaces/PriceScaleOptions.md#visible) option to `false`.
 
 An overlay price scale exists while there is at least 1 series attached to this price scale.
 Thus, to remove an overlay price scale remove all series attached to this price scale.
 
 <!-- Note that this method is not implemented yet :(
 ## Equality of price scale API objects
 
-`lightweight-charts` library does not guarantee to return the same reference of [`IPriceScaleApi`](/api/interfaces/IPriceScaleApi) object for the same price scale ID.
-So you should never compare these objects by a reference, use the result from [`IPriceScaleApi.id`](/api/interfaces/IPriceScaleApi#id) method instead.
+`lightweight-charts` library does not guarantee to return the same reference of [`IPriceScaleApi`](/api/interfaces/IPriceScaleApi.md) object for the same price scale ID.
+So you should never compare these objects by a reference, use the result from [`IPriceScaleApi.id`](/api/interfaces/IPriceScaleApi.md#id) method instead.
 -->

website/docs/series-types.md

@@ -24,7 +24,7 @@ If you'd like to change any option of a series, you could do this in different w
 
     Note that every method to create a series has an optional `options` parameter.
 
-1. You can use [`ISeriesApi.applyOptions`](/api/interfaces/ISeriesApi#applyoptions) method to apply other options on the fly:
+1. You can use [`ISeriesApi.applyOptions`](/api/interfaces/ISeriesApi.md#applyoptions) method to apply other options on the fly:
 
     ```js
     // updating candlestick series options on the fly
@@ -36,19 +36,19 @@ If you'd like to change any option of a series, you could do this in different w
 
 ## Area
 
-- **Method to create**: [`IChartApi.addAreaSeries`](/api/interfaces/IChartApi#addareaseries)
+- **Method to create**: [`IChartApi.addAreaSeries`](/api/interfaces/IChartApi.md#addareaseries)
 - **Data format**: [`LineData`](/api/interfaces/LineData.md) or [`WhitespaceData`](/api/interfaces/WhitespaceData.md)
-- **Style options**: a mix of [`SeriesOptionsCommon`](/api/interfaces/SeriesOptionsCommon) and [`AreaStyleOptions`](/api/interfaces/AreaStyleOptions)
+- **Style options**: a mix of [`SeriesOptionsCommon`](/api/interfaces/SeriesOptionsCommon.md) and [`AreaStyleOptions`](/api/interfaces/AreaStyleOptions.md)
 
 An area chart is basically a colored area between the line connecting all data points and [the time scale](./time-scale.md):
 
 ![Area chart example](/img/area-series.png "Area chart example")
 
 ## Bar
 
-- **Method to create**: [`IChartApi.addBarSeries`](/api/interfaces/IChartApi#addbarseries)
+- **Method to create**: [`IChartApi.addBarSeries`](/api/interfaces/IChartApi.md#addbarseries)
 - **Data format**: [`BarData`](/api/interfaces/BarData.md) or [`WhitespaceData`](/api/interfaces/WhitespaceData.md)
-- **Style options**: a mix of [`SeriesOptionsCommon`](/api/interfaces/SeriesOptionsCommon) and [`BarStyleOptions`](/api/interfaces/BarStyleOptions)
+- **Style options**: a mix of [`SeriesOptionsCommon`](/api/interfaces/SeriesOptionsCommon.md) and [`BarStyleOptions`](/api/interfaces/BarStyleOptions.md)
 
 A bar chart shows price movements in the form of bars.
 
@@ -59,19 +59,19 @@ Open & Close values are represented by tick marks, on the left & right hand side
 
 ## Baseline
 
-- **Method to create**: [`IChartApi.addBaselineSeries`](/api/interfaces/IChartApi#addbaselineseries)
+- **Method to create**: [`IChartApi.addBaselineSeries`](/api/interfaces/IChartApi.md#addbaselineseries)
 - **Data format**: [`LineData`](/api/interfaces/LineData.md) or [`WhitespaceData`](/api/interfaces/WhitespaceData.md)
-- **Style options**: a mix of [`SeriesOptionsCommon`](/api/interfaces/SeriesOptionsCommon) and [`BaselineStyleOptions`](/api/interfaces/BaselineStyleOptions)
+- **Style options**: a mix of [`SeriesOptionsCommon`](/api/interfaces/SeriesOptionsCommon.md) and [`BaselineStyleOptions`](/api/interfaces/BaselineStyleOptions.md)
 
-A baseline is basically two colored areas (top and bottom) between the line connecting all data points and [the base value line](/api/interfaces/BaselineStyleOptions#basevalue):
+A baseline is basically two colored areas (top and bottom) between the line connecting all data points and [the base value line](/api/interfaces/BaselineStyleOptions.md#basevalue):
 
 ![Baseline chart example](/img/baseline-series.png)
 
 ## Candlestick
 
-- **Method to create**: [`IChartApi.addCandlestickSeries`](/api/interfaces/IChartApi#addcandlestickseries)
+- **Method to create**: [`IChartApi.addCandlestickSeries`](/api/interfaces/IChartApi.md#addcandlestickseries)
 - **Data format**: [`BarData`](/api/interfaces/BarData.md) or [`WhitespaceData`](/api/interfaces/WhitespaceData.md)
-- **Style options**: a mix of [`SeriesOptionsCommon`](/api/interfaces/SeriesOptionsCommon) and [`CandlestickStyleOptions`](/api/interfaces/CandlestickStyleOptions)
+- **Style options**: a mix of [`SeriesOptionsCommon`](/api/interfaces/SeriesOptionsCommon.md) and [`CandlestickStyleOptions`](/api/interfaces/CandlestickStyleOptions.md)
 
 A candlestick chart shows price movements in the form of candlesticks.
 On the candlestick chart, open & close values form a solid body of a candle while wicks show high & low values for a candlestick's time interval:
@@ -80,9 +80,9 @@ On the candlestick chart, open & close values form a solid body of a candle whil
 
 ## Histogram
 
-- **Method to create**: [`IChartApi.addHistogramSeries`](/api/interfaces/IChartApi#addhistogramseries)
+- **Method to create**: [`IChartApi.addHistogramSeries`](/api/interfaces/IChartApi.md#addhistogramseries)
 - **Data format**: [`HistogramData`](/api/interfaces/HistogramData.md) or [`WhitespaceData`](/api/interfaces/WhitespaceData.md)
-- **Style options**: a mix of [`SeriesOptionsCommon`](/api/interfaces/SeriesOptionsCommon) and [`HistogramStyleOptions`](/api/interfaces/HistogramStyleOptions)
+- **Style options**: a mix of [`SeriesOptionsCommon`](/api/interfaces/SeriesOptionsCommon.md) and [`HistogramStyleOptions`](/api/interfaces/HistogramStyleOptions.md)
 
 A histogram series is a graphical representation of the value distribution.
 Histogram creates intervals (columns) and counts how many values fall into each column:
@@ -91,9 +91,9 @@ Histogram creates intervals (columns) and counts how many values fall into each
 
 ## Line
 
-- **Method to create**: [`IChartApi.addLineSeries`](/api/interfaces/IChartApi#addlineseries)
+- **Method to create**: [`IChartApi.addLineSeries`](/api/interfaces/IChartApi.md#addlineseries)
 - **Data format**: [`LineData`](/api/interfaces/LineData.md) or [`WhitespaceData`](/api/interfaces/WhitespaceData.md)
-- **Style options**: a mix of [`SeriesOptionsCommon`](/api/interfaces/SeriesOptionsCommon) and [`LineStyleOptions`](/api/interfaces/LineStyleOptions)
+- **Style options**: a mix of [`SeriesOptionsCommon`](/api/interfaces/SeriesOptionsCommon.md) and [`LineStyleOptions`](/api/interfaces/LineStyleOptions.md)
 
 A line chart is a type of chart that displays information as series of the data points connected by straight line segments: