From 573f5bce7427d0cc79493f11ac1621e0d698a25e Mon Sep 17 00:00:00 2001
From: Henning Dieterichs <henning.dieterichs@live.de>
Date: Sat, 22 Feb 2020 13:42:34 +0100
Subject: [PATCH] Implements playground for quicker prototyping (improves
 webpack speed significantly).

---
 extension/ui/package.json             |  1 +
 extension/ui/src/playground.tsx       | 35 +++++++++++++++
 extension/ui/src/playground/index.tsx | 62 +++++++++++++++++++++++++++
 extension/ui/webpack.config.ts        | 24 +++++++----
 4 files changed, 114 insertions(+), 8 deletions(-)
 create mode 100644 extension/ui/src/playground.tsx
 create mode 100644 extension/ui/src/playground/index.tsx

diff --git a/extension/ui/package.json b/extension/ui/package.json
index c449886..3dfcf2b 100644
--- a/extension/ui/package.json
+++ b/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": {
diff --git a/extension/ui/src/playground.tsx b/extension/ui/src/playground.tsx
new file mode 100644
index 0000000..f6a465e
--- /dev/null
+++ b/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);
+	});
+}
diff --git a/extension/ui/src/playground/index.tsx b/extension/ui/src/playground/index.tsx
new file mode 100644
index 0000000..c6304de
--- /dev/null
+++ b/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>
+		);
+	}
+}
diff --git a/extension/ui/webpack.config.ts b/extension/ui/webpack.config.ts
index 1ae10cf..986e780 100644
--- a/extension/ui/webpack.config.ts
+++ b/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;