Skip to main content

Built and signed on GitHub Actions

A microlibrary for building reactive HTML notebooks

This package works with BrowsersIt is unknown whether this package works with Cloudflare Workers, Node.js, Deno, Bun
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
It is unknown whether this package works with Deno
It is unknown whether this package works with Bun
This package works with Browsers
JSR Score
100%
Published
a month ago (4.8.0)
class CelineModule

A CelineModule is a wrapper around an Observable runtime, a derived Observable runtime module, and a document.

Its various cell constructors alter both the module and the document to create reactive cells.

Constructors

new
CelineModule(
document: Document,
module: Runtime.Module,
)

Creates a new CelineModule instance.

Properties

The document object to create elements in.

library: stdlib.Library
module: Runtime.Module

The Observable runtime module to define variables in.

Methods

private
_cell(
observerVisibility: ObserverVisibility,
name: string,
inputsOrDefinition: Inputs | Definition,
maybeDefinition?: Definition,
): void

Internal method for creating cells with specified visibility.

cell(
name: string,
inputs: Inputs,
definition: Definition,
): void

Declares a reactive cell that renders its value above its element container. The cell can depend on other cells and its definition can return values of type T, Promise, Iterator, or AsyncIterator.

The element's id must match the name parameter.

cell(
name: string,
definition: Definition,
): void
md(
strings: TemplateStringsArray,
...values: any[],
): Promise<object>

Renders a Markdown string using the Observable stdlib.

mutable<T>(
name: string,
value: T,
): Mutable

Declares a cell and returns a reference that can be mutated. Mutations propagate to cells that depend upon it.

private
observer(name: string): Inspector

Creates an Inspector for observing cell output.

silentCell(
name: string,
inputs: Inputs,
definition: Definition,
): void

Declares a cell that doesn't render a value above an element container. Otherwise behaves the same as cell().

silentCell(
name: string,
definition: Definition,
): void
silentMutable<T>(
name: string,
value: T,
): Mutable

Like mutable, but doesn't render the value above the element container.

tex(
strings: TemplateStringsArray,
...values: any[],
): Promise<object>

Renders a TeX string using the Observable stdlib.

viewof(
name: string,
inputs: Inputs,
definition: Definition,
): void

Special constructor designed to work with Observable Inputs. It declares two reactive cells:

  • The "name" cell for the value
  • The "viewof name" cell for the DOM element itself

For creating custom inputs, see the Observable "Synchronized Inputs" guide.

viewof(
name: string,
definition: Definition,
): void

Static Methods

usingExistingObservableModule(
document: Document,
module: Runtime.Module,
): CelineModule

Creates a new CelineModule using an existing Observable module. This is just an alias of the default constructor.

Creates a new CelineModule with a fresh Observable runtime.

Creates a new CelineModule with a fresh Observable runtime and module.

Add Package

deno add jsr:@celine/celine

Import symbol

import { CelineModule } from "@celine/celine";

---- OR ----

Import directly with a jsr specifier

import { CelineModule } from "jsr:@celine/celine";

Add Package

npx jsr add @celine/celine

Import symbol

import { CelineModule } from "@celine/celine";

Add Package

yarn dlx jsr add @celine/celine

Import symbol

import { CelineModule } from "@celine/celine";

Add Package

pnpm dlx jsr add @celine/celine

Import symbol

import { CelineModule } from "@celine/celine";

Add Package

bunx jsr add @celine/celine

Import symbol

import { CelineModule } from "@celine/celine";