@itkyk/view
This module is JavaScript library.
It is designed based on component orientation.
We recommend that you design your existing HTML template engine with Atomic design and use this library together.
Install
$ npm i @itkyk/view
How to use this module.
<div data-view="sample"></div>
import View from "@itkyk/view";
const View = require("@itkyk/view");
View.createComponent("sample", class extends View.Component {
constructor(props) {
super(props);
this.init(()=> {
console.log("Hello, World!")
})
}
})
Methods
Ref
<div data-view="sample">
<h1 data-sample-ref="title">Hello, World!</h1>
</div>
View.creareComponent("sample", class extends View.Component {
constructor(props) {
super(props);
this.init(() => {
this.getHeaderText();
})
}
getHeaderText = () => {
const text = this.refs.title.innerText;
console.log(text)
}
})
Events
When add events for Node, you should set Data Attributes
.
HTML
<div data-{data-view Name}-{eventName}="functionName"></div>
Example
<div data-view="sample">
<button type="button" data-sample-click="onClick">Alert!</button>
</div>
createComponent("sample", class extends View.Component {
constructor(props) {
super(props);
this.init(() => {});
}
onClick = (e: Event) => {
const target = e.target;
const text = `You clicked ${target.innerText} button.`
alert(text);
}
})
Event Type
event | ex |
---|
click | data-xx-click |
scroll | data-xx-scroll |
load | data-xx-load |
mouseenter | data-xx-mouseenter |
mouseleave | data-xx-mouseleave |
mouseover | data-xx-mouseover |
change | data-xx-change |
Watch
This library has watch
function like a NuxtJS
.
createComponent("sample", class extends View.Component {
private count: number;
constructor(props) {
super(props);
this.count = 0;
this.init(()=>{
this.setCountUp();
});
}
watch = () => {
return {
count: () => {
console.log(`count: ${this.count}`);
}
}
}
setCountUp = () => {
setInterval(() => {
this.count ++;
}, 1000)
}
})
style
This library includes EmotionJS
.
<div data-view="sample">
<div data-sample-css="red-block"></div>
<div data-sample-css="blue-block"></div>
<div data-sample-css="green-block"></div>
</div>
import {css} from "@emotion/css";
createComponent("sample", class extends View.Component {
constructor(props) {
super(props);
this.init(()=>{});
}
style = () => {
const block = css({
width: "100px",
height: "100px"
})
return {
"red-block": css(block, {
backgroundColor: "red"
}),
"blue-block": css(clock, {
backgroundColor: "blue"
}),
"green-block"; css(block, {
backgroundColor: "greeen"
})
}
}
})
this variables
<div data-view="sample">
<h1 data-sample-ref="title">Hello, world!</h1>
</div>
id | value | ex |
---|
section | HTMLElement | <div data-view="sample"></div> |
refs | Record<string, HTMLElement> | this.refs.title ▼
<h1 data-sample-ref="title">Hello, world!</h1> |