allow to return usevalue directly from components

integration-tests/create-element.test.ts

@@ -1,7 +1,12 @@
 import { screen } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
 
-import { attachComponent, createElement } from "../src";
+import {
+  attachComponent,
+  createElement,
+  createState,
+  type State,
+} from "../src";
 
 describe("createElement", () => {
   let cleanup: Function | undefined;
@@ -156,4 +161,40 @@ describe("createElement", () => {
 
     expect(screen.getByTestId("container").textContent).toBe("text 5");
   });
+
+  test("support returning useValue directly from a component", async () => {
+    const user = userEvent.setup();
+    function App() {
+      const showState = createState(false);
+      return createElement("div", {
+        children: [
+          createElement("h1", { children: ["parent component"] }),
+          createElement("button", {
+            "data-testid": "button",
+            onClick: () => showState.setValue(true),
+          }),
+          createElement(StateComponent, { showState }),
+        ],
+      });
+    }
+
+    function StateComponent({ showState }: { showState: State<boolean> }) {
+      return showState.useValue((shouldShowState) =>
+        shouldShowState
+          ? createElement("div", {
+              "data-testid": "stateComponent",
+              children: "state component",
+            })
+          : null
+      );
+    }
+    cleanup = attachComponent({
+      htmlElement: document.body,
+      component: createElement(App),
+    });
+
+    expect(screen.queryByTestId("stateComponent")).not.toBeInTheDocument();
+    await user.click(screen.getByTestId("button"));
+    expect(screen.getByTestId("stateComponent")).toBeInTheDocument();
+  });
 });

src/types.d.ts

@@ -85,7 +85,7 @@ export type ComponentAPI = {
 export type ComponentFunction = (
   props: VelesElementProps,
   componentAPI: ComponentAPI
-) => VelesElement | VelesComponent | string | null;
+) => VelesElement | VelesComponent | VelesStringElement | string | null;
 
 export type AttributeHelper<T> = {
   (htmlElement: HTMLElement, attributeName: string, node: VelesElement): T;