import { httpListener, Rendering } from '@hatsy/hatsy';
import { dispatchByPattern, Routing } from '@hatsy/router';
import { createServer } from 'http';
const server = createServer(httpListener(
Routing
.and(Rendering)
.for(
dispatchByPattern({
on: '**',
to({ renderJson }) {
renderJson({ hello: 'world' });
},
}),
),
));
server.listen(3000);# First, run `clean` task.
# After that run `build`, `lint`, and `test` tasks simultaneously.
# Then publish the package.
npx run-z clean build,lint,test --then npm publishAn UI framework based on web components.
Features IoC container, loadable features, routing, CSS-in-TS, form validation and processing, etc.
Defines custom elements by decorating a component classes:
import { Attribute, Component, ComponentContext, Render } from '@wesib/wesib';
@Component('greet-text') // Custom element name
export class MyComponent {
@Attribute() // Custom attribute
name: string;
constructor(private readonly _context: ComponentContext /* IoC context */) {
}
@Render() // Render when component state changes
render() {
this._context.contentRoot.innerText = `Hello, ${this.name}!`;
}
}No need to extend HTMLElement or any other class. Instead, Wesib creates a custom element accordingly to its
definition built either programmatically or using component decorators.
See RealWorld application implemented with Wesib.
Handle events in reactive style. Think RxJS specialized on events rather generalized for data streams processing.
import { EventEmitter, OnEvent, translateOn } from '@proc7ts/fun-events';
import { Supply } from '@proc7ts/supply';
// API supports arbitrary event receiver signatures
// An event is its receiver's parameters
function printMessage(sender: string, message: string): void {
console.info(`Message from ${sender}: ${message}`);
}
const messageEmitter = new EventEmitter<[user: { name: string, email: string }, message: string, urgent?: boolean]>();
const onUrgentMessage: OnEvent<[string, string]> = messageEmitter.on.do(
translateOn(
// Translate urgent messages only
(send, { name, email }, message, urgent = false) => urgent && send(`${name} <${email}>`, message),
),
);
// Call the `OnEvent` function to start receiving events
const supply: Supply = onUrgentMessage(printMessage);
// Emit some events
messageEmitter.send({ name: 'Tester', email: 'tester@example.com' }, 'Hello', true);
// Prints: "Message from Tester <tester@example.com>: Hello"
messageEmitter.send({ name: 'Tester', email: 'tester@example.com' }, 'Not so urgent');
// Prints nothing
// Cutting off message supply
supply.off();
// Messages won't be received any more
messageEmitter.send({ name: 'Tester', email: 'tester@example.com' }, 'Too late', true);
// Prints nothing- context-values - IoC context values provider
- input-aspects - Framework-agnostic library controlling various aspects of user input, such as form validation
- log-z - Logging library for browsers and Node.js
- optionz - Advanced command line options parser
- push-iterator - Push iteration protocol. A faster, two-way compatible, alernative to JavaScript iteration protocol
- rollup-plugin-flat-dts -
.d.tsfiles flattener and Rollup plugin - style-producer - Produces and dynamically updates stylesheets (CSS-in-TS)