{"_id":"@best-skn/elysia-html-types","_rev":"2-0bd6bac4602140edff63e42062997116","name":"@best-skn/elysia-html-types","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@best-skn/elysia-html-types","version":"1.0.0","keywords":["elysia","type","library","html","jsx","typescript","bun"],"author":{"url":"https://skn.best","name":"SKN Shukhan","email":"skn437physx@gmail.com"},"license":"MIT","_id":"@best-skn/elysia-html-types@1.0.0","maintainers":[{"name":"skn437","email":"skn437physx@gmail.com"}],"homepage":"https://github.com/skn437/skn-elysia-html-types#readme","bugs":{"url":"https://github.com/skn437/skn-elysia-html-types/issues"},"dist":{"shasum":"9958ffd31e9d1725d9a804e8a760f743956bf74f","tarball":"https://registry.npmjs.org/@best-skn/elysia-html-types/-/elysia-html-types-1.0.0.tgz","fileCount":4,"integrity":"sha512-eWQ/9xWfQBxQ9dIxKypYkq4heFZ2VP+KlW9TShPuZ9XwYmHhY6syMKQxBtBbS32BymxbRRHlhFOHUsJR/sb6Jw==","signatures":[{"sig":"MEUCIAaYC5OF85w5iXwEzk3a0rPNHEUs7wR2WXUPReSSHVqrAiEAtvIEjJcMIcpKBzcw6B7vz5m2SOWv98SfpXNa2+OrYOA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10385},"main":"","types":"index.d.ts","gitHead":"243f853b7b0a3d7784ac331d3437cf162c9317e7","_npmUser":{"name":"skn437","email":"skn437physx@gmail.com"},"repository":{"url":"git+https://github.com/skn437/skn-elysia-html-types.git","type":"git"},"_npmVersion":"10.9.2","description":"A Simple Type Definition Extension Library For Elysia.js HTML","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.8.2","@types/node":"^22.13.10"},"peerDependencies":{"elysia":"^1.2.25","@elysiajs/html":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/elysia-html-types_1.0.0_1742103573738_0.6666396436049473","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@best-skn/elysia-html-types","description":"A Simple Type Definition Extension Library For Elysia.js HTML","version":"1.0.1","main":"","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/skn437/skn-elysia-html-types.git"},"keywords":["elysia","type","library","html","jsx","typescript","bun"],"author":{"name":"SKN Shukhan","email":"skn437physx@gmail.com","url":"https://skn.best"},"license":"MIT","devDependencies":{"@types/node":"^22.13.10","typescript":"^5.8.2"},"peerDependencies":{"@elysiajs/html":"^1.2.0","elysia":"^1.2.25"},"_id":"@best-skn/elysia-html-types@1.0.1","gitHead":"f53a443675ceb1856bfc8d74dff7ab009b940be5","bugs":{"url":"https://github.com/skn437/skn-elysia-html-types/issues"},"homepage":"https://github.com/skn437/skn-elysia-html-types#readme","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-gO70HjPlKg/oMEca09rcjLK/DRV79GB43qK9h+7H4JERgTOTKDKy1bihNgM7HAw9YIR5BK8SpZ7fgdMVpl0dUQ==","shasum":"1e254fcdaeb76a2884640481c0e983068a00c0e3","tarball":"https://registry.npmjs.org/@best-skn/elysia-html-types/-/elysia-html-types-1.0.1.tgz","fileCount":4,"unpackedSize":10129,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCe57hVHirKHfX6zqaMgHDaG9bF5OdmN8B/lEjndh/L2gIgODaMAi726ETOxP6aI3DnmizhJxJvHFEN7Ene/pR5mU4="}]},"_npmUser":{"name":"skn437","email":"skn437physx@gmail.com"},"directories":{},"maintainers":[{"name":"skn437","email":"skn437physx@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/elysia-html-types_1.0.1_1761190042058_0.9732552221894404"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-16T05:39:33.662Z","modified":"2025-10-23T03:27:22.444Z","1.0.0":"2025-03-16T05:39:33.908Z","1.0.1":"2025-10-23T03:27:22.240Z"},"bugs":{"url":"https://github.com/skn437/skn-elysia-html-types/issues"},"author":{"name":"SKN Shukhan","email":"skn437physx@gmail.com","url":"https://skn.best"},"license":"MIT","homepage":"https://github.com/skn437/skn-elysia-html-types#readme","keywords":["elysia","type","library","html","jsx","typescript","bun"],"repository":{"type":"git","url":"git+https://github.com/skn437/skn-elysia-html-types.git"},"description":"A Simple Type Definition Extension Library For Elysia.js HTML","maintainers":[{"name":"skn437","email":"skn437physx@gmail.com"}],"readme":"# SKN Elysia.js HTML Type Extension Library\n\n<p align=\"center\">\n  <a href=\"https://elysiajs.com\" target=\"_blank\">\n  <img width=\"150px\" src=\"https://firebasestorage.googleapis.com/v0/b/skn-ultimate-project-la437.appspot.com/o/GitHub%20Library%2F16-TypeScript-SEHT.svg?alt=media&token=7fc0bcd6-ed51-4a12-beb9-30009c20eedb\" alt=\"Elysia HTML\" />\n  </a>\n</p>\n\n> TypeScript\n\n[![NPM Version](https://img.shields.io/npm/v/%40best-skn%2Felysia-html-types)](https://www.npmjs.com/package/@best-skn/elysia-html-types) [![MIT License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/license/mit)\n\n&nbsp;\n\n## **_Introduction:_**\n\n### This is a simple TypeScript Type Extension Library for Elysia.js HTML\n\n### I made this library so that I can use it in all of my Elysia.js projects without writing the same codes over and over again\n\n&nbsp;\n\n## **_Details:_**\n\n### **`JSXChildrenProps` Interface**\n\n- As the name suggests, it is an interface for JSX props holding `children` property\n- For usage instruction, see `Usage` section\n\n### **`JSXBasicProps` Interface**\n\n- An interface that extends `JSXChildrenProps`\n- In addition to `children` property, it holds `lang`, `desc`, `kwd`, `title`, `icn` properties\n- This interface is good for HTML meta info\n- For usage instruction, see `Usage` section\n\n### **`JSXComponent` Type**\n\n- This type definition is for JSX Component\n- It takes a Generic type as its props type\n- Returns a JSX component\n- For usage instruction, see `Usage` section\n\n### **`JSXComponentNoProps` Type**\n\n- As the name suggests, this type definition is just like `JSXComponent` but without props\n- It does not need a Generic type as it has no props\n- Returns a JSX component\n- For usage instruction, see `Usage` section\n\n&nbsp;\n\n## **_Use Case:_**\n\n- Elysia.js\n- Elysia.js HTML\n\n&nbsp;\n\n## **_Requirements:_**\n\n### This library has peer dependency for Elysia.js 1.2.25. It may or may not work on 2.x\n\n### This library is intended to be used in Elysia.js HTML of minimum 1.2.0. It may or may not work on 2.x\n\n- 💀 Minimum [elysia](https://www.npmjs.com/package/elysia) Version: `1.2.25`\n- 💀 Minimum [@elysiajs/html](https://www.npmjs.com/package/@elysiajs/html) Version: `1.2.0`\n\n&nbsp;\n\n## **_Usage:_**\n\n### To install the package, type the following in console\n\n> ```zsh\n> npm add -D @best-skn/elysia-html-types\n> #or\n> yarn add -D @best-skn/elysia-html-types\n> #or\n> pnpm add -D @best-skn/elysia-html-types\n> #or\n> bun add -D @best-skn/elysia-html-types\n> ```\n\n### Create a directory called `types` in the root location of your project, and create a file called `elysia.d.ts`, then do this\n\n> ```typescript\n> import \"@best-skn/elysia-html-types\";\n> ```\n\n### Check your `tsconfig.json` if `includes` property has `**/*.ts`, `**/*.tsx` or not otherwise the type definition file may not work\n\n### Now Inside your Elysia.js Project, use the package like this (Just an example)\n\n#### **_`JSXChildrenProps` Type:_**\n\n#### For any JSX Component, do the following\n\n> ```typescript jsx\n> import { Html, type JSXChildrenProps, type JSXComponent } from \"@elysiajs/html\";\n>\n> const HomeRoute: JSXComponent<JSXChildrenProps> = (props) => {\n>   const { children } = props;\n>\n>   return (\n>     <div>{children}</div>\n>   );\n> };\n>\n> export default HomeRoute;\n> ```\n\n#### **_`JSXBasicProps` Type:_**\n\n#### For any kinds of JSX Component, do the following\n\n> ```typescript jsx\n> import { Html, type JSXBasicProps, type JSXComponent } from \"@elysiajs/html\";\n>\n> const BaseHtml: JSXComponent<JSXBasicProps> = (props) => {\n>   const { children, lang, desc, kwd, title, icn } = props;\n>\n>   return (\n>     <html lang={lang}>\n>       <head>\n>         <meta charset=\"UTF-8\" />\n>\n>         <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n>\n>         <meta name=\"description\" content={desc ?? \"Elysia Web Application\"} />\n>\n>         <meta name=\"keywords\" content={kwd ?? \"Elysia, Bun, TypeScript\"} />\n>\n>         <title>{title ?? \"Elysia App\"}</title>\n>\n>         <link rel=\"icon\" href={icn ?? \"/public/icons/logo.svg\"} />\n>       </head>\n>\n>       <body>\n>         <main>{children}</main>\n>       </body>\n>     </html>\n>   );\n> };\n>\n> export default BaseHtml;\n> ```\n\n#### **_`JSXComponent` Type:_**\n\n#### For your JSX Component, do the following\n\n> ```typescript jsx\n> import { Html, type JSXChildrenProps, type JSXComponent } from \"@elysiajs/html\";\n>\n> const HomeRoute: JSXComponent<JSXChildrenProps> = (props) => {\n>   const { children } = props;\n>\n>   return (\n>     <div>{children}</div>\n>   );\n> };\n>\n> export default HomeRoute;\n> ```\n\n#### **_`JSXComponentNoProps` Type:_**\n\n#### For JSX Component, do the following\n\n> ```typescript jsx\n> import { Html, type JSXComponentNoProps } from \"@elysiajs/html\";\n>\n> const HomeRoute: JSXComponentNoProps = () => (<div>Hello from Elysia!</div>);\n>\n> export default HomeRoute;\n> ```\n\n&nbsp;\n\n## **_Dedicated To:_**\n\n- 👩‍🎨`Prodipta Das Logno` & 🧛‍♀️`Atoshi Sarker Prithula`: The two most special ladies of my life. My best wishes will always be with you two. May you two always be happy.\n- 💯`My Parents`: The greatest treasures of my life ever.\n\n&nbsp;\n\n## **_License:_**\n\nCopyright (C) 2024 SKN Shukhan\n\nLicensed under the MIT License\n","readmeFilename":"README.md"}