@luna_ui/luna 0.11.0 → 0.17.0

package/tests/css-runtime.test.ts

@@ -1,342 +0,0 @@
-import { describe, test, expect, beforeEach, afterEach, vi } from "vitest";
-import {
-  initCssRuntime,
-  css,
-  styles,
-  hover,
-  focus,
-  active,
-  on,
-  hasClass,
-  getGeneratedCss,
-  getGeneratedCount,
-  resetRuntime,
-  combine,
-} from "../src/css/runtime";
-
-describe("CSS Runtime - Missing CSS Detection", () => {
-  let warnSpy: ReturnType<typeof vi.spyOn>;
-
-  beforeEach(() => {
-    // Reset runtime state
-    resetRuntime();
-    // Spy on console.warn
-    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-    // Initialize runtime
-    initCssRuntime({ warnOnGenerate: true });
-  });
-
-  afterEach(() => {
-    warnSpy.mockRestore();
-    // Clean up any injected style elements
-    const styleEl = document.getElementById("luna-dev-css");
-    if (styleEl) {
-      styleEl.remove();
-    }
-  });
-
-  describe("css()", () => {
-    test("generates class name from property:value", () => {
-      const className = css("display", "flex");
-      expect(className).toMatch(/^_[a-z0-9]+$/);
-    });
-
-    test("same declaration produces same class name", () => {
-      const cls1 = css("display", "flex");
-      const cls2 = css("display", "flex");
-      expect(cls1).toBe(cls2);
-    });
-
-    test("different declarations produce different class names", () => {
-      const cls1 = css("display", "flex");
-      const cls2 = css("display", "block");
-      expect(cls1).not.toBe(cls2);
-    });
-
-    test("warns when generating CSS at runtime", () => {
-      css("color", "red");
-      expect(warnSpy).toHaveBeenCalledWith(
-        expect.stringContaining("[luna-css] Generated at runtime:"),
-        expect.stringContaining("luna css extract")
-      );
-    });
-
-    test("only warns once per declaration", () => {
-      css("margin", "10px");
-      css("margin", "10px");
-      css("margin", "10px");
-      // Should only warn once for the same declaration
-      const marginWarnings = warnSpy.mock.calls.filter(
-        (call) => call[0].includes("margin:10px")
-      );
-      expect(marginWarnings.length).toBe(1);
-    });
-  });
-
-  describe("styles()", () => {
-    test("generates multiple class names", () => {
-      const classNames = styles([
-        ["display", "flex"],
-        ["padding", "10px"],
-      ]);
-      expect(classNames.split(" ").length).toBe(2);
-    });
-
-    test("warns for each new declaration", () => {
-      styles([
-        ["width", "100%"],
-        ["height", "50px"],
-      ]);
-      expect(warnSpy).toHaveBeenCalledTimes(2);
-    });
-  });
-
-  describe("pseudo-classes", () => {
-    test("hover() generates pseudo-class CSS", () => {
-      const className = hover("background", "blue");
-      expect(className).toMatch(/^_[a-z0-9]+$/);
-      expect(warnSpy).toHaveBeenCalledWith(
-        expect.stringContaining(":hover"),
-        expect.any(String)
-      );
-    });
-
-    test("focus() generates pseudo-class CSS", () => {
-      const className = focus("outline", "none");
-      expect(className).toMatch(/^_[a-z0-9]+$/);
-      expect(warnSpy).toHaveBeenCalledWith(
-        expect.stringContaining(":focus"),
-        expect.any(String)
-      );
-    });
-
-    test("active() generates pseudo-class CSS", () => {
-      const className = active("transform", "scale(0.95)");
-      expect(className).toMatch(/^_[a-z0-9]+$/);
-      expect(warnSpy).toHaveBeenCalledWith(
-        expect.stringContaining(":active"),
-        expect.any(String)
-      );
-    });
-
-    test("on() generates custom pseudo-class", () => {
-      const className = on(":visited", "color", "purple");
-      expect(className).toMatch(/^_[a-z0-9]+$/);
-    });
-  });
-
-  describe("hasClass()", () => {
-    test("returns false for non-existent class", () => {
-      expect(hasClass("_nonexistent123")).toBe(false);
-    });
-
-    test("returns true for generated class", () => {
-      const className = css("font-size", "16px");
-      expect(hasClass(className)).toBe(true);
-    });
-  });
-
-  describe("getGeneratedCss()", () => {
-    test("returns empty string initially", () => {
-      resetRuntime();
-      initCssRuntime({ warnOnGenerate: false });
-      expect(getGeneratedCss()).toBe("");
-    });
-
-    test("returns generated CSS rules", () => {
-      const className = css("border", "1px solid black");
-      const generatedCss = getGeneratedCss();
-      expect(generatedCss).toContain(className);
-      expect(generatedCss).toContain("border:1px solid black");
-    });
-  });
-
-  describe("getGeneratedCount()", () => {
-    test("returns 0 initially", () => {
-      resetRuntime();
-      initCssRuntime({ warnOnGenerate: false });
-      expect(getGeneratedCount()).toBe(0);
-    });
-
-    test("increments with each new declaration", () => {
-      resetRuntime();
-      initCssRuntime({ warnOnGenerate: false });
-
-      css("opacity", "0.5");
-      expect(getGeneratedCount()).toBe(1);
-
-      css("visibility", "hidden");
-      expect(getGeneratedCount()).toBe(2);
-
-      // Same declaration doesn't increment
-      css("opacity", "0.5");
-      expect(getGeneratedCount()).toBe(2);
-    });
-  });
-
-  describe("combine()", () => {
-    test("joins class names with space", () => {
-      const result = combine(["_abc", "_def", "_ghi"]);
-      expect(result).toBe("_abc _def _ghi");
-    });
-
-    test("filters out falsy values", () => {
-      const result = combine(["_abc", "", "_def", undefined as any, "_ghi"]);
-      expect(result).toBe("_abc _def _ghi");
-    });
-  });
-
-  describe("DOM injection", () => {
-    test("injects style element into head", () => {
-      css("z-index", "100");
-      const styleEl = document.getElementById("luna-dev-css");
-      expect(styleEl).not.toBeNull();
-      expect(styleEl?.tagName).toBe("STYLE");
-    });
-
-    test("style element contains generated CSS", () => {
-      const className = css("position", "absolute");
-      const styleEl = document.getElementById("luna-dev-css");
-      expect(styleEl?.textContent).toContain(className);
-      expect(styleEl?.textContent).toContain("position:absolute");
-    });
-
-    test("multiple rules are appended to same style element", () => {
-      css("top", "0");
-      css("left", "0");
-      css("right", "0");
-
-      const styleEl = document.getElementById("luna-dev-css");
-      expect(styleEl?.textContent).toContain("top:0");
-      expect(styleEl?.textContent).toContain("left:0");
-      expect(styleEl?.textContent).toContain("right:0");
-    });
-  });
-
-  describe("warnOnGenerate option", () => {
-    test("no warnings when warnOnGenerate is false", () => {
-      resetRuntime();
-      const quietWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-
-      initCssRuntime({ warnOnGenerate: false });
-      css("cursor", "pointer");
-
-      expect(quietWarnSpy).not.toHaveBeenCalled();
-      quietWarnSpy.mockRestore();
-    });
-  });
-});
-
-describe("CSS Runtime - Pre-extracted CSS Integration", () => {
-  let warnSpy: ReturnType<typeof vi.spyOn>;
-  let preExtractedStyle: HTMLStyleElement;
-
-  beforeEach(() => {
-    resetRuntime();
-    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-
-    // Simulate pre-extracted CSS (like virtual:luna.css)
-    preExtractedStyle = document.createElement("style");
-    preExtractedStyle.id = "pre-extracted-css";
-    preExtractedStyle.textContent = `
-      ._swuc{display:flex}
-      ._3m33u{align-items:center}
-      ._5qn6e{justify-content:center}
-    `;
-    document.head.appendChild(preExtractedStyle);
-
-    initCssRuntime({ warnOnGenerate: true });
-  });
-
-  afterEach(() => {
-    warnSpy.mockRestore();
-    preExtractedStyle.remove();
-    const devStyle = document.getElementById("luna-dev-css");
-    if (devStyle) devStyle.remove();
-  });
-
-  test("hasClass returns true for pre-extracted classes", () => {
-    expect(hasClass("_swuc")).toBe(true);
-    expect(hasClass("_3m33u")).toBe(true);
-    expect(hasClass("_5qn6e")).toBe(true);
-  });
-
-  test("hasClass returns false for missing classes", () => {
-    expect(hasClass("_missing123")).toBe(false);
-    expect(hasClass("_notextracted")).toBe(false);
-  });
-
-  test("no warning when class already exists in stylesheet", () => {
-    // This simulates using a class that was pre-extracted
-    // The runtime should detect it exists and not regenerate/warn
-    // Note: css() will still generate the class name, but if it exists,
-    // it won't inject or warn
-
-    // First, verify the class exists
-    expect(hasClass("_swuc")).toBe(true);
-
-    // Calling css() with same declaration won't warn if already present
-    // But our implementation always checks after hash, so we need to test differently
-
-    // The key test: missing CSS triggers warning
-    css("background", "red"); // Not in pre-extracted
-    expect(warnSpy).toHaveBeenCalled();
-  });
-
-  test("detects missing CSS and generates fallback", () => {
-    // Use a declaration that's definitely not pre-extracted
-    const className = css("border-radius", "999px");
-
-    // Should have warned
-    expect(warnSpy).toHaveBeenCalledWith(
-      expect.stringContaining("[luna-css]"),
-      expect.any(String)
-    );
-
-    // Should have injected the CSS
-    const devStyle = document.getElementById("luna-dev-css");
-    expect(devStyle?.textContent).toContain(className);
-    expect(devStyle?.textContent).toContain("border-radius:999px");
-  });
-
-  test("element styling works after runtime generation", () => {
-    const className = css("background-color", "#ff0000");
-
-    const div = document.createElement("div");
-    div.className = className;
-    document.body.appendChild(div);
-
-    // After runtime CSS injection, the element should have the style
-    const computed = getComputedStyle(div);
-    expect(computed.backgroundColor).toBe("rgb(255, 0, 0)");
-
-    div.remove();
-  });
-});
-
-describe("CSS Runtime - Class Name Determinism", () => {
-  beforeEach(() => {
-    resetRuntime();
-    initCssRuntime({ warnOnGenerate: false });
-  });
-
-  test("class names are deterministic (DJB2 hash)", () => {
-    // These should produce the same class name every time
-    const cls1 = css("display", "flex");
-    resetRuntime();
-    initCssRuntime({ warnOnGenerate: false });
-    const cls2 = css("display", "flex");
-
-    expect(cls1).toBe(cls2);
-  });
-
-  test("known hash values for verification", () => {
-    // display:flex should produce a specific class name
-    // This verifies the hash function matches MoonBit implementation
-    const flexClass = css("display", "flex");
-    // The class should start with _ and be alphanumeric
-    expect(flexClass).toMatch(/^_[a-z0-9]+$/);
-    // Should be reasonably short (base36 encoded 24-bit hash)
-    expect(flexClass.length).toBeLessThanOrEqual(7);
-  });
-});

package/tests/debounced.test.ts

@@ -1,165 +0,0 @@
-import { describe, test, expect, beforeEach, afterEach, vi } from "vitest";
-import { createSignal, debounced, createRenderEffect } from "../src/index";
-
-describe("debounced signal", () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  test("debounced returns initial value immediately", () => {
-    const [value, setValue] = createSignal(42);
-    const [debouncedValue] = debounced([value, setValue], 100);
-
-    expect(debouncedValue()).toBe(42);
-  });
-
-  test("debounced delays value updates", () => {
-    const [value, setValue] = createSignal("initial");
-    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 100);
-
-    // Update the value
-    setDebouncedValue("updated");
-
-    // Debounced value should still be initial (before timeout)
-    expect(debouncedValue()).toBe("initial");
-
-    // Advance time by less than delay
-    vi.advanceTimersByTime(50);
-    expect(debouncedValue()).toBe("initial");
-
-    // Advance time to complete the delay
-    vi.advanceTimersByTime(50);
-    expect(debouncedValue()).toBe("updated");
-  });
-
-  test("debounced cancels previous timer on rapid updates", () => {
-    const [value, setValue] = createSignal(0);
-    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 100);
-
-    // Rapid updates
-    setDebouncedValue(1);
-    vi.advanceTimersByTime(50);
-    setDebouncedValue(2);
-    vi.advanceTimersByTime(50);
-    setDebouncedValue(3);
-
-    // Should still be initial value
-    expect(debouncedValue()).toBe(0);
-
-    // Advance to complete the delay from last update
-    vi.advanceTimersByTime(100);
-    expect(debouncedValue()).toBe(3);
-  });
-
-  test("debounced with 0ms delay updates immediately after microtask", () => {
-    const [value, setValue] = createSignal("start");
-    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 0);
-
-    setDebouncedValue("end");
-
-    // Even 0ms delay needs timer to fire
-    vi.advanceTimersByTime(0);
-    expect(debouncedValue()).toBe("end");
-  });
-
-  test("debounced triggers reactive effects after delay", () => {
-    const [value, setValue] = createSignal(0);
-    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 100);
-
-    const log: number[] = [];
-    createRenderEffect(() => {
-      log.push(debouncedValue());
-    });
-
-    // Initial effect run
-    expect(log).toEqual([0]);
-
-    // Update value
-    setDebouncedValue(10);
-    expect(log).toEqual([0]); // Not yet updated
-
-    // After delay, effect should run
-    vi.advanceTimersByTime(100);
-    expect(log).toEqual([0, 10]);
-  });
-
-  test("debounced handles multiple sequential updates correctly", () => {
-    const [value, setValue] = createSignal("a");
-    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 50);
-
-    // First update
-    setDebouncedValue("b");
-    vi.advanceTimersByTime(50);
-    expect(debouncedValue()).toBe("b");
-
-    // Second update (after first completed)
-    setDebouncedValue("c");
-    vi.advanceTimersByTime(50);
-    expect(debouncedValue()).toBe("c");
-  });
-
-  test("debounced works with object values", () => {
-    const [value, setValue] = createSignal({ count: 0 });
-    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 100);
-
-    const newObj = { count: 5 };
-    setDebouncedValue(newObj);
-
-    expect(debouncedValue().count).toBe(0);
-
-    vi.advanceTimersByTime(100);
-    expect(debouncedValue().count).toBe(5);
-    expect(debouncedValue()).toBe(newObj); // Same reference
-  });
-
-  test("debounced works with array values", () => {
-    const [value, setValue] = createSignal<number[]>([1, 2, 3]);
-    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 100);
-
-    setDebouncedValue([4, 5, 6]);
-
-    expect(debouncedValue()).toEqual([1, 2, 3]);
-
-    vi.advanceTimersByTime(100);
-    expect(debouncedValue()).toEqual([4, 5, 6]);
-  });
-
-  test("debounced with long delay", () => {
-    const [value, setValue] = createSignal("original");
-    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 1000);
-
-    setDebouncedValue("delayed");
-
-    // Check at various points
-    vi.advanceTimersByTime(500);
-    expect(debouncedValue()).toBe("original");
-
-    vi.advanceTimersByTime(499);
-    expect(debouncedValue()).toBe("original");
-
-    vi.advanceTimersByTime(1);
-    expect(debouncedValue()).toBe("delayed");
-  });
-
-  test("debounced handles many rapid updates efficiently", () => {
-    const [value, setValue] = createSignal(0);
-    const [debouncedValue, setDebouncedValue] = debounced([value, setValue], 100);
-
-    // Simulate 100 rapid updates
-    for (let i = 1; i <= 100; i++) {
-      setDebouncedValue(i);
-      vi.advanceTimersByTime(10); // 10ms between each
-    }
-
-    // Should still be 0 because timer keeps getting reset
-    expect(debouncedValue()).toBe(0);
-
-    // Wait for final debounce to complete
-    vi.advanceTimersByTime(100);
-    expect(debouncedValue()).toBe(100);
-  });
-});