feat: added esm support

.changeset/makes_tsx_happy.md

@@ -1,5 +1,7 @@
 ---
-'@kitajs/html': minor
+'@kitajs/html': patch
 ---
 
-Makes [tsx](https://www.npmjs.com/package/tsx) and the underling [esbuild](https://esbuild.github.io/) ecosystem happy by exporting the `Fragment`, `jsx` and `jsxs` from `@kitajs/html/jsx-runtime`
+Makes [tsx](https://www.npmjs.com/package/tsx) and the underling
+[esbuild](https://esbuild.github.io/) ecosystem happy by exporting the `Fragment`, `jsx`
+and `jsxs` from `@kitajs/html/jsx-runtime`

.changeset/polite-rivers-run.md

@@ -0,0 +1,5 @@
+---
+'@kitajs/html': patch
+---
+
+Removed Html.compile support

.changeset/ten-pandas-impress.md

@@ -0,0 +1,6 @@
+---
+'@kitajs/fastify-html-plugin': patch
+'@kitajs/html': patch
+---
+
+Added ESM support

README.md

@@ -1,9 +1,9 @@
 ![image](https://github.com/kitajs/html/assets/47537704/edd85ef1-9469-475e-83f8-c6819cf2cc1b)<p align="center">
-   Please consider <a href="https://github.com/sponsors/arthurfiorette" target="_blank">donating</a> to support my open source work ❤️
-  <br />
-  <sup>
-   Help KitaJS grow! Star and share this amazing repository with your friends and co-workers!
-  </sup>
+Please consider
+<a href="https://github.com/sponsors/arthurfiorette" target="_blank">donating</a> to
+support my open source work ❤️ <br /> <sup> Help KitaJS grow! Star and share this amazing
+repository with your friends and co-workers! </sup>
+
 </p>
 
 <br />

packages/fastify-html-plugin/index.js

@@ -17,21 +17,20 @@ const kAutoDoctype = Symbol.for('fastify-kita-html.autoDoctype');
  * >}
  */
 function plugin(fastify, opts, next) {
-  // Good defaults
-  opts.autoDoctype ??= true;
-
-  fastify.decorateReply(kAutoDoctype, opts.autoDoctype);
+  fastify.decorateReply(kAutoDoctype, (opts.autoDoctype ??= true));
   fastify.decorateReply('html', html);
-
   return next();
 }
 
 /** @type {import('fastify').FastifyReply['html']} */
 function html(htmlStr) {
+  if (typeof htmlStr === 'string') {
+    // @ts-expect-error - generics break the type inference here
+    return handleHtml(htmlStr, this);
+  }
+
   // @ts-expect-error - generics break the type inference here
-  return typeof htmlStr === 'string'
-    ? handleHtml(htmlStr, this)
-    : handleAsyncHtml(htmlStr, this);
+  return handleAsyncHtml(htmlStr, this);
 }
 
 /**
@@ -99,5 +98,4 @@ const fastifyKitaHtml = fp(plugin, {
 module.exports = fastifyKitaHtml;
 module.exports.default = fastifyKitaHtml; // supersedes fastifyKitaHtml.default = fastifyKitaHtml
 module.exports.fastifyKitaHtml = fastifyKitaHtml; // supersedes fastifyKitaHtml.fastifyKitaHtml = fastifyKitaHtml
-
 module.exports.kAutoDoctype = kAutoDoctype;

packages/html/README.md

@@ -58,8 +58,6 @@
   - [Alpinejs](#alpinejs)
   - [Hotwire Turbo](#hotwire-turbo)
   - [Base HTML templates](#base-html-templates)
-- [Compiling HTML](#compiling-html)
-  - [Clean Components](#clean-components)
 - [Fragments](#fragments)
 - [Supported HTML](#supported-html)
   - [The `tag` tag](#the-tag-tag)
@@ -71,6 +69,7 @@
 - [Serialization table](#serialization-table)
 - [Format HTML output](#format-html-output)
 - [Deprecating global register](#deprecating-global-register)
+- [Deprecating importing type extensions](#deprecating-importing-type-extensions)
 - [Fork credits](#fork-credits)
 
 <br />
@@ -743,93 +742,6 @@ const html = (
 
 <br />
 
-## Compiling HTML
-
-`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
-[**2000**](#performance) times faster html generation. This is a opt-in feature that you
-may not be able to use everywhere!
-
-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
-import Html from '@kitajs/html';
-
-function Component(props: Html.PropsWithChildren<{ name: string }>) {
-  return <div>Hello {props.name}</div>;
-}
-
-const compiled = Html.compile<typeof Component>(Component);
-
-compiled({ name: 'World' });
-// <div>Hello World</div>
-
-const compiled = Html.compile((p) => <div>Hello {p.name}</div>);
-
-compiled({ name: 'World' });
-// <div>Hello World</div>
-```
-
-Properties passed for compiled components **ARE NOT** what will be passed as argument to
-the generated function.
-
-```tsx
-const compiled = Html.compile((t) => {
-  // THIS WILL NOT print 123, but a string used by .compile instead
-  console.log(t.asd);
-  return <div></div>;
-});
-
-compiled({ asd: 123 });
-```
-
-That's the reason on why you cannot compile unclean components, as they need to process
-the props before rendering.
-
-<br />
-
-### Clean Components
-
-A **clean component** is a component that does not process props before applying them to
-the element. This means that the props are applied to the element as is, and you need to
-process them before passing them to the component.
-
-```tsx
-// Clean component, render as is
-function Clean(props: PropsWithChildren<{ sum: number }>) {
-  return <div>{props.sum}</div>;
-}
-
-// Calculation is done before passing to the component
-html = <Clean sum={3 * 2} />;
-
-// Unclean component, process before render
-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 a={3} b={2} />;
-```
-
-<br />
-
 ## Fragments
 
 JSX does not allow multiple root elements, but you can use a fragment to group multiple
@@ -1108,8 +1020,8 @@ console.log(prettify(html));
 
 ## Deprecating global register
 
-The `@kitajs/html/register` import has been deprecated and will be removed in the next
-major version. Please change the way you have configured your project to use this library.
+The `@kitajs/html/register` in favour of the `react-jsx` target `@kitajs/html` supports,
+which automatically registers the JSX runtime globally.
 
 Please update your tsconfig to use the new `jsxImportSource` option and remove all
 references to `'@kitajs/html/register'` from your codebase.
@@ -1136,6 +1048,33 @@ codebase.
 
 <br />
 
+## Deprecating importing type extensions
+
+Importing type extensions like `import '@kitajs/html/htmx'` and
+`import '@kitajs/html/alpine'` have been deprecated and will be removed in the next major
+version.
+
+Please change the way you import them to either use `/// <reference types="..." />`
+[triple slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html)
+or the [`types`](https://www.typescriptlang.org/tsconfig/#types) option in your tsconfig.
+
+```diff
+- import '@kitajs/html/htmx';
++ /// <reference types="@kitajs/html/htmx" />
+```
+
+**Or** add them in the `types` option present in your tsconfig:
+
+```diff
+{
+  "compilerOptions": {
++   "types": ["@kitajs/html/htmx"]
+  }
+}
+```
+
+<br />
+
 ## Fork credits
 
 This repository was initially forked from

packages/html/index.d.ts

@@ -118,45 +118,6 @@ export function contentToString(
   escape?: boolean
 ): JSX.Element;
 
-/**
- * Compiles a **clean component** into a super fast component. This does not support
- * unclean components / props processing.
- *
- * A **clean component** is a component that does not process props before applying them
- * to the element. This means that the props are applied to the element as is, and you
- * need to process them before passing them to the component.
- *
- * @example
- *
- * ```tsx
- * // Clean component, render as is
- * function Clean(props: PropsWithChildren<{ repeated: string }>) { return <div>{props.repeated}</div> }
- *
- * // Calculation is done before passing to the component
- * html = <Clean name={'a'.repeat(5)} />
- *
- * // Unclean component, process before render
- * function Unclean(props: { repeat: string; n: number }) { return <div>{props.repeat.repeat(props.n)}</div> }
- *
- * // Calculation is done inside the component, thus cannot be used with .compile() html =
- * <Unclean repeat="a" n={5} />
- * ```
- *
- * @param htmlComponent The _clean_ component to compile.
- * @param strict If it should throw an error when a property is not found. Default is
- *   `true`
- * @param separator The string used to interpolate and separate parameters
- * @returns The compiled template function
- */
-export function compile<
-  P extends { [K in keyof P]: K extends 'children' ? Children : string }
->(
-  this: void,
-  cleanComponent: Component<P>,
-  strict?: boolean,
-  separator?: string
-): Component<P>;
-
 /** Here for interop with `preact` and many build systems. */
 export const h: typeof createElement;
 
@@ -211,13 +172,3 @@ export type Component<T = {}> = (this: void, props: PropsWithChildren<T>) => JSX
  * @link https://www.npmjs.com/package/@kitajs/html
  */
 export const Html: Omit<typeof import('.'), 'Html'>;
-
-/**
- * Fast and type safe HTML templates using JSX syntax.
- *
- * @module Html
- * @license Apache License Version 2.0
- * @link https://github.com/kitajs/html
- * @link https://www.npmjs.com/package/@kitajs/html
- */
-export as namespace Html;