😜 A library made when doing assignment https://github.com/IniZio/COMP4021-SPA 😜
Uses web-component, custom-element and html-import
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Winks.js</title>
</head>
<body>
<!-- 0. Polyfill for web-component -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
<!-- 1. Polyfill for es5 custom-element work in modern browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/custom-elements-es5-adapter.js"></script>
<!-- 2. Winks.js -->
<script src="https://unpkg.com/winks/dist/winks.min.js"></script>
<!-- 3. Create a web component -->
<script>
Winks.component('hello-winks', {
template: '<h1>Hello Winks.js!</h1>'
})
</script>
<!-- 4. Use the custom-element -->
<hello-winks></hello-winks>
</body>
</html>Winks.component('some-component', {
template: '<h2>Component content</h2>'
})Winks.component('xyz-abc', {
connectedCallback () {
super.connectedCallback()
console.log($(this.shadowRoot).children('#send-email'))
}
}Winks.component('xyz-abc', class extends MyElement {
template: '<button @click="sendEmail">Send</button>'
sendEmail (e) {
e.preventDefault()
api.sendMail()
console.log('sending email')
}
})<template>
<input :value="message" @input="changeMessage">
<div :children="message"></div>
</template>
<script>
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
}
})
</script><template>
<input ~value="magic" @input="changeMessage">
<div ~children="magic"></div>
</template>
<script>
Winks.component('abc-xyz', {
changeMessage (e) {
this.context.magic = e.target.value
}
})
</script><template>
<div x-for="abc:messages" :children="abc"></div>
</template>
<script>
Winks.component('abc-xyz', {
data () {
return {
messages: ['hello', 'bye', 'magic']
}
}
})
</script><template>
<button @click="toggleEdit">Edit</button>
<input x-if="isEditting" :value="content" @input="changeContent">
<div x-else :children="content"></div>
</template>
<script>
Winks.component('abc-xyz', {
data () {
return {
isEditting: false,
content: ''
}
}
toggleEdit () {
this.data.isEditting = !this.data.isEditting
}
changeContent (e) {
this.data.content = e.target.value
}
})
</script>yarn
yarn clip watch
yarn clip build![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent