Playground: add version

Author: gcanti

docs/bundle.js

@@ -5,6 +5,7 @@ import { Options, lenses, defaultOptions } from '../src/ast'
 import Editor from 'react-simple-code-editor'
 import { highlight, languages } from 'prismjs'
 import 'prismjs/components/prism-typescript'
+import * as pkg from '../package.json'
 
 const defaultSource = 'data Option A = None | Some A'
 
@@ -13,9 +14,7 @@ interface Props {
   encoding: Options['encoding']
 }
 
-interface State {
-  source: string
-  encoding: Options['encoding']
+interface State extends Props {
   code: string
 }
 
@@ -51,48 +50,53 @@ class App extends React.Component<Props, State> {
       this.setState(getState(e.currentTarget.value, this.state.encoding))
     }
     return (
-      <table>
-        <thead>
-          <tr>
-            <th>Source</th>
-            <th>Output</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td className="source">
-              <textarea rows={10} value={this.state.source} onChange={onCodeChange} />
-              <input type="checkbox" onChange={onEncodingChange} /> fp-ts encoding
-              <br />
-              <br />
-              Examples:
-              <select onChange={onExampleChange}>
-                <option value="data Option A = None | Some A">Option</option>
-                <option value="data Either A B = Left A | Right B">Either</option>
-                <option value="data These A B = Left A | Right B | Both A B">These</option>
-                <option value="data Tree A = Leaf | Node (Tree A) A (Tree A)">Tree</option>
-                <option value="data These A B = Left { left :: A } | Right { right :: B } | Both { left :: A, right :: B }">
-                  These (record syntax)
-                </option>
-              </select>
-            </td>
-            <td className="code">
-              <Editor
-                value={this.state.code}
-                onValueChange={code => onValueChange(code)}
-                highlight={code => {
-                  return highlight(code, languages.js)
-                }}
-                padding={10}
-                style={{
-                  fontFamily: '"Fira code", monospace',
-                  fontSize: 12
-                }}
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div>
+        <h1>
+          {pkg.name} playground (v{pkg.version})
+        </h1>
+        <table>
+          <thead>
+            <tr>
+              <th>Source</th>
+              <th>Output</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="source">
+                <textarea rows={10} value={this.state.source} onChange={onCodeChange} />
+                <input type="checkbox" onChange={onEncodingChange} /> fp-ts encoding
+                <br />
+                <br />
+                Examples:
+                <select onChange={onExampleChange}>
+                  <option value="data Option A = None | Some A">Option</option>
+                  <option value="data Either A B = Left A | Right B">Either</option>
+                  <option value="data These A B = Left A | Right B | Both A B">These</option>
+                  <option value="data Tree A = Leaf | Node (Tree A) A (Tree A)">Tree</option>
+                  <option value="data These A B = Left { left :: A } | Right { right :: B } | Both { left :: A, right :: B }">
+                    These (record syntax)
+                  </option>
+                </select>
+              </td>
+              <td className="code">
+                <Editor
+                  value={this.state.code}
+                  onValueChange={code => onValueChange(code)}
+                  highlight={code => {
+                    return highlight(code, languages.js)
+                  }}
+                  padding={10}
+                  style={{
+                    fontFamily: '"Fira code", monospace',
+                    fontSize: 12
+                  }}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     )
   }
 }

playground/index.tsx

@@ -10,6 +10,7 @@
     "moduleResolution": "node",
     "forceConsistentCasingInFileNames": true,
     "lib": ["es6", "dom"],
-    "jsx": "react"
+    "jsx": "react",
+    "resolveJsonModule": true
   }
 }