workflow: basic template explorer

packages/template-explorer/README.md

@@ -0,0 +1,8 @@
+## Template Explorer
+
+Live explorer for template compilation output.
+
+To run:
+
+- `yarn dev template-explorer`
+- Serve project root over a local HTTP server.

packages/template-explorer/index.html

@@ -0,0 +1,43 @@
+<link rel="stylesheet" data-name="vs/editor/editor.main" href="../../node_modules/monaco-editor/min/vs/editor/editor.main.css">
+<style>
+body {
+  margin: 0;
+}
+.editor {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  box-sizing: border-box;
+}
+#source {
+  left: 0;
+  width: 40%;
+}
+#output {
+  left: 40%;
+  width: 60%;
+}
+</style>
+
+<div id="source" class="editor"></div>
+<div id="output" class="editor"></div>
+
+<script src="../../node_modules/acorn/dist/acorn.js"></script>
+<script src="../../node_modules/estree-walker/dist/estree-walker.umd.js"></script>
+<script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
+<script src="./dist/template-explorer.global.js"></script>
+<script>
+window._deps = {
+  acorn,
+  'estree-walker': estreeWalker
+}
+
+require.config({
+  paths: {
+    'vs': '../../node_modules/monaco-editor/min/vs'
+  }
+})
+</script>
+<script>
+require(['vs/editor/editor.main'], init /* injected by build */)
+</script>

packages/template-explorer/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@vue/template-explorer",
+  "version": "3.0.0-alpha.1",
+  "private": true,
+  "buildOptions": {
+    "formats": [
+      "global"
+    ],
+    "env": "development",
+    "enableNonBrowserBranches": true
+  },
+  "dependencies": {
+    "monaco-editor": "^0.18.1"
+  }
+}

packages/template-explorer/src/index.ts

@@ -0,0 +1,83 @@
+import * as m from 'monaco-editor'
+import { compile } from '@vue/compiler-dom'
+
+const self = window as any
+
+self.init = () => {
+  const monaco = (window as any).monaco as typeof m
+  const persistedContent =
+    decodeURIComponent(window.location.hash.slice(1)) ||
+    `<div>{{ foo + bar }}</div>`
+
+  self.compilerOptions = {
+    mode: 'module',
+    prefixIdentifiers: true,
+    hoistStatic: true
+  }
+
+  function compileCode(source: string): string {
+    console.clear()
+    try {
+      const { code, ast } = compile(source, self.compilerOptions)
+
+      console.log(ast)
+      return code
+    } catch (e) {
+      console.error(e)
+      return `/* See console for error */`
+    }
+  }
+
+  const sharedOptions = {
+    theme: 'vs-dark',
+    fontSize: 14,
+    wordWrap: 'on',
+    scrollBeyondLastLine: false,
+    minimap: {
+      enabled: false
+    }
+  } as const
+
+  const editor = monaco.editor.create(
+    document.getElementById('source') as HTMLElement,
+    {
+      value: persistedContent,
+      language: 'html',
+      ...sharedOptions
+    }
+  )
+
+  const model = editor.getModel()!
+
+  model.updateOptions({
+    tabSize: 2
+  })
+
+  model.onDidChangeContent(() => {
+    const src = editor.getValue()
+    window.location.hash = encodeURIComponent(src)
+    const res = compileCode(src)
+    if (res) {
+      output.setValue(res)
+    }
+  })
+
+  const output = monaco.editor.create(
+    document.getElementById('output') as HTMLElement,
+    {
+      value: compileCode(persistedContent),
+      language: 'javascript',
+      readOnly: true,
+      ...sharedOptions
+    }
+  )
+
+  output.getModel()!.updateOptions({
+    tabSize: 2
+  })
+
+  window.addEventListener('resize', () => {
+    editor.layout()
+    output.layout()
+  })
+}