Universal: proposal: StateTransfer

[Toxicable]

• I'm submitting a ...

- [x] feature request

• What modules are related to this Issue?

- [x] core

• What is the current behavior?
  There is no standard API for transferring state between Server and Client

• What is the expected behavior?
  Should be a standard API for transferring state

After discussing with @alxhub I have 2 possible API's for this.
Both have draft Implementations:

1

• more boilerplate in constructor
• less boilerplate after constructor

https://github.com/Toxicable/universal/tree/state-transfer/modules/state-transfer-alt

const COUNTER_STATE = 'COUNTER_STATE'

@NgModule({
  providers: [
    BrowserStateTransferModule,
  ]
})
export class AppModule{}

class MyCounterComponent {
  counter: number;
  constructor(stateManager: StateManager) {
    this.counter = this.stateManager.get(COUNTER_STATE, {counter: 0}).counter;
    this.stateManager.onSerialize(COUNTER_STATE, () => {counter: this.counter});
  }
  click() {
    this.counter++;
  }
}

2

• less boilerplate in constructor
• more boilerplate after constructor

https://github.com/Toxicable/universal/tree/state-transfer/modules/ng-transfer-state

const MY_STORE_TOKEN = new InjectionToken('MY_STORE_TOKEN');

@NgModule({
  providers: [
    BrowserStateTransferModule,
    provideStore(MY_STORE_TOKEN, 'my-store')
  ]
})
export class AppModule{}

class MyCounterComponent {
  constructor(
    @Inject(MY_STORE_TOKEN) private store: StateTransferStore<{counter: number}>
  ) {}

  click() {
    const value = this.state.get('counter') || 0;
    this.state.set('counter', value++);
  }

3

This one is an extension of 1 except with the use of decorators to track state changes
POC implementation here https://stackblitz.com/edit/statemanager-using-decorators-a3fnpu?file=app/app.component.ts

@StateTransfer
class MyCounterComponent {
  constructor(
    private stateManager: StateManager
  ) {}

  @StateProperty()
  counter = 0;

  click() {
    counter++;
  }

---

With both your ServerModule will look like:

@NgModule({
  providers: [
    ServerStateTransferModule,
  ]
})
export class ServerModule{}

[patrickmichalina]

What is the purpose of the counter?

[Toxicable]

@patrickmichalina it's an example of what some state might look like.
it can be whatever you want in your application, Http calls, user input, hide/show values.
For Demo purpose it's just a simple value that's incremented on click

[mcferren]

this would work the same on a service injectable as you demonstrate with MyCounterComponent?

[Toxicable]

@mcferren yup, it would work the same everywhere

[vikerman]

We will get something similar into core angular. Will update here with a design doc soon

[Toxicable]

done via https://github.com/angular/angular/commit/cfd9ca0d6f453decc154cc640351f5af67685510

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}