useParams somehow not working with Solid-router

[kunjee17]

I am trying solid-router for routing in solid application. Equivalent Typescript code works without any issue. But F# / Fable code is not working. Generated code looks all ok to me.

Here is fable code.

type SolidRouter =
    [<ImportMember("@solidjs/router"); JSX.Component>]
    static member Router(children: JSX.Element list) : JSX.Element = jsNative

    [<ImportMember("@solidjs/router"); JSX.Component>]
    static member Routes(children: JSX.Element list, ?fallback: JSX.Element) : JSX.Element = jsNative

    [<ImportMember("@solidjs/router"); JSX.Component>]
    static member Route(path : string , ``component`` : JSX.Element) : JSX.Element = jsNative

    [<ImportMember("@solidjs/router")>]
    static member useParams () : 'T = jsNative

    [<ImportMember("@solidjs/router")>]
    static member useIsRouting () : unit -> bool = jsNative

all other than useParams works without any issue.

SolidRouter.Router [
        Html.fragment [
            Html.p "Header"
            SolidRouter.Routes [
                SolidRouter.Route("/", View1())
                SolidRouter.Route("/someitem/:id?", View2())
            ]
        ]
    ]

[<JSX.Component>]
    let View2 () =
        let isRouting = SolidRouter.useIsRouting()
        printfn $"{JSON.stringify( SolidRouter.useParams())}"
        let par : {| id : string  |} = SolidRouter.useParams() 
        let id = par.id
        Html.div [
            Html.text $"Is routing {isRouting()}"
            Html.text $"Specific item with {id}"
        ]

and here is generated code.

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/dist/pages/SpecificModel.jsx");import { template as _$template } from "/node_modules/.vite/deps/solid-js_web.js?v=2764a46a";
import { insert as _$insert } from "/node_modules/.vite/deps/solid-js_web.js?v=2764a46a";
import { esm as _esm } from "/@solid-refresh";

const _tmpl$ = /*#__PURE__*/_$template(`<div></div>`, 2);

import { useParams, useIsRouting } from "/node_modules/@solidjs/router/dist/index.jsx";
import { toConsole } from "/dist/fable_modules/fable-library.4.0.0-theta-007/String.js";
export const $$registrations = {};

const _Hot$$View1 = function View1() {
  const isRouting = useIsRouting();
  toConsole(`${JSON.stringify(useParams())}`);
  const par = useParams();
  const id = par.id;
  return (() => {
    const _el$ = _tmpl$.cloneNode(true);

    _$insert(_el$, () => `Is routing ${isRouting()}`, null);

    _$insert(_el$, `Specific item with ${id}`, null);

    return _el$;
  })();
};

$$registrations._Hot$$View = {
  component: _Hot$$View,
  id: "_Hot$$View"
};

const {
  handler: _handler,
  Component: _Component
} = _esm($$registrations._Hot$$View, !!import.meta.hot);

if (import.meta.hot) import.meta.hot.accept(_mod => {
  _handler(_mod) && import.meta.hot.invalidate();
});
export const View = _Component; 

Any pointers to debug would be so helpful.

[alfonsogarciacaro]

@kunjee17 Both the binding and the generated code look fine to me, what error you were getting?

[kunjee17]

@alfonsogarciacaro no error and that was the issue. I was just getting undefined that is it. Without error I can't figure it out where I was making mistake

[alfonsogarciacaro]

Can you please tell me where did you get the undefined or provide logs from the browser dev tools? Do you have any commit that I can check out to reproduce the issue?

[kunjee17]

@alfonsogarciacaro no logs or no error. But it is working now. We can safely close this issue.

[alfonsogarciacaro]

Perfect, thanks for confirming @kunjee17!