neo.mjs 10.0.0-beta.2 → 10.0.0-beta.4

package/.github/RELEASE_NOTES/v10.0.0-beta.4.md

@@ -0,0 +1,41 @@
+## Neo.mjs v10.0.0-beta.4 Release Notes
+
+This beta release introduces a powerful, opt-in **Reactive Config System**, a foundational architectural enhancement that enables fine-grained, cross-instance state management and significantly improves the developer experience for building complex, interactive applications.
+
+### Core Framework & Features
+
+The centerpiece of this release is the new reactive config system, internally named "Config Atoms". This system is fully opt-in and backward compatible, ensuring that existing applications continue to work without any changes.
+
+*   **New Reactive Config System ("Config Atoms")**:
+    *   **Opt-in Reactivity**: By adding a trailing underscore (`_`) to a config property in its `static config` block (e.g., `myValue_`), the property becomes "reactive." It is automatically wrapped in a `Neo.core.Config` instance, which acts as an observable container for its value.
+    *   **Cross-Instance State Sharing**: The new system exposes a `subscribe()` method on each reactive config, allowing components to listen for changes to a config on any other component instance. This enables a clean, decoupled, and highly efficient way to implement cross-component state synchronization.
+        ```javascript
+        // In ComponentA
+        const componentB = Neo.get('b');
+
+        // Subscribe to changes in componentB's 'items' config
+        this.cleanup = componentB.getConfig('items').subscribe((newValue, oldValue) => {
+            this.someOtherProperty = newValue; // Reactively update
+        });
+
+        // In ComponentA's destroy() method:
+        this.cleanup?.(); // Simple, clean, and prevents memory leaks.
+        ```
+    *   **Fine-Grained Control (Future Foundation)**: While not fully implemented in this beta, the groundwork is laid for using config descriptors to define custom `mergeStrategy` and `isEqual` functions, which will provide even more control over config behavior in a future release.
+    *   **Transactional Consistency**: The new system fully integrates with Neo.mjs's existing transactional update mechanism (`set()`), ensuring that `afterSet` hooks always have a consistent view of all pending config changes within a single operation.
+
+### Developer Experience
+
+*   **Simplified State Management**: The `subscribe()` API drastically simplifies the logic required for components to react to state changes in other parts of the application, reducing boilerplate and the need for complex event chains.
+*   **Improved Debugging**: The observable nature of reactive configs makes it easier to trace how and when state changes occur throughout your application.
+
+---
+
+This release marks a significant step forward in the evolution of the Neo.mjs architecture. The new reactive config system provides a robust foundation for building the next generation of highly interactive and state-driven web applications.
+
+### Call To Action
+
+We are incredibly excited for you to start experimenting with this powerful new feature!
+
+*   **Try Reactive Configs**: Start by making a config reactive by adding a `_` to its name in the `static config` block and explore the new possibilities with `getConfig().subscribe()`.
+*   **Share Your Feedback**: This is a foundational change, and your feedback is more critical than ever. Please share your experiences, report any issues, or suggest improvements via [GitHub Issues](https://github.com/neomjs/neo/issues) or our [Slack Channel](https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA).

package/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='10.0.0-beta.2'
+         * @member {String} version='10.0.0-beta.4'
          */
-        version: '10.0.0-beta.2'
+        version: '10.0.0-beta.4'
     }
 
     /**

package/apps/form/view/FormPageContainer.mjs

@@ -26,10 +26,9 @@ class FormPageContainer extends FormContainer {
          */
         style: {overflow: 'auto'},
         /**
-         * @member {Object} _vdom
+         * @member {String} tag='div'
          */
-        vdom:
-        {cn: []} // using a div instead of a form tag
+        tag: 'div' // using a div instead of a form tag
     }
 }
 

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-06-30",
+      "datePublished": "2025-07-04",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/ViewportController.mjs

@@ -50,7 +50,7 @@ class ViewportController extends Controller {
             '/examples/{itemId}': 'onExamplesRoute',
             '/home'             : 'onHomeRoute',
             '/learn'            : 'onLearnRoute',
-            '/learn/{itemId}'   : 'onLearnRoute',
+            '/learn/{*itemId}'  : 'onLearnRoute',
             '/services'         : 'onServicesRoute'
         },
         /**

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                text  : 'v10.0.0-beta.2'
+                text  : 'v10.0.0-beta.4'
             }]
         }],
         /**

package/apps/portal/view/learn/ContentComponent.mjs

@@ -3,11 +3,12 @@ import LivePreview from '../../../../src/code/LivePreview.mjs';
 import {marked}    from '../../../../node_modules/marked/lib/marked.esm.js';
 
 const
-    labCloseRegex        = /<!--\s*\/lab\s*-->/g,
-    labOpenRegex         = /<!--\s*lab\s*-->/g,
-    regexLivePreview     = /```(javascript|html|css|json)\s+live-preview\s*\n([\s\S]*?)\n\s*```/g,
-    regexNeoComponent    = /```json\s+neo-component\s*\n([\s\S]*?)\n\s*```/g,
-    regexReadonly        = /```(javascript|html|css|json)\s+readonly\s*\n([\s\S]*?)\n\s*```/g;
+    regexInlineCode   = /`([^`]+)`/g,
+    regexLabClose     = /<!--\s*\/lab\s*-->/g,
+    regexLabOpen      = /<!--\s*lab\s*-->/g,
+    regexLivePreview  = /```(javascript|html|css|json)\s+live-preview\s*\n([\s\S]*?)\n\s*```/g,
+    regexNeoComponent = /```json\s+neo-component\s*\n([\s\S]*?)\n\s*```/g,
+    regexReadonly     = /```(javascript|html|css|json)\s+readonly\s*\n([\s\S]*?)\n\s*```/g;
 
 /**
  * @class Portal.view.learn.ContentComponent
@@ -233,10 +234,10 @@ class ContentComponent extends Component {
      */
     insertLabDivs(inputString) {
         // Replace <!-- lab --> with <div class="lab">
-        inputString = inputString.replace(labOpenRegex, '<div class="lab">');
+        inputString = inputString.replace(regexLabOpen, '<div class="lab">');
 
         // Replace <!-- /lab --> with </div>
-        inputString = inputString.replace(labCloseRegex, '</div>');
+        inputString = inputString.replace(regexLabClose, '</div>');
 
         return inputString
     }
@@ -307,7 +308,7 @@ class ContentComponent extends Component {
             replacementPromises.push(
                 Neo.main.addon.HighlightJS.highlightAuto({html: code, windowId})
                     .then(highlightedHtml => ({
-                        after: `<pre data-javascript id="pre-readonly-${Neo.core.IdGenerator.getId()}">${highlightedHtml}</pre>`,
+                        after: `<pre data-javascript id="pre-readonly-${Neo.core.IdGenerator.getId()}">${highlightedHtml.trim()}</pre>`,
                         token: token
                     }))
             );
@@ -336,7 +337,7 @@ class ContentComponent extends Component {
             contentArray = content.split('\n'),
             i            = 1,
             storeData    = [],
-            tag;
+            headline, sideNavTitle, tag;
 
         contentArray.forEach((line, index) => {
             tag = null;
@@ -352,9 +353,15 @@ class ContentComponent extends Component {
             }
 
             if (tag) {
-                storeData.push({id: i, name: line, sourceId: me.id, tag});
+                // Convert backticks to <code> tags for the article headline tags
+                headline = line.replace(regexInlineCode, '<code>$1</code>');
 
-                contentArray[index] = `<${tag} class="neo-${tag}" data-record-id="${i}">${line}</${tag}>`;
+                // Markdown titles can contain inline code, which we don't want to display inside PageSectionsList.
+                sideNavTitle = line.replaceAll('`', '');
+
+                storeData.push({id: i, name: sideNavTitle, sourceId: me.id, tag});
+
+                contentArray[index] = `<${tag} class="neo-${tag}" data-record-id="${i}">${headline}</${tag}>`;
 
                 i++
             }

package/apps/portal/view/learn/MainContainerController.mjs

@@ -17,8 +17,8 @@ class MainContainerController extends Controller {
          * @member {Object} routes
          */
         routes: {
-            '/learn'         : 'onRouteDefault',
-            '/learn/{itemId}': 'onRouteLearnItem'
+            '/learn'          : 'onRouteDefault',
+            '/learn/{*itemId}': 'onRouteLearnItem'
         }
     }
 
@@ -118,7 +118,7 @@ class MainContainerController extends Controller {
      */
     onRouteDefault(data) {
         if (!this.getStateProvider().data.currentPageRecord) {
-            this.onRouteLearnItem({itemId: 'benefits.Introduction'})
+            this.onRouteLearnItem({itemId: 'benefits/Introduction'})
         }
     }
 
@@ -126,15 +126,15 @@ class MainContainerController extends Controller {
      * @param {Object} data
      * @param {String} data.itemId
      */
-    onRouteLearnItem(data) {
+    onRouteLearnItem({itemId}) {
         let stateProvider = this.getStateProvider(),
             store         = stateProvider.getStore('contentTree');
 
         if (store.getCount() > 0) {
-            stateProvider.data.currentPageRecord = store.get(data.itemId)
+            stateProvider.data.currentPageRecord = store.get(itemId)
         } else {
             store.on({
-                load : () => {stateProvider.data.currentPageRecord = store.get(data.itemId)},
+                load : () => {stateProvider.data.currentPageRecord = store.get(itemId)},
                 delay: 10,
                 once : true
             })

package/learn/README.md

@@ -16,7 +16,7 @@ Neo.mjs is the **first and only JavaScript framework** that achieves:
 ## 🌐 Best Learning Experience
 
 **For the optimal learning experience, visit:**
-**https://neomjs.com/dist/production/apps/portal/index.html#/learn**
+**[neomjs.com#/learn](https://neomjs.com/dist/production/apps/portal/index.html#/learn)**
 
 The web portal provides:
 - ✨ **Enhanced Markdown rendering** with syntax highlighting
@@ -25,25 +25,20 @@ The web portal provides:
 - 📱 **Responsive layout** optimized for learning
 - 🔗 **Interactive navigation** between topics
 
-## 📚 What's Inside
-
-- **[Benefits](./benefits/)** - Why choose Neo.mjs and its revolutionary OMT advantages
-- **[Getting Started](./gettingstarted/)** - Step-by-step introduction to Off-Main-Thread development
-- **[Guides](./guides/)** - In-depth technical documentation on advanced concepts
-- **[Tutorials](./tutorials/)** - Hands-on projects and practical examples
-- **[JavaScript Classes](./javascript/)** - JavaScript fundamentals for Neo.mjs development
-
 ## 🎯 Learning Path
 
-1. Start with [Benefits](./benefits/) to understand Neo.mjs's revolutionary OMT approach
-2. Follow [Getting Started](./gettingstarted/) for Off-Main-Thread development basics
-3. Explore [Guides](./guides/) for comprehensive technical knowledge
-4. Practice with [Tutorials](./tutorials/) for hands-on experience
+For a structured and effective learning experience, we recommend the following progression:
+
+1.  Start with [Benefits](./benefits/) to understand Neo.mjs's revolutionary OMT approach
+2.  Follow [Getting Started](./gettingstarted/) for Off-Main-Thread development basics
+3.  Explore [Guides](./guides/) for comprehensive technical knowledge
+4.  Practice with [Tutorials](./tutorials/) for hands-on experience
+5.  Review [JavaScript Classes](./javascript/) for JavaScript fundamentals relevant to Neo.mjs development
 
 ## 📖 Reading Options
 
 - **🌐 Web Portal** (Recommended): Enhanced experience with live previews
-  → [neomjs.com/learn](https://neomjs.com/dist/production/apps/portal/index.html#/learn)
+  → [neomjs.com#/learn](https://neomjs.com/dist/production/apps/portal/index.html#/learn)
 - **📁 GitHub**: Raw markdown files for quick reference or offline reading
 - **💻 Local**: Clone the repo and browse files directly