@needle-tools/engine/lib/engine/webcomponents/jsx.d.ts

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

/**
 * JSX IntrinsicElements declarations for Needle Engine web components.
 *
 * Covers both the global JSX namespace (Preact, SolidJS, Svelte, vanilla TS)
 * and React's module-scoped JSX namespace (react-jsx / react-jsxdev transform).
 *
 * IMPORTANT: This file must be a module (has a top-level import/export) so that
 * `declare module "react"` is treated as a *module augmentation* (merging into
 * the existing React types) rather than an *ambient module declaration* (which
 * would shadow/replace @types/react).
 */

import type { NeedleEngineAttributes } from "./needle-engine.js";

interface NeedleButtonJSXAttributes extends Partial<Omit<HTMLElement, "style" | "children">> {
    style?: Partial<CSSStyleDeclaration>;
    ar?: boolean | string;
    vr?: boolean | string;
    quicklook?: boolean | string;
    qrcode?: boolean | string;
    unstyled?: boolean | string;
}

interface NeedleMenuJSXAttributes extends Partial<Omit<HTMLElement, "style" | "children">> {
    style?: Partial<CSSStyleDeclaration>;
}

interface NeedleLogoElementJSXAttributes extends Partial<Omit<HTMLElement, "style" | "children">> {
    style?: Partial<CSSStyleDeclaration>;
}

interface NeedleElements {
    "needle-engine": Partial<NeedleEngineAttributes>;
    "needle-button": NeedleButtonJSXAttributes;
    "needle-menu": NeedleMenuJSXAttributes;
    "needle-logo-element": NeedleLogoElementJSXAttributes;
}

// Global JSX namespace — Preact, SolidJS, Svelte, vanilla TS
declare global {
    namespace JSX {
        interface IntrinsicElements extends NeedleElements {}
    }
}

// React module-scoped JSX namespace (module augmentation, not ambient declaration)
declare module "react" {
    namespace JSX {
        interface IntrinsicElements extends NeedleElements {}
    }
}