safe-mdx 1.3.1 → 1.3.3

package/src/html/attributes.ts

@@ -0,0 +1,297 @@
+// The following element listings are taken from the facebook/react repository.
+// https://github.com/facebook/react/blob/main/packages/react-dom/src/shared/DOMProperty.js
+
+// A few React string attributes have a different name.
+// This is a mapping from React prop names to the attribute names.
+export const renamedAttributes = new Map([
+  ["accept-charset", "acceptCharset"],
+  ["class", "className"],
+  ["for", "htmlFor"],
+  ["http-equiv", "httpEquiv"],
+]);
+
+// These are "enumerated" HTML attributes that accept "true" and "false".
+// In React, we let users pass `true` and `false` even though technically
+// these aren't boolean attributes (they are coerced to strings).
+export const coerceToBooleanAttributes = [
+  "allowFullScreen",
+  "async",
+  "autoFocus",
+  "autoPlay",
+  "checked",
+  "contentEditable",
+  "controls",
+  "default",
+  "defer",
+  "disabled",
+  "disablePictureInPicture",
+  "disableRemotePlayback",
+  "draggable",
+  "formNoValidate",
+  "hidden",
+  "itemScope",
+  "loop",
+  "multiple",
+  "muted",
+  "noModule",
+  "noValidate",
+  "open",
+  "playsInline",
+  "readOnly",
+  "required",
+  "reversed",
+  "scoped",
+  "seamless",
+  "selected",
+  "spellCheck",
+  "value",
+
+  // These accept other values than true and false which are just left as is.
+  // true and false will get converted to booleans.
+  "capture",
+  "download",
+];
+
+// These are "enumerated" SVG attributes that accept "true" and "false".
+// In React, we let users pass `true` and `false` even though technically
+// these aren't boolean attributes (they are coerced to strings).
+// Since these are SVG attributes, their attribute names are case-sensitive.
+export const svgCoerceToBooleanAttributes = [
+  "autoReverse",
+  "externalResourcesRequired",
+  "focusable",
+  "preserveAlpha",
+];
+
+// These are HTML attributes that must be positive numbers.
+export const numberAttributes = [
+  "border",
+  "cellPadding",
+  "cellSpacing",
+  "cols",
+  "marginHeight",
+  "marginWidth",
+  "maxLength",
+  "minLength",
+  "rows",
+  "rowSpan",
+  "size",
+  "span",
+  "start",
+  "tabIndex",
+];
+
+// These properties are SVG and have to be camelized.
+// The second value in the array determines should be converted to a number if
+// possible.
+export const svgCamelizedAttributes = [
+  ["accent-height", false],
+  ["alignment-baseline", false],
+  ["arabic-form", false],
+  ["baseline-shift", false],
+  ["cap-height", true],
+  ["clip-path", false],
+  ["clip-rule", false],
+  ["color-interpolation-filters", false],
+  ["color-interpolation", false],
+  ["color-profile", false],
+  ["color-rendering", false],
+  ["dominant-baseline", false],
+  ["enable-background", false],
+  ["fill-opacity", false],
+  ["fill-rule", false],
+  ["flood-color", false],
+  ["flood-opacity", false],
+  ["font-family", false],
+  ["font-size-adjust", true],
+  ["font-size", true],
+  ["font-stretch", false],
+  ["font-style", false],
+  ["font-variant", false],
+  ["font-weight", true],
+  ["glyph-name", false],
+  ["glyph-orientation-horizontal", false],
+  ["glyph-orientation-vertical", false],
+  ["horiz-adv-x", true],
+  ["horiz-origin-x", true],
+  ["image-rendering", false],
+  ["letter-spacing", true],
+  ["lighting-color", false],
+  ["marker-end", false],
+  ["marker-mid", false],
+  ["marker-start", false],
+  ["overline-position", true],
+  ["overline-thickness", true],
+  ["paint-order", false],
+  ["panose-1", false],
+  ["pointer-events", false],
+  ["rendering-intent", false],
+  ["shape-rendering", false],
+  ["stop-color", false],
+  ["stop-opacity", false],
+  ["strikethrough-position", true],
+  ["strikethrough-thickness", true],
+  ["stroke-dasharray", false],
+  ["stroke-dashoffset", true],
+  ["stroke-linecap", false],
+  ["stroke-linejoin", false],
+  ["stroke-miterlimit", true],
+  ["stroke-opacity", false],
+  ["stroke-width", true],
+  ["text-anchor", false],
+  ["text-decoration", false],
+  ["text-rendering", false],
+  ["underline-position", true],
+  ["underline-thickness", true],
+  ["unicode-bidi", false],
+  ["unicode-range", false],
+  ["units-per-em", true],
+  ["v-alphabetic", true],
+  ["v-hanging", true],
+  ["v-ideographic", true],
+  ["v-mathematical", true],
+  ["vector-effect", false],
+  ["vert-adv-y", true],
+  ["vert-origin-x", true],
+  ["vert-origin-y", true],
+  ["word-spacing", true],
+  ["writing-mode", false],
+  ["x-height", true],
+  ["xmlns:xlink", false],
+];
+
+// Supported event attributes in React, taken from
+// https://reactjs.org/docs/events.html
+export const eventHandlerAttributes = [
+  "onAbort",
+  "onAnimationEnd",
+  "onAnimationIteration",
+  "onAnimationStart",
+  "onBlur",
+  "onCanPlay",
+  "onCanPlayThrough",
+  "onChange",
+  "onClick",
+  "onCompositionEnd",
+  "onCompositionStart",
+  "onCompositionUpdate",
+  "onContextMenu",
+  "onCopy",
+  "onCut",
+  "onDoubleClick",
+  "onDrag",
+  "onDragEnd",
+  "onDragEnter",
+  "onDragExit",
+  "onDragLeave",
+  "onDragOver",
+  "onDragStart",
+  "onDrop",
+  "onDurationChange",
+  "onEmptied",
+  "onEncrypted",
+  "onEnded",
+  "onError",
+  "onError",
+  "onFocus",
+  "onGotPointerCapture",
+  "onInput",
+  "onInvalid",
+  "onKeyDown",
+  "onKeyPress",
+  "onKeyUp",
+  "onLoad",
+  "onLoadedData",
+  "onLoadedMetadata",
+  "onLoadStart",
+  "onLostPointerCapture",
+  "onMouseDown",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseMove",
+  "onMouseOut",
+  "onMouseOver",
+  "onMouseUp",
+  "onPaste",
+  "onPause",
+  "onPlay",
+  "onPlaying",
+  "onPointerCancel",
+  "onPointerDown",
+  "onPointerEnter",
+  "onPointerLeave",
+  "onPointerMove",
+  "onPointerOut",
+  "onPointerOver",
+  "onPointerUp",
+  "onProgress",
+  "onRateChange",
+  "onReset",
+  "onScroll",
+  "onSeeked",
+  "onSeeking",
+  "onSelect",
+  "onStalled",
+  "onSubmit",
+  "onSuspend",
+  "onTimeUpdate",
+  "onToggle",
+  "onTouchCancel",
+  "onTouchEnd",
+  "onTouchMove",
+  "onTouchStart",
+  "onTransitionEnd",
+  "onVolumeChange",
+  "onWaiting",
+  "onWheel",
+];
+
+// List of attributes that are lower-cased in HTML but have to be camel-cased in
+// JSX code. Taken from https://reactjs.org/docs/dom-elements.html
+export const lowercasedAttributes = [
+  "accessKey",
+  "autoComplete",
+  "charSet",
+  "classID",
+  "colSpan",
+  "cellSpacing",
+  "cellMargin",
+  "contextMenu",
+  "controlsList",
+  "crossOrigin",
+  "dateTime",
+  "encType",
+  "formAction",
+  "formEncType",
+  "formMethod",
+  "formTarget",
+  "frameBorder",
+  "hrefLang",
+  "inputMode",
+  "keyParams",
+  "keyType",
+  "mediaGroup",
+  "radioGroup",
+  "srcDoc",
+  "srcLang",
+  "srcSet",
+  "useMap",
+];
+
+/**
+ * Don't strip the px suffix from these style attributes
+ * because they can contain both length (e.g. `13px`) and
+ * unitless values (e.g. `3`), which have different
+ * meanings.
+ *
+ * (Background: React automatically adds a `px` to unitless
+ * numbers specified in style attributes, so these attributes
+ * should not be included in `px` stripping).
+ */
+export const styleDontStripPx = [
+  "line-height",
+  "flex",
+  "mask-border-outset",
+  "mask-box-outset",
+  "mask-border-width",
+];

package/src/html/convert-attributes.ts

@@ -0,0 +1,59 @@
+
+import {
+  coerceToBooleanAttributes,
+  eventHandlerAttributes,
+  lowercasedAttributes,
+  numberAttributes,
+  renamedAttributes,
+  styleDontStripPx,
+  svgCamelizedAttributes,
+  svgCoerceToBooleanAttributes,
+} from "./attributes.js";
+
+// Export function to convert HTML attribute name to JSX attribute name
+export function convertAttributeNameToJSX(htmlName: string): string {
+  // Check renamed attributes
+  for (const [html, jsx] of renamedAttributes) {
+    if (html === htmlName) {
+      return jsx;
+    }
+  }
+  
+  // Check event handler attributes
+  for (const jsxAttribute of eventHandlerAttributes) {
+    if (htmlName === jsxAttribute.toLowerCase()) {
+      return jsxAttribute;
+    }
+  }
+  
+  // Check lowercased attributes
+  for (const jsxAttribute of lowercasedAttributes) {
+    if (htmlName === jsxAttribute.toLowerCase()) {
+      return jsxAttribute;
+    }
+  }
+  
+  // Check SVG camelized attributes
+  for (const [jsxAttribute] of svgCamelizedAttributes) {
+    if (htmlName === jsxAttribute) {
+      return camelize(htmlName);
+    }
+  }
+  
+  return htmlName;
+}
+
+const CAMELIZE = /[\-\:]([a-z])/g;
+const capitalize = (token: string) => token[1]!.toUpperCase();
+
+const IS_CSS_VARIBLE = /^--\w+/;
+
+/**
+ * Converts kebab-case or colon:case to camelCase
+ */
+export function camelize(string: string) {
+  // Skip the attribute if it is a css variable.
+  // It looks something like this: style="--bgColor: red"
+  if (IS_CSS_VARIBLE.test(string)) return `"${string}"`;
+  return string.replace(CAMELIZE, capitalize);
+}

package/src/html/domparser-browser.ts

@@ -0,0 +1,6 @@
+// Browser-specific DOMParser implementation
+export function parseHTML(html: string) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+    return { document: doc };
+}

package/src/html/domparser.ts

@@ -0,0 +1,5 @@
+import { parseHTML as linkedomParseHTML } from 'linkedom';
+
+export function parseHTML(html: string) {
+    return linkedomParseHTML(html);
+}