Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
mega-ui
Advanced tools
Readme
If you still want to immerse yourself in a fairy tale:
index.js:
import ui from 'mega-ui'
import App from './app.js'
// starting root component in body
ui.bootstrap(App)
app.js:
export default class App {
static template = `
Hello {{name}} !!!
`
constructor(){
this.name = 'World'
}
}
its render to:
<head></head>
<body>
Hello World !!!
<body>
export default class Button {
// this is custom html element name
static tag = 'button' // default Class.tag = Class.name.toLowerCase()
// this is shadow style (isolated style for component)
// we can use any selectors, even * or tag names,
// and they will act only within the component template
static style = require('./button.css') // webpack loader as css text
// child components to be used in a template
static components = []
// template
static template = `
<div>Button text</div>
`
constructor(){
// This property will be seen in template as {{prop}}
this.prop = 'val'
}
}
usage:
import Button from './button.js'
export default class App {
// button component will be used in template
static components = [Button]
static template = `
Demo buttons:
<button></button>
<button></button>
`
}
its render to:
<head></head>
<body>
Demo buttons:
<ui-button>
<div>Button text</div>
</ui-button>
<ui-button>
<div>Button text</div>
</ui-button>
<body>
In style we can use :host
selector to styling root component element.
If selector name is button
, after rendering component name is ui-button
,
to avoid conflict with the built-in browser elements.
ui-button element hav not display style, and you need set it:
:host{
display: block
}
This is a typical situation for the ShadowDOM
Add button to global component (used in all component templates)
Replace all button
tags in application to Button component.
import Button from './button.js'
ui.component(Button)
<div>
{{ 2+3 }} javascript expression injection
undefined is interpreted as an empty string
Hello {{ "World" }} !!
Component fields available in expressions, and when field will
change, then expression will instantly recalculate.
Cuz framework use getters and setters to watch data changes.
Global window fields not available in expressions,
only component instance fields available.
</div>
<div class="Hello {{'World'}}">
Expressions works even in all attributes
</div>
<div .class-name>
Alias for class='class-name'
</div>
<div .class-name='exp'>
if expression is true, class added to element,
if false, class removed
</div>
<div (click)='handler($event)'>
Call handler($event) on click event.
In expression available $event variable for access
to the event. If in javascript we emit custom event,
element.emit('ololo', 11) its works too.
<div (ololo)="func($event)"> $event === 11
</div>
<div ((click))="handler()">
Own click on element, not on children
</div>
<div *directive>
Directives like angular.
Directive can control the behavior of the framework at a low level.
</div>
<div *for="item in array">
{{ item }} -- On this place is replaced with the item value
Repeat element by array.
Current array element available as item.
in - keyword
item - you to choose a name variable
array - expression that returns array or number
Syntax variations:
<div *for="item, index in arr"></div>
<div *for="arr"></div>
<div *for="11"></div>
<div *for="item in 5"> {{ item }} </div> 1, 2, 3, 4, 5
</div>
<div [prop]="exp">
Two way data binding element.prop = exp
Example:
<input [value]="text">
Its automatic create text variable and we can use it
{{ text }}
We can bind even paths prop.prop.prop
<div [style.color]="'red'"></div>
If in expression we use {{ }} brackets,
Expression result interpreted as string
Example:
<div [style.width]="{{ 100 }}px"></div>
Expression {{ 100 }}px return string "100px"
If element is component, data bind apply to component instance,
instead of the host element component.
<my-chat [smiles]="true"></my-chat>
In this way we can set components options
If we want access to host element of component,
we can use host property:
<my-chat [host.style.width]="{{ 100 }}px"></my-chat>
All components has 3 mandatory properties:
host - root element of component
scope - scope of component
app - reference to the root component ui.bootstrap(Component)
Thus, in any place, in any terms, we can turn to the
root component of the application,
and take from there needed value.
</div>
<div #link>
Create link to element in scope, and we can use it:
<input #myInput>
{{ myInput.value }}
If applying to component, link will refer to the component instance:
<popup #myPopup>content</popup>
<button (click)="myPopup.open()">show popup</button>
In component links are available as as this.scope.myPopup
</div>
handler
function ($event is a internal variable)if you use content element in you template, then original html content from host element, It will be placed there:
class Button {
static tag = 'button'
static template = `
Content: <content></content>
`
}
class App {
static components = [Button]
static template = `
<button>Ololo</button>
<button> <span>Trololo</span> </button>
`
}
render to:
<head></head>
<body>
<ui-button>Content: Ololo</ui-button>
<ui-button>Content: <span>Trololo</span> </ui-button>
<body>
We can use select attribute to filter elements which will be replaced here:
<div .titles>
<content select="tab > title"></component>
</div>
<div .tabs>
<content select="tab"></component>
</div>
framework automatically extend your components classes adding following fields:
class Component {
constructor(){
this.scope // Link to scope
this.host // Link to root element
this.app // Link to root component on application
}
on(eventName, handler){
// Set event handler to host
// Alias for this.host.on(eventName, handler)
}
one(eventName, handler){
// Set event handler to host,
// event handler will be removed after the first call
// Alias for this.host.one(eventName, handler)
}
off(eventName, handler){
// Remove event handler to host
// Alias for this.host.off(eventName, handler)
}
own(eventName, handler){
// Set own event handler to host
// Alias for this.host.own(eventName, handler)
}
emit(eventName, value){
// Emit event from host
// Alias for this.host.emit(eventName, value)
}
watch(exp, handler){
// Watch expression with this as context,
// and call handler if expression value will change.
// For example, we can use watch prop of component:
this.watch('prop', value => console.log(value))
this.prop = 11
// instantly call console.log(11),
// cuz framework use end getters and setters
this.a = 2
this.b = 4
this.watch('a + b', value => console.log(value))
this.a = 100
// instantly call console.log(104)
}
bind(path, exp){
// Alias for:
this.watch(exp, (value)=> { this[path] = value })
// Example:
this.a = 100
this.b = 200
this.bind('sum', 'a + b')
this.sum // 300
this.b++
this.sum // 301
}
bindClass(className, exp){
// Alias for:
this.watch(exp, value => {
if(value) this.host.addClass(className)
else this.host.removeClass(className)
})
}
require(tag){
// Return parent component by tag.
// If not found, then throw error.
var tabs = this.require('tabs')
tabs // tabs component instance
// If we no need throw errors,
// we must add '?' symbol at the end.
var form = this.require('form?')
form // or form component or null
}
}
Don't use setTimeout
, setInterval
, setImmediate
and requestAnimationFrame
.
Use ui.timeout()
, ui.interval()
, ui.immediate()
, ui.frame()
instead.
Parameters can be transferred in any order:
ui.interval(1000, callback)
ui.interval(callback, 1000)
clearInterval analog:
// start interval
interval = ui.interval(1000, function(){ console.log('lol') })
// stop interval
interval.stop()
Automatic stop if component destroy:
class Panel {
static template = `value is: {{value}}`
constructor(){
this.value = 0
ui.interval(100, ()=> this.value++)
}
}
class App{
static components = [Panel]
static template = `
<Panel *if='state'></Panel>
<button (click)='destroyPanel()'>Destroy!</button>
`
constructor(){
this.state = true
}
destroyPanel(){
this.state = false
}
}
If user click "destroy panel" button, component Panel will be destroyed, and interval will be stopped automatically.
This is protection against memory leaks.
Actually you can destroy interval manually:
class Panel {
constructor(){
this.interval = ui.interval(...)
}
destructor(){
this.interval.stop()
}
}
But it's not as beautiful and convenient as automatic garbage cleaning =)
FAQs
Mega-ui (beta) ===
The npm package mega-ui receives a total of 3 weekly downloads. As such, mega-ui popularity was classified as not popular.
We found that mega-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.