neocomp.js

templates

templates are units that represent the initial dom structure of a component. they has two forms:

as source, written in html syntax with special attributes for custom logic.
as serialized format in Template objects.

they can be generated by different ways, but the most common:

from $template(source) function imported from @neocomp/full/comp-base/tempGen.
as html modules with .neo.html extention if the vite plugin is used.

component `View`s

each component contains a View, units responsible for managing the DOM.

they handle initial DOM construction and bindings, and also provide utilities for working with the DOM.

the Component.el property refers to the top element of the component.

DOM utilities

neocomp favors direct DOM interactions and provide a set of utilities to make it easier.

some highlights:

import { query, create, construct } from '../../src/rawdom/index.ts';

//query elements based on selector
query('div.classic') // => HTMLElement[]
comp.query('div.indside-comp')

//construct dom structure from string
construct('<div>hello</div><div>world</div>'); // => [div, div]

//create element with typesafety and flixible syntax
create('div', '#id', '.class', children, 'some text', { style: { color: 'red' } });

template syntax

templates has special attributes for custom logic, they are templated attributes and action attributes.

templated attributes

<div .text>count: @{count} \ncount * 2: @(count){count * 2}</div>
<div .style:color="{Math.random() > 0.5 ? 'red' : 'blue'}" .class:active(status)="{status === 'active'}"></div>
<img .src(...)='https://example.com/@(){comp.id.value || "default"}.png'>
<div .text>large text: #{'i am large.\n'.repeat(10000)}</div>

templated attributes are atributes that sets / binds states to a given attribute.

they are of syntax .name(props)='source' where name can be attribute name, class:name, style:prop, text and others…

source is a series of string laterials, escape sequences, properties accessirs and expressions evaluated at definition time or on each update.

action attributes

<div comp:this='example'></div>
<div do='comp.someLogic(el)'></div>
<div @ref='content'></div>
<div @chunk:section='{arg1: 1, arg2: 2}'></div>
<input @on(input)='comp.input.value = el.value'>

they are attributes of syntax @action=value that define actions targeting the element.

some notable actions:

@comp:this=name: create a component of class name.
@do='exp': execute the expression defined in exp.
@effect(props)='exp': create an effect.
@on(name)='exp': add an event listener.
@chunk:name='context': construct a chunk defined as name and inserts it into the element.
@ref='name': create a reference to the element.