Rework global types

- the `.d.ts` files aren't type checked so switched to regular .ts files so we get actual type errors on them
- defined public types on the global namespace in remix-types.ts because defining them afterward requires the type signatures be completely duplicated, thinking every package has a remix-types.ts (or some other conventional name) to define all public types (kinda prefer this anyway so internal/external consumers all use the same types, less to think about)

Author: ryanflorence

packages/component/src/lib/create-element.ts

@@ -1,11 +1,10 @@
 import { jsx } from './jsx.ts'
-import type { RemixElement } from './remix-types.ts'
 
 export function createElement(
   type: string,
   props: Record<string, any>,
   ...children: any[]
-): RemixElement {
+): Remix.Element {
   if (props.key != null) {
     let { key, ...rest } = props
     return jsx(type, { ...rest, children }, key)

packages/component/src/lib/dom.d.ts renamed to packages/component/src/lib/dom.ts

@@ -4,8 +4,6 @@
  * - License: MIT https://github.com/preactjs/preact/blob/eee0c6ef834534498e433f0f7a3ef679efd24380/LICENSE
  * - Copyright (c) 2015-present Jason Miller
  */
-import type { RemixProps } from './remix-types.d.ts'
-
 type Booleanish = boolean | 'true' | 'false'
 
 export type Trackable<T> = T
@@ -774,7 +772,7 @@ export type DPubAriaRole =
 export type AriaRole = WAIAriaRole | DPubAriaRole
 
 export interface AllHTMLProps<eventTarget extends EventTarget = EventTarget>
-  extends RemixProps<eventTarget>,
+  extends Remix.HostProps<eventTarget>,
     AriaProps {
   // Standard HTML Attributes
   accept?: Trackable<string | undefined>
@@ -1018,7 +1016,7 @@ export interface AllHTMLProps<eventTarget extends EventTarget = EventTarget>
 }
 
 export interface HTMLProps<eventTarget extends EventTarget = EventTarget>
-  extends RemixProps<eventTarget>,
+  extends Remix.HostProps<eventTarget>,
     AriaProps {
   // Standard HTML Attributes
   accesskey?: Trackable<string | undefined>

packages/component/src/lib/jsx.ts

@@ -1,7 +1,11 @@
+// import './remix-types.ts'
 import type * as dom from './dom.d.ts'
-import type { RemixElement } from './remix-types.ts'
 
-export function jsx(type: string, props: Record<string, any>, key?: string): RemixElement {
+export function jsx(
+  type: Remix.ElementType,
+  props: Remix.ElementProps,
+  key?: string,
+): Remix.Element {
   return { type, props, key, $rmx: true }
 }
 

packages/component/src/lib/remix-types.d.ts

@@ -0,0 +1,68 @@
+import type { EventListeners } from '@remix-run/interaction'
+
+declare global {
+  namespace Remix {
+    /**
+     * Any valid element type accepted by JSX or `createElement`.
+     * - `string` for host elements (e.g., 'div')
+     * - `Function` for user components
+     */
+    export type ElementType = string | Function
+
+    /**
+     * Generic bag of props passed to elements/components.
+     * Consumers should define specific prop types on their components; this is the
+     * renderer's normalized shape used throughout reconciler/SSR code.
+     */
+    export type ElementProps = Record<string, any>
+
+    /**
+     * A virtual element produced by JSX/`createElement` describing UI.  Carries a
+     * `$rmx` brand used to distinguish it from plain objects at runtime.
+     */
+    export interface Element {
+      type: ElementType
+      props: ElementProps
+      key?: string | undefined
+      $rmx: true
+    }
+
+    /**
+     * Any single value Remix can render. Booleans render as empty text.
+     */
+    export type Renderable = Element | string | number | bigint | boolean | null | undefined
+
+    /**
+     * Anything that Remix can render, including arrays of renderable values.
+     * Particularly useful for `props.children`.
+     *
+     * ```tsx
+     * function MyComponent({ children }: { children: RemixNode }) {}
+     * ```
+     */
+    export type Node = Renderable | Renderable[]
+
+    export interface HostProps<eventTarget extends EventTarget> {
+      children?: Node
+      on?: EventListeners<eventTarget> | undefined
+      css?: 'TODO: support css properties' | undefined
+      connect?: 'TODO: support connect' | undefined
+    }
+
+    /**
+     * Get the props for a specific element type with normalized `on` prop.
+     *
+     * @example
+     * interface MyButtonProps extends Props<"button"> {
+     *   size: "sm" | "md" | "lg"
+     * }
+     *
+     * @example
+     * function Button({ on = [], ...rest }: Props<"button">) {
+     *   // on is always EventDescriptor[] here
+     *   return <button {...rest} on={[...on, dom.click(handler)]} />
+     * }
+     */
+    export type Props<T extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[T]
+  }
+}