diff --git a/.eslintignore b/.eslintignore index 329474c286..2a6a8586fc 100644 --- a/.eslintignore +++ b/.eslintignore @@ -15,3 +15,4 @@ /plugin-examples /packages/create-lwc-plugin +/debug/** diff --git a/.gitignore b/.gitignore index 087071eb66..50721fd837 100644 --- a/.gitignore +++ b/.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 diff --git a/debug/README.md b/debug/README.md index 7315eaa6f9..90ac592a40 100644 --- a/debug/README.md +++ b/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: diff --git a/debug/playground/.eslintrc.cjs b/debug/playground/.eslintrc.cjs new file mode 100644 index 0000000000..19604c9145 --- /dev/null +++ b/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, + }, +}; diff --git a/debug/playground/.gitignore b/debug/playground/.gitignore new file mode 100644 index 0000000000..53805efafa --- /dev/null +++ b/debug/playground/.gitignore @@ -0,0 +1,7 @@ +node_modules/ +dist/ +typings/ +index.html +wwwroot/* +package.json +package-lock.json diff --git a/debug/playground/README.md b/debug/playground/README.md new file mode 100644 index 0000000000..3f28ef0a6b --- /dev/null +++ b/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/` | diff --git a/debug/playground/package.json b/debug/playground/package.json new file mode 100644 index 0000000000..d639071525 --- /dev/null +++ b/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" + } +} diff --git a/debug/playground/playground.sh b/debug/playground/playground.sh new file mode 100644 index 0000000000..bf1bf6b29b --- /dev/null +++ b/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 diff --git a/debug/playground/tsconfig.json b/debug/playground/tsconfig.json new file mode 100644 index 0000000000..77494fc42d --- /dev/null +++ b/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", + ] +} diff --git a/debug/playground/wwwroot/index.html.example b/debug/playground/wwwroot/index.html.example new file mode 100644 index 0000000000..b8bdc7fdaa --- /dev/null +++ b/debug/playground/wwwroot/index.html.example @@ -0,0 +1,15 @@ + + + + + + + lwc-playground + + + +
+ + + + diff --git a/debug/playground/wwwroot/src/main.ts.example b/debug/playground/wwwroot/src/main.ts.example new file mode 100644 index 0000000000..e55aec2b9e --- /dev/null +++ b/debug/playground/wwwroot/src/main.ts.example @@ -0,0 +1,35 @@ +import { createChart, LineSeries } from 'lightweight-charts'; + +// Chart +const chart = createChart(document.querySelector('#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; +}; \ No newline at end of file