create-switch-framework-app 0.1.0 → 0.2.0

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));
+});

package/templates/web/base/app/(tabs)/+not-found.js

@@ -1,158 +1,158 @@
-export const screen = {
-  name: '+not-found',
-  path: '/+not-found',
-  title: 'Not Found',
-  tag: 'sw-user-not-found-screen',
-  layout: 'stack'
-};
-
-export class SwUserNotFoundScreen extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-  }
-
-  static get observedAttributes() {
-    return ['path'];
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  attributeChangedCallback() {
-    this.render();
-  }
-
-  render() {
-    const path = this.getAttribute('path') || window.location.pathname || '';
-
-    this.shadowRoot.innerHTML = `
-      ${this.styleSheet()}
-      <div class="wrap">
-        <div class="card">
-          <div class="code">404</div>
-          <div class="h">This screen does not exist</div>
-          <div class="p">No screen is registered for:</div>
-          <div class="path">${path}</div>
-
-          <div class="row">
-            <button class="btn" id="home">Go to Home</button>
-            <button class="btn secondary" id="back">Go Back</button>
-          </div>
-        </div>
-      </div>
-    `;
-
-    this.shadowRoot.getElementById('home')?.addEventListener('click', () => {
-      const navigate = globalStates?.getState ? globalStates.getState('navigate') : null;
-      if (typeof navigate === 'function') navigate('home');
-    });
-
-    this.shadowRoot.getElementById('back')?.addEventListener('click', () => {
-      const goBack = globalStates?.getState ? globalStates.getState('go_back') : null;
-      if (typeof goBack === 'function') goBack();
-      else window.history.back();
-    });
-  }
-
-  styleSheet() {
-    return `
-      <style>
-        :host {
-          display: block;
-          width: 100%;
-          min-height: 100dvh;
-          font-family: var(--font);
-        }
-
-        * {
-          box-sizing: border-box;
-          font-family: inherit;
-        }
-
-        .wrap {
-          min-height: 100vh;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 18px;
-        }
-
-        .card {
-          width: min(680px, 100%);
-          background: transparent;
-          border: none;
-          border-radius: 18px;
-          padding: 18px;
-          box-shadow: none;
-        }
-
-        .code {
-          font-weight: 1000;
-          font-size: 44px;
-          line-height: 1;
-          color: var(--main_text);
-        }
-
-        .h {
-          margin-top: 10px;
-          font-weight: 1000;
-          font-size: 20px;
-          color: var(--main_text);
-        }
-
-        .p {
-          margin-top: 6px;
-          color: var(--sub_text);
-          font-weight: 800;
-        }
-
-        .path {
-          margin-top: 10px;
-          padding: 10px 12px;
-          border-radius: 14px;
-          background: var(--surface_2);
-          border: 1px solid var(--border_light);
-          font-weight: 900;
-          color: var(--main_text);
-          word-break: break-word;
-        }
-
-        .row {
-          margin-top: 14px;
-          display: flex;
-          gap: 10px;
-          flex-wrap: wrap;
-        }
-
-        .btn {
-          border: none;
-          background: linear-gradient(135deg, #0091ff 0%, #0073e6 100%);
-          color: #fff;
-          font-weight: 1000;
-          border-radius: 999px;
-          padding: 10px 14px;
-          cursor: pointer;
-        }
-
-        .btn:hover {
-          opacity: 0.9;
-        }
-
-        .btn.secondary {
-          background: var(--surface_2);
-          color: var(--main_text);
-        }
-
-        .btn.secondary:hover {
-          background: var(--surface_3);
-        }
-      </style>
-    `;
-  }
-}
-
-if (!customElements.get('sw-user-not-found-screen')) {
-  customElements.define('sw-user-not-found-screen', SwUserNotFoundScreen);
+export const screen = {
+  name: '+not-found',
+  path: '/+not-found',
+  title: 'Not Found',
+  tag: 'sw-user-not-found-screen',
+  layout: 'stack'
+};
+
+export class SwUserNotFoundScreen extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes() {
+    return ['path'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const path = this.getAttribute('path') || window.location.pathname || '';
+
+    this.shadowRoot.innerHTML = `
+      ${this.styleSheet()}
+      <div class="wrap">
+        <div class="card">
+          <div class="code">404</div>
+          <div class="h">This screen does not exist</div>
+          <div class="p">No screen is registered for:</div>
+          <div class="path">${path}</div>
+
+          <div class="row">
+            <button class="btn" id="home">Go to Home</button>
+            <button class="btn secondary" id="back">Go Back</button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.shadowRoot.getElementById('home')?.addEventListener('click', () => {
+      const navigate = globalStates?.getState ? globalStates.getState('navigate') : null;
+      if (typeof navigate === 'function') navigate('home');
+    });
+
+    this.shadowRoot.getElementById('back')?.addEventListener('click', () => {
+      const goBack = globalStates?.getState ? globalStates.getState('go_back') : null;
+      if (typeof goBack === 'function') goBack();
+      else window.history.back();
+    });
+  }
+
+  styleSheet() {
+    return `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          min-height: 100dvh;
+          font-family: var(--font);
+        }
+
+        * {
+          box-sizing: border-box;
+          font-family: inherit;
+        }
+
+        .wrap {
+          min-height: 100vh;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 18px;
+        }
+
+        .card {
+          width: min(680px, 100%);
+          background: transparent;
+          border: none;
+          border-radius: 18px;
+          padding: 18px;
+          box-shadow: none;
+        }
+
+        .code {
+          font-weight: 1000;
+          font-size: 44px;
+          line-height: 1;
+          color: var(--main_text);
+        }
+
+        .h {
+          margin-top: 10px;
+          font-weight: 1000;
+          font-size: 20px;
+          color: var(--main_text);
+        }
+
+        .p {
+          margin-top: 6px;
+          color: var(--sub_text);
+          font-weight: 800;
+        }
+
+        .path {
+          margin-top: 10px;
+          padding: 10px 12px;
+          border-radius: 14px;
+          background: var(--surface_2);
+          border: 1px solid var(--border_light);
+          font-weight: 900;
+          color: var(--main_text);
+          word-break: break-word;
+        }
+
+        .row {
+          margin-top: 14px;
+          display: flex;
+          gap: 10px;
+          flex-wrap: wrap;
+        }
+
+        .btn {
+          border: none;
+          background: linear-gradient(135deg, #0091ff 0%, #0073e6 100%);
+          color: #fff;
+          font-weight: 1000;
+          border-radius: 999px;
+          padding: 10px 14px;
+          cursor: pointer;
+        }
+
+        .btn:hover {
+          opacity: 0.9;
+        }
+
+        .btn.secondary {
+          background: var(--surface_2);
+          color: var(--main_text);
+        }
+
+        .btn.secondary:hover {
+          background: var(--surface_3);
+        }
+      </style>
+    `;
+  }
+}
+
+if (!customElements.get('sw-user-not-found-screen')) {
+  customElements.define('sw-user-not-found-screen', SwUserNotFoundScreen);
 }

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

@@ -1,16 +1,22 @@
-import { Tabs } from '/switch-framework/index.js';
+import { TabLayout, registerComponents } from 'switch-framework';
+import { SwTabBar } from '../../components/SwTabBar.js';
+import { SwHomeScreen } from './index.js';
+import { SwExploreScreen } from './explore.js';
 
-export const tabsLayout = Tabs({
-  name: 'sw-tabs-layout',
-  initialTab: 'home',
-  tabs: [
+registerComponents([SwTabBar]);
+
+export class SwTabsLayout extends TabLayout {
+  static tag = 'sw-tabs-layout';
+  static initialTab = 'home';
+  static tabs = [
     {
       name: 'home',
       title: 'Home',
       icon: 'home',
       path: '/home',
       screen: 'sw-home-screen',
-      match: ['home']
+      match: ['home'],
+      initialRoute: 'home'
     },
     {
       name: 'explore',
@@ -18,31 +24,15 @@ export const tabsLayout = Tabs({
       icon: 'compass',
       path: '/explore',
       screen: 'sw-explore-screen',
-      match: ['explore']
+      match: ['explore'],
+      initialRoute: 'explore'
     }
-  ],
-  options: {
-    position: 'bottom'
-  }
-});
-
-export class SwTabsLayout extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  getContentContainer() {
-    return this.shadowRoot.querySelector('.tabcontainer');
-  }
+  ];
+  static options = { position: 'bottom' };
+  static screens = [SwHomeScreen, SwExploreScreen];
 
   render() {
-    this.shadowRoot.innerHTML = `
-      ${this.styleSheet()}
+    return `
       <div class="layout">
         <div class="tabcontainer"></div>
         <div class="tabbar">
@@ -54,72 +44,46 @@ export class SwTabsLayout extends HTMLElement {
 
   styleSheet() {
     return `
-      <style> 
-      :host {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: inherit;
-    overflow: hidden;
-    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
-}
-
-* {
-    box-sizing: border-box;
-    font-family: inherit
-}
-
-
-.layout {
-  min-height: 0;
-  height: 100%;
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
-  overflow: hidden;
-}
-
-.tabbar {
-  height: auto;
-  position: sticky;
-  bottom: 0;
-  z-index: 50;
-}
-
-
-.tabcontainer {
-  z-index: 1;
-  min-height: 0;
-  overflow: auto;
-  overflow-x: hidden;
-  padding-bottom: calc(12px + 56px + env(safe-area-inset-bottom, 0px));
-}
-
-</style>
+      <style>
+        :host {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          height: inherit;
+          overflow: hidden;
+          font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+        }
+
+        * {
+          box-sizing: border-box;
+          font-family: inherit;
+        }
+
+        .layout {
+          min-height: 0;
+          height: 100%;
+          display: grid;
+          grid-template-rows: minmax(0, 1fr) auto;
+          overflow: hidden;
+        }
+
+        .tabbar {
+          height: auto;
+          position: sticky;
+          bottom: 0;
+          z-index: 50;
+        }
+
+        .tabcontainer {
+          z-index: 1;
+          min-height: 0;
+          overflow: auto;
+          overflow-x: hidden;
+          padding-bottom: calc(12px + 56px + env(safe-area-inset-bottom, 0px));
+        }
+      </style>
     `;
   }
 }
 
-if (!customElements.get('sw-tabs-layout')) {
-  customElements.define('sw-tabs-layout', SwTabsLayout);
-}
-
-export const screens = [
-  Tabs.screen({
-    name: 'home',
-    path: '/home',
-    title: 'Home',
-    tag: 'sw-home-screen',
-    layout: 'tabs'
-  }),
-  Tabs.screen({
-    name: 'explore',
-    path: '/explore',
-    title: 'Explore',
-    tag: 'sw-explore-screen',
-    layout: 'tabs'
-  })
-];
-
-tabsLayout.screens = screens;
-
-export default tabsLayout;
+export default SwTabsLayout;