@kitajs/html - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

htmx.d.ts

@@ -498,3 +498,3 @@ // This file is a result from https://github.com/Desdaemon/typed-htmx and https://htmx.org
      * The element or elements to disable during requests. Accepts CSS selectors.
-     *
+     * This extensions functionality has been folded into the core of htmx via the hx-disabled-elt attribute
      * @see https://htmx.org/extensions/disable-element/
@@ -505,2 +505,9 @@ */
     /**
+     * The element or elements to disable during requests. Accepts CSS selectors.
+     *
+     * @see https://htmx.org/attributes/hx-disabled-elt/
+     */
+    ['hx-disabled-elt']?: 'this' | AnyStr;
+  
+    /**
      * The strategy for merging new head content.
@@ -507,0 +514,0 @@ *

jsx.d.ts

@@ -260,2 +260,3 @@ // This file is a result from many sources, including: RFCs, typescript dom lib, w3schools, and others.
     rel?: undefined | string;
+    as?: undefined | string;
     media?: undefined | string;
@@ -262,0 +263,0 @@ hreflang?: undefined | string;

package.json

 {
   "name": "@kitajs/html",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Fast and type safe HTML templates using TypeScript.",
@@ -5,0 +5,0 @@ "bugs": "https://github.com/kitajs/html/issues",

README.md

@@ -132,6 +132,10 @@ <p align="center">
 
+<br />
+
 > [!WARNING]  
->  Make sure to verify that your setup is correct by writing `console.log(<div>{'<' + '/div>'}</div>);`
-> in your editor. If it **PRODUCE ERRORS**, your setup is correct. Refer to the [@kitajs/ts-html-plugin](https://github.com/kitajs/ts-html-plugin)
-> repository for more details on setting up editor intellisense.
+> Make sure to verify that your setup is correct by writing
+> `console.log(<div>{'<' + '/div>'}</div>);` in your editor. If it **PRODUCE ERRORS**,
+> your setup is correct. Refer to the
+> [@kitajs/ts-html-plugin](https://github.com/kitajs/ts-html-plugin) repository for more
+> details on setting up editor intellisense.
 
@@ -177,2 +181,4 @@ <br />
 
+<br />
+
 > [!IMPORTANT]  
@@ -183,2 +189,4 @@ > Please utilize our `@kitajs/ts-html-plugin` to emit TypeScript errors wherever you are
 
+<br />
+
 This package sanitizes every attribute by default. However, since the resulting element is
@@ -310,5 +318,5 @@ always a string, it's impossible to differentiate an HTML element created by a `<tag>` or
 
-The only problem when rendering templates is that you must wait the whole template to be
-rendered before sending it to the client. This is not a problem for small templates, but
-it can be a problem for large templates.
+The only problem when rendering templates is that you must wait for the whole template to
+be rendered before sending it to the client. This is not a problem for small templates,
+but it can be a problem for large templates.
 
@@ -344,2 +352,4 @@ To solve this problem, we provide a `Suspense` component that combined with
 
+<br />
+
 > [!NOTE]  
@@ -350,2 +360,4 @@ > The `renderToStream()` is returns a native node/bun stream, head over to our
 
+<br />
+
 The above example would render `<div>Loading username...</div>` while waiting for the
@@ -454,6 +466,11 @@ `MyAsyncComponent` to be rendered.
 
-> ℹ️ Until [#14729](https://github.com/microsoft/TypeScript/issues/14729) gets
-> implemented, you need to manually cast `JSX.Element` into strings if you are sure there
-> is no inner async components in your component tree.
+<br />
 
+> [!NOTE]  
+> Until [#14729](https://github.com/microsoft/TypeScript/issues/14729) gets implemented,
+> you need to manually cast `JSX.Element` into strings if you are sure there is no inner
+> async components in your component tree.
+
+<br />
+
 JSX elements are mostly strings everywhere. However, as the nature of this package, once a
@@ -560,20 +577,25 @@ children element is a async component, the entire upper tree will also be async. Unless
 Often you will have a "template" html with doctype, things on the head, body and so on...
-The layout is also a very good component to be compiled. Here is a effective example on
-how to do it:.
+Most users try to use them as a raw string and only use JSX for other components, but this
+is a not a good idea as
+[you will have problems with it](https://github.com/nicojs/typed-html/issues/46).
 
+But you can always concatenate strings, like in this required use-case for `<doctype>`
+
 ```tsx
-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>
-  </>
-));
+export function Layout(props: Html.PropsWithChildren<{ head: string; title?: string }>) {
+  return (
+    <>
+      {'<!doctype html>'}
+      <html lang="en">
+        <head>
+          <meta charset="UTF-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <title>{props.title || 'Hello World!'}</title>
+          {props.head}
+        </head>
+        <body>{props.children}</body>
+      </html>
+    </>
+  );
+}
 
@@ -598,5 +620,16 @@ const html = (
 
-Compiles a **clean component** into a super fast component. This does not support unclean
-components / props processing.
+`Html.compile` interface compiles a [clean component](#clean-components) into a super fast
+component. This does not support unclean components / props processing.
 
+<br />
+
+> [!WARNING]  
+> This feature is a special use case for rendering **entire page templates** like what you
+> would do with handlebars or nunjucks.
+>
+> It does not works with mostly JSX components and, for small components,
+> [it will be slower than the normal](benchmark.md) JSX syntax.
+
+<br />
+
 This mode works just like prepared statements in SQL. Compiled components can give up to
@@ -606,2 +639,7 @@ [**2000**](#performance) times faster html generation. This is a opt-in feature that you
 
+Due to the nature of
+[`Proxy`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+objects, the spread operator (`...`) will not work with compiled components. You need to
+manually pass all props to their components.
+
 ```tsx
@@ -651,16 +689,16 @@ import Html from '@kitajs/html';
 // Clean component, render as is
-function Clean(props: PropsWithChildren<{ repeated: string }>) {
-  return <div>{props.repeated}</div>;
+function Clean(props: PropsWithChildren<{ sum: number }>) {
+  return <div>{props.sum}</div>;
 }
 
 // Calculation is done before passing to the component
-html = <Clean name={'a'.repeat(5)} />;
+html = <Clean sum={3 * 2} />;
 
 // Unclean component, process before render
-function Unclean(props: { repeat: string; n: number }) {
-  return <div>{props.repeat.repeat(props.n)}</div>;
+function Unclean(props: { a: number; b: number }) {
+  return <div>{props.a * props.b}</div>;
 }
 
 // Calculation is done inside the component, thus cannot be used with .compile()
-html = <Unclean repeat="a" n={5} />;
+html = <Unclean a={3} b={2} />;
 ```
@@ -667,0 +705,0 @@

suspense.d.ts

@@ -144,2 +144,6 @@ import type { Readable } from 'stream';
 
+/**
+ * A HtmlStream is a readable string stream that also contains the resource id used to
+ * identify the request.
+ */
 export interface HtmlStream extends Readable {
@@ -146,0 +150,0 @@ /** The final resource id used for this render */

suspense.js

@@ -50,2 +50,4 @@ const { contentsToString } = require('./index');
 
+function noop() {}
+
 /** @type {import('./suspense').Suspense} */
@@ -213,3 +215,3 @@ function Suspense(props) {
   //@ts-expect-error - we manually set the rid
-  const stream = new Readable({ read: function noop() {} });
+  const stream = new Readable({ read: noop });
   stream.rid = resourceId;
@@ -216,0 +218,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

113888

increased by1.2%

Lines of code

2348

increased by0.51%

Number of lines in readme file

928

increased by4.27%

Number of medium supply chain risk alerts

1

decreased by-50%

No dependency changes