tessl/npm-riot

Simple and elegant component-based UI library

—

Pending

Overview

Eval results

Files

Utilities

Name: tessl/npm-riot
Author: tessl

Utility functions and constants for TypeScript integration, version information, and advanced internal access.

Capabilities

TypeScript Type Helper

No-op function for TypeScript type inference and component typing support.

/**
 * TypeScript helper for adding proper types to component definitions
 * @param component - Component factory function or component object
 * @returns The same component with proper TypeScript type inference
 */
function withTypes<Component>(component: Component): Component;

Usage Examples:

import { withTypes } from "riot";

// For component factory functions
const createTypedComponent = withTypes((props: { title: string }) => ({
  onBeforeMount() {
    this.state = { count: 0 };
  },
  
  increment() {
    this.update({ count: this.state.count + 1 });
  }
}));

// For component objects
const typedComponent = withTypes({
  onBeforeMount(props: { initialValue: number }, state: { value: number }) {
    this.state = { value: props.initialValue || 0 };
  },
  
  setValue(newValue: number) {
    this.update({ value: newValue });
  }
} as const);

The withTypes function is a TypeScript-only utility that provides no runtime functionality but enables proper type inference for component definitions.

Version Information

Constant containing the current Riot.js version string.

/** Current riot version string */
const version: string;

Usage Example:

import { version } from "riot";

console.log(`Riot.js version: ${version}`);

// Check version compatibility
if (version.startsWith("10.")) {
  console.log("Using Riot.js v10.x");
}

Internal API Access

Advanced internal APIs exposed for specialized use cases and tooling development.

const __: {
  cssManager: CSSManager;
  DOMBindings: {
    template: typeof template;
    createBinding: typeof createBinding;
    createExpression: typeof createExpression;
    bindingTypes: typeof bindingTypes;
    expressionTypes: typeof expressionTypes;
  };
  globals: {
    PROPS_KEY: string;
    STATE_KEY: string;
    IS_COMPONENT_UPDATING: symbol;
    ATTRIBUTES_KEY_SYMBOL: symbol;
    PARENT_KEY_SYMBOL: symbol;
    DOM_COMPONENT_INSTANCE_PROPERTY: symbol;
    COMPONENTS_IMPLEMENTATION_MAP: RegisteredComponentsMap;
    PLUGINS_SET: InstalledPluginsSet;
  };
};

⚠️ Warning: The internal API (__) is not part of the stable public API and may change without notice. Use at your own risk for advanced scenarios only.

Usage Example:

import { __ } from "riot";

// Access CSS manager for advanced styling
const { cssManager } = __;
cssManager.add("custom-styles", ".my-class { color: red; }");
cssManager.inject();

// Access DOM bindings for custom template creation
const { DOMBindings } = __;
const { template, expressionTypes, bindingTypes } = DOMBindings;

// Access global constants and registries
const { globals } = __;
console.log("Total registered components:", globals.COMPONENTS_IMPLEMENTATION_MAP.size);
console.log("Installed plugins:", globals.PLUGINS_SET.size);

Types

interface CSSManager {
  CSS_BY_NAME: Map<string, string>;
  add(name: string, css: string): CSSManager;
  inject(): CSSManager;
  remove(name: string): CSSManager;
}

type RegisteredComponentsMap = Map<string, ComponentFactory>;
type InstalledPluginsSet = Set<ComponentEnhancer>;

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

type ComponentEnhancer = <Props, State>(
  component: RiotComponent<Props, State>
) => RiotComponent<Props, State>;

Install with Tessl CLI