create-switch-framework-app 0.1.0 → 0.2.2

package/README.md

@@ -1,25 +1,25 @@
-# create-switch-framework-app
-
-Status: Under maintenance. Documentation is not ready yet.
-
-create-switch-framework-app is a CLI for initializing apps that use Switch Framework tools.
-
-It can scaffold projects for:
-
-- Web app development
-- Electron desktop app development
-
-## Usage
-
-```bash
-npx create-switch-framework-app my-app
-```
-
-Or install globally:
-
-```bash
-npm i -g create-switch-framework-app
-create-switch-framework-app my-app
-```
-
-Made by Switcherfaiz
+# create-switch-framework-app
+
+Status: Under maintenance. Documentation is not ready yet.
+
+create-switch-framework-app is a CLI for initializing apps that use Switch Framework tools.
+
+It can scaffold projects for:
+
+- Web app development
+- Electron desktop app development
+
+## Usage
+
+```bash
+npx create-switch-framework-app my-app
+```
+
+Or install globally:
+
+```bash
+npm i -g create-switch-framework-app
+create-switch-framework-app my-app
+```
+
+Made by Switcherfaiz

package/bin/create-switch-framework-app.js

@@ -150,37 +150,29 @@ async function askQuestions({ projectName, yes, noInstall, appTypeOverride, port
 function serverJsTemplate({ port, appType }) {
   const staticRoot = appType === 'both' ? 'web' : '.';
 
-  return `const express = require('express');\n` +
-    `const session = require('express-session');\n` +
+  return `require('dotenv').config();\n\n` +
     `const path = require('node:path');\n` +
-    `require('dotenv').config();\n\n` +
-    `const { checkRestrict } = require('switch-framework-backend/middleware');\n\n` +
-    `const app = express();\n` +
-    `const PORT = process.env.PORT ? Number(process.env.PORT) : ${port};\n\n` +
-    `app.use(express.json({ limit: '25mb' }));\n\n` +
-    `app.use(session({\n` +
-    `  secret: process.env.SESSION_SECRET || 'dev-secret',\n` +
-    `  resave: false,\n` +
-    `  saveUninitialized: false\n` +
-    `}));\n\n` +
-    `// Serve switch-framework to the browser from node_modules\n` +
-    `app.use('/switch-framework', express.static(path.join(__dirname, 'node_modules', 'switch-framework')));\n\n` +
-    `// Serve project files\n` +
-    `app.use(express.static(path.join(__dirname, '${staticRoot}')));\n\n` +
-    `const restrictConfig = {\n` +
-    `  public: ['/', '/login'],\n` +
-    `  rules: [\n` +
-    `    { prefix: '/admin', roles: ['admin'] },\n` +
-    `    { prefix: '/billing', roles: ['billing', 'admin'] },\n` +
-    `    { path: '/login', roles: ['*'] }\n` +
-    `  ]\n` +
-    `};\n\n` +
-    `app.use(checkRestrict(restrictConfig));\n\n` +
-    `app.get('*', (req, res) => {\n` +
-    `  res.sendFile(path.join(__dirname, '${staticRoot}', 'index.html'));\n` +
+    `const switchFrameworkBackend = require('switch-framework-backend');\n\n` +
+    `switchFrameworkBackend.config({\n` +
+    `  PORT: process.env.PORT ? Number(process.env.PORT) : ${port},\n` +
+    `  staticRoot: path.join(__dirname, '${staticRoot}'),\n` +
+    `  session: {\n` +
+    `    secret: process.env.SESSION_SECRET || 'dev-secret',\n` +
+    `    resave: false,\n` +
+    `    saveUninitialized: false\n` +
+    `  }\n` +
     `});\n\n` +
-    `app.listen(PORT, () => {\n` +
-    `  console.log('Switch Framework app running at http://localhost:' + PORT);\n` +
+    `const app = switchFrameworkBackend();\n\n` +
+    `app.initServer((server) => {\n` +
+    `  const restrictConfig = {\n` +
+    `    public: ['/', '/login'],\n` +
+    `    rules: [\n` +
+    `      { prefix: '/admin', roles: ['admin'] },\n` +
+    `      { prefix: '/billing', roles: ['billing', 'admin'] },\n` +
+    `      { path: '/login', roles: ['*'] }\n` +
+    `    ]\n` +
+    `  };\n` +
+    `  server.use(switchFrameworkBackend.checkRestrict(restrictConfig));\n` +
     `});\n`;
 }
 
@@ -252,8 +244,8 @@ function createPackageJson({ packageName, appType, port, useLocal }) {
   // When --use-local is set, we intentionally do NOT add switch-framework deps to package.json
   // to avoid npm registry fetching during testing. We will npm link them instead.
   if (!useLocal) {
-    deps['switch-framework'] = '^0.1.0';
-    deps['switch-framework-backend'] = '^0.1.0';
+    deps['switch-framework'] = '^0.2.1';
+    deps['switch-framework-backend'] = '^0.2.0';
   }
 
   const pkg = {
@@ -270,8 +262,8 @@ function createPackageJson({ packageName, appType, port, useLocal }) {
 
   if (appType === 'electron' || appType === 'both') {
     pkg.devDependencies = {
-      electron: '^31.3.1',
-      'electron-builder': '^24.13.3'
+      electron: 'latest',
+      'electron-builder': 'latest'
     };
   }
 
@@ -289,9 +281,10 @@ async function copyDir(srcDir, destDir) {
   });
 }
 
-async function runNpmInstall({ cwd }) {
+async function runNpmInstall({ cwd, packages = [] }) {
+  const args = packages.length ? ['install', ...packages] : ['install'];
   return new Promise((resolve, reject) => {
-    const child = require('node:child_process').spawn('npm', ['install'], {
+    const child = require('node:child_process').spawn('npm', args, {
       cwd,
       stdio: 'inherit',
       shell: process.platform === 'win32'
@@ -323,7 +316,22 @@ async function runNpmLink({ cwd, packages }) {
   });
 }
 
+const DOCS_URL = 'https://github.com/Switcherfaiz/switch-framework-docs';
+
+function getCliVersion() {
+  try {
+    const pkgPath = path.join(__dirname, '..', 'package.json');
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    return pkg.version || '0.0.0';
+  } catch {
+    return '0.0.0';
+  }
+}
+
 async function main() {
+  const cliVersion = getCliVersion();
+  console.log(chalk.cyan(`\nWelcome to switch-framework CLI v${cliVersion}\n`));
+
   const { help, yes, noInstall, useLocal, appType: appTypeArg, port: portArg, projectName: rawProjectName } = parseArgs(process.argv);
   if (help) {
     printHelp();
@@ -447,6 +455,10 @@ async function main() {
       spinner.start('Installing dependencies (npm install)...');
       try {
         await runNpmInstall({ cwd: targetDir });
+        if (!useLocal) {
+          spinner.start('Ensuring switch-framework packages...');
+          await runNpmInstall({ cwd: targetDir, packages: ['switch-framework', 'switch-framework-backend'] });
+        }
         spinner.succeed('Dependencies installed');
       } catch (e) {
         spinner.warn('npm install failed (project was still created)');
@@ -491,6 +503,7 @@ async function main() {
       console.log('\nNote: web UI lives in ./web and electron files in ./electron');
     }
 
+    console.log('\n' + chalk.gray('Read the docs: ') + chalk.cyan(DOCS_URL));
     console.log('');
   } catch (err) {
     spinner.fail('Failed');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-switch-framework-app",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "Create a Switch Framework app",
   "github": "https://github.com/Switcherfaiz/create-switch-framework-app",
   "author":"Switcherfaiz",

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