open-index/open-npm huggingface dataset:
npm package: @lukekaalim/act-backstage
Description: Backstage is a collection of utilities for creating Act renderers fairly simply. Most renderers in Act are just composed of one or more "RenderSpace"'s, which are the systems that keep track of which HTML/ThreeJs/SVG nodes correspond to which commit.
Latest version: 3.1.0

# @lukekaalim/act-backstage

Backstage is a collection of utilities for creating Act renderers
fairly simply. Most renderers in Act are just composed
of one or more "RenderSpace"'s, which are the systems
that keep track of which HTML/ThreeJs/SVG nodes correspond
to which commit.

## API

<TypeDoc project="@lukekaalim/act-backstage" name="NodeBuilder" />

<TypeDoc project="@lukekaalim/act-backstage" name="RenderSpace2" />

<TypeDoc project="@lukekaalim/act-backstage" name="setPropObject" />

## Guide

We're going to build a classic render function
npm package: @lukekaalim/act-curve
Description: An animation library for @lukekaalim/act
Latest version: 4.1.0

# @lukekaalim/curve

An animation library for @lukekaalim/act

<Demo demo="CurveDemo" />

## Guide

### Interpolation

The core of this library is about the interpolation
of values.

The `lerp` function will return an interpolated value
from two inputs, based on a `t`/progress values
from zero to one.

<Demo demo="Lerp" />

### Vectors

This library contains a few vector types
(`Vector1D`/`Vector2D`/`Vector3D`).


<TypeDoc project="@lukekaalim/act-curve" name="Vector1D" />
<TypeDoc project="@lukekaalim/act-curve" name="Vector2D" />
<TypeDoc project="@lukekaalim/act-curve" name="Vector3D" />

It also defines a interpolation function
for each type, as well as some basic math
operations.

<TypeDoc project="@lukekaalim/act-curve" name="VectorAPI" />

<Demo demo="VectorInterpolate" />

Each vector type has a different set 
of functions, but each group of function
is organised into a `VectorAPI` structure -
letting you define functions that can work
across different vector types as long as the
specific VectorAPI is passed as an argument.

<Demo demo="VectorAPI" />

### Curves

Each of the vectors can be used to build out
a Bezier curve through the `CurveAPI`.

A Bezier Curve is made of four points - 
a start and end, plus two control points in the
middle.

Much like a linear interpolation, we can get the result
of a point moving across the curve.

<Demo demo="BezierCurve" />

### Animation

We can use these curves to drive values more
smoothly than a linear interpolation. Since
the curve can let us control momentum more,
we can define the start and end speed of the
animation.

<Demo demo="CurveAnimation" />
npm package: @lukekaalim/act-debug
Description: The Debug package contains replacements for common Act utilities and systems with enhanced debugging capabilities, as well as type definitions for serialization-friendly data structures and protocols for command & control systems over event-based protocol
Latest version: 1.0.1

# @lukekaalim/act-debug

The Debug package contains replacements for
common Act utilities and systems with enhanced debugging capabilities,
as well as type definitions for serialization-friendly data structures
and protocols for command & control systems over event-based protocols.

Essentially, while "act-debug" isn't a debugger itself, it provides
all the tools needed to build one - you just have to provide the
platform specific buses and hooks you'd use for your specific tool.

> Looking for a specific implementation? Check out the [Firefox Web Extension](/)!

## Strategy

To get our greasy hands on the internals of an application, we need
to hijack the Reconciler - which is the entrypoint to all logic, and
replace it with a DebugReconciler.
npm package: @lukekaalim/act-icons
Description: Tiny icon library.
Latest version: 1.1.0

# @lukekaalim/act-icons

Tiny icon library.

```bash
npm install @lukekaalim/act-icons
```

## SVGRepo

<TypeDoc project="@lukekaalim/act-icons" name="SVGRepo" extras="SVGRepoProps" />

Link `img` elements to URLs from [SVGRepo](https://www.svgrepo.com/).

|Name|Key|Example|
|-|-|-|
|Front Page|`530508/front-page`|<SVGRepoDemo key="530508/front-page" />|
|Chef Man|`533810/chef-man-cap`|<SVGRepoDemo key="533810/chef-man-cap" />|
|Genetic Data|`530661/genetic-data`|<SVGRepoDemo key="530661/genetic-data" />|
npm package: @lukekaalim/act-markdown
Description: Convert markdown text to act nodes! Uses `remark` to parse text into `mdast`, and then provides an function to turn `mdast` nodes into act nodes.
Latest version: 2.1.0

# @lukekaalim/act-markdown

Convert markdown text to act nodes! Uses `remark` to
parse text into `mdast`, and then provides an function
to turn `mdast` nodes into act nodes.

## Quickstart

Install via npm.

```sh
npm install @lukekaalim/act-markdown
```

And then use the [`Markdown`](#freesh-avocadoo) component
to render the text.

```tsx
import { Markdown } from '@lukekaalim/act-markdown';

const myMarkdownText = `
# Heading

Some text
`;

const MyApp = () => {
  return <Markdown text={myMarkdownText} />
};
```

## Features

Support for the following features builtin:
  - [x] MDX support
  - [x] Github-flavored markdown
  - [ ] Frontmatter

## API

<TypeDoc project="@lukekaalim/act-markdown" name="createMdastRenderer" extras="MarkdownRendererOptions" />
<TypeDoc project="@lukekaalim/act-markdown" name="MdastRenderer" />

<TypeDoc project="@lukekaalim/act-markdown" name="Markdown" />
<TypeDoc project="@lukekaalim/act-markdown" name="useRemarkParser" />
<TypeDoc project="@lukekaalim/act-markdown" name="parser" />
npm package: @lukekaalim/act-recon
Description: ![NPM Version](https://img.shields.io/npm/v/%40lukekaalim%2Fact-recon) ![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/%40lukekaalim%2Fact-recon)
Latest version: 3.1.0

# @lukekaalim/act-recon

![NPM Version](https://img.shields.io/npm/v/%40lukekaalim%2Fact-recon)
![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/%40lukekaalim%2Fact-recon)

Reconciler implementation for @lukekaalim/act.

## Details

> This is a kind of internal library that glues together all the logic
> of the Act ecosystem, but is not used by everyday users (unless you
> are [Writing your own Renderer](), or just want to understand the
> guts - like i did!)

### What is a Reconciler?

A reconciler is more specifically a system than can take care of a tree:
 - Handling when new nodes are added to the tree
 - Handling when nodes are removed from the tree
 - And handling when a node updates or is re-ordered within the tree.

In our case specifically, we maintain a tree of [Commits](#@lukekaalim/act-recon.Commit2),
each of which represent a raw element (like a HTML or SVG element), or something more abstract
like a Component or a Context Provider.

## Systems

<TypeDoc project="@lukekaalim/act-recon" name="CommitTree2" />
<TypeDoc project="@lukekaalim/act-recon" name="WorkThread2" />
<TypeDoc project="@lukekaalim/act-recon" name="Reconciler2" />

## Data Structures

<TypeDoc project="@lukekaalim/act-recon" name="CommitRef2" extras="CommitID CommitPath" />
<TypeDoc project="@lukekaalim/act-recon" name="Commit2" extras="CommitVersion" />
<TypeDoc project="@lukekaalim/act-recon" name="WorkTask" />
<TypeDoc project="@lukekaalim/act-recon" name="EffectTask" extras="EffectID" />
<TypeDoc project="@lukekaalim/act-recon" name="Delta" />
<TypeDoc project="@lukekaalim/act-recon" name="ElementOutput2" />

<TypeDoc project="@lukekaalim/act-recon" name="ComponentState" />
<TypeDoc project="@lukekaalim/act-recon" name="ContextState" />
<TypeDoc project="@lukekaalim/act-recon" name="BoundaryState" />

<TypeDoc project="@lukekaalim/act-recon" name="ObjectPool" />

## Externals

<TypeDoc project="@lukekaalim/act-recon" name="Scheduler" />

## Experiments

<Demo demo="recon.experiment" />
npm package: @lukekaalim/act-web
Description: ```bash npm i @lukekaalim/act-web ```
Latest version: 5.0.0

# @lukekaalim/act-web

```bash
npm i @lukekaalim/act-web
```

```ts
import { h, Component } from "@lukekaalim/act";
import { render } from "@lukekaalim/act-web";

const MyApp = () => {
  return h('article', {}, [
    h('h1', {}, "Hello, world!")
  ])
}

render(h(MyApp), document.body)
```

<TypeDoc project="@lukekaalim/act-web" name="render" />

## Capabilities

  - [x] Supports HTML elements and SVG elements
    - [x] Add in the `web:html` or `web:svg` root pick the correct type
  - [x] Prop support
    - [x] **Attributes.** Most props will just be assigned directly to the element
    - [x] **Event Listeners.** `onClick` adds an event listener for `click`
    - [x] **Ref.** `ref` will attach a `HTMLElement` to `ref.current`
    - [x] **Styles.** `style` will set styles directly on the element
    - [x] **ClassList.** An array of strings or falseish values will be added as classes via `classList`

## Builder

If you are composing another renderer and want to give
it web powers, use the builder:

<TypeDoc project="@lukekaalim/act-web" name="createWebNodeBuilder" />