From 25815dfa5db5f99376b39d05e40ff283704a1fab Mon Sep 17 00:00:00 2001 From: camargo Date: Fri, 24 Feb 2017 23:46:22 -0800 Subject: [PATCH] example in react, linting, refactor --- .gitignore | 2 +- README.md | 2 +- example/README.md | 1 + example/app.js | 103 ++++++++++++++ example/index.html | 12 ++ example/package.json | 22 +++ example/utils.js | 35 +++++ example/webpack.config.js | 23 ++++ index.html | 123 ----------------- index.ts | 14 ++ lib/MinMax.ts | 13 -- package.json | 21 ++- index.tsx => src/GlPlot2dComponent.tsx | 184 +++++-------------------- {lib => src}/GlPlot2dComponentProps.ts | 0 {lib => src}/GlPlot2dOptions.ts | 0 src/GlPlot2dUtils.ts | 125 +++++++++++++++++ {lib => src}/Line.ts | 0 {lib => src}/Point.ts | 0 src/PointPair.ts | 26 ++++ {lib => src}/Scatter.ts | 0 {lib => src}/Tick.ts | 6 +- src/TickListPair.ts | 26 ++++ {lib => src}/Trace.ts | 8 +- {lib => src}/index.ts | 5 +- tsconfig.json | 10 +- tslint.json | 29 ++++ webpack.config.js | 20 +-- 27 files changed, 485 insertions(+), 325 deletions(-) create mode 100644 example/README.md create mode 100644 example/app.js create mode 100644 example/index.html create mode 100644 example/package.json create mode 100644 example/utils.js create mode 100644 example/webpack.config.js delete mode 100644 index.html create mode 100644 index.ts delete mode 100644 lib/MinMax.ts rename index.tsx => src/GlPlot2dComponent.tsx (68%) rename {lib => src}/GlPlot2dComponentProps.ts (100%) rename {lib => src}/GlPlot2dOptions.ts (100%) create mode 100644 src/GlPlot2dUtils.ts rename {lib => src}/Line.ts (100%) rename {lib => src}/Point.ts (100%) create mode 100644 src/PointPair.ts rename {lib => src}/Scatter.ts (100%) rename {lib => src}/Tick.ts (73%) create mode 100644 src/TickListPair.ts rename {lib => src}/Trace.ts (88%) rename {lib => src}/index.ts (61%) create mode 100644 tslint.json diff --git a/.gitignore b/.gitignore index d4d7e3f..9418d47 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,3 @@ node_modules -dist *.log +index.js diff --git a/README.md b/README.md index f7b4a43..7b8916c 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ This is a Web Component that wraps [gl-plot2d](https://github.com/gl-vis/gl-plot ``` npm install -npm run build:dev +npm run dev ``` ## Average Draw Times diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..f117955 --- /dev/null +++ b/example/README.md @@ -0,0 +1 @@ +# Using gl-plot-2d in React diff --git a/example/app.js b/example/app.js new file mode 100644 index 0000000..28bfb24 --- /dev/null +++ b/example/app.js @@ -0,0 +1,103 @@ +import React, { Component } from 'react'; +import { render } from 'react-dom'; + +import { getTicks } from 'gl-plot-2d'; + +import { makePositions } from './utils'; + +class App extends Component { + + componentWillMount() { + const p1 = makePositions(1000); + const p2 = makePositions(100); + + const trace1 = { + mode: 'line', + positions: p1.positions, + min: { x: p1.minX, y: p1.minY }, + max: { x: p1.maxX, y: p1.maxY }, + line: { + fill: [false, true, false, false], + fillColor: [[0, 0, 1, 0.5], [0, 0, 1, 0.5], [0, 0, 1, 0.5], [0, 0, 1, 0.5]], + width: 1 + } + }; + + const trace2 = { + mode: 'scatter', + positions: p2.positions, + min: { x: p2.minX, y: p2.minY }, + max: { x: p2.maxX, y: p2.maxY }, + scatter: { + size: 10, + color: [0.0, 0.9, 0.0, 1], + borderSize: 1, + borderColor: [0, 0, 0, 1] + } + }; + + this.traces = [trace1, trace2]; + + let tickList = getTicks(this.traces, 'log', 2, false); + this.ticks = [tickList.t1, tickList.t2]; + + this.dataBox = [tickList.t1[0].x - 0.25, tickList.t2[0].x - 0.25, tickList.t1[tickList.t1.length - 1].x + 0.25, tickList.t2[tickList.t2.length - 1].x + 0.25]; + } + + render() { + return ( + + ); + } +} + +render(, document.getElementById('app')); diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..afd6c87 --- /dev/null +++ b/example/index.html @@ -0,0 +1,12 @@ + + + + + + + + +
+ + + diff --git a/example/package.json b/example/package.json new file mode 100644 index 0000000..47e7ce7 --- /dev/null +++ b/example/package.json @@ -0,0 +1,22 @@ +{ + "name": "example", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "build:dev": "webpack-dev-server --watch --progress --color" + }, + "devDependencies": { + "babel-core": "6.23.1", + "babel-loader": "6.3.2", + "babel-plugin-transform-runtime": "6.23.0", + "babel-preset-es2015": "6.22.0", + "babel-preset-react": "6.23.0", + "babel-preset-stage-0": "6.22.0", + "gl-plot-2d": "..", + "react": "15.4.2", + "react-dom": "15.4.2", + "webpack": "2.2.1", + "webpack-dev-server": "2.4.1" + } +} diff --git a/example/utils.js b/example/utils.js new file mode 100644 index 0000000..1b9c392 --- /dev/null +++ b/example/utils.js @@ -0,0 +1,35 @@ + +/** + * Helper that makes dummy positions. + * Also returns two coordinates from positions: (minX, minY) and (maxX, maxY). + * + * @export + * @param {any} count + * @returns + */ +export function makePositions(count) { + let positions = []; + let minX = Number.MAX_SAFE_INTEGER; + let minY = Number.MAX_SAFE_INTEGER; + let maxX = Number.MIN_SAFE_INTEGER; + let maxY = Number.MIN_SAFE_INTEGER; + + for (let i = 0; i < 2 * count; i += 2) { + positions[i] = (i / count) * 20 - 20; + positions[i+1] = Math.sqrt(-2.0 * Math.log(Math.random())) * Math.cos(2.0 * Math.PI * Math.random()); + + if (positions[i] < minX) { minX = positions[i]; } + if (positions[i+1] < minY) { minY = positions[i+1]; } + + if (positions[i] > maxX) { maxX = positions[i]; } + if (positions[i+1] > maxY) { maxY = positions[i+1]; } + } + + return { + positions, + minX, + minY, + maxX, + maxY + } +} diff --git a/example/webpack.config.js b/example/webpack.config.js new file mode 100644 index 0000000..b7ef7ce --- /dev/null +++ b/example/webpack.config.js @@ -0,0 +1,23 @@ + +module.exports = { + entry: { + app: './app.js' + }, + output: { + path: __dirname, + filename: '[name].js', + chunkFilename: '[id].js' + }, + module: { + loaders: [ + { test: /\.(js|jsx)$/, + exclude: /(node_modules|bower_components)/, + loader: 'babel-loader', + query: { + presets: ['es2015', 'stage-0', 'react'], + plugins: ['transform-runtime'] + }, + }, + ], + } +}; diff --git a/index.html b/index.html deleted file mode 100644 index d97a906..0000000 --- a/index.html +++ /dev/null @@ -1,123 +0,0 @@ - - - - - - - - - - - - - diff --git a/index.ts b/index.ts new file mode 100644 index 0000000..0987c6e --- /dev/null +++ b/index.ts @@ -0,0 +1,14 @@ + +import 'skatejs-web-components'; + +import { + GlPlot2dComponent, + findMinMax, + getTicks, + getLinearTicks, + getLogTicks +} from './src'; + +export { findMinMax, getTicks, getLinearTicks, getLogTicks }; + +customElements.define('gl-plot-2d', GlPlot2dComponent); diff --git a/lib/MinMax.ts b/lib/MinMax.ts deleted file mode 100644 index ad2acb2..0000000 --- a/lib/MinMax.ts +++ /dev/null @@ -1,13 +0,0 @@ - -import { Point } from './'; - -/** - * MinMax. - * - * @export - * @interface MinMax - */ -export interface MinMax { - min: Point; - max: Point; -} diff --git a/package.json b/package.json index 44c6cf4..f1e96fa 100644 --- a/package.json +++ b/package.json @@ -1,37 +1,32 @@ { "name": "gl-plot-2d", - "version": "1.0.0", + "version": "0.0.1", "description": "A Web Component for gl-plot2d.", - "main": "index.tsx", + "main": "index.js", "scripts": { - "build:dev": "webpack-dev-server --inline --progress --port 8080", - "build:prod": "webpack" + "build:dev": "webpack" }, "author": "Chris Camargo", - "dependencies": { + "devDependencies": { "canvas-fit": "1.5.0", "d3-scale": "1.0.4", "gl-line2d": "1.4.1", "gl-plot2d": "1.2.0", "gl-scatter2d": "1.2.2", - "gl-scatter2d-fancy": "1.2.1", "gl-select-box": "1.0.1", "gl-spikes2d": "1.0.1", "glslify": "6.0.1", + "ify-loader": "1.0.3", "lodash": "4.17.4", "mouse-change": "1.4.0", "mouse-wheel": "1.2.0", "skatejs": "4.6.7", "skatejs-web-components": "5.2.1", - "tslib": "1.6.0" - }, - "devDependencies": { - "html-webpack-plugin": "2.28.0", - "ify-loader": "1.0.3", "ts-loader": "2.0.1", + "tslib": "1.6.0", + "tslint": "^4.4.2", "typescript": "2.2.1", - "webpack": "2.2.1", - "webpack-dev-server": "2.4.1" + "webpack": "2.2.1" }, "browserify": { "transform": [ diff --git a/index.tsx b/src/GlPlot2dComponent.tsx similarity index 68% rename from index.tsx rename to src/GlPlot2dComponent.tsx index 3e9d61b..0d86e03 100644 --- a/index.tsx +++ b/src/GlPlot2dComponent.tsx @@ -1,35 +1,29 @@ -import 'skatejs-web-components'; import * as skate from 'skatejs'; -import { debounce, first, last, round } from 'lodash'; -import * as d3Scale from 'd3-scale'; import * as fit from 'canvas-fit'; -import * as createScatter from 'gl-scatter2d'; -import * as createScatterFancy from 'gl-scatter2d-fancy'; import * as createLine from 'gl-line2d'; import * as createPlot from 'gl-plot2d'; +import * as createScatter from 'gl-scatter2d'; +import { debounce } from 'lodash'; import { GlPlot2dComponentProps, GlPlot2dOptions, Line, - MinMax, - Point, Scatter, Tick, - Trace } from './lib'; + Trace } from './'; /** * GlPlot2dComponent class. * - * @export * @class GlPlot2dComponent * @extends {skate.Component} */ -export default class GlPlot2dComponent extends skate.Component { - private gl: WebGLRenderingContext | null; // WebGL Context. - private canvas: HTMLCanvasElement | null; // Canvas element we render to. - private plot: any; // Plot object via gl-plot2d. - private options: GlPlot2dOptions; // Plot options for gl-plot2d. +export class GlPlot2dComponent extends skate.Component { + private gl: WebGLRenderingContext | null; // WebGL Context. + private canvas: HTMLCanvasElement | null; // Canvas element we render to. + private plot: any; // Plot object via gl-plot2d. + private options: GlPlot2dOptions; // Plot options for gl-plot2d. /** * Custom properties that should be defined on the element. These are set up in the constructor. @@ -44,9 +38,9 @@ export default class GlPlot2dComponent extends skate.Component({ attribute: true, - coerce (traces) { + coerce(traces) { // Turn (or "coerce") each trace into a Trace object. - return traces.map(trace => { + return traces.map((trace: Trace) => { return new Trace(trace.mode, trace.positions, trace.min, @@ -56,15 +50,16 @@ export default class GlPlot2dComponent extends skate.Component({ attribute: true }), dataBox: skate.prop.array({ attribute: true }), - viewBox:skate.prop.array({ attribute: true }), + viewBox: skate.prop.array({ attribute: true }), // Title. titleEnable: skate.prop.boolean({ attribute: true }), @@ -94,7 +89,7 @@ export default class GlPlot2dComponent extends skate.Component({ attribute: true }), // Ticks. - ticks: skate.prop.array(), + ticks: skate.prop.array({ attribute: true }), tickEnable: skate.prop.array({ attribute: true }), tickPad: skate.prop.array({ attribute: true }), tickAngle: skate.prop.array({ attribute: true }), @@ -129,19 +124,18 @@ export default class GlPlot2dComponent extends skate.Component {this.getStyles()} @@ -157,7 +151,7 @@ export default class GlPlot2dComponent extends skate.Component { + const debounceResize = debounce(() => { resize(); this.plot.update(this.options); this.plot.draw(); @@ -239,7 +233,7 @@ export default class GlPlot2dComponent extends skate.Component 0 ? this['screenBox'] : null, - dataBox: this['dataBox'].length > 0 ? this['dataBox'] : dataBox, + dataBox: this['dataBox'].length > 0 ? this['dataBox'] : null, viewBox: this['viewBox'].length > 0 ? this['viewBox'] : null, titleEnable: this['titleEnable'], @@ -291,7 +282,7 @@ export default class GlPlot2dComponent extends skate.Component 0 ? this['ticks'] : [ ticks.x, ticks.y ], + ticks: this['ticks'], tickEnable: this['tickEnable'], tickPad: this['tickPad'], tickAngle: this['tickAngle'], @@ -307,7 +298,7 @@ export default class GlPlot2dComponent extends skate.Component new Tick(round(tick, 2))); - } - - /** - * Helper function to make count log tick marks on domain lo to hi. - * Uses d3-scale to do so. - * Coerces tick number[] to Tick[]. - * - * @param {number} lo - * @param {number} hi - * @returns {Tick[]} - * - * @memberOf GlPlot2dComponent - */ - getLogTicks(lo: number, hi: number): Tick[] { - const scale = d3Scale.scaleLog() - .domain([Math.max(1, Math.floor(lo)), Math.ceil(hi)]); - - const ticks = scale.ticks(); - - return ticks.map(tick => new Tick(round(tick, 2))); - } - - /** - * Helper function that finds global min and max points from a list of traces. - * - * @param {Trace[]} traces - * @returns {MinMax} - * - * @memberOf GlPlot2dComponent - */ - findMinMax(traces: Trace[]): MinMax { - let min: Point = new Point(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER); - let max: Point = new Point(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER); - - if (!traces.length) { - return { min, max } - } - else if (traces.length === 1) { - return { min: traces[0].min, max: traces[0].max } - } - else { - traces.forEach((trace: Trace) => { - if (trace.min.x < min.x) { min.x = trace.min.x; } - if (trace.min.y < min.y) { min.y = trace.min.y; } - - if (trace.max.x > max.x) { max.x = trace.max.x; } - if (trace.max.y > max.y) { max.y = trace.max.y; } - }); - } - - return { - min, - max - } - } } - -customElements.define('gl-plot-2d', GlPlot2dComponent); diff --git a/lib/GlPlot2dComponentProps.ts b/src/GlPlot2dComponentProps.ts similarity index 100% rename from lib/GlPlot2dComponentProps.ts rename to src/GlPlot2dComponentProps.ts diff --git a/lib/GlPlot2dOptions.ts b/src/GlPlot2dOptions.ts similarity index 100% rename from lib/GlPlot2dOptions.ts rename to src/GlPlot2dOptions.ts diff --git a/src/GlPlot2dUtils.ts b/src/GlPlot2dUtils.ts new file mode 100644 index 0000000..6a64b44 --- /dev/null +++ b/src/GlPlot2dUtils.ts @@ -0,0 +1,125 @@ + +import * as d3Scale from 'd3-scale'; +import { round } from 'lodash'; + +import { Point, PointPair, Tick, TickListPair, Trace } from './'; + +/** + * Helper function that finds global min and max points from a list of traces. + * + * @export + * @param {Trace[]} traces + * @returns {PointPair} + */ +export function findMinMax(traces: Trace[]): PointPair { + let p1: Point = new Point(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER); + let p2: Point = new Point(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER); + + if (traces.length > 1) { + traces.forEach((trace: Trace) => { + if (trace.min.x < p1.x) { p1.x = trace.min.x; } + if (trace.min.y < p1.y) { p1.y = trace.min.y; } + + if (trace.max.x > p2.x) { p2.x = trace.max.x; } + if (trace.max.y > p2.y) { p2.y = trace.max.y; } + }); + } + else if (traces.length === 1) { + p1 = traces[0].min; + p2 = traces[0].max; + } + + return new PointPair(p1, p2); +} + +/** + * Gets ticks by type. + * Supported types are linear and log. + * + * @export + * @param {Trace[]} traces + * @param {string} type + * @param {number} precision + * @param {boolean} nice + * @returns {TickListPair} + */ +export function getTicks(traces: Trace[], + type: string, + precision: number, + nice: boolean): TickListPair { + const minMax = findMinMax(traces); + + let xTicks: Tick[] = []; + let yTicks: Tick[] = []; + + if (type === 'linear') { + xTicks = getLinearTicks(minMax.p1.x, minMax.p2.x, precision, nice); + yTicks = getLinearTicks(minMax.p1.y, minMax.p2.y, precision, nice); + } + else if (type === 'log') { + xTicks = getLogTicks(minMax.p1.x, minMax.p2.x, precision, nice); + yTicks = getLogTicks(minMax.p1.y, minMax.p2.y, precision, nice); + } + + return new TickListPair(xTicks, yTicks); +} + +/** + * Helper function to make count linear tick marks on domain lo to hi. + * Uses d3-scale to do so. + * Coerces tick number[] to Tick[]. + * + * @export + * @param {number} lo + * @param {number} hi + * @param {number} precision + * @param {boolean} nice + * @returns {Tick[]} + * + * @memberOf GlPlot2dComponent + */ +export function getLinearTicks(lo: number, + hi: number, + precision: number, + nice: boolean): Tick[] { + let scale = d3Scale.scaleLinear() + .domain([Math.floor(lo), Math.ceil(hi)]); + + if (nice) { + scale = scale.nice(); + } + + const ticks = scale.ticks(); + + return ticks.map((tick: number) => new Tick(round(tick, precision))); +} + +/** + * Helper function to make count log tick marks on domain lo to hi. + * Uses d3-scale to do so. + * Coerces tick number[] to Tick[]. + * + * @export + * @param {number} lo + * @param {number} hi + * @param {number} precision + * @param {boolean} nice + * @returns {Tick[]} + * + * @memberOf GlPlot2dComponent + */ +export function getLogTicks(lo: number, + hi: number, + precision: number, + nice: boolean): Tick[] { + let scale = d3Scale.scaleLog() + .domain([Math.max(1, Math.floor(lo)), Math.ceil(hi)]); + + if (nice) { + scale = scale.nice(); + } + + const ticks = scale.ticks(); + + return ticks.map((tick: number) => new Tick(round(tick, precision))); +} diff --git a/lib/Line.ts b/src/Line.ts similarity index 100% rename from lib/Line.ts rename to src/Line.ts diff --git a/lib/Point.ts b/src/Point.ts similarity index 100% rename from lib/Point.ts rename to src/Point.ts diff --git a/src/PointPair.ts b/src/PointPair.ts new file mode 100644 index 0000000..7fc4b8c --- /dev/null +++ b/src/PointPair.ts @@ -0,0 +1,26 @@ + +import { Point } from './'; + +/** + * PointPair. + * + * @export + * @class PointPair + */ +export class PointPair { + public p1: Point; + public p2: Point; + + /** + * Creates an instance of PointPair. + * + * @param {Point} p1 + * @param {Point} p2 + * + * @memberOf PointPair + */ + constructor(p1: Point, p2: Point) { + this.p1 = p1; + this.p2 = p2; + } +} diff --git a/lib/Scatter.ts b/src/Scatter.ts similarity index 100% rename from lib/Scatter.ts rename to src/Scatter.ts diff --git a/lib/Tick.ts b/src/Tick.ts similarity index 73% rename from lib/Tick.ts rename to src/Tick.ts index 6d586dc..c7258a0 100644 --- a/lib/Tick.ts +++ b/src/Tick.ts @@ -2,12 +2,14 @@ /** * Tick. * + * This class represents a tick that gl-plot2d uses. + * * @export * @class Tick */ export class Tick { - x: number; - text: string; + public x: number; + public text: string; /** * Creates an instance of Tick. diff --git a/src/TickListPair.ts b/src/TickListPair.ts new file mode 100644 index 0000000..fa63054 --- /dev/null +++ b/src/TickListPair.ts @@ -0,0 +1,26 @@ + +import { Tick } from './'; + +/** + * TickListPair. + * + * @export + * @class TickListPair + */ +export class TickListPair { + public t1: Tick[]; + public t2: Tick[]; + + /** + * Creates an instance of TickListPair. + * + * @param {Tick[]} t1 + * @param {Tick[]} t2 + * + * @memberOf TickListPair + */ + constructor(t1: Tick[], t2: Tick[]) { + this.t1 = t1; + this.t2 = t2; + } +} diff --git a/lib/Trace.ts b/src/Trace.ts similarity index 88% rename from lib/Trace.ts rename to src/Trace.ts index f5756e7..aeae575 100644 --- a/lib/Trace.ts +++ b/src/Trace.ts @@ -24,8 +24,8 @@ export class Trace { * @param {number[]} positions * @param {Point} min * @param {Point} max - * @param {Line} line - * @param {Scatter} scatter + * @param {(Line | null)} line + * @param {(Scatter | null)} scatter * * @memberOf Trace */ @@ -33,8 +33,8 @@ export class Trace { positions: number[], min: Point, max: Point, - line: Line, - scatter: Scatter) { + line: Line | null, + scatter: Scatter | null) { this.mode = mode; this.positions = positions; this.min = new Point(min.x, min.y); diff --git a/lib/index.ts b/src/index.ts similarity index 61% rename from lib/index.ts rename to src/index.ts index 0266d2c..54c9df7 100644 --- a/lib/index.ts +++ b/src/index.ts @@ -1,8 +1,11 @@ +export { GlPlot2dComponent } from './GlPlot2dComponent'; export { GlPlot2dOptions } from './GlPlot2dOptions'; export { GlPlot2dComponentProps } from './GlPlot2dComponentProps'; +export * from './GlPlot2dUtils'; export { Line } from './Line'; -export { MinMax } from './MinMax'; export { Point } from './Point'; +export { PointPair } from './PointPair'; export { Scatter } from './Scatter'; export { Tick } from './Tick'; +export { TickListPair } from './TickListPair'; export { Trace } from './Trace'; diff --git a/tsconfig.json b/tsconfig.json index ab9a090..7a83486 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,15 +14,23 @@ ], "jsx": "react", "jsxFactory": "skate.h", + "alwaysStrict": true, + "noEmitOnError": true, + "noFallthroughCasesInSwitch": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noUnusedLocals": true, + "noUnusedParameters": true, "noImplicitAny": false, "strictNullChecks": true, "sourceMap": true, "forceConsistentCasingInFileNames": true, "importHelpers": true, + "removeComments": true, "newLine": "LF" }, "include": [ - "index.tsx" + "index.ts" ], "exclude": [ "node_modules" diff --git a/tslint.json b/tslint.json new file mode 100644 index 0000000..8ea8f64 --- /dev/null +++ b/tslint.json @@ -0,0 +1,29 @@ +{ + "extends": "tslint:latest", + "rules": { + /* + * Any rules specified here will override those from the base config we are extending. + */ + "curly": true, + "interface-name": [true, "never-prefix"], + "no-console": [true, "log"], + "no-string-literal": false, + "object-literal-sort-keys": false, + "one-line": [false, "check-catch", "check-finally", "check-else"], + "ordered-imports": false, + "quotemark": [true, "single", "avoid-escape"], + "trailing-comma": [false, {"multiline": "always", "singleline": "never"}] + }, + "jsRules": { + /* + * Any rules specified here will override those from the base config we are extending. + */ + "curly": true + }, + "rulesDirectory": [ + /* + * A list of relative or absolute paths to directories that contain custom rules. + * See the Custom Rules documentation below for more details. + */ + ] +} diff --git a/webpack.config.js b/webpack.config.js index 41b814c..fe1dcdb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,6 @@ -const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { - entry: __dirname + '/index.tsx', + entry: __dirname + '/index.ts', resolve: { extensions: [ '.ts', '.tsx', '.js', '.glsl' ] @@ -14,20 +13,11 @@ module.exports = { ] }, - plugins: [ - new HtmlWebpackPlugin({ - template: './index.html' - }) - ], - output: { - path: __dirname + '/dist', - filename: 'gl-plot-2d.js' - }, - - devServer: { - historyApiFallback: true, - stats: 'minimal' + path: '.', + filename: 'index.js', + library: 'glPlot2d', + libraryTarget: 'umd' }, performance: {