@bexis2/bexis2-core-ui 0.2.30 → 0.2.31

package/README.md

@@ -1,9 +1,13 @@
 # bexis-core-ui
 
+## 0.2.31
+
+- validation and syntax check for code editor component
+
 ## 0.2.30
 
 - fix routes for 'file' components ('.../file/...' -> '.../File/...')
-- 'Table' components is able to display heterogeneous data, that means data items/rows might have a different number of properties/columns.
+- 'Table' component is able to display heterogeneous data, that means data items/rows might have a different number of properties/columns.
 
 ## 0.2.29
 

package/dist/components/CodeEditor/CodeEditor.svelte

@@ -1,9 +1,11 @@
 <script>import { createEventDispatcher } from "svelte";
 import CodeMirror from "svelte-codemirror-editor";
 import Fa from "svelte-fa/src/fa.svelte";
+import Linter from "eslint4b-prebuilt";
 import { html } from "@codemirror/lang-html";
-import { javascript } from "@codemirror/lang-javascript";
-import { json } from "@codemirror/lang-json";
+import { javascript, esLint } from "@codemirror/lang-javascript";
+import { lintGutter, linter } from "@codemirror/lint";
+import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { oneDark } from "@codemirror/theme-one-dark";
 import { Modal, modalStore } from "@skeletonlabs/skeleton";
 import { faMoon, faSave, faSun } from "@fortawesome/free-regular-svg-icons";
@@ -16,6 +18,7 @@ export let language = "html";
 export let dark = true;
 export let toggle = true;
 export let actions = true;
+export let isValid = false;
 export let styles = {
   "&": {
     borderRadius: "0.5rem",
@@ -32,14 +35,34 @@ const modal = {
   body: "Unsaved changes will be lost. Are you sure you want to continue?",
   response: (r) => r ? value = initialValue : null
 };
+const extensions = language === "js" ? [linter(esLint(new Linter())), lintGutter()] : language === "json" ? [linter(jsonParseLinter()), lintGutter()] : [];
+const isValidJSON = (str) => {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+const isValidJS = (str) => {
+  try {
+    new Function(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+$:
+  isValid = language === "json" ? isValidJSON(value) : language === "js" ? isValidJS(value) : true;
 </script>
 
-<div class="items-center justify-center">
-
-	<h1 class="h1 font-semibold text-primary-500 mb-3" id="{id}-title">{title}</h1>
+<div class="grid items-stretch justify-stretch gap-1">
+	<label class="label" for="{id}-editor" id="{id}-title">
+		<span>{title}</span>
+	</label>
 	<slot id="{id}-description" />
-	<div class="grid gap-1 w-full h-full mt-5">
-		<div class="rounded-lg shadow-lg w-full" id="{id}-editor">
+	<div class="grid gap-1 w-full h-full">
+		<div class="rounded-lg shadow-lg w-full overflow-auto" id="{id}-editor">
 			<CodeMirror
 				bind:value
 				lang={language === 'html'
@@ -50,11 +73,11 @@ const modal = {
 				theme={dark ? oneDark : null}
 				class="flex w-full"
 				{styles}
+				{extensions}
 			/>
 		</div>
 	</div>
 
-
 	<div class="flex justify-between gap-2 items-center mt-3" id="{id}-footer">
 		<div class="flex gap-2">
 			<button
@@ -89,6 +112,7 @@ const modal = {
 				<button
 					class="btn variant-filled-primary"
 					id="{id}-save"
+					disabled={!isValid}
 					on:click|preventDefault={() => dispatch('save')}><Fa icon={faSave} /></button
 				>
 			</div>

package/dist/components/CodeEditor/CodeEditor.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         dark?: boolean | undefined;
         toggle?: boolean | undefined;
         actions?: boolean | undefined;
+        isValid?: boolean | undefined;
         styles?: ThemeSpec | undefined;
     };
     events: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.2.30",
+  "version": "0.2.31",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -60,6 +60,7 @@
     "@codemirror/lang-html": "^6.4.5",
     "@codemirror/lang-javascript": "^6.1.9",
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lint": "^6.4.2",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@floating-ui/dom": "^1.2.7",
     "@fortawesome/fontawesome-free": "^6.2.1",
@@ -70,6 +71,7 @@
     "codemirror": "^6.0.1",
     "delay": "^6.0.0",
     "dotenv": "^16.3.1",
+    "eslint4b-prebuilt": "^6.7.2",
     "highlight.js": "^11.8.0",
     "highlightjs-svelte": "^1.0.6",
     "svelte": "^3.54.0",

package/src/lib/components/CodeEditor/CodeEditor.svelte

@@ -3,16 +3,19 @@
 
 	import CodeMirror from 'svelte-codemirror-editor';
 	import Fa from 'svelte-fa/src/fa.svelte';
+	import Linter from 'eslint4b-prebuilt';
 	import { html } from '@codemirror/lang-html';
-	import { javascript } from '@codemirror/lang-javascript';
-	import { json } from '@codemirror/lang-json';
+	import { javascript, esLint } from '@codemirror/lang-javascript';
+	import { lintGutter, linter } from '@codemirror/lint';
+	import { json, jsonParseLinter } from '@codemirror/lang-json';
 	import { oneDark } from '@codemirror/theme-one-dark';
 	import { Modal, modalStore } from '@skeletonlabs/skeleton';
 	import { faMoon, faSave, faSun } from '@fortawesome/free-regular-svg-icons';
 	import { faArrowRotateLeft, faXmark } from '@fortawesome/free-solid-svg-icons';
 	import type { ThemeSpec } from 'svelte-codemirror-editor';
 	import type { ModalSettings } from '@skeletonlabs/skeleton';
-  
+	import type { Extension } from '@codemirror/state';
+
 	export let id: string;
 	export let title = '';
 	export let initialValue = '';
@@ -21,6 +24,7 @@
 	export let dark = true;
 	export let toggle = true;
 	export let actions = true;
+	export let isValid = false;
 	export let styles: ThemeSpec = {
 		'&': {
 			borderRadius: '0.5rem',
@@ -39,14 +43,43 @@
 		body: 'Unsaved changes will be lost. Are you sure you want to continue?',
 		response: (r: boolean) => (r ? (value = initialValue) : null)
 	};
-</script>
 
-<div class="items-center justify-center">
+	const extensions: Extension[] =
+		language === 'js'
+			? [linter(esLint(new Linter())), lintGutter()]
+			: language === 'json'
+			? [linter(jsonParseLinter()), lintGutter()]
+			: [];
+
+	const isValidJSON = (str: string) => {
+		try {
+			JSON.parse(str);
+		} catch (e) {
+			return false;
+		}
+		return true;
+	};
 
-	<h1 class="h1 font-semibold text-primary-500 mb-3" id="{id}-title">{title}</h1>
+	const isValidJS = (str: string) => {
+		try {
+			new Function(str);
+		} catch (e) {
+			return false;
+		}
+		return true;
+	};
+
+	$: isValid =
+		language === 'json' ? isValidJSON(value) : language === 'js' ? isValidJS(value) : true;
+</script>
+
+<div class="grid items-stretch justify-stretch gap-1">
+	<label class="label" for="{id}-editor" id="{id}-title">
+		<span>{title}</span>
+	</label>
 	<slot id="{id}-description" />
-	<div class="grid gap-1 w-full h-full mt-5">
-		<div class="rounded-lg shadow-lg w-full" id="{id}-editor">
+	<div class="grid gap-1 w-full h-full">
+		<div class="rounded-lg shadow-lg w-full overflow-auto" id="{id}-editor">
 			<CodeMirror
 				bind:value
 				lang={language === 'html'
@@ -57,11 +90,11 @@
 				theme={dark ? oneDark : null}
 				class="flex w-full"
 				{styles}
+				{extensions}
 			/>
 		</div>
 	</div>
 
-
 	<div class="flex justify-between gap-2 items-center mt-3" id="{id}-footer">
 		<div class="flex gap-2">
 			<button
@@ -96,6 +129,7 @@
 				<button
 					class="btn variant-filled-primary"
 					id="{id}-save"
+					disabled={!isValid}
 					on:click|preventDefault={() => dispatch('save')}><Fa icon={faSave} /></button
 				>
 			</div>