Editable message

src/core/codegen/utils/stringUtils.js

@@ -26,11 +26,11 @@ export const stringTypeUnion = (strings) => {
 }
 
 /**
- * Indents some text by one level.
+ * Indents some text by n spaces.
  * @param {string} text
- */
-export function indent(text) {
-  const INDENT_SPACES = 4;
+ * @param {number | undefined} spaces
+  */
+export function indent(text, spaces = 4) {
   const lines = text.split("\n");
-  return lines.map((l) => " ".repeat(INDENT_SPACES) + l).join("\n");
+  return lines.map((l) => " ".repeat(spaces) + l).join("\n");
 }

src/core/index.js

@@ -202,10 +202,6 @@ export function t18sCore(pluginConfig) {
           locale,
         },
       });
-    } else {
-      logger.error(
-        `Could not trigger HMR event '${event}' for locale '${locale}' because the viteDevServer is not available. This should never happen.`,
-      );
     }
   }
 

src/core/runtime/EditableMessage.svelte

@@ -0,0 +1,17 @@
+<script>
+    /** @type {string} */
+    export let txt;
+
+    let editing = false;
+</script>
+
+
+
+{#if editing}
+   {txt}
+{:else}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <span style="display: contents;" on:click={()=>editing = true}>
+        {txt}
+    </span>
+{/if}

src/core/runtime/T.svelte

@@ -1,16 +1,37 @@
 <script context="module">
-  
 </script>
 
 <script>
   //@ts-ignore
-  import { t } from "$t18s";
+  import { t, locale } from "$t18s";
+  //@ts-ignore
+  import { dev } from "$app/environment";
+  //@ts-ignore
+  import { get } from "svelte/store";
+
+  import EditableMessage from "./EditableMessage.svelte";
 
   /** @type {string} */
   export let key;
 
   /** @type {any} */
   export let values = undefined;
+
+  $: txt = $t(key, values);
+
+  function submit() {
+    if (import.meta.hot) {
+      import.meta.hot.send("t18s:add-message", {
+        locale: get(locale),
+        key: "dynamically-added",
+        value: "I'm a dynamically added message!",
+      });
+    }
+  }
 </script>
 
-{$t(key, values)}
+{#if dev}
+  <EditableMessage txt={txt} />
+{:else}
+  {txt}
+{/if}

src/core/utils/logger.js

@@ -1,4 +1,5 @@
 import kleur from "kleur";
+import { indent } from "../codegen/utils/stringUtils.js";
 
 /**
  * Log Messages to the console in a standard format.
@@ -66,9 +67,10 @@ export class Logger {
    * @returns {string}
    */
   #formatMessage(msg, icon = null) {
-    msg = msg.replace(/^/gm, "         "); //Indent each line by 9 spaces (2 spaces + [t18s] + 1 space)
-    const prefix = icon ? icon + " " + "[t18s] " : "  [t18s] ";
-    msg = prefix + msg.slice(9); //Remove the first 9 spaces
+    if (msg.trim().length === 0) return msg; //Ignore empty messages
+    const prefix = `${icon ?? " "} [t18s] `;
+    msg = indent(msg, prefix.length); 
+    msg = prefix + msg.slice(prefix.length);
     return msg;
   }
 }