Enhance LivePreview for Modern JavaScript and Functional Components #7069

Author: tobiu

src/code/LivePreview.mjs

@@ -3,10 +3,10 @@ import MonacoEditor from '../component/wrapper/MonacoEditor.mjs'
 import TabContainer from '../tab/Container.mjs';
 
 const
-    classDeclarationRegex = /class\s+([a-zA-Z$_][a-zA-Z0-9$_]*)\s*(?:extends\s+[a-zA-Z$_][a-zA-Z0-9$_]*)?\s*{[\s\S]*?}/g,
-    classNameRegex        = /className\s*:\s*['"]([^'"]+)['"]/g,
-    exportRegex           = /export\s+(?:default\s+)?(?:const|let|var|class|function|async\s+function|generator\s+function|async\s+generator\s+function|(\{[\s\S]*?\}))/g,
-    importRegex           = /import\s+([\w-]+)\s+from\s+['"]([^'"]+)['"]/;
+    classNameRegex  = /className\s*:\s*['\"]([^'\"]+)['\"]/g,
+    exportRegex     = /export\s+(?:default\s+)?(?:const|let|var|class|function|async\s+function|generator\s+function|async\s+generator\s+function|(\{[\s\S]*?\}))/g,
+    importRegex     = /import\s+(?:([\w-]+)|\{([^}]+)\})\s+from\s+['\"]([^'\"]+)['\"]/,
+    setupClassRegex = /(\w+)\s*=\s*Neo\.setupClass/g;
 
 /**
  * @class Neo.code.LivePreview
@@ -229,7 +229,7 @@ class LivePreview extends Container {
             {environment}     = Neo.config,
             container         = me.getPreviewContainer(),
             source            = me.editorValue || me.value,
-            className         = me.findLastClassName(source),
+            className         = me.findSetupClassName(source),
             cleanLines        = [],
             moduleNameAndPath = [],
             params            = [],
@@ -240,8 +240,9 @@ class LivePreview extends Container {
             let importMatch = line.match(importRegex);
 
             if (importMatch) {
-                let moduleName = importMatch[1],
-                    path       = importMatch[2],
+                let defaultImport = importMatch[1],
+                    namedImports  = importMatch[2]?.split(',').map(name => name.trim()),
+                    path          = importMatch[3],
                     index;
 
                 // We want the non-minified version for code which can not get bundled.
@@ -266,7 +267,7 @@ class LivePreview extends Container {
                     }
                 }
 
-                moduleNameAndPath.push({moduleName, path})
+                moduleNameAndPath.push({defaultImport, namedImports, path})
             } else if (line.match(exportRegex)) {
                 // Skip export statements
             } else {
@@ -289,9 +290,15 @@ class LivePreview extends Container {
         //   });
         // Making the promise part of the eval seems weird, but it made it easier to
         // set up the import vars.
-        promises = moduleNameAndPath.map(item => {
-            params.push(`${item.moduleName}Module`);
-            vars.push(`    const ${item.moduleName} = ${item.moduleName}Module.default;`);
+        promises = moduleNameAndPath.map((item, i) => {
+            let moduleAlias = `Module${i}`;
+            params.push(moduleAlias);
+            if (item.defaultImport) {
+                vars.push(`    const ${item.defaultImport} = ${moduleAlias}.default;`);
+            }
+            if (item.namedImports) {
+                vars.push(`    const {${item.namedImports.join(', ')}} = ${moduleAlias};`);
+            }
             return `import('${item.path}')`
         });
 
@@ -302,7 +309,10 @@ class LivePreview extends Container {
             `${vars.join('\n')}`,
             `    ${cleanLines.join('\n')}`,
             '',
-            `    if (${className} && Neo.component.Base.isPrototypeOf(${className})) {`,
+            `    if (${className} && (`,
+            `        Neo.component.Base.isPrototypeOf(${className}) ||`,
+            `        Neo.functional.component.Base.isPrototypeOf(${className})`,
+            `    )) {`,
             `        container.add({module:${className}})`,
             '    }',
             '})',
@@ -352,11 +362,11 @@ class LivePreview extends Container {
      * @param {String} sourceCode
      * @returns {String|null}
      */
-    findLastClassName(sourceCode) {
+    findSetupClassName(sourceCode) {
         let lastClassName = null,
             match;
 
-        while ((match = classDeclarationRegex.exec(sourceCode)) !== null) {
+        while ((match = setupClassRegex.exec(sourceCode)) !== null) {
             // Update the last class name found
             lastClassName = match[1]
         }