neo.mjs 10.0.0-beta.5 → 10.0.0

package/buildScripts/addReactiveTags.mjs

@@ -0,0 +1,191 @@
+#!/usr/bin/env node
+
+/**
+ * @file addReactiveTags.mjs
+ * @description This script automates the process of adding the `@reactive` JSDoc tag
+ *              to reactive configuration properties in source files.
+ *              It identifies reactive configs (considering inheritance) that are missing
+ *              the tag and inserts it into their JSDoc comment blocks.
+ *
+ *              This is an **automation tool** used to fix documentation.
+ *
+ * @usage `npm run add-reactive-tags`
+ * @requires `docs/output/all.json` to be up-to-date (run `npm run generate-docs-json` first).
+ * @warning After running this script, you **must** re-run your documentation build script
+ *          (`npm run generate-docs-json`) to update `docs/output/all.json`.
+ * @author Gemini
+ */
+
+import fs from 'fs-extra';
+import path from 'path';
+
+const cwd = process.cwd();
+
+const ALL_JSON_PATH = path.join(cwd, 'docs/output/all.json');
+const MY_APPS_JSON_PATH_CWD = path.join(cwd, 'buildScripts/myApps.json');
+const MY_APPS_JSON_PATH_WEBPACK = path.join(cwd, 'buildScripts/webpack/json/myApps.json');
+const MY_APPS_JSON_PATH_TEMPLATE = path.join(cwd, 'buildScripts/webpack/json/myApps.template.json');
+const PROGRAM_NAME = 'add-reactive-tags';
+
+async function addReactiveTags() {
+    const startDate = new Date();
+    console.log(`
+Starting ${PROGRAM_NAME}...`);
+
+    try {
+        const data = JSON.parse(fs.readFileSync(ALL_JSON_PATH, 'utf-8'));
+
+        let appJson;
+        if (fs.existsSync(MY_APPS_JSON_PATH_CWD)) {
+            appJson = JSON.parse(fs.readFileSync(MY_APPS_JSON_PATH_CWD, 'utf-8'));
+        } else if (fs.existsSync(MY_APPS_JSON_PATH_WEBPACK)) {
+            appJson = JSON.parse(fs.readFileSync(MY_APPS_JSON_PATH_WEBPACK, 'utf-8'));
+        } else {
+            appJson = JSON.parse(fs.readFileSync(MY_APPS_JSON_PATH_TEMPLATE, 'utf-8'));
+        }
+        const myAppsData = appJson;
+
+        const appNames = myAppsData.apps.filter(appName => appName !== 'Docs');
+        const validClassPrefixes = ['Neo.', ...appNames.map(name => `${name}.`)];
+
+        const classMap = new Map();
+        const memberMap = new Map();
+
+        for (const entry of data) {
+            if (entry.kind === 'class' && entry.neoClassName) {
+                classMap.set(entry.neoClassName, entry);
+            } else if (entry.kind === 'member' && entry.neoClassName) {
+                if (!memberMap.has(entry.neoClassName)) {
+                    memberMap.set(entry.neoClassName, []);
+                }
+                memberMap.get(entry.neoClassName).push(entry);
+            }
+        }
+
+        const reactiveConfigsByClass = new Map();
+
+        function getAllReactiveConfigs(className) {
+            if (reactiveConfigsByClass.has(className)) {
+                return reactiveConfigsByClass.get(className);
+            }
+
+            const currentClassReactiveConfigs = new Set();
+            if (memberMap.has(className)) {
+                for (const member of memberMap.get(className)) {
+                    if (member.kind === 'member' && member.name.endsWith('_')) {
+                        currentClassReactiveConfigs.add(member.name.slice(0, -1));
+                    }
+                }
+            }
+
+            const classEntry = classMap.get(className);
+            if (classEntry && classEntry.augments) {
+                for (const parentClassName of classEntry.augments) {
+                    const isNeoOrAppClass = validClassPrefixes.some(prefix => parentClassName.startsWith(prefix));
+                    if (isNeoOrAppClass) {
+                        const inheritedReactive = getAllReactiveConfigs(parentClassName);
+                        for (const configName of inheritedReactive) {
+                            currentClassReactiveConfigs.add(configName);
+                        }
+                    }
+                }
+            }
+
+            reactiveConfigsByClass.set(className, currentClassReactiveConfigs);
+            return currentClassReactiveConfigs;
+        }
+
+        for (const className of classMap.keys()) {
+            getAllReactiveConfigs(className);
+        }
+
+        const filesToModify = new Map(); // filePath -> Array<{configName, jsdocStartLine, jsdocEndLine}>;
+
+        for (const [className, reactiveConfigNames] of reactiveConfigsByClass.entries()) {
+            if (memberMap.has(className)) {
+                for (const member of memberMap.get(className)) {
+                    const baseName = member.name.endsWith('_') ? member.name.slice(0, -1) : member.name;
+
+                    if (reactiveConfigNames.has(baseName)) {
+                        if (member.defaultvalue !== undefined || member.name.endsWith('_')) {
+                            if (!member.comment || !member.comment.includes('@reactive')) {
+                                const filePath = path.join(member.meta.path, member.meta.filename);
+                                if (!filesToModify.has(filePath)) {
+                                    filesToModify.set(filePath, []);
+                                }
+                                filesToModify.get(filePath).push({
+                                    configName: member.name,
+                                    jsdocStartLine: member.meta.lineno - 1, // JSDoc starts one line before the member definition
+                                    jsdocEndLine: member.meta.lineno - 1 + member.comment.split('\n').length // Approximate end line
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        let modifiedCount = 0;
+        for (const [filePath, configs] of filesToModify.entries()) {
+            let fileContent = fs.readFileSync(filePath, 'utf-8');
+            let lines = fileContent.split('\n');
+
+            // Sort configs by line number in descending order to avoid issues with line shifts
+            configs.sort((a, b) => b.jsdocStartLine - a.jsdocStartLine);
+
+            for (const config of configs) {
+                // Find the start of the JSDoc block (line with '/**')
+                let jsdocStartLine = -1;
+                for (let i = config.jsdocStartLine; i >= 0; i--) { // Search upwards from member definition
+                    if (lines[i].includes('/**')) {
+                        jsdocStartLine = i;
+                        break;
+                    }
+                }
+
+                // Find the actual end of the JSDoc block (line with '*/')
+                let actualJsdocEndLine = -1;
+                if (jsdocStartLine !== -1) {
+                    for (let i = jsdocStartLine; i < lines.length; i++) {
+                        if (lines[i].includes('*/')) {
+                            actualJsdocEndLine = i;
+                            break;
+                        }
+                    }
+                }
+
+                if (actualJsdocEndLine !== -1) {
+                    // Get the indentation (leading whitespace and the asterisk) from the '*/' line.
+                    // Example: "     */" -> "     *"
+                    const indentationMatch = lines[actualJsdocEndLine].match(/^(\s*\*)/);
+                    const indentation = indentationMatch ? indentationMatch[1] : ' *';
+
+                    // Insert the @reactive tag on the line *before* the '*/'
+                    lines.splice(actualJsdocEndLine, 0, `${indentation} @reactive`);
+                    modifiedCount++;
+                } else {
+                    console.warn(`Could not find JSDoc block for config ${config.configName} in ${filePath}`);
+                }
+            }
+            fs.writeFileSync(filePath, lines.join('\n'));
+        }
+
+        if (modifiedCount > 0) {
+            console.log(`\nSuccessfully added @reactive tag to ${modifiedCount} configs.`);
+            console.log("Please run your documentation build script again to update all.json.");
+            process.exit(0);
+        } else {
+            console.log("\nNo missing @reactive tags found. All reactive configs are already tagged. Well done!");
+            process.exit(0);
+        }
+
+    } catch (error) {
+        console.error(`\nError during ${PROGRAM_NAME}:`, error);
+        process.exit(1);
+    } finally {
+        const processTime = (new Date() - startDate) / 1000;
+        console.log(`Total time for ${PROGRAM_NAME}: ${processTime.toFixed(2)}s`);
+    }
+}
+
+addReactiveTags();

package/buildScripts/checkReactiveTags.mjs

@@ -0,0 +1,160 @@
+#!/usr/bin/env node
+
+/**
+ * @file checkReactiveTags.mjs
+ * @description This script identifies and reports reactive configuration properties
+ *              that are missing the `@reactive` JSDoc tag.
+ *              It builds a class inheritance graph and determines reactivity based
+ *              on direct definition (trailing underscore) or inheritance from a parent class.
+ *
+ *              This is a **diagnostic tool** used to verify documentation completeness.
+ *
+ * @usage `npm run check-reactive-tags`
+ * @requires `docs/output/all.json` to be up-to-date (run `npm run generate-docs-json` first).
+ * @author Gemini
+ */
+
+import fs from 'fs-extra';
+import path from 'path';
+
+const cwd = process.cwd();
+
+const ALL_JSON_PATH = path.join(cwd, 'docs/output/all.json');
+const MY_APPS_JSON_PATH = path.join(cwd, 'buildScripts/webpack/json/myApps.json');
+const PROGRAM_NAME = 'check-reactive-tags';
+
+const MY_APPS_JSON_PATH_CWD = path.join(cwd, 'buildScripts/myApps.json');
+const MY_APPS_JSON_PATH_WEBPACK = path.join(cwd, 'buildScripts/webpack/json/myApps.json');
+const MY_APPS_JSON_PATH_TEMPLATE = path.join(cwd, 'buildScripts/webpack/json/myApps.template.json');
+
+async function checkReactiveTags() {
+    const startDate = new Date();
+    console.log(`
+Starting ${PROGRAM_NAME}...`);
+
+    try {
+        const data = JSON.parse(fs.readFileSync(ALL_JSON_PATH, 'utf-8'));
+
+        let appJson;
+
+        if (fs.existsSync(MY_APPS_JSON_PATH_CWD)) {
+            appJson = JSON.parse(fs.readFileSync(MY_APPS_JSON_PATH_CWD, 'utf-8'));
+        } else if (fs.existsSync(MY_APPS_JSON_PATH_WEBPACK)) {
+            appJson = JSON.parse(fs.readFileSync(MY_APPS_JSON_PATH_WEBPACK, 'utf-8'));
+        } else {
+            appJson = JSON.parse(fs.readFileSync(MY_APPS_JSON_PATH_TEMPLATE, 'utf-8'));
+        }
+
+        const myAppsData = appJson;
+
+
+        const appNames = myAppsData.apps.filter(appName => appName !== 'Docs'); // Docs is handled separately or implicitly Neo.
+        const validClassPrefixes = ['Neo.', ...appNames.map(name => `${name}.`)];
+
+        const classMap = new Map(); // neoClassName -> class_entry
+        const memberMap = new Map(); // neoClassName -> [member_entries]
+
+        for (const entry of data) {
+            if (entry.kind === 'class' && entry.neoClassName) {
+                classMap.set(entry.neoClassName, entry);
+            } else if (entry.kind === 'member' && entry.neoClassName) {
+                if (!memberMap.has(entry.neoClassName)) {
+                    memberMap.set(entry.neoClassName, []);
+                }
+                memberMap.get(entry.neoClassName).push(entry);
+            }
+        }
+
+        const reactiveConfigsByClass = new Map(); // neoClassName -> Set<configNameWithoutUnderscore>
+
+        // Recursive function to get all reactive configs for a class, including inherited ones
+        function getAllReactiveConfigs(className) {
+            if (reactiveConfigsByClass.has(className)) {
+                return reactiveConfigsByClass.get(className);
+            }
+
+            const currentClassReactiveConfigs = new Set();
+
+            // Add directly defined reactive configs (ending with '_')
+            if (memberMap.has(className)) {
+                for (const member of memberMap.get(className)) {
+                    if (member.kind === 'member' && member.name.endsWith('_')) {
+                        currentClassReactiveConfigs.add(member.name.slice(0, -1)); // Add without underscore
+                    }
+                }
+            }
+
+            // Add inherited reactive configs
+            const classEntry = classMap.get(className);
+            if (classEntry && classEntry.augments) {
+                for (const parentClassName of classEntry.augments) {
+                    // Only consider Neo.mjs or app-specific classes for inheritance
+                    const isNeoOrAppClass = validClassPrefixes.some(prefix => parentClassName.startsWith(prefix));
+
+                    if (isNeoOrAppClass) {
+                        const inheritedReactive = getAllReactiveConfigs(parentClassName);
+                        for (const configName of inheritedReactive) {
+                            currentClassReactiveConfigs.add(configName);
+                        }
+                    }
+                }
+            }
+
+            reactiveConfigsByClass.set(className, currentClassReactiveConfigs);
+            return currentClassReactiveConfigs;
+        }
+
+        // Populate reactiveConfigsByClass for all classes
+        for (const className of classMap.keys()) {
+            getAllReactiveConfigs(className);
+        }
+
+        const missingTags = [];
+
+        // Check for missing @reactive tags
+        for (const [className, reactiveConfigNames] of reactiveConfigsByClass.entries()) {
+            if (memberMap.has(className)) {
+                for (const member of memberMap.get(className)) {
+                    const baseName = member.name.endsWith('_') ? member.name.slice(0, -1) : member.name;
+
+                    // Check if this member is a reactive config (either directly or inherited)
+                    if (reactiveConfigNames.has(baseName)) {
+                        // Heuristic: if it has a defaultvalue, it's likely a config.
+                        // Or if it's directly defined with an underscore.
+                        if (member.defaultvalue !== undefined || member.name.endsWith('_')) {
+                            if (!member.comment || !member.comment.includes('@reactive')) {
+                                missingTags.push({
+                                    filePath: path.join(member.meta.path, member.meta.filename),
+                                    className: className,
+                                    configName: member.name,
+                                    isDirectlyDefinedReactive: member.name.endsWith('_')
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        if (missingTags.length > 0) {
+            console.log(`\nThe following ${missingTags.length} reactive configs are missing the @reactive JSDoc tag:`);
+            for (const item of missingTags) {
+                console.log(`- Class: ${item.className}, Config: ${item.configName} (Directly defined reactive: ${item.isDirectlyDefinedReactive})`);
+                console.log(`  File: ${item.filePath}`);
+            }
+            process.exit(1); // Exit with error code if issues are found
+        } else {
+            console.log("\nAll reactive configs have the @reactive JSDoc tag. Well done!");
+            process.exit(0);
+        }
+
+    } catch (error) {
+        console.error(`\nError during ${PROGRAM_NAME}:`, error);
+        process.exit(1);
+    } finally {
+        const processTime = (new Date() - startDate) / 1000;
+        console.log(`Total time for ${PROGRAM_NAME}: ${processTime.toFixed(2)}s`);
+    }
+}
+
+checkReactiveTags();

package/docs/app/store/Api.mjs

@@ -18,6 +18,7 @@ class Api extends Store {
         keyProperty: 'id',
         /**
          * @member {Neo.data.Model} model=ApiModel
+         * @reactive
          */
         model: ApiModel,
         /**

package/docs/app/store/Examples.mjs

@@ -18,6 +18,7 @@ class Examples extends Store {
         keyProperty: 'id',
         /**
          * @member {Neo.data.Model} model=Example
+         * @reactive
          */
         model: Example,
         /**

package/docs/app/view/ApiTreeList.mjs

@@ -20,6 +20,7 @@ class ApiTreeList extends TreeList {
         /**
          * @member {Neo.data.Store|null} store=ApiStore
          * @protected
+         * @reactive
          */
         store: ApiStore
     }

package/docs/app/view/ContentTabContainer.mjs

@@ -35,6 +35,7 @@ class ContentTabContainer extends Container {
         },
         /**
          * @member {Array} items=[//...]]
+         * @reactive
          */
         items: [{
             ntype: 'component',
@@ -48,6 +49,7 @@ class ContentTabContainer extends Container {
         }],
         /**
          * @member {Boolean} sortable=true
+         * @reactive
          */
         sortable: true
     }

package/docs/app/view/ExamplesTreeList.mjs

@@ -19,11 +19,13 @@ class ExamplesTreeList extends TreeList {
         ntype: 'examples-treelist',
         /**
          * @member {String[]} cls=['docs-examples-treelist']
+         * @reactive
          */
         cls: ['docs-examples-treelist'],
         /**
          * @member {Neo.data.Store|null} store=ExamplesStore
          * @protected
+         * @reactive
          */
         store: ExamplesStore
     }

package/docs/app/view/HeaderContainer.mjs

@@ -24,14 +24,17 @@ class HeaderContainer extends Container {
         baseCls: ['neo-docs-header-container'],
         /**
          * @member {Number} height=55
+         * @reactive
          */
         height: 55,
         /**
          * @member {Object} layout={ntype: 'hbox', align: 'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {Array} items=[//...]
+         * @reactive
          */
         items: [{
             module         : SearchField,

package/docs/app/view/MainContainer.mjs

@@ -32,23 +32,28 @@ class MainContainer extends Viewport {
         baseCls: ['neo-docs-maincontainer', 'neo-viewport'],
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**
          * @member {Object} layout={ntype: 'vbox', align: 'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**
          * @member {Neo.collection.Base|null} store_=null
+         * @reactive
          */
         store_: null,
         /**
          * Important for the Portal App, until the new theme fully supports it
          * @member {String} theme='neo-theme-light'
+         * @reactive
          */
         theme: 'neo-theme-light',
         /**
          * @member {Array} items=[//...]
+         * @reactive
          */
         items: [HeaderContainer, {
             ntype : 'container',

package/docs/app/view/classdetails/HeaderComponent.mjs

@@ -23,6 +23,7 @@ class HeaderComponent extends Component {
         baseCls: ['neo-docs-classdetails-headercomponent'],
         /**
          * @member {Object|null} record_=null
+         * @reactive
          */
         record_: null,
         /**

package/docs/app/view/classdetails/MainContainer.mjs

@@ -29,10 +29,12 @@ class MainContainer extends Container {
         baseCls: ['neo-docs-classdetails-maincontainer', 'neo-container'],
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**
          * @member {Object} layout={ntype: 'vbox', align: 'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**
@@ -41,6 +43,7 @@ class MainContainer extends Container {
         structureData: null,
         /**
          * @member {Array} items=[//...]]
+         * @reactive
          */
         items: [{
             ntype    : 'container',

package/docs/app/view/classdetails/MembersList.mjs

@@ -24,22 +24,27 @@ class MembersList extends Base {
         /**
          * @member {String} filterMembersQuery_=''
          * @protected
+         * @reactive
          */
         filterMembersQuery_: '',
         /**
          * @member {Boolean} showPrivateMembers_=true
+         * @reactive
          */
         showPrivateMembers_: true,
         /**
          * @member {Boolean} showProtectedMembers_=true
+         * @reactive
          */
         showProtectedMembers_: true,
         /**
          * @member {Boolean} showStaticMembers_=true
+         * @reactive
          */
         showStaticMembers_: true,
         /**
          * @member {Neo.collection.Base} store=null
+         * @reactive
          */
         store: null,
         /**

package/docs/app/view/classdetails/SourceViewComponent.mjs

@@ -19,11 +19,13 @@ class SourceViewComponent extends Component {
         /**
          * @member {Boolean} isHighlighted_=false
          * @protected
+         * @reactive
          */
         isHighlighted_: false,
         /**
          * @member {Number|null} line_=null
          * @protected
+         * @reactive
          */
         line_: null,
         /**

package/examples/ConfigurationViewport.mjs

@@ -63,15 +63,19 @@ class ConfigurationViewport extends Viewport {
         exampleComponentFlex: 2,
         /**
          * @member {Object} layout={ntype:'hbox', align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'}
     }
 
     /**
-     * Override this method to create the components to show inside the configuration container
-     * @returns {Object[]|null}
+     * Override this method to create the components to show inside the configuration container.
+     * The method can optionally be async => Use this for functional components,
+     * where you want to subscribe controls to "classic" components inside functional components.
+     * @see:Neo.examples.functional.hostComponent.MainContainer
+     * @returns {Promise<Object[]>|Object[]|null}
      */
-    createConfigurationComponents() {
+    async createConfigurationComponents() {
         return null
     }
 
@@ -101,10 +105,10 @@ class ConfigurationViewport extends Viewport {
     /**
      *
      */
-    onConstructed() {
+    async onConstructed() {
         let me    = this,
             style = me.exampleContainerConfig?.style,
-            theme;
+            exampleComponentType, theme;
 
         if (style) {
             delete me.exampleContainerConfig.style
@@ -112,13 +116,15 @@ class ConfigurationViewport extends Viewport {
 
         me.exampleComponent = me.createExampleComponent();
 
-        if (Neo.isObject(me.exampleComponent)) {
+        exampleComponentType = Neo.typeOf(me.exampleComponent);
+
+        if (exampleComponentType === 'NeoClass' || exampleComponentType === 'Object') {
             me.exampleComponent = Neo.create(me.exampleComponent)
         }
 
-        me.configurationComponents = me.createConfigurationComponents() || [];
+        me.configurationComponents = await me.createConfigurationComponents() || [];
 
-        theme = me.exampleComponent.getTheme();
+        theme = me.exampleComponent.getTheme?.() || 'neo-theme-light';
 
         me.items = [{
             module: Container,

package/examples/calendar/weekview/MainContainer.mjs

@@ -16,6 +16,7 @@ class MainContainer extends Viewport {
         /**
          * Value for the container.Base layout_ config
          * @member {Object} layout={ntype: 'fit'}
+         * @reactive
          */
         layout: {ntype: 'fit'},
         /**
@@ -25,6 +26,7 @@ class MainContainer extends Viewport {
          * 1. Extend Neo.calendar.view.week.Component and add the configs and view model there.
          * 2. Just drop them into a parent view.
          * @member {Neo.calendar.view.MainContainerStateProvider} stateProvider=MainContainerStateProvider
+         * @reactive
          */
         stateProvider: {
             module: MainContainerStateProvider,
@@ -36,6 +38,7 @@ class MainContainer extends Viewport {
          * Config options for Neo.calendar.store.Calendars.
          * The calendar view model relies on it.
          * @member {Object} calendarStoreConfig_
+         * @reactive
          */
         calendarStoreConfig_: {
             autoLoad: true,
@@ -45,6 +48,7 @@ class MainContainer extends Viewport {
          * Config options for Neo.calendar.store.Events.
          * The calendar view model relies on it.
          * @member {Object} eventStoreConfig_
+         * @reactive
          */
         eventStoreConfig_: {
             autoLoad: true,

package/examples/component/coronaGallery/CountryGallery.mjs

@@ -22,6 +22,7 @@ class CountryGallery extends Gallery {
         className: 'Neo.examples.component.coronaGallery.CountryGallery',
         /**
          * @member {String[]} cls=['neo-country-gallery']
+         * @reactive
          */
         cls: ['neo-country-gallery'],
         /**
@@ -46,6 +47,7 @@ class CountryGallery extends Gallery {
         selectOnMount: false,
         /**
          * @member {Neo.data.Store} store=CountryStore
+         * @reactive
          */
         store: CountryStore
     }

package/examples/component/coronaGallery/CountryStore.mjs

@@ -18,6 +18,7 @@ class CountryStore extends Store {
         keyProperty: 'country',
         /**
          * @member {Neo.data.Model} model=CountryModel
+         * @reactive
          */
         model: CountryModel
     }

package/examples/component/coronaGallery/Viewport.mjs

@@ -21,6 +21,7 @@ class Viewport extends BaseViewport {
         baseCls: ['neo-gallery-viewport', 'neo-viewport'],
         /**
          * @member {Neo.controller.Component} controller=ViewportController
+         * @reactive
          */
         controller: ViewportController,
         /**
@@ -33,10 +34,12 @@ class Viewport extends BaseViewport {
         galleryConfig: null,
         /**
          * @member {Object|null} layout={ntype: 'hbox', align: 'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {Boolean} showGitHubStarButton_=true
+         * @reactive
          */
         showGitHubStarButton_: true,
         /**

package/examples/component/coronaGallery/ViewportController.mjs

@@ -14,6 +14,7 @@ class ViewportController extends Controller {
         /**
          * @member {Neo.component.Gallery|null} gallery_=null
          * @protected
+         * @reactive
          */
         gallery_: null
     }