From 5731ba62d061fe46f1b166fb3a3a1b58c45245f3 Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Thu, 20 Feb 2025 16:10:20 +1100
Subject: [PATCH] move error component to standalone

---
 src/components/error/error.module.css | 16 ++++++++++++++++
 src/components/error/error.tsx        | 16 ++++++++++++++++
 src/components/error/index.tsx        |  1 +
 src/routes/(editor).tsx               | 17 ++---------------
 src/routes/(editor)/experimental.tsx  |  7 +++++--
 src/routes/editor.module.css          | 17 -----------------
 6 files changed, 40 insertions(+), 34 deletions(-)
 create mode 100644 src/components/error/error.module.css
 create mode 100644 src/components/error/error.tsx
 create mode 100644 src/components/error/index.tsx

diff --git a/src/components/error/error.module.css b/src/components/error/error.module.css
new file mode 100644
index 0000000..ecddcca
--- /dev/null
+++ b/src/components/error/error.module.css
@@ -0,0 +1,16 @@
+.error {
+    display: grid;
+    place-content: center;
+
+    background: repeating-linear-gradient(-45deg,
+            color(from var(--fail) xyz x y z / .05),
+            color(from var(--fail) xyz x y z / .05) 10px,
+            color(from var(--fail) xyz x y z / .25) 10px,
+            color(from var(--fail) xyz x y z / .25) 12px,
+            color(from var(--fail) xyz x y z / .05) 12px);
+    color: var(--text-2);
+    border: 1px solid var(--fail);
+    border-radius: var(--radii-m);
+
+    margin: var(--padding-l);
+}
\ No newline at end of file
diff --git a/src/components/error/error.tsx b/src/components/error/error.tsx
new file mode 100644
index 0000000..8faa265
--- /dev/null
+++ b/src/components/error/error.tsx
@@ -0,0 +1,16 @@
+import { Component, Show } from "solid-js";
+import css from './error.module.css';
+
+export const ErrorComp: Component<{ error: Error }> = (props) => {
+    return <div class={css.error}>
+        <b>{props.error.message}</b>
+
+        <Show when={props.error.cause}>{
+            cause => <>{cause().description}</>
+        }</Show>
+
+        {props.error.stack}
+
+        <a href="/">Return to start</a>
+    </div>;
+};
\ No newline at end of file
diff --git a/src/components/error/index.tsx b/src/components/error/index.tsx
new file mode 100644
index 0000000..a24ba10
--- /dev/null
+++ b/src/components/error/index.tsx
@@ -0,0 +1 @@
+export { ErrorComp } from './error';
\ No newline at end of file
diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx
index 654c2e5..66243d4 100644
--- a/src/routes/(editor).tsx
+++ b/src/routes/(editor).tsx
@@ -9,8 +9,9 @@ import { HttpHeader } from "@solidjs/start";
 import { FaSolidPalette } from "solid-icons/fa";
 import { LocalePicker } from "~/features/i18n";
 import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/features/theme";
-import css from "./editor.module.css";
 import { Dropdown } from "~/components/dropdown";
+import { ErrorComp } from "~/components/error";
+import css from "./editor.module.css";
 
 const event = getRequestEvent();
 
@@ -99,19 +100,5 @@ export default function Editor(props: ParentProps) {
     </MenuProvider>
 }
 
-const ErrorComp: Component<{ error: Error }> = (props) => {
-    return <div class={css.error}>
-        <b>{props.error.message}</b>
-
-        <Show when={props.error.cause}>{
-            cause => <>{cause().description}</>
-        }</Show>
-
-        {props.error.stack}
-
-        <a href="/">Return to start</a>
-    </div>;
-};
-
 let keyCounter = 0;
 const createUniqueId = () => `key-${keyCounter++}`;
\ No newline at end of file
diff --git a/src/routes/(editor)/experimental.tsx b/src/routes/(editor)/experimental.tsx
index 5efa727..5ddac59 100644
--- a/src/routes/(editor)/experimental.tsx
+++ b/src/routes/(editor)/experimental.tsx
@@ -1,8 +1,9 @@
 
-import { ParentProps } from "solid-js";
+import { ErrorBoundary, ParentProps } from "solid-js";
 import { Menu } from "~/features/menu";
 import { createCommand } from "~/features/command";
 import { useNavigate } from "@solidjs/router";
+import { ErrorComp } from "~/components/error";
 
 export default function Experimental(props: ParentProps) {
   const navigate = useNavigate();
@@ -19,6 +20,8 @@ export default function Experimental(props: ParentProps) {
       <Menu.Item command={goTo.withLabel('formatter').with('formatter')} />
     </Menu.Root>
 
-    {props.children}
+    <ErrorBoundary fallback={e => <ErrorComp error={e} />}>
+      {props.children}
+    </ErrorBoundary>
   </>;
 }
\ No newline at end of file
diff --git a/src/routes/editor.module.css b/src/routes/editor.module.css
index fd17b72..aa3b0bd 100644
--- a/src/routes/editor.module.css
+++ b/src/routes/editor.module.css
@@ -108,23 +108,6 @@
     }
 }
 
-.error {
-    display: grid;
-    place-content: center;
-
-    background: repeating-linear-gradient(-45deg,
-            color(from var(--fail) xyz x y z / .05),
-            color(from var(--fail) xyz x y z / .05) 10px,
-            color(from var(--fail) xyz x y z / .25) 10px,
-            color(from var(--fail) xyz x y z / .25) 12px,
-            color(from var(--fail) xyz x y z / .05) 12px);
-    color: var(--text-2);
-    border: 1px solid var(--fail);
-    border-radius: var(--radii-m);
-
-    margin: var(--padding-l);
-}
-
 @keyframes slide-left {
     from {
         translate: 0% 0;