Implements playground for quicker prototyping (improves webpack speed significantly).

extension/ui/package.json

@@ -3,6 +3,7 @@
 	"version": "0.0.1",
 	"scripts": {
 		"dev": "webpack-dev-server --hot",
+		"dev-playground": "webpack-dev-server --hot --port 8090 --playground",
 		"build": "webpack"
 	},
 	"dependencies": {

extension/ui/src/playground.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import "./style.scss";
+import * as Components from "./playground/index";
+
+const url = new URL(window.location.href);
+
+const theme = url.searchParams.get("theme");
+if (theme && theme === "dark") {
+	require("./vscode-dark.scss");
+} else {
+	require("./vscode-light.scss");
+}
+
+function render(target: HTMLDivElement) {
+	const c = require("./playground/index") as typeof Components;
+	ReactDOM.render(<c.Playground />, target);
+}
+
+const target = document.createElement("div");
+target.className = "target";
+document.body.appendChild(target);
+
+render(target);
+
+declare var module: {
+	hot?: { accept: (componentName: string, callback: () => void) => void };
+};
+declare var require: (name: string) => any;
+
+if (module.hot) {
+	module.hot.accept("./playground/index", () => {
+		render(target);
+	});
+}

extension/ui/src/playground/index.tsx

@@ -0,0 +1,62 @@
+import React = require("react");
+import "../style.scss";
+import { DecoratedGridComponent } from "../Visualizers/GridVisualizer";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+
+@observer
+export class Playground extends React.Component {
+	@observable
+	private phase = 0;
+
+	componentDidMount() {
+		setInterval(() => {
+			this.phase++;
+		}, 2000);
+	}
+
+	render() {
+		return (
+			<div
+				style={{
+					width: "100%",
+					height: "100%",
+					background: "lightgray",
+					padding: 10,
+				}}
+			>
+				<div
+					style={{
+						background: "white",
+					}}
+				>
+					<DecoratedGridComponent
+						data={{
+							kind: { array: true },
+							rows: [
+								{
+									columns: [
+										[
+											{ tag: "h" },
+											{ tag: "e" },
+											{ tag: "l" },
+											{ tag: "l" },
+											{ tag: "o" },
+										],
+										[
+											{ tag: "e" },
+											{ tag: "h" },
+											{ tag: "l" },
+											{ tag: "l" },
+											{ tag: "o" },
+										],
+									][this.phase % 2],
+								},
+							],
+						}}
+					/>
+				</div>
+			</div>
+		);
+	}
+}

extension/ui/webpack.config.ts

@@ -7,8 +7,12 @@ import { CleanWebpackPlugin } from "clean-webpack-plugin";
 
 const r = (file: string) => path.resolve(__dirname, file);
 
+const mode = process.argv.some(v => v === "--playground")
+	? "playground"
+	: "default";
+
 module.exports = {
-	entry: [r("src/index.tsx")],
+	entry: [mode === "default" ? r("src/index.tsx") : r("src/playground.tsx")],
 	output: {
 		path: r("dist"),
 		filename: "[name].js",
@@ -17,7 +21,6 @@ module.exports = {
 	resolve: {
 		extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
 	},
-
 	devtool: "source-map",
 	module: {
 		rules: [
@@ -37,10 +40,15 @@ module.exports = {
 	node: {
 		fs: "empty",
 	},
-	plugins: [
-		new HtmlWebpackPlugin(),
-		new MonacoWebpackPlugin(),
-		new ForkTsCheckerWebpackPlugin(),
-		new CleanWebpackPlugin(),
-	],
+	plugins: (() => {
+		const plugins: any[] = [
+			new HtmlWebpackPlugin(),
+			new ForkTsCheckerWebpackPlugin(),
+			new CleanWebpackPlugin(),
+		];
+		if (mode === "default") {
+			plugins.push(new MonacoWebpackPlugin());
+		}
+		return plugins;
+	})(),
 } as webpack.Configuration;