Problem
The LivePreview component, which is essential for interactive documentation and tutorials, had several limitations that hindered its ability to run modern JavaScript examples, particularly those using functional components and named imports.
No Named Import Support: The component could only parse default imports (e.g., import Foo from ...), failing on named imports (e.g., import { bar } from ...). This prevented the use of hooks and other modular utilities in live examples.
Fragile Class Detection: The mechanism for identifying the main component to render relied on a regular expression (classDeclarationRegex) that searched for the class ... syntax. This approach failed for components created with factory functions, such as defineComponent(), which do not use the class keyword directly.
Imprecise Component Validation: The check to ensure the identified class was a renderable component was either too broad (checking for Neo.core.Base, which could include data stores) or too narrow. This could lead to errors or prevent valid components from rendering.
Solution
To address these issues, the LivePreview.mjs component was significantly refactored:
Enhanced Import Parsing: The importRegex was updated to correctly parse both default and named import syntax. The logic in doRunSource() was adjusted to generate the correct variable declarations (const Foo = ... for default, and const {bar} = ... for named).
Robust Component Identification: The unreliable findLastClassName() method was replaced with findSetupClassName(). This new method uses a more robust regex (setupClassRegex) to find the variable assigned the result of Neo.setupClass(...). This is a far more reliable pattern for identifying the primary component, regardless of whether it was defined with class or a factory function.
Specific Component Type Check: The validation logic was improved to explicitly check if the resolved class is a prototype of either Neo.component.Base or Neo.functional.component.Base. This ensures that only renderable UI components are passed to the container, preventing errors with other base classes.
Problem
The
LivePreviewcomponent, which is essential for interactive documentation and tutorials, had several limitations that hindered its ability to run modern JavaScript examples, particularly those using functional components and named imports.No Named Import Support: The component could only parse default imports (e.g.,
import Foo from ...), failing on named imports (e.g.,import { bar } from ...). This prevented the use of hooks and other modular utilities in live examples.Fragile Class Detection: The mechanism for identifying the main component to render relied on a regular expression (
classDeclarationRegex) that searched for theclass ...syntax. This approach failed for components created with factory functions, such asdefineComponent(), which do not use theclasskeyword directly.Imprecise Component Validation: The check to ensure the identified class was a renderable component was either too broad (checking for
Neo.core.Base, which could include data stores) or too narrow. This could lead to errors or prevent valid components from rendering.Solution
To address these issues, the
LivePreview.mjscomponent was significantly refactored:Enhanced Import Parsing: The
importRegexwas updated to correctly parse both default and named import syntax. The logic indoRunSource()was adjusted to generate the correct variable declarations (const Foo = ...for default, andconst {bar} = ...for named).Robust Component Identification: The unreliable
findLastClassName()method was replaced withfindSetupClassName(). This new method uses a more robust regex (setupClassRegex) to find the variable assigned the result ofNeo.setupClass(...). This is a far more reliable pattern for identifying the primary component, regardless of whether it was defined withclassor a factory function.Specific Component Type Check: The validation logic was improved to explicitly check if the resolved class is a prototype of either
Neo.component.BaseorNeo.functional.component.Base. This ensures that only renderable UI components are passed to the container, preventing errors with other base classes.