├── vue ├── types │ └── index.d.ts ├── dev-types │ ├── shims-vue.d.ts │ └── shims-tsx.d.ts ├── .eslintrc.js ├── tsconfig.json ├── uplot-vue-example.html ├── yarn.lock ├── package.json ├── uplot-vue3-example.tsx ├── uplot-vue.js └── uplot-vue-example.tsx ├── svelte ├── index.js ├── uplot-svelte-example.html ├── uplot-svelte-example.js ├── .eslintrc.cjs ├── tsconfig.json ├── types │ └── index.d.ts ├── package.json ├── svelte-example.svelte ├── uplot-svelte.svelte └── yarn.lock ├── react ├── .eslintrc.js ├── tsconfig.json ├── uplot-react-example.html ├── types │ └── index.d.ts ├── uplot-react-simple.js ├── package.json ├── uplot-react.tsx ├── uplot-react-example.tsx └── yarn.lock ├── .prettierrc ├── .gitignore ├── .eslintrc.js ├── tsconfig.json ├── common ├── package.json └── index.ts ├── LICENSE ├── package.json ├── webpack.config.js └── README.md /vue/types/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'uplot-vue'; 2 | -------------------------------------------------------------------------------- /svelte/index.js: -------------------------------------------------------------------------------- 1 | import UplotSvelte from './uplot-svelte.svelte'; 2 | export default UplotSvelte; 3 | -------------------------------------------------------------------------------- /vue/dev-types/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue' 3 | export default Vue 4 | } 5 | -------------------------------------------------------------------------------- /svelte/uplot-svelte-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /react/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | settings: { 3 | react: {version: "detect"} 4 | }, 5 | extends: [ 6 | 'plugin:react/recommended' 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /svelte/uplot-svelte-example.js: -------------------------------------------------------------------------------- 1 | import App from './svelte-example.svelte'; 2 | 3 | const app = new App({ 4 | target: document.getElementById('root'), 5 | }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /vue/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'plugin:vue/recommended' 4 | ], 5 | rules: { 6 | 'vue/component-definition-name-casing': 'off' 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "react", 5 | 6 | "esModuleInterop": true 7 | }, 8 | "exclude": ["./vue/**"] 9 | } 10 | -------------------------------------------------------------------------------- /react/uplot-react-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 |

8 | 9 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": true, 4 | "trailingComma": "es5", 5 | "singleQuote": true, 6 | "bracketSpacing": true, 7 | "printWidth": 120, 8 | "tabWidth": 4, 9 | "arrowParens": "always" 10 | } 11 | -------------------------------------------------------------------------------- /vue/dev-types/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, {VNode} from 'vue' 2 | 3 | declare global { 4 | namespace JSX { 5 | interface Element extends VNode {} 6 | interface ElementClass extends Vue {} 7 | interface IntrinsicElements { 8 | [elem: string]: any 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /vue/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "preserve", 5 | "jsxFactory": "VueTsxSupport", 6 | "typeRoots": ["node_modules/@types", "./dev-types", "./types"], 7 | 8 | "esModuleInterop": true, 9 | "noImplicitThis": true 10 | }, 11 | "exclude": ["./react/**"] 12 | } 13 | -------------------------------------------------------------------------------- /svelte/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'plugin:svelte/recommended' 4 | ], 5 | parserOptions: { 6 | extraFileExtensions: ['.svelte'] 7 | }, 8 | overrides: [ 9 | { 10 | files: ['*.svelte'], 11 | parser: 'svelte-eslint-parser', 12 | parserOptions: { 13 | parser: '@typescript-eslint/parser' 14 | } 15 | } 16 | ] 17 | }; 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | !.env.example 9 | 10 | # Build files 11 | build 12 | .svelte-kit 13 | package 14 | 15 | # Vite configs 16 | vite.config.js.timestamp-* 17 | vite.config.ts.timestamp-* 18 | 19 | # Log files 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | pnpm-debug.log* 24 | 25 | # Editor directories and files 26 | .idea 27 | .vscode 28 | *.suo 29 | *.ntvs* 30 | *.njsproj 31 | *.sln 32 | *.sw? 33 | -------------------------------------------------------------------------------- /react/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import uPlot from 'uplot'; 3 | 4 | export default function ({ 5 | options, 6 | data, 7 | target, 8 | onDelete, 9 | onCreate, 10 | resetScales, 11 | className 12 | }: { 13 | options: uPlot.Options; 14 | data: uPlot.AlignedData; 15 | target?: HTMLElement; 16 | onDelete?: (chart: uPlot) => void; 17 | onCreate?: (chart: uPlot) => void; 18 | resetScales?: boolean; 19 | className?: string; 20 | }): JSX.Element | null; 21 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parserOptions: { 3 | sourceType: "module", 4 | ecmaFeatures: { 5 | jsx: true 6 | } 7 | }, 8 | extends: [ 9 | 'plugin:@typescript-eslint/recommended' 10 | ], 11 | parserOptions: { 12 | parser: '@typescript-eslint/parser' 13 | }, 14 | rules: { 15 | '@typescript-eslint/no-empty-function': 'off', 16 | '@typescript-eslint/no-non-null-assertion': 'off', 17 | '@typescript-eslint/ban-ts-comment': 'off' 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /vue/uplot-vue-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 |

8 | 16 |

17 |

18 |

19 | 20 | -------------------------------------------------------------------------------- /vue/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | uplot-wrappers-common@../common/: 6 | version "1.0.0" 7 | 8 | uplot@^1.6.7: 9 | version "1.6.7" 10 | resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.7.tgz#d3faaec899791ee3fdf5d2835b19a33d9117566a" 11 | integrity sha512-6aYZmGywrHTqTgT1GfYHnU77xDUdutR1EJbVX4P9I45CGrtXN77S69/cgW2BXPL1lR4g6V6bh7ujJsFyvHw1hg== 12 | 13 | vue@^2.6.12: 14 | version "2.6.12" 15 | resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123" 16 | integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg== 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "outDir": "./dist/", 5 | "module": "es2015", 6 | "target": "es6", 7 | "esModuleInterop": true, 8 | "sourceMap": true, 9 | "downlevelIteration": true, 10 | "moduleResolution": "node", 11 | "rootDir": ".", 12 | "forceConsistentCasingInFileNames": true, 13 | "noImplicitAny": true, 14 | "noImplicitReturns": true, 15 | "noImplicitThis": true, 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": false, 18 | "strictNullChecks": true, 19 | "suppressImplicitAnyIndexErrors": true, 20 | "skipLibCheck": true, 21 | "paths": { 22 | "uplot-wrappers-common": ["common"] 23 | }, 24 | "lib": ["es2015", "dom"] 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /common/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uplot-wrappers-common", 3 | "version": "1.2.4", 4 | "description": "Common code for React and Vue.js wrappers of uPlot", 5 | "author": "Sergey Kalinichev ", 6 | "license": "MIT", 7 | "homepage": "https://github.com/skalinichev/uplot-wrappers", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/skalinichev/uplot-wrappers.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/skalinichev/uplot-wrappers/issues" 14 | }, 15 | "engines": { 16 | "node": ">=8.10" 17 | }, 18 | "keywords": [ 19 | "Charts", 20 | "uPlot", 21 | "Wrapper" 22 | ], 23 | "private": true, 24 | "dependencies": {}, 25 | "devDependencies": { 26 | "uplot": "^1.6.32" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /svelte/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "outDir": "./dist/", 5 | "module": "es2015", 6 | "target": "es6", 7 | "esModuleInterop": true, 8 | "sourceMap": true, 9 | "downlevelIteration": true, 10 | "moduleResolution": "node", 11 | "rootDir": ".", 12 | "forceConsistentCasingInFileNames": true, 13 | "noImplicitAny": true, 14 | "noImplicitReturns": true, 15 | "noImplicitThis": true, 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": false, 18 | "strictNullChecks": true, 19 | "suppressImplicitAnyIndexErrors": true, 20 | "skipLibCheck": true, 21 | "paths": { 22 | "uplot-wrappers-common": ["common"] 23 | }, 24 | "lib": ["es2015", "dom"] 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /react/uplot-react-simple.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import UplotReact from 'uplot-react'; 3 | import 'uplot/dist/uPlot.min.css'; 4 | 5 | const data = [ 6 | [0, 1, 2, 3, 4, 5], 7 | [0, 1, 2, 3, 4, 5], 8 | ]; 9 | 10 | const options = { 11 | width: 400, 12 | height: 300, 13 | scales: { 14 | x: { 15 | time: false, 16 | range: [-0.5, 5.5], 17 | }, 18 | y: {}, 19 | }, 20 | axes: [{}], 21 | series: [ 22 | {}, 23 | { 24 | stroke: 'blue', 25 | }, 26 | ], 27 | }; 28 | 29 | const Chart = () => {}} onDelete={(chart) => {}} />; 30 | 31 | function MuPlotChartJSExample() { 32 | return ( 33 |

34 | 35 |

36 | ); 37 | } 38 | 39 | export default MuPlotChartJSExample; 40 | -------------------------------------------------------------------------------- /svelte/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { SvelteComponent } from "svelte"; 2 | import type uPlot from 'uplot'; 3 | 4 | declare const __propDef: { 5 | props: { 6 | options: uPlot.Options; 7 | data: uPlot.AlignedData; 8 | target?: HTMLDivElement | null | undefined; 9 | onDelete?: ((chart: uPlot) => void) | undefined; 10 | onCreate?: ((chart: uPlot) => void) | undefined; 11 | resetScales?: boolean | undefined; 12 | class?: string; 13 | }; 14 | events: { 15 | [evt: string]: CustomEvent; 16 | }; 17 | slots: {}; 18 | }; 19 | export type UplotSvelteProps = typeof __propDef.props; 20 | export type UplotSvelteEvents = typeof __propDef.events; 21 | export type UplotSvelteSlots = typeof __propDef.slots; 22 | export default class UplotSvelte extends SvelteComponent { 23 | } 24 | export {}; 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2021-present Sergey Kalinichev 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uplot-vue", 3 | "version": "1.2.4", 4 | "description": "Vue.js wrapper for uPlot that allows you to work with charts declaratively inside your favorite framework", 5 | "author": "Sergey Kalinichev ", 6 | "license": "MIT", 7 | "homepage": "https://github.com/skalinichev/uplot-wrappers#readme", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/skalinichev/uplot-wrappers.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/skalinichev/uplot-wrappers/issues" 14 | }, 15 | "engines": { 16 | "node": ">=8.10" 17 | }, 18 | "keywords": [ 19 | "Charts", 20 | "uPlot", 21 | "Vue", 22 | "Wrapper" 23 | ], 24 | "files": [ 25 | "uplot-vue.*", 26 | "*.ts" 27 | ], 28 | "types": "index.d.ts", 29 | "main": "uplot-vue.js", 30 | "dependencies": {}, 31 | "peerDependencies": { 32 | "uplot": "^1.6.32" 33 | }, 34 | "devDependencies": { 35 | "uplot": "^1.6.32", 36 | "uplot-wrappers-common": "1.2.4", 37 | "vue": "^2.6.12", 38 | "vue3": "npm:vue@^3.0.11" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uplot-react", 3 | "version": "1.2.4", 4 | "description": "React wrapper for uPlot that allows you to work with charts declaratively inside your favorite framework", 5 | "author": "Sergey Kalinichev ", 6 | "license": "MIT", 7 | "homepage": "https://github.com/skalinichev/uplot-wrappers#readme", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/skalinichev/uplot-wrappers.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/skalinichev/uplot-wrappers/issues" 14 | }, 15 | "engines": { 16 | "node": ">=8.10" 17 | }, 18 | "keywords": [ 19 | "Charts", 20 | "uPlot", 21 | "React", 22 | "Wrapper" 23 | ], 24 | "files": [ 25 | "uplot-react.*", 26 | "*.ts" 27 | ], 28 | "main": "uplot-react.js", 29 | "types": "index.d.ts", 30 | "dependencies": {}, 31 | "peerDependencies": { 32 | "react": ">=16.8.6", 33 | "uplot": "^1.6.32" 34 | }, 35 | "devDependencies": { 36 | "@types/react": "^16.8.25", 37 | "@types/react-dom": "^16.8.5", 38 | "react": ">=16.8.6", 39 | "react-dom": ">=16.8.6", 40 | "uplot": "^1.6.32", 41 | "uplot-wrappers-common": "1.2.4" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /svelte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uplot-svelte", 3 | "version": "1.2.4", 4 | "description": "Svelte wrapper for uPlot that allows you to work with charts declaratively inside your favorite framework", 5 | "author": "Kiril Panayotov ", 6 | "contributors": [ 7 | { 8 | "name": "Sergey Kalinichev", 9 | "email": "kalinichev.so.0@gmail.com" 10 | }, 11 | { 12 | "name": "Kiril Panayotov", 13 | "email": "contact@zakrok.dev" 14 | } 15 | ], 16 | "license": "MIT", 17 | "homepage": "https://github.com/skalinichev/uplot-wrappers#readme", 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/skalinichev/uplot-wrappers.git" 21 | }, 22 | "bugs": { 23 | "url": "https://github.com/skalinichev/uplot-wrappers/issues" 24 | }, 25 | "keywords": [ 26 | "Charts", 27 | "uPlot", 28 | "Svelte", 29 | "SvelteKit", 30 | "Wrapper" 31 | ], 32 | "files": [ 33 | "*.svelte", 34 | "*.ts", 35 | "*.js" 36 | ], 37 | "exports": { 38 | ".": { 39 | "types": "./index.d.ts", 40 | "uplot-svelte": "./index.js", 41 | "browser": { 42 | "default": "./index.js" 43 | }, 44 | "default": "./index.js" 45 | } 46 | }, 47 | "main": "index.js", 48 | "module": "index.js", 49 | "types": "./index.d.ts", 50 | "dependencies": {}, 51 | "peerDependencies": { 52 | "svelte": "^4.0.0", 53 | "uplot": "^1.6.32" 54 | }, 55 | "devDependencies": { 56 | "svelte": "^4.2.7", 57 | "svelte-loader": "^3.2.0", 58 | "svelte-preprocess": "^5.1.4", 59 | "uplot": "^1.6.32" 60 | }, 61 | "type": "module" 62 | } 63 | -------------------------------------------------------------------------------- /common/index.ts: -------------------------------------------------------------------------------- 1 | import uPlot from 'uplot'; 2 | 3 | type OptionsUpdateState = 'keep' | 'update' | 'create'; 4 | 5 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is 6 | if (!Object.is) { 7 | // eslint-disable-next-line 8 | Object.defineProperty(Object, "is", {value: (x: any, y: any) => 9 | (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) 10 | }); 11 | } 12 | 13 | export const optionsUpdateState = (_lhs: uPlot.Options, _rhs: uPlot.Options): OptionsUpdateState => { 14 | const {width: lhsWidth, height: lhsHeight, ...lhs} = _lhs; 15 | const {width: rhsWidth, height: rhsHeight, ...rhs} = _rhs; 16 | 17 | let state: OptionsUpdateState = 'keep'; 18 | if (lhsHeight !== rhsHeight || lhsWidth !== rhsWidth) { 19 | state = 'update'; 20 | } 21 | if (Object.keys(lhs).length !== Object.keys(rhs).length) { 22 | return 'create'; 23 | } 24 | for (const k of Object.keys(lhs)) { 25 | if (!Object.is(lhs[k], rhs[k])) { 26 | state = 'create'; 27 | break; 28 | } 29 | } 30 | return state; 31 | } 32 | 33 | export const dataMatch = (lhs: uPlot.AlignedData, rhs: uPlot.AlignedData): boolean => { 34 | if (lhs.length !== rhs.length) { 35 | return false; 36 | } 37 | return lhs.every((lhsOneSeries, seriesIdx) => { 38 | const rhsOneSeries = rhs[seriesIdx]; 39 | if (lhsOneSeries.length !== rhsOneSeries.length) { 40 | return false; 41 | } 42 | return lhsOneSeries.every((value: number, valueIdx: number) => value === rhsOneSeries[valueIdx]); 43 | }); 44 | } 45 | -------------------------------------------------------------------------------- /vue/uplot-vue3-example.tsx: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import {VNode, createApp} from 'vue'; 3 | 4 | import uPlot from 'uplot'; 5 | import 'uplot/dist/uPlot.min.css'; 6 | 7 | import UplotVue from 'uplot-vue'; 8 | 9 | const dummyPlugin = (): uPlot.Plugin => ({ 10 | hooks: { 11 | init(u: uPlot, opts: uPlot.Options) {void u; void opts;} 12 | } 13 | }); 14 | 15 | const app = createApp({ 16 | name: 'UplotVueExample', 17 | components: {uplotvue: UplotVue}, 18 | // @ts-ignore 19 | data() { 20 | return { 21 | options: { 22 | title: 'Chart', width: 400, height: 300, 23 | series: [{ 24 | label: 'Date' 25 | }, { 26 | label: '', 27 | points: {show: false}, 28 | stroke: 'blue', 29 | fill: 'blue' 30 | }], 31 | plugins: [dummyPlugin()], 32 | scales: {x: {time: false}} 33 | }, 34 | target: null as unknown as HTMLElement 35 | }; 36 | }, 37 | beforeMount() { 38 | // Initialize data inside mounted hook, to prevent Vue from adding watchers, otherwise performance becomes unbearable 39 | this.data = [[...new Array(100000)].map((_, i) => i), [...new Array(100000)].map((_, i) => i % 1000)]; 40 | }, 41 | mounted() { 42 | this.target = this.$refs.root as HTMLElement; 43 | setInterval(() => { 44 | const options = { 45 | ...this.options, 46 | title: (this.$refs.root as HTMLElement).id ? 'Rendered with template' : 'Rendered with function' 47 | }; 48 | const data: uPlot.AlignedData = [ 49 | [...this.data[0], this.data[0].length], 50 | [...this.data[1], this.data[0].length % 1000] 51 | ]; 52 | this.data = data; 53 | // Since we disabled reactivity for data above 54 | this.$forceUpdate(); 55 | this.options = options; 56 | }, 100); 57 | }, 58 | render(): VNode { 59 | // @ts-ignore 60 | return (

61 | console.log('Deleted from render function')} 69 | onCreate={(/* chart: uPlot */) => console.log('Created from render function')} 70 | /> 71 |

); 72 | } 73 | }); 74 | 75 | // Render from render function 76 | app.mount('#function-root'); 77 | -------------------------------------------------------------------------------- /svelte/svelte-example.svelte: -------------------------------------------------------------------------------- 1 | 36 | 37 |

38 |

39 | 40 | 47 | 54 |

55 |

56 | 65 | 74 | 75 | 76 |

77 | 78 |

79 |

Log:

80 | 81 | {#if flag} 82 | 83 | {/if} 84 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uplot-wrappers", 3 | "version": "1.2.4", 4 | "description": "React and Vue.js wrappers for uPlot", 5 | "author": "Sergey Kalinichev ", 6 | "license": "MIT", 7 | "homepage": "https://github.com/skalinichev/uplot-wrappers#readme", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/skalinichev/uplot-wrappers.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/skalinichev/uplot-wrappers/issues" 14 | }, 15 | "engines": { 16 | "node": ">=16.0" 17 | }, 18 | "keywords": [ 19 | "Charts", 20 | "uPlot", 21 | "React", 22 | "Vue", 23 | "Wrapper" 24 | ], 25 | "workspaces": { 26 | "packages": [ 27 | "common", 28 | "react", 29 | "vue", 30 | "svelte" 31 | ], 32 | "nohoist": [ 33 | "**/@types/**" 34 | ] 35 | }, 36 | "private": true, 37 | "scripts": { 38 | "build": "concurrently 'npm run buildReact' 'npm run buildVue' 'npm run buildSvelte'", 39 | "buildVue": "webpack --env=framework=vue", 40 | "buildReact": "webpack --env=framework=react", 41 | "buildSvelte": "webpack --env=framework=svelte", 42 | "buildProd": "concurrently 'npm run buildVue -- --env=mode=production' 'npm run buildReact -- --env=mode=production' 'npm run buildSvelte -- --env=mode=production'", 43 | "serveVue": "webpack serve --env=framework=vue --env=example=true", 44 | "serveVue3": "webpack serve --env=framework=vue --env=frameworkVersion=3 --env=example=true", 45 | "serveReact": "webpack serve --env=framework=react --env=example=true", 46 | "serveSvelte": "webpack serve --env=framework=svelte --env=example=true" 47 | }, 48 | "dependencies": {}, 49 | "devDependencies": { 50 | "@babel/core": "^7.13.10", 51 | "@babel/preset-env": "^7.13.10", 52 | "@babel/preset-react": "^7.12.13", 53 | "@typescript-eslint/eslint-plugin": "^4.18.0", 54 | "@typescript-eslint/parser": "^4.18.0", 55 | "@vue/babel-plugin-jsx": "^1.0.6", 56 | "@vue/babel-preset-jsx": "^1.2.4", 57 | "babel-loader": "^8.2.2", 58 | "concurrently": "^6.0.0", 59 | "copy-webpack-plugin": "^11.0.0", 60 | "css-loader": "^6.7.2", 61 | "eslint": "^7.22.0", 62 | "eslint-plugin-react": "^7.22.0", 63 | "eslint-plugin-svelte": "^2.38.0", 64 | "eslint-plugin-vue": "^7.7.0", 65 | "eslint-webpack-plugin": "^3.2.0", 66 | "html-webpack-plugin": "^5.5.0", 67 | "style-loader": "^3.3.1", 68 | "ts-loader": "^9.4.1", 69 | "typescript": "^4.2.3", 70 | "webpack": "^5.75.0", 71 | "webpack-cli": "^5.0.0", 72 | "webpack-dev-server": "^4.11.1" 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /svelte/uplot-svelte.svelte: -------------------------------------------------------------------------------- 1 | 98 | 99 | {#if !target} 100 |

101 | {/if} 102 | -------------------------------------------------------------------------------- /vue/uplot-vue.js: -------------------------------------------------------------------------------- 1 | import Vue, { defineComponent, createVNode } from 'vue'; 2 | 3 | import uPlot from 'uplot'; 4 | 5 | import { optionsUpdateState, dataMatch } from 'uplot-wrappers-common'; 6 | 7 | export default (defineComponent ? defineComponent : (v) => v)({ 8 | name: 'UplotVue', 9 | props: { 10 | options: { type: Object, required: true }, 11 | data: { type: Array, required: true }, 12 | target: { 13 | validator(target) { 14 | return target == null || target instanceof HTMLElement || typeof target === 'function'; 15 | }, 16 | default: undefined, 17 | required: false, 18 | }, 19 | resetScales: { 20 | type: Boolean, 21 | required: false, 22 | default: true, 23 | }, 24 | class: { 25 | type: String, 26 | required: false, 27 | }, 28 | }, 29 | data() { 30 | // eslint-disable-next-line 31 | return { _chart: null }; 32 | }, 33 | watch: { 34 | options(options, prevOptions) { 35 | const optionsState = optionsUpdateState(prevOptions, options); 36 | if (!this._chart || optionsState === 'create') { 37 | this._destroy(); 38 | this._create(); 39 | } else if (optionsState === 'update') { 40 | this._chart.setSize({ width: options.width, height: options.height }); 41 | } 42 | }, 43 | target() { 44 | this._destroy(); 45 | this._create(); 46 | }, 47 | data(data, prevData) { 48 | if (!this._chart) { 49 | this._create(); 50 | } else if (!dataMatch(prevData, data)) { 51 | if (this.$props.resetScales) { 52 | this._chart.setData(data); 53 | } else { 54 | this._chart.setData(data, false); 55 | this._chart.redraw(); 56 | } 57 | } 58 | }, 59 | }, 60 | mounted() { 61 | this._create(); 62 | }, 63 | beforeUnmount() { 64 | this._destroy(); 65 | }, 66 | beforeDestroy() { 67 | this._destroy(); 68 | }, 69 | methods: { 70 | _destroy() { 71 | if (this._chart) { 72 | this.$emit('delete', this._chart); 73 | this._chart.destroy(); 74 | this._chart = null; 75 | } 76 | }, 77 | _create() { 78 | this._chart = new uPlot(this.$props.options, this.$props.data, this.$props.target || this.$refs.targetRef); 79 | this.$emit('create', this._chart); 80 | }, 81 | }, 82 | render(h) { 83 | return this.$props.target 84 | ? null 85 | : (createVNode ? createVNode : h)('div', { 86 | ref: 'targetRef', 87 | class: this.$props.class, 88 | }); 89 | }, 90 | }); 91 | -------------------------------------------------------------------------------- /vue/uplot-vue-example.tsx: -------------------------------------------------------------------------------- 1 | import Vue, {VNode, CreateElement} from 'vue'; 2 | 3 | import uPlot from 'uplot'; 4 | import 'uplot/dist/uPlot.min.css'; 5 | 6 | import UplotVue from 'uplot-vue'; 7 | 8 | const dummyPlugin = (): uPlot.Plugin => ({ 9 | hooks: { 10 | init(u: uPlot, opts: uPlot.Options) {void u; void opts;} 11 | } 12 | }); 13 | 14 | const App = Vue.extend< 15 | {options: uPlot.Options, data: uPlot.AlignedData, target: HTMLElement}, 16 | {onCreateFromTemplate: (chart: uPlot) => void, onDeleteFromTemplate: (chart: uPlot) => void}, 17 | Record, Record 18 | >({ 19 | name: 'UplotVueExample', 20 | components: {uplotvue: UplotVue}, 21 | // @ts-ignore 22 | data() { 23 | return { 24 | options: { 25 | title: 'Chart', width: 400, height: 300, 26 | series: [{ 27 | label: 'Date' 28 | }, { 29 | label: '', 30 | points: {show: false}, 31 | stroke: 'blue', 32 | fill: 'blue' 33 | }], 34 | plugins: [dummyPlugin()], 35 | scales: {x: {time: false}} 36 | }, 37 | target: null as unknown as HTMLElement 38 | }; 39 | }, 40 | beforeMount() { 41 | // Initialize data inside mounted hook, to prevent Vue from adding watchers, otherwise performance becomes unbearable 42 | this.data = [[...new Array(100000)].map((_, i) => i), [...new Array(100000)].map((_, i) => i % 1000)]; 43 | }, 44 | mounted() { 45 | this.target = this.$refs.root as HTMLElement; 46 | setInterval(() => { 47 | const options = { 48 | ...this.options, 49 | title: (this.$refs.root as HTMLElement).id ? 'Rendered with template' : 'Rendered with function' 50 | }; 51 | const data: uPlot.AlignedData = [ 52 | [...this.data[0], this.data[0].length], 53 | [...this.data[1], this.data[0].length % 1000] 54 | ]; 55 | this.data = data; 56 | // Since we disabled reactivity for data above 57 | this.$forceUpdate(); 58 | this.options = options; 59 | }, 100); 60 | }, 61 | methods: { 62 | onCreateFromTemplate(/* chart: uPlot */) { 63 | console.log('Created from template'); 64 | }, 65 | onDeleteFromTemplate(/* chart: uPlot */) { 66 | console.log('Deleted from template'); 67 | } 68 | }, 69 | // eslint-disable-next-line 70 | render(h: CreateElement): VNode { 71 | // @ts-ignore 72 | return (

73 | console.log('Deleted from render function')} 82 | onCreate={(/* chart: uPlot */) => console.log('Created from render function')} 83 | /> 84 |

); 85 | } 86 | }); 87 | 88 | // Render from template 89 | // @ts-ignore 90 | new App({el: '#template-root', render: null}); 91 | // Render from render function 92 | new App({el: '#function-root'}); 93 | -------------------------------------------------------------------------------- /react/uplot-react.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useRef } from 'react'; 2 | 3 | import uPlot from 'uplot'; 4 | 5 | import { optionsUpdateState, dataMatch } from 'uplot-wrappers-common'; 6 | 7 | export default function UplotReact({ 8 | options, 9 | data, 10 | target, 11 | onDelete, 12 | onCreate, 13 | resetScales = true, 14 | className 15 | }: { 16 | options: uPlot.Options; 17 | data: uPlot.AlignedData; 18 | // eslint-disable-next-line 19 | target?: HTMLElement | ((self: uPlot, init: Function) => void); 20 | onDelete?: (chart: uPlot) => void; 21 | onCreate?: (chart: uPlot) => void; 22 | resetScales?: boolean; 23 | className?: string; 24 | }): JSX.Element | null { 25 | const chartRef = useRef(null); 26 | const targetRef = useRef(null); 27 | const propOptionsRef = useRef(options); 28 | const propTargetRef = useRef(target); 29 | const propDataRef = useRef(data); 30 | const onCreateRef = useRef(onCreate); 31 | const onDeleteRef = useRef(onDelete); 32 | 33 | useEffect(() => { 34 | onCreateRef.current = onCreate; 35 | onDeleteRef.current = onDelete; 36 | }); 37 | 38 | const destroy = useCallback((chart: uPlot | null) => { 39 | if (chart) { 40 | onDeleteRef.current?.(chart); 41 | chart.destroy(); 42 | chartRef.current = null; 43 | } 44 | }, []); 45 | const create = useCallback(() => { 46 | const newChart = new uPlot( 47 | propOptionsRef.current, 48 | propDataRef.current, 49 | propTargetRef.current || (targetRef.current as HTMLDivElement) 50 | ); 51 | chartRef.current = newChart; 52 | onCreateRef.current?.(newChart); 53 | }, []); 54 | 55 | useEffect(() => { 56 | create(); 57 | return () => { 58 | destroy(chartRef.current); 59 | }; 60 | }, [create, destroy]); 61 | 62 | useEffect(() => { 63 | if (propOptionsRef.current !== options) { 64 | const optionsState = optionsUpdateState(propOptionsRef.current, options); 65 | propOptionsRef.current = options; 66 | if (!chartRef.current || optionsState === 'create') { 67 | destroy(chartRef.current); 68 | create(); 69 | } else if (optionsState === 'update') { 70 | chartRef.current.setSize({ 71 | width: options.width, 72 | height: options.height, 73 | }); 74 | } 75 | } 76 | }, [options, create, destroy]); 77 | 78 | useEffect(() => { 79 | if (propDataRef.current !== data) { 80 | if (!chartRef.current) { 81 | propDataRef.current = data; 82 | create(); 83 | } else if (!dataMatch(propDataRef.current, data)) { 84 | if (resetScales) { 85 | chartRef.current.setData(data, true); 86 | } else { 87 | chartRef.current.setData(data, false); 88 | chartRef.current.redraw(); 89 | } 90 | } 91 | propDataRef.current = data; 92 | } 93 | }, [data, resetScales, create]); 94 | 95 | useEffect(() => { 96 | if (propTargetRef.current !== target) { 97 | propTargetRef.current = target; 98 | create(); 99 | } 100 | 101 | return () => destroy(chartRef.current); 102 | }, [target, create, destroy]); 103 | 104 | return target ? null :

; 105 | } 106 | -------------------------------------------------------------------------------- /react/uplot-react-example.tsx: -------------------------------------------------------------------------------- 1 | import React, {useMemo, useState} from 'react'; 2 | import ReactDOM, {unstable_batchedUpdates} from 'react-dom'; 3 | 4 | import uPlot from 'uplot'; 5 | import 'uplot/dist/uPlot.min.css'; 6 | 7 | import UPlotReact from './uplot-react'; 8 | 9 | const root: HTMLElement = document.querySelector('#root')!; 10 | 11 | const dummyPlugin = (): uPlot.Plugin => ({ 12 | hooks: { 13 | init(u: uPlot, opts: uPlot.Options) {void u; void opts;} 14 | } 15 | }); 16 | 17 | class ClassApp extends React.Component< 18 | Record, 19 | {options: uPlot.Options, data: uPlot.AlignedData} 20 | > { 21 | constructor(args: Record) { 22 | super(args); 23 | this.state = { 24 | options: { 25 | title: 'Chart', 26 | width: 400, 27 | height: 300, 28 | series: [{ 29 | label: 'Date' 30 | }, { 31 | label: '', 32 | points: {show: false}, 33 | stroke: 'blue', 34 | fill: 'blue' 35 | }], 36 | scales: {x: {time: false}}, 37 | plugins: [dummyPlugin()] 38 | }, 39 | data: [[...new Array(100000)].map((_, i) => i), [...new Array(100000)].map((_, i) => i % 1000)] 40 | }; 41 | setInterval(() => { 42 | const options = { 43 | ...this.state.options, 44 | title: 'Rendered with class' 45 | }; 46 | const data: uPlot.AlignedData = [ 47 | [...this.state.data[0], this.state.data[0].length], 48 | [...this.state.data[1], this.state.data[0].length % 1000] 49 | ]; 50 | this.setState({data, options}); 51 | }, 100); 52 | } 53 | render(): React.ReactNode { 54 | return ( console.log('Deleted from class')} 61 | onCreate={(/* chart: uPlot */) => console.log('Created from class')} 62 | />); 63 | } 64 | } 65 | 66 | const HooksApp = () => { 67 | const [options, setOptions] = useState(useMemo(() => ({ 68 | title: 'Chart', 69 | width: 400, 70 | height: 300, 71 | series: [{ 72 | label: 'Date' 73 | }, { 74 | label: '', 75 | points: {show: false}, 76 | stroke: 'blue', 77 | fill: 'blue' 78 | }], 79 | plugins: [dummyPlugin()], 80 | scales: {x: {time: false}} 81 | }), [])); 82 | const initialState = useMemo(() => 83 | ([[...new Array(100000)].map((_, i) => i), [...new Array(100000)].map((_, i) => i % 1000)]) 84 | , []); 85 | const [data, setData] = useState(initialState); 86 | 87 | setTimeout(() => { 88 | const newOptions = { 89 | ...options, 90 | title: 'Rendered with hooks' 91 | }; 92 | const newData: uPlot.AlignedData = [ 93 | [...data[0], data[0].length], 94 | [...data[1], data[0].length % 1000] 95 | ]; 96 | 97 | unstable_batchedUpdates(() => { 98 | setData(newData); 99 | setOptions(newOptions); 100 | }); 101 | }, 100); 102 | return ( console.log('Deleted from hooks')} 108 | onCreate={(/* chart: uPlot */) => console.log('Created from hooks')} 109 | />); 110 | } 111 | 112 | ReactDOM.render( 113 | 114 | 115 | 116 | , 117 | root 118 | ); 119 | -------------------------------------------------------------------------------- /react/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@types/prop-types@*": 6 | version "15.7.3" 7 | resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" 8 | integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== 9 | 10 | "@types/react-dom@^16.8.5": 11 | version "16.9.12" 12 | resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.12.tgz#55cd6b17e73922edb9545e5355a0016c1734e6f4" 13 | integrity sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA== 14 | dependencies: 15 | "@types/react" "^16" 16 | 17 | "@types/react@^16", "@types/react@^16.8.25": 18 | version "16.14.5" 19 | resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.5.tgz#2c39b5cadefaf4829818f9219e5e093325979f4d" 20 | integrity sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw== 21 | dependencies: 22 | "@types/prop-types" "*" 23 | "@types/scheduler" "*" 24 | csstype "^3.0.2" 25 | 26 | "@types/scheduler@*": 27 | version "0.16.1" 28 | resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275" 29 | integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA== 30 | 31 | csstype@^3.0.2: 32 | version "3.0.7" 33 | resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b" 34 | integrity sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g== 35 | 36 | "js-tokens@^3.0.0 || ^4.0.0": 37 | version "4.0.0" 38 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" 39 | integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== 40 | 41 | loose-envify@^1.1.0, loose-envify@^1.4.0: 42 | version "1.4.0" 43 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" 44 | integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== 45 | dependencies: 46 | js-tokens "^3.0.0 || ^4.0.0" 47 | 48 | object-assign@^4.1.1: 49 | version "4.1.1" 50 | resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" 51 | integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= 52 | 53 | prop-types@^15.6.2: 54 | version "15.7.2" 55 | resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" 56 | integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== 57 | dependencies: 58 | loose-envify "^1.4.0" 59 | object-assign "^4.1.1" 60 | react-is "^16.8.1" 61 | 62 | react-dom@^16.8.6: 63 | version "16.14.0" 64 | resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89" 65 | integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw== 66 | dependencies: 67 | loose-envify "^1.1.0" 68 | object-assign "^4.1.1" 69 | prop-types "^15.6.2" 70 | scheduler "^0.19.1" 71 | 72 | react-is@^16.8.1: 73 | version "16.13.1" 74 | resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" 75 | integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== 76 | 77 | react@^16.8.6: 78 | version "16.14.0" 79 | resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" 80 | integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g== 81 | dependencies: 82 | loose-envify "^1.1.0" 83 | object-assign "^4.1.1" 84 | prop-types "^15.6.2" 85 | 86 | scheduler@^0.19.1: 87 | version "0.19.1" 88 | resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" 89 | integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== 90 | dependencies: 91 | loose-envify "^1.1.0" 92 | object-assign "^4.1.1" 93 | 94 | uplot-wrappers-common@../common/: 95 | version "1.0.0" 96 | 97 | uplot@^1.6.7: 98 | version "1.6.7" 99 | resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.7.tgz#d3faaec899791ee3fdf5d2835b19a33d9117566a" 100 | integrity sha512-6aYZmGywrHTqTgT1GfYHnU77xDUdutR1EJbVX4P9I45CGrtXN77S69/cgW2BXPL1lR4g6V6bh7ujJsFyvHw1hg== 101 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | const CopyPlugin = require('copy-webpack-plugin'); 6 | const ESLintPlugin = require('eslint-webpack-plugin'); 7 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 8 | const sveltePreprocess = require('svelte-preprocess'); 9 | 10 | module.exports = (env) => { 11 | const { framework, example, frameworkVersion = '' } = env; 12 | const vue3 = frameworkVersion == '3'; 13 | const svelte = framework === 'svelte'; 14 | const entry = { 15 | [`uplot-${framework}`]: `./${framework}/uplot-${framework}`, 16 | }; 17 | if (example) { 18 | entry[`uplot-${framework}-example`] = `./${framework}/uplot-${framework}${frameworkVersion}-example`; 19 | } 20 | const targets = example || svelte ? 'last 1 chrome version' : ['ie 11', 'last 1 chrome version']; 21 | const webpackPluginConfig = example 22 | ? [new HtmlWebpackPlugin({ scriptLoading: 'defer', template: `${framework}/uplot-${framework}-example.html` })] 23 | : []; 24 | const svelteFilesToCopy = svelte 25 | ? [ 26 | { from: `${framework}/uplot-svelte.svelte`, force: true }, 27 | { from: `${framework}/index.js`, force: true }, 28 | ] 29 | : []; 30 | 31 | return { 32 | mode: env.mode ? env.mode : 'development', 33 | devtool: 'source-map', 34 | cache: false, 35 | optimization: { 36 | minimize: env.mode === 'production', 37 | }, 38 | entry, 39 | output: { 40 | filename: `[name]${env.mode === 'production' ? '.min' : ''}.js`, 41 | libraryTarget: 'umd', 42 | path: path.join(__dirname, framework, 'dist'), 43 | library: `Uplot${framework[0].toUpperCase()}${framework.slice(1)}`, 44 | libraryExport: 'default', 45 | globalObject: 'this', 46 | }, 47 | module: { 48 | rules: [ 49 | { 50 | test: /\.tsx?$/, 51 | exclude: [/node_modules/, path.join(__dirname, 'vue')], 52 | use: [ 53 | { 54 | loader: 'babel-loader', 55 | options: { presets: ['@babel/preset-react', ['@babel/preset-env', { targets }]] }, 56 | }, 57 | { 58 | loader: 'ts-loader', 59 | options: { configFile: path.join(__dirname, 'react', 'tsconfig.json'), context: __dirname }, 60 | }, 61 | ], 62 | }, 63 | { 64 | test: /\.tsx/, 65 | exclude: [/node_modules/, path.join(__dirname, 'react')], 66 | use: [ 67 | { 68 | loader: 'babel-loader', 69 | options: { 70 | presets: [ 71 | ['@babel/preset-env', { targets }], 72 | ...(!vue3 ? ['@vue/babel-preset-jsx'] : []), 73 | ], 74 | plugins: vue3 ? ['@vue/babel-plugin-jsx'] : [], 75 | }, 76 | }, 77 | { 78 | loader: 'ts-loader', 79 | options: { configFile: path.join(__dirname, 'vue', 'tsconfig.json'), context: __dirname }, 80 | }, 81 | ], 82 | }, 83 | { 84 | test: /\.js$/, 85 | use: [ 86 | { 87 | loader: 'babel-loader', 88 | options: { 89 | presets: [['@babel/preset-env', svelte ? { exclude: ['transform-regenerator'] } : {}]], 90 | plugins: ['@babel/plugin-proposal-class-properties'], 91 | }, 92 | }, 93 | ], 94 | }, 95 | { 96 | test: /\.css$/, 97 | use: ['style-loader', 'css-loader'], 98 | }, 99 | 100 | { 101 | test: /\.svelte$/, 102 | use: { 103 | loader: 'svelte-loader', 104 | options: { 105 | preprocess: sveltePreprocess({ 106 | babel: { 107 | presets: [ 108 | [ 109 | '@babel/preset-env', 110 | { 111 | loose: true, 112 | modules: false, 113 | targets, 114 | }, 115 | ], 116 | ], 117 | }, 118 | }), 119 | }, 120 | }, 121 | }, 122 | ], 123 | }, 124 | plugins: [ 125 | new ESLintPlugin({ extensions: ['ts', 'tsx'] }), 126 | new CopyPlugin({ 127 | patterns: [ 128 | { from: `${framework}/types/index.d.ts`, force: true }, 129 | { from: `${framework}/package.json`, force: true }, 130 | { from: 'README.md', force: true }, 131 | { from: 'LICENSE', force: true }, 132 | ...svelteFilesToCopy, 133 | ], 134 | }), 135 | ...webpackPluginConfig, 136 | ], 137 | resolve: { 138 | extensions: ['.ts', '.tsx', '.js', '.svelte'], 139 | alias: { 140 | vue: vue3 ? 'vue3/dist/vue.esm-bundler.js' : 'vue/dist/vue.js', 141 | svelte: path.resolve('node_modules', 'svelte/src/runtime'), 142 | }, 143 | conditionNames: ['svelte', 'browser', 'import'], 144 | }, 145 | devServer: { 146 | static: { 147 | directory: path.join(__dirname, framework, 'dist'), 148 | }, 149 | compress: true, 150 | historyApiFallback: true, 151 | hot: true, 152 | open: true, 153 | port: 8080, 154 | }, 155 | externals: example 156 | ? {} 157 | : { 158 | react: { 159 | amd: 'react', 160 | commonjs: 'react', 161 | commonjs2: 'react', 162 | root: 'React', 163 | }, 164 | 'react-dom': { 165 | amd: 'react-dom', 166 | commonjs: 'react-dom', 167 | commonjs2: 'react-dom', 168 | root: 'ReactDOM', 169 | }, 170 | uplot: { 171 | amd: 'uplot', 172 | commonjs: 'uplot', 173 | commonjs2: 'uplot', 174 | root: 'uPlot', 175 | }, 176 | vue: { 177 | amd: 'vue', 178 | commonjs: 'vue', 179 | commonjs2: 'vue', 180 | root: 'Vue', 181 | }, 182 | }, 183 | }; 184 | }; 185 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

4 |

🌐 Language

5 |

6 |

30 |

31 |