Skip to content

skn437/skn-elysia-html-types

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

1 Commit
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

SKN Elysia.js HTML Type Extension Library

Elysia HTML

TypeScript

NPM Version MIT License

ย 

Introduction:

This is a simple TypeScript Type Extension Library for Elysia.js HTML

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

ย 

Details:

JSXChildrenProps Interface

  • As the name suggests, it is an interface for JSX props holding children property
  • For usage instruction, see Usage section

JSXBasicProps Interface

  • An interface that extends JSXChildrenProps
  • In addition to children property, it holds lang, desc, kwd, title, icn properties
  • This interface is good for HTML meta info
  • For usage instruction, see Usage section

JSXComponent Type

  • This type definition is for JSX Component
  • It takes a Generic type as its props type
  • Returns a JSX component
  • For usage instruction, see Usage section

JSXComponentNoProps Type

  • As the name suggests, this type definition is just like JSXComponent but without props
  • It does not need a Generic type as it has no props
  • Returns a JSX component
  • For usage instruction, see Usage section

ย 

Use Case:

  • Elysia.js
  • Elysia.js HTML

ย 

Requirements:

This library has peer dependency for Elysia.js 1.2.25. It may or may not work on 2.x

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

ย 

Usage:

To install the package, type the following in console

npm add -D @best-skn/elysia-html-types
#or
yarn add -D @best-skn/elysia-html-types
#or
pnpm add -D @best-skn/elysia-html-types
#or
bun add -D @best-skn/elysia-html-types

Create a directory called types in the root location of your project, and create a file called elysia.d.ts, then do this

import "@best-skn/elysia-html-types";

Check your tsconfig.json if includes property has **/*.ts, **/*.tsx or not otherwise the type definition file may not work

Now Inside your Elysia.js Project, use the package like this (Just an example)

JSXChildrenProps Type:

For any JSX Component, do the following

import { Html, type JSXChildrenProps, type JSXComponent } from "@elysiajs/html";

const HomeRoute: JSXComponent<JSXChildrenProps> = (props) => {
  const { children } = props;

  return (
    <div>{children}</div>
  );
};

export default HomeRoute;

JSXBasicProps Type:

For any kinds of JSX Component, do the following

import { Html, type JSXBasicProps, type JSXComponent } from "@elysiajs/html";

const BaseHtml: JSXComponent<JSXBasicProps> = (props) => {
  const { children, lang, desc, kwd, title, icn } = props;

  return (
    <html lang={lang}>
      <head>
        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta name="description" content={desc ?? "Elysia Web Application"} />

        <meta name="keywords" content={kwd ?? "Elysia, Bun, TypeScript"} />

        <title>{title ?? "Elysia App"}</title>

        <link rel="icon" href={icn ?? "/public/icons/logo.svg"} />
      </head>

      <body>
        <main>{children}</main>
      </body>
    </html>
  );
};

export default BaseHtml;

JSXComponent Type:

For your JSX Component, do the following

import { Html, type JSXChildrenProps, type JSXComponent } from "@elysiajs/html";

const HomeRoute: JSXComponent<JSXChildrenProps> = (props) => {
  const { children } = props;

  return (
    <div>{children}</div>
  );
};

export default HomeRoute;

JSXComponentNoProps Type:

For JSX Component, do the following

import { Html, type JSXComponentNoProps } from "@elysiajs/html";

const HomeRoute: JSXComponentNoProps = () => (<div>Hello from Elysia!</div>);

export default HomeRoute;

ย 

Dedicated To:

  • ๐Ÿ‘ฉโ€โš•๏ธTanjila Hasan Trina: The long lost love of my life. The course of nature separated us from our paths and put us in separate places far away from each other. But no matter how separated we are right now, each and every moment of mine is only dedicated to you. We may not see each other in this lifetime as it seems but I will find you again in the next life. I just want to say: ไธ–็•Œใฏๆฎ‹้…ทใ  ใใ‚Œใงใ‚‚ๅ›ใ‚’ๆ„›ใ™ใ‚ˆ
  • ๐Ÿ’ฏMy Parents: The greatest treasures of my life ever.

ย 

License:

Copyright (C) 2024 SKN Shukhan

Licensed under the MIT License

About

A Simple Type Definition Extension Library For Elysia.js HTML

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages