{"id":12111,"library":"switch-framework","title":"Switch Framework","description":"Switch Framework (version 0.2.5) is an early-stage frontend library designed for building web and Electron desktop applications. It emphasizes a \"runtime-first\" development workflow, aiming to allow applications to run without a traditional build step or bundler for basic setups. This approach means the framework is served and executed directly at runtime. It is intended to work in conjunction with `switch-framework-backend` for full functionality. The project is currently under active maintenance, but official documentation is not yet complete. Key differentiators include its bundler-less initial setup and specific targeting of both web and Electron environments, alongside a component-based architecture featuring integrated state management utilities. The framework is primarily developed by Switcherfaiz and has a companion CLI tool, `create-switch-framework-app`, for project initialization.","status":"maintenance","version":"0.2.5","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install switch-framework","lang":"bash","label":"npm"},{"cmd":"yarn add switch-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add switch-framework","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for full application functionality, particularly backend integration and data handling, as the framework is designed to work in tandem with it.","package":"switch-framework-backend","optional":false},{"reason":"While not a direct runtime dependency, this CLI tool is essential for initializing projects that utilize `switch-framework`, providing scaffolding for new applications.","package":"create-switch-framework-app","optional":true}],"imports":[{"note":"Base class for defining components; ESM-only since Node.js >=18 is required.","wrong":"const SwitchComponent = require('switch-framework');","symbol":"SwitchComponent","correct":"import { SwitchComponent } from 'switch-framework';"},{"note":"Function to initialize reactive application state.","symbol":"createState","correct":"import { createState } from 'switch-framework';"},{"note":"Function to modify existing reactive state, triggering component re-renders.","symbol":"updateState","correct":"import { updateState } from 'switch-framework';"},{"note":"Function to retrieve the current value of a reactive state variable.","symbol":"getState","correct":"import { getState } from 'switch-framework';"}],"quickstart":{"code":"import { SwitchComponent, createState, updateState, getState } from 'switch-framework';\n\n// This example assumes it's loaded as a module in an HTML file.\n// e.g., \n// And a element exists in the HTML body.\n\n// Initialize a global reactive state named 'counterValue'\ncreateState('counterValue', 0);\n\nexport class CounterComponent extends SwitchComponent {\n static tag = 'sw-counter'; // Define the custom element tag\n\n // Subscribe to state changes for automatic re-rendering\n static {\n this.useState('counterValue');\n }\n\n onMount() {\n // Attach a delegated click listener to the increment button\n this.listener('#incrementBtn', 'click', () => {\n // Update 'counterValue' state; (currentCount ?? 0) handles initial undefined\n updateState('counterValue', (currentCount) => (currentCount ?? 0) + 1);\n });\n }\n\n render(): string {\n const count = getState('counterValue') ?? 0;\n return `\n \n
\n \n
\n Current Count: ${count}\n
\n
\n `;\n }\n}\n\n// Register the custom element once the class is defined\n// Check if already defined to prevent errors in hot-reloading scenarios\nif (!customElements.get(CounterComponent.tag)) {\n customElements.define(CounterComponent.tag, CounterComponent);\n}\n","lang":"typescript","description":"Demonstrates a minimal Switch Framework custom component, defining a reactive counter that updates its display upon interaction, utilizing the framework's state management and lifecycle methods."},"warnings":[{"fix":"Developers should anticipate API changes. Refer to the latest source code or wait for official documentation for stable API usage and migration guides.","message":"The framework's API is currently unstable and subject to frequent changes. The package version (0.2.5) explicitly indicates it is in early development stages, meaning breaking changes can occur even between minor versions.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Rely on source code examination and community inference for usage patterns. Consider contributing to documentation efforts to accelerate its development.","message":"Official documentation is explicitly stated as 'not ready yet' in the README and GitHub repository. This significantly hinders development, troubleshooting, and understanding best practices.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure `switch-framework-backend` is installed, integrated, and configured correctly alongside `switch-framework` for intended application operation.","message":"The `switch-framework` is designed to work specifically with `switch-framework-backend`. Using the frontend framework standalone or attempting to integrate it with a different backend may lead to incomplete functionality or unexpected behavior.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Carefully evaluate the performance impact for complex applications. Consider implementing a bundler later in the development cycle if performance or advanced optimizations become critical, or if deploying to environments without full ES module support.","message":"The 'runtime-first' workflow, which avoids a traditional bundler for basic setups, might introduce performance considerations or complex dependency management in larger, production-grade applications, as it relies on native browser module loading.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `switch-framework-backend` via npm (`npm install switch-framework-backend`) and ensure it's properly initialized and accessible by your `switch-framework` application.","cause":"The companion backend package `switch-framework-backend` is not installed or properly configured, which is a required dependency for full functionality of the framework.","error":"Cannot find module 'switch-framework-backend'"},{"fix":"Ensure your HTML file loads the JavaScript/TypeScript entry point as a module (``) and that core components are correctly imported using `import { SwitchComponent } from 'switch-framework';`.","cause":"The `switch-framework` library, or its core components like `SwitchComponent`, was not correctly imported as an ES module or not loaded in the HTML context before component definition.","error":"ReferenceError: SwitchComponent is not defined (or similar 'Class extends value #