hooks.macro icon indicating copy to clipboard operation
hooks.macro copied to clipboard

Create a debug/trace facility

Open yuchi opened this issue 5 years ago • 0 comments

Since this is a macro, there’s little to no way to trace which references are placed in the inputs array.

An initial proposal syntax could be this:

function MyComponent() {
  const { magnitude } = props;
  const [counter, setCounter] = useState();
  const handleClick = useAutoCallback(event => {
    setCounter(counter * magnitude);
  }, trace);
  // ↑↑↑↑↑
}

Which would output (on every render):

MyComponent › handleClick › useAutoCallback inputs: { counter: 0, magnitude: 4 }
  ┬             ┬             ┬                       ─┬──────────────────────
  │             │             │                        │
  │             │             └─ name of the macro     └─ identifier name and
  │             │                                         value for each input
  │             │
  │             └─ eventual name of the resulting variable
  └─ name of the outer significant scope

yuchi avatar Nov 29 '18 22:11 yuchi