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

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

if (process.env.NODE_ENV !== 'production') {
  require('preact/debug');
}

// Forgot to export component
import { ComponentThatDoesntExist } from './components';

// Error: Undefined component passed to createElement()
// You likely forgot to export your component or might have 
// mixed up default and named imports
<ComponentThatDoesntExist />

// Accidentally passing a JSX literal twice
const MyComponent = <div>Hello</div>;
const vnode = <MyComponent />; // Error!

// Error: Invalid type passed to createElement()
// Did you accidentally pass a JSX literal as JSX twice?

// Invalid: string ref
<div ref="myRef" /> // Error!

// Valid: function ref
<div ref={el => this.myRef = el} />

// Valid: ref object
const myRef = createRef();
<div ref={myRef} />

// Invalid: non-function event handler
<button onClick="handleClick"> // Error!

// Valid
<button onClick={handleClick}>

function BadComponent() {
  const [state, setState] = useState(0);
  
  // This creates an infinite loop!
  setState(state + 1);
  
  return <div>{state}</div>;
}

// Error: Too many re-renders. This is limited to prevent an 
// infinite loop which may lock up your browser.

// Error: Improper nesting
<table>
  <tr> // Missing <tbody>
    <td>Cell</td>
  </tr>
</table>

// Valid
<table>
  <tbody>
    <tr>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

// Error: Invalid children in <p>
<p>
  <div>Block element not allowed</div>
</p>

// Valid
<p>
  <span>Inline element is fine</span>
</p>

// Error: Nested interactive elements
<a href="/link">
  <a href="/nested">Nested link</a> // Not allowed!
</a>

<button>
  <button>Nested button</button> // Not allowed!
</button>

import PropTypes from 'prop-types';

function MyComponent({ name, age }) {
  return <div>{name} is {age} years old</div>;
}

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
};

// Error: Failed prop type: Invalid prop `age` of type `string` 
// supplied to `MyComponent`, expected `number`
<MyComponent name="John" age="25" />

function Parent() {
  return <Child />;
}

function Child() {
  return <Broken />; // Undefined component
}

// Error output includes:
//   in Child (at Child.js:5)
//   in Parent (at Parent.js:2)

npm install --save-dev @babel/plugin-transform-react-jsx-source

// .babelrc
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx-source"]
  ]
}

// Error: Hook can only be invoked from render methods
const [state, setState] = useState(0); // Outside component!

function MyComponent() {
  return <div>Valid</div>;
}

function MyComponent() {
  const value = NaN;
  
  useEffect(() => {
    // ...
  }, [value]); // Warning: Invalid argument passed to hook
  
  return <div>Component</div>;
}

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.setState({ foo: 'bar' }); // Warning!
    // Use: this.state = { foo: 'bar' }; instead
  }
}

class MyComponent extends Component {
  componentWillUnmount() {
    setTimeout(() => {
      this.forceUpdate(); // Warning: memory leak!
    }, 1000);
  }
}

// Warning: Can't call "this.forceUpdate" on an unmounted component.
// This is a no-op, but it indicates a memory leak in your application.

function MyComponent() {
  throw Promise.resolve(); // No Suspense boundary!
  return <div>Content</div>;
}

// Error: Missing Suspense. The throwing component was: MyComponent

// Fix: Wrap in Suspense
<Suspense fallback={<div>Loading...</div>}>
  <MyComponent />
</Suspense>

function List() {
  const items = ['a', 'b', 'a']; // Duplicate 'a'
  
  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li> // Warning!
      ))}
    </ul>
  );
}

// Warning: Following component has two or more children with the 
// same key attribute: "a". This may cause glitches and misbehavior 
// in rendering process.

// Server renders:
<div>Server content</div>

// Client hydrates:
<span>Client content</span>

// Error: Expected a DOM node of type "span" but found "div" 
// as available DOM-node(s), this is caused by the SSR'd HTML 
// containing different DOM-nodes compared to the hydrated one.

import { resetPropWarnings } from 'preact/debug';

beforeEach(() => {
  resetPropWarnings();
});

import {
  captureOwnerStack,
  getCurrentVNode,
  getDisplayName,
  getOwnerStack,
  setupComponentStack
} from 'preact/debug';

// Get current rendering component
const vnode = getCurrentVNode();

// Get component name
const name = getDisplayName(vnode);

// Get full component stack
const stack = getOwnerStack(vnode);

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      'preact/debug': process.env.NODE_ENV === 'production' 
        ? 'preact/debug/noop' 
        : 'preact/debug'
    }
  }
};

// vite.config.js
export default {
  resolve: {
    alias: {
      'preact/debug': process.env.NODE_ENV === 'production'
        ? 'preact/debug/noop'
        : 'preact/debug'
    }
  }
};