WIP Experimental!
Demonstrating use of Custom Elements v1 with Cycle.js app using virtual-dom
Project was generated using cyc
TODO: Please upgrade to snabbdom
This project is based on Custom Elements v1 - "Hello World" demo as described in Custom Elements v1 vs JS frameworks blog post by Ferdy Christant.
Updated github repo for original blog post code can be found here
Please run the code in Chrome Canary (Chrome 59 or above) for native Custom Elements v1 support.
If native support is not detected, a polyfill will be loaded to fill in the gaps (see /public/polyfill
folder)
This demo demonstrates two different models:
Browser built in ES6 in public/ce.js
and using Babel transpilation with the Cycle.js code, using the following Babel configuration using babel-plugin-transform-custom-element-classes
{
"presets": ["stage-0", "es2015"],
"plugins": [
"transform-custom-element-classes",
"transform-es2015-classes"
]
}
Make sure to add the babel plugins to your devDependencies:
npm i -D babel-plugin-transform-custom-element-classes
npm i -D babel-plugin-transform-es2015-classes
"devDependencies": {
"babel-plugin-transform-custom-element-classes": "^0.1.0",
"babel-plugin-transform-es2015-classes": "^6.23.0",
...
}
Currently having an issue getting the Babel transform to work properly!
Turns out the issues were simply caused by optimistically trying to upgrade the cyc
base template to use later versions of Cycle etc.
It should work just fine on a fresh template start!
MIT Kristian Mandrup