npm - @mpen/jsxhtml - Versions diffs - 0.4.0 → 0.5.1 - Mend

@mpen/jsxhtml 0.4.0 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/custom/HtmlDocument.d.ts +2 -2
package/dist/custom/RawHtml.d.ts +1 -0
package/dist/escape.test.d.ts +2 -0
package/dist/htmlspec/elements/audio.d.ts +7 -1
package/dist/htmlspec/elements/img.d.ts +7 -1
package/dist/htmlspec/elements/link.d.ts +10 -3
package/dist/htmlspec/elements/script.d.ts +7 -1
package/dist/htmlspec/elements/video.d.ts +7 -1
package/dist/index.cjs +1 -1
package/dist/index.mjs +2 -2
package/dist/jsx-dev-runtime.cjs +1 -1
package/dist/jsx-dev-runtime.mjs +2 -2
package/dist/{jsx-runtime-DlHYwToA.js → jsx-runtime-VLGtunVG.js} +25 -17
package/dist/{jsx-runtime-BQPDXeiv.js → jsx-runtime-hI3DpKLL.js} +25 -17
package/dist/jsx-runtime.cjs +1 -1
package/dist/jsx-runtime.mjs +1 -1
package/dist/jsx-types.d.ts +3 -0
package/dist/render.d.ts +3 -0
package/package.json +1 -1

package/dist/custom/HtmlDocument.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { AnyAttributes } from '../jsx-types';
+import type { HtmlAttributes } from '../htmlspec/elements';
 /**
  * `<!DOCTYPE html><html ...>{children}</html>`
  */
-export declare function HtmlDocument({ children, ...htmlAttrs }: AnyAttributes): import("src/jsx-runtime").JSX.Element;
+export declare function HtmlDocument({ children, ...htmlAttrs }: HtmlAttributes): import("src/jsx-runtime").JSX.Element;

package/dist/custom/RawHtml.d.ts CHANGED Viewed

@@ -2,5 +2,6 @@ import { JsxRawHtml } from '../jsx-elements';
 import type { StringChildren } from '../jsx-types';
 /**
  * Unescaped HTML.
+ * @experimental
  */
 export declare function RawHtml({ children }: StringChildren): JsxRawHtml;

package/dist/escape.test.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ #!/usr/bin/env -S bun test
2	+ export {};

package/dist/htmlspec/elements/audio.d.ts CHANGED Viewed

@@ -15,8 +15,14 @@ export interface AudioAttributes extends CommonAttributes<ElementForTag<'audio'>
     controlslist?: 'anonymous' | 'use-credentials';
     /**
      * The **`crossorigin`** attribute, valid on the audio, img, link, script, and video elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute.
+     *
+     * Possible values:
+     * - `anonymous`: Request uses CORS headers with credentials mode set to `same-origin` (no credentials sent for cross-origin requests).
+     * - `use-credentials`: Request uses CORS headers with credentials mode set to `include` (credentials always sent).
+     * - `""`: Setting the attribute to an empty value (or providing it without a value) is the same as `anonymous`.
+     * - `true`: Boolean form; emits the attribute without a value (same as `""` / `anonymous`).
      */
-    crossorigin?: 'anonymous' | 'use-credentials';
+    crossorigin?: '' | 'anonymous' | 'use-credentials' | true;
     /**
      * A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc.). See the proposed Remote Playback API specification for more information. In Safari, you can use `x-webkit-airplay="deny"` as a fallback.
      */

package/dist/htmlspec/elements/img.d.ts CHANGED Viewed

@@ -8,8 +8,14 @@ export interface ImgAttributes extends CommonAttributes<ElementForTag<'img'>> {
     alt?: string;
     /**
      * The **`crossorigin`** attribute, valid on the audio, img, link, script, and video elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute.
+     *
+     * Possible values:
+     * - `anonymous`: Request uses CORS headers with credentials mode set to `same-origin` (no credentials sent for cross-origin requests).
+     * - `use-credentials`: Request uses CORS headers with credentials mode set to `include` (credentials always sent).
+     * - `""`: Setting the attribute to an empty value (or providing it without a value) is the same as `anonymous`.
+     * - `true`: Boolean form; emits the attribute without a value (same as `""` / `anonymous`).
      */
-    crossorigin?: 'anonymous' | 'use-credentials';
+    crossorigin?: '' | 'anonymous' | 'use-credentials' | true;
     /**
      * This attribute provides a hint to the browser as to whether it should perform image decoding along with rendering the other DOM content in a single presentation step that looks more "correct" (`sync`), or render and present the other DOM content first and then decode the image and present it later (`async`). In practice, `async` means that the next paint does not wait for the image to decode. It is often difficult to perceive any noticeable effect when using `decoding` on static `<img ` elements. They'll likely be initially rendered as empty images while the image files are fetched (either from the network or from the cache) and then handled independently anyway, so the "syncing" of content updates is less apparent. However, the blocking of rendering while decoding happens, while often quite small, _can_ be measured - even if it is difficult to observe with the human eye. See What does the image decoding attribute actually do? for a more detailed analysis (tunetheweb.com, 2023). Using different `decoding` types can result in more noticeable differences when dynamically inserting `<img ` elements into the DOM via JavaScript - see HTMLImageElement.decoding for more details. Allowed values: Decode the image synchronously along with rendering the other DOM content, and present everything together. Decode the image asynchronously, after rendering and presenting the other DOM content. No preference for the decoding mode; the browser decides what is best for the user. This is the default value.
      *

package/dist/htmlspec/elements/link.d.ts CHANGED Viewed

@@ -14,8 +14,14 @@ export interface LinkAttributes extends CommonAttributes<ElementForTag<'link'>>
     blocking?: 'render';
     /**
      * The **`crossorigin`** attribute, valid on the audio, img, link, script, and video elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute.
+     *
+     * Possible values:
+     * - `anonymous`: Request uses CORS headers with credentials mode set to `same-origin` (no credentials sent for cross-origin requests).
+     * - `use-credentials`: Request uses CORS headers with credentials mode set to `include` (credentials always sent).
+     * - `""`: Setting the attribute to an empty value (or providing it without a value) is the same as `anonymous`.
+     * - `true`: Boolean form; emits the attribute without a value (same as `""` / `anonymous`).
      */
-    crossorigin?: 'anonymous' | 'use-credentials';
+    crossorigin?: '' | 'anonymous' | 'use-credentials' | true;
     /**
      * The Boolean **`disabled`** attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
      */
@@ -67,9 +73,10 @@ export interface LinkAttributes extends CommonAttributes<ElementForTag<'link'>>
      * This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the `rel` contains a value of `icon` or a non-standard type such as Apple's `apple-touch-icon`. It may have the following values:
      *
      * Possible values:
-     * - any
+     * - any (the icon can be scaled to any size, such as a vector format like `image/svg+xml`)
+     * - A whitespace-separated list of sizes, each in the format `<width>x<height>` or `<width>X<height>` in pixels
      */
-    sizes?: 'any';
+    sizes?: 'any' | string;
     /**
      * This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as **text/html**, **text/css**, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as **text/css**), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the `type` attribute, but is actually now recommended practice. It is also used on `rel="preload"` link types, to make sure the browser only downloads file types that it supports.
      */

package/dist/htmlspec/elements/script.d.ts CHANGED Viewed

@@ -19,8 +19,14 @@ export interface ScriptAttributes extends CommonAttributes<ElementForTag<'script
     blocking?: 'render';
     /**
      * The **`crossorigin`** attribute, valid on the audio, img, link, script, and video elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute.
+     *
+     * Possible values:
+     * - `anonymous`: Request uses CORS headers with credentials mode set to `same-origin` (no credentials sent for cross-origin requests).
+     * - `use-credentials`: Request uses CORS headers with credentials mode set to `include` (credentials always sent).
+     * - `""`: Setting the attribute to an empty value (or providing it without a value) is the same as `anonymous`.
+     * - `true`: Boolean form; emits the attribute without a value (same as `""` / `anonymous`).
      */
-    crossorigin?: '' | 'anonymous' | 'use-credentials';
+    crossorigin?: '' | 'anonymous' | 'use-credentials' | true;
     /**
      * This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded event. Scripts with the `defer` attribute will prevent the `DOMContentLoaded` event from firing until the script has loaded and finished evaluating. Scripts with the `defer` attribute will execute in the order in which they appear in the document. This attribute allows the elimination of **parser-blocking JavaScript** where the browser would have to load and evaluate scripts before continuing to parse. `async` has a similar effect in this case. If the attribute is specified with the `async` attribute, the element will act as if only the `async` attribute is specified.
      */

package/dist/htmlspec/elements/video.d.ts CHANGED Viewed

@@ -16,8 +16,14 @@ export interface VideoAttributes extends CommonAttributes<ElementForTag<'video'>
     controlslist?: 'anonymous' | 'use-credentials';
     /**
      * The **`crossorigin`** attribute, valid on the audio, img, link, script, and video elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute.
+     *
+     * Possible values:
+     * - `anonymous`: Request uses CORS headers with credentials mode set to `same-origin` (no credentials sent for cross-origin requests).
+     * - `use-credentials`: Request uses CORS headers with credentials mode set to `include` (credentials always sent).
+     * - `""`: Setting the attribute to an empty value (or providing it without a value) is the same as `anonymous`.
+     * - `true`: Boolean form; emits the attribute without a value (same as `""` / `anonymous`).
      */
-    crossorigin?: 'anonymous' | 'use-credentials';
+    crossorigin?: '' | 'anonymous' | 'use-credentials' | true;
     /**
      * Prevents the browser from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases.
      */

package/dist/index.cjs CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
-var jsxRuntime = require("./jsx-runtime-BQPDXeiv.js");
+var jsxRuntime = require("./jsx-runtime-hI3DpKLL.js");
 function C({children}) {
     {

package/dist/index.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
-import { E as EMPTY, j as jsx, J as JsxDocType, a as jsxs, F as Fragment, b as JsxRawHtml, f as flattenString, i as isJsxNode } from "./jsx-runtime-DlHYwToA.js";
+import { E as EMPTY, j as jsx, J as JsxDocType, a as jsxs, F as Fragment, b as JsxRawHtml, f as flattenString, i as isJsxNode } from "./jsx-runtime-VLGtunVG.js";
-export { e as JsxComment, d as JsxElement, g as JsxEmpty, h as JsxFragment, k as JsxNode, c as js } from "./jsx-runtime-DlHYwToA.js";
+export { e as JsxComment, d as JsxElement, g as JsxEmpty, h as JsxFragment, k as JsxNode, c as js } from "./jsx-runtime-VLGtunVG.js";
 function C({children}) {
     {

package/dist/jsx-dev-runtime.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
-var jsxRuntime = require("./jsx-runtime-BQPDXeiv.js");
+var jsxRuntime = require("./jsx-runtime-hI3DpKLL.js");
 function jsxDEV(tag, props, key, isStaticChildren, source, self) {
     let node = jsxRuntime.jsx(...arguments);

package/dist/jsx-dev-runtime.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
-import { j as jsx, l as isJsxComponent, e as JsxComment, h as JsxFragment } from "./jsx-runtime-DlHYwToA.js";
+import { j as jsx, l as isJsxComponent, e as JsxComment, h as JsxFragment } from "./jsx-runtime-VLGtunVG.js";
-export { F as Fragment, m as JSX } from "./jsx-runtime-DlHYwToA.js";
+export { F as Fragment, m as JSX } from "./jsx-runtime-VLGtunVG.js";
 function jsxDEV(tag, props, key, isStaticChildren, source, self) {
     let node = jsx(...arguments);

package/dist/{jsx-runtime-DlHYwToA.js → jsx-runtime-VLGtunVG.js} RENAMED Viewed

@@ -1363,10 +1363,6 @@ function isObjectLike(obj) {
     return typeof obj === "object" && obj !== null;
 }
-function isObject$1(obj) {
-    return obj != null && (typeof obj === "object" || typeof obj === "function");
-}
 function isPlainObject(obj) {
     if (obj == null || Object.prototype.toString.call(obj) !== "[object Object]") return false;
     const proto = Object.getPrototypeOf(obj);
@@ -1443,32 +1439,44 @@ function attrValue(value) {
     if (isFunction$1(value)) {
         value = `(${value}).call(this,event)`;
     }
-    return `"${String(value).replace(/"/gu, entity)}"`;
+    const stringValue = String(value);
+    const needsQuoted = stringValue.length === 0 || /[ \t\n\f\r"'=<>`]/u.test(stringValue);
+    if (!needsQuoted) return stringValue;
+    if (!stringValue.includes('"')) {
+        return `"${stringValue.replace(/"/gu, entity)}"`;
+    }
+    if (!stringValue.includes("'")) {
+        return `'${stringValue.replace(/'/gu, entity)}'`;
+    }
+    return `"${stringValue.replace(/"/gu, entity)}"`;
 }
 function attrKvPair(rawAttr, rawVal) {
-    let escAttr = attrName(rawAttr);
-    if (/^data-/.test(rawAttr) && !isString$1(rawVal)) {
-        rawVal = JSON.stringify(rawVal);
-    }
     if (rawVal === true) {
-        return escAttr;
+        return attrName(rawAttr);
     }
     if (rawVal === false || rawVal == null) {
         return null;
     }
-    if (rawAttr === "class" && !isString$1(rawVal)) {
-        rawVal = classCat(rawVal);
-    }
-    if (rawAttr === "style" && isPlainObject(rawVal)) {
-        rawVal = styleObjectToString(rawVal);
+    if (rawAttr === "class") {
+        if (!isString$1(rawVal)) {
+            rawVal = classCat(rawVal);
+        }
+    } else if (rawAttr === "style") {
+        if (isPlainObject(rawVal)) {
+            rawVal = styleObjectToString(rawVal);
+        }
+    } else if (rawAttr.startsWith("data-")) {
+        if (!isString$1(rawVal)) {
+            rawVal = JSON.stringify(rawVal);
+        }
     }
-    return `${escAttr}=${attrValue(rawVal)}`;
+    return `${attrName(rawAttr)}=${attrValue(rawVal)}`;
 }
 function attrs(attributes) {
     if (attributes == null) return "";
-    if (isObject$1(attributes)) {
+    if (isPlainObject(attributes)) {
         attributes = Object.entries(attributes);
     }
     return attributes.map((([k, v]) => attrKvPair(k, v))).filter((x => x)).map((x => ` ${x}`)).join("");

package/dist/{jsx-runtime-BQPDXeiv.js → jsx-runtime-hI3DpKLL.js} RENAMED Viewed

@@ -1365,10 +1365,6 @@ function isObjectLike(obj) {
     return typeof obj === "object" && obj !== null;
 }
-function isObject$1(obj) {
-    return obj != null && (typeof obj === "object" || typeof obj === "function");
-}
 function isPlainObject(obj) {
     if (obj == null || Object.prototype.toString.call(obj) !== "[object Object]") return false;
     const proto = Object.getPrototypeOf(obj);
@@ -1445,32 +1441,44 @@ function attrValue(value) {
     if (isFunction$1(value)) {
         value = `(${value}).call(this,event)`;
     }
-    return `"${String(value).replace(/"/gu, entity)}"`;
+    const stringValue = String(value);
+    const needsQuoted = stringValue.length === 0 || /[ \t\n\f\r"'=<>`]/u.test(stringValue);
+    if (!needsQuoted) return stringValue;
+    if (!stringValue.includes('"')) {
+        return `"${stringValue.replace(/"/gu, entity)}"`;
+    }
+    if (!stringValue.includes("'")) {
+        return `'${stringValue.replace(/'/gu, entity)}'`;
+    }
+    return `"${stringValue.replace(/"/gu, entity)}"`;
 }
 function attrKvPair(rawAttr, rawVal) {
-    let escAttr = attrName(rawAttr);
-    if (/^data-/.test(rawAttr) && !isString$1(rawVal)) {
-        rawVal = JSON.stringify(rawVal);
-    }
     if (rawVal === true) {
-        return escAttr;
+        return attrName(rawAttr);
     }
     if (rawVal === false || rawVal == null) {
         return null;
     }
-    if (rawAttr === "class" && !isString$1(rawVal)) {
-        rawVal = classCat(rawVal);
-    }
-    if (rawAttr === "style" && isPlainObject(rawVal)) {
-        rawVal = styleObjectToString(rawVal);
+    if (rawAttr === "class") {
+        if (!isString$1(rawVal)) {
+            rawVal = classCat(rawVal);
+        }
+    } else if (rawAttr === "style") {
+        if (isPlainObject(rawVal)) {
+            rawVal = styleObjectToString(rawVal);
+        }
+    } else if (rawAttr.startsWith("data-")) {
+        if (!isString$1(rawVal)) {
+            rawVal = JSON.stringify(rawVal);
+        }
     }
-    return `${escAttr}=${attrValue(rawVal)}`;
+    return `${attrName(rawAttr)}=${attrValue(rawVal)}`;
 }
 function attrs(attributes) {
     if (attributes == null) return "";
-    if (isObject$1(attributes)) {
+    if (isPlainObject(attributes)) {
         attributes = Object.entries(attributes);
     }
     return attributes.map((([k, v]) => attrKvPair(k, v))).filter((x => x)).map((x => ` ${x}`)).join("");

package/dist/jsx-runtime.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
-var jsxRuntime = require("./jsx-runtime-BQPDXeiv.js");
+var jsxRuntime = require("./jsx-runtime-hI3DpKLL.js");
 exports.Fragment = jsxRuntime.Fragment;

package/dist/jsx-runtime.mjs CHANGED Viewed

	@@ -1 +1 @@
1	- export { F as Fragment, m as JSX, j as jsx, a as jsxs } from "./jsx-runtime-~~DlHYwToA~~.js";
1	+ export { F as Fragment, m as JSX, j as jsx, a as jsxs } from "./jsx-runtime-VLGtunVG.js";

package/dist/jsx-types.d.ts CHANGED Viewed

@@ -5,6 +5,9 @@ export type PlainObject = Record<PropertyKey, unknown>;
 export type { ClassNames, StyleObject, AttributeValue, AttrKvPair, AttrArr, AttrObj, Attributes };
 export type UnkFn = (...args: unknown[]) => unknown;
 export type AnyFn = (...args: any[]) => any;
+/**
+ * @experimental
+ */
 export type HtmlSafe = {
     __html: string;
 };

package/dist/render.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
 import type { HtmlSafe, JsxRenderable } from './jsx-types';
+/**
+ * @experimental
+ */
 export declare function isHtmlSafe(x: any): x is HtmlSafe;
 export declare function render(el: JsxRenderable): string;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@mpen/jsxhtml",
-    "version": "0.4.0",
+    "version": "0.5.1",
     "packageManager": "bun@1.3.7",
     "exports": {
         ".": {