{"id":13010,"library":"create-switch-framework-app","title":"Create Switch Framework App CLI","description":"create-switch-framework-app is a command-line interface (CLI) tool designed to scaffold new applications utilizing the Switch Framework. It facilitates the generation of project structures for both web and Electron desktop application development. Currently at version 0.2.5, the package is explicitly stated to be under maintenance, with its associated framework documentation still in an unfinished state. The underlying Switch Framework emphasizes a component-based architecture, featuring its own reactive state management utilities like `createState`, `updateState`, and `getState`, alongside a custom `SwitchComponent` base class for building interactive elements. Its early stage and 'under maintenance' status suggest a potentially slower release cadence and an evolving API, making it suitable for early adopters. This CLI serves as the official and recommended entry point for developers starting a new project with the Switch Framework.","status":"maintenance","version":"0.2.5","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","cli","scaffold","create-app","switch-framework","create-switch-framework-app","switch-framework-backend","javascript new framework"],"install":[{"cmd":"npm install create-switch-framework-app","lang":"bash","label":"npm"},{"cmd":"yarn add create-switch-framework-app","lang":"bash","label":"yarn"},{"cmd":"pnpm add create-switch-framework-app","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Switch Framework modules are ESM-only, requiring import statements.","wrong":"const { SwitchComponent } = require('switch-framework');","symbol":"SwitchComponent","correct":"import { SwitchComponent } from 'switch-framework';"},{"note":"State management functions are named exports from the main package.","wrong":"import createState from 'switch-framework/createState';","symbol":"createState","correct":"import { createState } from 'switch-framework';"},{"note":"These are named exports for modifying and accessing global state.","symbol":"updateState, getState","correct":"import { updateState, getState } from 'switch-framework';"}],"quickstart":{"code":"import { SwitchComponent, createState, updateState, getState } from 'switch-framework';\n\n// components/Counter.js\ncreateState('counter', 0);\n\nexport class Counter extends SwitchComponent {\n  static tag = 'sw-counter';\n  \n  static { this.useState('counter'); }\n\n  onMount() {\n    this.listener('#inc', 'click', () => {\n      updateState('counter', (n) => (n ?? 0) + 1);\n    });\n  }\n\n  render() {\n    const count = getState('counter') ?? 0;\n    return `\n      <div class=\"counter-wrap\">\n        <button id=\"inc\" class=\"counter-btn\">Count: ${count}</button>\n      </div>\n    `;\n  }\n\n  styleSheet() {\n    return `\n      <style>\n        .counter-wrap { display: flex; justify-content: center; padding: 20px; }\n        .counter-btn { \n          padding: 12px 24px; \n          font-size: 16px; \n          font-weight: 600;\n          background: var(--main_color, #6366f1);\n          color: white;\n          border: none;\n          border-radius: 8px;\n          cursor: pointer;\n          font-family: 'Montserrat', sans-serif;\n        }\n        .counter-btn:hover { opacity: 0.9; }\n        .counter-btn:active { transform: scale(0.98); }\n      </style>\n    `;\n  }\n}\n\n// app/index.js (example usage)\n// Assuming Counter is imported as above\n// In your main application's render method or equivalent:\n// return `<sw-counter></sw-counter>`;\n\nconsole.log(\"To run this example, first scaffold a project:\");\nconsole.log(\"npx create-switch-framework-app my-app\");\nconsole.log(\"Then integrate the component into your app's main render logic.\");","lang":"javascript","description":"Demonstrates creating a stateful counter component using Switch Framework's component lifecycle, reactive state management, and modern JavaScript syntax for auto re-rendering."},"warnings":[{"fix":"Be prepared to consult the source code or community for advanced usage; contribute to documentation efforts if possible.","message":"The Switch Framework, and by extension projects created by this CLI, is currently under maintenance and its documentation is not yet complete. This implies that developers might encounter unfinished features or require direct inspection of the source code.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Pin exact versions of 'switch-framework' in your project's package.json to avoid unexpected updates, and review release notes thoroughly before upgrading.","message":"As a package in early development (version 0.2.5), the Switch Framework is subject to frequent and potentially breaking API changes even across minor or patch releases. Stability is not guaranteed.","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Ensure your development environment uses Node.js 18 or a newer compatible version (e.g., via nvm or volta).","message":"The CLI and the generated projects require Node.js version 18 or higher. Using older Node.js versions will result in execution errors.","severity":"gotcha","affected_versions":"<=0.2.5"},{"fix":"For wider browser compatibility, configure your bundler (e.g., Webpack, Rollup, Vite) with Babel or similar tools to transpile modern JS features.","message":"The Switch Framework leverages modern JavaScript features like static initialization blocks (`static { ... }`). Ensure your build setup correctly transpiles these features if targeting environments that do not fully support them.","severity":"gotcha","affected_versions":">=0.2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update all import statements to use ES Module syntax: `import { Symbol } from 'package';`.","cause":"Attempting to use CommonJS 'require()' syntax to import modules from 'switch-framework', which are exclusively ES Modules.","error":"ReferenceError: require is not defined in ES module scope"},{"fix":"Navigate to your project directory created by `create-switch-framework-app` and run `npm install` or `yarn install`. Verify the import path is `from 'switch-framework'`.","cause":"The 'switch-framework' package is not installed in the project created by the CLI, or the import path is incorrect.","error":"Error: Cannot find module 'switch-framework'"},{"fix":"Check the `switchFramework.port` setting in `switch-framework-docs/package.json` for an alternative port, or terminate the process currently using port 3000.","cause":"When running the local documentation server (`npm run dev` in `switch-framework-docs`), another application is already occupying the default port 3000.","error":"Port 3000 is already in use"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"create-switch-framework-app"}