Fixed kalk_web browser compatibility problems

kalk_web/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@paddim8/kalk-component",
-	"version": "1.0.0",
+	"version": "1.0.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -7289,6 +7289,11 @@
 				"safe-buffer": "^5.0.1"
 			}
 		},
+		"shadow-selection-polyfill": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/shadow-selection-polyfill/-/shadow-selection-polyfill-1.1.0.tgz",
+			"integrity": "sha512-ntz8P6DLEFpx7gikeXZ4gSi3APE2D+BP0rKnnaBzED+Lm8je8nkNcayy6kGWPEDWMFbtm+Yvd1ONFaXcsVWn2w=="
+		},
 		"shebang-command": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -7915,6 +7920,11 @@
 				"strip-indent": "^3.0.0"
 			}
 		},
+		"svelte-tag": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/svelte-tag/-/svelte-tag-1.0.1.tgz",
+			"integrity": "sha512-d3+bXGCZ/aSfFc1QBBGJFFeiQ+sukks+GrBQbk1YTYxA6OhlfFbWfFcyBaz7ONhspOBN9gbRq4+AZYhORALQ+A=="
+		},
 		"svgo": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",

kalk_web/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@paddim8/kalk-component",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.",
 	"svelte": "src/main.ts",
 	"main": "public/build/bundle.js",
@@ -46,6 +46,7 @@
 		"svelte-check": "^1.1.15",
 		"svelte-loader-hot": "^0.3.1",
 		"svelte-preprocess": "^4.6.1",
+		"svelte-tag": "^1.0.1",
 		"terser-webpack-plugin": "^4.2.3",
 		"ts-loader": "^8.0.2",
 		"ts-node": "^9.0.0",

kalk_web/src/ConsoleLine.svelte

@@ -1,20 +1,19 @@
 <script lang="ts">
-    export let byUser = false;
+    export let byuser = false;
 </script>
 
-<style>
+<style lang="scss">
-    p {
+    .console-line-tg638d3 {
         margin-top: 0;
         margin-bottom: 5px;
         word-wrap: break-word;
     }
 
-    .result {
+    .console-line-tg638d3.result {
         margin-bottom: 10px;
     }
 </style>
 
-<svelte:options tag="console-line" />
+<p class="console-line-tg638d3" class:result={!byuser}>
-<p class:result={!byUser}>
     <slot />
 </p>

kalk_web/src/KalkCalculator.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { afterUpdate } from "svelte";
     import type { Context } from "@paddim8/kalk";
+    import ConsoleLine from "./ConsoleLine.svelte";
 
     // Props, HTML doesn't recognise them if they're not like this
     export let identifiercolor = "cornflowerblue";
@@ -57,7 +58,10 @@
                              href="https://kalk.netlify.app/#usage"
                              target="blank">Link to usage guide</a>`;
             } else {
-                const [result, success] = calculate(kalk, input);
+                const [result, success] = calculate(
+                    kalk,
+                    input.replace(/\s+/g, "") // Temporary fix, since it for some reason complains about spaces on chrome
+                );
                 output = success
                     ? highlight(result)[0]
                     : `<span style="color: ${errorcolor}">${result}</span>`;
@@ -119,16 +123,13 @@
     }
 
     function getCursorPos(element: HTMLInputElement): number {
-        const selection = window.getSelection();
+        const selection = document.getSelection();
-        if (selection.rangeCount !== 0) {
         const range = selection.getRangeAt(0);
         const preCaretRange = range.cloneRange();
         preCaretRange.selectNodeContents(element);
         preCaretRange.setEnd(range.endContainer, range.endOffset);
-            return preCaretRange.toString().length;
-        }
 
-        return 0;
+        return preCaretRange.toString().length;
     }
 
     function setCursorPos(element: HTMLElement, indexToSelect: number) {
@@ -187,7 +188,7 @@
         if (!input) return ["", 0];
         let result = input;
         let offset = 0;
-        result = result.replaceAll(
+        result = result.replace(
             /(?<identifier>[^!-@\s_|^⌊⌋⌈⌉]+(_\d+)?)|(?<op>[+\-/*%^!])/g,
             (substring, identifier, _, op) => {
                 if (identifier) {
@@ -239,7 +240,7 @@
 </script>
 
 <style lang="scss">
-    .calculator {
+    .calculator-tg638d3 {
         display: flex;
         flex-direction: column;
         width: 100%;
@@ -247,7 +248,6 @@
         box-sizing: border-box;
         background-color: inherit;
         color: inherit;
-    }
 
         .output {
             display: flex;
@@ -296,19 +296,19 @@
             color: gray;
             background-color: transparent;
         }
+    }
 </style>
 
-<svelte:options tag="kalk-calculator" />
+<div class="calculator-tg638d3">
-<div class="calculator">
     <div class="output" bind:this={outputElement}>
         <slot />
         {#each outputLines as line}
-            <console-line byUser={line[1]}>
+            <ConsoleLine byuser={line[1]}>
                 {#if line[1]}
                     <span style="color: {promptcolor}">&gt;&gt;</span>
                 {/if}
                 {@html line[0]}
-            </console-line>
+            </ConsoleLine>
         {/each}
     </div>
     <div class="input-area">

kalk_web/src/main.ts

@@ -1,6 +1,29 @@
 import "./public-path.js";
 import KalkCalculator from './KalkCalculator.svelte';
+import ConsoleLine from './ConsoleLine.svelte';
+import component from "svelte-tag";
+
+new component({
+	component: KalkCalculator,
+	tagname: "kalk-calculator",
+	attributes: [
+		"identifiercolor",
+		"operatorcolor",
+		"promptcolor",
+		"errorcolor",
+		"linkcolor",
+		"hinttext",
+		"autofocus"
+	]
+});
+
+new component({
+	component: ConsoleLine,
+	tagname: "console-line",
+	attributes: ["byuser"]
+});
 
 export {
 	KalkCalculator,
+	ConsoleLine,
 }

kalk_web/webpack.config.ts

@@ -61,7 +61,7 @@ const config: webpack.Configuration & WebpackDevServer.Configuration = {
 				use: {
 					loader: 'svelte-loader-hot',
 					options: {
-						customElement: true,
+						//customElement: true,
 						dev: !prod,
 						emitCss: prod,
 						hotReload: !prod,