This is a plugin that only has a peer dependency to @cycle/dom
and related packages. What piral-cycle
brings to the table is a set of Pilet API extensions that can be used with piral
or piral-core
.
The set includes a Cycle.js converter for any component registration, as well as a fromCycle
shortcut and a CycleExtension
component.
By default, these API extensions are not integrated in piral
, so you'd need to add them to your Piral instance.
The following functions are brought to the Pilet API.
Transforms a standard Cycle.js component into a component that can be used in Piral, essentially wrapping it with a reference to the corresponding converter.
The extension slot component to be used in Cycle.js components.
::: summary: For pilet authors
You can use the fromCycle
function from the Pilet API to convert your Cycle.js components to components usable by your Piral instance.
Example use:
import { PiletApi } from '<name-of-piral-instance>';
import { CyclePage } from './CyclePage';
export function setup(piral: PiletApi) {
piral.registerPage('/sample', piral.fromCycle(CyclePage));
}
Piral provides two drivers to your Cycle.js component. Here, TProps
are properties provided by Piral, e.g., TileComponentProps
.
export interface PiralDomDrivers<TProps> extends Drivers {
/**
* A DOM Driver giving access to the DOM where the component is mounted.
*/
DOM: Driver<Stream<VNode>, MainDOMSource>;
/**
* A driver giving access to Piral specific properties passed down to the component.
*/
props: Driver<void, Stream<TProps>>;
}
Within Cycle.js components the Piral Cycle.js extension component can be used by referring to CycleExtension
, e.g.,
CycleExtension({ name: "name-of-extension" })
Alternatively, if piral-cycle
has not been added to the Piral instance you can install and use the package also from a pilet directly.
import { PiletApi } from '<name-of-piral-instance>';
import { fromCycle } from 'piral-cycle/convert';
import { CyclePage } from './CyclePage';
export function setup(piral: PiletApi) {
piral.registerPage('/sample', fromCycle(CyclePage));
}
:::
::: summary: For Piral instance developers
Using Cycle.js with Piral is as simple as installing piral-cycle
and Cycle.js:
-
@cycle/dom
: 22.x -
@cycle/run
: 5.x -
xstream
: 11.x
import { createCycleApi } from 'piral-cycle';
The integration looks like:
const instance = createInstance({
// important part
plugins: [createCycleApi()],
// ...
});
The @cycle/run
, @cycle/dom
and xstream
packages should be shared with the pilets via the package.json:
{
"importmap": {
"imports": {
"@cycle/run": "",
"@cycle/dom": "",
"xstream": ""
}
}
}
:::
Piral is released using the MIT license. For more information see the license file.