or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

core-functions.md index.md jsx-runtime.md

tile.json

hastscript

hastscript provides a hyperscript interface for creating hast (HTML Abstract Syntax Tree) syntax trees, offering both HTML and SVG tree creation capabilities through its h() and s() functions. It serves as a programmatic way to build DOM-like structures in JavaScript, supporting CSS-style selectors for element creation, property mapping that handles HTML attributes and DOM properties intelligently, and JSX integration through automatic runtime support.

Package Information

Package Name: hastscript
Package Type: npm
Language: JavaScript/TypeScript

Installation:

npm install hastscript

Core Imports

import { h, s } from "hastscript";

For TypeScript with types:

import { h, s, type Child, type Properties, type Result } from "hastscript";

For CommonJS:

const { h, s } = require("hastscript");

Basic Usage

import { h, s } from "hastscript";

// Create HTML elements
const element = h("div.container#main", { class: "highlight" }, "Hello World");
// Result: <div id="main" class="container highlight">Hello World</div>

// Create SVG elements with case-sensitive tag names
const svg = s("svg", { viewBox: "0 0 100 100" },
  s("circle", { cx: 50, cy: 50, r: 40, fill: "red" })
);

// Create elements with children
const list = h("ul",
  h("li", "First item"),
  h("li", "Second item"),
  h("li", "Third item")
);

// Create root node (fragment)
const root = h(null,
  h("p", "First paragraph"),
  h("p", "Second paragraph")
);

Architecture

hastscript is built around several key components:

Core Functions:
```
h()
```
and
```
s()
```
provide hyperscript interfaces for HTML and SVG respectively
Selector Parsing: CSS selector syntax support for element creation with IDs, classes, and attributes
Property Transformation: Smart property mapping that handles HTML attributes, DOM properties, and style objects
JSX Integration: Automatic and classic JSX runtime support for both HTML and SVG elements
Type System: Full TypeScript support with comprehensive type definitions for all APIs

Capabilities

Core Hyperscript Functions

Core functions for creating hast trees using hyperscript syntax with CSS selector support and intelligent property handling.

function h(selector?: string | null, properties?: Properties, ...children: Child[]): Result;
function s(selector?: string | null, properties?: Properties, ...children: Child[]): Result;

type Result = Element | Root;
type Child = ArrayChild | Nodes | PrimitiveChild;
type Properties = Record<string, PropertyValue | Style>;

Core Functions

JSX Runtime Support

JSX runtime integration for both HTML and SVG elements with automatic and development runtime support.

// From hastscript/jsx-runtime and hastscript/jsx-dev-runtime
export const jsx: (type: string | null, properties: JSXProps, key?: string) => Result;
export const jsxs: (type: string | null, properties: JSXProps, key?: string) => Result;
export const jsxDEV: (type: string | null, properties: JSXProps, key?: string) => Result;
export const Fragment: null;

// From hastscript/svg/jsx-runtime and hastscript/svg/jsx-dev-runtime  
export const jsx: (type: string | null, properties: JSXProps, key?: string) => Result;
export const jsxs: (type: string | null, properties: JSXProps, key?: string) => Result;
export const jsxDEV: (type: string | null, properties: JSXProps, key?: string) => Result;
export const Fragment: null;

JSX Runtime

Types

// Core result types
type Result = Element | Root;

// Node types from hast
interface Element {
  type: 'element';
  tagName: string;
  properties: Properties;
  children: Array<RootContent>;
  content?: Root;
}

interface Root {
  type: 'root';
  children: Array<RootContent>;
}

interface Text {
  type: 'text';
  value: string;
}

interface Comment {
  type: 'comment';
  value: string;
}

interface Doctype {
  type: 'doctype';
  name: string;
  public?: string;
  system?: string;
}

type RootContent = Element | Text | Comment | Doctype;
type Nodes = Element | Text | Comment | Doctype | Root;

// Child types
type Child = ArrayChild | Nodes | PrimitiveChild;
type PrimitiveChild = number | string | null | undefined;
type ArrayChild = Array<ArrayChildNested | Nodes | PrimitiveChild>;
type ArrayChildNested = Array<Nodes | PrimitiveChild>;

// Property types
type Properties = Record<string, PropertyValue | Style>;
type PropertyValue = ArrayValue | PrimitiveValue;
type PrimitiveValue = boolean | number | string | null | undefined;
type ArrayValue = Array<number | string>;

// Style types
type Style = Record<string, StyleValue>;
type StyleValue = number | string;