Fix(#7442): dynamic loading of codemirror language modes

packages/decap-cms-widget-code/scripts/process-languages.js

@@ -5,6 +5,7 @@ const uniq = require('lodash/uniq');
 
 const rawDataPath = '../data/languages-raw.yml';
 const outputPath = '../data/languages.json';
+const loaderPath = '../src/languageLoaders.js';
 
 async function fetchData() {
   const filePath = path.resolve(__dirname, rawDataPath);
@@ -17,6 +18,44 @@ function outputData(data) {
   return fs.writeJson(filePath, data);
 }
 
+function generateLoaders(transformedData) {
+  // Extract all unique modes
+  const modes = new Set();
+  transformedData.forEach(lang => {
+    if (lang.codemirror_mode) {
+      modes.add(lang.codemirror_mode);
+    }
+  });
+
+  // Generate loader functions for each mode
+  let fileContent = `// Generated file - DO NOT EDIT
+// This file contains dynamic loader functions for CodeMirror modes
+
+const loaders = {
+`;
+
+  // Create loader functions
+  Array.from(modes)
+    .sort()
+    .forEach(mode => {
+      fileContent += `  '${mode}': () => import('codemirror/mode/${mode}/${mode}.js'),
+`;
+    });
+
+  fileContent += `};
+
+// Get a loader for a specific mode
+export function getLanguageLoader(mode) {
+  return loaders[mode] || null;
+}
+
+export default loaders;
+`;
+
+  const filePath = path.resolve(__dirname, loaderPath);
+  return fs.writeFile(filePath, fileContent);
+}
+
 function transform(data) {
   return Object.entries(data).reduce((acc, [label, lang]) => {
     const { extensions = [], aliases = [], codemirror_mode, codemirror_mime_type } = lang;
@@ -39,7 +78,10 @@ function transform(data) {
 async function process() {
   const data = await fetchData();
   const transformedData = transform(data);
-  return outputData(transformedData);
+  await outputData(transformedData);
+  await generateLoaders(transformedData);
+
+  console.log('Generated language data and loaders');
 }
 
 process();

packages/decap-cms-widget-code/src/CodeControl.js

@@ -16,6 +16,7 @@ import materialTheme from 'codemirror/theme/material.css';
 import SettingsPane from './SettingsPane';
 import SettingsButton from './SettingsButton';
 import languageData from '../data/languages.json';
+import { getLanguageLoader } from './languageLoaders';
 
 // TODO: relocate as a utility function
 function getChangedProps(previous, next, keys) {
@@ -193,7 +194,10 @@ export default class CodeControl extends React.Component {
     if (changedProps.lang) {
       const { mode } = this.getLanguageByName(changedProps.lang) || {};
       if (mode) {
-        require(`codemirror/mode/${mode}/${mode}.js`);
+        const loader = getLanguageLoader(mode);
+        if (loader) {
+          await loader();
+        }
       }
     }
 

packages/decap-cms-widget-code/src/languageLoaders.js

@@ -0,0 +1,103 @@
+// Generated file - DO NOT EDIT
+// This file contains dynamic loader functions for CodeMirror modes
+
+const loaders = {
+  apl: () => import('codemirror/mode/apl/apl.js'),
+  asciiarmor: () => import('codemirror/mode/asciiarmor/asciiarmor.js'),
+  'asn.1': () => import('codemirror/mode/asn.1/asn.1.js'),
+  brainfuck: () => import('codemirror/mode/brainfuck/brainfuck.js'),
+  clike: () => import('codemirror/mode/clike/clike.js'),
+  clojure: () => import('codemirror/mode/clojure/clojure.js'),
+  cmake: () => import('codemirror/mode/cmake/cmake.js'),
+  cobol: () => import('codemirror/mode/cobol/cobol.js'),
+  coffeescript: () => import('codemirror/mode/coffeescript/coffeescript.js'),
+  commonlisp: () => import('codemirror/mode/commonlisp/commonlisp.js'),
+  crystal: () => import('codemirror/mode/crystal/crystal.js'),
+  css: () => import('codemirror/mode/css/css.js'),
+  d: () => import('codemirror/mode/d/d.js'),
+  dart: () => import('codemirror/mode/dart/dart.js'),
+  diff: () => import('codemirror/mode/diff/diff.js'),
+  django: () => import('codemirror/mode/django/django.js'),
+  dockerfile: () => import('codemirror/mode/dockerfile/dockerfile.js'),
+  dylan: () => import('codemirror/mode/dylan/dylan.js'),
+  ebnf: () => import('codemirror/mode/ebnf/ebnf.js'),
+  ecl: () => import('codemirror/mode/ecl/ecl.js'),
+  eiffel: () => import('codemirror/mode/eiffel/eiffel.js'),
+  elm: () => import('codemirror/mode/elm/elm.js'),
+  erlang: () => import('codemirror/mode/erlang/erlang.js'),
+  factor: () => import('codemirror/mode/factor/factor.js'),
+  forth: () => import('codemirror/mode/forth/forth.js'),
+  fortran: () => import('codemirror/mode/fortran/fortran.js'),
+  gfm: () => import('codemirror/mode/gfm/gfm.js'),
+  go: () => import('codemirror/mode/go/go.js'),
+  groovy: () => import('codemirror/mode/groovy/groovy.js'),
+  haml: () => import('codemirror/mode/haml/haml.js'),
+  haskell: () => import('codemirror/mode/haskell/haskell.js'),
+  'haskell-literate': () => import('codemirror/mode/haskell-literate/haskell-literate.js'),
+  haxe: () => import('codemirror/mode/haxe/haxe.js'),
+  htmlembedded: () => import('codemirror/mode/htmlembedded/htmlembedded.js'),
+  htmlmixed: () => import('codemirror/mode/htmlmixed/htmlmixed.js'),
+  http: () => import('codemirror/mode/http/http.js'),
+  idl: () => import('codemirror/mode/idl/idl.js'),
+  javascript: () => import('codemirror/mode/javascript/javascript.js'),
+  jsx: () => import('codemirror/mode/jsx/jsx.js'),
+  julia: () => import('codemirror/mode/julia/julia.js'),
+  livescript: () => import('codemirror/mode/livescript/livescript.js'),
+  lua: () => import('codemirror/mode/lua/lua.js'),
+  mathematica: () => import('codemirror/mode/mathematica/mathematica.js'),
+  mirc: () => import('codemirror/mode/mirc/mirc.js'),
+  mllike: () => import('codemirror/mode/mllike/mllike.js'),
+  modelica: () => import('codemirror/mode/modelica/modelica.js'),
+  mumps: () => import('codemirror/mode/mumps/mumps.js'),
+  nginx: () => import('codemirror/mode/nginx/nginx.js'),
+  nsis: () => import('codemirror/mode/nsis/nsis.js'),
+  octave: () => import('codemirror/mode/octave/octave.js'),
+  oz: () => import('codemirror/mode/oz/oz.js'),
+  pascal: () => import('codemirror/mode/pascal/pascal.js'),
+  perl: () => import('codemirror/mode/perl/perl.js'),
+  php: () => import('codemirror/mode/php/php.js'),
+  powershell: () => import('codemirror/mode/powershell/powershell.js'),
+  properties: () => import('codemirror/mode/properties/properties.js'),
+  protobuf: () => import('codemirror/mode/protobuf/protobuf.js'),
+  pug: () => import('codemirror/mode/pug/pug.js'),
+  puppet: () => import('codemirror/mode/puppet/puppet.js'),
+  python: () => import('codemirror/mode/python/python.js'),
+  r: () => import('codemirror/mode/r/r.js'),
+  rpm: () => import('codemirror/mode/rpm/rpm.js'),
+  rst: () => import('codemirror/mode/rst/rst.js'),
+  ruby: () => import('codemirror/mode/ruby/ruby.js'),
+  rust: () => import('codemirror/mode/rust/rust.js'),
+  sas: () => import('codemirror/mode/sas/sas.js'),
+  sass: () => import('codemirror/mode/sass/sass.js'),
+  scheme: () => import('codemirror/mode/scheme/scheme.js'),
+  shell: () => import('codemirror/mode/shell/shell.js'),
+  slim: () => import('codemirror/mode/slim/slim.js'),
+  smalltalk: () => import('codemirror/mode/smalltalk/smalltalk.js'),
+  smarty: () => import('codemirror/mode/smarty/smarty.js'),
+  soy: () => import('codemirror/mode/soy/soy.js'),
+  sparql: () => import('codemirror/mode/sparql/sparql.js'),
+  spreadsheet: () => import('codemirror/mode/spreadsheet/spreadsheet.js'),
+  sql: () => import('codemirror/mode/sql/sql.js'),
+  stex: () => import('codemirror/mode/stex/stex.js'),
+  swift: () => import('codemirror/mode/swift/swift.js'),
+  tcl: () => import('codemirror/mode/tcl/tcl.js'),
+  textile: () => import('codemirror/mode/textile/textile.js'),
+  toml: () => import('codemirror/mode/toml/toml.js'),
+  troff: () => import('codemirror/mode/troff/troff.js'),
+  turtle: () => import('codemirror/mode/turtle/turtle.js'),
+  twig: () => import('codemirror/mode/twig/twig.js'),
+  vb: () => import('codemirror/mode/vb/vb.js'),
+  verilog: () => import('codemirror/mode/verilog/verilog.js'),
+  vhdl: () => import('codemirror/mode/vhdl/vhdl.js'),
+  webidl: () => import('codemirror/mode/webidl/webidl.js'),
+  xml: () => import('codemirror/mode/xml/xml.js'),
+  xquery: () => import('codemirror/mode/xquery/xquery.js'),
+  yaml: () => import('codemirror/mode/yaml/yaml.js'),
+};
+
+// Get a loader for a specific mode
+export function getLanguageLoader(mode) {
+  return loaders[mode] || null;
+}
+
+export default loaders;