Currently, I am attempting to execute the example provided by cycle.js. According to the documentation, it is recommended to use a bundling tool such as browserify or webpack alongside ES6 (also known as ES2015) through a transpiler like Babel or TypeScript.
"We recommend the use of a bundling tool such as browserify or webpack, in combination with ES6 (a.k.a. ES2015) through a transpiler (e.g. Babel or TypeScript)"
To follow these recommendations, I am transpiling from TypeScript to ES5 and then using WebPack from the command line, all in order to eventually call runApp();
In my tsconfig.json file:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"sourceMap": true,
"target": "es5",
"module": "es6",
"lib": [
"es2015",
"es5",
"dom"
]
},
"exclude": [
"node_modules"
],
"compileOnSave": true
}
Within MyScript.ts:
import { run } from '@cycle/run';
import { makeDOMDriver, div, button } from '@cycle/dom';
function main(sources) {
var add$ = sources.DOM
.select('.add')
.events('click')
.map(function (ev) { alert('hi'); return 1; });
var count$ = add$.fold(function (total, change) { return total + change; }, 0);
return {
DOM: count$.map(function (count) {
return div('.counter', [
'Count: ' + count,
button('.add', 'Add')
]);
})
};
}
var drivers = {
DOM: makeDOMDriver('.app')
};
function runApp() {
run(main, {
DOM: makeDOMDriver('#app')
});
}
Upon transpilation, MyScript.js is generated:
import { run } from '@cycle/run';
import { makeDOMDriver, div, button } from '@cycle/dom';
function main(sources) {
var add$ = sources.DOM
.select('.add')
.events('click')
.map(function (ev) { alert('hi'); return 1; });
var count$ = add$.fold(function (total, change) { return total + change; }, 0);
return {
DOM: count$.map(function (count) {
return div('.counter', [
'Count: ' + count,
button('.add', 'Add')
]);
})
};
}
var drivers = {
DOM: makeDOMDriver('.app')
};
function runApp() {
run(main, {
DOM: makeDOMDriver('#app')
});
}
//# sourceMappingURL=MyScript.js.map
After running
webpack .\MyScript.js MyScriptWebPack.jsI have included MyScriptWebPack.js in my project. Despite having no errors, I am unsure how to properly call runApp();