use a react file as an example

Author: evanw

code.js

@@ -1622,73 +1622,56 @@
   addEventListener('popstate', () => loadFromHash());
 })();
 
-const exampleJS = `// Generated by CoffeeScript 2.5.1
-(function() {
-  // Assignment:
-  var cubes, list, math, num, number, opposite, race, square;
-
-  number = 42;
-
-  opposite = true;
-
-  if (opposite) {
-    // Conditions:
-    number = -42;
+const exampleJS = `// index.tsx
+import { h as r, Fragment as s, render as c } from "preact";
+
+// counter.tsx
+import { h as t, Component as a } from "preact";
+import { useState as l } from "preact/hooks";
+var o = class extends a {
+  constructor(e) {
+    super(e);
+    this.state = { value: 0 };
+    this.increment = () => this.setState({ value: this.state.value + 1 });
+    this.decrement = () => this.setState({ value: this.state.value - 1 });
+    this.state.value = e.initialValue;
   }
-
-  // Functions:
-  square = function(x) {
-    return x * x;
-  };
-
-  // Arrays:
-  list = [1, 2, 3, 4, 5];
-
-  // Objects:
-  math = {
-    root: Math.sqrt,
-    square: square,
-    cube: function(x) {
-      return x * square(x);
-    }
-  };
-
-  // Splats:
-  race = function(winner, ...runners) {
-    return print(winner, runners);
-  };
-
-  if (typeof elvis !== \"undefined\" && elvis !== null) {
-    // Existence:
-    alert(\"I knew it!\");
+  render() {
+    return t("div", {
+      class: "counter"
+    }, t("h1", null, this.props.label), t("p", null, t("button", {
+      onClick: this.decrement
+    }, "-"), " ", this.state.value, " ", t("button", {
+      onClick: this.increment
+    }, "+")));
   }
-
-  // Array comprehensions:
-  cubes = (function() {
-    var i, len, results;
-    results = [];
-    for (i = 0, len = list.length; i < len; i++) {
-      num = list[i];
-      results.push(math.cube(num));
-    }
-    return results;
-  })();
-
-}).call(this);
-
-//# sourceMappingURL=original.js.map
+}, i = (n) => {
+  let [e, u] = l(n.initialValue);
+  return t("div", {
+    class: "counter"
+  }, t("h1", null, n.label), t("p", null, t("button", {
+    onClick: () => u(e - 1)
+  }, "-"), " ", e, " ", t("button", {
+    onClick: () => u(e + 1)
+  }, "+")));
+};
+
+// index.tsx
+c(r(s, null, r(o, {
+  label: "Counter 1",
+  initialValue: 100
+}), r(i, {
+  label: "Counter 2",
+  initialValue: 200
+})), document.getElementById("root"));
+//# sourceMappingURL=example.js.map
 `;
 
 const exampleMap = `{
   "version": 3,
-  "file": "original.js",
-  "sourceRoot": "",
-  "sources": [
-    "original.coffee"
-  ],
-  "names": [],
-  "mappings": ";AAAa;EAAA;AAAA,MAAA,KAAA,EAAA,IAAA,EAAA,IAAA,EAAA,GAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA;;EACb,MAAA,GAAW;;EACX,QAAA,GAAW;;EAGX,IAAgB,QAAhB;;IAAA,MAAA,GAAS,CAAC,GAAV;GALa;;;EAQb,MAAA,GAAS,QAAA,CAAC,CAAD,CAAA;WAAO,CAAA,GAAI;EAAX,EARI;;;EAWb,IAAA,GAAO,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV,EAAa,CAAb,EAXM;;;EAcb,IAAA,GACE;IAAA,IAAA,EAAQ,IAAI,CAAC,IAAb;IACA,MAAA,EAAQ,MADR;IAEA,IAAA,EAAQ,QAAA,CAAC,CAAD,CAAA;aAAO,CAAA,GAAI,MAAA,CAAO,CAAP;IAAX;EAFR,EAfW;;;EAoBb,IAAA,GAAO,QAAA,CAAC,MAAD,EAAA,GAAS,OAAT,CAAA;WACL,KAAA,CAAM,MAAN,EAAc,OAAd;EADK;;EAIP,IAAsB,8CAAtB;;IAAA,KAAA,CAAM,YAAN,EAAA;GAxBa;;;EA2Bb,KAAA;;AAAS;IAAA,KAAA,sCAAA;;mBAAA,IAAI,CAAC,IAAL,CAAU,GAAV;IAAA,CAAA;;;AA3BI",
-  "sourcesContent": [
-    "# Assignment:\\nnumber   = 42\\nopposite = true\\n\\n# Conditions:\\nnumber = -42 if opposite\\n\\n# Functions:\\nsquare = (x) -> x * x\\n\\n# Arrays:\\nlist = [1, 2, 3, 4, 5]\\n\\n# Objects:\\nmath =\\n  root:   Math.sqrt\\n  square: square\\n  cube:   (x) -> x * square x\\n\\n# Splats:\\nrace = (winner, runners...) ->\\n  print winner, runners\\n\\n# Existence:\\nalert \\"I knew it!\\" if elvis?\\n\\n# Array comprehensions:\\ncubes = (math.cube num for num in list)\\n"
-  ]
-}`;
+  "sources": ["index.tsx", "counter.tsx"],
+  "sourcesContent": ["import { h, Fragment, render } from 'preact'\\nimport { CounterClass, CounterFunction } from './counter'\\n\\nrender(\\n  <>\\n    <CounterClass label=\\"Counter 1\\" initialValue={100} />\\n    <CounterFunction label=\\"Counter 2\\" initialValue={200} />\\n  </>,\\n  document.getElementById('root')!,\\n)\\n", "import { h, Component } from 'preact'\\nimport { useState } from 'preact/hooks'\\n\\ninterface CounterProps {\\n  label: string\\n  initialValue: number\\n}\\n\\ninterface CounterState {\\n  value: number\\n}\\n\\nexport class CounterClass extends Component<CounterProps, CounterState> {\\n  state: CounterState = { value: 0 }\\n\\n  constructor(props: CounterProps) {\\n    super(props)\\n    this.state.value = props.initialValue\\n  }\\n\\n  increment = () => this.setState({ value: this.state.value + 1 })\\n  decrement = () => this.setState({ value: this.state.value - 1 })\\n\\n  render() {\\n    return <div class=\\"counter\\">\\n      <h1>{this.props.label}</h1>\\n      <p>\\n        <button onClick={this.decrement}>-</button>\\n        {' '}\\n        {this.state.value}\\n        {' '}\\n        <button onClick={this.increment}>+</button>\\n      </p>\\n    </div>\\n  }\\n}\\n\\nexport let CounterFunction = (props: CounterProps) => {\\n  let [value, setValue] = useState(props.initialValue)\\n  return <div class=\\"counter\\">\\n    <h1>{props.label}</h1>\\n    <p>\\n      <button onClick={() => setValue(value - 1)}>-</button>\\n      {' '}\\n      {value}\\n      {' '}\\n      <button onClick={() => setValue(value + 1)}>+</button>\\n    </p>\\n  </div>\\n}\\n"],
+  "mappings": ";AAAA;;;ACAA;AACA;AAWO,sBAA2B,EAAsC;AAAA,EAGtE,YAAY,GAAqB;AAC/B,UAAM;AAHR,iBAAsB,EAAE,OAAO;AAO/B,qBAAY,MAAM,KAAK,SAAS,EAAE,OAAO,KAAK,MAAM,QAAQ;AAC5D,qBAAY,MAAM,KAAK,SAAS,EAAE,OAAO,KAAK,MAAM,QAAQ;AAJ1D,SAAK,MAAM,QAAQ,EAAM;AAAA;AAAA,EAM3B,SAAS;AACP,WAAO,EAAC,OAAD;AAAA,MAAK,OAAM;AAAA,OAChB,EAAC,MAAD,MAAK,KAAK,MAAM,QAChB,EAAC,KAAD,MACE,EAAC,UAAD;AAAA,MAAQ,SAAS,KAAK;AAAA,OAAW,MAChC,KACA,KAAK,MAAM,OACX,KACD,EAAC,UAAD;AAAA,MAAQ,SAAS,KAAK;AAAA,OAAW;AAAA;AAAA,GAM9B,IAAkB,CAAC,MAAwB;AACpD,MAAI,CAAC,GAAO,KAAY,EAAS,EAAM;AACvC,SAAO,EAAC,OAAD;AAAA,IAAK,OAAM;AAAA,KAChB,EAAC,MAAD,MAAK,EAAM,QACX,EAAC,KAAD,MACE,EAAC,UAAD;AAAA,IAAQ,SAAS,MAAM,EAAS,IAAQ;AAAA,KAAI,MAC3C,KACA,GACA,KACD,EAAC,UAAD;AAAA,IAAQ,SAAS,MAAM,EAAS,IAAQ;AAAA,KAAI;AAAA;;;AD3ClD,EACE,WACE,EAAC,GAAD;AAAA,EAAc,OAAM;AAAA,EAAY,cAAc;AAAA,IAC9C,EAAC,GAAD;AAAA,EAAiB,OAAM;AAAA,EAAY,cAAc;AAAA,KAEnD,SAAS,eAAe;",
+  "names": []
+}
+`;