How to use the cyclejs.createIntent function in cyclejs

favorite$: Props.get("favorite$").merge(Intent.get("toggle$")).scan(false, function (favorite) {
        return !favorite;
      }).startWith(false),

      width$: Props.get("width$").startWith(100) };
  });

  var View = Cycle.createView(function (Model) {
    return {
      vtree$: Cycle.latest(Model, Object.keys(props), function (item) {
        return h("div", { className: Class({ picture: true, favorite: item.favorite }) }, [h("img", { src: item.src, width: item.width, title: item.title })]);
      }) };
  });

  var Intent = Cycle.createIntent(function (User) {
    return {
      toggle$: User.event$(".picture", "click").map(function () {
        return true;
      }) };
  });

  User.inject(View).inject(Model).inject(Intent, Props)[0].inject(User);

  return {
    // As Model::favorite$ already dependes on Intent::toggle$ we can only use `.withLatestFrom`
    // `.flatMap(Model.get("favorite$"))` would create new observables at every step (circular dependency => memory leak)
    favup$: Intent.get("toggle$").withLatestFrom(Model.get("favorite$"), function (_, fav) {
      return fav;
    }).filter(function (v) {
      return !v;
    }).flatMap(Model.get("src$")),

// IMPORTS =========================================================================================
let Cycle = require("cyclejs");
let {Rx} = Cycle;

// EXPORTS =========================================================================================
let Intent = Cycle.createIntent(User => {
  return {
    add$: User.event$(".sliders .add", "click").map(event => 1),
    remove$: User.event$(".slider", "remove").map(event => event.data)
      .tap(id => {
        console.log(`Intent gets remove(${id})!`);
      }),
    changeValue$: User.event$(".slider", "changeValue").map(event => event.data),
    changeColor$: User.event$(".slider", "changeColor").map(event => event.data),
  };
});

module.exports = Intent;

},{"../../common/scripts/shims":5,"./intent":2,"./model":3,"./view":4,"cyclejs":"cyclejs"}],2:[function(require,module,exports){
"use strict";

// IMPORTS =========================================================================================
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;

// EXPORTS =========================================================================================
var Intent = Cycle.createIntent(function (User) {
  return {
    changeQuery$: User.event$(".query", "input").map(function (event) {
      return event.target.value.trim();
    }) };
});

module.exports = Intent;

},{"cyclejs":"cyclejs"}],3:[function(require,module,exports){
"use strict";

class={makeClass({"item": true, active: active.indexOf(item.name) != -1})}>
                  {item.name} <b>${item.price.toFixed(2)}</b>
                
              )}
              <div>
                Total: <b>${totalPrice.toFixed(2)}</b>
              </div>
            
          
        );
      }),
      // TODO https://github.com/alexmingoia/jsx-transform/issues/15
    };
  });

  let Intent = Cycle.createIntent(DOM =&gt; {
    return {
      selectOrUnselect$: DOM.event$("nav .item", "click")
        .map(event =&gt; event.currentTarget.dataset.name),
    };
  });

  DOM.inject(View).inject(Model).inject(Intent, Props)[0].inject(DOM);
});

},{"./intent":2,"./model":3,"./shims":4,"./view":5,"cyclejs":"cyclejs"}],2:[function(require,module,exports){
"use strict";

// IMPORTS =========================================================================================
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;

// EXPORTS =========================================================================================
var Intent = Cycle.createIntent(function (User) {
  return {
    changeQuery$: User.event$(".query", "input").map(function (event) {
      return event.target.value.trim();
    }) };
});

module.exports = Intent;

},{"cyclejs":"cyclejs"}],3:[function(require,module,exports){
"use strict";

var Model = Cycle.createModel(function (Intent, Props) {
    return {
      id$: Props.get("id$"),
      value$: Props.get("value$").merge(Intent.get("changeValue$")).startWith(0) };
  });

  var View = Cycle.createView(function (Model) {
    var id$ = Model.get("id$");
    var value$ = Model.get("value$");
    return {
      vtree$: value$.combineLatest(id$, function (value, id) {
        return h("div", { className: "form-group" }, [h("label", null, ["Amount"]), h("div", { className: "input-group" }, [h("input", { type: "range", value: value, placeholder: "Amount" }), h("div", { className: "input-group-addon" }, [h("input", { type: "text", value: value, readonly: "1" })])])]);
      }) };
  });

  var Intent = Cycle.createIntent(function (User) {
    return {
      changeValue$: User.event$("[type=range]", "input").map(function (event) {
        return parseInt(event.target.value);
      }) };
  });

  User.inject(View).inject(Model).inject(Intent, Props)[0].inject(User);

  return {
    changeValue$: Intent.get("changeValue$").combineLatest(Model.get("id$"), function (value, id) {
      return { id: id, value: value };
    }) };
});

active$: Props.get("active$").merge(Intent.get("selectActive$")).startWith([]) };
  });

  var View = Cycle.createView(function (Model) {
    var items$ = Model.get("items$");
    var active$ = Model.get("active$");
    return {
      vtree$: items$.combineLatest(active$, function (items, active) {
        return h("div", null, [h("nav", null, [items.map(function (item) {
          return h("div", { attributes: { "data-name": item }, key: item,
            className: makeClass({ item: true, active: item == active }) }, [item]);
        })]), h("p", null, ["Selected: ", h("b", null, [active])])]);
      }) };
  });

  var Intent = Cycle.createIntent(function (User) {
    return {
      selectActive$: User.event$("nav .item", "click").map(function (event) {
        return event.currentTarget.dataset.name;
      }) };
  });

  User.inject(View).inject(Model).inject(Intent, Props)[0].inject(User);
});

);
        }
      ),
    };
  });

  let Model = Cycle.createModel((Intent, Props) => {
    return {
      id$: Props.get("id$").shareReplay(1),
      width$: Props.get("width$"),
      color$: Props.get("color$"),
    };
  });

  let Intent = Cycle.createIntent(DOM => {
    return {
      changeWidth$: DOM.event$(".width-slider", "input").map(event => parseInt(event.target.value)),
      changeColor$: DOM.event$(".color-input", "input").map(event => event.target.value),
      remove$: DOM.event$(".remove", "click").map(event => true),
    };
  });

  DOM.inject(View).inject(Model).inject(Intent, Props)[0].inject(DOM);

  return {
    changeWidth$: Intent.get("changeWidth$")
      .withLatestFrom(Model.get("id$"), (width, id) => ({id, width})),

    changeColor$: Intent.get("changeColor$")
      .withLatestFrom(Model.get("id$"), (color, id) => ({id, color})),

return {
      vtree$: value$.map(value => (
        <div class="form-group">
          <label>Amount</label>
          <div class="input-group">
            <input placeholder="Amount" value="{value}" type="range">
            <div class="input-group-addon">
              <input readonly="1" value="{value}" type="text">
            </div>
          </div>
        </div>
      )),
    };
  });

  let Intent = Cycle.createIntent(User =&gt; {
    return {
      changeValue$: User.event$("[type=range]", "input")
        .map(event =&gt; parseInt(event.target.value)),
    };
  });

  User.inject(View).inject(Model).inject(Intent, Props)[0].inject(User);

  return {
    changeValue$: Intent.get("changeValue$")
  };
});

Cycle.registerCustomElement("Slider", function (User, Props) {
  var Model = Cycle.createModel(function (Intent, Props) {
    return {
      value$: Props.get("value$").merge(Intent.get("changeValue$")).startWith(0) };
  });

  var View = Cycle.createView(function (Model) {
    var value$ = Model.get("value$");
    return {
      vtree$: value$.map(function (value) {
        return h("div", { className: "form-group" }, [h("label", null, ["Amount"]), h("div", { className: "input-group" }, [h("input", { type: "range", value: value, placeholder: "Amount" }), h("div", { className: "input-group-addon" }, [h("input", { type: "text", value: value, readonly: "1" })])])]);
      }) };
  });

  var Intent = Cycle.createIntent(function (User) {
    return {
      changeValue$: User.event$("[type=range]", "input").map(function (event) {
        return parseInt(event.target.value);
      }) };
  });

  User.inject(View).inject(Model).inject(Intent, Props)[0].inject(User);

  return {
    changeValue$: Intent.get("changeValue$")
  };
});