create-switch-framework-app 0.1.0 → 0.2.0

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

@@ -1,44 +1,55 @@
-export const screen = {
-  name: 'explore',
-  path: '/explore',
-  title: 'Explore',
-  tag: 'sw-explore-screen',
-  layout: 'tabs'
-};
-
-export class SwExploreScreen extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  render() {
-    this.shadowRoot.innerHTML = `
-      ${this.styleSheet()}
-      <div class="wrap">
-        <div class="h">Explore</div>
-        <div class="p">This is a placeholder tab. Replace it with whatever you want.</div>
-      </div>
-    `;
-  }
-
-  styleSheet() {
-    return `
-      <style>
-        :host{display:block;padding:18px;font-family:var(--font)}
-        *{box-sizing:border-box;font-family:inherit}
-        .wrap{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
-        .h{font-weight:1000;font-size:22px;color:var(--main_text)}
-        .p{color:var(--sub_text);font-weight:800;line-height:1.5}
-      </style>
-    `;
-  }
-}
-
-if (!customElements.get('sw-explore-screen')) {
-  customElements.define('sw-explore-screen', SwExploreScreen);
-}
+import { SwitchComponent } from 'switch-framework';
+
+export class SwExploreScreen extends SwitchComponent {
+  static screenName = 'explore';
+  static path = '/explore';
+  static title = 'Explore';
+  static tag = 'sw-explore-screen';
+  static layout = 'tabs';
+
+  render() {
+    return `
+      <div class="wrap">
+        <div class="h">Explore</div>
+        <div class="p">This is a placeholder tab. Replace it with whatever you want.</div>
+      </div>
+    `;
+  }
+
+  styleSheet() {
+    return `
+      <style>
+        :host {
+          display: block;
+          padding: 18px;
+          font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+        }
+
+        * {
+          box-sizing: border-box;
+          font-family: inherit;
+        }
+
+        .wrap {
+          max-width: 900px;
+          margin: 0 auto;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+        }
+
+        .h {
+          font-weight: 1000;
+          font-size: 22px;
+          color: var(--main_text, #000);
+        }
+
+        .p {
+          color: var(--sub_text, #666);
+          font-weight: 600;
+          line-height: 1.5;
+        }
+      </style>
+    `;
+  }
+}

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

@@ -1,30 +1,20 @@
-export const screen = {
-  name: 'home',
-  path: '/home',
-  title: 'Home',
-  tag: 'sw-home-screen',
-  layout: 'tabs'
-};
-
-export class SwHomeScreen extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-  }
+import { SwitchComponent } from 'switch-framework';
 
-  connectedCallback() {
-    this.render();
-  }
+export class SwHomeScreen extends SwitchComponent {
+  static screenName = 'home';
+  static path = '/home';
+  static title = 'Home';
+  static tag = 'sw-home-screen';
+  static layout = 'tabs';
 
   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">Tabs View</div>
         </div>
@@ -37,7 +27,7 @@ export class SwHomeScreen 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/(tabs)/index.js</div>
             </div>
             <div class="row">
               <div class="l">Dev tools</div>
@@ -212,7 +202,3 @@ export class SwHomeScreen extends HTMLElement {
     `;
   }
 }
-
-if (!customElements.get('sw-home-screen')) {
-  customElements.define('sw-home-screen', SwHomeScreen);
-}

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

@@ -1,158 +1,148 @@
-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);
-}
+import { SwitchComponent } from 'switch-framework';
+import { navigate, goBack } from 'switch-framework/router';
+
+export class SwUserNotFoundScreen extends SwitchComponent {
+  static screenName = '+not-found';
+  static path = '/+not-found';
+  static title = 'Not Found';
+  static tag = 'sw-user-not-found-screen';
+  static layout = 'stack';
+
+  static get observedAttributes() {
+    return ['path'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name === 'path' && oldVal !== newVal) {
+      this._renderToShadow();
+    }
+  }
+
+  connected() {
+    this.shadowRoot.getElementById('home')?.addEventListener('click', () => {
+      navigate('home');
+    });
+
+    this.shadowRoot.getElementById('back')?.addEventListener('click', () => {
+      goBack();
+    });
+  }
+
+  render() {
+    const path = this.getAttribute('path') || (typeof window !== 'undefined' ? window.location.pathname : '') || '';
+
+    return `
+      <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>
+    `;
+  }
+
+  styleSheet() {
+    return `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          min-height: 100dvh;
+          font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+        }
+
+        * {
+          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, #000);
+        }
+
+        .h {
+          margin-top: 10px;
+          font-weight: 1000;
+          font-size: 20px;
+          color: var(--main_text, #000);
+        }
+
+        .p {
+          margin-top: 6px;
+          color: var(--sub_text, #666);
+          font-weight: 800;
+        }
+
+        .path {
+          margin-top: 10px;
+          padding: 10px 12px;
+          border-radius: 14px;
+          background: var(--surface_2, #f5f5f5);
+          border: 1px solid var(--border_light, #e5e5e5);
+          font-weight: 900;
+          color: var(--main_text, #000);
+          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, #f5f5f5);
+          color: var(--main_text, #000);
+        }
+
+        .btn.secondary:hover {
+          background: var(--surface_3, #eee);
+        }
+      </style>
+    `;
+  }
+}
+
+export default SwUserNotFoundScreen;

package/templates/web/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(0, 'example-counter');
 
-    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/web/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/web/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/web/base/components/SwSplashScreen.js

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