diff --git a/typescript/packages/common-ui/src/components/common-charm.ts b/typescript/packages/common-ui/src/components/common-charm.ts index 943fc4eb7..584edee82 100644 --- a/typescript/packages/common-ui/src/components/common-charm.ts +++ b/typescript/packages/common-ui/src/components/common-charm.ts @@ -1,12 +1,5 @@ import { customElement } from "lit-element/decorators.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; -import { view } from "../hyperscript/render.js"; import * as System from "@commontools/common-system"; -export const cardContainer = view("common-charm", { - spell: { type: "object" }, - ...eventProps(), -}); - @customElement("common-charm") export class CommonCharm extends System.Charm {} diff --git a/typescript/packages/common-ui/src/components/common-datatable.ts b/typescript/packages/common-ui/src/components/common-datatable.ts index 3717622ce..a96c5f2f1 100644 --- a/typescript/packages/common-ui/src/components/common-datatable.ts +++ b/typescript/packages/common-ui/src/components/common-datatable.ts @@ -1,14 +1,6 @@ import { LitElement, html, css } from 'lit-element'; import { customElement, property } from 'lit-element/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; -import { view } from '../hyperscript/render.js'; -import { eventProps } from '../hyperscript/schema-helpers.js'; - -export const datatable = view('common-datatable', { - ...eventProps(), - cols: { type: 'array' }, - rows: { type: 'array' }, -}); @customElement('common-datatable') export class CommonDatatableElement extends LitElement { diff --git a/typescript/packages/common-ui/src/components/common-dict.ts b/typescript/packages/common-ui/src/components/common-dict.ts index 9bd79a02a..c5e44ce5a 100644 --- a/typescript/packages/common-ui/src/components/common-dict.ts +++ b/typescript/packages/common-ui/src/components/common-dict.ts @@ -1,11 +1,6 @@ import { LitElement, html, css } from 'lit-element'; import { customElement, property } from 'lit-element/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; -import { view } from '../hyperscript/render.js'; - -export const dict = view('common-dict', { - records: { type: 'object' }, -}); @customElement('common-dict') export class CommonDictElement extends LitElement { diff --git a/typescript/packages/common-ui/src/components/common-form.ts b/typescript/packages/common-ui/src/components/common-form.ts index c8b4d16be..22d5bfb26 100644 --- a/typescript/packages/common-ui/src/components/common-form.ts +++ b/typescript/packages/common-ui/src/components/common-form.ts @@ -1,8 +1,6 @@ import { LitElement, html, css } from "lit"; import { customElement, property } from "lit/decorators.js"; import { baseStyles } from "./style.js"; -import { view } from "../hyperscript/render.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; import { ZodObject } from "zod"; import { fromString } from 'merkle-reference'; @@ -75,9 +73,6 @@ export class ReferenceFieldElement extends LitElement { } } -export const commonForm = view("common-form", { - ...eventProps(), -}); export type ZodFormEvent = { path: string; value: any; diff --git a/typescript/packages/common-ui/src/components/common-hero-layout.ts b/typescript/packages/common-ui/src/components/common-hero-layout.ts index c46fd5210..1664f6458 100644 --- a/typescript/packages/common-ui/src/components/common-hero-layout.ts +++ b/typescript/packages/common-ui/src/components/common-hero-layout.ts @@ -1,6 +1,6 @@ import { LitElement, html, css } from "lit"; import { customElement } from "lit/decorators.js"; -import {baseStyles} from "./style.js"; +import { baseStyles } from "./style.js"; @customElement("common-hero-layout") export class CommonHeroLayoutElement extends LitElement { diff --git a/typescript/packages/common-ui/src/components/common-hscroll.ts b/typescript/packages/common-ui/src/components/common-hscroll.ts index 716e86aab..e91bc7d87 100644 --- a/typescript/packages/common-ui/src/components/common-hscroll.ts +++ b/typescript/packages/common-ui/src/components/common-hscroll.ts @@ -1,12 +1,6 @@ import { LitElement, html, css } from "lit"; import { customElement } from "lit/decorators.js"; import { baseStyles } from "./style.js"; -import { view } from '../hyperscript/render.js'; -import { eventProps } from "../hyperscript/schema-helpers.js"; - -export const hscroll = view('common-hscroll', { - ...eventProps() -}); @customElement("common-hscroll") export class CommonHscrollElement extends LitElement { diff --git a/typescript/packages/common-ui/src/components/common-hstack.ts b/typescript/packages/common-ui/src/components/common-hstack.ts index c8a8e5cde..b56108565 100644 --- a/typescript/packages/common-ui/src/components/common-hstack.ts +++ b/typescript/packages/common-ui/src/components/common-hstack.ts @@ -1,14 +1,6 @@ import { LitElement, html, css } from "lit"; import { customElement, property } from "lit/decorators.js"; -import { view } from "../hyperscript/render.js"; import { baseStyles } from "./style.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; - -export const hstack = view("common-hstack", { - ...eventProps(), - gap: { type: "string" }, - pad: { type: "string" }, -}); @customElement("common-hstack") export class CommonHstackElement extends LitElement { diff --git a/typescript/packages/common-ui/src/components/common-iframe.ts b/typescript/packages/common-ui/src/components/common-iframe.ts index 95f68a6ab..b278505e1 100644 --- a/typescript/packages/common-ui/src/components/common-iframe.ts +++ b/typescript/packages/common-ui/src/components/common-iframe.ts @@ -8,14 +8,6 @@ import { type ReactivityLog, } from "@commontools/common-runner"; import { Ref, createRef, ref } from "lit/directives/ref.js"; -import { view } from "../hyperscript/render.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; - -export const iframe = view("common-iframe", { - ...eventProps(), - src: { type: "string" }, - context: { type: "object" }, -}); @customElement("common-iframe") export class CommonIframeElement extends LitElement { diff --git a/typescript/packages/common-ui/src/components/common-input-file.ts b/typescript/packages/common-ui/src/components/common-input-file.ts index e37acc494..a27f2bc69 100644 --- a/typescript/packages/common-ui/src/components/common-input-file.ts +++ b/typescript/packages/common-ui/src/components/common-input-file.ts @@ -1,17 +1,6 @@ import { LitElement, html, css } from "lit"; import { customElement, property } from "lit/decorators.js"; import { baseStyles } from "./style.js"; -import { view } from "../hyperscript/render.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; - -export const commonFileInput = view("common-file-input", { - ...eventProps(), - files: { type: "array" }, - filesContent: { type: "array" }, - multiple: { type: "boolean" }, - accept: { type: "string" }, - appearance: { type: "string" }, -}); interface FileContent { file: File; diff --git a/typescript/packages/common-ui/src/components/common-input.ts b/typescript/packages/common-ui/src/components/common-input.ts index 1323dcf1e..891476e55 100644 --- a/typescript/packages/common-ui/src/components/common-input.ts +++ b/typescript/packages/common-ui/src/components/common-input.ts @@ -1,15 +1,6 @@ import { LitElement, html, css } from "lit"; import { customElement, property } from "lit/decorators.js"; import { baseStyles } from "./style.js"; -import { view } from "../hyperscript/render.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; - -export const commonInput = view("common-input", { - ...eventProps(), - value: { type: "string" }, - placeholder: { type: "string" }, - appearance: { type: "string" }, -}); export type CommonInput = { id: string; diff --git a/typescript/packages/common-ui/src/components/common-navpanel.ts b/typescript/packages/common-ui/src/components/common-navpanel.ts deleted file mode 100644 index d70ecad53..000000000 --- a/typescript/packages/common-ui/src/components/common-navpanel.ts +++ /dev/null @@ -1,74 +0,0 @@ -import { LitElement, html, css } from 'lit-element'; -import { customElement, property } from 'lit-element/decorators.js'; -import { VNode } from '../hyperscript/view.js'; -import { render, RenderContext, view } from '../hyperscript/render.js'; - -export const navpanel = view('common-navpanel', {}); - -@customElement('common-navpanel') -export class CommonNavPanelElement extends LitElement { - static override styles = css` - :host { - --background: #fff; - --nav-height: 44px; - display: block; - background: var(--background); - width: 100cqw; - height: 100cqh; - container-type: size; - } - - .panel { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: var(--nav-height) 1fr; - grid-template-areas: - "nav" - "main"; - width: 100cqw; - height: 100cqh; - } - - .panel-nav { - grid-area: nav; - align-content: center; - } - - .panel-main { - grid-area: main; - overflow: auto; - } - `; - - @property({ type: Object }) - accessor content: VNode | string = ''; - - @property({ type: Object }) - accessor props: RenderContext = {}; - - #onClickBackButton(event: MouseEvent) { - event.preventDefault(); - this.dispatchEvent( - new CustomEvent( - 'com-back', - { - bubbles: true, - composed: true - } - ) - ); - } - - override render() { - return html` -

- Back -

- ${render(this.content, this.props)} -

- `; - } -} \ No newline at end of file diff --git a/typescript/packages/common-ui/src/components/common-pill.ts b/typescript/packages/common-ui/src/components/common-pill.ts index 76bed75a4..a1e61136e 100644 --- a/typescript/packages/common-ui/src/components/common-pill.ts +++ b/typescript/packages/common-ui/src/components/common-pill.ts @@ -1,12 +1,6 @@ import { LitElement, html, css } from 'lit-element'; import { customElement } from 'lit-element/decorators.js'; -import { view } from '../hyperscript/render.js'; import { baseStyles } from './style.js'; -import { eventProps } from '../hyperscript/schema-helpers.js'; - -export const pill = view('common-pill', { - ...eventProps(), -}); @customElement("common-pill") export class CommonButtonElement extends LitElement { diff --git a/typescript/packages/common-ui/src/components/common-record.ts b/typescript/packages/common-ui/src/components/common-record.ts index 46c48ea8c..993d96fc7 100644 --- a/typescript/packages/common-ui/src/components/common-record.ts +++ b/typescript/packages/common-ui/src/components/common-record.ts @@ -1,8 +1,5 @@ import { LitElement, html, css } from 'lit-element'; import { customElement } from 'lit-element/decorators.js'; -import { view } from '../hyperscript/render.js'; - -export const record = view('common-record', {}); @customElement('common-record') export class CommonRecordElement extends LitElement { diff --git a/typescript/packages/common-ui/src/components/common-suggestions.ts b/typescript/packages/common-ui/src/components/common-suggestions.ts index 6afc4ec55..7ecb510dc 100644 --- a/typescript/packages/common-ui/src/components/common-suggestions.ts +++ b/typescript/packages/common-ui/src/components/common-suggestions.ts @@ -7,15 +7,7 @@ import { suggestionTemplate, } from "./common-suggestion.js"; import { getId } from "./identifiable.js"; -import { view } from "../hyperscript/render.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; -export const suggestions = view("common-suggestions", { - ...eventProps(), - id: { type: "string" }, - suggestions: { type: "array" }, - limit: { type: "number" }, -}); export class SelectSuggestionEvent extends Event { detail: Suggestion; diff --git a/typescript/packages/common-ui/src/components/common-table.ts b/typescript/packages/common-ui/src/components/common-table.ts index 993eaf6c1..fc45710ce 100644 --- a/typescript/packages/common-ui/src/components/common-table.ts +++ b/typescript/packages/common-ui/src/components/common-table.ts @@ -1,18 +1,8 @@ import { LitElement, html, css } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { baseStyles } from "./style.js"; -import { view } from "../hyperscript/render.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; import { ZodObject } from "zod"; -export const commonTable = view("common-table", { - ...eventProps(), -}); - -export const commonCard = view("common-card", { - ...eventProps(), -}); - @customElement("common-card") export class CommonCardElement extends LitElement { @property({ type: Object }) schema: ZodObject = null; diff --git a/typescript/packages/common-ui/src/components/common-textarea.ts b/typescript/packages/common-ui/src/components/common-textarea.ts index 69510dbe6..3249c3f92 100644 --- a/typescript/packages/common-ui/src/components/common-textarea.ts +++ b/typescript/packages/common-ui/src/components/common-textarea.ts @@ -1,16 +1,6 @@ import { LitElement, html, css } from "lit"; import { customElement, property } from "lit/decorators.js"; import { baseStyles } from "./style.js"; -import { view } from "../hyperscript/render.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; - -export const commonTextarea = view("common-textarea", { - ...eventProps(), - value: { type: "string" }, - placeholder: { type: "string" }, - appearance: { type: "string" }, - rows: { type: "number" }, -}); export type CommonTextarea = { id: string; diff --git a/typescript/packages/common-ui/src/components/common-todo.ts b/typescript/packages/common-ui/src/components/common-todo.ts index 63b3167c7..3ea9a93ad 100644 --- a/typescript/packages/common-ui/src/components/common-todo.ts +++ b/typescript/packages/common-ui/src/components/common-todo.ts @@ -1,16 +1,6 @@ import { LitElement, html, css } from "lit"; import { customElement, property } from "lit/decorators.js"; import { baseStyles } from "./style.js"; -import { view } from "../hyperscript/render.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; - -export const todo = view("common-todo", { - ...eventProps(), - id: { type: "string" }, - checked: { type: "boolean" }, - placeholder: { type: "string" }, - value: { type: "string" }, -}); export type Todo = { id: string; diff --git a/typescript/packages/common-ui/src/components/common-unibox.ts b/typescript/packages/common-ui/src/components/common-unibox.ts index 4e02a523f..c51dde0e0 100644 --- a/typescript/packages/common-ui/src/components/common-unibox.ts +++ b/typescript/packages/common-ui/src/components/common-unibox.ts @@ -1,16 +1,6 @@ import { LitElement, html, css } from "lit"; import { customElement, property } from "lit/decorators.js"; import { baseStyles } from "./style.js"; -import { view } from "../hyperscript/render.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; - -export const unibox = view("common-unibox", { - ...eventProps(), - id: { type: "string" }, - value: { type: "string" }, - placeholder: { type: "string" }, - label: { type: "string" }, -}); @customElement("common-unibox") export class CommonUniboxElement extends LitElement { diff --git a/typescript/packages/common-ui/src/components/common-vstack.ts b/typescript/packages/common-ui/src/components/common-vstack.ts index 3441668cb..3978a3b3d 100644 --- a/typescript/packages/common-ui/src/components/common-vstack.ts +++ b/typescript/packages/common-ui/src/components/common-vstack.ts @@ -1,14 +1,6 @@ import { LitElement, html, css } from "lit"; import { customElement, property } from "lit/decorators.js"; import { baseStyles } from "./style.js"; -import { view } from "../hyperscript/render.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; - -export const vstack = view("common-vstack", { - ...eventProps(), - gap: { type: "string" }, - pad: { type: "string" }, -}); @customElement("common-vstack") export class CommonVstackElement extends LitElement { diff --git a/typescript/packages/common-ui/src/components/div.ts b/typescript/packages/common-ui/src/components/div.ts deleted file mode 100644 index 30d23281e..000000000 --- a/typescript/packages/common-ui/src/components/div.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { view } from '../hyperscript/render.js'; - -export const div = view('div', { - id: { type: 'string' }, -}); \ No newline at end of file diff --git a/typescript/packages/common-ui/src/components/h1.ts b/typescript/packages/common-ui/src/components/h1.ts deleted file mode 100644 index f57d4c640..000000000 --- a/typescript/packages/common-ui/src/components/h1.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { view } from "../hyperscript/render.js"; - -export const h1 = view("h1", { - id: { type: "string" }, -}); diff --git a/typescript/packages/common-ui/src/components/include.ts b/typescript/packages/common-ui/src/components/include.ts deleted file mode 100644 index b5d91003a..000000000 --- a/typescript/packages/common-ui/src/components/include.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { LitElement, html } from "lit-element"; -import { customElement, property } from "lit-element/decorators.js"; -import { view, render } from "../hyperscript/render.js"; -import { VNode } from "../hyperscript/view.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; - -export const include = view("common-include", { - ...eventProps(), - // TODO; This should be split into two properties, vdom and context - content: { type: "object" }, -}); - -@customElement("common-include") -export class IncludeElement extends LitElement { - @property({ type: Object }) - content: VNode; - - override render() { - const element = render(this.content); - - return html`${element}`; - } -} diff --git a/typescript/packages/common-ui/src/components/index.ts b/typescript/packages/common-ui/src/components/index.ts index ec3df22a0..c4d9feb5d 100644 --- a/typescript/packages/common-ui/src/components/index.ts +++ b/typescript/packages/common-ui/src/components/index.ts @@ -8,7 +8,6 @@ export * as CommonInput from "./common-input.js"; export * as CommonTextarea from "./common-textarea.js"; export * as CommonInputFile from "./common-input-file.js"; export * as CommonMedia from "./common-media.js"; -export * as CommonNavPanel from "./common-navpanel.js"; export * as CommonRecord from "./common-record.js"; export * as CommonScreen from "./common-screen.js"; export * as CommonVstack from "./common-vstack.js"; diff --git a/typescript/packages/common-ui/src/components/input.ts b/typescript/packages/common-ui/src/components/input.ts deleted file mode 100644 index 4706b8191..000000000 --- a/typescript/packages/common-ui/src/components/input.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { view } from "../hyperscript/render.js"; -import { Props } from "../hyperscript/view.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; - -export const input = view("input", { - ...eventProps(), - id: { type: "string" }, - alt: { type: "string" }, - name: { type: "string" }, - value: { type: "string" }, - type: { type: "string" }, - checked: { type: "boolean" }, - min: { type: "string" }, - minlength: { type: "number" }, - max: { type: "string" }, - maxlength: { type: "number" }, - pattern: { type: "string" }, - accept: { type: "string" }, - size: { type: "number" }, - placeholder: { type: "string" }, -}); - -export const textInput = (props: Props) => input({ ...props, type: "text" }); -export const checkbox = (props: Props) => input({ ...props, type: "checkbox" }); -export const radio = (props: Props) => input({ ...props, type: "radio" }); -export const fileInput = (props: Props) => input({ ...props, type: "file" }); -export const imageInput = (props: Props) => input({ ...props, type: "image" }); -export const password = (props: Props) => input({ ...props, type: "password" }); -export const searchInput = (props: Props) => - input({ ...props, type: "search" }); diff --git a/typescript/packages/common-ui/src/components/p.ts b/typescript/packages/common-ui/src/components/p.ts deleted file mode 100644 index d5edb5dcb..000000000 --- a/typescript/packages/common-ui/src/components/p.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { view } from "../hyperscript/render.js"; - -export const p = view("p", { - id: { type: "string" }, -}); diff --git a/typescript/packages/common-ui/src/components/send-input.ts b/typescript/packages/common-ui/src/components/send-input.ts index 2c8d92d35..0d73bfd80 100644 --- a/typescript/packages/common-ui/src/components/send-input.ts +++ b/typescript/packages/common-ui/src/components/send-input.ts @@ -1,15 +1,7 @@ import { LitElement, html, css } from "lit-element"; import { customElement, property } from "lit-element/decorators.js"; import { baseStyles } from "./style.js"; -import { view } from "../hyperscript/render.js"; -import { eventProps } from "../hyperscript/schema-helpers.js"; -export const sendInput = view("common-send-message", { - ...eventProps(), - name: { type: "string" }, - placeholder: { type: "string" }, - appearance: { type: "string" }, -}); @customElement("common-send-message") export class SendMessageElement extends LitElement { diff --git a/typescript/packages/common-ui/src/components/shoelace/components.ts b/typescript/packages/common-ui/src/components/shoelace/components.ts index 9f16d5b11..5f662ad93 100644 --- a/typescript/packages/common-ui/src/components/shoelace/components.ts +++ b/typescript/packages/common-ui/src/components/shoelace/components.ts @@ -1,617 +1 @@ import "@shoelace-style/shoelace"; -import { view } from "../../hyperscript/render.js"; -import { basicProps, t, binding } from "../../hyperscript/schema-helpers.js"; - -export const alert = view("sl-alert", { - ...basicProps(), - open: t("boolean"), - variant: t("string"), -}); - -export const animatedImage = view("sl-animated-image", { - ...basicProps(), - src: t("string"), - alt: t("string"), - play: t("boolean"), -}); - -export const avatar = view("sl-avatar", { - ...basicProps(), - image: t("string"), - label: t("string"), - initials: t("string"), - loading: t("string"), - shape: t("string"), -}); - -export const badge = view("sl-badge", { - ...basicProps(), - variant: t("string"), - pill: t("boolean"), - pulse: t("boolean"), -}); - -export const breadcrumb = view("sl-breadcrumb", { - ...basicProps(), - label: t("string"), -}); - -export const breadcrumbItem = view("sl-breadcrumb-item", { - ...basicProps(), - href: t("string"), - rel: t("string"), -}); - -export const button = view("sl-button", { - ...basicProps(), - "@sl-blur": binding(), - "@sl-focus": binding(), - "@sl-invalid": binding(), - variant: t("string"), - size: t("size"), - caret: t("boolean"), - disabled: t("boolean"), - loading: t("boolean"), - outline: t("boolean"), - pill: t("boolean"), - circle: t("boolean"), - type: t("string"), - name: t("string"), - value: t("string"), - href: t("string"), - rel: t("string"), -}); - -export const buttonGroup = view("sl-button-group", { - ...basicProps(), - label: t("string"), -}); - -export const card = view("sl-card", { - ...basicProps(), -}); - -export const carousel = view("sl-carousel", { - ...basicProps(), - loop: t("boolean"), - navigation: t("boolean"), - pagination: t("boolean"), - autoplay: t("boolean"), - autoplayInterval: t("number"), - slidesPerPage: t("number"), - slidesPerMove: t("number"), - orientation: t("string"), - mouseDragging: t("boolean"), -}); - -export const carouselItem = view("sl-carousel-item", { - ...basicProps(), -}); - -export const checkbox = view("sl-checkbox", { - ...basicProps(), - "@sl-blur": binding(), - "@sl-change": binding(), - "@sl-focus": binding(), - "@sl-input": binding(), - "@sl-invalid": binding(), - name: t("string"), - value: t("string"), - size: t("string"), - disabled: t("boolean"), - checked: t("string"), - indeterminate: t("boolean"), - defaultChecked: t("boolean"), - required: t("boolean"), - helpText: t("string"), -}); - -export const colorPicker = view("sl-color-picker", { - ...basicProps(), - "@sl-blur": binding(), - "@sl-change": binding(), - "@sl-focus": binding(), - "@sl-input": binding(), - "@sl-invalid": binding(), - value: t("string"), - defaultValue: t("string"), - label: t("string"), - format: t("string"), - inline: t("boolean"), - size: t("string"), - noFormatToggle: t("boolean"), - name: t("string"), - disabled: t("boolean"), - hoist: t("boolean"), - opacity: t("boolean"), - uppercase: t("boolean"), - swatches: t("string"), - required: t("boolean"), -}); - -export const copyButton = view("sl-copy-button", { - ...basicProps(), - "@sl-blur": binding(), - "@sl-change": binding(), - "@sl-focus": binding(), - "@sl-input": binding(), - "@sl-invalid": binding(), - value: t("string"), - from: t("string"), - disabled: t("boolean"), - copyLabel: t("string"), - successLabel: t("string"), - errorLabel: t("string"), - feedbackDuration: t("number"), - tooltipPlacement: t("string"), - hoist: t("boolean"), -}); - -export const details = view("sl-details", { - ...basicProps(), - "@sl-show": binding(), - "@sl-after-show": binding(), - "@sl-hide": binding(), - "@sl-after-hide": binding(), - "@sl-initial-focus": binding(), - "@sl-request-close": binding(), - open: t("boolean"), - summary: t("string"), - disabled: t("boolean"), -}); - -export const dialog = view("sl-dialog", { - ...basicProps(), - "@sl-show": binding(), - "@sl-after-show": binding(), - "@sl-hide": binding(), - "@sl-after-hide": binding(), - open: t("boolean"), - label: t("string"), - noHeader: t("boolean"), -}); - -export const divider = view("sl-divider", { - ...basicProps(), - vertical: t("boolean"), -}); - -export const drawer = view("sl-drawer", { - ...basicProps(), - open: t("boolean"), - label: t("string"), - placement: t("string"), - contained: t("boolean"), - noHeader: t("boolean"), -}); - -export const dropdown = view("sl-dropdown", { - ...basicProps(), - "@sl-show": binding(), - "@sl-after-show": binding(), - "@sl-hide": binding(), - "@sl-after-hide": binding(), - open: t("boolean"), - placement: t("string"), - disabled: t("boolean"), - stayOpenOnSelect: t("boolean"), - distance: t("number"), - skidding: t("number"), - hoist: t("boolean"), - sync: t("string"), - contained: t("boolean"), -}); - -export const formatBytes = view("sl-format-bytes", { - ...basicProps(), - value: t("number"), - unit: t("string"), - display: t("string"), -}); - -export const formatDate = view("sl-format-date", { - ...basicProps(), - date: t("string"), - weekday: t("string"), - era: t("string"), - year: t("string"), - month: t("string"), - day: t("string"), - hour: t("string"), - minute: t("string"), - second: t("string"), - timeZoneName: t("string"), - timeZone: t("string"), - hourFormat: t("string"), -}); - -export const formatNumber = view("sl-format-number", { - ...basicProps(), - value: t("number"), - type: t("string"), - noGrouping: t("boolean"), - currency: t("string"), - currencyDisplay: t("string"), - minimumIntegerDigits: t("number"), - minimumFractionDigits: t("number"), - maximumFractionDigits: t("number"), - minimumSignificantDigits: t("number"), - maximumSignificantDigits: t("number"), -}); - -export const icon = view("sl-icon", { - ...basicProps(), - name: t("string"), - src: t("string"), - label: t("string"), - library: t("string"), -}); - -export const iconButton = view("sl-icon-button", { - ...basicProps(), - "@sl-blur": binding(), - "@sl-focus": binding(), - name: t("string"), - src: t("string"), - href: t("boolean"), - label: t("string"), - library: t("string"), - disabled: t("boolean"), - download: t("string"), -}); - -export const imageComparer = view("sl-image-comparer", { - ...basicProps(), - position: t("number"), -}); - -export const input = view("sl-input", { - ...basicProps(), - "@sl-blur": binding(), - "@sl-change": binding(), - "@sl-clear": binding(), - "@sl-focus": binding(), - "@sl-input": binding(), - "@sl-invalid": binding(), - type: t("string"), - name: t("string"), - value: t("string"), - defaultValue: t("string"), - size: t("string"), - filled: t("boolean"), - pill: t("boolean"), - label: t("string"), - helpText: t("string"), - clearable: t("boolean"), - disabled: t("boolean"), - passwordToggle: t("boolean"), - passwordVisible: t("boolean"), - placeholder: t("string"), - noSpinButtons: t("boolean"), - readonly: t("boolean"), - minlength: t("number"), - maxlength: t("number"), - min: t("number"), - max: t("number"), - step: t("number"), - pattern: t("string"), - required: t("boolean"), - autocapitalize: t("string"), - autocorrect: t("string"), - autocomplete: t("string"), - autofocus: t("boolean"), - enterkeyhint: t("string"), - spellcheck: t("boolean"), - inputmode: t("string"), -}); - -export const menu = view("sl-menu", { - ...basicProps(), -}); - -export const menuItem = view("sl-menu-item", { - ...basicProps(), - "@sl-label-change": binding(), - type: t("string"), - checked: t("boolean"), - value: t("string"), - loading: t("boolean"), - disabled: t("boolean"), -}); - -export const menuLabel = view("sl-menu-label", { - ...basicProps(), -}); - -export const option = view("sl-option", { - ...basicProps(), - value: t("string"), - disabled: t("boolean"), -}); - -export const popup = view("sl-popup", { - ...basicProps(), - active: t("boolean"), - placement: t("string"), - strategy: t("string"), - distance: t("number"), - skidding: t("number"), - arrow: t("boolean"), - arrowPlacement: t("string"), - arrowPadding: t("number"), - flip: t("boolean"), - flipFallbackPlacements: t("string"), - flipFallbackStrategy: t("string"), - flipBoundary: t("object"), - flipPadding: t("number"), - shift: t("boolean"), - shiftBoundary: t("object"), - shiftPadding: t("number"), - autoSizePadding: t("number"), - hoverBridge: t("boolean"), -}); - -export const progressBar = view("sl-progress-bar", { - ...basicProps(), - value: t("number"), - indeterminate: t("boolean"), - label: t("string"), -}); - -export const progressRing = view("sl-progress-ring", { - ...basicProps(), - value: t("number"), - label: t("string"), -}); - -export const qrCode = view("sl-qr-code", { - ...basicProps(), - value: t("string"), - label: t("string"), - size: t("number"), - fill: t("string"), - background: t("string"), - radius: t("number"), - errorCorrection: t("string"), -}); - -export const radio = view("sl-radio", { - ...basicProps(), - "@sl-blur": binding(), - "@sl-focus": binding(), - value: t("string"), - size: t("string"), - disabled: t("boolean"), -}); - -export const radioButton = view("sl-radio-button", { - ...basicProps(), - "@sl-change": binding(), - "@sl-input": binding(), - "@sl-invalid": binding(), - value: t("string"), - size: t("string"), - pill: t("boolean"), - disabled: t("boolean"), -}); - -export const radioGroup = view("sl-radio-group", { - ...basicProps(), - "@sl-change": binding(), - "@sl-input": binding(), - "@sl-invalid": binding(), - value: t("string"), - size: t("string"), - label: t("string"), - helpText: t("string"), - required: t("boolean"), -}); - -export const range = view("sl-range", { - ...basicProps(), - "@sl-blur": binding(), - "@sl-change": binding(), - "@sl-focus": binding(), - "@sl-input": binding(), - "@sl-invalid": binding(), - name: t("string"), - value: t("number"), - defaultValue: t("number"), - label: t("string"), - helpText: t("string"), - disabled: t("boolean"), - min: t("number"), - max: t("number"), - step: t("number"), - tooltip: t("string"), - tooltipFormatter: t("function"), -}); - -export const rating = view("sl-rating", { - ...basicProps(), - "@sl-change": binding(), - "@sl-hover": binding(), - value: t("number"), - max: t("number"), - precision: t("number"), - readonly: t("boolean"), - disabled: t("boolean"), - getSymbol: t("function"), -}); - -export const relativeTime = view("sl-relative-time", { - ...basicProps(), - date: t("string"), - format: t("string"), - numeric: t("string"), - sync: t("boolean"), -}); - -export const select = view("sl-select", { - ...basicProps(), - "@sl-change": binding(), - "@sl-clear": binding(), - "@sl-input": binding(), - "@sl-focus": binding(), - "@sl-blur": binding(), - "@sl-show": binding(), - "@sl-after-show": binding(), - "@sl-hide": binding(), - "@sl-after-hide": binding(), - "@sl-invalid": binding(), - name: t("string"), - value: t("string"), - defaultValue: t("string"), - size: t("string"), - label: t("string"), - helpText: t("string"), - placeholder: t("string"), - multiple: t("boolean"), - maxOptionsVisible: t("number"), - disabled: t("boolean"), - clearable: t("boolean"), - required: t("boolean"), - hoist: t("boolean"), - open: t("boolean"), - filled: t("boolean"), - pill: t("boolean"), - placement: t("string"), -}); - -export const skeleton = view("sl-skeleton", { - ...basicProps(), - effect: t("string"), -}); - -export const spinner = view("sl-spinner", { - ...basicProps(), -}); - -export const splitPanel = view("sl-split-panel", { - ...basicProps(), - "@sl-reposition": binding(), - position: t("number"), - positionInPixels: t("number"), - vertical: t("boolean"), - disabled: t("boolean"), - primary: t("string"), - snap: t("string"), - snapThreshold: t("number"), -}); - -export const toggleSwitch = view("sl-switch", { - ...basicProps(), - "@sl-blur": binding(), - "@sl-change": binding(), - "@sl-input": binding(), - "@sl-invalid": binding(), - "@sl-focus": binding(), - name: t("string"), - value: t("string"), - size: t("string"), - disabled: t("boolean"), - required: t("boolean"), - checked: t("boolean"), - defaultChecked: t("boolean"), -}); - -export const tab = view("sl-tab", { - ...basicProps(), - "@sl-close": binding(), - panel: t("string"), - active: t("boolean"), - closable: t("boolean"), - disabled: t("boolean"), -}); - -export const tabGroup = view("sl-tab-group", { - ...basicProps(), - "@sl-tab-show": binding(), - "@sl-tab-hide": binding(), - placement: t("string"), - activation: t("string"), - noScrollControls: t("boolean"), - fixedScrollControls: t("boolean"), -}); - -export const tabPanel = view("sl-tab-panel", { - ...basicProps(), - name: t("string"), - active: t("boolean"), -}); - -export const tag = view("sl-tag", { - ...basicProps(), - "@sl-remove": binding(), - variant: t("string"), - size: t("string"), - removable: t("boolean"), - pill: t("boolean"), -}); - -export const textarea = view("sl-textarea", { - ...basicProps(), - "@sl-blur": binding(), - "@sl-change": binding(), - "@sl-focus": binding(), - "@sl-input": binding(), - "@sl-invalid": binding(), - name: t("string"), - value: t("string"), - size: t("string"), - filled: t("boolean"), - label: t("string"), - helpText: t("string"), - placeholder: t("string"), - rows: t("number"), - resize: t("string"), - disabled: t("boolean"), - readonly: t("boolean"), - minlength: t("number"), - maxlength: t("number"), - required: t("boolean"), - autocapitalize: t("string"), - autocorrect: t("string"), - autocomplete: t("string"), - autofocus: t("boolean"), - enterkeyhint: t("string"), - spellcheck: t("boolean"), - inputmode: t("string"), - defaultValue: t("string"), -}); - -export const tooltip = view("sl-tooltip", { - ...basicProps(), - "@sl-show": binding(), - "@sl-after-show": binding(), - "@sl-hide": binding(), - "@sl-after-hide": binding(), - content: t("string"), - placement: t("string"), - disabled: t("boolean"), - distance: t("number"), - open: t("boolean"), - skidding: t("number"), - trigger: t("string"), - hoist: t("boolean"), -}); - -export const tree = view("sl-tree", { - ...basicProps(), - "@sl-selection-change": binding(), - selection: t("string"), -}); - -export const treeItem = view("sl-tree-item", { - ...basicProps(), - "@sl-expand": binding(), - "@sl-after-expand": binding(), - "@sl-collapse": binding(), - "@sl-after-collapse": binding(), - "@sl-lazy-change": binding(), - "@sl-lazy-load": binding(), - expanded: t("boolean"), - selected: t("boolean"), - disabled: t("boolean"), - lazy: t("boolean"), -}); diff --git a/typescript/packages/common-ui/src/components/span.ts b/typescript/packages/common-ui/src/components/span.ts deleted file mode 100644 index 18d75fb00..000000000 --- a/typescript/packages/common-ui/src/components/span.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { view } from "../hyperscript/render.js"; - -export const span = view("span", { - id: { type: "string" }, -}); diff --git a/typescript/packages/common-ui/src/example.ts b/typescript/packages/common-ui/src/example.ts deleted file mode 100644 index e2c81b628..000000000 --- a/typescript/packages/common-ui/src/example.ts +++ /dev/null @@ -1,128 +0,0 @@ -import "./index.js"; -import { subject } from "@commontools/common-frp/stream"; -import { state } from "@commontools/common-frp/signal"; -import { datatable, dict, vstack, div, shoelace, iframe } from "./hyperscript/tags.js"; -import { binding, repeat } from "./hyperscript/view.js"; -import render from "./hyperscript/render.js"; - -const datatableNode = datatable({ - "@click": binding("clicks"), - cols: [ - "title", - "day", - "time", - "location", - "address", - "description", - "level", - "price", - "email", - "reservation", - ], - rows: [ - { - title: "Power Yoga", - day: "Monday", - time: "8:00am", - location: "Studio 1 & 2 (combined)", - description: - "Stretch and relax with yoga practice at the studio. All levels welcome. Bring your own mat. Namaste. 🧘‍♂️", - level: "Beginner to Advanced", - price: "$10", - address: "1234 Elm St, Springfield, IL 62701", - email: "yogazon124@example.com", - reservation: "https://example.com/reserve/power-yoga", - }, - { - title: "Pilates", - day: "Wednesday", - time: "8:00am", - location: "Studio", - description: "Strengthen and tone", - level: "Intermediate", - price: "$15", - address: "1234 Elm St, Springfield, IL 62701", - email: "pilates14asdf@example.com", - reservation: "https://example.com/reserve/pilates", - }, - { - title: "Zumba", - day: "Friday", - time: "8:00am", - location: "Studio", - description: "Dance and have fun", - level: "Advanced", - price: "$20", - address: "1234 Elm St, Springfield, IL 62701", - email: "zumba@example.com", - reservation: "https://example.com/reserve/zumba", - }, - ], -}); - -const dictNode = dict({ - records: { - one: "1", - two: "2", - three: "3", - }, -}); - -const listNode = vstack( - { - "@click": binding("listClicks"), - }, - repeat("items", div({ id: binding("id") }, binding("value"))), -); - -const iframeNode = iframe({ - src: "Hello", -}); - -const tree = vstack({}, [ - iframeNode, - shoelace.alert( - { - open: true, - variant: "primary", - }, - ["Hello"], - ), - shoelace.avatar({ - initials: "GB", - }), - shoelace.badge({}, ["Badge"]), - shoelace.breadcrumb({}, [ - shoelace.breadcrumbItem({}, ["Hello"]), - shoelace.breadcrumbItem({}, ["World"]), - ]), - shoelace.button({}, ["Button"]), - shoelace.icon({ - library: "material", - name: "settings", - label: "Settings", - }), - datatableNode, - dictNode, - listNode, -]); - -const clicks = subject(); - -clicks.sink({ - send: (clicks) => { - console.log("clicks", clicks); - }, -}); - - -const element = render(tree, { - clicks, - items: state([ - { id: "1", value: state("One") }, - { id: "2", value: state("Two") }, - { id: "3", value: "Three" }, - ]), -}); - -document.body.appendChild(element); diff --git a/typescript/packages/common-ui/src/hyperscript/render.ts b/typescript/packages/common-ui/src/hyperscript/render.ts deleted file mode 100644 index 54ea22610..000000000 --- a/typescript/packages/common-ui/src/hyperscript/render.ts +++ /dev/null @@ -1,320 +0,0 @@ -import { Cancel, combineCancels, isSendable } from "@commontools/common-frp"; -import { - Signal, - WriteableSignal, - effect, - isSignal, -} from "@commontools/common-frp/signal"; -import { - Stream, - WriteableStream, - isStream, -} from "@commontools/common-frp/stream"; -import { - isBinding, - VNode, - View, - view as createView, - Children, - isRepeatBinding, -} from "./view.js"; -import { JSONSchemaRecord } from "./schema-helpers.js"; -import { gmap, isIterable } from "../shared/generator.js"; - -/** Registry for tags that are allowed to be rendered */ -const registry = () => { - const viewByTag = new Map(); - - const listViews = () => Array.from(viewByTag.values()); - - const getViewByTag = (tag: string) => viewByTag.get(tag); - - const registerView = (view: View) => { - viewByTag.set(view.tag, view); - }; - - return { getViewByTag, listViews, registerView }; -}; - -export const { getViewByTag, listViews, registerView } = registry(); - -/** Define and register a view factory function */ -export const view = (tagName: string, props: JSONSchemaRecord = {}): View => { - const factory = createView(tagName, props); - registerView(factory); - return factory; -}; - -export type BindableValue = - | Signal - | WriteableSignal - | Stream - | WriteableStream - | any; - -export type RenderContext = Record; - -export const __cancel__ = Symbol("cancel"); - -/** Bind an event listener, and return a Cancel function */ -const listen = ( - element: Element, - event: string, - listener: EventListener, - options?: AddEventListenerOptions -): Cancel => { - element.addEventListener(event, listener, options); - return () => { - element.removeEventListener(event, listener, options); - }; -}; - -/** Read an event, returning a safe description object */ -const readEvent = (event: Event) => { - event.stopPropagation(); - switch (event.type) { - case "click": - return { - type: "click", - id: (event.target as Element).id, - }; - default: - return { - type: event.type, - id: (event.target as Element).id, - detail: (event as CustomEvent).detail, - }; - } -}; - -const modifyPropsForSchemaValidation = (props: object) => - Object.fromEntries( - Object.entries(props).filter( - ([_, value]) => !isSignal(value) && !isStream(value) && !isBinding(value) - ) - ); - -/** Render a VNode tree, binding reactive data sources. */ -const renderVNode = (vnode: VNode, context: RenderContext): Node => { - // Make sure we have a view for this tag. If we don't it is not whitelisted. - const view = getViewByTag(vnode.tag); - - if (typeof view !== "function") { - throw new TypeError(`Unknown tag: ${vnode.tag}`); - } - - // Validate props against the view's schema. - if (!view.props.validate(modifyPropsForSchemaValidation(vnode.props))) { - throw new TypeError(`Invalid props for tag: ${vnode.tag}. - Props: ${JSON.stringify(vnode.props)}, ${JSON.stringify(modifyPropsForSchemaValidation(vnode.props), undefined, 2)} - Schema: ${JSON.stringify(view.props.schema, undefined, 2)}`); - } - - // Create the element - const element = document.createElement(vnode.tag); - - // Bind each prop to a reactive value (if any) and collect cancels - const cancels: Array = []; - - for (const [prop, value] of Object.entries(vnode.props)) { - const [key, detail] = prop.split("#", 2); - // Don't bind properties that aren't whitelisted in the schema. - if (!Object.hasOwn(view.props.schema.properties, key)) { - continue; - } - - if (isBinding(value) || isSignal(value) || isStream(value)) { - const bound = - isSignal(value) || isStream(value) ? value : context[value.name]; - if (isEventKey(key)) { - if (isSendable(bound)) { - const { send } = bound; - const event = readEventNameFromEventKey(key); - const cancel = listen(element, event, (event: Event) => { - let vdomEvent = readEvent(event); - if (detail) vdomEvent = vdomEvent.detail[detail]; - send(vdomEvent); - }); - cancels.push(cancel); - } - } else { - if (bound) { - const cancel = effect([bound], (value) => { - setProp(element, key, value); - }); - cancels.push(cancel); - } - } - } else { - setProp(element, key, value); - } - } - - // Combine cancels and store on element. - const cancel = combineCancels(cancels); - // @ts-ignore - element[__cancel__] = cancel; - - if (isRepeatBinding(vnode.children)) { - const { name, template, signal } = vnode.children; - const scopedContext = signal ? signal : context[name]; - const cancel = renderDynamicChildren(element, template, scopedContext); - cancels.push(cancel); - } else if (isBinding(vnode.children)) { - const { name } = vnode.children; - renderText(element, context[name]); - } else if (isSignal(vnode.children)) { - const signal = vnode.children; - renderText(element, signal); - } else { - renderStaticChildren( - element, - vnode.children as Exclude, Children>, - context - ); - } - - return element; -}; - -/** Render a view tree, binding reactive data sources. */ -export const render = ( - vnode: VNode | string | undefined | null, - context: RenderContext = {} -): Node => { - if (vnode == null) { - return document.createTextNode(""); - } - if (typeof vnode === "string") { - return document.createTextNode(vnode); - } - return renderVNode(vnode, context); -}; - -export default render; - -const isEventKey = (key: string) => key.startsWith("@"); - -/** Extract the event name from the event key */ -const readEventNameFromEventKey = (key: string) => { - if (!isEventKey(key)) { - throw new TypeError( - `Invalid event key: ${key}. Event keys must start with "@".` - ); - } - return key.slice(1); -}; - -const setProp = (element: Element, key: string, value: any) => { - // @ts-ignore - element[key] = value; -}; - -/** Render a static list of VNode children to an element */ -const renderStaticChildren = ( - element: Element, - children: Array, - context: RenderContext -) => { - for (const child of children) { - if (typeof child === "string") { - element.appendChild(document.createTextNode(child)); - } else { - element.appendChild(render(child, context)); - } - } -}; - -const renderText = (element: Element, value: any): Cancel => - effect([value], (value) => { - if (value != null) { - element.textContent = value as string; - } - }); - -/** Symbol for list item key */ -const __id__ = Symbol("list item key"); - -let _cid = 0; -const cid = () => `cid${_cid++}`; - -/** - * An element with an id symbol used for efficient rendering of dynamic lists. - */ -export type IdentifiedChild = Element & { [__id__]?: any }; - -export const renderDynamicChildren = ( - parent: Element, - template: VNode | Function, - states: Signal | any -) => { - return effect([states], (states) => { - // If states is not iterable, do nothing. - if (!isIterable(states)) { - return; - } - - // Build a map of states by id for quick lookup. - // If model doesn't have an ID, generate one. Generated ID will mean the - // item will not be efficiently re-rendered by identity, but it will - // still work. - const statesById = new Map( - gmap(states, (state) => [state.id ?? cid(), state]) - ); - - // Build an index of children and a list of children to remove. - // Note that we must build a list of children to remove, since - // removing in-place would change the live node list and bork iteration. - const children = new Map(); - const removes: Array = []; - - for (const child of parent.children) { - const identifiedChild = child as IdentifiedChild; - const childId = identifiedChild[__id__]; - children.set(childId, child); - if (!statesById.has(childId)) { - removes.push(identifiedChild); - } - } - - for (const child of removes) { - parent.removeChild(child); - } - - let i = 0; - for (const id of statesById.keys()) { - const index = i++; - const child = children.get(id); - if (child != null) { - insertElementAt(parent, child, index); - } else { - const childContext = statesById.get(id); - const keyedChild = render( - typeof template === "function" ? template(childContext) : template, - childContext - ) as IdentifiedChild; - keyedChild[__id__] = id; - insertElementAt(parent, keyedChild, index); - } - } - }); -}; - -/** - * Insert element at index. - * If element is already at index, this function is a no-op - * (it doesn't remove-and-then-add element). By avoiding moving the element - * unless needed, we preserve focus and selection state for elements that - * don't move. - */ -export const insertElementAt = ( - parent: Element, - element: Element, - index: number -) => { - const elementAtIndex = parent.children[index]; - if (elementAtIndex === element) { - return; - } - parent.insertBefore(element, elementAtIndex); -}; diff --git a/typescript/packages/common-ui/src/hyperscript/schema-helpers.ts b/typescript/packages/common-ui/src/hyperscript/schema-helpers.ts deleted file mode 100644 index df94611ef..000000000 --- a/typescript/packages/common-ui/src/hyperscript/schema-helpers.ts +++ /dev/null @@ -1,73 +0,0 @@ -/** Schema helpers */ - -export type AnyJSONSchema = object; - -export type JSONSchemaRecord = Record; - -export type AnyJSONObjectSchema = { - type: "object"; - properties: Record; - additionalProperties?: boolean; -}; - -export const t = (type: string) => ({ type }); - -// NOTE: these are written as factories for JSONSchema objects, rather than -// frozen schema objects because the JSONSchema validator mutates the object -// to add metadata about the schema. - -/** JSONSchema for binding */ -export const binding = () => ({ - type: "object", - properties: { - "@type": { type: "string" }, - name: { type: "string" }, - }, - required: ["@type", "name"], -}); - -export const bindable = (schema: AnyJSONSchema) => ({ - anyOf: [schema, binding()], -}); - -/** Mixin for list of allowed basic events */ -export const eventProps = () => ({ - // Basic events - "@click": binding(), - "@change": binding(), - "@focus": binding(), - "@blur": binding(), - "@focusin": binding(), - "@focusout": binding(), - "@input": binding(), - "@keydown": binding(), - "@keyup": binding(), - "@mousedown": binding(), - "@mouseenter": binding(), - "@mouseleave": binding(), - "@mousemove": binding(), - "@mouseout": binding(), - "@mouseover": binding(), - "@mouseup": binding(), - - // Custom events - "@messageSend": binding(), - "@todo-checked": binding(), - "@todo-input": binding(), - "@select-suggestion": binding(), - "@common-input": binding(), -}); - -export const basicProps = () => ({ - ...eventProps(), - accesskey: { type: "string" }, - autocapitalize: { type: "string" }, - class: { type: "string" }, - disabled: { type: "boolean" }, - id: { type: "string" }, - name: { type: "string" }, - role: { type: "string" }, - spellcheck: { type: "boolean" }, - slot: { type: "string" }, - title: { type: "string" }, -}); diff --git a/typescript/packages/common-ui/src/hyperscript/tags.ts b/typescript/packages/common-ui/src/hyperscript/tags.ts deleted file mode 100644 index 7e40fa5eb..000000000 --- a/typescript/packages/common-ui/src/hyperscript/tags.ts +++ /dev/null @@ -1,20 +0,0 @@ -export { hstack } from "../components/common-hstack.js"; -export { vstack } from "../components/common-vstack.js"; -export { div } from "../components/div.js"; -export { navpanel } from "../components/common-navpanel.js"; -export { record } from "../components/common-record.js"; -export { dict } from "../components/common-dict.js"; -export { datatable } from "../components/common-datatable.js"; -export { iframe } from "../components/common-iframe.js"; -export { commonInput } from "../components/common-input.js"; -export { suggestions } from "../components/common-suggestions.js"; -export { unibox } from "../components/common-unibox.js"; -export { todo } from "../components/common-todo.js"; -export { span } from "../components/span.js"; -export { h1 } from "../components/h1.js"; -export { p } from "../components/p.js"; -export { button } from "../components/button.js"; -export { include } from "../components/include.js"; -export { input, textInput, checkbox, radio } from "../components/input.js"; -export { sendInput } from "../components/send-input.js"; -export * as shoelace from "../components/shoelace/index.js"; diff --git a/typescript/packages/common-ui/src/hyperscript/view.ts b/typescript/packages/common-ui/src/hyperscript/view.ts deleted file mode 100644 index 62c7cf268..000000000 --- a/typescript/packages/common-ui/src/hyperscript/view.ts +++ /dev/null @@ -1,188 +0,0 @@ -import { isSignal, Signal } from "@commontools/common-frp/signal"; -import * as Schema from "../shared/schema.js"; -import { - AnyJSONObjectSchema, - JSONSchemaRecord, - bindable, -} from "./schema-helpers.js"; -import { deepFreeze } from "../shared/deep-freeze.js"; - -export type Binding = { - "@type": "binding"; - name: string; -}; - -/** Is value a binding to a reactive value? */ -export const isBinding = (value: any): value is Binding => { - return ( - value && value["@type"] === "binding" && typeof value.name === "string" - ); -}; - -/** Create a template binding */ -export const binding = (name: string): Binding => ({ - "@type": "binding", - name, -}); - -/** A repeat binding repeats items in a dynamic list using a template */ -export type RepeatBinding = { - "@type": "repeat"; - name: string; - signal?: Signal; - template: VNode | Function; -}; - -/** Is value a binding to a reactive value? */ -export const isRepeatBinding = (value: any): value is RepeatBinding => { - return ( - value != null && - value["@type"] === "repeat" && - typeof value.name === "string" && - (isVNode(value.template) || typeof value.template === "function") - ); -}; - -/** Create a template binding */ -export const repeat = ( - name: string | Signal, - template: VNode | Function -): RepeatBinding => ({ - "@type": "repeat", - name: typeof name === "string" ? name : "signal", - template, - ...(isSignal(name) ? { signal: name } : {}), -}); - -export type Value = string | number | boolean | null | object; - -export type ReactiveValue = Binding | Value; - -export type Props = { - [key: string]: ReactiveValue; -}; - -export type Tag = string; - -export type Children = - | RepeatBinding - | Binding - | Signal - | Array; - -export type VNode = { - tag: Tag; - props: Props; - children: Children; -}; - -// NOTE: don't freeze this object, since the validator will want to mutate it. -export const VNodeSchema = { - $id: "https://common.tools/schema/vnode.json", - title: "VNode", - description: "View Node", - type: "object", - properties: { - tag: { type: "string" }, - props: { - type: "object", - additionalProperties: { - oneOf: [ - { type: "string" }, - { type: "number" }, - { type: "boolean" }, - { type: "null" }, - { type: "object" }, - { type: "array" }, - { type: "signal" }, - ], - }, - }, - children: { - type: "array", - items: { - oneOf: [{ type: "string" }, { $ref: "#" }], - }, - }, - }, - required: ["tag", "props", "children"], -}; - -/** Internal helper for creating VNodes */ -const vnode = (tag: string, props: Props = {}, children: Children): VNode => ({ - tag, - props, - children, -}); - -/** Is object a VNode? */ -export const isVNode = (value: any): value is VNode => { - return ( - value != null && - typeof value.tag === "string" && - typeof value.props === "object" && - value.children != null - ); -}; - -export type Factory = { - (): VNode; - - (props: Props): VNode; - - (props: Props, children: Children): VNode; -}; - -export type PropsDescription = { - schema: AnyJSONObjectSchema; - validate: (data: any) => boolean; -}; - -export type View = Factory & { - tag: Tag; - props: PropsDescription; -}; - -/** - * Create a tag factory that validates props against a schema. - * @param tagName - HTML tag name - * @param props - the properties section of a JSON schema - */ -export const view = ( - tagName: string, - propertySchema: JSONSchemaRecord = {} -): View => { - // Normalize tag name - const tag = tagName.toLowerCase(); - - const schema: AnyJSONObjectSchema = { - type: "object", - properties: Object.fromEntries( - Object.entries(propertySchema).map(([key, value]) => { - return [key, bindable(value)]; - }) - ), - }; - - // Compile props validator for fast validation at runtime. - const validate = Schema.compile({ - ...schema, - // Allow additional properties when validating props. - additionalProperties: true, - }); - - /** - * Create a VNode for tag - * Note: props are not validated. Validation happens later, during render. - * @param props - properties for the tag - * @param children - child nodes - * @returns VNode - */ - const create = (props: Props = {}, children: Children = []) => - vnode(tag, props, children); - - create.tag = tag; - create.props = { validate, schema }; - - return deepFreeze(create); -}; diff --git a/typescript/packages/common-ui/src/index.ts b/typescript/packages/common-ui/src/index.ts index 8fd1ca97f..b361853e9 100644 --- a/typescript/packages/common-ui/src/index.ts +++ b/typescript/packages/common-ui/src/index.ts @@ -1,12 +1,5 @@ export * as components from "./components/index.js"; -export * as view from "./hyperscript/view.js"; -export * as tags from "./hyperscript/tags.js"; -export * as render from "./hyperscript/render.js"; export * as style from "./components/style.js"; import { setupShoelace } from "./components/shoelace/index.js"; -const setup = () => { - setupShoelace(); -}; - -setup(); +setupShoelace(); diff --git a/typescript/packages/common-ui/src/shared/deep-freeze.ts b/typescript/packages/common-ui/src/shared/deep-freeze.ts deleted file mode 100644 index 6a54abbfc..000000000 --- a/typescript/packages/common-ui/src/shared/deep-freeze.ts +++ /dev/null @@ -1,21 +0,0 @@ -export const freeze = Object.freeze; - -/** Deep freeze an object */ -export const deepFreeze = (obj: T): T => { - // Retrieve the property names defined on object - const propNames = Reflect.ownKeys(obj); - - // Freeze properties before freezing self - for (const name of propNames) { - // @ts-ignore - const value = obj[name]; - - if ((value && typeof value === "object") || typeof value === "function") { - deepFreeze(value); - } - } - - return freeze(obj); -} - -export default deepFreeze; \ No newline at end of file diff --git a/typescript/packages/common-ui/src/shared/generator.ts b/typescript/packages/common-ui/src/shared/generator.ts deleted file mode 100644 index 6f4dadbae..000000000 --- a/typescript/packages/common-ui/src/shared/generator.ts +++ /dev/null @@ -1,12 +0,0 @@ -export const isIterable = (value: any): value is Iterable => { - return value && typeof value[Symbol.iterator] === "function"; -} - -export function* gmap( - iterable: Iterable, - transform: (value: T) => U -) { - for (const value of iterable) { - yield transform(value); - } -} \ No newline at end of file diff --git a/typescript/packages/common-ui/test/assert.js b/typescript/packages/common-ui/test/assert.js deleted file mode 100644 index 4ff1640d2..000000000 --- a/typescript/packages/common-ui/test/assert.js +++ /dev/null @@ -1,16 +0,0 @@ -export const assert = (value, msg = "") => { - console.assert(value, msg); -} - -export const equal = (a, b, msg = "") => { - console.assert(a === b, `${msg} ${a} !== ${b}`); -} - -export const throws = (run, msg = "") => { - try { - run(); - } catch (e) { - return; - } - console.assert(false, `${msg} ${a} !== ${b}`); -} \ No newline at end of file diff --git a/typescript/packages/common-ui/test/hyperscript.test.js b/typescript/packages/common-ui/test/hyperscript.test.js deleted file mode 100644 index 5cffb31b4..000000000 --- a/typescript/packages/common-ui/test/hyperscript.test.js +++ /dev/null @@ -1,61 +0,0 @@ -import { equal, throws } from './assert.js'; -import { state } from '@commontools/common-frp/signal'; -import { hstack } from '../lib/hyperscript/tags.js'; -import { binding } from '../lib/hyperscript/view.js'; -import render from '../lib/hyperscript/render.js'; - -describe('vnode factory functions', () => { - it('creates a vnode', () => { - const vnode = hstack( - {'className': 'foo'}, - 'Hello' - ); - - equal(vnode.tag, 'com-hstack'); - equal(vnode.props.className, 'foo'); - equal(vnode.children[0], 'Hello'); - }); -}); - -describe("it does not create tags that aren't whitelisted", () => { - throws(() => { - tags.div( - {'className': 'foo'}, - 'Hello' - ); - }); -}); - -describe("it creates an element, substituting template context constants", () => { - const className = state('foo'); - - const vnode = hstack( - {'className': 'foo'}, - 'Hello' - ); - - const element = render(vnode, {className}); - - equal(element.tagName, 'COM-HSTACK'); - equal(element.className, 'foo'); - equal(element.textContent, 'Hello'); -}); - -describe("it binds signals", () => { - const className = state('foo'); - - const vnode = hstack( - {'className': binding('string', 'className')}, - 'Hello' - ); - - const element = render(vnode, {className}); - - equal(element.tagName, 'COM-HSTACK'); - equal(element.className, 'foo'); - equal(element.textContent, 'Hello'); - - className.send('bar'); - - equal(element.className, 'bar'); -}); \ No newline at end of file diff --git a/typescript/packages/lookslike-high-level/src/components/charm-link.ts b/typescript/packages/lookslike-high-level/src/components/charm-link.ts index e8acb83c2..ee7237bcc 100644 --- a/typescript/packages/lookslike-high-level/src/components/charm-link.ts +++ b/typescript/packages/lookslike-high-level/src/components/charm-link.ts @@ -1,14 +1,8 @@ import { LitElement, html, css } from "lit"; import { customElement, property } from "lit/decorators.js"; -import { render } from "@commontools/common-ui"; import { NAME } from "../data.js"; import { Cell, effect } from "@commontools/common-runner"; -export const charmLink = render.view("common-charm-link", { - charm: { type: "object" }, - name: { type: "string" }, -}); - @customElement("common-charm-link") export class CommonCharmLink extends LitElement { static override styles = css` diff --git a/typescript/packages/lookslike-high-level/src/components/recipe-link.ts b/typescript/packages/lookslike-high-level/src/components/recipe-link.ts index a7c59b0be..3c1bd7cca 100644 --- a/typescript/packages/lookslike-high-level/src/components/recipe-link.ts +++ b/typescript/packages/lookslike-high-level/src/components/recipe-link.ts @@ -1,13 +1,8 @@ import { LitElement, html, css } from "lit"; import { customElement, property } from "lit/decorators.js"; -import { render } from "@commontools/common-ui"; import { addCharms, runPersistent, type Charm } from "../data.js"; import { type DocImpl, getRecipe } from "@commontools/common-runner"; -export const recipeLink = render.view("common-recipe-link", { - recipe: { type: "object" }, -}); - @customElement("common-recipe-link") export class CommonRecipeLink extends LitElement { static override styles = css` diff --git a/typescript/packages/lookslike-high-level/src/data.ts b/typescript/packages/lookslike-high-level/src/data.ts index 755eac8a0..97979da48 100644 --- a/typescript/packages/lookslike-high-level/src/data.ts +++ b/typescript/packages/lookslike-high-level/src/data.ts @@ -244,9 +244,12 @@ export async function saveRecipe( } import smolIframe from "./recipes/smolIframe.js"; +import { shoelaceDemo } from "./recipes/examples/shoelace.js"; + addCharms([ run(smolIframe, { data: { count: 1 } }), + run(shoelaceDemo, {}), // helloWorld.spawn({ helloWorld: 1 }), // counter.spawn({ counter: 1 }), // importer.spawn({ fetch: 1 }), diff --git a/typescript/packages/lookslike-high-level/src/recipes/examples/shoelace.tsx b/typescript/packages/lookslike-high-level/src/recipes/examples/shoelace.tsx index 3807ed472..544a01e80 100644 --- a/typescript/packages/lookslike-high-level/src/recipes/examples/shoelace.tsx +++ b/typescript/packages/lookslike-high-level/src/recipes/examples/shoelace.tsx @@ -1,4 +1,4 @@ -import { cell, handler, NAME, recipe, UI } from "@commontools/common-builder"; +import { handler, NAME, recipe, UI } from "@commontools/common-builder"; import { h } from "@commontools/common-html"; export const shoelaceDemo = recipe('click demo', From b84237c3807b30c5fe226d525991ed59b9a02f38 Mon Sep 17 00:00:00 2001 From: Jesse Andrews Date: Thu, 23 Jan 2025 12:14:33 -0500 Subject: [PATCH 2/2] we don't need common-frp now --- typescript/package-lock.json | 20 +- typescript/package.json | 9 - typescript/packages/common-frp-lit/index.html | 11 - .../packages/common-frp-lit/package.json | 53 --- .../src/example/counter-example.ts | 22 -- .../packages/common-frp-lit/src/index.ts | 34 -- .../packages/common-frp-lit/tsconfig.json | 20 -- typescript/packages/common-frp/NOTES.md | 180 ---------- typescript/packages/common-frp/README.md | 17 - typescript/packages/common-frp/index.html | 12 - typescript/packages/common-frp/package.json | 63 ---- typescript/packages/common-frp/src/dom.ts | 13 - .../packages/common-frp/src/example/basic.ts | 17 - typescript/packages/common-frp/src/index.ts | 11 - .../packages/common-frp/src/operators.ts | 131 ------- .../packages/common-frp/src/publisher.ts | 66 ---- typescript/packages/common-frp/src/shared.ts | 9 - typescript/packages/common-frp/src/signal.ts | 331 ------------------ typescript/packages/common-frp/src/stream.ts | 236 ------------- typescript/packages/common-frp/tsconfig.json | 14 - .../lookslike-high-level/package.json | 4 - 21 files changed, 2 insertions(+), 1271 deletions(-) delete mode 100644 typescript/packages/common-frp-lit/index.html delete mode 100644 typescript/packages/common-frp-lit/package.json delete mode 100644 typescript/packages/common-frp-lit/src/example/counter-example.ts delete mode 100644 typescript/packages/common-frp-lit/src/index.ts delete mode 100644 typescript/packages/common-frp-lit/tsconfig.json delete mode 100644 typescript/packages/common-frp/NOTES.md delete mode 100644 typescript/packages/common-frp/README.md delete mode 100644 typescript/packages/common-frp/index.html delete mode 100644 typescript/packages/common-frp/package.json delete mode 100644 typescript/packages/common-frp/src/dom.ts delete mode 100644 typescript/packages/common-frp/src/example/basic.ts delete mode 100644 typescript/packages/common-frp/src/index.ts delete mode 100644 typescript/packages/common-frp/src/operators.ts delete mode 100644 typescript/packages/common-frp/src/publisher.ts delete mode 100644 typescript/packages/common-frp/src/shared.ts delete mode 100644 typescript/packages/common-frp/src/signal.ts delete mode 100644 typescript/packages/common-frp/src/stream.ts delete mode 100644 typescript/packages/common-frp/tsconfig.json diff --git a/typescript/package-lock.json b/typescript/package-lock.json index 4871b265e..f6f82af5a 100644 --- a/typescript/package-lock.json +++ b/typescript/package-lock.json @@ -13,7 +13,6 @@ "./common/*" ], "dependencies": { - "@commontools/runtime": "^0.0.1", "@vue/reactivity": "^3.4.31", "merkle-reference": "^1.1.0", "zod": "^3.24.1" @@ -2139,14 +2138,6 @@ "resolved": "packages/common-builder", "link": true }, - "node_modules/@commontools/common-frp": { - "resolved": "packages/common-frp", - "link": true - }, - "node_modules/@commontools/common-frp-lit": { - "resolved": "packages/common-frp-lit", - "link": true - }, "node_modules/@commontools/common-html": { "resolved": "packages/common-html", "link": true @@ -18860,6 +18851,7 @@ "packages/common-frp": { "name": "@commontools/common-frp", "version": "0.0.1", + "extraneous": true, "license": "UNLICENSED", "devDependencies": { "tslib": "^2.6.2", @@ -18871,6 +18863,7 @@ "packages/common-frp-lit": { "name": "@commontools/common-frp-lit", "version": "0.0.1", + "extraneous": true, "license": "MIT", "dependencies": { "lit": "^3.1.4", @@ -18883,13 +18876,6 @@ "wireit": "^0.14.4" } }, - "packages/common-frp-lit/node_modules/lit-html": { - "version": "3.2.1", - "license": "BSD-3-Clause", - "dependencies": { - "@types/trusted-types": "^2.0.2" - } - }, "packages/common-html": { "name": "@commontools/common-html", "version": "0.0.1", @@ -19167,8 +19153,6 @@ "license": "UNLICENSED", "dependencies": { "@commontools/common-builder": "^0.0.1", - "@commontools/common-frp": "^0.0.1", - "@commontools/common-frp-lit": "^0.0.1", "@commontools/common-html": "^0.0.1", "@commontools/common-os-ui": "^0.0.1", "@commontools/common-runner": "^0.0.1", diff --git a/typescript/package.json b/typescript/package.json index d5da56278..86ff2fdd2 100644 --- a/typescript/package.json +++ b/typescript/package.json @@ -28,11 +28,7 @@ "wireit": { "build": { "dependencies": [ - "./packages/runtime-demo:build", - "./packages/example-module:build", "./packages/common-html:build", - "./packages/common-frp:build", - "./packages/common-frp-lit:build", "./packages/common-propagator:build", "./packages/common-os-ui:build", "./packages/common-ui:build", @@ -46,13 +42,9 @@ }, "clean": { "dependencies": [ - "./packages/runtime-demo:clean", - "./packages/example-module:clean", "./packages/lookslike-high-level:clean", "./packages/collectathon:clean", "./packages/common-html:clean", - "./packages/common-frp:clean", - "./packages/common-frp-lit:clean", "./packages/common-propagator:clean", "./packages/common-os-ui:clean", "./packages/common-ui:clean", @@ -68,7 +60,6 @@ } }, "dependencies": { - "@commontools/runtime": "^0.0.1", "@vue/reactivity": "^3.4.31", "merkle-reference": "^1.1.0", "zod": "^3.24.1" diff --git a/typescript/packages/common-frp-lit/index.html b/typescript/packages/common-frp-lit/index.html deleted file mode 100644 index 2d720da30..000000000 --- a/typescript/packages/common-frp-lit/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/typescript/packages/common-frp-lit/package.json b/typescript/packages/common-frp-lit/package.json deleted file mode 100644 index 00d2f0712..000000000 --- a/typescript/packages/common-frp-lit/package.json +++ /dev/null @@ -1,53 +0,0 @@ -{ - "name": "@commontools/common-frp-lit", - "author": "The Common Authors", - "version": "0.0.1", - "description": "common-frp integration for Lit", - "license": "MIT", - "private": true, - "type": "module", - "scripts": { - "build": "wireit", - "clean": "wireit", - "dev": "vite" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/commontoolsinc/labs.git" - }, - "bugs": { - "url": "https://github.com/commontoolsinc/labs/issues" - }, - "homepage": "https://github.com/commontoolsinc/labs#readme", - "exports": "./lib/index.js", - "files": [ - "./lib/index.js" - ], - "dependencies": { - "lit": "^3.1.4", - "lit-html": "^3.1.4" - }, - "devDependencies": { - "tslib": "^2.6.2", - "typescript": "^5.2.2", - "vite": "^5.2.13", - "wireit": "^0.14.4" - }, - "wireit": { - "build": { - "dependencies": [ - "../common-frp:build" - ], - "files": [ - "./src/**/*" - ], - "output": [ - "./lib/**/*" - ], - "command": "tsc --build -f" - }, - "clean": { - "command": "rm -rf ./lib ./.wireit" - } - } -} diff --git a/typescript/packages/common-frp-lit/src/example/counter-example.ts b/typescript/packages/common-frp-lit/src/example/counter-example.ts deleted file mode 100644 index 096c30d85..000000000 --- a/typescript/packages/common-frp-lit/src/example/counter-example.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { LitElement } from "lit"; -import { html } from "lit-html"; -import { signal, config } from "@commontools/common-frp"; -import { watch } from "../index.js"; -import { customElement } from "lit/decorators.js"; - -config.debug = true; - -const {state} = signal; - -const count = state(0); - -@customElement('counter-example') -export class BasicExample extends LitElement { - override render() { - return html` - - `; - } -} \ No newline at end of file diff --git a/typescript/packages/common-frp-lit/src/index.ts b/typescript/packages/common-frp-lit/src/index.ts deleted file mode 100644 index ddc9ac6fd..000000000 --- a/typescript/packages/common-frp-lit/src/index.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { signal } from "@commontools/common-frp"; -import { directive } from "lit/directive.js"; -import { AsyncDirective } from "lit/async-directive.js"; - -const {state, effect} = signal; - -class WatchDirective extends AsyncDirective { - #cancel: (() => void) | undefined = undefined; - #isWatching = state(true); - - override render(signal: any) { - this.#cancel?.(); - this.#cancel = effect([this.#isWatching, signal], (isWatching, value) => { - if (isWatching) { - this.setValue(value); - } - }); - return signal.get(); - } - - protected override disconnected(): void { - this.#isWatching.send(false); - } - - protected override reconnected(): void { - this.#isWatching.send(true); - } -} - -/** - * Renders a signal and subscribes to it, updating the part when the signal - * changes. - */ -export const watch = directive(WatchDirective); \ No newline at end of file diff --git a/typescript/packages/common-frp-lit/tsconfig.json b/typescript/packages/common-frp-lit/tsconfig.json deleted file mode 100644 index 5e1a61b10..000000000 --- a/typescript/packages/common-frp-lit/tsconfig.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "lib": ["es2022", "DOM"], - "outDir": "./lib", - "rootDir": "./src", - "strict": false, - "paths": { - "common:module/module@0.0.1": [ - "../../node_modules/@commontools/module/lib/index.d.ts" - ], - "common:io/state@0.0.1": [ - "../../node_modules/@commontools/io/lib/index.d.ts" - ] - } - }, - "include": [ - "src/**/*", - ] -} diff --git a/typescript/packages/common-frp/NOTES.md b/typescript/packages/common-frp/NOTES.md deleted file mode 100644 index 8ca3691e1..000000000 --- a/typescript/packages/common-frp/NOTES.md +++ /dev/null @@ -1,180 +0,0 @@ -# Notes - -Devlog, reverse chronological order. - -Contains rough notes and references while designing. - -## 2024-06-05 - -Proposed semantics after discussing with Berni. - -- Cells - - Discrete - - Use transactions to synchronize - - Last-write-wins at input boundary (e.g. too many clicks results in last click winning). -- Streams - - Discrete - - Uses separate transaction system to ensure one event is always one event - - Buffered semantics. (e.g. too many clicks results in more transactions being added to queue) - -Implications: - -- Streams and events do not happen during shared moments -- Streams may NEVER sample cell state - - Since they aren't synchronized, sampling might mean seeing the graph in an inconsistent state. - - Streams may only get values from upstream streams - - However, you may produce a stream from cell changes -- Streams are essentially "async" computation, while cells are "sync" - ---- - -> Really quickly: reactive-banana is definitely pull-based not push-pull. reactive is push-pull. Yampa and netwire are arrowized. There are FRPs which allow "accumulating values" but don't allow "switching", FRPs which allow "switching" but not "accumulating values". Both of those are "simple" FRP. Arrowized FRP allows switching and accumulating and uses arrows to control the danger of combining those features. Monadic FRP like reactive-banana, sodium, and elerea use other careful mechanisms to ensure that switching and accumulating don't interact too much. – [J. Abrahamson Oct 2, 2014 at 20:04](https://stackoverflow.com/questions/26164135/how-fundamentally-different-are-push-pull-and-arrowized-frp#comment41026849_26164135) - -> Arrowized FRP also has the neat feature that signals are always stated in context of their inputs which lets you transform the outputs covariantly and the inputs contravariantly in order to better simulate interactive FRP. See Genuinely Functional User Interfaces by Courtney and Elliott for a great example of that feature. – [J. Abrahamson Oct 2, 2014 at 20:05](https://stackoverflow.com/questions/26164135/how-fundamentally-different-are-push-pull-and-arrowized-frp#comment41026887_26164135) - - -## 2024-05-30 - -### Design - -- Discrete classical FRP - - Streams - - Events over time. Update during a moment. - - Independent. They may not depend upon each other's state. - - They may depend upon cells, but must get the cell's state before - the cell graph is updated. - - They act as IO input to the cell graph. - - Cells - - Reactive containers for state. Always have a value. - - Computed Cells - - Reactive computed states, derived from cells and other computed cells. - -### Implementation - -- Transaction - - Update streams: Update streams: - - Update cells: mutate cell state and mark computed cells dirty (push) - - Dispatch "I am dirty" notification immediately during cell update phase to downstream cells - - Update sinks: get updated cell and computed state. Computed state is recomputed if dirty. - - Subscribe with sinks - -### Restricted operators - -- It may be worth offering operators that do not allow arbitrary Turing-complete function definitions. E.g. a restricted subset of data operators taken from SQL or Linq - - `select(keyPath: string)` - a restricted form of map - - `where(selector: formula)` - a restricted form of filter - - `groupBy()` - - `orderBy()` - - `union()`, `intersect()` - restricted forms of join/merge - - `count()`, `min()`, `max()`, `sum()`, `avg()`, `truncate()` - restricted forms of computation - -### Classical FRP - -Qualities: - -- Comes in discrete and continuous flavors. We only care about discrete for our purposes. -- Behaviors and events (also called cells and streams, or signals and streams) - - Behaviors are reactive containers for state (think spreadsheet cell) - - Events are streams of events over time - - Both are synchronized by a transaction system that makes sure changes happen during discrete "moments" in time, and inconsistent graph states are not observable. -- Resulting computation graph is pure. -- Theory pioneered by Conal Elliott. -- 10 primitives: - - map, merge, hold, snapshot, filter, lift, never, constant, sample, and switch. (Functional Reactive Programming, 2.3, Manning) - -> Each FRP system has its own policy for merging simultaneous events. Sodium’s policy is as follows: -> -> - If the input events on the two input streams are simultaneous, merge combines them into one. merge takes a combining function as a second argument for this purpose. The signature of the combining function is A combine(A left, A right). -> -The combining function is not used in the (usually more common) case where the input events are not simultaneous. -> -You invoke merge like this: s1.merge(s2, f). If merge needs to combine simul- taneous events, the event from s1 is passed as the left argument of the combin- ing function f, and the event from s2 is passed on the right. -> -The s1.orElse(s2) variant of merge doesn’t take a combining function. In the simultaneous case, the left s1 event takes precedence and the right s2 event is dropped. This is equivalent to s1.merge(s2, (l, r) -> l). The name orElse() was chosen to remind you to be careful, because events can be dropped. -> -> This policy has some nice results: -> - There can only ever be one event per transaction in a given stream. -> - There’s no such thing as event-processing order within a transaction. All events that occur in different streams within the same transaction are truly simultaneous in that there’s no detectable order between them. -> -> (Functional Reactive Programming, 2.6.1, Manning) - -Talks: - -- [A More Elegant Specification for Functional Reactive Programming, Conal Elliott](https://www.youtube.com/watch?v=9vMFHLHq7Y0) - -Libraries: - -- [Sodium FRP](https://github.com/SodiumFRP) - - [Sodium Typescript](https://github.com/SodiumFRP/sodium-typescript/tree/master/src/lib/sodium) - -### Signals - -Qualities: - -- Combines event streams and behaviors into a single concept. -- Often uses single-transaction callback registration technique developed by S.js -- Often uses push-pull FRP -- Often uses closure and a "reactive scope" stack machine with a helper like `useEffect()` to register listeners - -Libraries: - -- [TC39 Signals Proposal](https://github.com/tc39/proposal-signals) -- [SolidJS](https://www.solidjs.com/) -- [Preact Signals](https://preactjs.com/guide/v10/signals/) -- [S.js](https://github.com/adamhaile/S) - - implements transactions and dynamic graph with single-transaction callback registration, eliminating listener memory leaks. -- [Arrow.js](https://www.arrow-js.com/docs/) - - Focuses on reactive objects, rather than values - - Key-path style indexing using Proxy -- [Elm Signals 3.0.0](https://github.com/elm-lang/core/blob/3.0.0/src/Native/Signal.js). Deprecated, but the implementation can be found here. 1st order FRP. - -### Observables - -Qualities: - -- No transaction system -- No state (streams only) -- Largely static graphs (1st-order FRP) with explicit subscription cancellation for dynamic graphs - -Libraries: - -- [RxJS](https://rxjs.dev/) -- [TC39 Observable Proposal](https://github.com/tc39/proposal-observable) -- [Apple Combine](https://developer.apple.com/documentation/combine/) - -### Concepts - -- Paper: [Push-pull FRP](http://conal.net/papers/push-pull-frp/push-pull-frp.pdf), Conal Elliott -- Book: [Functional Reactive Programming](https://www.manning.com/books/functional-reactive-programming), Manning 2016 -- Talk: [Controlling space and time: understanding the many formulations of FRP](https://www.youtube.com/watch?v=Agu6jipKfYw), Evan Czaplicki -- Blog: [The Evolution of Signals in Javascript](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob). Notes on low-level implementation of signal libraries, from the creator of SolidJS. -- Blog: [Introduction to fine-grained reactivity](https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf) from the creator of SolidJS. -- GitHub: [General Theory of Reactivity](https://github.com/kriskowal/gtor) - -### Cold vs. Hot Observables - -The distinction between cold and hot observables (or their equivalent) is a significant part of many FRP systems. Cold observables are those where the data-producing sequence starts anew for each subscriber, whereas hot observables share a single execution path among all subscribers. This distinction affects how data streams are multicast to multiple observers. - -- Cold observable: creates a data producer for each subscriber. - - The observable is a pure transformation over the data producer. - - Examples: [Reducers in Clojure](https://clojure.org/reference/reducers), [RxJS Observables](https://rxjs.dev). -- Hot observable: Multicast. Maintains a list of subscribers and dispatches to them from a single data producing source. - - Examples: [share](https://rxjs.dev/api/index/function/share) in RxJS. - - Has to deal with callback cleanup bookkeeping in dynamic graphs. - -### Pipeable operators - -Following RxJS, we enable piping through unary functions. This is a functional alternative to method chaining. - -> Problems with the patched operators for dot-chaining are: -> -> Any library that imports a patch operator will augment the Observable.prototype for all consumers of that library, creating blind dependencies. If the library removes their usage, they unknowingly break everyone else. With pipeables, you have to import the operators you need into each file you use them in. -> -> Operators patched directly onto the prototype are not "tree-shakeable" by tools like rollup or webpack. Pipeable operators will be as they are just functions pulled in from modules directly. -> -> Unused operators that are being imported in apps cannot be detected reliably by any sort of build tool or lint rule. That means that you might import scan, but stop using it, and it's still being added to your output bundle. With pipeable operators, if you're not using it, a lint rule can pick it up for you. -> -> Functional composition is awesome. Building your own custom operators becomes much easier, and now they work and look just like all other operators in rxjs. You don't need to extend Observable or override lift anymore. - -> [Pipeable Operators](https://v6.rxjs.dev/guide/v6/pipeable-operators) - -And: - -> "pipeable" operators is the current and recommended way of using operators since RxJS 5.5. The main difference is that it's easier to make custom operators and that it's better treeshakable while not altering some global Observable object that could possible make collisions if two different parties wanted to create an operator of the same name. - [StackOverflow](https://stackoverflow.com/questions/48668701/what-is-pipe-for-in-rxjs) \ No newline at end of file diff --git a/typescript/packages/common-frp/README.md b/typescript/packages/common-frp/README.md deleted file mode 100644 index d2b760e02..000000000 --- a/typescript/packages/common-frp/README.md +++ /dev/null @@ -1,17 +0,0 @@ -# Common FRP - -Common functional reactive programming utilities. - -## Goals - -- [x] Classical FRP with behaviors and events (also called cells and streams, or signals and streams) - - [x] Behaviors (called streams) are reactive containers for state that can be formalized as functions of time - - [x] Events (called streams) are streams of events over time -- [x] 1st order FRP (static graph) -- [ ] Graph description can be serialized to JSON - - [x] All graph dependencies held in array (in contrast to S.js style or Signals style where graph is defined via VM execution trace) -- [x] Glitch free: updates happen during discrete moments using a transaction system -- [x] Transformations should happen during same transaction -- [x] Transactions -- [ ] Cycles supported for Signals - - [ ] TODO need to improve [push-pull dirty marking logic](https://github.com/tc39/proposal-signals?tab=readme-ov-file#common-algorithms). \ No newline at end of file diff --git a/typescript/packages/common-frp/index.html b/typescript/packages/common-frp/index.html deleted file mode 100644 index 4b276d716..000000000 --- a/typescript/packages/common-frp/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/typescript/packages/common-frp/package.json b/typescript/packages/common-frp/package.json deleted file mode 100644 index b71a0980f..000000000 --- a/typescript/packages/common-frp/package.json +++ /dev/null @@ -1,63 +0,0 @@ -{ - "name": "@commontools/common-frp", - "author": "The Common Authors", - "version": "0.0.1", - "description": "An FRP implementation for Common Tools", - "license": "UNLICENSED", - "private": true, - "type": "module", - "scripts": { - "build": "wireit", - "clean": "wireit" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/commontoolsinc/labs.git" - }, - "bugs": { - "url": "https://github.com/commontoolsinc/labs/issues" - }, - "homepage": "https://github.com/commontoolsinc/labs#readme", - "exports": { - ".": { - "default": "./lib/index.js", - "types": "./lib/index.d.ts" - }, - "./signal": { - "default": "./lib/signal.js", - "types": "./lib/signal.d.ts" - }, - "./stream": { - "default": "./lib/stream.js", - "types": "./lib/stream.d.ts" - }, - "./operators": { - "default": "./lib/operators.js", - "types": "./lib/operators.d.ts" - } - }, - "files": [ - "./lib/index.js" - ], - "dependencies": {}, - "devDependencies": { - "tslib": "^2.6.2", - "typescript": "^5.2.2", - "wireit": "^0.14.4", - "vite": "^5.2.12" - }, - "wireit": { - "build": { - "files": [ - "./src/**/*" - ], - "output": [ - "./lib/**/*" - ], - "command": "tsc --build -f" - }, - "clean": { - "command": "rm -rf ./lib ./.wireit" - } - } -} diff --git a/typescript/packages/common-frp/src/dom.ts b/typescript/packages/common-frp/src/dom.ts deleted file mode 100644 index dc7bcb11f..000000000 --- a/typescript/packages/common-frp/src/dom.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { subject, readonly } from './stream.js' - -export const events = ( - element: HTMLElement, - name: string -) => { - const event = subject() - element.addEventListener(name, event.send) - return readonly({ - ...event, - cancel: () => element.removeEventListener(name, event.send) - }) -} diff --git a/typescript/packages/common-frp/src/example/basic.ts b/typescript/packages/common-frp/src/example/basic.ts deleted file mode 100644 index afda8f9e3..000000000 --- a/typescript/packages/common-frp/src/example/basic.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { config } from '../shared.js' -import { scan } from '../stream.js' -import { effect } from '../signal.js' -import { events } from '../dom.js' - -config.debug = true - -const button = document.getElementById('button')! - -const clicks = events(button, 'click') - -const clickCount = scan(clicks, (state, _) => state + 1, 0) - -effect([clickCount], x => { - button.textContent = `Clicks: ${x}` - console.log(x) -}) diff --git a/typescript/packages/common-frp/src/index.ts b/typescript/packages/common-frp/src/index.ts deleted file mode 100644 index e8e875d1e..000000000 --- a/typescript/packages/common-frp/src/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -export * as stream from './stream.js' -export * as signal from './signal.js' -export * as operators from './operators.js' -export { - Cancel, - Cancellable, - combineCancels, - Sendable, - isSendable -} from './publisher.js' -export { config } from './shared.js' \ No newline at end of file diff --git a/typescript/packages/common-frp/src/operators.ts b/typescript/packages/common-frp/src/operators.ts deleted file mode 100644 index 5a4007c6b..000000000 --- a/typescript/packages/common-frp/src/operators.ts +++ /dev/null @@ -1,131 +0,0 @@ -import { - map as mapStream, - filter as filterStream, - join as joinStreams, - chooseLeft, - scan as scanStream, - hold as holdStream, - Stream -} from './stream.js' - -export type UnaryFn = (a: A) => B - -export type Pipe = { - ( - value: A, - a2b: UnaryFn - ): B - - ( - value: A, - a2b: UnaryFn, - b2c: UnaryFn - ): C - - ( - value: A, - a2b: UnaryFn, - b2c: UnaryFn, - c2d: UnaryFn - ): D - - ( - value: A, - a2b: UnaryFn, - b2c: UnaryFn, - c2d: UnaryFn, - d2e: UnaryFn - ): E - - ( - value: A, - a2b: UnaryFn, - b2c: UnaryFn, - c2d: UnaryFn, - d2e: UnaryFn, - e2f: UnaryFn - ): F - - ( - value: A, - a2b: UnaryFn, - b2c: UnaryFn, - c2d: UnaryFn, - d2e: UnaryFn, - e2f: UnaryFn, - f2g: UnaryFn - ): G - - ( - value: A, - a2b: UnaryFn, - b2c: UnaryFn, - c2d: UnaryFn, - d2e: UnaryFn, - e2f: UnaryFn, - f2g: UnaryFn, - g2h: UnaryFn - ): H - - ( - value: A, - a2b: UnaryFn, - b2c: UnaryFn, - c2d: UnaryFn, - d2e: UnaryFn, - e2f: UnaryFn, - f2g: UnaryFn, - g2h: UnaryFn, - h2i: UnaryFn - ): I - - ( - value: any, - ...fns: [(value: any) => any] - ): any -} - -/** Pipe a value through a series of functions */ -export const pipe: Pipe = ( - value: any, - ...fns: [(value: any) => any] -): any => fns.reduce((value: any, fn: UnaryFn) => fn(value), value) - -/** Map a stream of values */ -export const map = ( - transform: UnaryFn -) => ( - stream: Stream -) => mapStream(stream, transform) - -/** Filter a stream of values using a predicate function. */ -export const filter = ( - predicate: UnaryFn -) => ( - stream: Stream -) => filterStream(stream, predicate) - -/** - * Zip two streams together. - * Will buffer left and right values until both are available. - */ -export const join = ( - right: Stream, - choose: (left: T, right: T) => T = chooseLeft, -) => ( - left: Stream, -) => joinStreams( - left, - right, - choose -) - -/** Scan a stream, accumulating step state in a signal */ -export const scan = ( - step: (state: U, value: T) => U, initial: U -) => (stream: Stream) => scanStream(stream, step, initial) - -/** Hold the latest value of a stream in a signal */ -export const hold = ( - initial: T -) => (stream: Stream) => holdStream(stream, initial) diff --git a/typescript/packages/common-frp/src/publisher.ts b/typescript/packages/common-frp/src/publisher.ts deleted file mode 100644 index 15adfa73c..000000000 --- a/typescript/packages/common-frp/src/publisher.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { debug } from "./shared.js" - -export type Cancel = () => void - -export type Cancellable = { - cancel?: Cancel -} - -export type Send = (value: T) => void - -/** A sendable is a type that can receive values via a send method */ -export type Sendable = { - send: Send -} - -/** Check if a value is sendable */ -export const isSendable = (value: any): value is Sendable => { - return value && typeof value.send === "function" -} - -export type Publisher = { - [Symbol.iterator]: () => Iterator>; - send: (value: T) => void; - sink: (subscriber: Sendable) => Cancel; -} - -/** Low-level pub-sub channel used under the hood. */ -export const publisher = (): Publisher => { - const subscribers = new Set>() - - const send = (value: T) => { - for (const subscriber of subscribers) { - subscriber.send(value) - } - } - - /** - * Subscribe to this publisher - * @param subscriber the function to call when a new value is published - * @returns Unsubscribe function - */ - const sink = (subscriber: Sendable): Cancel => { - debug('sub', 'subscribing', subscriber) - subscribers.add(subscriber) - return () => { - debug('sub', 'canceling subscription', subscriber) - subscribers.delete(subscriber) - } - } - - return { - // Allow iterating over subscribers - [Symbol.iterator]: () => subscribers.values(), - send, - sink - } -} - -/** Combine multiple unsubscribe functions into a single unsubscribe function */ -export const combineCancels = ( - unsubscribes: Array -): Cancel => () => { - for (const cancel of unsubscribes) { - cancel() - } -} diff --git a/typescript/packages/common-frp/src/shared.ts b/typescript/packages/common-frp/src/shared.ts deleted file mode 100644 index 572bb0729..000000000 --- a/typescript/packages/common-frp/src/shared.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const config = { - debug: false -} - -export const debug = (...data: Array) => { - if (config.debug) { - console.debug(...data) - } -} diff --git a/typescript/packages/common-frp/src/signal.ts b/typescript/packages/common-frp/src/signal.ts deleted file mode 100644 index b193dea3c..000000000 --- a/typescript/packages/common-frp/src/signal.ts +++ /dev/null @@ -1,331 +0,0 @@ -import { debug } from './shared.js' -import { - publisher, - Sendable, - Cancel, - Cancellable, - combineCancels -} from './publisher.js' - -const createTransactionManager = () => { - const updates = new Map<(value: any) => void, any>() - const reads = new Set<() => void>() - - let isScheduled = false - - const schedule = () => { - if (isScheduled) { - return - } - debug('TransactionManager.schedule', 'transaction scheduled') - isScheduled = true - queueMicrotask(transact) - } - - const transact = () => { - // First perform all signal state changes. - // - Update signal state - // - Mark computed dirty - debug('TransactionManager.transact', 'updates') - for (const [job, value] of updates) { - job(value) - } - updates.clear() - // Then perform all signal state reads - // - Read signal state - // - Recompute computed signals and mark clean - debug('TransactionManager.transact', 'reads') - for (const job of reads) { - job() - } - reads.clear() - isScheduled = false - debug('TransactionManager.transact', 'transaction end') - } - - const withUpdates = (job: (value: T) => void, value: T) => { - debug('TransactionManager.withUpdates', 'queue job', job, value) - updates.set(job, value) - schedule() - } - - const withReads = (job: () => void) => { - debug('TransactionManager.withReads', 'queue job', job) - reads.add(job) - schedule() - } - - return { withUpdates, withReads } -} - -const { withUpdates, withReads } = createTransactionManager() - -export type Updates = { - updates: (subscriber: Sendable) => Cancel -} - -const isEqual = Object.is - -export type Gettable = { - get(): T -} - -/** Does type implement get method? */ -export const isGettable = (value: any): value is Gettable => { - return (value != null && typeof value.get === 'function') -} - -const sample = ( - container: Gettable | T -) => isGettable(container) ? container.get() : container - -export type Signal = Gettable & Updates & Cancellable - -/** Is value a signal? */ -export const isSignal = (value: any): value is Signal => { - return ( - value != null && - typeof value.get === 'function' && - typeof value.updates === 'function' - ) -} - -export type WriteableSignal = Gettable & Updates & Sendable - -export type Effect = { - ( - upstreams: [Signal ], - perform: (a: A) => void - ): Cancel - - ( - upstreams: [Signal , Signal], - perform: (a: A, b: B) => void - ): Cancel - - ( - upstreams: [Signal, Signal, Signal], - perform: (a: A, b: B, c: C) => void - ): Cancel - - ( - upstreams: [Signal, Signal, Signal, Signal], - perform: (a: A, b: B, c: C, d: D) => void - ): Cancel - - ( - upstreams: [Signal, Signal, Signal, Signal, Signal], - perform: (a: A, b: B, c: C, d: D, e: E) => void - ): Cancel - - ( - upstreams: [ - Signal, - Signal, - Signal, - Signal, - Signal, - Signal - ], - perform: (a: A, b: B, c: C, d: D, e: E, f: F) => void - ): Cancel - - ( - upstreams: [ - Signal, - Signal, - Signal, - Signal, - Signal, - Signal, - Signal - ], - perform: (a: A, b: B, c: C, d: D, e: E, f: F, g: G) => void - ): Cancel - - ( - upstreams: [ - Signal, - Signal, - Signal, - Signal, - Signal, - Signal, - Signal, - Signal - ], - perform: (a: A, b: B, c: C, d: D, e: E, f: F, g: G, h: H) => void - ): Cancel - - ( - upstreams: Array>, - perform: (...values: Array) => void - ): Cancel -} - -const noOp = () => {} - -/** - * React to an array of signals or constant values, producing an effect any - * time any of them changes - */ -export const effect: Effect = ( - upstreams: Array | any>, - perform: (...values: Array) => void -) => { - const job = () => perform(...upstreams.map(sample)) - const schedule = () => withReads(job) - - job() - - const subscriber = { send: schedule } - - const cancels = upstreams.map(signal => { - if (isSignal(signal)) { - return signal.updates(subscriber) - } - return noOp - }) - - return combineCancels(cancels) -} - -export const state = (initial: T) => { - const updates = publisher() - - let state = initial - - const get = () => state - - const performUpdate = (value: T) => { - // Only perform update if state has actually changed - if (!isEqual(state, value)) { - state = value - debug('state', 'value updated', state) - updates.send() - } - } - - const send = (value: T) => withUpdates(performUpdate, value) - - return { - get, - send, - updates: updates.sink - } -} - -export type Computed = { - ( - upstreams: [Signal], - compute: (a: A) => B - ): Signal - - ( - upstreams: [Signal, Signal], - compute: (a: A, b: B) => C - ): Signal - - ( - upstreams: [Signal, Signal, Signal], - compute: (a: A, b: B, c: C) => D - ): Signal - - ( - upstreams: [Signal, Signal, Signal, Signal], - compute: (a: A, b: B, c: C, d: D) => E - ): Signal - - ( - upstreams: [ - Signal, - Signal, - Signal, - Signal, - Signal], - compute: (a: A, b: B, c: C, d: D, e: E) => F - ): Signal - - ( - upstreams: [ - Signal, - Signal, - Signal, - Signal, - Signal, - Signal - ], - compute: (a: A, b: B, c: C, d: D, e: E, f: F) => G - ): Signal - - ( - upstreams: [ - Signal, - Signal, - Signal, - Signal, - Signal, - Signal, - Signal - ], - compute: (a: A, b: B, c: C, d: D, e: E, f: F, g: G) => H - ): Signal - - ( - upstreams: [ - Signal, - Signal, - Signal, - Signal, - Signal, - Signal, - Signal, - Signal - ], - compute: (a: A, b: B, c: C, d: D, e: E, f: F, g: G, h: H) => I - ): Signal - - ( - upstreams: Array>, - compute: (...values: any) => any - ): Signal -} - -export const computed: Computed = ( - upstreams: Array>, - compute: (...values: Array) => any -): Signal => { - const updates = publisher() - - const recompute = () => compute(...upstreams.map(sample)) - - let isDirty = false - let state = recompute() - - const performUpdate = () => { - debug('computed', 'mark dirty') - isDirty = true - updates.send() - } - - const subscriber = { send: performUpdate } - - const cancel = combineCancels( - upstreams.map(signal => signal.updates(subscriber)) - ) - - const get = () => { - if (isDirty) { - state = recompute() - debug('computed', 'recomputed state', state) - isDirty = false - } - return state - } - - return { - get, - updates: updates.sink, - cancel - } -} diff --git a/typescript/packages/common-frp/src/stream.ts b/typescript/packages/common-frp/src/stream.ts deleted file mode 100644 index a7a5ed022..000000000 --- a/typescript/packages/common-frp/src/stream.ts +++ /dev/null @@ -1,236 +0,0 @@ -import { debug } from "./shared.js" -import { - publisher, - Sendable, - Cancel, - Cancellable, - combineCancels -} from "./publisher.js" -import { state, Signal } from "./signal.js" - -/** A sink is an observable that delivers new values */ -export type Sink = { - sink: (subscriber: Sendable) => Cancel -} - -/** A stream is a sink that can be cancelled */ -export type Stream = Sink & Cancellable - -export const isStream = (value: any): value is Stream => { - return ( - value != null && - typeof value.sink === "function" - ) -} - -/** - * Subscribe to a stream, receiving all updates after the point of subscription. - * @return a function to cancel the subscription. - */ -export const sink = ( - upstream: Stream, - subscriber: Sendable -) => upstream.sink(subscriber) - -export type WriteableStream = Sendable & Sink - -export type ReadableStream = Sink & Cancellable - -/** - * Box up a signal, making it readonly by exposing only the stream sink - * and optional cancel - */ -export const readonly = ( - { - sink, - cancel = undefined - }: Sink & Cancellable -): ReadableStream => ({ - sink, - cancel -}) - -/** - * Create a stream subject - a source for a stream that has a send method - * for publishing new items to stream. - */ -export const subject = (): WriteableStream => { - const { send, sink } = publisher() - return { send, sink } -} - -/** Map a stream of values */ -export const map = ( - upstream: Stream, - transform: (value: T) => U -): ReadableStream => { - const downstreams = publisher() - - const subscriber = { - "@type": "map", - transform, - downstreams: downstreams[Symbol.iterator], - send: (value: T) => downstreams.send(transform(value)) - } - - const cancel = sink(upstream, subscriber) - - return { - sink: downstreams.sink, - cancel - } -} - -/** Filter a stream of values using a predicate function. */ -export const filter = ( - upstream: Stream, - predicate: (value: T) => boolean -): ReadableStream => { - const downstreams = publisher() - - const subscriber = { - "@type": "filter", - predicate, - downstreams: downstreams[Symbol.iterator], - send: (value: T) => { - if (predicate(value)) { - downstreams.send(value) - } - } - } - - const cancel = sink(upstream, subscriber) - - return { - sink: downstreams.sink, - cancel - } -} - -const throttled = (job: () => void) => { - let isScheduled = false - - const perform = () => { - isScheduled = false - job() - } - - return () => { - if (!isScheduled) { - isScheduled = true - queueMicrotask(perform) - } - } -} - -export const chooseLeft = (left: T, _: T) => left - -/** - * Join two streams together. - * Uses throttling/batching on microtask to ensure upstreams that emitted - * during same tick are processed together during the same moment. E.g. - * prevents the diamond problem. - */ -export const join = ( - left: Stream, - right: Stream, - choose: (left: T, right: T) => T = chooseLeft -): ReadableStream => { - const downstreams = publisher() - - let leftState: T | undefined = undefined - let rightState: T | undefined = undefined - - // NOTE: we are currently using the microtask queue to batch and solve the - // diamond problem. This works as long as events in the stream are values. - // - // If we want to support promises as values but maintain this kind of - // moment-by-moment batching, we will need to create a transaction system - // with a logical clock that waits for all promises to resolve before moving - // on to the next transaction. - const forward = throttled(() => { - if (leftState !== undefined && rightState !== undefined) { - const value = choose(leftState, rightState) - downstreams.send(value) - } else if (leftState !== undefined) { - downstreams.send(leftState) - } else if (rightState !== undefined) { - downstreams.send(rightState) - } - leftState = undefined - rightState = undefined - }) - - const leftSubscriber = { - "@type": "join", - side: "left", - choose, - downstreams: downstreams[Symbol.iterator], - send: (value: T) => { - debug('join', 'set left value', value) - leftState = value - forward() - } - } - - const cancelLeft = sink(left, leftSubscriber) - - const rightSubscriber = { - "@type": "join", - side: "left", - choose, - downstreams: downstreams[Symbol.iterator], - send: (value: T) => { - debug('join', 'set right value', value) - rightState = value - forward() - } - } - - const cancelRight = sink(right, rightSubscriber) - - const cancel = combineCancels([cancelLeft, cancelRight]) - - return { - sink: downstreams.sink, - cancel - } -} - -/** Scan a stream, accumulating step state in a signal */ -export const scan = ( - upstream: Stream, - step: (state: U, value: T) => U, - initial: U -): Signal => { - const downstreams = publisher() - const { get, updates, send } = state(initial) - - // We track the current reduction state for the scan in a closure variable - // instead of using the signal state directly. That's because signal state - // has a last-write-wins semantics. It could skip events while scanning. - // Tracking the reduction separately and setting it as the signal state - // after each step ensures we process every event. - let reduction = initial - - const subscriber = { - "@type": "scan", - step, - initial, - downstreams: downstreams[Symbol.iterator], - send: (value: T) => { - reduction = step(reduction, value) - send(reduction) - } - } - - const cancel = sink(upstream, subscriber) - - return { get, updates, cancel } -} - -/** Hold the latest value of a stream in a signal */ -export const hold = ( - upstream: Stream, - initial: T -) => scan(upstream, (_, value) => value, initial) diff --git a/typescript/packages/common-frp/tsconfig.json b/typescript/packages/common-frp/tsconfig.json deleted file mode 100644 index 7d3af16fe..000000000 --- a/typescript/packages/common-frp/tsconfig.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "lib": [ - "es2022", - "DOM" - ], - "outDir": "./lib", - "rootDir": "./src" - }, - "include": [ - "src/**/*", - ] -} diff --git a/typescript/packages/lookslike-high-level/package.json b/typescript/packages/lookslike-high-level/package.json index e9c241442..c18242f40 100644 --- a/typescript/packages/lookslike-high-level/package.json +++ b/typescript/packages/lookslike-high-level/package.json @@ -34,8 +34,6 @@ "dependencies": [ "../common-builder:build", "../common-runner:build", - "../common-frp:build", - "../common-frp-lit:build", "../common-html:build", "../common-ui:build", "../common-os-ui:build", @@ -53,8 +51,6 @@ }, "dependencies": { "@commontools/common-builder": "^0.0.1", - "@commontools/common-frp": "^0.0.1", - "@commontools/common-frp-lit": "^0.0.1", "@commontools/common-html": "^0.0.1", "@commontools/common-os-ui": "^0.0.1", "@commontools/common-runner": "^0.0.1",

Home screen