Merge pull request #3 from elm-land/elm-error-json

Add full color error message overlays
elm-land · May 30, 2022 · ebf6e8e · ebf6e8e
2 parents fa733ce + 27e7a0e
commit ebf6e8e
Show file tree

Hide file tree

Showing 29 changed files with 7,964 additions and 74 deletions.
diff --git a/cli/package-lock.json b/cli/package-lock.json
diff --git a/cli/package.json b/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "elm-land",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Reliable web apps for everyone",
   "main": "index.js",
   "bin": {
@@ -37,7 +37,8 @@
   "dependencies": {
     "chokidar": "3.5.3",
     "elm": "0.19.1-5",
-    "vite": "2.9.8",
-    "vite-plugin-elm": "2.6.1"
+    "elm-esm": "1.1.4",
+    "node-elm-compiler": "5.0.6",
+    "vite": "2.9.8"
   }
 }
diff --git a/cli/src/effects.js b/cli/src/effects.js
@@ -1,7 +1,7 @@
 const chokidar = require('chokidar')
 const path = require('path')
 const Vite = require('vite')
-const ElmVitePlugin = require('vite-plugin-elm')
+const ElmVitePlugin = require('./vite-plugin/index.js')
 const { Codegen } = require('./codegen')
 const { Files } = require('./files')
 

diff --git a/cli/src/templates/_elm-land/server/main.js b/cli/src/templates/_elm-land/server/main.js
@@ -1,19 +1,95 @@
 import { Elm } from '../src/Main.elm'
 
+// client side
+if (import.meta.hot) {
+  class ElmErrorOverlay extends HTMLElement {
+    constructor() {
+      super()
+      this.attachShadow({ mode: 'open' })
+    }
+
+    onContentChanged(html) {
+      this.shadowRoot.querySelector('.elm-error').innerHTML = html
+    }
+
+    connectedCallback() {
+      this.shadowRoot.innerHTML = `
+        <style>
+          .elm-error__background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            opacity: 0.5;
+            background: black;
+          }
+
+          .elm-error {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: linear-gradient(#333, #303030);
+            color: white;
+            font-weight: 400;
+            font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+            padding: 2rem;
+            border-radius: 0.25rem;
+            box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.125);
+            border-top: solid 0.5rem indianred;
+          }
+        </style>
+        <div class="elm-error__background"></div>
+        <div class="elm-error"></div>
+      `
+    }
+  }
+
+  import.meta.hot.on('elm:error', (data) => {
+
+    if (!customElements.get('elm-error-overlay')) {
+      customElements.define('elm-error-overlay', ElmErrorOverlay)
+    }
+
+    let existingOverlay = document.querySelector('elm-error-overlay')
+
+    if (existingOverlay) {
+      existingOverlay.onContentChanged(data.error)
+    } else {
+      document.body.innerHTML += '<elm-error-overlay></elm-error-overlay>'
+      document.querySelector('elm-error-overlay').onContentChanged(data.error)
+    }
+
+  })
+
+  import.meta.hot.on('elm:success', () => {
+    let existingOverlay = document.querySelector('elm-error-overlay')
+    if (existingOverlay) {
+      existingOverlay.remove()
+    }
+  })
+
+}
+
 let startApp = ({ Interop }) => {
   let env = {}
 
   let flags = Interop.flags
     ? Interop.flags({ env })
     : undefined
 
-  let app = Elm.Main.init({
-    node: document.getElementById('app'),
-    flags
-  })
+  try {
+    let app = Elm.Main.init({
+      node: document.getElementById('app'),
+      flags
+    })
+
+    if (Interop.onReady) {
+      Interop.onReady({ app, env })
+    }
+  } catch (_) {
 
-  if (Interop.onReady) {
-    Interop.onReady({ app, env })
   }
 }