feat: jsx-explorer (#11)

packages/jsx-explorer/src/index.css

@@ -0,0 +1,92 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+#header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  box-sizing: border-box;
+  background-color: #1e1e1e;
+  border-bottom: 1px solid #333;
+  padding: 0.3em 1.6em;
+  color: #fff;
+  z-index: 1;
+}
+
+h1 {
+  font-size: 18px;
+  display: inline-block;
+  margin-right: 15px;
+}
+
+#options-wrapper {
+  position: absolute;
+  top: 20px;
+  right: 10px;
+}
+
+#options-wrapper:hover #options {
+  display: block;
+}
+
+#options-label {
+  cursor: pointer;
+  text-align: right;
+  padding-right: 10px;
+  font-weight: bold;
+}
+
+#options {
+  display: none;
+  margin-top: 15px;
+  list-style-type: none;
+  background-color: #1e1e1e;
+  border: 1px solid #333;
+  padding: 15px 30px;
+}
+
+#options li {
+  margin: 8px 0;
+}
+
+#header a {
+  font-weight: 600;
+  color: rgb(101, 163, 221);
+}
+
+#header .label {
+  font-weight: bold;
+}
+
+#header input {
+  margin-right: 6px;
+}
+
+#header label {
+  color: #999;
+}
+
+.editor {
+  position: absolute;
+  top: 60px;
+  bottom: 0;
+  box-sizing: border-box;
+}
+
+#source {
+  left: 0;
+  width: 45%;
+}
+
+#output {
+  left: 45%;
+  width: 55%;
+}
+
+.highlight {
+  background-color: rgba(46, 120, 190, 0.5);
+}

packages/jsx-explorer/src/index.js

@@ -0,0 +1,88 @@
+import * as monaco from 'monaco-editor';
+import { transform } from '@babel/core';
+import babelPluginJSx from '../../babel-plugin-jsx/src';
+import './index.css';
+// or import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+// if shipping only a subset of the features & languages is desired
+
+if (module.hot) {
+  module.hot.accept('../../babel-plugin-jsx/src', () => {
+    compile();
+  });
+}
+
+const sharedEditorOptions = {
+  theme: 'vs-dark',
+  fontSize: 14,
+  wordWrap: 'on',
+  scrollBeyondLastLine: false,
+  renderWhitespace: 'selection',
+  contextmenu: false,
+  minimap: {
+    enabled: false,
+  },
+};
+
+monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+  allowJs: true,
+  allowNonTsExtensions: true,
+  lib: [],
+  jsx: monaco.languages.typescript.JsxEmit.React,
+  target: monaco.languages.typescript.ScriptTarget.Latest,
+  typeRoots: ['node_modules/@types'],
+});
+
+const editor = monaco.editor.create(document.getElementById('source'), {
+  value: localStorage.getItem('state') || 'const App = () => <div>Hello World</div>',
+  language: 'javascript',
+  tabSize: 2,
+  ...sharedEditorOptions,
+});
+
+const output = monaco.editor.create(document.getElementById('output'), {
+  value: '',
+  language: 'javascript',
+  readOnly: true,
+  tabSize: 2,
+  ...sharedEditorOptions,
+});
+
+const compile = () => {
+  const src = editor.getValue();
+  localStorage.setItem('state', src);
+  transform(src, {
+    babelrc: false,
+    plugins: [babelPluginJSx],
+  }, (err, result) => {
+    if (!err) {
+      output.setValue(result.code);
+    } else {
+      output.setValue(err.message);
+    }
+  });
+};
+
+// handle resize
+window.addEventListener('resize', () => {
+  editor.layout();
+  output.layout();
+});
+
+compile();
+
+// update compile output when input changes
+editor.onDidChangeModelContent(debounce(compile));
+
+
+function debounce(fn, delay = 300) {
+  let prevTimer = null;
+  return ((...args) => {
+    if (prevTimer) {
+      clearTimeout(prevTimer);
+    }
+    prevTimer = window.setTimeout(() => {
+      fn(...args);
+      prevTimer = null;
+    }, delay);
+  });
+}