dotnet-websharper / mvu Goto Github PK
View Code? Open in Web Editor NEWModel-View-Update architecture for WebSharper client-side applications.
Home Page: https://dotnet-websharper.github.io/mvu/
License: Apache License 2.0
Model-View-Update architecture for WebSharper client-side applications.
Home Page: https://dotnet-websharper.github.io/mvu/
License: Apache License 2.0
The url it's failing on is https://nuget.pkg.github.com/dotnet-websharper/index.json
When I try it in the browser it prompts for creds.
It may sound like a trivial question, but if you go over documentation, Templates, etc
there is no clear answer - how to create a new empty MVU project you can start working on?
If there is not a specific template for MVU applications, which of the existing 6 templates would be a good starting point?
No page navigation occurs.
I see that there is a second Var<Model>
created for the Pager
, living in parallel with the Var<Model>
in the App
instance and this is causing the problem: the Pager.Doc
is watching this second Var
which is never changing from initial state.
As a quick fix, I am removing this duplication and tie the Pager
to the app.View
Hi,
I'm new to Websharper, so maybe my question will be super easy, that case, all the better :-)
I'm using Websharper.Mvu, with F#.
And now I am trying to integrate auth0 authentication.
I wrap the auth0 javascript library like this (some details left out for brevity):
module Authentication
type Auth()=
[<Name("isAuthenticated")>]
[<Stub>]
member this.IsLoggedIn(): Promise<bool>= X<_>
[<Name("loginWithRedirect")>]
[<Stub>]
member this.Login(options: LoginOptions): Promise<unit>= X<_>
[<Name("logout")>]
[<Stub>]
member this.Logout(options: LogoutOptions): Promise<unit>= X<_>
[<Name("handleRedirectCallback")>]
[<Stub>]
member this.finishLogin() : Promise<unit>= X<_>
[<Direct("createAuth0Client($options)")>]
let create(options: CreateOptions): Promise<Auth>= X<_>
let setup domain clientId=
async {
let! a= create({Domain= domain; ClientId=clientId}).AsAsync()
// ...
}
When I add a button Setup
and bind its click event to a message, then I can do in my update
function
let update msg (state: State) : Action<Message, State> =
match msg with
// ...
| SetupAuth ->
CommandAsync (fun _ -> Authentication.setup "myDomain" "myClientId")
So far so good. But actually I want to trigger this upon application startup. And I can't seem to find a way
to dispatch a message without binding it to a JS-event.
Another example is finishLogin()
:
When auth0 is done with login, it calls a configured callback route. I got routing set up like this:
let Main () =
let router = Router.Infer<Site.Route>()
App.CreatePaged (Site.init()) Site.update Site.pageFor
|> App.WithCustomRouting router Site.routeForState Site.goto
// ...
with
module Site
let goto (route: Route) (state: State) : State =
match route with
| Welcome -> {state with Route=route; Screen= WelcomeScreen}
// ...
| AuthLoggedIn ->
// HERE
state
let routeForState state = state.Route
In the AuthLoggedInBranch
, I'd like to trigger a call to Authentication.finishLogin()
.
So again, I'd like to fire a message LoginFinished
or similar to which I could react in my update
function like this:
match msg with
// ...
| LoginFinished ->
CommandAsync (fun _ -> Authentication.finishLogin())
So, in both cases it's really the same question:
how can I fire/dispatch a message from within code, instead of from JS-events?
While I'm pretty sure the answer must be simple, I've been looking at the samples in github, at trywebsharper examples, googling for two weekends now (this is my personal hobby project, so I get to work on it only on the weekends), without any success.
So, please, can anyone help or provide me with a pointer to relevant documentation/samples/info?
Many thanks,
Mark
Update: so by looking into the code here, in App.fs, I found that I can solve the first issue I mention by using WithInitMessage
, but that still does not solve the more general question.
In case anyone interested I ported the WebSharper MVU Counter & CounterList example to C#.
https://github.com/zpodlovics/KPTech.WS.Mvu.CSharp.Counter
https://github.com/zpodlovics/KPTech.WS.Mvu.CSharp.CounterList
We need a function to wrap an action from a child update in a parent update, see https://forums.websharper.com/topic/87100:
module Action =
let rec Map (wrapMsg: 'ChildMessage -> 'ParentMessage)
(currentModel: 'ParentModel)
(wrapModel: 'ParentModel -> 'ChildModel -> 'ParentModel)
(unwrapModel: 'ParentModel -> 'ChildModel)
(action: Action<'ChildMessage, 'ChildModel>)
: Action<'ParentMessage, 'ParentModel> =
match action with
| DoNothing -> DoNothing
| SetModel childModel -> UpdateModel (fun parent -> wrapModel parent childModel)
| UpdateModel f -> UpdateModel (fun parent -> unwrapModel parent |> f |> wrapModel parent)
| Command cmd -> Command (fun dispatch -> cmd (wrapMsg >> dispatch))
| CommandAsync cmd -> CommandAsync (fun dispatch -> cmd (wrapMsg >> dispatch))
| CombinedAction actions -> CombinedAction (List.map (Map wrapMsg currentModel wrapModel unwrapModel) actions)
// Use:
let update msg (state: State) : Action<Message, State> =
match msg with
| TagListMessage m ->
let updatedTagList= Tags.update m state.TagList
SetModel {state with TagList=updatedTagList}
| AuthMessage m ->
Authentication.update m state.UserInfo
|> Action.Map AuthMessage state (fun s i -> { s with UserInfo = i }) (fun s -> s.UserInfo)
We could also provide a "magic" macro, somewhat similar to Lens
, that would allow passing this:
|> Action.MagicMap AuthMessage state.UserInfo
and would expand to the same as above:
|> Action.Map AuthMessage state (fun s i -> { s with UserInfo = i }) (fun s -> s.UserInfo)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.