create-switch-framework-app 0.1.0 → 0.2.2

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

@@ -1,50 +1,30 @@
-import { Stack, registerScreens } from '/switch-framework/index.js';
-import tabsLayout from './(tabs)/_layout.js';
-
-const tabScreens = Array.isArray(tabsLayout?.screens) ? tabsLayout.screens : [];
-
-const stackScreens = [
-  Stack.screen({
-    name: 'index',
-    path: '/',
-    title: 'Welcome',
-    tag: 'sw-index-screen'
-  }),
-  Stack.screen({
-    name: '+not-found',
-    path: '/+not-found',
-    title: 'Not Found',
-    tag: 'sw-user-not-found-screen'
-  })
-];
-
-const screens = registerScreens({
-  stackScreens,
-  tabsLayout,
-  tabScreens,
-  validate: true
-}).screens;
-
-const layout = {
-  splash: 'sw-starter-splash',
-  initialRoute: 'index',
-  screens,
-
-  async init({ globalStates, renderSplashscreen }) {
+import { StackLayout, createState, registerComponents } from 'switch-framework';
+import { SwStarterSplashScreen } from '../components/SwStarterSplashScreen.js';
+import { SwTabBar } from '../components/SwTabBar.js';
+import { SwIndexScreen } from './index.js';
+import NotFoundScreen from './+not-found.js';
+import { SwTabsLayout } from './(tabs)/_layout.js';
+
+registerComponents([SwStarterSplashScreen, SwTabBar]);
+
+export class SwStackLayout extends StackLayout {
+  static tag = 'sw-stack-layout';
+  static stackScreens = [SwIndexScreen, NotFoundScreen];
+  static tabsLayout = SwTabsLayout;
+  static splash = 'sw-starter-splash';
+  static initialRoute = 'index';
+
+  static async init({ globalStates, renderSplashscreen }) {
     renderSplashscreen('sw-starter-splash');
 
-    // your async operation here that made splashscreen appear
-    await new Promise((resolve) => setTimeout(resolve, 3000));
+    // Example: create app-level state
+    createState('example-counter', 0);
 
-    globalStates.setState({
-      tabsLayout
-    });
+    // Simulate async init (e.g. load config, auth check)
+    await new Promise((resolve) => setTimeout(resolve, 3000));
 
-    return {
-      splash: 'sw-starter-splash',
-      initialRoute: 'index'
-    };
+    return { splash: 'sw-starter-splash', initialRoute: 'index' };
   }
-};
+}
 
-export default layout;
+export default SwStackLayout.getAppLayout();

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

@@ -1,37 +1,27 @@
-export const screen = {
-  name: 'index',
-  path: '/',
-  title: 'Welcome',
-  tag: 'sw-index-screen',
-  layout: 'stack'
-};
-
-export class SwIndexScreen extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-  }
-
-  async connectedCallback() {
-    this.render();
-
-    const replace = globalStates?.getState ? globalStates.getState('replace') : null;
-    const redirect = globalStates?.getState ? globalStates.getState('redirect') : null;
-
-    this.shadowRoot.querySelector('#go_home').addEventListener('click', () => {
-      if (typeof replace === 'function') return replace('home');
+import { SwitchComponent } from 'switch-framework';
+import { navigate } from 'switch-framework/router';
+
+export class SwIndexScreen extends SwitchComponent {
+  static screenName = 'index';
+  static path = '/';
+  static title = 'Welcome';
+  static tag = 'sw-index-screen';
+  static layout = 'stack';
+
+  connected() {
+    this.shadowRoot.querySelector('#go_home')?.addEventListener('click', () => {
+      navigate('home');
     });
   }
 
   render() {
-    this.shadowRoot.innerHTML = `
-      ${this.styleSheet()}
+    return `
       <div class="wrap">
         <div class="spacer-top"></div>
 
         <div class="hero">
           <div class="logo-container">
-            <img class="logo" src="/assets/logo.svg" alt="Expo" />
+            <img class="logo" src="/assets/logo.svg" alt="Switch Framework" />
           </div>
           <div class="title">Introducing<br>Switch Framework</div>
         </div>
@@ -44,7 +34,7 @@ export class SwIndexScreen extends HTMLElement {
           <div class="card">
             <div class="row">
               <div class="l">Try editing</div>
-              <div class="r">src/app/index.tsx</div>
+              <div class="r">src/app/index.js</div>
             </div>
             <div class="row">
               <div class="l">Dev tools</div>
@@ -259,7 +249,3 @@ export class SwIndexScreen extends HTMLElement {
     `;
   }
 }
-
-if (!customElements.get('sw-index-screen')) {
-  customElements.define('sw-index-screen', SwIndexScreen);
-}

package/templates/electron/base/assets/logo.svg

@@ -1,5 +1,5 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="8" y="8" width="144" height="144" rx="36" fill="#E60023"/>
-  <path d="M53 59C53 49.6112 60.6112 42 70 42H90C99.3888 42 107 49.6112 107 59V63C107 72.3888 99.3888 80 90 80H78C72.4772 80 68 84.4772 68 90V94C68 103.389 60.3888 111 51 111H50" stroke="white" stroke-width="12" stroke-linecap="round"/>
-  <path d="M110 111H94" stroke="white" stroke-width="12" stroke-linecap="round"/>
-</svg>
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="8" width="144" height="144" rx="36" fill="#E60023"/>
+  <path d="M53 59C53 49.6112 60.6112 42 70 42H90C99.3888 42 107 49.6112 107 59V63C107 72.3888 99.3888 80 90 80H78C72.4772 80 68 84.4772 68 90V94C68 103.389 60.3888 111 51 111H50" stroke="white" stroke-width="12" stroke-linecap="round"/>
+  <path d="M110 111H94" stroke="white" stroke-width="12" stroke-linecap="round"/>
+</svg>

package/templates/electron/base/components/SwSplashScreen.js

@@ -1 +1 @@
-export { SwStarterSplashScreen as SwSplashScreen } from './SwStarterSplashScreen.js';
+export { SwStarterSplashScreen as SwSplashScreen } from './SwStarterSplashScreen.js';

package/templates/electron/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>
+    `;
+  }
+}