@kitajs/html - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

index.d.ts

@@ -16,2 +16,3 @@ /// <reference path="./jsx.d.ts" />
    * A const used to represent a html fragment.
+   *
    */
@@ -21,9 +22,20 @@ export const Fragment: unique symbol
   /**
-   * Escapes a string for safe use as HTML text content.
+   * Returns true if the character at the given index is an uppercase character.
    *
-   * @param {unknown} value the value to escape. If the value is not a string it will be converted to a string with `toString()` or `toISOString()` if it is a Date.
+   * @param {string} input the string to check.
+   * @param {number} index the index of the character to check.
+   * @returns {boolean} if the character at the given index is an uppercase character.
+   * @this {void}
+   */
+  export function isUpper(this: void, input: string, index: number): boolean
+
+  /**
+   * Escapes a string for safe use as HTML text content. If the value is not a string,
+   * it is coerced to one with its own `toString()` method.
+   *
+   * @param {unknown} value the value to escape.
    * @returns {string} the escaped string.
    * @this {void}
    */
-  export function escapeHtml(this: void, value: unknown): string
+  export function escapeHtml(this: void, value: any): string
 
@@ -46,3 +58,3 @@ /**
    */
-  export function styleToString(this: void, style: object | string): boolean
+  export function styleToString(this: void, style: object | string): string
 
@@ -71,12 +83,2 @@ /**
   /**
-   * Returns true if the character at the given index is an uppercase character.
-   *
-   * @param {string} input the string to check.
-   * @param {number} index the index of the character to check.
-   * @returns {boolean} if the character at the given index is an uppercase character.
-   * @this {void}
-   */
-  export function isUpper(this: void, input: string, index: number): boolean
-
-  /**
    * Generates a html string from the given contents.
@@ -100,6 +102,7 @@ *
    *
-   * A raw html fragment is just an array of strings, this method concatenates.
+   * A raw html fragment is just an array of strings, this method concatenates .
    *
-   * @param {(string | string[])[]} contents an maybe nested array of strings to concatenate.
-   * @returns {string} the concatenated string of contents.
+   * @param {import('.').Children[]} contents an maybe nested array of strings to concatenate.
+   * @param {boolean} [escape=false] if we should escape the contents before concatenating them.
+   * @returns {string} the concatenated and escaped string of contents.
    * @this {void}
@@ -109,3 +112,4 @@ */
     this: void,
-    contents: (string | string[])[]
+    contents: Children[],
+    escape?: boolean
   ): JSX.Element
@@ -112,0 +116,0 @@

index.js

@@ -7,5 +7,3 @@ /// <reference path="./jsx.d.ts" />
 /**
- * A const used to represent a html fragment.
- *
- * @typedef {import('.').Fragment}
+ * @type {typeof import('.').Fragment}
  */
@@ -15,8 +13,3 @@ const Fragment = Symbol.for('kHtmlFragment')
 /**
- * Returns true if the character at the given index is an uppercase character.
- *
- * @param {string} input the string to check.
- * @param {number} index the index of the character to check.
- * @returns {boolean} if the character at the given index is an uppercase character.
- * @this {void}
+ * @type {import('.').isUpper}
  */
@@ -29,6 +22,3 @@ function isUpper (input, index) {
 /**
- * Converts a camel cased string to a kebab cased string.
- *
- * @param {string} camel the camel cased string to convert.
- * @this {void}
+ * @type {import('.').toKebabCase}
  */
@@ -72,7 +62,3 @@ function toKebabCase (camel) {
 /**
- * Escapes a string to avoid any possible harmful html from being executed.
- *
- * @param {any} value the value to escape.
- * @returns {string} the escaped string.
- * @this {void}
+ * @type {import('.').escapeHtml}
  */
@@ -129,7 +115,3 @@ function escapeHtml (value) {
 /**
- * Returns true if the element is a html void element.
- *
- * @param {string} tag the name of the element to check.
- * @returns {boolean} if the element is a html void element.
- * @this {void}
+ * @type {import('.').isVoidElement}
  */
@@ -159,7 +141,3 @@ function isVoidElement (tag) {
 /**
- * Transforms an object of style attributes into a html style string.
- *
- * @param {object | string}  style
- * @returns {string}
- * @this {void}
+ * @type {import('.').styleToString}
  */
@@ -253,10 +231,3 @@ function styleToString (style) {
 /**
- * Transforms an object of attributes into a html attributes string.
- *
- *
- * @example `a b="c" d="1"`
- *
- * @param {object} attributes a record of literal values to use as attributes.
- * @returns {string} the generated html attributes string.
- * @this {void}
+ * @type {import('.').attributesToString}
  */
@@ -306,4 +277,3 @@ function attributesToString (attributes) {
       if (value) {
-        // @ts-expect-error - this indexing is safe.
-        result += ' ' + toKebabCase(key)
+        result += ' ' + key
       }
@@ -318,4 +288,3 @@
 
-    // @ts-expect-error - this indexing is safe.
-    result += ' ' + toKebabCase(key)
+    result += ' ' + key
 
@@ -370,10 +339,3 @@ if (type !== 'string') {
 /**
- * Joins raw string html elements into a single html string.
- *
- * A raw html fragment is just an array of strings, this method concatenates .
- *
- * @param {import('.').Children[]} contents an maybe nested array of strings to concatenate.
- * @param {boolean} [escape=false] if we should escape the contents before concatenating them.
- * @returns {string} the concatenated and escaped string of contents.
- * @this {void}
+ * @type {import('.').contentsToString}
  */
@@ -412,9 +374,6 @@ function contentsToString (contents, escape) {
 /**
- * Generates a html string from the given contents.
+ * Just to stop TS from complaining about the type.
+ * @param {any} name
  *
- * @param {string | Function | typeof Fragment} name the name of the element to create or a function that creates the element.
- * @param {import('.').PropsWithChildren<any> | null} attrs a record of literal values to use as attributes. A property named `children` will be used as the children of the element.
- * @param  {...import('.').Children} children the inner contents of the element.
- * @returns {string} the generated html string.
- * @this {void}
+ * @type {import('.').createElement}
  */
@@ -469,8 +428,6 @@ function createElement (name, attrs, ...children) {
 /**
- * Compiles html with the given arguments specified with $name syntax.
+ * Just to stop TS from complaining about the type.
+ * @returns {Function}
  *
- * @param {(proxy: any) => string} htmlFn
- * @param {boolean} [strict=true] if we should throw an error when a property is not found.
- * @returns {function} the compiled template function
- * @this {void}
+ * @type {import('.').compile}
  */
@@ -485,2 +442,3 @@ function compile (htmlFn, strict = true, separator = '/*\x00*/') {
   const html = htmlFn(
+    // @ts-expect-error - this proxy will meet the props with children requirements.
     new Proxy(
@@ -487,0 +445,0 @@ {},

jsx.d.ts

@@ -67,3 +67,3 @@ // This file is a result from many sources, including: RFCs, typescript dom lib, w3schools, and others.
     /**
-     * Included here to work as a drop-in replacement
+     * Included here to work as a react drop-in replacement
      *
@@ -168,3 +168,3 @@ * @deprecated please use `class`.
   interface HtmlFormTag extends HtmlTag {
-    acceptCharset?: undefined | string
+    ['accept-charset']?: undefined | string
     action?: undefined | string
@@ -275,3 +275,3 @@ autocomplete?: undefined | string
     name?: undefined | string
-    httpEquiv?: undefined | string
+    ['http-equiv']?: undefined | string
     content?: undefined | string
@@ -446,2 +446,3 @@ charset?: undefined | string
 
+  // We allow any attributes on svg because its hard to keep track of them all.
   interface HtmlSvgTag extends HtmlTag, Record<string, any> {}
@@ -448,0 +449,0 @@

package.json

 {
   "name": "@kitajs/html",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Fast and type safe HTML templates using TypeScript.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -439,4 +439,2 @@ <br />
 
-> ⚠️ Please follow the JSX convention and do not use `kebab-case` for your properties, use `camelCase` instead. We internally transform all `camelCase` properties to `kebab-case` to be compliant with the HTML and JSX standards.
-
 ```tsx
@@ -449,3 +447,3 @@ declare global {
         // Changes properties to the math-power element
-        myExponential: number
+        ['my-exponential']: number
         // this property becomes the <>{children}</> type
@@ -458,3 +456,4 @@ children: number
     interface HtmlTag {
-      hxBoost: boolean
+      ['hx-boost']: boolean
+      // TIP: We already provide HTMX types, check them out!
     }
@@ -465,3 +464,3 @@ }
 const element = (
-  <mathPower myExponential={2} hxBoost>
+  <mathPower my-exponential={2} hx-boost>
     {3}
@@ -468,0 +467,0 @@ </mathPower>

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

Worsened metrics

Total package byte prevSize

79436

decreased by-2.44%

Lines of code

1630

decreased by-2.22%

Number of lines in readme file

599

decreased by-0.17%

No dependency changes