https://github.com/fuunnx/cycle-element
A simple way to package your Cycle.js app and use it anywhere on the web
https://github.com/fuunnx/cycle-element
custom-elements cyclejs snabbdom
Last synced: 4 months ago
JSON representation
A simple way to package your Cycle.js app and use it anywhere on the web
- Host: GitHub
- URL: https://github.com/fuunnx/cycle-element
- Owner: fuunnx
- Created: 2019-08-06T21:27:04.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T01:46:16.000Z (over 3 years ago)
- Last Synced: 2023-08-10T06:01:34.611Z (almost 3 years ago)
- Topics: custom-elements, cyclejs, snabbdom
- Language: TypeScript
- Homepage:
- Size: 1.53 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**This library is a WIP. It's working but it's not published yet. It has not a full documentation yet either**
# Cycle Element -ify
A simple way to package your Cycle.js app and use it anywhere on the web :
- Inside another cycle app
- Inside another framework, you name it
Thanks to an out of the box `custom-element v2` and `snabbdom hooks` support
## Usage
Install the package
`npm install --save cycle-element`
`pnpm install --save cycle-element`
`yarn add cycle-element`
### Basic usage
```javascript
import Snabbdom from 'snabbdom-pragma'
import { customElementify, snabbdomElementify } from 'cycle-element'
function CycleComponent(sources: ComponentSources) {
const { props } = sources
return {
DOM: props.get('name').map((name: string) => {
return (
Hello {name}
)
}),
}
}
const helloWorld1 = define('hello-world', customElementify(CycleComponent, {
props: { name: String },
}))
const helloWorld2 = snabbdomElementify(CycleComponent, {
props: { name: String },
})
function main() {
return {
DOM: xs.of(
,
),
}
}
```
### Advanced usage
```javascript
import Snabbdom from 'snabbdom-pragma'
import { customElementify } from '../src'
// the lofic is exactly the same for snabbdomElementify :
const InputText = define(
'input-text',
customElementify(
function CycleComponent(sources) {
const { props, DOM } = sources
const props$ = DOM.select('input')
.events('input')
.map(event => ({
value: (event.target as HTMLInputElement).value,
}))
const focus$ = DOM.select('input').events('focus')
return {
focus$, // any sink that does not have a matching driver will be available on the instance
props: props$, // props will be available as stream and as value on the instance
DOM: props.get().map(props => {
const { value, label } = props
return (
{label && {label}}
)
}),
}
},
{ props: { value: String, label: String } },
)
)
function main(sources) {
const { DOM } = sources
const inputText$ = DOM.select('input-text').element()
const value$ = inputText$
.map(input => input.value$)
.flatten()
.startWith('')
return {
DOM: xs.combine(value$, focus$)
.map(([value, focus]) => {
return (
You typed : {value}
)
})
}
}
```
## About
This library uses skatejs as a foundation
## API
## Advanced usages
## Contributing
## TODO
- Pull request to @cycle/dom allow the use of like in skatejs snabbdom-element : https://github.com/skatejs/skatejs/blob/master/packages/element-snabbdom/src/index.ts
- Remove dependency on @cycle/time on propsDriver