Skip to content

Browser extension to inspect Teaful applications

License

Notifications You must be signed in to change notification settings

teafuljs/teaful-devtools

Folders and files

NameName
Last commit message
Last commit date
Nov 27, 2021
Jan 2, 2022
Feb 17, 2025
Jan 2, 2022
Nov 29, 2021
Nov 23, 2021
Nov 23, 2021
Nov 23, 2021
Jan 2, 2022
Nov 23, 2021
Nov 27, 2021
Nov 23, 2021
Apr 27, 2022
Nov 23, 2021

Repository files navigation

Teaful

Teaful DevTools

Browser extension that allows you to inspect a Teaful store.

npm version gzip size CI Status Maintenance Status Weekly downloads GitHub Discussions: Chat With Us PRs Welcome

All Contributors

demo

Features ✨

  • Debug stores changes (when, what, where, who, how & why)
  • Modify stores
  • Dark & light mode

Getting started

  1. Install the DevTools extension

  2. Install the bridge in your app:

yarn add teaful-devtools

Tiny tiny... 😊 (~200 B)

  1. Use the bridge.

In your main file, where you have the render, you must have the teaful-devtools import at the top, before the imports of your application (components, store, etc).

import 'teaful-devtools'
import { render } from 'preact';
import App from './components/App';

render(<App />, document.getElementById('root'));
  1. Try it!

How to strip devtools from production

Most bundlers allow you strip out code when they detect that a branch inside an if-statement will never be hit. We can use this to only include teaful-devtools during development and save those precious bytes in a production build.

// Must be the first import
if (process.env.NODE_ENV==='development') {
  // Must use require here as import statements are only allowed
  // to exist at top-level.
  require("teaful-devtools");
}

import { render } from 'preact';
import App from './components/App';

render(<App />, document.getElementById('root'));

Make sure to set the NODE_ENV variable to the correct value in your build tool.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Aral Roca Gomez

🚧 πŸ’»

Steve Clay

πŸ›

This project follows the all-contributors specification. Contributions of any kind welcome!