New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@kitajs/html
Advanced tools
@kitajs/html - npm Package Compare versions
Comparing version 2.0.1 to 2.1.0
@@ -135,28 +135,16 @@ /// <reference path="./jsx.d.ts" /> | ||
| * | ||
| * @param {(proxy: any) => string} htmlFn | ||
| * @param {Function} htmlComponent the *clean* component to compile. | ||
| * @param {boolean} [strict=true] if we should throw an error when a property is not found. | ||
| * @param {string | undefined} [separator] the string used to interpolate and separate parameters | ||
| * @returns {function} the compiled template function | ||
| * @returns {Function} the compiled template function | ||
| * @this {void} | ||
| */ | ||
| export function compile< | ||
| P extends | ||
| | Record<string, any> | ||
| | string[] | ||
| | ((args: Record<string, string>) => JSX.Element) = {} | ||
| P extends { [K in keyof P]: K extends 'children' ? Children : string } | ||
| >( | ||
| this: void, | ||
| factory: ( | ||
| args: Record< | ||
| P extends string[] | ||
| ? P[number] | ||
| : P extends (args: infer U) => JSX.Element | ||
| ? keyof U | ||
| : keyof P, | ||
| string | ||
| > | ||
| ) => JSX.Element, | ||
| cleanComponent: Component<P>, | ||
| strict?: boolean, | ||
| separator?: string | ||
| ): typeof factory | ||
| ): Component<P> | ||
@@ -163,0 +151,0 @@ /** |
10
index.js
@@ -370,4 +370,12 @@ /// <reference path="./jsx.d.ts" /> | ||
| const isChildren = name === 'children' | ||
| let access = `args[${separator}\`${name.toString()}\`${separator}]` | ||
| // Adds support to render multiple children | ||
| if (isChildren) { | ||
| access = `Array.isArray(${access}) ? ${access}.join(${separator}\` \`${separator}) : ${access}` | ||
| } | ||
| // Uses ` to avoid content being escaped. | ||
| return `\`${separator} + (args[${separator}\`${name.toString()}\`${separator}] || ${strict ? `throwPropertyNotFound(${separator}\`${name.toString()}\`${separator})` : `${separator}\`\`${separator}`}) + ${separator}\`` | ||
| return `\`${separator} + (${access} || ${strict && !isChildren ? `throwPropertyNotFound(${separator}\`${name.toString()}\`${separator})` : `${separator}\`\`${separator}`}) + ${separator}\`` | ||
| } | ||
@@ -374,0 +382,0 @@ })) |
| { | ||
| "name": "@kitajs/html", | ||
| "version": "2.0.1", | ||
| "version": "2.1.0", | ||
| "description": "Fast and type safe HTML templates using TypeScript.", | ||
@@ -25,3 +25,3 @@ "main": "index.js", | ||
| }, | ||
| "packageManager": "pnpm@8.6.11", | ||
| "packageManager": "pnpm@8.7.5", | ||
| "engines": { | ||
@@ -28,0 +28,0 @@ "node": ">=12" |
104
README.md
@@ -40,2 +40,3 @@ <br /> | ||
| - [Base HTML templates](#base-html-templates) | ||
| - [Htmx](#htmx) | ||
| - [Compiling HTML](#compiling-html) | ||
@@ -233,16 +234,21 @@ - [Clean Components](#clean-components) | ||
| ```tsx | ||
| export const Layout = Html.compile<Html.PropsWithChildren>((p) => ( | ||
| <> | ||
| {'<!doctype html>'} | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Document</title> | ||
| {p.head} | ||
| </head> | ||
| <body>{p.children}</body> | ||
| </html> | ||
| </> | ||
| )) | ||
| export const Layout = html.compile( | ||
| (p: Html.PropsWithChildren<{ head: string }>) => ( | ||
| <> | ||
| {'<!doctype html>'} | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1.0" | ||
| /> | ||
| <title>Document</title> | ||
| {p.head} | ||
| </head> | ||
| <body>{p.children}</body> | ||
| </html> | ||
| </> | ||
| ) | ||
| ) | ||
@@ -264,2 +270,38 @@ const html = ( | ||
| ### Htmx | ||
| The usage of [htmx.org](https://htmx.org/) is super common with this project, this is why we also provide type definitions for all HTMX attributes. | ||
| You just need to `import '@kitajs/html/htmx'>` at the top of your main.ts file and you will be able to use all HTMX attributes. | ||
| ```tsx | ||
| import '@kitajs/html/htmx' | ||
| import '@kitajs/html/register' | ||
| const html = ( | ||
| // Type checking and intellisense for all HTMX attributes | ||
| <div hx-get="/api" hx-trigger="click" hx-target="#target"> | ||
| Click me! | ||
| </div> | ||
| ) | ||
| ``` | ||
| It can also be included in your `tsconfig.json` to enable intellisense and type checking for all HTMX attributes. | ||
| ```json | ||
| { | ||
| "compilerOptions": { | ||
| "types": ["node_modules/@kitajs/html/htmx"] | ||
| } | ||
| } | ||
| ``` | ||
| Or with a triple slash directive: | ||
| ```tsx | ||
| /// <reference types="@kitajs/html/htmx.d.ts" /> | ||
| ``` | ||
| <br /> | ||
| ## Compiling HTML | ||
@@ -275,7 +317,7 @@ | ||
| function Component(props: PropsWithChildren<{ name: string }>) { | ||
| function Component(props: Html.PropsWithChildren<{ name: string }>) { | ||
| return <div>Hello {props.name}</div> | ||
| } | ||
| compiled = Html.compile<typeof Component>(Component) | ||
| const compiled = Html.compile<typeof Component>(Component) | ||
@@ -285,3 +327,3 @@ compiled({ name: 'World' }) | ||
| compiled = Html.compile((p) => <div>Hello {p.name}</div>) | ||
| const compiled = Html.compile((p) => <div>Hello {p.name}</div>) | ||
@@ -295,3 +337,3 @@ compiled({ name: 'World' }) | ||
| ```tsx | ||
| compiled = Html.compile((t) => { | ||
| const compiled = Html.compile((t) => { | ||
| // THIS WILL NOT print 123, but a string used by .compile instead | ||
@@ -450,4 +492,4 @@ console.log(t.asd) | ||
| - 2023-09-11T00:53:49.607Z | ||
| - Node: v18.16.0 | ||
| - 2023-09-11T06:33:17.036Z | ||
| - Node: v20.6.0 | ||
| - V8: 10.2.154.26-node.26 | ||
@@ -461,13 +503,13 @@ - OS: darwin | ||
| | ------ | ------------ | ---------- | ----- | ---------- | ---------------- | -------------- | | ||
| | 10 | 0.0063ms | 0.0107ms | 1.68x | 0.0013ms | 5.07x | 8.53x | | ||
| | 10000 | 1.632ms | 4.848ms | 2.97x | 0.9131ms | 1.79x | 5.31x | | ||
| | 100000 | 9.4629ms | 19.367ms | 2.05x | 2.3115ms | 4.09x | 8.38x | | ||
| | 10 | 0.0111ms | 0.0149ms | 1.34x | 0.0071ms | 1.56x | 2.1x | | ||
| | 10000 | 1.389ms | 4.3509ms | 3.13x | 0.5962ms | 2.33x | 7.3x | | ||
| | 100000 | 9.6386ms | 25.7452ms | 2.67x | 2.6383ms | 3.65x | 9.76x | | ||
| ## Many Props | ||
| | Runs | @kitajs/html | typed-html | + | .compile() | + / @kitajs/html | + / typed-html | | ||
| | ------ | ------------ | ----------- | ----- | ---------- | ---------------- | -------------- | | ||
| | 10 | 0.4629ms | 1.3898ms | 3x | 0.0025ms | 182.19x | 547.04x | | ||
| | 10000 | 372.5842ms | 840.7459ms | 2.26x | 0.6308ms | 590.66x | 1332.84x | | ||
| | 100000 | 3438.7935ms | 7706.0509ms | 2.24x | 3.7163ms | 925.32x | 2073.56x | | ||
| | Runs | @kitajs/html | typed-html | + | .compile() | + / @kitajs/html | + / typed-html | | ||
| | ------ | ------------ | ------------ | ----- | ---------- | ---------------- | -------------- | | ||
| | 10 | 0.8359ms | 2.4209ms | 2.9x | 0.0041ms | 203.88x | 590.46x | | ||
| | 10000 | 654.4648ms | 1696.169ms | 2.59x | 1.0713ms | 610.91x | 1583.28x | | ||
| | 100000 | 6022.4039ms | 13676.7311ms | 2.27x | 4.9011ms | 1228.79x | 2790.54x | | ||
@@ -478,5 +520,5 @@ ## Big Component | ||
| | ------ | ------------ | ----------- | ----- | ---------- | ---------------- | -------------- | | ||
| | 10 | 0.3075ms | 0.8844ms | 2.88x | 0.0037ms | 81.99x | 235.85x | | ||
| | 10000 | 222.5096ms | 521.0473ms | 2.34x | 0.7118ms | 312.61x | 732.02x | | ||
| | 100000 | 2211.6316ms | 5229.3416ms | 2.36x | 4.1123ms | 537.82x | 1271.65x | | ||
| | 10 | 0.4776ms | 1.0979ms | 2.3x | 0.0052ms | 91.85x | 211.13x | | ||
| | 10000 | 411.6375ms | 987.0599ms | 2.4x | 1.2778ms | 322.15x | 772.47x | | ||
| | 100000 | 3986.7891ms | 9863.4924ms | 2.47x | 6.9333ms | 575.02x | 1422.63x | | ||
| ``` | ||
@@ -483,0 +525,0 @@ |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.63%
63898
- Number of lines in readme file
- increased by7.69%
588
Worsened metrics
- Lines of code
- decreased by-0.52%
1143
No dependency changes