{"_id":"tilg","_rev":"3-c988cc6ff9b1d839bbffb00d5861f4a1","name":"tilg","dist-tags":{"latest":"0.1.1"},"versions":{"0.0.1":{"name":"tilg","version":"0.0.1","description":"A tiny logger.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/shuding/tilg.git"},"author":{"name":"Shu Ding"},"license":"MIT","bugs":{"url":"https://github.com/shuding/tilg/issues"},"homepage":"https://github.com/shuding/tilg#readme","gitHead":"9e7ca96cac38fa43f01d7fa648121b95f013e944","_id":"tilg@0.0.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-xs0ngZ6rh14J0S6eslo49c97Cl91XClHy1ILxO2KW2Ahp/8VYRAatSbugUyXoboMhNvsOXXCEkO9iPSCIO7vUg==","shasum":"9785915c3eb7d2d8c2339370836032aba0abd151","tarball":"https://registry.npmjs.org/tilg/-/tilg-0.0.1.tgz","fileCount":2,"unpackedSize":449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtjgCCRA9TVsSAnZWagAAuzgP/jhD/yg4IssBLpmwMvmn\nxG3IoPyW75+bb5FdxEAXLhWMnHbKyQj5J9AXUWa1rsz9QzCm1dKWw+NE+xnZ\nqbpjxdi/TgXiXrby0V3fDq54Huz15EUeGvFMgCvYXMbn1nTzJmMhC8UnWkhr\nNQ+jvb6u6AXFijkysDfqKhRNQneolfPpGMLqYaWba5BP+4mCn357FpCjBO1G\nOILxaOexvI3wiFYIMLbcMIeApD/2Xlnr6qXNyZqxPD39Xoda6yJ9VES7vHfx\n9v1bKXKSpIEh1P8AA9KrkI6RXSKIpOcsnYKp8XQcWRRdkoCqOw2NvZJjFRdL\nHqUlxb+sX6Sdh8IFdiNEpQw59u8i/MXflySn3B6nIO0MLZlxkuRIZeGFTynz\nZpQb5n7frvmEBiPP7b9xZPxinY8rLJw/ZfkIO3AITiw7J1Q6a9F4p9Za5nH5\ncEmh2UuHeLm53LBLFe/TFrlFbz6R08h2+of/gOTlbEDolms/cnq9cHYUFn4u\nvm5geYTnWAPMxkyEws/rE29GJo/6VbGGaj/XKW42AIULtbKypLr3JWkvSKcj\niK85oc9/752wpxvNHlP4+FwY4VtnPDud4fWWAw/I4vIhG7jl5y7STA7DmyMR\nSJzXlaLtwWGEN57KIM0UiI9cP73dD3R/UarcFyo86CF7eu5OcNxQi6dKEWHC\npSuq\r\n=1TSC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHpJ2aKP0sG72CVQ94ObnErTI9F1MpPS4y4DEFzqeYfgIhANcPA9pAMKjlThtchehDVRCgGRfTo2zJgOrcZvg+t1rM"}]},"_npmUser":{"name":"quietshu","email":"ds303077135@gmail.com"},"directories":{},"maintainers":[{"name":"quietshu","email":"ds303077135@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tilg_0.0.1_1639331842214_0.24381650812683886"},"_hasShrinkwrap":false},"0.1.0":{"name":"tilg","version":"0.1.0","description":"A tiny logger hook for debugging React components.","keywords":["react","react hook","logger","debug"],"main":"index.js","types":"dist/development.d.ts","scripts":{"build":"pnpm build:dev && pnpm build:prod","build:dev":"tsup src/development.ts --dts --env.NODE_ENV development","build:prod":"tsup src/production.ts --env.NODE_ENV production","coverage":"vitest run --coverage","test":"vitest"},"repository":{"type":"git","url":"git+https://github.com/shuding/tilg.git"},"author":{"name":"Shu Ding"},"license":"MIT","bugs":{"url":"https://github.com/shuding/tilg/issues"},"homepage":"https://github.com/shuding/tilg#readme","devDependencies":{"@types/node":"^17.0.23","@types/react":"^18.0.0","@types/react-test-renderer":"^17.0.1","react":"^18.0.0","react-test-renderer":"^18.0.0","tsup":"^5.12.4","typescript":"^4.6.3","vitest":"^0.9.2"},"peerDependencies":{"react":"^18.0.0 || ^17.0.0"},"gitHead":"9e7ca96cac38fa43f01d7fa648121b95f013e944","_id":"tilg@0.1.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-VA//j5vI+mGhP4goMCUfzvZ8Iizwh01GAhDcsnyqnaGPcJTSEVx2BuaK+yTmz+x1BiaQfLogamYj4xH0SUCLnQ==","shasum":"fba06e23c09c8ea75f956fd23522cdc53c766568","tarball":"https://registry.npmjs.org/tilg/-/tilg-0.1.0.tgz","fileCount":7,"unpackedSize":21910,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRTaAfl4blZ9VV5h3M4n94/+qyOQnEzGBcc9i10QRz8AIhANQel6aTUbumcSigRxDCjMauFBqzksthEx3adCn1veDI"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUzW8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9Wg/9HoTWmREA0VX16fzfZbQaEpwpwyDJqXEefeu65L9xb9PGOknW\r\nueYbrZoYYuC4UhnNtq3X2OBkTSswK5Bc1WVZxfPihWXI1w8hOn7Jmo1UWph8\r\nlT7eYh0g1CzD9KxhiUlReP7AY4jaO9NSGf4FD7ZfDot/S+VeUp7Fy/82yct5\r\nunpNDUoPNiwnTmUMWPmKm0Gj8QfFHePqdmNmXr/5zV2N8m848kjyOfa58q2C\r\nYTtAhcZC7dV77pDatdapFzJjbkvxEZ7Kxrq4vVBza8n1qZt0PST03v7kx/Yn\r\nUEAUj4cukPn0TXEj85rIbpkmmTqv+jfMvYN7Iyj2YwI82+N30Bb617nUHwDI\r\n8qiP0dgnxPUuLKek+PUXXfDLln9ue2B4Q5Ur5kttCUf5dCXwceve1/Fl67xW\r\ngR/UH0O274Mt/LI0z3fu8zhzsGHpF9kR2ifquDI+4oPmhJ8Coyjg57VqVrtb\r\nYldylpuUKHq/71PJxADL8ew2qyQA5hkFb7ua79lRxzHQfphI69WrfCpsJERl\r\nVUWSFJYQ+/A8HGQtG2KdTbA20mjAGbfDmLFUDZ8Ic8HOhHF8QwtgXGpIQqAL\r\nJyW0yN1EDYReo/VEecvsmwHCctjBxeWDJrWUwcquH6oK18KGp7JbyjDNZa1Q\r\nhdngkcWC1ml0ruXHXWT+Apn7M7sZWI1vQB8=\r\n=rMBp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"quietshu","email":"g@shud.in"},"directories":{},"maintainers":[{"name":"quietshu","email":"g@shud.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tilg_0.1.0_1649620412819_0.2267364513667376"},"_hasShrinkwrap":false},"0.1.1":{"name":"tilg","version":"0.1.1","description":"A tiny logger hook for debugging React components.","keywords":["react","react hook","logger","debug"],"main":"index.js","types":"dist/development.d.ts","scripts":{"build":"pnpm build:dev && pnpm build:prod","build:dev":"tsup src/development.ts --dts --env.NODE_ENV development","build:prod":"tsup src/production.ts --env.NODE_ENV production","coverage":"vitest run --coverage","test":"vitest"},"repository":{"type":"git","url":"git+https://github.com/shuding/tilg.git"},"author":{"name":"Shu Ding"},"license":"MIT","bugs":{"url":"https://github.com/shuding/tilg/issues"},"homepage":"https://github.com/shuding/tilg#readme","devDependencies":{"@types/node":"^17.0.23","@types/react":"^18.0.0","@types/react-test-renderer":"^17.0.1","react":"^18.0.0","react-test-renderer":"^18.0.0","tsup":"^5.12.4","typescript":"^4.6.3","vitest":"^0.9.2"},"peerDependencies":{"react":"^18.0.0 || ^17.0.0"},"gitHead":"dabdeae01723702eba4cfab6a4c9773bc9444320","_id":"tilg@0.1.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-0uHyTAUM0tJL792LeviRPFkJtCbF6Za3/hbbnRmWGUaicOhbJ0IpvBViXiXTF7nk6R0L6vve2XLesQzn5jEVng==","shasum":"22dfcd5ce81a305faba9a7285f555c1e09b72afb","tarball":"https://registry.npmjs.org/tilg/-/tilg-0.1.1.tgz","fileCount":7,"unpackedSize":22498,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCk/KcqdMK9INOw2OZalL4nLbhZZZIdBlURuJGjWBCjhQIgYOzuEMkDewWbkT0evgaeaHhD5JnMoqSmYyCgAd3BfMg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWd4oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaTg//S5206CpaYcLgHRgUzwp4SNlINJB+zvnIeWzglzGjpdpOPsJM\r\nQKS7enb7EQS90JQ1phmx/NT2QPIgvb96/qgzSiU80lncFBUxxc0mdYqP/at3\r\nljSPHUB+epBB7K6eTL4HmVni9wqsPDTewnFAOrfD7WR9Mbls1g+R84co4sFk\r\nj6JJ11b44nNRn6guekp+zhg52jrUQPSiljqQS42aWDXT/a8UgEospNKyJ4ji\r\nkNqG4NSPADLWnvKbc7Q15gfTAKWPXbK0NDQzi+HjwmkawsFEm2tXDoh/SDNM\r\n4bMtoEiFN7uxtca8N1bl9pl3fQEIQeTc8/5smLHZTo26MVx6pIBNGkEAnD5I\r\nCBVDeCnVHvm4mEKBlsXr5+yRQaoItWyi5+qHylO1y5RELLkX8REzLvsKB01h\r\n3Y3uIlbys4fEpd2BOWi1uDhynup+aPuyLRNuNeeVFB37XWRmcoPeqXLCsJw7\r\nEXHFHlMX6QRg7KKNmgsw13u9TWu1CinYhbQN1U8bO82kPg8Qjox7OWxs6tuf\r\n64lnyhBLN9PU/cW/Z1R+SewXbA1YPzWtkkJJlIInWpn3YcIR2+1m7B+EMFyj\r\nngS7kri2Z5HEHxKZyonoBGvfHNPgKztveHkKjhLJGa6Zn8r9UI4C+1lRIppf\r\n4QyoQm2v/9EZTBiBPSN9AMMD7OtCch+SCOQ=\r\n=GmLg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"quietshu","email":"g@shud.in"},"directories":{},"maintainers":[{"name":"quietshu","email":"g@shud.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tilg_0.1.1_1650056743947_0.08800326005577297"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-12T17:57:22.213Z","0.0.1":"2021-12-12T17:57:22.365Z","modified":"2022-05-21T20:37:27.280Z","0.1.0":"2022-04-10T19:53:32.966Z","0.1.1":"2022-04-15T21:05:44.095Z"},"maintainers":[{"name":"quietshu","email":"g@shud.in"}],"description":"A tiny logger hook for debugging React components.","homepage":"https://github.com/shuding/tilg#readme","repository":{"type":"git","url":"git+https://github.com/shuding/tilg.git"},"author":{"name":"Shu Ding"},"bugs":{"url":"https://github.com/shuding/tilg/issues"},"license":"MIT","readme":"# `useTilg`\n\n**Tiny Logger** is a magical React Hook to help you debug your components.\n\nYou can quickly try out the [**demo**](https://codesandbox.io/s/usetilg-3kdtz8?file=/src/App.js:274-359).\n\n<br/>\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Features](#features)\n  - [Lifecycle Events (What)](#1-lifecycle-events-what)\n  - [Component Name and Props (Who)](#2-component-name-and-props-who)\n  - [Debug Message (Why)](#3-debug-message-why)\n  - [What Has Changed? (Why)](#4-what-has-changed-why)\n  - [Quick Logs (Why)](#5-quick-logs-why)\n- [Advanced Features](#advanced-features)\n  - [Markdown](#markdown)\n  - [Return Original Value](#return-original-value)\n  - [Auto Deduplication](#auto-deduplication)\n  - [CLI Support](#cli-support)\n- [FAQ & Caveats](#faq--caveats)\n\n<br/>\n\n## Installation\n\nThe package is released as `tilg`, use:\n\n```sh\nnpm i tilg\n```\n\nto install it with npm. Or you can choose another package manager.\n\n<br/>\n\n## Features\n\n### 1. Lifecycle Events (What)\n\nSimply insert the `useTilg()` hook into the component, and it will log the **render**, **mount**, **unmount** events in the console:\n\n```jsx\nimport useTilg from 'tilg'\n\nfunction MyButton() {\n  useTilg()\n  return <button>Click me</button>\n}\n```\n\n<p align=center>\n  <img width=\"650\" alt=\"lifecycle event logs\" src=\"/screenshots/life-cycle-events.png\">\n  <br/>\n  <i>Logs of render and mount events.</i>\n</p>\n\n\n### 2. Component Name and Props (Who)\n\nYou might noticed that it also displays the **name** and **props** of the component, which is very helpful for debugging.\n\n```jsx\nimport useTilg from 'tilg'\n\nfunction MyButton({ text }) {\n  useTilg()\n  return <button>{text}</button>\n}\n\nfunction Title({ children }) {\n  useTilg()\n  return <h1>{children}</h1>\n}\n\nexport default function Page() {\n  return (\n    <>\n      <Title>Welcome!</Title>\n      <MyButton text='foo' />\n      <MyButton text='bar' />\n    </>\n  )\n}\n```\n\nWhen there’re multiple elements of the same component being rendered, it adds a counter `<MyButton/> (2)` for distinguishing so you know **who** is logging the information:\n\n<p align=center>\n  <img width=\"650\" alt=\"information logs\" src=\"/screenshots/info.png\">\n  <br/>\n  <i>Information of the logged components.</i>\n</p>\n\n\n### 3. Debug Message (Why)\n\nAnother critical thing is to know why does a component re-renders. `useTilg` gives you a simple but powerful API for this:\n\n```jsx\nimport { useState } from 'react'\nimport useTilg from 'tilg'\n\nfunction Counter() {\n  const [count, setCount] = useState(0)\n  \n  useTilg()`count = ${count}`\n  \n  return <button onClick={() => setCount(count + 1)}>{count}</button>\n}\n```\n\nWhen appending a [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to the `useTilg()` call, it will also be displayed as the debug message:\n\n```jsx\nuseTilg()`count = ${count}`\n```\n\n<p align=center>\n  <img width=\"650\" alt=\"debug message\" src=\"/screenshots/message.gif\">\n  <br/>\n  <i>Logs of “count = ?”.</i>\n</p>\n\nYou can know where the message is from, too:\n\n<p align=center>\n  <img width=\"650\" alt=\"trace\" src=\"/screenshots/trace.png\">\n  <br/>\n  <i>Trace of the message and a link to the code location.</i>\n</p>\n\n### 4. What Has Changed? (Why)\n\nSomething troubles me a lot when debugging a component is, it’s sometimes hard to know which state has changed and triggered a re-render. `useTilg` tracks all the arguments in the debug message and tells you **which one has changed since the previous render**:\n\n```jsx\nimport { useState } from 'react'\nimport useTilg from 'tilg'\n\nfunction MyApp() {\n  const [input, setInput] = useState('')\n  const [count, setCount] = useState(0)\n\n  useTilg()`input = ${input}, count = ${count}`\n\n  return (\n    <>\n      <input onChange={(e) => setInput(e.target.value)} value={input} />\n      <button onClick={() => setCount(count + 1)}>{count}</button>\n    </>\n  )\n}\n```\n\n<p align=center>\n  <img width=\"650\" alt=\"changed argument\" src=\"/screenshots/changed.png\">\n  <br/>\n  <i>A hint for the updated part.</i>\n</p>\n\n\n### 5. Quick Logs (Why)\n\nIf you don't need a debug message but only want to quickly log some values, just pass them to the hook directly:\n\n```jsx\nimport { useState } from 'react'\nimport useTilg from 'tilg'\n\nfunction MyApp() {\n  const [input, setInput] = useState('')\n  const [count, setCount] = useState(0)\n\n  useTilg(input, count)\n\n  return (\n    <>\n      <input onChange={(e) => setInput(e.target.value)} value={input} />\n      <button onClick={() => setCount(count + 1)}>{count}</button>\n    </>\n  )\n}\n```\n\n<p align=center>\n  <img width=\"650\" alt=\"value without message\" src=\"/screenshots/bare.png\">\n  <br/>\n  <i>Debug values quickly.</i>\n</p>\n\n\n<br/>\n\n## Advanced Features\n\n### Markdown\n\nYou can use Markdown's code (`` ` ``), italic (`_` or `*`), and bold (`__` or `**`) syntax in your debug message to make it look nicer:\n\n```jsx\nfunction MyApp() {\n  const [count, setCount] = useState(0)\n\n  useTilg()`**Debug**: \\`count\\` = _${count}_.`\n\n  return <button onClick={() => setCount(count + 1)}>{count}</button>\n}\n```\n\n<p align=center>\n  <img width=\"650\" alt=\"markdown syntax\" src=\"/screenshots/markdown.png\">\n  <br/>\n  <i>Markdown syntax in log messages.</i>\n</p>\n\n\n### Return Original Value\n\nThe `useTilg()` hook also returns its **first argument**, or the **first value** in the template if specified, so you can quickly debug something in-place by wrapping it with `useTilg()`:\n\n```diff\n  function MyApp() {\n    const [count, setCount] = useState(0)\n\n    return <button onClick={() => setCount(count + 1)}>{\n+     useTilg(count)\n    }</button>\n  }\n```\n\n\n<p align=center>\n  <img width=\"650\" alt=\"return original value\" src=\"/screenshots/return-value.png\">\n  <br/>\n  <i>Log and return the original value.</i>\n</p>\n\n\n### Auto Deduplication\n\nEven if you have multiple `useTilg()` hooks in the same component, the lifecycle events will only be logged once per component:\n\n```jsx\nfunction MyApp() {\n  const [input, setInput] = useState('')\n  const [count, setCount] = useState(0)\n\n  useTilg()\n  useTilg()`input = ${input}`\n  useTilg()`count = ${count}`\n\n  return (\n    <>\n      <input onChange={(e) => setInput(e.target.value)} value={input} />\n      <button onClick={() => setCount(count + 1)}>{count}</button>\n    </>\n  )\n}\n```\n\n<p align=center>\n  <img width=\"650\" alt=\"deduplication\" src=\"/screenshots/deduplication.png\">\n  <br/>\n  <i>Render, mount, and unmount events will not be duplicated even if you have multiple useTilg() hooks.</i>\n</p>\n\n### CLI Support\n\nIf you are running your component during SSR, or running server-side tests, `useTilg()` properly outputs the result in Node.js CLI too:\n\n```jsx\nfunction App() {\n  const [count, setCount] = useState(42)\n  \n  useTilg()`The answer is ${{ answer: count }}`\n\n  return <button onClick={() => setCount(count + 1)}>{count}</button>\n}\n```\n\n<p align=center>\n  <img width=\"962\" alt=\"deduplication\" src=\"/screenshots/cli.png\">\n  <br/>\n  <i>Node.js CLI output.</i>\n</p>\n\n<br/>\n\n## FAQ & Caveats\n\n- **Is it safe to ship code with `useTilg` to production?**  \n  Although `useTilg()` does nothing in a production build (`process.env.NODE_ENV === 'production'`) but only an empty function, I encourge you to remove the hook from the source code after finishing development your component.\n\n- **How do you implement this hook? What can I learn from the code?**  \n  It is very hacky. Don't rely on it or try it in production, or [you will be fired](https://github.com/facebook/react/blob/0568c0f8cde4ac6657dff9a5a8a7112acc35a748/packages/react/index.js#L35).\n  \n- **Why not design the API as `` useTilg`message` ``?**  \n  Then it will not be identified as a hook, React Refresh and HMR will not work correctly.\n\n<br/>\n\n## License\n\nThe MIT License (MIT).\n","readmeFilename":"README.md","keywords":["react","react hook","logger","debug"]}