Développement

description: Advanced State management without Redux, Mobs, or Stencil State Tunnel.

Example with Stencil.js v0.16.x .

Root Component

import { Component } from '@stencil/core';export interface User {
  name: string;
}
@Component({
  tag: 'app-root'
})
export class AppRoot {
  postService: PostService;
  @State() user: User;
  constructor(){
    this.postService = new PostService();
  }
  signOut = () => {
      this.user = null;
    }
  signIn = () => {
      this.user = { name: "Pablo" }
    }
  render() {
    return (
      <div>
        <header>
          <h1>Stencil App Starter</h1>
        </header>
        { this.user && <span> Your are connected {this.user.name}. </span> }
        <main>
          <stencil-router>
            <stencil-route-switch scrollTopOffset={0}>
              <stencil-route url='/' component='app-home' exact={true} />
              <stencil-route url='/profile' component='app-profile' componentsProps={{user: this.user, signIn : this.signIn, signOut : this.signout }}/>
            </stencil-route-switch>
          </stencil-router>
        </main>
      </div>
    );
  }
}

Profile Page

import { Component, Prop } from '@stencil/core';
@Component({
  tag: 'app-profile'
})
export class AppProfile {
  @Prop() user: User;
  @Prop() signIn: Function;
  @Prop() signOut: Function;
  render() {
      return (
        <div class="app-profile">
          <p>
            Hello! My name is {this.user && this.user.name}. My name was passed in
            through a @Prop!
          </p>
          <button onClick={this.signIn}>Sign In</button>
          <button onClick={this.signOut}>Sign Out</button>
        </div>
      );
  }
}

Resources :

Real world example application built with Stencil.js :

https://github.com/hcavalieri/stencil-realworld-app

description : Attendre que la callback enregistrer dans onAuthStateChanged soit appelé avant

d’initialiser l’application. Permet d’éviter le déclenchement trop tôt d’une
routeGuard redirection si User non connecté.

Date publication : 28/10/2019

Version : Stencil.js v1.X

Solution pour éviter qu’au rechargement de la page que l’utilisateur soit rediriger vers la page de connexion. Alors que l’utilisateur est encore connecté. On attends juste que la callback soit au moins appelé une fois pour vérifier que l’utilisateur est bien à null ou présent.

Exemple d’implémentation avec Stenciljs. La documentation de Stencil suggère de retourner une Promise dans la méthode componentWillLoad() afin d’être sur que les données soit chargées avant le rendu du composant.

app-root.tsx

import { Component, State, h, Prop, } from '@stencil/core';import { User } from '../models/user';
import { PrivateRoute } from '../commons/utils';
declare var firebase: firebase.app.App
@Component({
  tag: 'app-root'
})
export class AppRoot {
  @State() user: User;
  componentWillLoad() {
    return new Promise((resolve) => {
      firebase.auth().onAuthStateChanged((user) => {
        this.injectUser(user);
        resolve();
      });
    })
  }
  injectUser = (user) => {
    if (user) {
      this.defaultProps = Object.assign({}, { user: user })
    } else {
      this.defaultProps =Object.assign({ user: undefined });
    }
  }
  render() {
    return (
      [
          <stencil-route-switch >
            <stencil-route componentProps={{user: this.user}} url='/' component='app-home' exact={true} />
            <stencil-route componentProps={{user: this.user}} url='/sign-in' component='app-sign-in' />
            <stencil-route componentProps={{user: this.user}} url='/sign-up' component='app-sign-up' />
            <PrivateRoute url='/profile' componentProps={{user: this.user}} component='app-profile' />
          </stencil-route-switch>
        </stencil-router>
      ]
    );
  }
}

utils.tsx

import { h } from "@stencil/core";
/**
 * <https://github.com/ionic-team/stencil-router/wiki/Enforce-authentication-for-some-routes>
*/
export const PrivateRoute = ({ component, ...props}: { [key: string]: any}) => {
    const Component = component;
    const redirectUrl = props.failureRedirect || '/sign-in';
    return (
      <stencil-route {...props} routeRender={
        (props: { [key: string]: any}) => {
          if (props.user) {
            return <Component {...props} {...props.componentProps}></Component>;
          }
          return <stencil-router-redirect url={redirectUrl}></stencil-router-redirect>
        }
      }/>
    );
  }