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(, 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 (
+
+ );
+ }
+}
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;