[Bug]: @use-funnel/next is unable to preserve the history state

[L2HYUNN]

Package Scope

@use-funnel/next

Bug description

I reviewed the comments on the issue #63 and applied the emergency patch for @use-funnel/next to investigate further.

While the issue with reading the step property has been resolved, I noticed that the funnel doesn’t function correctly after a page refresh.

import { useFunnel } from "@use-funnel/next";

export default function Home() {
  const funnel = useFunnel<{
    start: Record<string, unknown>;
    end: Record<string, unknown>;
  }>({
    id: "hello",
    initial: {
      step: "start",
      context: {},
    },
  });

  return (
    <div className="">
      <funnel.Render
        start={({ history }) => (
          <div>
            start step
            <button type="button" onClick={() => history.push("end")}>
              next
            </button>
          </div>
        )}
        end={() => <div>end step</div>}
      />
    </div>
  );
}

After clicking the "Next" button and refreshing the page on the "End" page, it redirects back to the "Initial" page.

After that, clicking the "Next" button again does nothing, and only the query index increases.

Expected behavior

The funnel should work as expected.

To Reproduce

I used the exact example provided in the issue #63.

Environment

• next 14.2.13
• @use-funnel/next 0.0.6

import { useFunnel } from "@use-funnel/next";

export default function Home() {
  const funnel = useFunnel<{
    start: Record<string, unknown>;
    end: Record<string, unknown>;
  }>({
    id: "hello",
    initial: {
      step: "start",
      context: {},
    },
  });

  return (
    <div className="">
      <funnel.Render
        start={({ history }) => (
          <div>
            start step
            <button type="button" onClick={() => history.push("end")}>
              next
            </button>
          </div>
        )}
        end={() => <div>end step</div>}
      />
    </div>
  );
}

Possible Solution

The main reason of this issue seems to be that @use-funnel/next is unable to utilize history.state.

I checked whether history.state is supported by the page router, but as shown below, it is not yet supported.

• Possible to pass state to next/router? vercel/next.js#23991

As a result, it seems necessary to either develop a new router that combines next/router with history.state or use another browser storage solution (such as session or local storage)

I’d like to hear your thoughts on these approaches.

etc.

No response

[XionWCFM]

Even in the app router, next.js does not provide a way to use history.state, making implementation difficult.

In my personal opinion, the best approach would be to delegate the implementation of state storage to an external party.

But I'm curious what you think about moving the state store to the query string if it requires too many changes for the best approach.

The advantage of managing with query strings seems to be that you only have to consider the query string without considering the store state.

[minuukang]

We're having a similar discussion in #59.

And we want to improve it in this way. #59 (comment)

[minuukang]

This issue is solved from @use-funnel/[email protected]! Thanks for your issue ❤️

[minuukang]

0.0.7 version contained a part that used an incorrect value, which was promptly fixed in "0.0.8" 🙇🏽