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,
    *,
    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")

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

from pulse import react_component, Import, default_signature, Element

def react_component(expr: Expr) -> 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:
    ...

# 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,

    # Classes (constructors + static methods)
    Array, Date, Error, Map, Object, Promise, RegExp, Set, String,
    WeakMap, WeakSet, Number,

    # 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