Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/inizio/winks
:stuck_out_tongue_winking_eye: A reactive web-component library
https://github.com/inizio/winks
custom-elements-v1 web-components
Last synced: 4 months ago
JSON representation
:stuck_out_tongue_winking_eye: A reactive web-component library
- Host: GitHub
- URL: https://github.com/inizio/winks
- Owner: IniZio
- Archived: true
- Created: 2018-05-10T01:14:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-18T03:54:20.000Z (about 5 years ago)
- Last Synced: 2024-09-26T07:21:46.501Z (4 months ago)
- Topics: custom-elements-v1, web-components
- Language: JavaScript
- Homepage:
- Size: 128 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
Winks.js
:stuck_out_tongue_winking_eye: A library made when doing assignment https://github.com/IniZio/COMP4021-SPA :stuck_out_tongue_winking_eye:
Uses web-component, custom-element and html-import
## Getting started
```html
Hello Winks.js
Winks.component('hello-winks', {
template: '<h1>Hello Winks.js!</h1>'
})
```
## How to use
#### 1. Add a new component
```js
Winks.component('some-component', {
template: '
Component content
'
})
```
### 2. Access children of the html file in its class
```js
Winks.component('xyz-abc', {
connectedCallback () {
super.connectedCallback()
console.log($(this.shadowRoot).children('#send-email'))
}
}
```
### 3. Add event listeners to template content
```js
Winks.component('xyz-abc', class extends MyElement {
template: 'Send'
sendEmail (e) {
e.preventDefault()
api.sendMail()
console.log('sending email')
}
})
```
### 4. Use reactive state
```html
Winks.component('abc-xyz', {
// NOTE: Use a function that returns the initial value
data () {
return {
cc: 100,
message: 'qq'
}
}
changeMessage (e) {
this.data.message = e.target.value
}
})
```
### 5. Use global context
```html
Winks.component('abc-xyz', {
changeMessage (e) {
this.context.magic = e.target.value
}
})
```
### 6. Use `x-for` directive
```html
Winks.component('abc-xyz', {
data () {
return {
messages: ['hello', 'bye', 'magic']
}
}
})
```
### 7. Use `x-if` and `x-else` directive
```html
Edit
Winks.component('abc-xyz', {
data () {
return {
isEditting: false,
content: ''
}
}
toggleEdit () {
this.data.isEditting = !this.data.isEditting
}
changeContent (e) {
this.data.content = e.target.value
}
})
```
## Development
```sh
yarn
yarn clip watch
yarn clip build
```