tessl/npm-riot

Simple and elegant component-based UI library

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Riot.js

Name: tessl/npm-riot
Author: tessl

Riot.js is a simple and elegant component-based UI library that brings custom components to all modern browsers. It features a concise HTML-like syntax, one-way data flow, and high performance through pre-compiled expressions with minimal DOM manipulation.

Package Information

Package Name: riot
Package Type: npm
Language: JavaScript/TypeScript
Installation: npm install riot

Core Imports

import { mount, register, component } from "riot";

For CommonJS:

const { mount, register, component } = require("riot");

Compiler build (includes compilation capabilities):

import { mount, register, compile } from "riot+compiler";

Basic Usage

import { register, mount } from "riot";

// Register a component (typically done by the build process)
register("my-timer", {
  css: "my-timer { display: block; }",
  template: (template, expressionTypes, bindingTypes) => 
    template("<p>Seconds: { state.time }</p>", [
      // Template bindings would be here
    ]),
  exports: {
    onBeforeMount() {
      this.state = { time: 0 };
      this.timer = setInterval(() => {
        this.update({ time: this.state.time + 1 });
      }, 1000);
    },
    onUnmounted() {
      clearInterval(this.timer);
    }
  }
});

// Mount the component
const components = mount("my-timer");

Architecture

Riot.js is built around several key concepts:

Component Registration: Global registry system for component definitions
Component Lifecycle: Mount, update, and unmount phases with lifecycle hooks
Template System: Pre-compiled template functions with expression bindings
Plugin System: Component enhancer functions for extending functionality
Pure Components: Lightweight components without lifecycle management
Compiler Integration: Optional runtime compilation of component templates

Capabilities

Component Registration

System for registering and managing component definitions in a global registry.

function register<Props, State>(
  componentName: string,
  wrapper: RiotComponentWrapper<RiotComponent<Props, State>>
): RegisteredComponentsMap;

function unregister(componentName: string): RegisteredComponentsMap;

Component Registration

Mounting and Lifecycle

Core functionality for mounting components to DOM elements and managing their lifecycle.

function mount<Props, State>(
  selector: string | HTMLElement,
  initialProps?: Props,
  componentName?: string
): RiotComponent<Props, State>[];

function unmount(
  selector: string | HTMLElement,
  keepRootElement?: boolean
): HTMLElement[];

Mounting and Lifecycle

Component Factory

Direct component creation without global registration, useful for dynamic components.

function component<Props, State, Component extends RiotComponent>(
  wrapper: RiotComponentWrapper<Component>
): (el: HTMLElement, initialProps?: Props, meta?: ComponentMeta) => Component;

Component Factory

Plugin System

Component enhancement system for adding cross-cutting functionality to all components.

function install(plugin: ComponentEnhancer): InstalledPluginsSet;
function uninstall(plugin: ComponentEnhancer): InstalledPluginsSet;

Plugin System

Pure Components

Lightweight component pattern for simple, stateless components without full lifecycle management.

function pure<InitialProps, Context, FactoryFunction>(
  func: FactoryFunction
): FactoryFunction;

Pure Components

Compilation (riot+compiler build)

Runtime compilation capabilities for compiling riot components from templates and URLs.

function compile(options?: CompileOptions): Promise<void>;
function compileFromString(string: string, options?: CompileOptions): CompilationResult;
function compileFromUrl(url: string, options?: CompileOptions): Promise<CompilationResult>;

Compilation

Utilities

Helper functions, version information, and internal API access for advanced use cases.

function withTypes<Component>(component: Component): Component;
const version: string;
const __: InternalAPI;

Utilities

Core Types

interface RiotComponent<Props = DefaultProps, State = DefaultState> {
  readonly props: Props;
  readonly root: HTMLElement;
  readonly name?: string;
  readonly slots: TagSlotData[];
  state: State;
  components?: RiotComponentsMap;

  mount(
    element: HTMLElement,
    initialState?: State,
    parentScope?: object
  ): RiotComponent<Props, State>;
  
  update(
    newState?: Partial<State>,
    parentScope?: object
  ): RiotComponent<Props, State>;
  
  unmount(keepRootElement?: boolean): RiotComponent<Props, State>;

  $(selector: string): Element | null;
  $$(selector: string): Element[];

  shouldUpdate?(newProps: Props, oldProps: Props): boolean;
  onBeforeMount?(props: Props, state: State): void;
  onMounted?(props: Props, state: State): void;
  onBeforeUpdate?(props: Props, state: State): void;
  onUpdated?(props: Props, state: State): void;
  onBeforeUnmount?(props: Props, state: State): void;
  onUnmounted?(props: Props, state: State): void;
}

interface RiotComponentWrapper<Component> {
  readonly css?: string | null;
  readonly exports?: RiotComponentFactoryFunction<Component> | Component | null;
  readonly name?: string | null;
  template?(
    template: TemplateFunction,
    expressionTypes: ExpressionTypes,
    bindingTypes: BindingTypes,
    getComponent: GetComponentFunction
  ): TemplateChunk<Component> | null;
}

interface RiotPureComponent<Context = object> {
  mount(element: HTMLElement, context?: Context): void;
  update(context?: Context): void;
  unmount(keepRootElement: boolean): void;
}

type DefaultProps = Record<PropertyKey, any>;
type DefaultState = Record<PropertyKey, any>;
type ComponentEnhancer = <Props, State>(
  component: RiotComponent<Props, State>
) => RiotComponent<Props, State>;

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/riot@10.0.x
Publish Source: CLI
Badge