joicomponents/bookapp/MicroIDE/test.html

Design patterns to build native web components

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/javascript/javascript.js"></script>

<script type="module">
  import {TabsTabs, TabTab} from "./TabTabs.js";
  import {CodeRunner} from "./CodeRunner.js";
  import {CodeFile, CodeMirrorBox} from "./CodeExample2.js";
  import {MicroCodeEditor} from "./MicroIDE.js";

  customElements.define("tabs-tabs", TabsTabs);
  customElements.define("tab-tab", TabTab);
  customElements.define("code-runner", CodeRunner);
  customElements.define("micro-editor", MicroCodeEditor);
  customElements.define("code-file", CodeFile);
  customElements.define("code-mirror-box", CodeMirrorBox);
</script>

<micro-editor>
  <code-file fallback-filename="file.html">
      something&aring;
  </code-file>
  <code-file fallback-filename="file2.js">
        console.log("omg ivar");
  </code-file>
</micro-editor>