PatrickJS / angular-hmr

:fire: Angular Hot Module Replacement for Hot Module Reloading
https://patrickjs.com
Apache License 2.0
506 stars 45 forks source link

feat(bootstrap): Refactor bootstrap to use importState and getState methods #1

Closed MikeRyanDev closed 8 years ago

MikeRyanDev commented 8 years ago

Introduces a Store interface. Importing state and saving state happens automatically for the user. This change makes it easier to connect other state management libraries to angular2-hmr (like @ngrx/store)

PatrickJS commented 8 years ago

I like the Store interface but I don't like importState. I rather keep toJSON because it's also used for JSON.stringify so it's a standard

MikeRyanDev commented 8 years ago

Sorry it has taken me so long to get back to this, I've been out of town.

So the situation for @ngrx/store is slightly more complex in that we don't want to just preserve state on reload, we also want to preserve the action log when @ngrx/store is instrumented using @ngrx/devtools

What I want to avoid is exposing some internal APIs to our users just for the sake of interoperability. As implemented, if we added angular2-hmr support to @ngrx/devtools our users would have to wire it up like:

import { provideStore, StoreBackend } from '@ngrx/store';
import { instrumentStore, initializeDevtoolState } from '@ngrx/devtools';

function main(devtoolsState) {
  return bootstrap(App, [
    provideStore(reducer),
    instrumentStore(),
    initializeDevtoolState(devtoolsState)
  ]);
}

if ( module.hot ) {
  hotModuleReplacement(main, module, {
    storeToken: StoreBackend
  });
}

I would rather find an API that was a little more ergonomic. If we could get it down to this somehow that would be awesome:

import { provideStore } from '@ngrx/store';
import { instrumentStore, enableDevtoolsHMR, StoreBackend } from '@ngrx/devtools';

function main() {
  return bootstrap(App, [
    provideStore(reducer),
    instrumentStore(),
    enableDevtoolsHMR()
  ]);
}

if ( module.hot ) {
  hotModuleReplacement(main, module);
}
PatrickJS commented 8 years ago

@MikeRyan52 can you make an example repo of ngrx that uses webpack. I also changed the API for angular2-hmr that I need to push. Rob also mentioned that I should create a WebpackReducer to grab the current state

MikeRyanDev commented 8 years ago

Yup, here you go: https://github.com/MikeRyan52/angular2-webpack-starter

PatrickJS commented 8 years ago

@MikeRyan52 thanks!

MarkPieszak commented 8 years ago

Hope this is still getting in there someday, love ngrx :) If I can help somehow Pat let me know

PatrickJS commented 8 years ago

I changed how HMR works to use a decorator but I may end up changing the API yet again since that also has problems

PatrickJS commented 8 years ago

for right now it's best to use the except hatch provided by ngstore until Angular 2 can support short-lived apps better

PatrickJS commented 8 years ago

the new api support anything you like