Piral Cycle.js integration example

PiralCycleJsCrossFx.tsx

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import '@webcomponents/webcomponentsjs/webcomponents-loader';
import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';

import * as React from 'react';
import { render } from 'react-dom';
import { createInstance, LoadingIndicatorProps, Piral, SetComponent, SetRoute } from 'piral-core';
import { createVueApi } from 'piral-vue';
import { createNgApi } from 'piral-ng';
import { createNgjsApi } from 'piral-ngjs';
import { createHyperappApi } from 'piral-hyperapp';
import { createInfernoApi } from 'piral-inferno';
import { createPreactApi } from 'piral-preact';
import { createLazyApi } from 'piral-lazy';
import { createLitElApi } from 'piral-litel';
import { createMithrilApi } from 'piral-mithril';
import { createAureliaApi } from 'piral-aurelia';
import { createRiotApi } from 'piral-riot';
import { createElmApi } from 'piral-elm';
import { createSvelteApi } from 'piral-svelte';
import { createBlazorApi } from 'piral-blazor';
import { createSolidApi } from 'piral-solid';
import { createDashboardApi, Dashboard, TileComponentProps } from 'piral-dashboard';
import { Stream } from 'xstream';
import { Sources } from '@cycle/run';
import { div, h3, p, button } from '@cycle/dom';
import xs from 'xstream';
import { createCycleApi, PiralDomDrivers } from 'piral-cycle';

const Loader: React.FC<LoadingIndicatorProps> = () => (
  <div className="app-center">
    <div className="spinner circles">Loading ...</div>
  </div>
);

const DashboardContainer: React.FC = ({ children }) => <div className="tiles">{children}</div>;

const Layout: React.FC = ({ children }) => (
  <div className="app-container">
    <div className="app-header">
      <h1>Cross Framework Sample</h1>
    </div>
    <div className="app-content">{children}</div>
    <div className="app-footer">
      For more information or the source code check out our{' '}
      <a href="https://github.com/smapiot/piral">GitHub repository</a>.
    </div>
  </div>
);

const instance = createInstance({
  extendApi: [
    createLazyApi(),
    createVueApi(),
    createNgApi(),
    createNgjsApi(),
    createHyperappApi(),
    createInfernoApi(),
    createPreactApi(),
    createLitElApi(),
    createMithrilApi(),
    createAureliaApi(),
    createRiotApi(),
    createElmApi(),
    createSvelteApi(),
    createBlazorApi(),
    createSolidApi(),
    createDashboardApi(),
    createCycleApi(),
  ],
  requestPilets() {
    return fetch('https://feed.piral.cloud/api/v1/pilet/cross-fx')
      .then(res => res.json())
      .then(res => res.items);
  },
});

const app = (
  <Piral instance={instance}>
    <SetComponent name="LoadingIndicator" component={Loader} />
    <SetComponent name="Layout" component={Layout} />
    <SetComponent name="DashboardContainer" component={DashboardContainer} />
    <SetRoute path="/" component={Dashboard} />
  </Piral>
);

const root = instance.root;

function main(sources: Sources<PiralDomDrivers<TileComponentProps>>) {
  const props$: Stream<TileComponentProps> = sources.props;

  const action$ = xs.merge(
    sources.DOM.select('#cycle-inc')
      .events('click')
      .mapTo(+1),

    sources.DOM.select('#cycle-dec')
      .events('click')
      .mapTo(-1),
  );
  const count$ = action$.fold((x, y) => x + y, 0);
  const tile$ = xs.combine(props$, count$);

  const vdom$ = tile$.map(([props, count]) =>
    div('.tile', [
      h3(`Cycle: ${count}`),
      p([`${props.rows} rows and ${props.columns} columns`, root.CycleExtension({ name: 'smiley' })]),
      button('#cycle-inc', 'Increment'),
      button('#cycle-dec', 'Decrement'),
    ]),
  );

  return { DOM: vdom$ };
}

root.registerTile(root.fromCycle(main), {
  initialColumns: 2,
  initialRows: 2,
});

render(app, document.querySelector('#app'));