Allow for user defined query parameters about ladle

[getinnocuous]

legends! great work

[cm-dyoshikawa]

Thanks. I will research it.

[tajo]

landed as part of v3.2, thanks to @cm-dyoshikawa

[tajo]

This could be pretty straightforward to implement - Ladle should preserve existing non-ladle params.

Relevant code: https://github.com/tajo/ladle/blob/main/packages/ladle/lib/app/src/history.ts#L25

[cm-dyoshikawa]

Could I work on it?

[tajo]

Of course!

[cm-dyoshikawa]

@tajo

Probably what @getinnocuous wants is a mechanism that allows setting query parameters for each Story. If implemented, it could make the cataloging of components that depend on the value of the query parameter more effective.

There exists an Addon in Storybook that realizes it. So, how about adding an Addon that can set query parameters in Ladle as well?

It will provide the following API:

import { Story } from "@ladle/react";

export const Hello: Story = () => {
  const urlSearchParams = new URLSearchParams(document.location.search);
  return (
    <>
      <h1>Hello Query Parameters</h1>
      <p>{urlSearchParams.get("foo")}</p>
    </>
  );
};

Hello.meta = {
  // Set query params
  query: {
    foo: "bar",
  },
};

[tajo]

I think @getinnocuous just wants to be able to programmatically set query params (aka their stories are reading/setting query params). Ladle now strips them away on any action - it should preserve them unless they collide with Ladle's params.

The add-on you describe is a different use-case. Not sure if its that useful since you can just use useEffect() to initialize query params.

[cm-dyoshikawa]

OK. I considering.

[cm-dyoshikawa]

Changing the code in the following way seems to make the combination of useEffect and history.pushState work

export const modifyParams = (globalState: GlobalState) => {
  if (!globalState.controlInitialized) return;
  const params = {
+   ...queryString.parse(location.search),
    mode: globalState.mode,
    rtl: globalState.rtl,
    source: globalState.source,
    story: globalState.story,
    theme: globalState.theme,
    width: globalState.width,
    control: globalState.control,
  };

Sample code for using the library:

import type { Story } from "@ladle/react";
import { useEffect, useState } from "react";

export const CardTest: Story = () => {
  const [queryParams, setQueryParams] = useState<string>("");

  useEffect(() => {
    setQueryParams(location.search);
  }, []);

  return <p>Params: {queryParams}</p>;
  // Expected => "Params: ?story=query-parameters--card-test&foo=bar"
  // Actual => "Params: ?story=query-parameters--card-test"
};

CardTest.decorators = [
  (Component) => {
    useEffect(() => {
      const url = new URL(window.location.href);
      url.searchParams.set("foo", "bar");
      history.pushState({}, "", url);
    }, []);

    return (
      <>
        <Component />
      </>
    );
  },
];

However, in this case as well, it seems challenging to capture the URL query parameters after the component has changed. Most React components that use query parameters are likely expected to obtain their value at the initial rendering with useEffect(() => {}, []). But, there are cases where these changes may not be ready at the time of this acquisition.

I want your opinion.

[tajo]

useEffect(() => {
  setQueryParams(location.search);
}, [location.search]);

would fix that?

[cm-dyoshikawa]

Good point, thank you. I'll create the PR.