Language editors

scripts/build.js

@@ -157,13 +157,6 @@ const esmBuild = () =>
       'headless.ts',
       'templates/starter/index.ts',
       'editor/monaco/monaco.ts',
-      'editor/monaco/languages/monaco-lang-astro.ts',
-      'editor/monaco/languages/monaco-lang-clio.ts',
-      'editor/monaco/languages/monaco-lang-imba.ts',
-      'editor/monaco/languages/monaco-lang-minizinc.ts',
-      'editor/monaco/languages/monaco-lang-prolog.ts',
-      // 'editor/monaco/languages/monaco-lang-sql.ts',
-      'editor/monaco/languages/monaco-lang-wat.ts',
       'editor/codemirror/codemirror.ts',
       'editor/codejar/codejar.ts',
       'editor/blockly/blockly.ts',

src/livecodes/compiler/compile.worker.ts

@@ -1,6 +1,6 @@
 import type TS from 'typescript';
 import { getCompilerOptions } from '../editor/ts-compiler-options';
-import { languages, processors } from '../languages';
+import { getLanguageSpecs, languages, processors } from '../languages';
 import type {
   CompileOptions,
   CompileResult,
@@ -288,7 +288,10 @@ const initCodemirrorTS = doOnce(async () => {
   );
   const system = createSystem(tsvfsMap);
   const createTypeScriptEnvironment = (lang: Language) => {
-    const compilerOpts = getCompilerOptions(lang);
+    const compilerOpts = {
+      ...getCompilerOptions(),
+      ...((getLanguageSpecs(lang)?.editorSupport?.compilerOptions || {}) as TS.CompilerOptions),
+    };
     return createVirtualTypeScriptEnvironment(system, [], worker.ts, compilerOpts);
   };
   const language = codemirrorWorker.language || 'tsx';

src/livecodes/core.ts

@@ -41,7 +41,6 @@ import {
   upgradeAndValidate,
 } from './config';
 import { createCustomEditors, createEditor, getFontFamily } from './editor';
-import { hasJsx } from './editor/ts-compiler-options';
 import { createEventsManager, createPub } from './events';
 import { customEvents } from './events/custom-events';
 import { exportJSON } from './export/export-json';
@@ -80,6 +79,7 @@ import {
   getLanguageExtension,
   getLanguageSpecs,
   getLanguageTitle,
+  hasJsx,
   languageIsEnabled,
   languages,
   mapLanguage,
@@ -389,7 +389,7 @@ const loadModuleTypes = async (
       ...config.types,
       ...config.customSettings.types,
     };
-    const reactImport = hasJsx.includes(scriptLanguage) ? `import React from 'react';\n` : '';
+    const reactImport = hasJsx(scriptLanguage) ? `import React from 'react';\n` : '';
     const libs = await typeLoader.load(
       reactImport + getConfig().script.content + '\n' + getConfig().markup.content,
       configTypes,
@@ -791,7 +791,7 @@ const configureEditorTools = (language: Language) => {
   UI.getEditorToolbar().classList.remove('hidden');
 
   const langSpecs = getLanguageSpecs(language);
-  if (langSpecs?.formatter || langSpecs?.parser) {
+  if (langSpecs?.formatter) {
     UI.getFormatButton().classList.remove('disabled');
   } else {
     UI.getFormatButton().classList.add('disabled');

src/livecodes/editor/codejar/codejar.ts

@@ -38,8 +38,8 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   let { value, language } = options;
   let currentPosition: EditorPosition = { lineNumber: 1 };
-  const mapLanguage = options.mapLanguage || ((lang: Language) => lang);
-  let mappedLanguage = language === 'wat' ? 'wasm' : mapLanguage(language);
+  const mapLanguage = (lang: Language) => options.mapLanguage?.(lang, 'codejar');
+  let mappedLanguage = mapLanguage(language);
   let editorOptions: ReturnType<typeof convertOptions>;
 
   const preElement: HTMLElement = document.createElement('pre');

src/livecodes/editor/codemirror/codemirror.ts

@@ -29,6 +29,7 @@ import { colorPicker } from '@replit/codemirror-css-color-picker';
 
 // these are imported normally
 import { getEditorModeNode } from '../../UI/selectors';
+import { getLanguageSpecs } from '../../languages';
 import type {
   CodeEditor,
   CodemirrorTheme,
@@ -68,14 +69,25 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   let editorSettings: EditorConfig = { ...options };
   if (!container) throw new Error('editor container not found');
 
-  const getLanguageSupport = async (language: Language): Promise<LanguageSupport> =>
-    editorLanguages[language]?.() || (editorLanguages.html?.() as Promise<LanguageSupport>);
+  const getLanguageSupport = async (lang: Language): Promise<LanguageSupport> => {
+    const langSupport = getLanguageSpecs(lang)?.editorSupport?.codemirror?.languageSupport;
+    if (!langSupport) {
+      return editorLanguages[lang]?.() || editorLanguages.html?.() || [];
+    }
+    const loadLanguage: () => Promise<LanguageSupport> =
+      typeof langSupport === 'string'
+        ? (await import(langSupport)).default
+        : typeof langSupport === 'function'
+          ? langSupport
+          : async () => [];
+    return loadLanguage();
+  };
 
   const mapLanguage = (lang: Language) => {
     if (lang.startsWith('vue')) return 'vue';
     if (lang.startsWith('svelte')) return 'svelte';
     if (lang === 'liquid') return 'liquid';
-    return options.mapLanguage?.(lang) || lang;
+    return options.mapLanguage?.(lang, 'codemirror') || lang;
   };
 
   const themes: Partial<Record<CodemirrorTheme, Extension>> = {

src/livecodes/editor/codemirror/editor-languages.ts

@@ -1,97 +1,11 @@
 /* eslint-disable import/no-unresolved */
-
-// @ts-ignore
-import { LanguageSupport, StreamLanguage, type StreamParser } from '@codemirror/language';
-// @ts-ignore
-import { html } from '@codemirror/lang-html';
-// @ts-ignore
-import { css } from '@codemirror/lang-css';
 // @ts-ignore
-import { javascript } from '@codemirror/lang-javascript';
+import type { LanguageSupport } from '@codemirror/language';
 // @ts-ignore
 import { json } from '@codemirror/lang-json';
 
 import type { Language } from '../../models';
-import { codeMirrorBaseUrl } from '../../vendors';
-
-const legacy = (parser: StreamParser<unknown>) =>
-  new LanguageSupport(StreamLanguage.define(parser));
-
-const getPath = (mod: string) => codeMirrorBaseUrl + mod;
-
-const moduleUrls = {
-  vue: getPath('codemirror-lang-vue.js'),
-  svelte: getPath('codemirror-lang-svelte.js'),
-  liquid: getPath('codemirror-lang-liquid.js'),
-  json: getPath('codemirror-lang-json.js'),
-  markdown: getPath('codemirror-lang-markdown.js'),
-  python: getPath('codemirror-lang-python.js'),
-  php: getPath('codemirror-lang-php.js'),
-  java: getPath('codemirror-lang-java.js'),
-  clike: getPath('codemirror-lang-clike.js'),
-  mllike: getPath('codemirror-lang-mllike.js'),
-  cpp: getPath('codemirror-lang-cpp.js'),
-  sql: getPath('codemirror-lang-sql.js'),
-  wast: getPath('codemirror-lang-wast.js'),
-  scss: getPath('codemirror-lang-scss.js'),
-  minizinc: getPath('codemirror-lang-minizinc.js'),
-  prolog: getPath('codemirror-lang-prolog.js'),
-  coffeescript: getPath('codemirror-lang-coffeescript.js'),
-  livescript: getPath('codemirror-lang-livescript.js'),
-  ruby: getPath('codemirror-lang-ruby.js'),
-  go: getPath('codemirror-lang-go.js'),
-  perl: getPath('codemirror-lang-perl.js'),
-  lua: getPath('codemirror-lang-lua.js'),
-  r: getPath('codemirror-lang-r.js'),
-  julia: getPath('codemirror-lang-julia.js'),
-  scheme: getPath('codemirror-lang-scheme.js'),
-  clojure: getPath('codemirror-lang-clojure.js'),
-  tcl: getPath('codemirror-lang-tcl.js'),
-  less: getPath('codemirror-lang-less.js'),
-  stylus: getPath('codemirror-lang-stylus.js'),
-  rust: getPath('codemirror-lang-rust.js'),
-  swift: getPath('codemirror-lang-swift.js'),
-};
 
 export const editorLanguages: Partial<{ [key in Language]: () => Promise<LanguageSupport> }> = {
-  html: async () => html(),
-  css: async () => css(),
-  javascript: async () => javascript(),
-  typescript: async () => javascript({ typescript: true }),
-  jsx: async () => javascript({ jsx: true }),
-  tsx: async () => javascript({ jsx: true, typescript: true }),
   json: async () => json(),
-  vue: async () => (await import(moduleUrls.vue)).vue(),
-  svelte: async () => (await import(moduleUrls.svelte)).svelte(),
-  liquid: async () => (await import(moduleUrls.liquid)).liquid(),
-  markdown: async () => (await import(moduleUrls.markdown)).markdown(),
-  python: async () => (await import(moduleUrls.python)).python(),
-  php: async () => (await import(moduleUrls.php)).php(),
-  go: async () => (await import(moduleUrls.go)).go(),
-  java: async () => (await import(moduleUrls.java)).java(),
-  cpp: async () => (await import(moduleUrls.cpp)).cpp(),
-  sql: async () => (await import(moduleUrls.sql)).sql(),
-  wat: async () => (await import(moduleUrls.wast)).wast(),
-  scss: async () => (await import(moduleUrls.scss)).sass(),
-  sass: async () => (await import(moduleUrls.scss)).sass({ indented: true }),
-  minizinc: async () => (await import(moduleUrls.minizinc)).MiniZinc(),
-  prolog: async () => (await import(moduleUrls.prolog)).prolog(),
-  coffeescript: async () => legacy((await import(moduleUrls.coffeescript)).coffeeScript),
-  livescript: async () => legacy((await import(moduleUrls.livescript)).liveScript),
-  ruby: async () => legacy((await import(moduleUrls.ruby)).ruby),
-  perl: async () => legacy((await import(moduleUrls.perl)).perl),
-  lua: async () => legacy((await import(moduleUrls.lua)).lua),
-  r: async () => legacy((await import(moduleUrls.r)).r),
-  julia: async () => legacy((await import(moduleUrls.julia)).julia),
-  scheme: async () => legacy((await import(moduleUrls.scheme)).scheme),
-  clojure: async () => legacy((await import(moduleUrls.clojure)).clojure),
-  tcl: async () => legacy((await import(moduleUrls.tcl)).tcl),
-  less: async () => legacy((await import(moduleUrls.less)).less),
-  stylus: async () => legacy((await import(moduleUrls.stylus)).stylus),
-  csharp: async () => legacy((await import(moduleUrls.clike)).csharp),
-  ocaml: async () => legacy((await import(moduleUrls.mllike)).oCaml),
-  // fsharp: async () => legacy((await import(moduleUrls.mllike)).fSharp),
-  // @ts-ignore
-  rust: async () => legacy((await import(moduleUrls.rust)).rust),
-  swift: async () => legacy((await import(moduleUrls.swift)).swift),
 };

src/livecodes/editor/codemirror/utils.ts

@@ -0,0 +1,12 @@
+export const codemirrorLegacy = async (parser: any) => {
+  const { LanguageSupport, StreamLanguage } = await import(codemirrorImports.language);
+  return new LanguageSupport(StreamLanguage.define(parser));
+};
+
+export const codemirrorImports = {
+  html: '@codemirror/lang-html',
+  css: '@codemirror/lang-css',
+  javascript: '@codemirror/lang-javascript',
+  json: '@codemirror/lang-json',
+  language: '@codemirror/language',
+};