open-index/open-npm huggingface dataset:
npm package: @react-router-modules/cli
Description: Scaffolding CLI for the modular-react framework (React Router integration). Creates projects, modules, and stores with full wiring.
Latest version: 2.0.2

# @react-router-modules/cli

Scaffolding CLI for the modular-react framework (React Router integration). Creates projects, modules, and stores with full wiring.

## Commands

```bash
react-router-modules init <name> --scope @myorg --module dashboard   # New project
react-router-modules create module <name> --route billing             # New module
react-router-modules create store <name>                              # New Zustand store
```

All commands support interactive (prompts) and non-interactive (flags) modes. See the [main README](https://github.com/kibertoad/modular-react#cli-reference) for full documentation.

## Development

Requires Node.js 22+.

```bash
pnpm build          # Compile TypeScript
pnpm dev            # Watch mode
```

## Testing

### Unit tests (cli-testlab)

Tests CLI commands by executing them as child processes and asserting on output and generated files.

```bash
pnpm test
```

### E2E tests (Playwright)

Smoke tests that validate the full framework end-to-end: scaffold a project via CLI, start the dev server, and interact with the served UI using Playwright.

```bash
pnpm test:e2e:setup    # Scaffold project, build framework, install deps
pnpm test:e2e:server   # Start vite dev server on port 5188 (run in background)
pnpm test:e2e          # Run Playwright tests against the running server
```

The setup script uses `link:` overrides to point `@react-router-modules/core` and `@react-router-modules/runtime` to the local built packages.

To re-scaffold from scratch:

```bash
pnpm clean             # Remove dist + test artifacts
pnpm build             # Rebuild CLI
pnpm test:e2e:setup    # Re-scaffold
```
npm package: @react-router-modules/core
Description: Core types and utilities for defining modules with React Router. Provides `defineModule`, `createSharedHooks`, scoped stores, and all shared type definitions.
Latest version: 2.0.1

# @react-router-modules/core

Core types and utilities for defining modules with React Router. Provides `defineModule`, `createSharedHooks`, scoped stores, and all shared type definitions.

## Installation

```bash
npm install @react-router-modules/core
```

## What's included

- **Module definition**: `defineModule`, `defineSlots`
- **Types**: `ModuleDescriptor` (with React Router `RouteObject` support), `LazyModuleDescriptor`, `NavigationItem`, `ModuleLifecycle`, `ReactiveService`, `SlotMap`, `SlotMapOf`, `ZoneMap`, `ZoneMapOf`
- **Shared dependencies**: `SharedDependenciesContext`, `createSharedHooks` (returns `useStore`, `useService`, `useReactiveService`, `useOptional`)
- **Scoped stores**: `createScopedStore` with `useScoped` hook
- **Detection**: `isStoreApi`, `isReactiveService`, `separateDeps`

## Usage

```typescript
import { defineModule } from "@react-router-modules/core";

export default defineModule<AppDependencies, AppSlots>({
  id: "billing",
  version: "0.1.0",
  createRoutes: () => [
    {
      path: "billing",
      children: [
        {
          index: true,
          lazy: () => import("./pages/BillingDashboard.js").then((m) => ({ Component: m.default })),
        },
      ],
    },
  ],
  navigation: [{ label: "Billing", to: "/billing", group: "finance" }],

  // Static slots (always present)
  slots: { commands: [{ id: "billing:export", label: "Export", onSelect: () => {} }] },

  // Dynamic slots (re-evaluated on recalculateSlots())
  dynamicSlots: (deps) => ({
    commands:
      deps.auth.user?.role === "admin"
        ? [{ id: "billing:void", label: "Void Invoice", onSelect: () => {} }]
        : [],
  }),
});
```

See the [main documentation](https://github.com/kibertoad/modular-react#readme) for the full guide.
npm package: @react-router-modules/runtime
Description: Application assembly layer for the modular-react framework (React Router integration). Takes modules and configuration, produces a running app with routing, slots, zones, navigation, and provider wiring.
Latest version: 2.0.1

# @react-router-modules/runtime

Application assembly layer for the modular-react framework (React Router integration). Takes modules and configuration, produces a running app with routing, slots, zones, navigation, and provider wiring.

## Installation

```bash
npm install @react-router-modules/runtime
```

## What's included

- **Registry**: `createRegistry` (assembles modules into a running app)
- **Zones**: `useZones` (reads zone components from matched route `handle`), `useActiveZones` (merges route zones with active module zones)
- **Types**: `ModuleRegistry`, `ResolveOptions`, `RegistryConfig`, `ApplicationManifest`
- **Re-exported from `@modular-react/core`**: `buildSlotsManifest`, `collectDynamicSlotFactories`, `evaluateDynamicSlots`, `buildNavigationManifest`, `validateNoDuplicateIds`, `validateDependencies`, `NavigationGroup`, `NavigationManifest`, `ModuleEntry`, `DynamicSlotFactory`, `SlotFilter`
- **Re-exported from `@modular-react/react`**: `useNavigation`, `useSlots`, `useRecalculateSlots`, `useModules`, `getModuleMeta`, `ModuleErrorBoundary`, `NavigationContext`, `SlotsContext`, `RecalculateSlotsContext`, `ModulesContext`, `DynamicSlotsProvider`, `createSlotsSignal`

## Usage

```typescript
import { createRegistry } from "@react-router-modules/runtime";
import billingModule from "./modules/billing";

const registry = createRegistry<AppDependencies, AppSlots>({
  stores: { auth: authStore },
  services: { httpClient },
  slots: { commands: [] },
});

registry.register(billingModule);

const { App, recalculateSlots } = registry.resolve({
  rootComponent: Layout,
  indexComponent: HomePage,
});

// Re-evaluate dynamic slots after auth state changes
authStore.subscribe((state, prev) => {
  if (state.isAuthenticated !== prev.isAuthenticated) {
    recalculateSlots();
  }
});
```

Modules can contribute conditional slot entries via `dynamicSlots` and trigger re-evaluation from components via `useRecalculateSlots()`. The shell can apply cross-cutting filters via `slotFilter` on `resolve()`.

See the [main documentation](https://github.com/kibertoad/modular-react#readme) for the full guide.
npm package: @react-router-modules/testing
Description: Testing utilities for modules. Render modules in isolation with mocked dependencies.
Latest version: 2.0.1

# @react-router-modules/testing

Testing utilities for modules. Render modules in isolation with mocked dependencies.

## Installation

```bash
npm install -D @react-router-modules/testing
```

## What's included

- **`renderModule`**: renders a module with React Router in a test environment
- **`resolveModule`**: resolves module contributions (slots, lifecycle) without rendering
- **`createMockStore`**: creates a zustand store pre-populated with test state
- **Types**: `RenderModuleOptions`, `ResolveModuleOptions`, `ResolveModuleResult`

## Usage

```typescript
import { renderModule, createMockStore } from "@react-router-modules/testing";

const result = await renderModule(billingModule, {
  route: "/billing",
  deps: {
    auth: createMockStore<AuthStore>({ isAuthenticated: true }),
    httpClient: { get: vi.fn() },
  },
});

expect(result.getByText("Billing Dashboard")).toBeTruthy();
```

Both `renderModule` and `resolveModule` automatically evaluate `dynamicSlots` when present on a module, using the provided `deps` to build the dependencies snapshot.

See the [main documentation](https://github.com/kibertoad/modular-react#readme) for the full guide.