Documentation for Devtools for Hookstate (released: @hookstate/devtools)

avkonst commented 4 years ago

Here is the prototype of devtools. It injects to Hookstate as a standard plugin, which submits state changes to Redux DevTools. Should I finalise it? Please comment / react to express your interest.

Here is the screenshot:

avkonst commented 4 years ago

You can try it here online: https://hookstate.js.org/ Just install Redux DevTools Chrome Extension and reload the page.

rolivegab commented 4 years ago

I really love hookstate, and i use it in all my personal projects. I'll love to use Redux DevTools with hookstate, and for me, its a game change feature.

avkonst commented 4 years ago

@ppwfx , @rolivegab , @praisethemoon

FYI: DevTools plugin has been release. See how to use

avkonst commented 4 years ago

Documentation is coming.

Supports:

remote state monitoring: current and historical changes
pause/unpause state monitoring
exporting state from development tools
automated "replay state updates" on app reload
logs when states are created and destroyed
zero impact on production performance, (can be turned on per state for production app without modifying the app)
monitoring can be enabled per state without coding, i.e. from the development tools
can trigger rerender without state updates from the development tools
can set the state (including deeply nested states) remotely from the development tools
can trigger remote breackpoints per state on state updates
can assign states named aliases for discovery in devtools
DevTools(yourStateLink).log('you message', yourData) logs custom messages and data per state to the Development tools (appears in the sequence of state updates in the development tools).

avkonst commented 4 years ago

@ppwfx , @rolivegab , @praisethemoon

I appreciate if you try it in your app and provide some feedback. Thanks

avkonst commented 4 years ago

@weekien, @chasm could you please try the development tools for hookstate too and provide some feedback?

praisethemoon commented 4 years ago

@avkonst Very good news! I will give it a try.

chasm commented 4 years ago

Will check them out.

rolivegab commented 4 years ago

It worked for me on Chromium, using create-react-app boilerplate. But not on firefox:

Also, i couldn't make it work with Next.js, even in chromium.

avkonst commented 4 years ago

Firefox is easy to fix. Will fix it today. What is the problem with next.js?

rolivegab commented 4 years ago

The problem is that Next.js is server-side rendering. So, there's no localStorage, or window, or document on server-side.

But, even when i try to load the script only on frontend side, the redux devtools doesn't observe storage changes.

I'll upload a minimalistic repo for you, reproducing the problem, probably tomorrow.

And thanks by the attention!

avkonst commented 4 years ago

Firefox is fixed. Server side rendering is fixed too.

avkonst commented 4 years ago

Released in @hookstate/devtools 1.7.5 . @rolivegab , please have a try.

fortezhuo commented 4 years ago

Hi. I got error like this (Stacks : NextJS, React Native Web)

window is not defined
ReferenceError: window is not defined
    at DevToolsInit (/Users/forte/Workspace/freedom/node_modules/@hookstate/devtools/src/DevTools.ts:26:10)
    at Object.<anonymous> (/Users/forte/Workspace/freedom/node_modules/@hookstate/devtools/src/DevTools.ts:271:2)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.@hookstate/devtools (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/external "@hookstate/devtools":1:1)
    at __webpack_require__ (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/webpack/bootstrap:27:1)
    at Module.../../node_modules/@freedom/client-core/devtools.ts (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/Users/forte/Workspace/freedom/node_modules/@freedom/client-core/devtools.ts:1:1)
    at __webpack_require__ (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/webpack/bootstrap:27:1)
    at Module../pages/index.tsx (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/pages/index.tsx:1:1)
    at __webpack_require__ (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/webpack/bootstrap:27:1)
    at Object.4 (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/index.js:174:18)
    at __webpack_require__ (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/webpack/bootstrap:27:1)
    at /Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/webpack/bootstrap:122:1
    at Object.<anonymous> (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/index.js:127:10)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)

avkonst commented 4 years ago

Is it the error on client side or server side? I believe I fixed server-side for nextjs....

On Thu, Apr 2, 2020 at 8:22 PM Forte Zhuo notifications@github.com wrote:

Hi. I got error like this (Stacks : NextJS, React Native Web)

window is not defined ReferenceError: window is not defined at DevToolsInit (/Users/forte/Workspace/freedom/node_modules/@hookstate/devtools/src/DevTools.ts:26:10) at Object. (/Users/forte/Workspace/freedom/node_modules/@hookstate/devtools/src/DevTools.ts:271:2) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.@hookstate/devtools (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/external "@hookstate/devtools":1:1) at webpack_require (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/webpack/bootstrap:27:1) at Module.../../node_modules/@freedom/client-core/devtools.ts (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/Users/forte/Workspace/freedom/node_modules/@freedom/client-core/devtools.ts:1:1) at webpack_require (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/webpack/bootstrap:27:1) at Module../pages/index.tsx (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/pages/index.tsx:1:1) at webpack_require (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/webpack/bootstrap:27:1) at Object.4 (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/index.js:174:18) at webpack_require (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/webpack/bootstrap:27:1) at /Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/webpack:/webpack/bootstrap:122:1 at Object. (/Users/forte/Workspace/freedom/client/ssr/.next/server/static/development/pages/index.js:127:10) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/avkonst/hookstate/issues/38#issuecomment-607668853, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA6JSVNDGYZ4RDBDZRSBLGTRKQ4LFANCNFSM4KSID5PA .

fortezhuo commented 4 years ago

Is it the error on client side or server side? I believe I fixed server-side for nextjs....

On server side.

03:44 nextjs-hookstate (master) yarn dev  
yarn run v1.22.4
warning package.json: No license field
$ node ./server.js
[ ready ] compiled successfully
[ wait ]  compiling ...
> Ready on http://localhost:3000
[ ready ] compiled successfully
[ event ] build page: /next/dist/pages/_error
[ wait ]  compiling ...
[ ready ] compiled successfully
[ event ] build page: /
[ wait ]  compiling ...
[ ready ] compiled successfully
ReferenceError: window is not defined
    at DevToolsInit (/Users/forte/Workspace/nextjs-hookstate/node_modules/@hookstate/devtools/dist/index.js:778:10)
    at Object.<anonymous> (/Users/forte/Workspace/nextjs-hookstate/node_modules/@hookstate/devtools/dist/index.js:1022:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)

I have created small repo for investigation

https://github.com/fortezhuo/nextjs-hookstate

avkonst commented 4 years ago

Thanks for the reproducer. I have fixed it in @hookstate/devtools version 1.7.6.

fortezhuo commented 4 years ago

@avkonst Thanks for your quick response.

I have tried and no errors occurs. But I still don't get how the devtools works.

While I try to reload hookstate page, the devtools shows "unmonitored" like below screenshot

And I have tried the devtools on my prev repo. I run "yarn dev" and click link to redirect from "/" to "/a" It shows globalstate set value, but no localstate inspected

Then I will reload the page with url http://localhost:3000/a

For investigation, I have pushed the same repo

avkonst commented 4 years ago

Documented here: https://hookstate.js.org/docs/devtools

avkonst / hookstate

Documentation for Devtools for Hookstate (released: @hookstate/devtools) #38