JS Interop

from pulse import javascript

@overload
def javascript(fn: Callable[[*Args], R]) -> JsFunction[*Args, R]: ...

@overload
def javascript(*, jsx: bool = False) -> Callable[[Callable], JsFunction | Jsx]: ...

from pulse import javascript
from pulse.js import document, window

@javascript
def focus_element(selector: str):
    document.querySelector(selector).focus()

@javascript
def get_scroll():
    return {"x": window.scrollX, "y": window.scrollY}

# JSX mode for React components
@javascript(jsx=True)
def MyComponent(*children, title: str = ""):
    return div(h1(title), *children)

from pulse import JsFunction

def transpile(self) -> Function

def imports(self) -> dict[str, Expr]

def functions(self) -> dict[str, JsFunction]

from pulse import Import

Import(
    name: str,
    src: str | None = None,
    *,
    kind: Literal["named", "default", "namespace", "side_effect"] = "named",
    is_type: bool = False,
    lazy: bool = False,
    version: str | None = None,
    before: tuple[str, ...] | list[str] = (),
)

# Named import: import { useState } from "react"
useState = Import("useState", "react")

# Default import: import React from "react"
React = Import("React", "react", kind="default")

# Namespace import: import * as utils from "./utils"
utils = Import("utils", "./utils", kind="namespace")

# Side-effect import: import "./styles.css"
Import("", "./styles.css", kind="side_effect")

# Side-effect import (single-argument form)
Import("./styles.css")

# Lazy import for code-splitting
Chart = Import("Chart", "./Chart", kind="default", lazy=True)

from pulse import require

def require(packages: Mapping[str, str]) -> None

import pulse as ps

ps.require(
    {
        "@mantine/core": ">=8.0.0",
        "@mantine/dates": ">=8.0.0",
        "dayjs": "^1",
    }
)

from pulse import react_component, Import, default_signature, Element

@overload
def react_component(expr: Expr) -> Callable[[Callable[P, Any]], Callable[P, Element]]

@overload
def react_component(
    name: str,
    src: str,
    *,
    lazy: bool = False,
    is_default: bool = False,
) -> Callable[[Callable[P, Any]], Callable[P, Element]]

from pulse import react_component, Import, default_signature, Element

@react_component(Import("Button", "@mantine/core"))
def Button(
    *children,
    variant: str = "filled",
    disabled: bool = False,
) -> Element:
    ...

@react_component("Calendar", "react-calendar", is_default=True)
def Calendar(*children, **props) -> Element:
    ...

# Use in components
Button("Click me", variant="outline")

def default_signature(
    *children: Node,
    key: str | None = None,
    **props: Any
) -> Element: ...

from pulse import run_js

@overload
def run_js(expr: Expr, *, result: Literal[True]) -> asyncio.Future[Any]: ...

@overload
def run_js(expr: Expr, *, result: Literal[False] = ...) -> None: ...

from pulse import javascript, run_js
from pulse.js import document

@javascript
def focus_input(selector: str):
    document.querySelector(selector).focus()

@javascript
def get_value(selector: str):
    return document.querySelector(selector).value

# Fire and forget
def on_submit():
    run_js(focus_input("#next-field"))

# Await result
async def on_check():
    value = await run_js(get_value("#my-input"), result=True)
    print(value)

from pulse import JsExecError

class JsExecError(Exception):
    pass

from pulse.js import (
    # Namespace objects (function-only modules)
    Math, JSON, console, window, document, navigator, crypto, Intl,

    # Classes (constructors + static methods)
    AbortController, AbortSignal,
    Array, ArrayBuffer, BigInt64Array, BigUint64Array, Blob, CustomEvent, DataView, Date,
    DOMParser, Error, File, FileReader, FormData, Headers, Int16Array, Int32Array, Int8Array,
    IntersectionObserver, Map, MutationObserver, Number, Object, PerformanceObserver, Promise,
    RegExp, Request, ResizeObserver, Response, Set, String, TextDecoder, TextEncoder,
    Uint16Array, Uint32Array, Uint8Array, Uint8ClampedArray, URL, URLSearchParams,
    WeakMap, WeakSet, XMLSerializer,

    # Functions
    fetch,

    # Statement functions
    throw,

    # Object literal helper
    obj,

    # Primitive values
    undefined,
)

Math.floor(3.7)        # -> Math.floor(3.7)
JSON.stringify(data)   # -> JSON.stringify(data)
console.log("hi")      # -> console.log("hi")
window.scrollTo(0, 0)  # -> window.scrollTo(0, 0)
document.querySelector("#app")  # -> document.querySelector("#app")

Date()                 # -> new Date()
Set([1, 2, 3])         # -> new Set([1, 2, 3])
Map()                  # -> new Map()
Array(10)              # -> new Array(10)

# Static methods
Date.now()             # -> Date.now()
Array.isArray(x)       # -> Array.isArray(x)
Number.isFinite(42)    # -> Number.isFinite(42)

from pulse.js import obj

obj(a=1, b=2)          # -> { a: 1, b: 2 }
obj(**base, c=3)       # -> { ...base, c: 3 }
obj()                  # -> {}

from pulse.js import throw, Error

throw(Error("Something went wrong"))  # -> throw new Error("Something went wrong")

from pulse import Node

Node = Element | Primitive | None

from pulse import Element

from pulse import PulseNode

PulseNode = Node | Component