Registry / web-framework / cyclic-router

cyclic-router

library6.0.0jsnpmunverified

A routing library for Cycle.js applications, wrapping the main function to provide route matching and navigation. Current stable version is 6.0.0, released sporadically with a focus on incremental improvements. Unlike older versions (V4 and below) that acted as drivers, V5+ uses a `routerify` wrapper that works with `@cycle/history` and supports route parameters, basename configuration, and raw history access. Differentiators include integration with switch-path matcher and explicit route-to-component mapping via `routedComponent()`. Requires peer dependencies `@cycle/history` and `history`.

web-framework http-networking

npm install cyclic-router

github ↗package ↗

INSTALL

IMPORT

SIG · CYCLIC-ROUTER

cyclic-router

web-frameworkjavascriptv6.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

routerify

✓ import { routerify } from 'cyclic-router'

✗ const routerify = require('cyclic-router').routerify

ESM import preferred; CommonJS require also works with Node.js but may have interop issues.

RouterOptions

✓ import { RouterOptions } from 'cyclic-router'

✗ const RouterOptions = require('cyclic-router').RouterOptions

TypeScript type export; only available when using TypeScript via 'import type'.

routedComponent

✓ sources.router.routedComponent({...})(sources)

✗ sources.router.routedComponent({...})(sources.DOM)

routedComponent expects the full sources object, not just DOM, to pass to nested components.

Minimal Cycle.js app using routerify to route between Home and Other components.

import xs from 'xstream'; import { run } from '@cycle/run'; import { makeDOMDriver } from '@cycle/dom'; import { routerify } from 'cyclic-router'; import { makeHistoryDriver } from '@cycle/history'; import switchPath from 'switch-path'; function HomeComponent(sources) { return { DOM: xs.of('<div>Home</div>') }; } function OtherComponent(sources) { return { DOM: xs.of('<div>Other</div>') }; } function main(sources) { const pageSinks$ = sources.router.routedComponent({ '/': HomeComponent, '/other': OtherComponent })(sources); return { DOM: pageSinks$.map(c => c.DOM).flatten(), router: xs.of('/other') }; } const mainWithRouting = routerify(main, switchPath); run(mainWithRouting, { DOM: makeDOMDriver('#app'), history: makeHistoryDriver() });

Debug

Known issues

breakingV5 changed from a driver-based architecture to a main wrapper (routerify). Driver patterns from V4 are incompatible.

fix

Upgrade to V5+ and wrap your main function with routerify, passing sources.router instead of sources.history.

affects: <5.0.0

deprecatedV4 and earlier are deprecated; new features and fixes only for V5+.

fix

Upgrade to cyclic-router V5+.

affects: <5.0.0

gotcharoutedComponent expects the full sources object, not just DOM. Passing only DOM will cause nested components to receive undefined sources.

fix

Always pass sources (the full sources object) to routedComponent's returned function.

affects: >=5.0.0

gotchaThe router sink is named 'router' by default, but it proxies the history driver. Sinks named 'history' will be hidden unless omitHistory is set to false.

fix

Use 'router' for navigation; set omitHistory: false if you need raw history access.

affects: >=5.0.0

Errors

Common errors & fixes

Cannot find module '@cycle/history'

@cycle/history is a peer dependency not automatically installed.

fix

npm install @cycle/history

TypeError: sources.router.routedComponent is not a function

Cycle.js main function not wrapped with routerify, or routerify not called correctly.

fix

Ensure you wrap main: const mainWithRouting = routerify(main, switchPath); and use sources.router in main.

export 'routerify' was not found in 'cyclic-router'

Wrong import syntax or old version of cyclic-router (V4 or earlier).

fix

Update to cyclic-router V5+ and use import { routerify } from 'cyclic-router'.

Upgrade

Version history

6.0.0latest on npm

Audit

Dependencies

@cycle/historyrequiredPeer dependency; provides the underlying driver for browser history interactions.

historyrequiredPeer dependency; used by @cycle/history under the hood.

switch-pathoptionalRecommended route matcher; injected into routerify.

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/cyclejs-community/cyclic-router ↗

packagehttps://www.npmjs.com/package/cyclic-router ↗