Creating Web Apps Following on from <a class="issue-link js-issue-

The route matching could be simplified from: <div class="highlight highlight-sourc

How do route parameters work? Should it be defined in <code class="n

Given the changes in <a aria-label="Issue #3" class="issue-link js-issue-link" data-er

And routing could be done like: <div class="highlight highlight-source-ts notransl

Creating Web Apps about wool HOT 4 OPEN

woolts commented on September 2, 2024

Creating Web Apps

from wool.

Comments (4)

lsjroberts commented on September 2, 2024

The route matching could be simplified from:

Type.matchOn(model[Browser.routeKey], {
  '/': () => el([], text`Welcome`),
  '/with-params': ({ greeting }) => el([], text`${greeting}`),
}),

to:

Browser.router(model, {
  '/': () => ...,
  '/with-params': ({ greeting }) => ...,
})

from wool.

lsjroberts commented on September 2, 2024

How do route parameters work?

Should it be defined in Browser.router? Or do routes need to be configured beforehand?

Browser.router(model, {
  '/with-params/:greeting': ({ greeting }) => ...,
})

from wool.

lsjroberts commented on September 2, 2024

Given the changes in #3, the messages would look like:

const Msg = Type.custom({
  SetGreeting: [Type.string],
});

Input.button([], {
  onPress: Maybe.just(Msg.SetGreeting('Bonjour')),
  label: el([], text`Change greeting`),
}),

const update = (msg, model) => Msg.match(msg, {
  SetGreeting: (greeting) => ({ greeting }),
});

from wool.

lsjroberts commented on September 2, 2024

And routing could be done like:

const Routes = Type.custom({
  Home: ['/'],
  WithParam: ['/with-param', Type.string],
});

Browser.router(Routes, model, {
  Home: () => {},
  WithParam: (greeting) => {},
});