zthxxx / react-dev-inspector

jump to local IDE code directly from browser React component by just a simple click
https://react-dev-inspector.zthxxx.me
MIT License
1.16k stars 68 forks source link

feat: sideEffects false for treeshaking #29

Closed Zhouhaimei closed 3 years ago

Zhouhaimei commented 3 years ago

I replaced the render of react-dom as follows:

import React from 'react';
import { Inspector, InspectorProps } from 'react-dev-inspector';
import { render } from 'react-dom';

const InspectorWrapper = process.env.NODE_ENV === 'development' ? Inspector : React.Fragment;

/**
 * 包裹页面根节点后,按 control + shift + command + c 开启 debug 热键,点击页面元素即可跳转至代码所在处
 *
 * @param childNode
 * @param rootNode
 * @param config
 */
const inspectRender = (childNode: React.ReactNode, rootNode: HTMLElement | null, config: InspectorProps = {}) =>
  render(<InspectorWrapper {...config}>{childNode}</InspectorWrapper>, rootNode);

export default inspectRender;

I hope that webpack's tree-shaking can take effect when building is in production。 Thank you very much for your support, if there are other better ways can you guide me?

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/zthxxx/react-dev-inspector/5s1uiZgAhiSiE5FpTpXHBaWAu1mj
✅ Preview: https://react-dev-inspector-git-fork-zhouhaimei-master-zthxxx.vercel.app

zthxxx commented 3 years ago

@Zhouhaimei thanks, but some conflicts need you to resolve

image

zthxxx commented 3 years ago

@Zhouhaimei I resolved conflicts, and published on react-dev-inspector@1.5.2