Nobody Preheats Microwaves

    react-transform-debug-inspector

    0.1.3 • Public • Published

    react-transform-debug-inspector

    React inspector tranformation function for babel-plugin-react-transform

    (this feels like more of a demo than a real thing for now, but anyway)

    Install

    $ npm i -D react-transform-debug-inspector
    

    Update your .babelrc:

      "plugins"["react-transform"],
      "extra"{
        "react-transform": [{
          "target": "react-transform-debug-inspector"
        }]
      }

    If you need advanced settings, add path to config module:

      "extra"{
        "react-transform": [{
          "target": "react-transform-debug-inspector",
          "imports": ["./debug/inspectorConfig"]
        }]
      }

    Config example:

    // import styles for json tree
    import 'style!css!react-transform-debug-inspector/debug-inspector.css';
     
    import { DevTools, LogMonitor } from 'redux-devtools/lib/react';
     
    function getReduxPanel(component) {
      // instead of plain object or literal, you can pass any component - like redux DevTools
      if (component.context.store) {
        return (
          <DevTools store={component.context.store} monitor={LogMonitor} />
        );
      }
    }
     
    let _enabled = false;
     
    export default {
      // add your custom panels ('props', 'state', 'context' by default)
      getPanels: (defaultPanels, component) => [
        ...(
          component.context.store ? [{
            name: 'redux',
            data: getReduxPanel(component)
          }] : []
        ),
        ...defaultPanels
      ],
     
      // enable or disable inspector with key binding or whatever
      enabledTrigger: enable => {
        window.addEventListener('keydown', e => {
          if (e.keyCode === 220) {
            _enabled = !_enabled;
            enable(_enabled);
          }
        });
        
        // another example: enable(location.search.indexOf('debug') !== -1)
     
        enable(_enabled);
      },
      
      // filter components that don't need inspector
      showPin: component => true
    }

    Install

    npm i react-transform-debug-inspector

    DownloadsWeekly Downloads

    15

    Version

    0.1.3

    License

    MIT

    Last publish

    Collaborators

    • alexkuz