create-switch-framework-app 0.1.0 → 0.2.2

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;

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