refactor: Migrate AppShell's dynamic content generation to use computed properties for section title and HTML.

Author: foxeyes

app/iso.js

@@ -1,7 +1,7 @@
 // Isomorphic modules
-import '../app/router.js';
 import '../app/app.js';
 import '../app/l10n.js';
+import '../app/router.js';
 import '../components/app-shell/app-shell.js';
 import '../components/nav-menu/nav-menu.js';
 import '../components/i-con/i-con.js';

components/app-shell/app-shell.js

@@ -4,24 +4,20 @@ import styles from './styles.js';
 
 export default class AppShell extends Symbiote {
   isoMode = true;
-  sectionHtml = /*html*/ `<home-section></home-section>`;
-  sectionTitle = '';
+  init$ = {
+    '+sectionTitle': {
+      deps: ['router/title', 'app/currentLang'],
+      fn: () => this.$[`l10n/${this.$['router/title']}`] || this.$['router/title'] || '',
+    },
+    '+sectionHtml': {
+      deps: ['router/route'],
+      fn: () => /*html*/ `<${this.$['router/route']}-section></${this.$['router/route']}-section>`,
+    }
+  }
 
   changeLang(e) {
     this.$['app/currentLang'] = e.target.value;
   }
-
-  setTitle() {
-    this.$.sectionTitle = this.$[`l10n/${this.$['router/title']}`] || this.$['router/title'] || '';
-  }
-
-  renderCallback() {
-    this.sub('app/currentLang', () => this.setTitle());
-    this.sub('router/title', () => this.setTitle());
-    this.sub('router/route', (route) => {
-      this.$.sectionHtml = /*html*/ `<${route}-section></${route}-section>`;
-    }, false);
-  }
 }
 
 AppShell.rootStyles = styles;

components/app-shell/template.js

@@ -6,15 +6,15 @@ export default html`
     <img src="https://rnd-pro.com/svg/symbiote/index.svg" alt="Symbiote.js" width="36">
     <span ${{textContent: 'app/appTitle'}}></span>
   </div>
-  <span ${{textContent: 'sectionTitle'}}></span>
+  <span ${{textContent: '+sectionTitle'}}></span>
   <select ${{onchange: 'changeLang'}}>
     <option value="en">English</option>
     <option value="es">Español</option>
     <option value="ru">Русский</option>
   </select>
 </header>
 <nav-menu></nav-menu>
-<main ${{innerHTML: 'sectionHtml'}}></main>
+<main ${{innerHTML: '+sectionHtml'}}></main>
 <footer>
   <span>&copy; ${new Date().getFullYear()}</span>
   <a href="https://rnd-pro.com" target="_blank">rnd-pro.com</a>