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

"/": 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
 <!-- For SPA Projects -->
 - 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!