Registry / web-framework / create-switch-framework-app

create-switch-framework-app

library0.2.5jsnpmunverified

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.

web-framework

npm install create-switch-framework-app

package ↗

INSTALL

IMPORT

SIG · CREATE-SWITCH-FRAM

create-switch-framework-app

web-frameworkjavascriptv0.2.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SwitchComponent

✓ import { SwitchComponent } from 'switch-framework';

✗ const { SwitchComponent } = require('switch-framework');

Switch Framework modules are ESM-only, requiring import statements.

createState

✓ import { createState } from 'switch-framework';

✗ import createState from 'switch-framework/createState';

State management functions are named exports from the main package.

updateState, getState

✓ import { updateState, getState } from 'switch-framework';

These are named exports for modifying and accessing global state.

Demonstrates creating a stateful counter component using Switch Framework's component lifecycle, reactive state management, and modern JavaScript syntax for auto re-rendering.

import { SwitchComponent, createState, updateState, getState } from 'switch-framework'; // components/Counter.js createState('counter', 0); export class Counter extends SwitchComponent { static tag = 'sw-counter'; static { this.useState('counter'); } onMount() { this.listener('#inc', 'click', () => { updateState('counter', (n) => (n ?? 0) + 1); }); } render() { const count = getState('counter') ?? 0; return ` <div class="counter-wrap"> <button id="inc" class="counter-btn">Count: ${count}</button> </div> `; } styleSheet() { return ` <style> .counter-wrap { display: flex; justify-content: center; padding: 20px; } .counter-btn { padding: 12px 24px; font-size: 16px; font-weight: 600; background: var(--main_color, #6366f1); color: white; border: none; border-radius: 8px; cursor: pointer; font-family: 'Montserrat', sans-serif; } .counter-btn:hover { opacity: 0.9; } .counter-btn:active { transform: scale(0.98); } </style> `; } } // app/index.js (example usage) // Assuming Counter is imported as above // In your main application's render method or equivalent: // return `<sw-counter></sw-counter>`; console.log("To run this example, first scaffold a project:"); console.log("npx create-switch-framework-app my-app"); console.log("Then integrate the component into your app's main render logic.");

create-switch-framework-app --version

Debug

Known issues

gotchaThe 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.

fix

Be prepared to consult the source code or community for advanced usage; contribute to documentation efforts if possible.

affects: >=0.2.0

breakingAs 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.

fix

Pin exact versions of 'switch-framework' in your project's package.json to avoid unexpected updates, and review release notes thoroughly before upgrading.

affects: >=0.2.0

gotchaThe CLI and the generated projects require Node.js version 18 or higher. Using older Node.js versions will result in execution errors.

fix

Ensure your development environment uses Node.js 18 or a newer compatible version (e.g., via nvm or volta).

affects: <=0.2.5

gotchaThe 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.

fix

For wider browser compatibility, configure your bundler (e.g., Webpack, Rollup, Vite) with Babel or similar tools to transpile modern JS features.

affects: >=0.2.0

Errors

Common errors & fixes

ReferenceError: require is not defined in ES module scope

Attempting to use CommonJS 'require()' syntax to import modules from 'switch-framework', which are exclusively ES Modules.

fix

Update all import statements to use ES Module syntax: `import { Symbol } from 'package';`.

Error: Cannot find module 'switch-framework'

The 'switch-framework' package is not installed in the project created by the CLI, or the import path is incorrect.

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'`.

Port 3000 is already in use

When running the local documentation server (`npm run dev` in `switch-framework-docs`), another application is already occupying the default port 3000.

fix

Check the `switchFramework.port` setting in `switch-framework-docs/package.json` for an alternative port, or terminate the process currently using port 3000.

Upgrade

Version history

0.2.5latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/create-switch-framework-app ↗