create-switch-framework-app 0.1.0 → 0.2.2

package/templates/electron/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/electron/base/electron/electron-builder.json

@@ -1,19 +1,19 @@
-{
-  "appId": "com.switchframework.app",
-  "productName": "Switch Framework App",
-  "directories": {
-    "output": "dist"
-  },
-  "files": [
-    "**/*"
-  ],
-  "win": {
-    "target": "nsis"
-  },
-  "mac": {
-    "target": "dmg"
-  },
-  "linux": {
-    "target": "AppImage"
-  }
-}
+{
+  "appId": "com.switchframework.app",
+  "productName": "Switch Framework App",
+  "directories": {
+    "output": "dist"
+  },
+  "files": [
+    "**/*"
+  ],
+  "win": {
+    "target": "nsis"
+  },
+  "mac": {
+    "target": "dmg"
+  },
+  "linux": {
+    "target": "AppImage"
+  }
+}

package/templates/electron/base/electron/main.js

@@ -1,30 +1,30 @@
-const { app, BrowserWindow } = require('electron');
-const path = require('node:path');
-
-const port = process.env.PORT ? Number(process.env.PORT) : 3000;
-let mainWindow;
-
-function createWindow() {
-  mainWindow = new BrowserWindow({
-    width: 1200,
-    height: 800,
-    webPreferences: {
-      preload: path.join(__dirname, 'preload.js')
-    }
-  });
-
-  mainWindow.loadURL(`http://localhost:${port}`);
-}
-
-app.whenReady().then(() => {
-  require('../server.js');
-  setTimeout(createWindow, 350);
-
-  app.on('activate', () => {
-    if (BrowserWindow.getAllWindows().length === 0) createWindow();
-  });
-});
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') app.quit();
-});
+const { app, BrowserWindow } = require('electron');
+const path = require('node:path');
+
+const port = process.env.PORT ? Number(process.env.PORT) : 3000;
+let mainWindow;
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  });
+
+  mainWindow.loadURL(`http://localhost:${port}`);
+}
+
+app.whenReady().then(() => {
+  require('../server.js');
+  setTimeout(createWindow, 350);
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});

package/templates/electron/base/electron/preload.js

@@ -1,5 +1,5 @@
-const { contextBridge } = require('electron');
-
-contextBridge.exposeInMainWorld('switchApp', {
-  ping: () => 'pong'
-});
+const { contextBridge } = require('electron');
+
+contextBridge.exposeInMainWorld('switchApp', {
+  ping: () => 'pong'
+});

package/templates/electron/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/main.js

@@ -1 +1 @@
-module.exports = require('./electron/main.js');
+module.exports = require('./electron/main.js');

package/templates/electron/base/preload.js

@@ -1 +1 @@
-module.exports = require('./electron/preload.js');
+module.exports = require('./electron/preload.js');

package/templates/electron/base/server.js

@@ -1,42 +1,27 @@
-const express = require('express');
-const session = require('express-session');
-const path = require('node:path');
-require('dotenv').config();
-
-const { checkRestrict } = require('switch-framework-backend/middleware');
-
-const app = express();
-const PORT = process.env.PORT ? Number(process.env.PORT) : 3000;
-
-app.use(express.json({ limit: '25mb' }));
-
-app.use(session({
-  secret: process.env.SESSION_SECRET || 'dev-secret',
-  resave: false,
-  saveUninitialized: false
-}));
-
-// Serve switch-framework to the browser from node_modules
-app.use('/switch-framework', express.static(path.join(__dirname, 'node_modules', 'switch-framework')));
-
-// Serve project files
-app.use(express.static(path.join(__dirname, '.')));
-
-const restrictConfig = {
-  public: ['/', '/login'],
-  rules: [
-    { prefix: '/admin', roles: ['admin'] },
-    { prefix: '/billing', roles: ['billing', 'admin'] },
-    { path: '/login', roles: ['*'] }
-  ]
-};
-
-app.use(checkRestrict(restrictConfig));
-
-app.get('*', (req, res) => {
-  res.sendFile(path.join(__dirname, '.', 'index.html'));
-});
-
-app.listen(PORT, () => {
-  console.log('Switch Framework app running at http://localhost:' + PORT);
-});
+require('dotenv').config();
+
+const switchFrameworkBackend = require('switch-framework-backend');
+
+switchFrameworkBackend.config({
+  PORT: process.env.PORT ? Number(process.env.PORT) : 3000,
+  staticRoot: __dirname,
+  session: {
+    secret: process.env.SESSION_SECRET || 'dev-secret',
+    resave: false,
+    saveUninitialized: false
+  }
+});
+
+const app = switchFrameworkBackend();
+
+app.initServer((server) => {
+  const restrictConfig = {
+    public: ['/', '/login'],
+    rules: [
+      { prefix: '/admin', roles: ['admin'] },
+      { prefix: '/billing', roles: ['billing', 'admin'] },
+      { path: '/login', roles: ['*'] }
+    ]
+  };
+  server.use(switchFrameworkBackend.checkRestrict(restrictConfig));
+});