tessl/npm-riot

Simple and elegant component-based UI library

—

Pending

Overview

Eval results

Files

Component Registration

Name: tessl/npm-riot
Author: tessl

System for registering and managing component definitions in a global registry. Components must be registered before they can be mounted using the mount function.

Capabilities

Register Component

Registers a custom component by name in the global component registry.

/**
 * Register a custom tag by name
 * @param componentName - Unique name for the component
 * @param wrapper - Component wrapper containing template, CSS, and exports
 * @returns Map containing all registered components
 */
function register<Props extends DefaultProps, State extends DefaultState>(
  componentName: string,
  wrapper: RiotComponentWrapper<RiotComponent<Props, State>>
): RegisteredComponentsMap;

Usage Example:

import { register } from "riot";

register("my-component", {
  css: "my-component { color: blue; }",
  template: (template, expressionTypes, bindingTypes) => 
    template("<h1>{ props.title }</h1>", [
      // Template binding configuration
    ]),
  exports: {
    onBeforeMount(props, state) {
      console.log("Component mounting with props:", props);
    }
  }
});

Unregister Component

Removes a component from the global registry and cleans up associated CSS.

/**
 * Unregister a riot web component
 * @param componentName - Name of the component to unregister
 * @returns Map containing remaining registered components
 */
function unregister(componentName: string): RegisteredComponentsMap;

Usage Example:

import { unregister } from "riot";

// Remove component from registry
unregister("my-component");

Component Wrapper Structure

The component wrapper object defines the complete component implementation:

interface RiotComponentWrapper<Component> {
  /** Optional CSS styles for the component */
  readonly css?: string | null;
  
  /** Component implementation (factory function or object) */
  readonly exports?: RiotComponentFactoryFunction<Component> | Component | null;
  
  /** Optional component name */
  readonly name?: string | null;
  
  /** Template rendering function */
  template?(
    template: TemplateFunction,
    expressionTypes: ExpressionTypes,
    bindingTypes: BindingTypes,
    getComponent: GetComponentFunction
  ): TemplateChunk<Component> | null;
}

Component Exports

The exports property can be either a factory function or a component object:

interface RiotComponentFactoryFunction<Component> {
  (...args: any[]): Component;
  components?: RiotComponentsMap;
}

// Or a component object implementing lifecycle methods
interface ComponentObject {
  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;
  shouldUpdate?(newProps: Props, oldProps: Props): boolean;
  [key: string]: any;
}

Types

type RegisteredComponentsMap = Map<
  string,
  ({
    slots,
    attributes,
    props,
  }: {
    slots?: TagSlotData[];
    attributes?: AttributeExpressionData[];
    props?: DefaultProps;
  }) => RiotComponent
>;

type RiotComponentsMap = {
  [key: string]: RiotComponentWrapper<RiotComponent>;
};

Install with Tessl CLI