debug/playground

.eslintignore

@@ -15,3 +15,4 @@
 
 /plugin-examples
 /packages/create-lwc-plugin
+/debug/**

.gitignore

@@ -4,6 +4,7 @@ npm-debug.log*
 package-lock.json
 
 /debug/**/*
+!/debug/playground
 !/debug/README.md
 !/debug/debug-standalone.html.example
 !/debug/debug-esm.html.example

debug/README.md

@@ -4,6 +4,9 @@ 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.
 
+If you looking for development environment akin to blitzstack or codesandbox, please
+see [PLAYGROUND/README.md](./PLAYGROUND).
+
 ## Contents
 
 This folder contains example files to help you get started:

debug/playground/.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+
+module.exports = {
+	env: {
+		browser: true,
+		node: false,
+	},
+	rules: {
+		'no-console': 0,
+	},
+	globals: {
+		LightweightCharts: false,
+		chart: false,
+	},
+};

debug/playground/.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+dist/
+typings/
+index.html
+wwwroot/*
+package.json
+package-lock.json

debug/playground/README.md

@@ -0,0 +1,28 @@
+# About
+
+The playground is designed for running your snippet continuously against a local build of the `lightweight-charts` package. It's a space for contributors to validate local changes or experiment interactively with charts.
+
+The snippet is served using the `wwwroot` folder. Every modification triggers live reload to reflect your changes instantly at [http://localhost:5173](http://localhost:5173).
+
+## Usage
+
+To start the playground, run:
+
+```bash
+npm run dev
+```
+
+To start the playground from a clean state, run:
+
+```bash
+npm run dev:clean
+```
+
+## Details
+
+| Name | Description |
+| ---- | ----------- |
+| Extra packages | If you need extra dependencies in your playground, feel free to install them. These will not be committed. |
+| Entrypoint location | The entry point for the playground is `wwwroot/index.html`, which loads `wwwroot/src/main.tsx`. |
+| Sources root | The source files for running snippets in the playground are located in the `wwwroot/src/` folder. The `wwwroot/src/main.tsx` script is loaded automatically. |
+| Ignored paths | `package.json` and `wwwroot/` |

debug/playground/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "lwc-playground",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "dependencies": {
+    "eslint": "^9.15.0",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11"
+  },
+  "scripts": {
+    "dev": "/bin/sh ./playground.sh",
+    "dev:clean": "/usr/bin/env CLEAN=1 /bin/sh ./playground.sh"
+  }
+}

debug/playground/playground.sh

@@ -0,0 +1,49 @@
+#!/bin/sh
+
+set -eu
+
+: "${WWW:=wwwroot}"
+: "${CLEAN:=}"
+: "${HOST:=localhost}"
+: "${PORT:=5173}"
+
+npm() {
+	printf "[playground] npm %s\n" "$*" >&2
+	command npm "$@"
+}
+
+cd() {
+	printf "\n[playground] cd %s\n" "$*" >&2
+	builtin cd "$@"
+}
+
+lwc="$(git rev-parse --show-toplevel)"
+playground="$(dirname $(readlink -f $0))"
+
+cd "$lwc"
+if [ ! -e "$(npm prefix -g)/lib/node_modules/lightweight-charts" ]; then
+	npm link >/dev/null 2>&1
+fi
+
+cd "$playground"
+if [ "$CLEAN" = "1" ]; then
+	rm -fr ./node_modules ./package-lock.json
+fi
+
+if [ ! -d node_modules ]; then
+	npm install --no-audit
+	npm link lightweight-charts >/dev/null 2>&1
+fi
+
+cd "$WWW"
+
+if [ ! -e index.html ]; then
+	cp index.html.example index.html
+	cp src/main.ts.example src/main.ts
+fi
+
+npm exec vite -- "." \
+	--clearScreen=false \
+	--logLevel=info \
+	--host $HOST \
+	--port $PORT

debug/playground/tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"lib": ["ESNext", "DOM"],
+		"moduleResolution": "Node",
+		"strict": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"esModuleInterop": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"skipLibCheck": true,
+		"declaration": true,
+		"declarationDir": "typings",
+		"emitDeclarationOnly": true
+	},
+	"include": [
+		"./**/*.ts",
+		"./**/*.tsx",
+		"./**/*.js",
+		"./**/*.jsx",
+	]
+}

debug/playground/wwwroot/index.html.example

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>lwc-playground</title>
+</head>
+
+<body>
+  <div id="container"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

debug/playground/wwwroot/src/main.ts.example

@@ -0,0 +1,35 @@
+import { createChart, LineSeries } from 'lightweight-charts';
+
+// Chart
+const chart = createChart(document.querySelector<HTMLDivElement>('#container')!, {
+  width: 1024,
+  height: 768,
+});
+
+// Series
+const series = chart.addSeries(LineSeries);
+
+// Data
+const data = genData(new Date(2024, 0, 1).getTime(), 100, 2, 10);
+series.setData(data.map(item => ({ ...item })))
+chart.timeScale().fitContent()
+
+// Update 
+setInterval(() => {
+  const last = data.at(-1);
+  const [item] = genData(new Date(last.time).getTime(), last.value, 1.5, 1)
+  series.update({ ...item });
+  data.push(item);
+}, 1500)
+
+function genData(startTs: number, startPrice: number, volatility: number, total: number = 100) {
+  let currentPrice = startPrice;
+  const data: any = [];
+  for (let i = 1; i <= total; i++) {
+    data.push({
+      time: (new Date(startTs + i * 86400000)).toISOString().split('T')[0],
+      value: (currentPrice = Math.max(0, currentPrice + (Math.random() - 0.5) * volatility)),
+    });
+  }
+  return data;
+};