Create Vue framework sdk

[aasoni]

1. Example for react sdk:
   https://github.com/clockworklabs/SpacetimeDB/tree/master/crates/bindings-typescript/src/react
   This should be the same but s/react/vue/

2. We should also have a Vue quickstart here: http://spacetimedb.com/docs/quickstarts/vue. See docs PR to see example of react quickstart: Misc docs and small CLI improvements #3953

3. We should also create a template here: https://github.com/clockworklabs/SpacetimeDB/tree/master/templates/vue-ts

[aasoni]

PR: #4037

[nitori]

As this issue is still open, I'll post it here. If you want me to make a new issue, I can do that.

I think there is some issue with the onDisconnect handler in that framework.

    onDisconnectCallback = (
      ctx: ErrorContextInterface<RemoteModuleOf<DbConnection>>
    ) => {
      state.isActive = ctx.isActive;
    };

from my tests with the example from the template, this code does not actually set the state.isActive state to false, but to true. It seems the ctx.isActive is still true for a little bìt during the callback call.

Adding my own onDisconnect handler I see the first one printing true, the second one printing false.

const onDisconnect = (ctx) => {
  console.log("isActive 1!", ctx.isActive);
  window.requestAnimationFrame(() => {
    console.log("isActive 2!", ctx.isActive);
  });
};

To test that, I had a simple server side connection refusal depending on the jwt issuer (based on this example):

#[spacetimedb::reducer(client_connected)]
pub fn connect(ctx: &ReducerContext) -> Result<(), String> {
    let jwt = ctx
        .sender_auth()
        .jwt()
        .ok_or("Authentication required".to_string())?;

    if jwt.issuer() != "https://auth.spacetimedb.com/oidc" {
        return Err("Invalid issuer".to_string());
    }

    if !jwt.audience().iter().any(|a| a == "client_xxxxxxxxxxxxxxxxxxxxx") {
        return Err("Invalid audience".to_string());
    }
    Ok(())
}

Greetings.