create-switch-framework-app 0.1.0 → 0.2.2

package/templates/web/base/components/SwStarterSplashScreen.js

@@ -1,140 +1,130 @@
-export class SwStarterSplashScreen extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  render() {
-    this.shadowRoot.innerHTML = `
-      ${this.styleSheet()}
-      <div class="wrap">
-        <div class="card">
-          <div class="logo-container">
-            <img class="logo" src="/assets/logo.svg" alt="Expo" />
-          </div>
-          <div class="title">Switch Framework</div>
-          <div class="sub">Launching...</div>
-          
-          <div class="loader-container">
-            <div class="loader"></div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  styleSheet() {
-    return `
-      <style>
-        :host {
-          position: fixed;
-          inset: 0;
-          display: block;
-          background: var(--page_background, #fff);
-          z-index: 9999;
-        }
-
-        * {
-          box-sizing: border-box;
-          font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
-        }
-
-        .wrap {
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 18px;
-        }
-
-        .card {
-          width: min(520px, 100%);
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          gap: 16px;
-        }
-
-        .logo-container {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 100px;
-          height: 100px;
-          background: linear-gradient(135deg, #0091ff 0%, #0073e6 100%);
-          border-radius: 28px;
-          box-shadow: 0 20px 40px rgba(0, 145, 255, 0.25);
-          animation: fadeInScale 0.6s ease-out;
-        }
-
-        .logo {
-          width: 56px;
-          height: 56px;
-          filter: brightness(0) invert(1);
-        }
-
-        .title {
-          font-weight: 700;
-          font-size: 24px;
-          color: var(--main_text, #000);
-          animation: fadeIn 0.8s ease-out 0.2s both;
-        }
-
-        .sub {
-          font-weight: 600;
-          font-size: 13px;
-          color: var(--sub_text, #666);
-          animation: fadeIn 0.8s ease-out 0.3s both;
-        }
-
-        .loader-container {
-          margin-top: 12px;
-          animation: fadeIn 0.8s ease-out 0.4s both;
-        }
-
-        .loader {
-          width: 48px;
-          height: 48px;
-          border: 3px solid rgba(0, 145, 255, 0.15);
-          border-top: 3px solid #0091ff;
-          border-radius: 50%;
-          animation: spin 1s linear infinite;
-        }
-
-        @keyframes spin {
-          to {
-            transform: rotate(360deg);
-          }
-        }
-
-        @keyframes fadeIn {
-          from {
-            opacity: 0;
-          }
-          to {
-            opacity: 1;
-          }
-        }
-
-        @keyframes fadeInScale {
-          from {
-            opacity: 0;
-            transform: scale(0.8);
-          }
-          to {
-            opacity: 1;
-            transform: scale(1);
-          }
-        }
-      </style>
-    `;
-  }
-}
-
-if (!customElements.get('sw-starter-splash')) {
-  customElements.define('sw-starter-splash', SwStarterSplashScreen);
-}
+import { SwitchComponent } from 'switch-framework';
+
+export class SwStarterSplashScreen extends SwitchComponent {
+  static tag = 'sw-starter-splash';
+
+  render() {
+    return `
+      <div class="wrap">
+        <div class="card">
+          <div class="logo-container">
+            <img class="logo" src="/assets/logo.svg" alt="Switch Framework" />
+          </div>
+          <div class="title">Switch Framework</div>
+          <div class="sub">Launching...</div>
+          
+          <div class="loader-container">
+            <div class="loader"></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  styleSheet() {
+    return `
+      <style>
+        :host {
+          position: fixed;
+          inset: 0;
+          display: block;
+          background: var(--page_background, #fff);
+          z-index: 9999;
+        }
+
+        * {
+          box-sizing: border-box;
+          font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+        }
+
+        .wrap {
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 18px;
+        }
+
+        .card {
+          width: min(520px, 100%);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 16px;
+        }
+
+        .logo-container {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100px;
+          height: 100px;
+          background: linear-gradient(135deg, #0091ff 0%, #0073e6 100%);
+          border-radius: 28px;
+          box-shadow: 0 20px 40px rgba(0, 145, 255, 0.25);
+          animation: fadeInScale 0.6s ease-out;
+        }
+
+        .logo {
+          width: 56px;
+          height: 56px;
+          filter: brightness(0) invert(1);
+        }
+
+        .title {
+          font-weight: 700;
+          font-size: 24px;
+          color: var(--main_text, #000);
+          animation: fadeIn 0.8s ease-out 0.2s both;
+        }
+
+        .sub {
+          font-weight: 600;
+          font-size: 13px;
+          color: var(--sub_text, #666);
+          animation: fadeIn 0.8s ease-out 0.3s both;
+        }
+
+        .loader-container {
+          margin-top: 12px;
+          animation: fadeIn 0.8s ease-out 0.4s both;
+        }
+
+        .loader {
+          width: 48px;
+          height: 48px;
+          border: 3px solid rgba(0, 145, 255, 0.15);
+          border-top: 3px solid #0091ff;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+          to {
+            transform: rotate(360deg);
+          }
+        }
+
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+
+        @keyframes fadeInScale {
+          from {
+            opacity: 0;
+            transform: scale(0.8);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+      </style>
+    `;
+  }
+}

package/templates/web/base/components/SwTabBar.js

@@ -1,153 +1,146 @@
-export class SwTabBar extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this._unsub = null;
-  }
-
-  connectedCallback() {
-    this.render();
-    this.updateActive();
-
-    if (globalStates?.subscribe) {
-      this._unsub = globalStates.subscribe(() => this.updateActive());
-    }
-
-    this.shadowRoot.addEventListener('click', (e) => {
-      const btn = e.target?.closest?.('button[data-route]');
-      if (!btn) return;
-      const route = btn.getAttribute('data-route');
-      const navigate = globalStates?.getState ? globalStates.getState('navigate') : null;
-      if (typeof navigate === 'function') navigate(route);
-    });
-  }
-
-  disconnectedCallback() {
-    if (this._unsub) this._unsub();
-  }
-
-  getTabs() {
-    const layout = globalStates?.getState ? globalStates.getState('tabsLayout') : null;
-    const tabs = Array.isArray(layout?.tabs) ? layout.tabs : [];
-    return tabs;
-  }
-
-  updateActive() {
-    const activeRoute = globalStates?.getState ? globalStates.getState('activeRoute') : '';
-    const tabs = this.getTabs();
-
-    tabs.forEach((t) => {
-      const el = this.shadowRoot.getElementById(`tab-${t.name}`);
-      if (!el) return;
-      const isActive = String(activeRoute || '').startsWith(String(t.name));
-      el.classList.toggle('active', isActive);
-    });
-  }
-
-  render() {
-    const tabs = this.getTabs();
-
-    this.shadowRoot.innerHTML = `
-      ${this.styleSheet()}
-      <nav class="bar" aria-label="Bottom tabs">
-        ${tabs.map((t) => `
-          <button class="tab" id="tab-${t.name}" data-route="${t.name}" type="button">
-            <span class="icon">${this.getIcon(t.icon)}</span>
-            <span class="label">${t.title || t.name}</span>
-          </button>
-        `).join('')}
-      </nav>
-    `;
-  }
-
-  getIcon(name) {
-    const map = {
-      home: `<span class='switch_icon_house'></span>`,
-      compass: `<span class='switch_icon_compass'></span>`,
-      settings: `<span class='switch_icon_gear'></span>`
-    };
-    return map[name] || map.home;
-  }
-
-  styleSheet() {
-    return `
-      <style>
-        @import '/assets/icons/style.css';
-
-        :host {
-          display: block;
-          width: 100%;
-          background: transparent;
-        }
-
-        * {
-          box-sizing: border-box;
-          font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
-        }
-
-        .bar {
-          display: grid;
-          grid-template-columns: repeat(2, 1fr);
-          gap: 12px;
-          padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
-          border-top: 1px solid var(--border_color, #e5e5e5);
-          background: rgba(255, 255, 255, 0.95);
-          backdrop-filter: saturate(180%) blur(10px);
-        }
-
-        :root[data-theme="dark"] .bar {
-          background: rgba(11, 15, 20, 0.95);
-          border-top-color: rgba(255, 255, 255, 0.1);
-        }
-
-        .tab {
-          appearance: none;
-          border: none;
-          background: transparent;
-          border-radius: 20px;
-          padding: 12px 14px;
-          cursor: pointer;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          gap: 8px;
-          color: var(--sub_text, #666);
-          font-weight: 600;
-          transition: all 0.2s ease;
-        }
-
-        .tab:active {
-          transform: scale(0.95);
-        }
-
-        .tab.active {
-          background: rgba(0, 0, 0, 0.06);
-          color: var(--main_text, #000);
-        }
-
-        :root[data-theme="dark"] .tab.active {
-          background: rgba(255, 255, 255, 0.1);
-        }
-
-        .icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 24px;
-          line-height: 1;
-        }
-
-        .label {
-          display: block;
-          text-align: center;
-          font-size: 11px;
-          font-weight: 600;
-        }
-      </style>
-    `;
-  }
-}
-
-if (!customElements.get('sw-tab-bar')) {
-  customElements.define('sw-tab-bar', SwTabBar);
-}
+import { SwitchComponent } from 'switch-framework';
+import { navigate, useRouteChangesSubscriber, getActiveRoute } from 'switch-framework/router';
+
+export class SwTabBar extends SwitchComponent {
+  static tag = 'sw-tab-bar';
+
+  connected() {
+    this.updateActive();
+    this._unsub = useRouteChangesSubscriber(() => this.updateActive());
+
+    this.shadowRoot.addEventListener('click', (e) => {
+      const btn = e.target?.closest?.('button[data-route]');
+      if (!btn) return;
+      const route = btn.getAttribute('data-route');
+      navigate(route);
+    });
+  }
+
+  disconnected() {
+    if (this._unsub) this._unsub();
+  }
+
+  getTabs() {
+    const layout = globalStates?.getState ? globalStates.getState('tabsLayout') : null;
+    const tabs = Array.isArray(layout?.tabs) ? layout.tabs : [];
+    return tabs;
+  }
+
+  updateActive() {
+    const activeRoute = getActiveRoute();
+    const tabs = this.getTabs();
+
+    tabs.forEach((t) => {
+      const el = this.shadowRoot?.getElementById?.(`tab-${t.name}`);
+      if (!el) return;
+      const matchList = Array.isArray(t?.match) ? t.match : [t.name].filter(Boolean);
+      const isActive = matchList.some((m) => String(activeRoute || '').startsWith(String(m)) || String(activeRoute || '') === String(m));
+      el.classList.toggle('active', isActive);
+    });
+  }
+
+  getIcon(name) {
+    const map = {
+      home: `<span class='switch_icon_house'></span>`,
+      compass: `<span class='switch_icon_compass'></span>`,
+      settings: `<span class='switch_icon_gear'></span>`
+    };
+    return map[name] || map.home;
+  }
+
+  render() {
+    const tabs = this.getTabs();
+
+    return `
+      <nav class="bar" aria-label="Bottom tabs">
+        ${tabs.map((t) => {
+          const route = t.initialRoute || (t.path ? t.path.replace(/^\//, '') : t.name);
+          return `
+          <button class="tab" id="tab-${t.name}" data-route="${route || t.name}" type="button">
+            <span class="icon">${this.getIcon(t.icon)}</span>
+            <span class="label">${t.title || t.name}</span>
+          </button>
+        `;
+        }).join('')}
+      </nav>
+    `;
+  }
+
+  styleSheet() {
+    return `
+      <style>
+        @import '/assets/icons/style.css';
+
+        :host {
+          display: block;
+          width: 100%;
+          background: transparent;
+        }
+
+        * {
+          box-sizing: border-box;
+          font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+        }
+
+        .bar {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 12px;
+          padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+          border-top: 1px solid var(--border_color, #e5e5e5);
+          background: rgba(255, 255, 255, 0.95);
+          backdrop-filter: saturate(180%) blur(10px);
+        }
+
+        :root[data-theme="dark"] .bar {
+          background: rgba(11, 15, 20, 0.95);
+          border-top-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .tab {
+          appearance: none;
+          border: none;
+          background: transparent;
+          border-radius: 20px;
+          padding: 12px 14px;
+          cursor: pointer;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 8px;
+          color: var(--sub_text, #666);
+          font-weight: 600;
+          transition: all 0.2s ease;
+        }
+
+        .tab:active {
+          transform: scale(0.95);
+        }
+
+        .tab.active {
+          background: rgba(0, 0, 0, 0.06);
+          color: var(--main_text, #000);
+        }
+
+        :root[data-theme="dark"] .tab.active {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        .icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 24px;
+          line-height: 1;
+        }
+
+        .label {
+          display: block;
+          text-align: center;
+          font-size: 11px;
+          font-weight: 600;
+        }
+      </style>
+    `;
+  }
+}

package/templates/web/base/index.js

@@ -1,5 +1,4 @@
-import { startApp } from '/switch-framework/index.js';
+import { startApp } from 'switch-framework';
 import layout from './app/_layout.js';
-import { appRegisters } from './app/register.js';
 
-startApp(layout, appRegisters);
+startApp(layout);

package/templates/electron/base/app/(tabs)/register.js

@@ -1,12 +0,0 @@
-export async function appRegisters() {
-  await Promise.all([
-    import('../components/SwStarterSplashScreen.js'),
-    import('../components/SwTabBar.js'),
-
-    import('./index.js'),
-    import('./+not-found.js'),
-    import('./(tabs)/_layout.js'),
-    import('./(tabs)/index.js'),
-    import('./(tabs)/explore.js')
-  ]);
-}

package/templates/electron/base/app/register.js

@@ -1,12 +0,0 @@
-export async function appRegisters() {
-  await Promise.all([
-    import('../components/SwStarterSplashScreen.js'),
-    import('../components/SwTabBar.js'),
-
-    import('./index.js'),
-    import('./+not-found.js'),
-    import('./(tabs)/_layout.js'),
-    import('./(tabs)/index.js'),
-    import('./(tabs)/explore.js')
-  ]);
-}

package/templates/web/base/app/(tabs)/register.js

@@ -1,12 +0,0 @@
-export async function appRegisters() {
-  await Promise.all([
-    import('../components/SwStarterSplashScreen.js'),
-    import('../components/SwTabBar.js'),
-
-    import('./index.js'),
-    import('./+not-found.js'),
-    import('./(tabs)/_layout.js'),
-    import('./(tabs)/index.js'),
-    import('./(tabs)/explore.js')
-  ]);
-}

package/templates/web/base/app/register.js

@@ -1,12 +0,0 @@
-export async function appRegisters() {
-  await Promise.all([
-    import('../components/SwStarterSplashScreen.js'),
-    import('../components/SwTabBar.js'),
-
-    import('./index.js'),
-    import('./+not-found.js'),
-    import('./(tabs)/_layout.js'),
-    import('./(tabs)/index.js'),
-    import('./(tabs)/explore.js')
-  ]);
-}