neo.mjs 10.0.0-beta.5 → 10.0.0

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

@@ -34,10 +34,12 @@ class ContentComponent extends Component {
         },
         /**
          * @member {Object} record_=null
+         * @reactive
          */
         record_: null,
         /**
          * @member {String} tag='article'
+         * @reactive
          */
         tag: 'article'
     }
@@ -173,9 +175,8 @@ class ContentComponent extends Component {
             baseConfigs = {appName, autoMount: true, autoRender: true, parentComponent: me, windowId};
             data        = await fetch(path);
             content     = await data.text();
-            // Update content sections (modifies markdown content with h2/h3 tags and IDs)
+            // Update content sections (modifies markdown content with h1/h2/h3 tags and IDs)
             content = me.updateContentSectionsStore(content);
-            content = `<h1 class='neo-h1'>${record.name}</h1>\n${content}`;
             // Initialize maps for custom components and live previews
             neoComponents = {};
             neoDivs       = {};
@@ -342,14 +343,19 @@ class ContentComponent extends Component {
         contentArray.forEach((line, index) => {
             tag = null;
 
-            if (line.startsWith('##') && line.charAt(2) !== '#') {
+            if (line.startsWith('#') && line.charAt(1) !== '#') {
+                line = line.substring(1).trim();
+                tag  = 'h1'
+            }
+
+            else if (line.startsWith('##') && line.charAt(2) !== '#') {
                 line = line.substring(2).trim();
-                tag  = 'h2';
+                tag  = 'h2'
             }
 
             else if (line.startsWith('###') && line.charAt(3) !== '#') {
                 line = line.substring(3).trim();
-                tag  = 'h3';
+                tag  = 'h3'
             }
 
             if (tag) {

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

@@ -21,10 +21,12 @@ class ContentTreeList extends TreeList {
         },
         /**
          * @member {String[]} cls=['topics-tree']
+         * @reactive
          */
         cls: ['topics-tree'],
         /**
          * @member {String|null} contentPath_=null
+         * @reactive
          */
         contentPath_: null,
         /**

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

@@ -13,6 +13,7 @@ class CubeLayoutButton extends Button {
         className: 'Portal.view.learn.CubeLayoutButton',
         /**
          * @member {String|null} activeLayout_=null
+         * @reactive
          */
         activeLayout_: null,
     }

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

@@ -19,10 +19,12 @@ class MainContainer extends Container {
         className: 'Portal.view.learn.MainContainer',
         /**
          * @member {String[]} cls=['portal-learn-maincontainer']
+         * @reactive
          */
         cls: ['portal-learn-maincontainer'],
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**
@@ -61,10 +63,12 @@ class MainContainer extends Container {
         }],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {Neo.state.Provider} stateProvider=MainContainerStateProvider
+         * @reactive
          */
         stateProvider: MainContainerStateProvider
     }

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

@@ -60,10 +60,12 @@ class PageContainer extends Container {
         }],
         /**
          * @member {Object} nextPageRecord_=null
+         * @reactive
          */
         nextPageRecord_: null,
         /**
          * @member {Object} previousPageRecord_=null
+         * @reactive
          */
         previousPageRecord_: null
     }

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

@@ -14,6 +14,7 @@ class PageSectionsContainer extends Container {
         className: 'Portal.view.learn.PageSectionsContainer',
         /**
          * @member {String[]} cls=['portal-page-sections-container']
+         * @reactive
          */
         cls: ['portal-page-sections-container'],
         /**
@@ -42,10 +43,12 @@ class PageSectionsContainer extends Container {
         }],
         /**
          * @member {Object} layout={ntype:'vbox'}
+         * @reactive
          */
         layout: {ntype: 'vbox'},
         /**
          * @member {String} tag='aside'
+         * @reactive
          */
         tag: 'aside'
     }

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

@@ -19,6 +19,7 @@ class PageSectionsList extends List {
         },
         /**
          * @member {String[]} cls=['portal-page-sections-list','topics-tree']
+         * @reactive
          */
         cls: ['portal-page-sections-list', 'topics-tree']
     }

package/apps/portal/view/services/Component.mjs

@@ -13,6 +13,7 @@ class Component extends BaseComponent {
         className: 'Portal.view.services.Component',
         /**
          * @member {String[]} cls=['portal-services-component']
+         * @reactive
          */
         cls: ['portal-services-component'],
         /**

package/apps/realworld/api/Base.mjs

@@ -31,6 +31,7 @@ class Base extends CoreBase {
         defaultHeaders: null,
         /**
          * @member {Boolean} isReady=false
+         * @reactive
          */
         isReady: false,
         /**

package/apps/realworld/view/HeaderComponent.mjs

@@ -14,6 +14,7 @@ class HeaderComponent extends Component {
         className: 'RealWorld.view.HeaderComponent',
         /**
          * @member {String} activeItem_='home'
+         * @reactive
          */
         activeItem_: 'home',
         /**
@@ -22,14 +23,17 @@ class HeaderComponent extends Component {
         baseCls: ['navbar', 'navbar-light'],
         /**
          * @member {Boolean} loggedIn_=false
+         * @reactive
          */
         loggedIn_: false,
         /**
          * @member {String|null} userImage_=null
+         * @reactive
          */
         userImage_:null,
         /**
          * @member {String|null} userName_=null
+         * @reactive
          */
         userName_: null,
         /**

package/apps/realworld/view/HomeComponent.mjs

@@ -21,6 +21,7 @@ class HomeComponent extends Component {
         activeTag: null,
         /**
          * @member {Object[]|null} articlePreviews_=null
+         * @reactive
          */
         articlePreviews_: null,
         /**
@@ -29,14 +30,17 @@ class HomeComponent extends Component {
         baseCls: ['home-page'],
         /**
          * @member {Number} countArticles_=10
+         * @reactive
          */
         countArticles_: 10,
         /**
          * @member {Number} countArticles_=10
+         * @reactive
          */
         currentPage_: 1,
         /**
          * @member {Object[]} feeds_
+         * @reactive
          */
         feeds_: [
             {name: 'Your Feed',   disabled: true},
@@ -44,10 +48,12 @@ class HomeComponent extends Component {
         ],
         /**
          * @member {Boolean} loggedIn_=false
+         * @reactive
          */
         loggedIn_: false,
         /**
          * @member {Number} pageSize_=10
+         * @reactive
          */
         pageSize_: 10,
         /**
@@ -56,6 +62,7 @@ class HomeComponent extends Component {
         previewComponents: [],
         /**
          * @member {RealWorld.view.article.TagListComponent|null} tagList_=null
+         * @reactive
          */
         tagList_: null,
         /**

package/apps/realworld/view/MainContainer.mjs

@@ -20,10 +20,12 @@ class MainContainer extends Viewport {
         baseCls: [],
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**
          * @member {Object} layout={ntype: 'vbox'}
+         * @reactive
          */
         layout: {ntype: 'base'},
 

package/apps/realworld/view/MainContainerController.mjs

@@ -31,6 +31,7 @@ class MainContainerController extends ComponentController {
         articleComponent: null,
         /**
          * @member {Number} articlesOffset_=0
+         * @reactive
          */
         articlesOffset_: 0,
         /**
@@ -42,6 +43,7 @@ class MainContainerController extends ComponentController {
          * Stores the current user data after logging in
          * @member {Object|null} currentUser_=null
          * @protected
+         * @reactive
          */
         currentUser_: null,
         /**

package/apps/realworld/view/article/CommentComponent.mjs

@@ -14,6 +14,7 @@ class CommentComponent extends Component {
         className: 'RealWorld.view.article.CommentComponent',
         /**
          * @member {Object|null} author_=null
+         * @reactive
          */
         author_: null,
         /**
@@ -22,6 +23,7 @@ class CommentComponent extends Component {
         baseCls: ['card'],
         /**
          * @member {String|null} body_=null
+         * @reactive
          */
         body_: null,
         /**
@@ -30,6 +32,7 @@ class CommentComponent extends Component {
         commentId: null,
         /**
          * @member {String|null} createdAt_=null
+         * @reactive
          */
         createdAt_: null,
         /**

package/apps/realworld/view/article/Component.mjs

@@ -16,6 +16,7 @@ class Component extends BaseComponent {
         className: 'RealWorld.view.article.Component',
         /**
          * @member {Object|null} author_=null
+         * @reactive
          */
         author_: null,
         /**
@@ -24,6 +25,7 @@ class Component extends BaseComponent {
         baseCls: ['article-page'],
         /**
          * @member {String|null} body_=null
+         * @reactive
          */
         body_: null,
         /**
@@ -38,6 +40,7 @@ class Component extends BaseComponent {
         commentComponents: [],
         /**
          * @member {Object[]|null} comments_=null
+         * @reactive
          */
         comments_: null,
         /**
@@ -46,22 +49,27 @@ class Component extends BaseComponent {
         createCommentComponent: null,
         /**
          * @member {String|null} createdAt_=null
+         * @reactive
          */
         createdAt_: null,
         /**
          * @member {Boolean} favorited_=false
+         * @reactive
          */
         favorited_: false,
         /**
          * @member {Number|null} favoritesCount_=null
+         * @reactive
          */
         favoritesCount_: null,
         /**
          * @member {Array|null} tagList_=null
+         * @reactive
          */
         tagList_: null,
         /**
          * @member {String|null} title_=null
+         * @reactive
          */
         title_: null,
         /**
@@ -80,7 +88,7 @@ class Component extends BaseComponent {
                             {tag: 'a', cls: ['author'], flag: 'username'},
                             {tag: 'span', cls: ['date'], flag: 'createdAt'}
                         ]},
-                        {tag: 'button', cls: ['btn', 'btn-sm', 'btn-outline-secondary', 'follow-button'], cn: [
+                        {tag: 'button', cls: ['btn', 'btn-sm', 'btn-outline-secondary', 'follow-button'], flag: 'follow-button', cn: [
                             {tag: 'i', flag: 'followIcon'},
                             {vtype: 'text', flag: 'followAuthor'},
                             {vtype: 'text', flag: 'username'}
@@ -93,7 +101,7 @@ class Component extends BaseComponent {
                         {tag: 'button', cls: ['btn', 'btn-sm', 'btn-outline-primary', 'favorite-button'], flag: 'favorited', cn: [
                             {tag: 'i', cls: ['ion-heart']},
                             {vtype: 'text', html: ' '},
-                            {vtype: 'text'},
+                            {vtype: 'text', flag: 'favorite-text'},
                             {vtype: 'text', text: ' Post '},
                             {tag: 'span', cls: ['counter'], flag: 'favoritesCount'}
                         ]},
@@ -116,7 +124,7 @@ class Component extends BaseComponent {
                             {tag: 'a', cls: ['author'], flag: 'username'},
                             {tag: 'span', cls: ['date'], text: 'January 20th'}
                         ]},
-                        {tag: 'button', cls: ['btn', 'btn-sm', 'btn-outline-secondary', 'follow-button'], cn: [
+                        {tag: 'button', cls: ['btn', 'btn-sm', 'btn-outline-secondary', 'follow-button'], flag: 'follow-button', cn: [
                             {tag: 'i', flag: 'followIcon'},
                             {vtype: 'text', flag: 'followAuthor'},
                             {vtype: 'text', flag: 'username'}
@@ -125,7 +133,7 @@ class Component extends BaseComponent {
                         {tag: 'button', cls: ['btn', 'btn-sm', 'btn-outline-primary', 'favorite-button'], flag: 'favorited', cn: [
                             {tag: 'i', cls: ['ion-heart']},
                             {vtype: 'text', html: ' '},
-                            {vtype: 'text'},
+                            {vtype: 'text', flag: 'favorite-text'},
                             {vtype: 'text', text: ' Post '},
                             {tag: 'span', cls: ['counter'], flag: 'favoritesCount'}
                         ]}
@@ -306,7 +314,7 @@ class Component extends BaseComponent {
         let me = this;
 
         VDomUtil.getFlags(me.vdom, 'favorited').forEach(node => {
-            node.cn[2].text = value ? 'Unfavorite' : 'Favorite';
+            VDomUtil.getByFlag(node, 'favorite-text').text = value ? 'Unfavorite' : 'Favorite';
 
             NeoArray.add(node.cls, value ? 'btn-primary' : 'btn-outline-primary');
             NeoArray.remove(node.cls, value ? 'btn-outline-primary' : 'btn-primary');
@@ -388,7 +396,7 @@ class Component extends BaseComponent {
     /**
      *
      */
-    onCurrentUserChange() {console.log('### onCurrentUserChange');
+    onCurrentUserChange() {
         let me          = this,
             currentUser = me.getController().currentUser,
             vdom        = me.vdom,
@@ -397,10 +405,9 @@ class Component extends BaseComponent {
         if (me.author && currentUser) {
             isCurrentUser = me.author.username === currentUser.username;
 
-            vdom.cn[0].cn[0].cn[1].cn[2].removeDom = isCurrentUser; // follow user button
-            vdom.cn[0].cn[0].cn[1].cn[5].removeDom = isCurrentUser; // favorite post button
-
-            VDomUtil.getByFlag(vdom, 'article-actions').removeDom = isCurrentUser;
+            VDomUtil.getFlags(vdom, 'follow-button').forEach(node => node.removeDom = isCurrentUser);
+            VDomUtil.getFlags(vdom, 'favorited').forEach(node => node.removeDom = isCurrentUser);
+            VDomUtil.getByFlag(vdom, 'article-actions').removeDom = isCurrentUser; // this one is unique
             VDomUtil.getByFlag(vdom, 'delete-button')  .removeDom = !isCurrentUser;
             VDomUtil.getByFlag(vdom, 'edit-button')    .removeDom = !isCurrentUser;
 

package/apps/realworld/view/article/CreateCommentComponent.mjs

@@ -17,10 +17,12 @@ class CreateCommentComponent extends Component {
         baseCls: ['card', 'comment-form'],
         /**
          * @member {String|null} userImage_=null
+         * @reactive
          */
         userImage_: null,
         /**
          * @member {String|null} userName_=null
+         * @reactive
          */
         userName_: null,
         /**

package/apps/realworld/view/article/CreateComponent.mjs

@@ -20,14 +20,17 @@ class CreateComponent extends Component {
         baseCls: ['editor-page'],
         /**
          * @member {String} body_=''
+         * @reactive
          */
         body_: '',
         /**
          * @member {Object[]} errors_=[]
+         * @reactive
          */
         errors_: [],
         /**
          * @member {String} description_=''
+         * @reactive
          */
         description_: '',
         /**
@@ -36,10 +39,12 @@ class CreateComponent extends Component {
         slug: null,
         /**
          * @member {String[]} tagList_=[]
+         * @reactive
          */
         tagList_: [],
         /**
          * @member {String} title_=''
+         * @reactive
          */
         title_: '',
         /**

package/apps/realworld/view/article/PreviewComponent.mjs

@@ -15,6 +15,7 @@ class PreviewComponent extends Component {
         className: 'RealWorld.view.article.PreviewComponent',
         /**
          * @member {String|null} author_=null
+         * @reactive
          */
         author_: null,
         /**
@@ -24,34 +25,42 @@ class PreviewComponent extends Component {
         /**
          * ISO 8601 timestamp
          * @member {String|null} createdAt_=null
+         * @reactive
          */
         createdAt_: null,
         /**
          * @member {String|null} description_=null
+         * @reactive
          */
         description_: null,
         /**
          * @member {Boolean} favorited_=false
+         * @reactive
          */
         favorited_: false,
         /**
          * @member {Number|null} favoritesCount_=null
+         * @reactive
          */
         favoritesCount_: null,
         /**
          * @member {String|null} slug_=null
+         * @reactive
          */
         slug_: null,
         /**
          * @member {Array|null} tagList_=null
+         * @reactive
          */
         tagList_: null,
         /**
          * @member {String|null} title_=null
+         * @reactive
          */
         title_: null,
         /**
          * @member {String|null} userImage_=null
+         * @reactive
          */
         userImage_: null,
         /**

package/apps/realworld/view/article/TagListComponent.mjs

@@ -20,6 +20,7 @@ class TagListComponent extends Component {
         className: 'RealWorld.view.article.TagListComponent',
         /**
          * @member {String|null} activeTag_
+         * @reactive
          */
         activeTag_: null,
         /**
@@ -28,6 +29,7 @@ class TagListComponent extends Component {
         baseCls: ['col-md-3'],
         /**
          * @member {String[]} tags_=[]
+         * @reactive
          */
         tags_: [],
         /**

package/apps/realworld/view/user/ProfileComponent.mjs

@@ -16,6 +16,7 @@ class ProfileComponent extends Component {
         className: 'RealWorld.view.user.ProfileComponent',
         /**
          * @member {Object[]|null} articlePreviews_=null
+         * @reactive
          */
         articlePreviews_: null,
         /**
@@ -24,22 +25,27 @@ class ProfileComponent extends Component {
         baseCls: ['profile-page'],
         /**
          * @member {String|null} bio_=null
+         * @reactive
          */
         bio_: null,
         /**
          * @member {Number} countArticles_=5
+         * @reactive
          */
         countArticles_: 5,
         /**
          * @member {Boolean|null} following_=null
+         * @reactive
          */
         following_: null,
         /**
          * @member {String|null} image_=null
+         * @reactive
          */
         image_: null,
         /**
          * @member {Boolean} myProfile_=false
+         * @reactive
          */
         myProfile_: false,
         /**
@@ -48,6 +54,7 @@ class ProfileComponent extends Component {
         previewComponents: [],
         /**
          * @member {String|null} username_=null
+         * @reactive
          */
         username_: null,
         /**

package/apps/realworld/view/user/SettingsComponent.mjs

@@ -18,22 +18,27 @@ class SettingsComponent extends Component {
         baseCls: ['settings-page'],
         /**
          * @member {String} bio_=null
+         * @reactive
          */
         bio_: null,
         /**
          * @member {String} email_=null
+         * @reactive
          */
         email_: null,
         /**
          * @member {Object[]} errors_=[]
+         * @reactive
          */
         errors_: [],
         /**
          * @member {String} image_=null
+         * @reactive
          */
         image_: null,
         /**
          * @member {String} userName_=null
+         * @reactive
          */
         userName_: null,
         /**

package/apps/realworld/view/user/SignUpComponent.mjs

@@ -18,10 +18,12 @@ class SignUpComponent extends Component {
         baseCls: ['auth-page'],
         /**
          * @member {Object[]} errors_=[]
+         * @reactive
          */
         errors_: [],
         /**
          * @member {Object[]} fieldsets_
+         * @reactive
          */
         fieldsets_: [
             {name: 'username', placeholder: 'Your Name', type: 'text'},
@@ -37,6 +39,7 @@ class SignUpComponent extends Component {
         /**
          * @member {String} mode_='signup'
          * @protected
+         * @reactive
          */
         mode_: 'signup',
         /**

package/apps/realworld2/api/Base.mjs

@@ -25,6 +25,7 @@ class Base extends CoreBase {
         defaultHeaders: null,
         /**
          * @member {Boolean} isReady=false
+         * @reactive
          */
         isReady: false,
         /**

package/apps/realworld2/view/FooterComponent.mjs

@@ -17,6 +17,7 @@ class FooterComponent extends Component {
         baseCls: ['rw2-footer-component'],
         /**
          * @member {Number} height=40
+         * @reactive
          */
         height: 40,
         /**

package/apps/realworld2/view/HeaderToolbar.mjs

@@ -18,14 +18,17 @@ class HeaderToolbar extends Toolbar {
         baseCls: ['rw2-header-toolbar', 'neo-toolbar'],
         /**
          * @member {Neo.controller.Component} controller=HeaderToolbarController
+         * @reactive
          */
         controller: HeaderToolbarController,
         /**
          * @member {Number} height=56
+         * @reactive
          */
         height: 56,
         /**
          * @member {Number} minHeight=56
+         * @reactive
          */
         minHeight: 56,
         /**

package/apps/realworld2/view/HomeContainer.mjs

@@ -20,6 +20,7 @@ class HomeContainer extends Container {
         baseCls: ['rw2-home-container', 'neo-container'],
         /**
          * @member {Object} layout={ntype: 'vbox', align: 'stretch'}
+         * @reactive
          */
         layout: {
             ntype: 'vbox',

package/apps/realworld2/view/MainContainer.mjs

@@ -23,10 +23,12 @@ class MainContainer extends Viewport {
         baseCls: ['rw2-main-container', 'neo-viewport'],
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**
          * @member {Object} layout={ntype: 'vbox', align: 'stretch'}
+         * @reactive
          */
         layout: {
             ntype: 'vbox',