@solidrt/core 0.0.17 → 0.0.18

package/examples/README.md

@@ -24,4 +24,10 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 
 ## Images and GPU
 - `image.tsx` - `createImage` (async value: fetch + decode + upload) read inside a `<Loading>` boundary and shown with `<texture>`.
-- `gpu-shader.tsx` - a GLSL fragment shader rendered to a texture, animated via `setShaderParams`.
+- `gpu-shader.tsx` - a GLSL fragment shader rendered to a texture, animated via `setShaderParams`.
+
+## Vector graphics
+- `svg.tsx` - `<svg src={...}>` draws a whole SVG *document string* (not HTML/JSX children); multi-color fills vs a `currentColor` icon recolored by the `color` prop. This is how to use existing icon libraries (Lucide, Heroicons, etc.) - hand their SVG source to `src`.
+
+## Bundling assets
+- `binary-import.tsx` - `import bytes from "./file" with { type: "binary" }` inlines a file's bytes into the bundle as a `Uint8Array` (combine with `image.tsx` to display an inlined image). `with { type: "text" }` works the same way for a string.

package/examples/binary-import.tsx

@@ -0,0 +1,26 @@
+// Importing a file with `with { type: "binary" }` inlines its bytes into the
+// bundle as a Uint8Array. The data travels inside the compiled bytecode, so it
+// is available synchronously - no runtime fetch, works offline. Reach for this
+// with small assets you want baked in; for large or many assets prefer a string
+// URL source loaded at runtime instead.
+//
+// This example shows only the binary import itself: it reports the imported
+// file's length and leading bytes. What you do with the bytes afterwards is a
+// separate concern - e.g. hand them to createImage to decode and display an
+// image (see image.tsx), or to decodeImage/createTexture for manual control.
+import { render } from "@solidrt/core"
+import bytes from "./logo.png" with { type: "binary" }
+
+// The PNG magic number: 89 50 4e 47 ... - proof the real bytes are inlined.
+let head = Array.from(bytes.slice(0, 8), (b) => b.toString(16).padStart(2, "0")).join(" ")
+
+function App() {
+  return (
+    <window alignItems="center" justifyContent="center" gap={8}>
+      <text fontSize={18} color="#e6e6e6">{bytes.length} bytes inlined</text>
+      <text color="#888">starts with {head}</text>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/svg.tsx

@@ -0,0 +1,45 @@
+// <svg> draws a whole SVG *document* passed as a STRING in the `src` prop. This
+// is not HTML: there are no per-element <rect>/<circle>/<path> JSX children to
+// nest. You hand it the SVG source text and usvg parses it (CSS, transforms,
+// defs/use, gradients, clips) into a flat path tree the element renders. So an
+// SVG is a value (a string you import, fetch, or inline), not markup you author
+// inline with JSX.
+//
+// width/height set the drawn box (percentages work too); a multi-color document
+// keeps each shape's own fill, while a monochrome icon using stroke/fill
+// "currentColor" is recolored by the host `color` prop. For per-shape authored
+// or animated vector art, compose <d-path> instead of this document layer.
+//
+// This is how you use an existing icon library (Lucide, Heroicons, Feather,
+// Material, etc.): those ship SVG source, so import/inline the icon string and
+// hand it to `src`. The `currentColor` convention they follow means the `color`
+// prop recolors them, exactly as `currentColor` would in a browser.
+import { render } from "@solidrt/core"
+
+// Multi-color document: each shape carries its own fill, no host color needed.
+const HOUSE = `
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <rect x="20" y="45" width="60" height="45" fill="#457b9d"/>
+  <path d="M10 50 L50 15 L90 50 Z" fill="#e63946"/>
+  <rect x="42" y="62" width="16" height="28" fill="#f1faee"/>
+  <circle cx="50" cy="35" r="6" fill="#ffd166"/>
+</svg>`
+
+// Monochrome icon (Lucide arrow-right) drawn with currentColor, recolored below.
+const ARROW = `
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+     stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12h14"/>
+  <path d="M12 5l7 7-7 7"/>
+</svg>`
+
+function App() {
+  return (
+    <window justifyContent="center" alignItems="center" flexDirection="row" gap={32}>
+      <svg width={120} height={120} src={HOUSE} />
+      <svg width={120} height={120} src={ARROW} color="#4f8cff" />
+    </window>
+  )
+}
+
+render(() => <App />)

package/jsx-runtime.d.ts

@@ -8,13 +8,14 @@ import type {
   TextProps,
   TextureProps,
   AudioProps,
-  LayoutProps
+  LayoutProps,
+  Element as CoreElement,
+  ElementChildrenAttribute as CoreElementChildrenAttribute
 } from "./src/types"
-import type { JSX as SolidJSX } from "@solidjs/signals"
 
 export namespace JSX {
-  type Element = SolidJSX.Element
-  type ElementChildrenAttribute = SolidJSX.ElementChildrenAttribute
+  type Element = CoreElement
+  type ElementChildrenAttribute = CoreElementChildrenAttribute
 
   // Return type is unconstrained: a ref callback's return value is ignored, so
   // an arrow like `ref={n => (this.node = n)}` (which returns the assignment)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",

package/src/image.ts

@@ -56,7 +56,7 @@ export function createImage(src: ImageSource | (() => ImageSource)): () => numbe
     // If the source changed while we were loading, this run is superseded. Skip
     // the GPU upload and stay pending: a texture created here would leak, since
     // superseded async runs are not otherwise cleaned up. The newer run wins.
-    if (mine !== generation) throw new NotReadyError()
+    if (mine !== generation) throw new NotReadyError(source)
 
     let { data, width, height } = decodeImage(bytes)
     holder.id = createTexture(data, width, height)

package/src/runtime-modules.d.ts

@@ -0,0 +1,52 @@
+// Lattice runner builtin modules (the "srt:*" surface). These are ambient
+// module declarations, so they live in this global-script .d.ts (no top-level
+// import/export) rather than in types.d.ts: an ambient `declare module` only
+// becomes globally visible to consumers from a non-module declaration file.
+
+declare module "*.svg" {
+  const content: string
+  export default content
+}
+
+// Binary asset imports: `import data from "./pic.png" with { type: "binary" }`.
+// The bundler inlines the file's bytes as a Uint8Array (see packages/cli
+// bundler `binaryImport`); feed it straight into createImage/decodeImage.
+declare module "*.png" {
+  const bytes: Uint8Array
+  export default bytes
+}
+declare module "*.jpg" {
+  const bytes: Uint8Array
+  export default bytes
+}
+declare module "*.jpeg" {
+  const bytes: Uint8Array
+  export default bytes
+}
+
+// UI event bus (lattice), provided by the runtime as a builtin module.
+// on/once return an unsubscribe function.
+declare module "srt:events" {
+  export function on(event: string, callback: (data: any) => void): () => void
+  export function once(event: string, callback: (data: any) => void): () => void
+}
+
+// Dev-server control surface (lattice). Present only in dev/go builds; in other
+// builds `available` is false and the functions are no-ops.
+declare module "srt:dev" {
+  export const available: boolean
+  export const canDiscover: boolean
+  export const recents: string[]
+  export function connect(address: string): void
+  export function discover(): void
+  export function stop(): void
+}
+
+// Frame draw (lattice runner). renderFrame() synchronously renders the current
+// frame: layout, the postLayout hook, paint and hover refresh, then builds and
+// submits the display list. To schedule a future frame instead, use
+// requestFrame() from "flux:rendertree". The tree-building surface itself is
+// "flux:rendertree" (from @solidrt/flux-types).
+declare module "srt:render" {
+  export function renderFrame(): void
+}

package/src/types.d.ts

@@ -1,34 +1,12 @@
 /// <reference types="@solidrt/flux-types" />
+/// <reference path="./runtime-modules.d.ts" />
 
-import type { JSX as SolidJSX } from "@solidjs/signals"
 import type { Gradient } from "./color"
+import type { Element } from "solid-js"
 
-// UI event bus (lattice), provided by the runtime as a builtin module.
-// on/once return an unsubscribe function.
-declare module "srt:events" {
-  export function on(event: string, callback: (data: any) => void): () => void
-  export function once(event: string, callback: (data: any) => void): () => void
-}
-
-// Dev-server control surface (lattice). Present only in dev/go builds; in other
-// builds `available` is false and the functions are no-ops.
-declare module "srt:dev" {
-  export const available: boolean
-  export const canDiscover: boolean
-  export const recents: string[]
-  export function connect(address: string): void
-  export function discover(): void
-  export function stop(): void
-}
-
-// Frame draw (lattice runner). renderFrame() synchronously renders the current
-// frame: layout, the postLayout hook, paint and hover refresh, then builds and
-// submits the display list. To schedule a future frame instead, use
-// requestFrame() from "flux:rendertree". The tree-building surface itself is
-// "flux:rendertree" (from @solidrt/flux-types).
-declare module "srt:render" {
-  export function renderFrame(): void
-}
+// The "srt:*" lattice runner modules are declared in ./runtime-modules.d.ts
+// (referenced above) - ambient `declare module` only reaches consumers from a
+// non-module declaration file, and this file is a module.
 
 declare global {
   let image: {
@@ -48,7 +26,16 @@ declare global {
   }
 }
 
-type Children = SolidJSX.Element
+// JSX value model. The element type is solid-js's (its control-flow components
+// like <For> return it, so JSX.Element must match). @solidjs/signals ships no
+// JSX namespace and solid-js defines no ElementChildrenAttribute, so we supply
+// that here - its single key tells TS which prop receives JSX children.
+export type { Element }
+export interface ElementChildrenAttribute {
+  children: {}
+}
+
+type Children = Element
 
 interface FlexboxProps {
   gap?: number