fix: add swizzle and tests

packages/demo/package.json

@@ -10,11 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/inter": "^5.0.16",
+    "@mui/joy": "^5.0.0-beta.19",
     "@react-shader-fiber/renderer": "^1.0.12",
     "@react-shader-fiber/stdlib": "^1.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-shader-fiber": "^1.0.10"
+    "react-shader-fiber": "^1.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

packages/demo/src/App.jsx

@@ -1,45 +1,19 @@
-import { useRef } from "react";
-import "./App.css";
-import circle from "../lygia/draw/circle.glsl";
-import { FragmentShader } from "react-shader-fiber";
-import {
-  Assign,
-  Call,
-  Float,
-  Output,
-  Input,
-  Main,
-  Vec4,
-} from "@react-shader-fiber/stdlib";
+import Circle from "./examples/Circle.jsx";
+import { Box, Sheet } from "@mui/joy";
 
 function App() {
-  const fragColorRef = useRef();
-  const vCoordsRef = useRef();
-
   return (
-    <div>
-      <FragmentShader prelude={[circle]}>
-        <Output type={"vec4"} id={"fragColor"} ref={fragColorRef} />
-
-        <Input ref={vCoordsRef} type={"vec2"} id={"vCoords"} />
-
-        <Main>
-          <Assign to={fragColorRef}>
-            <Vec4
-              x={0}
-              y={0}
-              z={
-                <Call fn={"circle"} type={"float"}>
-                  {vCoordsRef}
-                  <Float value={0.5} />
-                </Call>
-              }
-              w={1}
-            />
-          </Assign>
-        </Main>
-      </FragmentShader>
-    </div>
+    <Box
+      display={"grid"}
+      sx={{
+        gridTemplateColumns: "1fr 1fr 1fr",
+      }}
+    >
+      <Circle />
+      <Circle />
+      <Circle />
+      <Circle />
+    </Box>
   );
 }
 

packages/demo/src/examples/Circle.jsx

@@ -0,0 +1,43 @@
+import { FragmentShader } from "react-shader-fiber";
+import circle from "../../lygia/draw/circle.glsl";
+import {
+  Assign,
+  Call,
+  Float,
+  Input,
+  Main,
+  Output,
+  Vec4,
+} from "@react-shader-fiber/stdlib";
+import { useRef } from "react";
+
+const Circle = () => {
+  const fragColorRef = useRef();
+  const vCoordsRef = useRef();
+
+  return (
+    <FragmentShader prelude={[circle]}>
+      <Output type={"vec4"} id={"fragColor"} ref={fragColorRef} />
+
+      <Input ref={vCoordsRef} type={"vec2"} id={"vCoords"} />
+
+      <Main>
+        <Assign to={fragColorRef}>
+          <Vec4
+            x={0}
+            y={0}
+            z={
+              <Call fn={"circle"} type={"float"}>
+                {vCoordsRef}
+                <Float value={0.5} />
+              </Call>
+            }
+            w={1}
+          />
+        </Assign>
+      </Main>
+    </FragmentShader>
+  );
+};
+
+export default Circle;

packages/demo/src/examples/Gradient.jsx

@@ -0,0 +1,25 @@
+import { FragmentShader } from "react-shader-fiber";
+import circle from "../../lygia/draw/circle.glsl";
+import { Assign, Input, Main, Output, Vec4 } from "@react-shader-fiber/stdlib";
+import { useRef } from "react";
+
+const Gradient = () => {
+  const fragColorRef = useRef();
+  const vCoordsRef = useRef();
+
+  return (
+    <FragmentShader prelude={[circle]}>
+      <Output type={"vec4"} id={"fragColor"} ref={fragColorRef} />
+
+      <Input ref={vCoordsRef} type={"vec2"} id={"vCoords"} />
+
+      <Main>
+        <Assign to={fragColorRef}>
+          <Vec4 x={0} y={0} z={0} w={1} />
+        </Assign>
+      </Main>
+    </FragmentShader>
+  );
+};
+
+export default Gradient;

packages/demo/src/main.jsx

@@ -1,10 +1,14 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "@fontsource/inter";
+import { CssBaseline, CssVarsProvider } from "@mui/joy";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
+    <CssVarsProvider>
+      <CssBaseline />
+      <App />
+    </CssVarsProvider>
   </React.StrictMode>,
-)
+);

packages/stdlib/src/components/glsl/index.ts

@@ -1,5 +1,4 @@
 import FragColor from "./FragColor.tsx";
 import VCoords from "./VCoords.tsx";
-import X from "./X.tsx";
 
-export { FragColor, VCoords, X };
+export { FragColor, VCoords };

packages/stdlib/src/components/index.ts

@@ -3,3 +3,4 @@ export * from "./builtin/math/index.ts";
 export * from "./sym/index.ts";
 export * from "./lit/index.ts";
 export * from "./function/index.ts";
+export * from "./swizzle/index.ts";

packages/stdlib/src/components/swizzle/W.tsx

@@ -0,0 +1,13 @@
+import Base from "../glsl/Base.tsx";
+import { FC, forwardRef, PropsWithChildren, ReactElement } from "react";
+import { $w } from "@thi.ng/shader-ast";
+import { Vec } from "../lit/Vec.tsx";
+
+export default forwardRef<
+  FC,
+  PropsWithChildren<{
+    of: Vec | ReactElement[] | ReactElement;
+  }>
+>(function W({ of }, ref) {
+  return <Base ref={ref} gen={$w} args={[of]} />;
+});

packages/stdlib/src/components/swizzle/X.tsx

@@ -0,0 +1,14 @@
+import Base from "../glsl/Base.tsx";
+import { FC, forwardRef, PropsWithChildren, ReactElement } from "react";
+import { $x } from "@thi.ng/shader-ast";
+import { Vec } from "../lit/Vec.tsx";
+import normalizeVectorValue from "../../utils/normalizeVectorValue.ts";
+
+export default forwardRef<
+  FC,
+  PropsWithChildren<{
+    of: Vec | ReactElement[] | ReactElement;
+  }>
+>(function X({ of }, ref) {
+  return <Base ref={ref} gen={$x} args={[normalizeVectorValue(of)]} />;
+});

packages/stdlib/src/components/swizzle/XY.tsx

@@ -0,0 +1,15 @@
+import Base from "../glsl/Base.tsx";
+import { FC, forwardRef, PropsWithChildren, ReactElement } from "react";
+import { $xy } from "@thi.ng/shader-ast";
+import { Vec2 } from "../lit/Vec2.tsx";
+import { Vec3 } from "../lit/Vec3.tsx";
+import { Vec4 } from "../lit/Vec4.tsx";
+
+export default forwardRef<
+  FC,
+  PropsWithChildren<{
+    of: Vec2 | Vec3 | Vec4 | ReactElement[] | ReactElement;
+  }>
+>(function XY({ of }, ref) {
+  return <Base ref={ref} gen={$xy} args={[of]} />;
+});

packages/stdlib/src/components/swizzle/XYZ.tsx

@@ -0,0 +1,14 @@
+import Base from "../glsl/Base.tsx";
+import { FC, forwardRef, PropsWithChildren, ReactElement } from "react";
+import { $xyz } from "@thi.ng/shader-ast";
+import { Vec3 } from "../lit/Vec3.tsx";
+import { Vec4 } from "../lit/Vec4.tsx";
+
+export default forwardRef<
+  FC,
+  PropsWithChildren<{
+    of: Vec3 | Vec4 | ReactElement[] | ReactElement;
+  }>
+>(function XYZ({ of }, ref) {
+  return <Base ref={ref} gen={$xyz} args={[of]} />;
+});

packages/stdlib/src/components/swizzle/Y.tsx

@@ -0,0 +1,13 @@
+import Base from "../glsl/Base.tsx";
+import { FC, forwardRef, PropsWithChildren, ReactElement } from "react";
+import { $y } from "@thi.ng/shader-ast";
+import { Vec } from "../lit/Vec.tsx";
+
+export default forwardRef<
+  FC,
+  PropsWithChildren<{
+    of: Vec | ReactElement[] | ReactElement;
+  }>
+>(function Y({ of }, ref) {
+  return <Base ref={ref} gen={$y} args={[of]} />;
+});

packages/stdlib/src/components/swizzle/Z.tsx

@@ -0,0 +1,14 @@
+import Base from "../glsl/Base.tsx";
+import { FC, forwardRef, PropsWithChildren, ReactElement } from "react";
+import { $z } from "@thi.ng/shader-ast";
+import { Vec4 } from "../lit/Vec4.tsx";
+import { Vec3 } from "../lit/Vec3.tsx";
+
+export default forwardRef<
+  FC,
+  PropsWithChildren<{
+    of: Vec3 | Vec4 | ReactElement | ReactElement[];
+  }>
+>(function Z({ of }, ref) {
+  return <Base ref={ref} gen={$z} args={[of]} />;
+});