@xh/hoist 79.0.0-SNAPSHOT.1765845531181 → 79.0.0-SNAPSHOT.1765846827962

package/desktop/cmp/input/CodeInput.ts

@@ -11,8 +11,11 @@ import {
     foldGutter,
     foldKeymap,
     indentOnInput,
+    LanguageDescription,
+    LanguageSupport,
     syntaxHighlighting
 } from '@codemirror/language';
+import {languages} from '@codemirror/language-data';
 import {linter, lintGutter} from '@codemirror/lint';
 import {highlightSelectionMatches, search} from '@codemirror/search';
 import {
@@ -49,14 +52,14 @@ import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
 import {withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {compact, isEmpty, isFunction, isObject} from 'lodash';
+import {compact, find, includes, isEmpty, isFunction, isObject} from 'lodash';
 import {ReactElement} from 'react';
 import './CodeInput.scss';
 import {javascript} from '@codemirror/lang-javascript';
-// import {json} from '@codemirror/lang-json';
-// import {html} from '@codemirror/lang-html';
-// import {sql} from '@codemirror/lang-sql';
-// import {css} from '@codemirror/lang-css';
+import {json} from '@codemirror/lang-json';
+import {html} from '@codemirror/lang-html';
+import {sql} from '@codemirror/lang-sql';
+import {css} from '@codemirror/lang-css';
 export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps {
     /** True to focus the control on render. */
     autoFocus?: boolean;
@@ -418,6 +421,7 @@ class CodeInputModel extends HoistInputModel {
         const {
                 autoFocus,
                 readonly,
+                language,
                 highlightActiveLine: propsHighlightActiveLine,
                 linter: propsLinter,
                 lineNumbers: propsLineNumbers = true,
@@ -442,7 +446,6 @@ class CodeInputModel extends HoistInputModel {
                 indentOnInput(),
                 autocompletion(),
                 history(),
-                javascript(),
                 // Linter
                 propsLinter
                     ? linter(async view => {
@@ -475,14 +478,14 @@ class CodeInputModel extends HoistInputModel {
         if (propsHighlightActiveLine)
             extensions.push(highlightActiveLine(), highlightActiveLineGutter());
         if (autoFocus) extensions.push(this.autofocusExtension);
-        // if (language) {
-        //     const langExt = this.getLanguageExtension(language);
-        //     if (langExt) {
-        //         extensions.push(langExt);
-        //     } else {
-        //         console.warn('Failed to load language:', language);
-        //     }
-        // }
+        if (language) {
+            const langExt = this.getLanguageExtensionAsync(language);
+            if (langExt) {
+                extensions.push(await langExt);
+            } else {
+                console.warn('Failed to load language:', language);
+            }
+        }
         return extensions.filter(it => !isEmpty(it));
     }
 
@@ -491,29 +494,28 @@ class CodeInputModel extends HoistInputModel {
         return XH.darkTheme ? oneDark : lightTheme;
     }
 
-    // private LANGUAGE_EXTENSIONS: Record<string, () => LanguageSupport> = {
-    //     js: javascript,
-    //     javascript: javascript,
-    //     html: html,
-    //     css: css,
-    //     json: json,
-    //     sql: sql
-    // };
-
-    // private getLanguageExtension(lang: string): LanguageSupport {
-    //     if (!lang) return null;
-    //     const extFactory = this.LANGUAGE_EXTENSIONS[lang.toLowerCase()];
-    //     if (!extFactory) {
-    //         console.warn(`Language not found: ${lang}`);
-    //         return null;
-    //     }
-    //     try {
-    //         return extFactory(); // returns a LanguageSupport instance
-    //     } catch (err) {
-    //         console.error(`Failed to load language: ${lang}`, err);
-    //         return null;
-    //     }
-    // }
+    private LANGUAGE_EXTENSIONS: Record<string, () => LanguageSupport> = {
+        js: javascript,
+        javascript: javascript,
+        html: html,
+        css: css,
+        json: json,
+        sql: sql
+    };
+
+    private async getLanguageExtensionAsync(lang: string): Promise<LanguageSupport> {
+        try {
+            const langDesc: LanguageDescription | undefined = find(
+                languages,
+                it => includes(it.alias, lang) || it.name.toLowerCase() === lang.toLowerCase()
+            );
+            if (!langDesc) return null;
+            return await langDesc.load();
+        } catch (err) {
+            console.error(`Failed to load language: ${lang}`, err);
+            return null;
+        }
+    }
 
     private autofocusExtension = ViewPlugin.fromClass(
         class {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1765845531181",
+  "version": "79.0.0-SNAPSHOT.1765846827962",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -34,12 +34,8 @@
     "@blueprintjs/datetime": "^5.3.7",
     "@blueprintjs/datetime2": "^2.3.7",
     "@codemirror/commands": "6.10.0",
-    "@codemirror/lang-css": "6.3.1",
-    "@codemirror/lang-html": "6.4.11",
-    "@codemirror/lang-javascript": "6.2.4",
-    "@codemirror/lang-json": "6.0.2",
-    "@codemirror/lang-sql": "6.10.0",
     "@codemirror/language": "6.11.3",
+    "@codemirror/language-data": "6.5.2",
     "@codemirror/lint": "6.9.2",
     "@codemirror/search": "6.5.11",
     "@codemirror/view": "6.39.4",