Frikki/dialogue.js

## dialogue.js
/** @jsx hJSX */

import {hJSX} from '@cycle/dom';

const DIALOGUE_NAME = `dialogue`;

let idSuffix = 0;

function makeCycleId() {
  return `${DIALOGUE_NAME}-${idSuffix++}`;
}

function intent({DOM, cycleId}) {
  return {
    isClicked$: DOM.select(`.${cycleId}`).events(`click`)
      .map(() => true)
      .startWith(false),
  };
}

function model({props$, actions}) {
  return props$.combineLatest(
    actions.isClicked$,
    (props, isClicked) => {
    return {
      data: isClicked ?
        <span style={{whiteSpace: `nowrap`}}>I was clicked</span> :
        `Click me!`,
      text: props.text,
    };
  });
}

function view({state$, cycleId}) {
  return state$.map(
    (state) => ( // eslint-disable-line
      <div className={`${cycleId} ${DIALOGUE_NAME}`}>
        {state.text} {state.data}
      </div>
    )
  );
}

function dialogue({DOM, props$, optCycleId = makeCycleId()}) {
  const cycleId = optCycleId.trim();
  const actions = intent(DOM, cycleId);
  const state$ = model(actions);

  return {
    DOM: view({props$, state$}, cycleId),
    cycleId,
    state$,
  };
}

export default dialogue;

## index.html
<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

  <title>Simple Cycle.js (Nested) Dialogue with MVI Example</title>
</head>
<body>

  <section class="app-container"></section>

  <script src="main.js"></script>

</body>
</html>

## main.js
/** @jsx hJSX */

import {run} from '@cycle/core';
import {hJSX, makeDOMDriver} from '@cycle/dom';
import dialogue from './dialogue.js';

function main({DOM}) {
  const dialogueInstance = dialogue(
    {DOM, props$: Rx.Observable.just({
      text: `Unicorns cycle on rainbows!`,
    })}
  );

  return {
    DOM: Rx.Observable.combineLatest(
      dialogueInstance.DOM,
      dialogueInstance.state$,
      (dialogueVTree, dialogueState) => (
        <div>
          {dialogueVTree}
          <p>
            The dialogue state data is: {dialogueState.data}
            The dialogue state text is: {dialogueState.text}
          </p>
        </div>
      )
    ),
  };
}

run(main, {
  DOM: makeDOMDriver(`.app-container`),
});
	/** @jsx hJSX */

	import {hJSX} from '@cycle/dom';

	const DIALOGUE_NAME = `dialogue`;

	let idSuffix = 0;

	function makeCycleId() {
	return `${DIALOGUE_NAME}-${idSuffix++}`;
	}

	function intent({DOM, cycleId}) {
	return {
	isClicked$: DOM.select(`.${cycleId}`).events(`click`)
	.map(() => true)
	.startWith(false),
	};
	}

	function model({props$, actions}) {
	return props$.combineLatest(
	actions.isClicked$,
	(props, isClicked) => {
	return {
	data: isClicked ?
	<span style={{whiteSpace: `nowrap`}}>I was clicked</span> :
	`Click me!`,
	text: props.text,
	};
	});
	}

	function view({state$, cycleId}) {
	return state$.map(
	(state) => ( // eslint-disable-line
	<div className={`${cycleId} ${DIALOGUE_NAME}`}>
	{state.text} {state.data}
	</div>
	)
	);
	}

	function dialogue({DOM, props$, optCycleId = makeCycleId()}) {
	const cycleId = optCycleId.trim();
	const actions = intent(DOM, cycleId);
	const state$ = model(actions);

	return {
	DOM: view({props$, state$}, cycleId),
	cycleId,
	state$,
	};
	}

	export default dialogue;
	<!DOCTYPE html>
	<html>
	<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
	content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

	<title>Simple Cycle.js (Nested) Dialogue with MVI Example</title>
	</head>
	<body>

	<section class="app-container"></section>

	<script src="main.js"></script>

	</body>
	</html>
	/** @jsx hJSX */

	import {run} from '@cycle/core';
	import {hJSX, makeDOMDriver} from '@cycle/dom';
	import dialogue from './dialogue.js';

	function main({DOM}) {
	const dialogueInstance = dialogue(
	{DOM, props$: Rx.Observable.just({
	text: `Unicorns cycle on rainbows!`,
	})}
	);

	return {
	DOM: Rx.Observable.combineLatest(
	dialogueInstance.DOM,
	dialogueInstance.state$,
	(dialogueVTree, dialogueState) => (
	<div>
	{dialogueVTree}
	<p>
	The dialogue state data is: {dialogueState.data}
	The dialogue state text is: {dialogueState.text}
	</p>
	</div>
	)
	),
	};
	}

	run(main, {
	DOM: makeDOMDriver(`.app-container`),
	});