@vsreact/core 0.0.23 → 0.0.24

package/dist/hostConfig.js

@@ -10,6 +10,8 @@ const hostTypes = {
     "vs-image": "image",
     "vs-textinput": "textinput",
     "vs-native": "native",
+    "vs-svg": "svg",
+    "vs-svgpath": "svgpath",
 };
 const eventPropNames = {
     onClick: "click",

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import "./runtime";
 import "./bridge";
 /** The SDK version — stamp it on support dumps and analytics. */
-export declare const VERSION = "0.0.23";
-export { View, Text, Image, TextInput, NativeView } from "./primitives";
-export type { CommonProps, TextProps, ImageProps, TextInputProps, NativeViewProps, } from "./primitives";
+export declare const VERSION = "0.0.24";
+export { View, Text, Image, TextInput, NativeView, Svg, SvgPath } from "./primitives";
+export type { CommonProps, TextProps, ImageProps, TextInputProps, NativeViewProps, SvgProps, SvgPathProps, } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";
 export { useNativeEvent, useNativeValue, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";

package/dist/index.js

@@ -3,8 +3,8 @@
 import "./runtime";
 import "./bridge";
 /** The SDK version — stamp it on support dumps and analytics. */
-export const VERSION = "0.0.23";
-export { View, Text, Image, TextInput, NativeView } from "./primitives";
+export const VERSION = "0.0.24";
+export { View, Text, Image, TextInput, NativeView, Svg, SvgPath } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";
 export { useNativeEvent, useNativeValue, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";

package/dist/primitives.d.ts

@@ -73,6 +73,30 @@ export interface ImageProps extends CommonProps {
     src: string;
 }
 export declare function Image(props: ImageProps): import("react").ReactElement<ImageProps, string | import("react").JSXElementConstructor<any>>;
+export interface SvgProps extends CommonProps {
+    /** "minX minY width height" — path coordinates map from this box onto the
+        node's layout frame (like the web's preserveAspectRatio="none"). */
+    viewBox: string;
+}
+/** Vector container: lays out like a View, paints its <SvgPath> children
+    scaled from viewBox space. Icon sets port directly — rename attributes
+    and drop each path's `d` in. */
+export declare function Svg(props: SvgProps): import("react").ReactElement<SvgProps, string | import("react").JSXElementConstructor<any>>;
+export interface SvgPathProps {
+    /** SVG path data ("M12 2 L22 22 …") — parsed once and cached. */
+    d: string;
+    /** Fill color; SVG's default black. "none" for stroke-only paths. */
+    fill?: string;
+    stroke?: string;
+    /** Stroke width in viewBox units (scales with the frame, like SVG). */
+    strokeWidth?: number;
+    strokeCap?: "butt" | "round" | "square";
+    strokeJoin?: "miter" | "round" | "bevel";
+    /** Dash pattern in viewBox units, e.g. "4 2". */
+    strokeDash?: string;
+    fillRule?: "nonzero" | "evenodd";
+}
+export declare function SvgPath(props: SvgPathProps): import("react").ReactElement<SvgPathProps, string | import("react").JSXElementConstructor<any>>;
 export interface TextInputProps extends Omit<CommonProps, "children" | "onChange" | "onSubmit"> {
     value?: string;
     defaultValue?: string;

package/dist/primitives.js

@@ -8,6 +8,15 @@ export function Text(props) {
 export function Image(props) {
     return createElement("vs-image", props);
 }
+/** Vector container: lays out like a View, paints its <SvgPath> children
+    scaled from viewBox space. Icon sets port directly — rename attributes
+    and drop each path's `d` in. */
+export function Svg(props) {
+    return createElement("vs-svg", props);
+}
+export function SvgPath(props) {
+    return createElement("vs-svgpath", props);
+}
 export function TextInput({ onChange, onSubmit, ...rest }) {
     return createElement("vs-textinput", {
         ...rest,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsreact/core",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "Write React. Ship native VST. A React renderer for JUCE audio plugins — QuickJS + Yoga + juce::Graphics, no webview.",
   "keywords": [
     "react",

package/src/hostConfig.ts

@@ -20,6 +20,8 @@ const hostTypes: Record<string, string> = {
   "vs-image": "image",
   "vs-textinput": "textinput",
   "vs-native": "native",
+  "vs-svg": "svg",
+  "vs-svgpath": "svgpath",
 };
 
 const eventPropNames: Record<string, string> = {

package/src/index.ts

@@ -4,15 +4,17 @@ import "./runtime";
 import "./bridge";
 
 /** The SDK version — stamp it on support dumps and analytics. */
-export const VERSION = "0.0.23";
+export const VERSION = "0.0.24";
 
-export { View, Text, Image, TextInput, NativeView } from "./primitives";
+export { View, Text, Image, TextInput, NativeView, Svg, SvgPath } from "./primitives";
 export type {
   CommonProps,
   TextProps,
   ImageProps,
   TextInputProps,
   NativeViewProps,
+  SvgProps,
+  SvgPathProps,
 } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";

package/src/layout.test.tsx

@@ -125,3 +125,26 @@ describe("useNativeValue", () => {
     expect(seen.at(-1)).toBe(0.8);
   });
 });
+
+describe("Svg primitives (0.0.24)", () => {
+  test("Svg + SvgPath create their node types with data props", async () => {
+    const { Svg, SvgPath } = require("./index");
+    render(
+      <Svg viewBox="0 0 24 24" style={{ width: 24, height: 24 }}>
+        <SvgPath d="M12 2 L22 22 L2 22 Z" fill="#ff0000" />
+        <SvgPath d="M2 12 H22" fill="none" stroke="#00ff00" strokeWidth={2} strokeDash="4 2" />
+      </Svg>,
+    );
+
+    const creates = allOps().filter((op: any) => op[0] === "create");
+    expect(creates.some((op: any) => op[2] === "svg")).toBe(true);
+    expect(creates.filter((op: any) => op[2] === "svgpath")).toHaveLength(2);
+
+    const propOps = allOps().filter((op: any) => op[0] === "setProps");
+    const svgProps: any = propOps.find((op: any) => op[2]?.viewBox);
+    expect(svgProps[2].viewBox).toBe("0 0 24 24");
+
+    const pathProps: any = propOps.find((op: any) => op[2]?.strokeDash);
+    expect(pathProps[2]).toMatchObject({ d: "M2 12 H22", fill: "none", stroke: "#00ff00", strokeWidth: 2 });
+  });
+});

package/src/primitives.tsx

@@ -93,6 +93,38 @@ export function Image(props: ImageProps) {
   return createElement("vs-image", props);
 }
 
+export interface SvgProps extends CommonProps {
+  /** "minX minY width height" — path coordinates map from this box onto the
+      node's layout frame (like the web's preserveAspectRatio="none"). */
+  viewBox: string;
+}
+
+/** Vector container: lays out like a View, paints its <SvgPath> children
+    scaled from viewBox space. Icon sets port directly — rename attributes
+    and drop each path's `d` in. */
+export function Svg(props: SvgProps) {
+  return createElement("vs-svg", props);
+}
+
+export interface SvgPathProps {
+  /** SVG path data ("M12 2 L22 22 …") — parsed once and cached. */
+  d: string;
+  /** Fill color; SVG's default black. "none" for stroke-only paths. */
+  fill?: string;
+  stroke?: string;
+  /** Stroke width in viewBox units (scales with the frame, like SVG). */
+  strokeWidth?: number;
+  strokeCap?: "butt" | "round" | "square";
+  strokeJoin?: "miter" | "round" | "bevel";
+  /** Dash pattern in viewBox units, e.g. "4 2". */
+  strokeDash?: string;
+  fillRule?: "nonzero" | "evenodd";
+}
+
+export function SvgPath(props: SvgPathProps) {
+  return createElement("vs-svgpath", props);
+}
+
 export interface TextInputProps extends Omit<CommonProps, "children" | "onChange" | "onSubmit"> {
   value?: string;
   defaultValue?: string;