Add a global style codes.
cache(changableContent, ?options) will toggle rendering content, and also cache old content to restore it quickly.
Note that when old rendering result restored, the scroll positions in it will fall back to start position.
The html... result, can be null or an empty string.
Options for transition.
Clear the transition that is running in the element.
Returns a CSS template literal, can be used as component's static style property.
Returns a decorator to defined followed class as a component.
The component name.
Defines a component with specified name. Defines a custom element, but just used to start the defined component
The component name.
The Component class constructor.
Returns a define decorator to defined followed class as a binding class with specified name.
The binding name.
Define a binding class which with bind with an element and modify it's attributes or properties.
Returns a function call which will generate a BingingResult.
The binding name.
Defines a directive from a class which implements Directive.
Returns a function call which will generate a DirectiveResult.
A Directive works like Binding, but it used to generate HTML code pieces,
not like Binding to modify properties of an element.
Define a JS transiton and process all transition details internally.
Get cubic-bezier(...) as CSS easing from easing name.
The extended easing name.
Get closest component matches constructor from the closest ancestor custom element. It's very common that you extend a component and define a new custom element, So you will can't find the parent component from the tag name. But you can still match super class by this method.
The element to search from it and it's ancestors for component instance.
The component constructor to search.
Get component instance from custom element.
The element to get component instance at.
Get component instance from root element asynchronously.
Returns a promise which will be resolved after component created and triggers created event.
The element to get component instance at.
hide() binding will update element's visibility state.
hide(hidden: any, transition: TransitionOptions)
hide(hidden: any, options: {transition: TransitionOptions, enterAtStart, leaveAtStart, onend})
Returns a HTML template literal, can be used to render or update a component.
Gerenate live repeat elements, reuse elements as much as possible when data changed.
Compare to repeat directive, it will only show partial elements in viewport when you scroll it.
Options for live rendering.
The fucntion which will return a template from one iterable data and index position.
The transition options, it can be a transition name, property or properties, or {transition, enterAtStart}.
liveRepeat(items, () => html..., ?liveRepeatOptions, ?transitionOptions) gerenates partial elements only in current viewport,
and keeps re-rendering to cover current viewport after you scrolled.
Note the liveRepeat directive must be contained in the html struct like <div title="as a scroll parent" style="overflow: auto | scroll; position: relative;"> <div title="as a scroll slider" style="position: absolute;"> ${liveRepeat(...)} </div> </div>
The fucntion which will return a template result from data item and index position. Rendered nodes must be contained in a container element.
Options for live rendering.
The transition options, it can be a transition name, property or properties, or {transition, enterAtStart}.
Begin to track property changes of value, if use value during a updating of a component or watcher,
Then the property changes of returned observed object will trigger the component or watcher to be updated.
Note that it returns a proxy, it can be used just like original object,
but it's not absolutly equals with original value, and comparing with === will return false.
So it may cause some issues if you cached the original object and compare it with observed one.
Normally you don't need to call this method, properties of components will be observed automatically. But once an object was observed, it can't be revoked.
After consider much about getter, we decided to drop supports for observing getters automatically. The main reason is after we observed getter calls in a proxy, We can't determine this is a getter calls, and we must follow prototype chains to find the descriptor, then we can know it's a getter or normal property. This will slow the whole observing system.
You can still observe a getter manually according to this method:
o = {get p(){...}}
Uses observeGetting(o, 'p') instead of o.p.
Unregister an event listener on element.
The element to unregister listener on.
The event name with or without modifiers.
The event handler.
The event context used to call handler. If specified, it must be match too.
Register an event listener on element.
The element to register listener on.
The event name, it can be click:left or keydown:enter.
The event handler.
The event context used to call handler. You can remove it easily by specify the same scope.
Calls callback after all the components and watchers updated and rendering completed.
Note that it was called before renderComplete.
Register an event listener on element, and will be triggered only for once.
The element to register listener on.
The event name, it can be click:left or keydown:enter.
The event handler.
The event context used to call handler. You can remove it easily by specify the same scope.
Reference binding instance after it created and before updating.
Reference to directive instance after it created and before merge.
Render html codes or a template result like html... within a context.
Returns the rendered template, you may append it to another element,
or extract to a fragment and insert into any place.
Otherwise you can also patch it with another template result.
The html code piece or html... template result, or a directive result.
The context to use when rendering.
Returns a promise which will be resolved after all the components and watchers updated and rendering completed.
Note that it was called after onRenderComplete.
Render template result like html... that returned from renderFn.
Returns the rendered template, you may append it to another element,
or extract to a fragment and insert into any place.
Otherwise returns a unwatch function, call which will stop watching renderFn.
Will watch renderFn, If it's dependent datas changed, will automaticaly updated and call onUpdate.
Returns template like html...
The context you used when rendering.
Called when update after referenced data changed. if new result can't merge with old, will pass a new fragment as parameter.
repeat(items, () => html..., ?options) gerenates repeated elements,
and will reuse elements as much as possible when data changed.
Currently the repeat directive reuses rendered elements by data objects, no key can be specified.
If you do need to reuse elements by a key, try repeat the key values.
The iterable data, each item in it will pass to templateFn.
The fucntion which will return a template from one iterable data item and index position.
The transition options, it can be a transition name, property or properties, or {transition, enterAtStart}.
show(...) binding will update element's visibility state.
You may also use :show if no need to specify transition.
show(visible: any, transition: TransitionOptions)
show(visible: any, options: {transition: TransitionOptions, enterAtStart, leaveAtStart, onend})
Returns a SVG template literal, can be used to render or update a component.
toggle(changableContent, ?options) toggles rendering content and can play enter or leave transition easily.
The html... result, can be null or empty string.
Options for transition.
Updates all the components that elements are connected nto document, and their watchers. e.g., you may call this after language changes and not automatically detected.
Updates all the global watchers registered from watch...().
e.g., you may call this after language changes and not automatically detected.
Updates all style codes for all the components, you may call this after theme changed.
Watchs returned value of fn and calls callback with this value as parameter if the value changed.
Watchs returned value of fn and calls callback with this value as parameter if the value changed.
Will call callback immediately.
Watchs returned value of fn and calls callback with this value as parameter if the value changed.
Only calls callback for once.
Watchs returneded values of fn and calls callback if this value becomes true like.
Generated using TypeDoc
Context is the scope when compiling a template. When uses
renderorrenderComponent, you can choose to pass a context parameter, So the.propertyand@click=${eventHandler}can capture right context. Context may benull, in this senoario template should context-free.