@best-skn/elysia-html-types

v1.0.1

Published

4 months ago

A Simple Type Definition Extension Library For Elysia.js HTML

Downloads

0High
0Medium
0Low

skn437

elysia type library html jsx typescript bun

SKN Elysia.js HTML Type Extension Library

TypeScript

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

💀 Minimum elysia Version: 1.2.25
💀 Minimum @elysiajs/html Version: 1.2.0

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:

👩‍🎨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.
💯My Parents: The greatest treasures of my life ever.

License:

Licensed under the MIT License

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

SKN Elysia.js HTML Type Extension Library

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

JSXBasicProps Interface

JSXComponent Type

JSXComponentNoProps Type

Use Case:

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

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

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

JSXBasicProps Type:

For any kinds of JSX Component, do the following

JSXComponent Type:

For your JSX Component, do the following

JSXComponentNoProps Type:

For JSX Component, do the following

Dedicated To:

License:

`JSXChildrenProps` Interface

`JSXBasicProps` Interface

`JSXComponent` Type

`JSXComponentNoProps` Type

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

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

`JSXChildrenProps` Type:

`JSXBasicProps` Type:

`JSXComponent` Type:

`JSXComponentNoProps` Type: