neocomp.js

the prerequisites

while neocomp has low learning curve, it requires:

• solid understanding of web technologies.
• node / npm installed.
• optionally typescript for strong typing.
• optionally vite for better development.

neocomp is built around flexibility, it has no dependencies only existing. but it is good idea to have comfortable development environment before beginning.

installation

after having a ready normal npm project, type into the terminal.

npm install @neocomp/full

and you are good to go.

using vite

neocomp provide a vite plugin for build time template generation. it is possible to generate the templates at runtime, but using the plugin reduce the bundle size.

to use the plugin, add the it to your vite config.

import { neoTempPlugin } from './src/build/plugin.ts';

export default {
	//...
	plugins: [neoTempPlugin()]
}

defining components

component are the base unit in neocomp, each component represent a reusable user interface unit.
each component encapsulate its own state and logic.

the base boliplate for any component:

import { Component, registry } from "@neocomp/full/comp-base";
import type { BaseMap, Template } from "@neocomp/full/comp-base";

//optional, a type that contains types used in the component
interface TypeMap extends BaseMap {

}

//a class that contains the component logic
class ExampleComponent extends Component<TypeMap> {
	//the initial dom structure
	static template: Template = /* ... */;
	constructor (el?: HTMLElement) {
		//el: an optional element for the component to wrap
		super(el);

		//initial state definition goes here

		//construct the initial dom structure and bindings
		this.initDom();

		//initial logic that use the dom goes here

		//notify the outside world
		this.fireInit();
	}
}

//optional, register the component to be used in different system by name
registry.add('example', ExampleComponent);

this might seem a lot of code, but in real many of it is optional, and provide improved developer experience.

integrating neocomp

neocomp components are be used freely as independent units. but if used as the base of a site, they must start from a common root.

that root is called the root component, and it is registered through.

import { registry } from "@neocomp/full/comp-base";

registry.setRoot(new RootComponent(rootElement));

where rootElement is the root element of the page;