SPA example does not compile 🐛

[array-in-a-matrix]

Describe the bug 🐛
The SPA example using routes does not build.

Error:

An error was occurred when compiling main
stack trace: (most recent call last)
routing.nim(426, 30)     pathParams
routing.nim(317, 16)     pathParamsBoilerplate
exceptions.nim(30, 3)    throwDefect
/home/.../app/src/main.nim(4, 1) template/generic instantiation of `pathParams` from here
/home/.../.local/share/nimble/pkgs/happyx-2.0.0/happyx/core/exceptions.nim(30, 3) Error: unhandled exception:
Unhandled exception HpxPathParamDefect in /home/.../app/src/main.nim(6, 4)
Invalid path param type:
type
int
optional
mutable
default = 100 [HpxPathParamDefect]

To Reproduce 👨‍🔬

1. create SPA app, hpx create --kind=SPA --name=app (with or without tailwindcss)
2. replace main.nim with the SPA example from the documentation:

import happyx

# declare path params
pathParams:
  paramName:  # assign param name
    type int  # param type
    optional  # param is optional
    mutable  # param is mutable variable
    default = 100  # default param value is 100


appRoutes "app":
  # Use paramName
  "/<paramName>":
    echo paramName

3. compile, hpx dev.

Expected behavior 🤔
Successful compilation and a development website hosted at localhost.

Screenshots 🖼
If applicable, add screenshots to help explain your problem.
N/A

Please complete the following information 📃

• OS: Arch Linux
• OS Version: Rolling release
• HappyX version: HappyX 3.7.1
• HappyX project type: SPA

• Nim version: Tried v2.0.0 and v2.0.2
• Browser: Firefox
• Browser Version: 121.0 64-bit (from Arch Linux repositories)

Additional context ✌
Add any other context about the problem here.

[Ethosa]

Please use this way instead

# declare path params
pathParams:
  paramName int:  # assign param name with `int` type
    optional  # param is optional
    mutable  # param is mutable variable
    default = 100  # default param value is 100

I'll fix this in docs

[array-in-a-matrix]

Not sure if I should open a new issue as this is somewhat related.

import happyx

# declare path params
pathParams:
  paramName int:  # assign param name
    optional  # param is optional
    mutable  # param is mutable variable
    default = 100  # default param value is 100

appRoutes "app":
  "/":
    "hello"
  "/<paramName>":
    {paramName}

The path / works and returns hello as expected but trying /24 or any other value does not work. The browser just loads infinitely. Am I doing something incorrect or is this a bug?

[Ethosa]

How you launch it?
Just nim js src.nim or hpx dev?

[Ethosa]

Started with hpx dev

[array-in-a-matrix]

Oh! You are suppose to keep the #/. I was trying 127.0.0.1:5000/35 instead of 127.0.0.1:5000/#/35.
Thank you for your help! Awesome project!

[veksha]

@Ethosa , quick question: why #/ is needed? can it be removed?

[Ethosa]

@veksha #/ needed only in SPA

[veksha]

@Ethosa i see it in SPA, i just don't know why it is there. maybe we can remove it somehow?

[Ethosa]

@veksha I think that it can be removed with History API, but why?

[array-in-a-matrix]

@Ethosa It leads to confusion and makes links longer than necessary.

[Ethosa]

@veksha @array-in-a-matrix Ok, in next commit this possible

[Ethosa]

Small note: this will possible only with -d:historyApi

[array-in-a-matrix]

Wow a quick change! Thank you!