kristianmandrup / ce-cycle

Custom Elements v1 with Cycle.js - hello world

Cycle.js with Custom Elements v1 experiments

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

Original Hello World project

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

Key observations

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",
    ...
}

Issues

Currently having an issue getting the Babel transform to work properly!

Babel issue discussion

Other Attempts

• document-register-element
• decorator-for-custom-elements

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!

License

MIT Kristian Mandrup