@yak/react 0.0.0-stage → 10.0.0-rc.0

package/runtime/__tests__/styled.test.tsx

@@ -0,0 +1,653 @@
+// @ts-nocheck
+// We are testing internal functionality which does not match
+// 1:1 the API exposed to the user before compilation.
+// Therefore types are not matching and need to be ignored.
+import { render } from "@testing-library/react";
+import React from "react";
+import { expect, it } from "vitest";
+import { YakThemeProvider } from "../context";
+import { css } from "../cssLiteral";
+import { styled as styledFn } from "../styled";
+import { atoms } from "../atoms";
+
+// This transform is usually done by the SWC plugin.
+// However this `styled.test.tsx` does not compile
+// the code before testing
+const styled = Object.assign(styledFn, {
+  div: styledFn("div"),
+  input: styledFn("input"),
+  a: styledFn("a"),
+}) as typeof styledFn;
+
+it("should render a literal element", () => {
+  const Component = styled.input``;
+
+  const { container } = render(<Component />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input />
+    </div>
+  `);
+});
+
+it("should render a literal element with styles", () => {
+  const Component = styled.input("cssClass");
+
+  const { container } = render(<Component />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input
+        class="cssClass"
+      />
+    </div>
+  `);
+});
+
+it("should forward properties", () => {
+  const Component = styled.input("cssClass");
+
+  const { container } = render(<Component defaultValue="forwarded" />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input
+        class="cssClass"
+        value="forwarded"
+      />
+    </div>
+  `);
+});
+
+it("should forward children", () => {
+  const Component = styled.div``;
+
+  const { container } = render(
+    <Component>
+      <button>Click me!</button>
+    </Component>,
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <div>
+        <button>
+          Click me!
+        </button>
+      </div>
+    </div>
+  `);
+});
+
+it("should filter out properties starting with $", () => {
+  const Component = styled.input``;
+
+  const { container } = render(<Component $forwardedProp="notForwarded" />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input />
+    </div>
+  `);
+});
+
+it("should filter out properties starting with $ when passing to custom", () => {
+  let forwardedProps = null;
+  const Component = ({ className, style, ...props }) => {
+    forwardedProps = props;
+    return null;
+  };
+  const StyledComponent = styled(Component)``;
+  render(<StyledComponent $forwardedProp="notForwarded" />);
+
+  expect(forwardedProps).toEqual({});
+});
+
+it("should forward properties to the next yak component", () => {
+  const Component = styled.input.attrs(({ $text }) => ({
+    "aria-label": $text,
+  }))``;
+  const StyledComponent = styled(Component)``;
+  const { container } = render(<StyledComponent $text="hello world" />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input
+        aria-label="hello world"
+      />
+    </div>
+  `);
+});
+
+it("should concatenate classNames", () => {
+  const Component = styled.input("className1");
+
+  const { container } = render(<Component className="className2" />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input
+        class="className2 className1"
+      />
+    </div>
+  `);
+});
+
+it("should concatenate styles", () => {
+  const Component = styled.input``;
+
+  const { container } = render(<Component style={{ color: "red" }} />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input
+        style="color: red;"
+      />
+    </div>
+  `);
+});
+
+it("should not inject a default style prop into a static wrapped component", () => {
+  let receivedProps = null;
+  const Component = (props) => {
+    receivedProps = props;
+    return null;
+  };
+  const StyledComponent = styled(Component)("staticClass");
+
+  render(<StyledComponent />);
+
+  expect("style" in receivedProps).toBe(false);
+});
+
+it("should forward a style prop by reference to a static wrapped component", () => {
+  let receivedProps = null;
+  const Component = (props) => {
+    receivedProps = props;
+    return null;
+  };
+  const StyledComponent = styled(Component)("staticClass");
+  const style = { color: "red" };
+
+  render(<StyledComponent style={style} />);
+
+  // no per-render clone — keeps React.memo/PureComponent on the target working
+  expect(receivedProps.style).toBe(style);
+});
+
+it("should not add class if prop is not set", () => {
+  const Component = styled.input(({ testProp }) => testProp && css("test"));
+
+  const { container } = render(<Component />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input />
+    </div>
+  `);
+});
+
+it("should add class if prop is set", () => {
+  const Component = styled.input(({ $testProp }) => $testProp && css("test"));
+
+  const { container } = render(<Component $testProp />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input
+        class="test"
+      />
+    </div>
+  `);
+});
+
+it("should allow falsy values", () => {
+  const Component = styled.input(({ $testProp }) => $testProp && css("test"));
+
+  const { container } = render(
+    <>
+      <Component $testProp={null} />
+      <Component $testProp={false} />
+      <Component $testProp={undefined} />
+    </>,
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input />
+      <input />
+      <input />
+    </div>
+  `);
+});
+
+it("should execute runtime styles recursively", () => {
+  const Component = styled.input<{
+    $testProp: boolean;
+  }>(
+    ({ $testProp }) =>
+      $testProp &&
+      css(
+        ({ $testProp }) =>
+          $testProp && css(({ $testProp }) => $testProp && css("recursive-test-class")),
+      ),
+  );
+
+  const { container } = render(<Component $testProp />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input
+        class="recursive-test-class"
+      />
+    </div>
+  `);
+});
+
+it("should allow using refs", () => {
+  const Component = styled.input();
+
+  let elementFromRef: HTMLInputElement | null = null;
+  render(
+    <Component
+      ref={(element) => {
+        elementFromRef = element;
+      }}
+    />,
+  );
+
+  expect(elementFromRef).toBeInstanceOf(HTMLInputElement);
+});
+
+it("should allow using nested refs", () => {
+  const BaseComponent = styled.input();
+  const Component = styled(BaseComponent)();
+
+  let elementFromRef: HTMLInputElement | null = null;
+  render(
+    <Component
+      ref={(element) => {
+        elementFromRef = element;
+      }}
+    />,
+  );
+
+  expect(elementFromRef).toBeInstanceOf(HTMLInputElement);
+});
+
+it("should remove theme if styled element", () => {
+  const Link = styled.a((p) => p && css("test"));
+
+  const { container } = render(
+    <YakThemeProvider theme={{ color: "red" }}>
+      <Link />
+    </YakThemeProvider>,
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <a
+        class="test"
+      />
+    </div>
+  `);
+});
+
+it("should keep theme if theme is passed to element", () => {
+  const ThemePrinter = ({ theme, ...props }: { theme?: unknown }) => (
+    <pre {...props}>{JSON.stringify(theme)}</pre>
+  );
+  const Link = styled(ThemePrinter)((p) => p && css("test"));
+
+  const { container } = render(
+    <YakThemeProvider theme={{ color: "red" }}>
+      <Link theme={{ anything: "test" }} />
+    </YakThemeProvider>,
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <pre
+        class="test"
+      >
+        {"anything":"test"}
+      </pre>
+    </div>
+  `);
+});
+
+it("should remove theme on wrapped element", () => {
+  const BaseComponent = styled.input((p) => p && css("test"));
+  const Component = styled(BaseComponent)((p) => p && css("test-wrapper"));
+
+  const { container } = render(
+    <YakThemeProvider theme={{ color: "red" }}>
+      <Component />
+    </YakThemeProvider>,
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input
+        class="test test-wrapper"
+      />
+    </div>
+  `);
+});
+
+it("should not remove theme if theme is passed to wrapped element", () => {
+  const ThemePrinter = ({ theme, ...props }: { theme?: unknown }) => (
+    <pre {...props}>{JSON.stringify(theme)}</pre>
+  );
+
+  const BaseComponent = styled(ThemePrinter)((p) => p && css("test"));
+  const Component = styled(BaseComponent)((p) => p && css("test-wrapper"));
+
+  const { container } = render(
+    <YakThemeProvider theme={{ color: "red" }}>
+      <Component theme={{ anything: "test" }} />
+    </YakThemeProvider>,
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <pre
+        class="test test-wrapper"
+      >
+        {"anything":"test"}
+      </pre>
+    </div>
+  `);
+});
+
+describe("dev mode - error tests", () => {
+  const originalNodeEnv = process.env.NODE_ENV;
+  const originalError = console.error;
+
+  beforeEach(() => {
+    // errors are only thrown in development mode
+    process.env.NODE_ENV = "development";
+    // prevent console.error from printing the error a second time
+    console.error = () => {};
+  });
+
+  afterEach(() => {
+    process.env.NODE_ENV = originalNodeEnv;
+    console.error = originalError;
+  });
+
+  it("should show the function body in error message when dynamic css function returns invalid value", () => {
+    const Component = styled.div("cssClass", {
+      style: {
+        "--bar": ({ $groupColor }) => $groupColor,
+      },
+    });
+
+    let error = null;
+    try {
+      render(<Component />);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toMatchInlineSnapshot(`
+      [Error: Dynamic CSS functions must return a string or number but returned undefined
+
+      Dynamic CSS function: ({ $groupColor }) => $groupColor
+      ]
+    `);
+  });
+});
+
+describe("dynamic runtime function processing", () => {
+  let consoleSpy: any;
+
+  beforeEach(() => {
+    consoleSpy = {
+      log: [],
+      originalLog: console.log,
+    };
+    console.log = (...args) => {
+      consoleSpy.log.push(args.join(" "));
+    };
+  });
+
+  afterEach(() => {
+    console.log = consoleSpy.originalLog;
+  });
+
+  it("should execute atoms runtime functions", () => {
+    const Component = styled.div(
+      atoms("static-class", (props, classNames, style) => {
+        classNames.add("dynamic-class");
+        style.fontSize = "16px";
+      }),
+    );
+    const { container } = render(<Component />);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="static-class dynamic-class"
+            style="font-size: 16px;"
+          />
+        </div>
+      `);
+  });
+
+  it("should execute combined css and atoms runtime functions", () => {
+    const Component = styled.div(
+      ({ $primary }) => $primary && css("color-primary"),
+      atoms("atoms-class", (props, classNames, style) => {
+        classNames.add("atoms-dynamic");
+        style.padding = "10px";
+      }),
+    );
+    const { container } = render(<Component $primary />);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="color-primary atoms-class atoms-dynamic"
+            style="padding: 10px;"
+          />
+        </div>
+      `);
+  });
+
+  it("should not duplicate runtime processing in nested components", () => {
+    const BaseComponent = styled.div(
+      atoms("base-class", () => console.log("Base runtime executed")),
+    );
+
+    const ExtendedComponent = styled(BaseComponent)(
+      atoms("extended-class", () => console.log("Extended runtime executed")),
+    );
+
+    render(<ExtendedComponent />);
+
+    expect(consoleSpy.log).toEqual(["Base runtime executed", "Extended runtime executed"]);
+    expect(consoleSpy.log).toHaveLength(2);
+  });
+
+  it("should execute nested runtime functions in correct order", () => {
+    const executionOrder = [];
+
+    const Level1 = styled.div(atoms(() => executionOrder.push("level1")));
+
+    const Level2 = styled(Level1)(atoms(() => executionOrder.push("level2")));
+
+    const Level3 = styled(Level2)(atoms(() => executionOrder.push("level3")));
+
+    render(<Level3 />);
+
+    expect(executionOrder).toEqual(["level1", "level2", "level3"]);
+  });
+
+  it("should allow runtime functions to see previous modifications", () => {
+    const Component = styled.div(
+      atoms("first-class", (props, classNames, style) => {
+        classNames.add("first-dynamic");
+        style.color = "red";
+      }),
+      atoms((props, classNames, style) => {
+        // Should see modifications from first atoms call
+        expect(classNames.has("first-class")).toBe(true);
+        expect(classNames.has("first-dynamic")).toBe(true);
+        expect(style.color).toBe("red");
+
+        classNames.add("second-dynamic");
+        style.backgroundColor = "blue";
+      }),
+    );
+
+    const { container } = render(<Component />);
+    expect(container).toMatchInlineSnapshot(`
+       <div>
+         <div
+           class="first-class first-dynamic second-dynamic"
+           style="color: red; background-color: blue;"
+         />
+       </div>
+     `);
+  });
+
+  it("should provide theme to runtime functions", () => {
+    const Component = styled.div(
+      atoms((props, classNames, style) => {
+        style.color = props.theme?.primaryColor || "black";
+        classNames.add("themed");
+      }),
+    );
+
+    const { container } = render(
+      <YakThemeProvider theme={{ primaryColor: "purple" }}>
+        <Component />
+      </YakThemeProvider>,
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="themed"
+            style="color: purple;"
+          />
+        </div>
+      `);
+  });
+
+  it("should merge external props with runtime modifications", () => {
+    const Component = styled.div(
+      atoms("runtime-class", (props, classNames, style) => {
+        style.fontSize = "18px";
+      }),
+    );
+
+    const { container } = render(
+      <Component className="external-class" style={{ color: "green", fontSize: "14px" }} />,
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="external-class runtime-class"
+            style="color: green; font-size: 18px;"
+          />
+        </div>
+      `);
+  });
+
+  it("should handle conditional runtime functions", () => {
+    const Component = styled.div(
+      ({ $variant }) => $variant === "primary" && css("bg-blue"),
+      atoms(
+        ({ $size }, classNames) => {
+          if ($size === "large") {
+            classNames.add("large-class");
+          }
+        },
+        (props, classNames, style) => {
+          if (props.$active) {
+            classNames.add("active");
+            style.borderWidth = "2px";
+          }
+        },
+      ),
+    );
+
+    const { container } = render(
+      <>
+        <Component $variant="primary" $size="large" $active />
+        <Component $variant="secondary" $size="small" />
+      </>,
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="bg-blue large-class active"
+            style="border-width: 2px;"
+          />
+          <div />
+        </div>
+      `);
+  });
+
+  it("should filter $ props but still use them in runtime functions", () => {
+    const Component = styled.div(
+      atoms((props, classNames, style) => {
+        if (props.$variant) {
+          classNames.add(`variant-${props.$variant}`);
+          style.padding = props.$spacing || "8px";
+        }
+      }),
+    );
+
+    const { container } = render(<Component $variant="primary" $spacing="16px" />);
+
+    const element = container.querySelector("div");
+    // Should not have $ props as DOM attributes
+    expect(element.getAttribute("$variant")).toBeNull();
+    expect(element.getAttribute("$spacing")).toBeNull();
+
+    // But should have styles/classes generated from them
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div
+            class="variant-primary"
+            style="padding: 16px;"
+          />
+        </div>
+      `);
+  });
+
+  it("should handle runtime functions that return falsy values", () => {
+    const Component = styled.div(
+      ({ $show }) => $show && css("block"),
+      atoms(
+        ({ $variant }, classNames) => {
+          if ($variant === "primary") {
+            classNames.add(`variant-${$variant}`);
+          }
+        },
+        null,
+        undefined,
+        false && "never-added",
+      ),
+    );
+
+    const { container } = render(
+      <>
+        <Component $show $variant="primary" />
+        <Component />
+      </>,
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div
+          class="block variant-primary"
+        />
+        <div />
+      </div>
+    `);
+  });
+});

package/runtime/__tests__/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "lib": ["DOM"],
+    "types": ["node"],
+    "jsx": "react",
+    "moduleResolution": "bundler",
+    "allowJs": true,
+    "checkJs": true,
+    "maxNodeModuleJsDepth": 0,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["./*"]
+}