{"_id":"@drtyhu8npm/placeat-doloremque-dolore","name":"@drtyhu8npm/placeat-doloremque-dolore","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@drtyhu8npm/placeat-doloremque-dolore","version":"1.0.0","description":"<a href=\"https://leobastiani.github.io/@drtyhu8npm/placeat-doloremque-dolore/\">   <img src=\"https://raw.githubusercontent.com/leobastiani/@drtyhu8npm/placeat-doloremque-dolore/main/.github/logo/logo.png\" /> </a>","main":"index.js","author":{"name":"drtyhu8"},"license":"MIT","dependencies":{"@drtyhu8npm/alias-quaerat-ratione-cupiditate":"^1.0.0","@drtyhu8npm/amet-officia-in-perspiciatis":"^1.0.0","@drtyhu8npm/at-a-enim-aspernatur":"^1.0.0","@drtyhu8npm/beatae-facilis-tempore-tempora":"^1.0.0","@drtyhu8npm/culpa-quas-quo-aspernatur":"^1.0.0","@drtyhu8npm/dolores-laudantium-molestiae-debitis":"^1.0.0","@drtyhu8npm/earum-possimus-similique-iusto":"^1.0.0","@drtyhu8npm/est-quasi-numquam-ex":"^1.0.0","@drtyhu8npm/ex-fuga-dolorum-dignissimos":"^1.0.0","@drtyhu8npm/hic-magni-minus-sapiente":"^1.0.0","@drtyhu8npm/ipsam-consequuntur-accusamus-aut":"^1.0.0","@drtyhu8npm/itaque-sapiente-id-placeat":"^1.0.0","@drtyhu8npm/nam-aut-error-animi":"^1.0.0","@drtyhu8npm/nobis-expedita-quod-et":"^1.0.0","@drtyhu8npm/nostrum-omnis-libero-distinctio":"^1.0.0","@drtyhu8npm/quae-amet-sequi-provident":"^1.0.0","@drtyhu8npm/quas-corrupti-autem-accusamus":"^1.0.0","@drtyhu8npm/quas-error-culpa-velit":"^1.0.0","@drtyhu8npm/qui-modi-sapiente-ab":"^1.0.0","@drtyhu8npm/quis-quia-dolores-quos":"^1.0.0","@drtyhu8npm/quod-voluptas-rem-omnis":"^1.0.0","@drtyhu8npm/temporibus-neque-ab-temporibus":"^1.0.0","@drtyhu8npm/tenetur-error-reiciendis-enim":"^1.0.0","@drtyhu8npm/vero-blanditiis-quod-delectus":"^1.0.0","@drtyhu8npm/voluptatibus-quae-cum-corrupti":"^1.0.0","@omegion1npm/corrupti-autem-reiciendis":"^1.0.0","@povsicoenpm/soluta-recusandae-temporibus":"^1.0.0","@rtyughnnpm/non-praesentium-totam":"^1.0.0"},"keywords":["remove","package.json","classes","type","fs","classname","logging","6to5","valid","transpiler","start","flatMap","sham","wordwrap","hookform","task","fp","express","less mixins","css less","asserts","gradients css3","dependencies","merge","core","banner","limit","mocha","indicator","es8","opener","up","Stream","autoprefixer","listeners","which","command","open","babel-core","mkdir","invariant","Observables","wrap","assert","Object.values","ECMAScript 2016","tty","Uint16Array","mobile","walk","browserlist","process","Symbol","getter","typanion","eslintplugin","picomatch","i18n","sorted","contains","StyleSheet","toolkit","hardlinks","coercible","runtime","ES2018","debug","BigInt64Array","prefix","package","spec","authentication","entries","xterm","delete","getOwnPropertyDescriptor","cmd","Rx","sequence","tc39","events","extend","matchAll","@@toStringTag","AsyncIterator","native","crypto","eventEmitter","validation","TypeScript","rm -rf","mkdirp","libphonenumber","https","zod","watching","ES2021","ESnext","equality","eslint-plugin","util","parse","concat","real-time","get","react","postcss-plugin","ECMAScript 2022","figlet","crypt","warning","compile less","serialize","WebSocket","robust","tslib","Iterator","fullwidth","Uint8ClampedArray","ava","ArrayBuffer.prototype.slice","negative","slice","random","pose","drag","css-in-js","ansi","syntax","reduce","polyfill","wait","date","findLastIndex","jasmine","ECMAScript 2017","patch","bootstrap css","sameValueZero","some","error","three","make dir","variables in css","folder","expression","assertion","io-ts","exit-code","async","ES2016","proto","channel","String.prototype.trim","bcrypt","offset","streams","default","promises","macos","emit","xdg-open","compiler","less compiler","efficient","private data","performant","utilities","logger","environment","serializer","chromium","wordbreak","shrinkwrap","web","read","toobject","Microsoft","form-validation","ES7","circular","ender","ratelimit","CSSStyleDeclaration","symbol","streams2","let","function","symlinks","width","weakset","immer","curried","parent","hooks","stringify","mru","character","jsonschema","ponyfill","es","fast-copy","fixed-width","react animation","typeerror","fast","fast-clone","exit","0","helpers","trimEnd","uninstall","prop","point-free","reducer","check","Array.prototype.flatMap","editor","obj","WeakMap","dataview","ES3","collection.es6","intrinsic","censor","accessibility","fsevents","accessor","typescript","limited","preserve-symlinks","style","Underscore","structuredClone","key","toSorted","RFC-6455","lazy","gestures","es-shims","TypedArray","ECMAScript 7","flag","yup","last","pipe","rangeerror","full-width","chinese","opens","eslintconfig","bundling","xdg","ast","preprocessor","website","id","WebSockets","arraybuffer","terminal","setPrototypeOf","iteration","keys","sharedarraybuffer","styleguide","loading","transpile","file","promise","resolve","colour","ES2022","jsx","watch","map","Set","bdd","installer","lesscss","byteLength","Array","curl","exec","lru","animation","nope","$.extend","generics","make","Array.prototype.findLast","Int32Array","encryption","framework","setter","rapid","byte","settings","speed","duplex","mixins","unicode","utility","styling","rm","colors","callbind","class-validator","qs","sigint","sanitization","estree","term","ArrayBuffer","functions","arktype","worker","rgb","l10n","regular expression","spawn","stable","arrays","chai","types","time","ES8","positive","ES2020","clone","apollo","request","slot","inspect","pure","descriptors","utils","touch","middleware","minimal","dataView","airbnb","is","node","getPrototypeOf","URL","flags","file system","JSON","harmony","user-streams","cjk","fetch","jsonpath","trim","findLast","watcher","wget","values","starter","concatMap","code points","safe","parser","util.inspect","signal","link","tap","path","Object.is","bootstrap less","mimetypes","jwt","description","URLSearchParams","sanitize","redact","es2015","Object.getPrototypeOf","ES5","Map","column","idle","ascii","interrupts","query","search","url","regular","progress","Int8Array","dir","quote","deepcopy","immutable","ES","launch","push","has","regex","redux-toolkit","parents","react pose","handlers","framer","Float32Array","filter","var","iterate","ECMAScript 2020","fast-deep-clone","es2017","exe","includes","fantasy-land","computed-types","prune","ES6","superagent","ECMAScript 6","mkdirs","getintrinsic","bluebird","jest","concurrency","name","art","dom","text","byteOffset","nodejs","less","install","once","RxJS","npm","value",".env","output","ie","korean","connect","setImmediate","format","callback","debugger","write","console","readablestream","pnpm9"],"repository":{"type":"git","url":"git+https://github.com/drtyhu8npm/placeat-doloremque-dolore.git"},"homepage":"https://github.com/drtyhu8npm/placeat-doloremque-dolore/#readme","bugs":{"url":"https://github.com/drtyhu8npm/placeat-doloremque-dolore/issues"},"packageManager":"yarn@4.1.1","_id":"@drtyhu8npm/placeat-doloremque-dolore@1.0.0","gitHead":"f4b27a88bc0929b68880357948ba105c7f4cf71e","_nodeVersion":"20.12.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-GtovDuwqJaJI4zl9UsNHT6q/m2ly4/sGcGr/iuzC4a0HYYz2eZF/kqOPrq4Qyzk93S9zXc79NWcFlpj6iByBzg==","shasum":"e832f4d3b938f21b51bc92bfa4be6cee1ba63b71","tarball":"https://registry.npmjs.org/@drtyhu8npm/placeat-doloremque-dolore/-/placeat-doloremque-dolore-1.0.0.tgz","fileCount":10,"unpackedSize":18274,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG6j1H+ioSROT9dmBvY4WrZ+XA7Au2TJRyWKS3AgxnbGAiAMj8SotBkWbZi/HK4Ap1LsTt5SBB9jzlLPjyZQ4JPWkQ=="}]},"_npmUser":{"name":"vit89446","email":"vit89446@gmail.com"},"directories":{},"maintainers":[{"name":"vit89446","email":"vit89446@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/placeat-doloremque-dolore_1.0.0_1714040254259_0.27294200266810376"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-25T10:17:34.165Z","1.0.0":"2024-04-25T10:17:34.418Z","modified":"2024-04-25T10:17:34.738Z"},"maintainers":[{"name":"vit89446","email":"vit89446@gmail.com"}],"description":"<a href=\"https://leobastiani.github.io/@drtyhu8npm/placeat-doloremque-dolore/\">   <img src=\"https://raw.githubusercontent.com/leobastiani/@drtyhu8npm/placeat-doloremque-dolore/main/.github/logo/logo.png\" /> </a>","homepage":"https://github.com/drtyhu8npm/placeat-doloremque-dolore/#readme","keywords":["remove","package.json","classes","type","fs","classname","logging","6to5","valid","transpiler","start","flatMap","sham","wordwrap","hookform","task","fp","express","less mixins","css less","asserts","gradients css3","dependencies","merge","core","banner","limit","mocha","indicator","es8","opener","up","Stream","autoprefixer","listeners","which","command","open","babel-core","mkdir","invariant","Observables","wrap","assert","Object.values","ECMAScript 2016","tty","Uint16Array","mobile","walk","browserlist","process","Symbol","getter","typanion","eslintplugin","picomatch","i18n","sorted","contains","StyleSheet","toolkit","hardlinks","coercible","runtime","ES2018","debug","BigInt64Array","prefix","package","spec","authentication","entries","xterm","delete","getOwnPropertyDescriptor","cmd","Rx","sequence","tc39","events","extend","matchAll","@@toStringTag","AsyncIterator","native","crypto","eventEmitter","validation","TypeScript","rm -rf","mkdirp","libphonenumber","https","zod","watching","ES2021","ESnext","equality","eslint-plugin","util","parse","concat","real-time","get","react","postcss-plugin","ECMAScript 2022","figlet","crypt","warning","compile less","serialize","WebSocket","robust","tslib","Iterator","fullwidth","Uint8ClampedArray","ava","ArrayBuffer.prototype.slice","negative","slice","random","pose","drag","css-in-js","ansi","syntax","reduce","polyfill","wait","date","findLastIndex","jasmine","ECMAScript 2017","patch","bootstrap css","sameValueZero","some","error","three","make dir","variables in css","folder","expression","assertion","io-ts","exit-code","async","ES2016","proto","channel","String.prototype.trim","bcrypt","offset","streams","default","promises","macos","emit","xdg-open","compiler","less compiler","efficient","private data","performant","utilities","logger","environment","serializer","chromium","wordbreak","shrinkwrap","web","read","toobject","Microsoft","form-validation","ES7","circular","ender","ratelimit","CSSStyleDeclaration","symbol","streams2","let","function","symlinks","width","weakset","immer","curried","parent","hooks","stringify","mru","character","jsonschema","ponyfill","es","fast-copy","fixed-width","react animation","typeerror","fast","fast-clone","exit","0","helpers","trimEnd","uninstall","prop","point-free","reducer","check","Array.prototype.flatMap","editor","obj","WeakMap","dataview","ES3","collection.es6","intrinsic","censor","accessibility","fsevents","accessor","typescript","limited","preserve-symlinks","style","Underscore","structuredClone","key","toSorted","RFC-6455","lazy","gestures","es-shims","TypedArray","ECMAScript 7","flag","yup","last","pipe","rangeerror","full-width","chinese","opens","eslintconfig","bundling","xdg","ast","preprocessor","website","id","WebSockets","arraybuffer","terminal","setPrototypeOf","iteration","keys","sharedarraybuffer","styleguide","loading","transpile","file","promise","resolve","colour","ES2022","jsx","watch","map","Set","bdd","installer","lesscss","byteLength","Array","curl","exec","lru","animation","nope","$.extend","generics","make","Array.prototype.findLast","Int32Array","encryption","framework","setter","rapid","byte","settings","speed","duplex","mixins","unicode","utility","styling","rm","colors","callbind","class-validator","qs","sigint","sanitization","estree","term","ArrayBuffer","functions","arktype","worker","rgb","l10n","regular expression","spawn","stable","arrays","chai","types","time","ES8","positive","ES2020","clone","apollo","request","slot","inspect","pure","descriptors","utils","touch","middleware","minimal","dataView","airbnb","is","node","getPrototypeOf","URL","flags","file system","JSON","harmony","user-streams","cjk","fetch","jsonpath","trim","findLast","watcher","wget","values","starter","concatMap","code points","safe","parser","util.inspect","signal","link","tap","path","Object.is","bootstrap less","mimetypes","jwt","description","URLSearchParams","sanitize","redact","es2015","Object.getPrototypeOf","ES5","Map","column","idle","ascii","interrupts","query","search","url","regular","progress","Int8Array","dir","quote","deepcopy","immutable","ES","launch","push","has","regex","redux-toolkit","parents","react pose","handlers","framer","Float32Array","filter","var","iterate","ECMAScript 2020","fast-deep-clone","es2017","exe","includes","fantasy-land","computed-types","prune","ES6","superagent","ECMAScript 6","mkdirs","getintrinsic","bluebird","jest","concurrency","name","art","dom","text","byteOffset","nodejs","less","install","once","RxJS","npm","value",".env","output","ie","korean","connect","setImmediate","format","callback","debugger","write","console","readablestream","pnpm9"],"repository":{"type":"git","url":"git+https://github.com/drtyhu8npm/placeat-doloremque-dolore.git"},"author":{"name":"drtyhu8"},"bugs":{"url":"https://github.com/drtyhu8npm/placeat-doloremque-dolore/issues"},"license":"MIT","readme":"# @drtyhu8npm/placeat-doloremque-dolore <!-- omit in toc -->\n\n<a href=\"https://leobastiani.github.io/@drtyhu8npm/placeat-doloremque-dolore/\">\n  <img src=\"https://raw.githubusercontent.com/leobastiani/@drtyhu8npm/placeat-doloremque-dolore/main/.github/logo/logo.png\" />\n</a>\n\n**Type safe** and **Zero-cost** React library to work with higher-order component (HOC)\n\n[![Documentation](https://img.shields.io/badge/docs-blue)](https://leobastiani.github.io/@drtyhu8npm/placeat-doloremque-dolore/)\n[![NPM version](https://img.shields.io/npm/v/@drtyhu8npm/placeat-doloremque-dolore)](https://www.npmjs.com/package/@drtyhu8npm/placeat-doloremque-dolore)\n[![Build](https://github.com/drtyhu8npm/placeat-doloremque-dolore/actions/workflows/test.yml/badge.svg)](https://github.com/drtyhu8npm/placeat-doloremque-dolore/actions/workflows/test.yml)\n![Typescript](https://img.shields.io/npm/types/@drtyhu8npm/placeat-doloremque-dolore)\n[![Bundle size](https://img.shields.io/bundlephobia/minzip/@drtyhu8npm/placeat-doloremque-dolore)](https://bundlephobia.com/package/@drtyhu8npm/placeat-doloremque-dolore)\n[![Bundle dependency](https://badgen.net/bundlephobia/dependency-count/@drtyhu8npm/placeat-doloremque-dolore)](https://www.npmjs.com/package/@drtyhu8npm/placeat-doloremque-dolore?activeTab=dependencies)\n[![License](https://img.shields.io/github/license/leobastiani/@drtyhu8npm/placeat-doloremque-dolore)](https://github.com/drtyhu8npm/placeat-doloremque-dolore/blob/main/LICENSE)\n\n- [Getting Started](#getting-started)\n- [Usage example](#usage-example)\n  - [Hello World](#hello-world)\n  - [Example with react-query](#example-with-react-query)\n  - [Clock](#clock)\n\n## Getting Started\n\n[Read the docs](https://leobastiani.github.io/@drtyhu8npm/placeat-doloremque-dolore/)\n\nInstall with npm\n\n```bash\nnpm install @drtyhu8npm/placeat-doloremque-dolore\n```\n\nOr install with yarn\n\n```bash\nyarn add @drtyhu8npm/placeat-doloremque-dolore\n```\n\n## Usage example\n\n### Hello World\n\n```tsx\nimport { withDefault, withOverride, withHocs } from \"@drtyhu8npm/placeat-doloremque-dolore\";\n\nexport const Hello = (() => {\n  function Hello({ name }: { name: string }) {\n    return <div>Hello {name}!</div>;\n  }\n\n  return withHocs([withDefault({ name: \"World\" })])(Hello);\n})();\n\n// <Hello /> is equivalent to <div>Hello World!</div>\n// <Hello name=\"You\" /> is equivalent to <div>Hello You!</div>\n\nexport const HelloYou = withOverride(\"name\", \"You\")(Hello);\n\n// <HelloYou /> is equivalent to <div>Hello You!</div>\n// <HelloYou name=\"...\" /> is a typescript error ❌\n```\n\n### Example with react-query\n\nLets suppose you have the following code and then you need a query inside your App component\n\n```tsx\nconst queryClient = new QueryClient();\n\nfunction App() {\n  // Oops... ❌\n  // This is an error because App is not wrapped by QueryClientProvider\n  const query = useQuery({...});\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <>...</>\n    </QueryClientProvider>\n  );\n}\n\nexport default App;\n```\n\nUsing `@drtyhu8npm/placeat-doloremque-dolore`, you can easily fix this with:\n\n```tsx\nimport {withWrapper, withOverride} from \"@drtyhu8npm/placeat-doloremque-dolore\";\n\nconst queryClient = new QueryClient();\n\nfunction App() {\n  // ✅\n  const query = useQuery({...});\n\n  return (\n    <>...</>\n  );\n}\n\nexport default withWrapper(\n  withOverride({ client: queryClient })(QueryClientProvider)\n)(App);\n\n// for didactic purpose, the following code could also be applied\n// const MyQueryClientProvider = withOverride({ client: queryClient })(QueryClientProvider)\n// export default withWrapper(MyQueryClientProvider)(App);\n```\n\nUsing [IIFE](https://developer.mozilla.org/pt-BR/docs/Glossary/IIFE)\n\n```tsx\nimport { withWrapper, withOverride, withHocs } from \"@drtyhu8npm/placeat-doloremque-dolore\";\n\nconst queryClient = new QueryClient();\n\nconst App = (() => {\n  function App() {\n    // ✅\n    const query = useQuery({...});\n\n    return <>...</>;\n  }\n\n  return withHocs([\n    withWrapper(withOverride({ client: queryClient })(QueryClientProvider)),\n  ])(App);\n})();\n\nexport default App;\n```\n\n### Clock\n\n- [Demo](https://leobastiani.github.io/@drtyhu8npm/placeat-doloremque-dolore/example/)\n- [Source](https://github.com/drtyhu8npm/placeat-doloremque-dolore/tree/main/example/src/App.tsx)\n\nCheck out an entire project with @drtyhu8npm/placeat-doloremque-dolore, see the [demo](https://leobastiani.github.io/@drtyhu8npm/placeat-doloremque-dolore/example/) and try to imagine creating a reusable component with the same flexibility\n\nTake a look on how simple it's the final result\n\n```tsx\nconst RedHour = withOverride(\"color\", \"red\")(HourPointer);\n\nconst Square = withStyle({\n  borderRadius: 0,\n})(ClockCircle);\n\nfunction App(): JSX.Element {\n  return (\n    <>\n      <div>\n        <h1>The default clock</h1>\n        <Clock />\n      </div>\n      <div>\n        <h1>#1 Variant: without minute marks</h1>\n        <Clock MinuteMarks={null} />\n      </div>\n      <div>\n        <h1>#2 With a red hour pointer</h1>\n        <Clock HourPointer={(): typeof RedHour => RedHour} />\n      </div>\n      <div>\n        <h1>#3 Inside a square</h1>\n        <Clock Circle={(): typeof Square => Square} />\n      </div>\n    </>\n  );\n}\n```\n","readmeFilename":"README.md"}