",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/preactjs/preact-render-to-string"
+ },
+ "bugs": "https://github.com/developit/preact-render-to-string/issues",
+ "homepage": "https://github.com/developit/preact-render-to-string",
+ "peerDependencies": {
+ "preact": ">=10"
+ },
+ "devDependencies": {
+ "@babel/plugin-transform-react-jsx": "^7.22.15",
+ "@babel/preset-env": "^7.23.2",
+ "@babel/register": "^7.22.15",
+ "@changesets/changelog-github": "^0.4.1",
+ "@changesets/cli": "^2.18.0",
+ "benchmarkjs-pretty": "^2.0.1",
+ "chai": "^4.3.10",
+ "copyfiles": "^2.4.1",
+ "eslint": "^7.16.0",
+ "eslint-config-developit": "^1.2.0",
+ "husky": "^4.3.6",
+ "lint-staged": "^10.5.3",
+ "microbundle": "^0.15.1",
+ "mocha": "^10.2.0",
+ "baseline-rts": "npm:preact-render-to-string@latest",
+ "preact": "^10.13.0",
+ "prettier": "^2.2.1",
+ "sinon": "^17.0.1",
+ "sinon-chai": "^3.7.0",
+ "typescript": "^5.0.0"
+ },
+ "dependencies": {
+ "pretty-format": "^3.8.0"
+ },
+ "prettier": {
+ "singleQuote": true,
+ "trailingComma": "none",
+ "useTabs": true,
+ "tabWidth": 2
+ },
+ "lint-staged": {
+ "**/*.{js,jsx,ts,tsx,yml}": [
+ "prettier --write"
+ ]
+ },
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "publishConfig": {
+ "provenance": true
+ }
}
diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 00000000..bedbc8ab
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,16 @@
+// Options hooks
+export const DIFF = '__b';
+export const RENDER = '__r';
+export const DIFFED = 'diffed';
+export const COMMIT = '__c';
+export const SKIP_EFFECTS = '__s';
+
+// VNode properties
+export const COMPONENT = '__c';
+export const CHILDREN = '__k';
+export const PARENT = '__';
+
+// Component properties
+export const VNODE = '__v';
+export const DIRTY = '__d';
+export const NEXT_STATE = '__s';
diff --git a/src/index.d.ts b/src/index.d.ts
index 221d349a..81db2bd7 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,16 +1,17 @@
import { VNode } from 'preact';
-interface Options {
- shallow?: boolean;
- xml?: boolean;
- pretty?: boolean | string;
-}
+export default function renderToString(
+ vnode: VNode
,
+ context?: any
+): string;
-export function render(vnode: VNode, context?: any, options?: Options): string;
-export function renderToString(
- vnode: VNode,
- context?: any,
- options?: Options
+export function render
(vnode: VNode
, context?: any): string;
+export function renderToString
(vnode: VNode
, context?: any): string;
+export function renderToStringAsync
(
+ vnode: VNode
,
+ context?: any
+): string | Promise;
+export function renderToStaticMarkup(
+ vnode: VNode
,
+ context?: any
): string;
-export function shallowRender(vnode: VNode, context?: any): string;
-export default render;
diff --git a/src/index.js b/src/index.js
index e506d054..4c652a68 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,438 +1,674 @@
import {
encodeEntities,
- indent,
- isLargeString,
styleObjToCss,
- assign,
- getChildren
-} from './util';
-import { options, Fragment } from 'preact';
+ UNSAFE_NAME,
+ NAMESPACE_REPLACE_REGEX,
+ HTML_LOWER_CASE,
+ SVG_CAMEL_CASE
+} from './util.js';
+import { options, h, Fragment } from 'preact';
+import {
+ CHILDREN,
+ COMMIT,
+ COMPONENT,
+ DIFF,
+ DIFFED,
+ DIRTY,
+ NEXT_STATE,
+ PARENT,
+ RENDER,
+ SKIP_EFFECTS,
+ VNODE
+} from './constants.js';
/** @typedef {import('preact').VNode} VNode */
-const SHALLOW = { shallow: true };
-
-// components without names, kept as a hash for later comparison to return consistent UnnamedComponentXX names.
-const UNNAMED = [];
-
-const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
-
-const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
+const EMPTY_ARR = [];
+const isArray = Array.isArray;
+const assign = Object.assign;
-const noop = () => {};
+// Global state for the current render pass
+let beforeDiff, afterDiff, renderHook, ummountHook;
-/** Render Preact JSX + Components to an HTML string.
- * @name render
- * @function
- * @param {VNode} vnode JSX VNode to render.
- * @param {Object} [context={}] Optionally pass an initial context object through the render path.
- * @param {Object} [options={}] Rendering options
- * @param {Boolean} [options.shallow=false] If `true`, renders nested Components as HTML elements (`} context
+ */
+function renderClassComponent(vnode, context) {
+ let type = /** @type {import("preact").ComponentClass} */ (vnode.type);
+
+ let isMounting = true;
+ let c;
+ if (vnode[COMPONENT]) {
+ isMounting = false;
+ c = vnode[COMPONENT];
+ c.state = c[NEXT_STATE];
+ } else {
+ c = new type(vnode.props, context);
}
- let pretty = opts.pretty,
- indentChar = pretty && typeof pretty === 'string' ? pretty : '\t';
+ vnode[COMPONENT] = c;
+ c[VNODE] = vnode;
- if (Array.isArray(vnode)) {
- let rendered = '';
- for (let i = 0; i < vnode.length; i++) {
- if (pretty && i > 0) rendered += '\n';
- rendered += _renderToString(
- vnode[i],
- context,
- opts,
- inner,
- isSvgMode,
- selectValue
- );
- }
- return rendered;
- }
+ c.props = vnode.props;
+ c.context = context;
+ // turn off stateful re-rendering:
+ c[DIRTY] = true;
- let nodeName = vnode.type,
- props = vnode.props,
- isComponent = false;
-
- // components
- if (typeof nodeName === 'function') {
- isComponent = true;
- if (opts.shallow && (inner || opts.renderRootComponent === false)) {
- nodeName = getComponentName(nodeName);
- } else if (nodeName === Fragment) {
- const children = [];
- getChildren(children, vnode.props.children);
- return _renderToString(
- children,
- context,
- opts,
- opts.shallowHighOrder !== false,
- isSvgMode,
- selectValue
- );
- } else {
- let rendered;
+ if (c.state == null) c.state = EMPTY_OBJ;
- let c = (vnode.__c = {
- __v: vnode,
- context,
- props: vnode.props,
- // silently drop state updates
- setState: noop,
- forceUpdate: noop,
- // hooks
- __h: []
- });
+ if (c[NEXT_STATE] == null) {
+ c[NEXT_STATE] = c.state;
+ }
- // options._diff
- if (options.__b) options.__b(vnode);
+ if (type.getDerivedStateFromProps) {
+ c.state = assign(
+ {},
+ c.state,
+ type.getDerivedStateFromProps(c.props, c.state)
+ );
+ } else if (isMounting && c.componentWillMount) {
+ c.componentWillMount();
+
+ // If the user called setState in cWM we need to flush pending,
+ // state updates. This is the same behaviour in React.
+ c.state = c[NEXT_STATE] !== c.state ? c[NEXT_STATE] : c.state;
+ } else if (!isMounting && c.componentWillUpdate) {
+ c.componentWillUpdate();
+ }
- // options._render
- if (options.__r) options.__r(vnode);
+ if (renderHook) renderHook(vnode);
- if (
- !nodeName.prototype ||
- typeof nodeName.prototype.render !== 'function'
- ) {
- // Necessary for createContext api. Setting this property will pass
- // the context value as `this.context` just for this component.
- let cxType = nodeName.contextType;
- let provider = cxType && context[cxType.__c];
- let cctx =
- cxType != null
- ? provider
- ? provider.props.value
- : cxType.__
- : context;
-
- // stateless functional components
- rendered = nodeName.call(vnode.__c, props, cctx);
- } else {
- // class-based components
- let cxType = nodeName.contextType;
- let provider = cxType && context[cxType.__c];
- let cctx =
- cxType != null
- ? provider
- ? provider.props.value
- : cxType.__
- : context;
-
- // c = new nodeName(props, context);
- c = vnode.__c = new nodeName(props, cctx);
- c.__v = vnode;
- // turn off stateful re-rendering:
- c._dirty = c.__d = true;
- c.props = props;
- if (c.state == null) c.state = {};
-
- if (c._nextState == null && c.__s == null) {
- c._nextState = c.__s = c.state;
- }
+ return c.render(c.props, c.state, context);
+}
- c.context = cctx;
- if (nodeName.getDerivedStateFromProps)
- c.state = assign(
- assign({}, c.state),
- nodeName.getDerivedStateFromProps(c.props, c.state)
- );
- else if (c.componentWillMount) {
- c.componentWillMount();
-
- // If the user called setState in cWM we need to flush pending,
- // state updates. This is the same behaviour in React.
- c.state =
- c._nextState !== c.state
- ? c._nextState
- : c.__s !== c.state
- ? c.__s
- : c.state;
- }
+/**
+ * Recursively render VNodes to HTML.
+ * @param {VNode|any} vnode
+ * @param {any} context
+ * @param {boolean} isSvgMode
+ * @param {any} selectValue
+ * @param {VNode} parent
+ * @param {boolean} asyncMode
+ * @returns {string | Promise | (string | Promise)[]}
+ */
+function _renderToString(
+ vnode,
+ context,
+ isSvgMode,
+ selectValue,
+ parent,
+ asyncMode
+) {
+ // Ignore non-rendered VNodes/values
+ if (vnode == null || vnode === true || vnode === false || vnode === '') {
+ return '';
+ }
- rendered = c.render(c.props, c.state, c.context);
- }
+ // Text VNodes: escape as HTML
+ if (typeof vnode !== 'object') {
+ if (typeof vnode === 'function') return '';
+ return encodeEntities(vnode + '');
+ }
- if (c.getChildContext) {
- context = assign(assign({}, context), c.getChildContext());
- }
+ // Recurse into children / Arrays
+ if (isArray(vnode)) {
+ let rendered = '',
+ renderArray;
+ parent[CHILDREN] = vnode;
+ for (let i = 0; i < vnode.length; i++) {
+ let child = vnode[i];
+ if (child == null || typeof child === 'boolean') continue;
- if (options.diffed) options.diffed(vnode);
- return _renderToString(
- rendered,
+ const childRender = _renderToString(
+ child,
context,
- opts,
- opts.shallowHighOrder !== false,
isSvgMode,
- selectValue
+ selectValue,
+ parent,
+ asyncMode
);
- }
- }
- // render JSX to HTML
- let s = '<' + nodeName,
- propChildren,
- html;
+ if (typeof childRender === 'string') {
+ rendered += childRender;
+ } else {
+ renderArray = renderArray || [];
- if (props) {
- let attrs = Object.keys(props);
+ if (rendered) renderArray.push(rendered);
- // allow sorting lexicographically for more determinism (useful for tests, such as via preact-jsx-chai)
- if (opts && opts.sortAttributes === true) attrs.sort();
+ rendered = '';
- for (let i = 0; i < attrs.length; i++) {
- let name = attrs[i],
- v = props[name];
- if (name === 'children') {
- propChildren = v;
- continue;
+ if (Array.isArray(childRender)) {
+ renderArray.push(...childRender);
+ } else {
+ renderArray.push(childRender);
+ }
}
+ }
- if (UNSAFE_NAME.test(name)) continue;
+ if (renderArray) {
+ if (rendered) renderArray.push(rendered);
+ return renderArray;
+ }
- if (
- !(opts && opts.allAttributes) &&
- (name === 'key' ||
- name === 'ref' ||
- name === '__self' ||
- name === '__source' ||
- name === 'defaultValue')
- )
- continue;
+ return rendered;
+ }
- if (name === 'className') {
- if (props.class) continue;
- name = 'class';
- } else if (isSvgMode && name.match(/^xlink:?./)) {
- name = name.toLowerCase().replace(/^xlink:?/, 'xlink:');
- }
+ // VNodes have {constructor:undefined} to prevent JSON injection:
+ if (vnode.constructor !== undefined) return '';
- if (name === 'htmlFor') {
- if (props.for) continue;
- name = 'for';
+ vnode[PARENT] = parent;
+ if (beforeDiff) beforeDiff(vnode);
+
+ let type = vnode.type,
+ props = vnode.props,
+ cctx = context,
+ contextType,
+ rendered,
+ component;
+
+ // Invoke rendering on Components
+ if (typeof type === 'function') {
+ if (type === Fragment) {
+ // Serialized precompiled JSX.
+ if (props.tpl) {
+ let out = '';
+ for (let i = 0; i < props.tpl.length; i++) {
+ out += props.tpl[i];
+
+ if (props.exprs && i < props.exprs.length) {
+ const value = props.exprs[i];
+ if (value == null) continue;
+
+ // Check if we're dealing with a vnode or an array of nodes
+ if (
+ typeof value === 'object' &&
+ (value.constructor === undefined || isArray(value))
+ ) {
+ out += _renderToString(
+ value,
+ context,
+ isSvgMode,
+ selectValue,
+ vnode,
+ asyncMode
+ );
+ } else {
+ // Values are pre-escaped by the JSX transform
+ out += value;
+ }
+ }
+ }
+
+ return out;
+ } else if (props.UNSTABLE_comment) {
+ // Fragments are the least used components of core that's why
+ // branching here for comments has the least effect on perf.
+ return '';
}
- if (name === 'style' && v && typeof v === 'object') {
- v = styleObjToCss(v);
+ rendered = props.children;
+ } else {
+ contextType = type.contextType;
+ if (contextType != null) {
+ let provider = context[contextType.__c];
+ cctx = provider ? provider.props.value : contextType.__;
}
- // always use string values instead of booleans for aria attributes
- // also see https://github.com/preactjs/preact/pull/2347/files
- if (name[0] === 'a' && name['1'] === 'r' && typeof v === 'boolean') {
- v = String(v);
+ if (type.prototype && typeof type.prototype.render === 'function') {
+ rendered = /**#__NOINLINE__**/ renderClassComponent(vnode, cctx);
+ component = vnode[COMPONENT];
+ } else {
+ component = {
+ __v: vnode,
+ props,
+ context: cctx,
+ // silently drop state updates
+ setState: markAsDirty,
+ forceUpdate: markAsDirty,
+ __d: true,
+ // hooks
+ __h: []
+ };
+ vnode[COMPONENT] = component;
+
+ // If a hook invokes setState() to invalidate the component during rendering,
+ // re-render it up to 25 times to allow "settling" of memoized states.
+ // Note:
+ // This will need to be updated for Preact 11 to use internal.flags rather than component._dirty:
+ // https://github.com/preactjs/preact/blob/d4ca6fdb19bc715e49fd144e69f7296b2f4daa40/src/diff/component.js#L35-L44
+ let count = 0;
+ while (component[DIRTY] && count++ < 25) {
+ component[DIRTY] = false;
+
+ if (renderHook) renderHook(vnode);
+
+ rendered = type.call(component, props, cctx);
+ }
+ component[DIRTY] = true;
}
- let hooked =
- opts.attributeHook &&
- opts.attributeHook(name, v, context, opts, isComponent);
- if (hooked || hooked === '') {
- s += hooked;
- continue;
+ if (component.getChildContext != null) {
+ context = assign({}, context, component.getChildContext());
}
- if (name === 'dangerouslySetInnerHTML') {
- html = v && v.__html;
- } else if (nodeName === 'textarea' && name === 'value') {
- //
- propChildren = v;
- } else if ((v || v === 0 || v === '') && typeof v !== 'function') {
- if (v === true || v === '') {
- v = name;
- // in non-xml mode, allow boolean attributes
- if (!opts || !opts.xml) {
- s += ' ' + name;
- continue;
+ if (
+ (type.getDerivedStateFromError || component.componentDidCatch) &&
+ options.errorBoundaries
+ ) {
+ let str = '';
+ // When a component returns a Fragment node we flatten it in core, so we
+ // need to mirror that logic here too
+ let isTopLevelFragment =
+ rendered != null &&
+ rendered.type === Fragment &&
+ rendered.key == null;
+ rendered = isTopLevelFragment ? rendered.props.children : rendered;
+
+ try {
+ str = _renderToString(
+ rendered,
+ context,
+ isSvgMode,
+ selectValue,
+ vnode,
+ asyncMode
+ );
+ return str;
+ } catch (err) {
+ if (type.getDerivedStateFromError) {
+ component[NEXT_STATE] = type.getDerivedStateFromError(err);
}
- }
- if (name === 'value') {
- if (nodeName === 'select') {
- selectValue = v;
- continue;
- } else if (nodeName === 'option' && selectValue == v) {
- s += ` selected`;
+ if (component.componentDidCatch) {
+ component.componentDidCatch(err, {});
+ }
+
+ if (component[DIRTY]) {
+ rendered = renderClassComponent(vnode, context);
+ component = vnode[COMPONENT];
+
+ if (component.getChildContext != null) {
+ context = assign({}, context, component.getChildContext());
+ }
+
+ let isTopLevelFragment =
+ rendered != null &&
+ rendered.type === Fragment &&
+ rendered.key == null;
+ rendered = isTopLevelFragment ? rendered.props.children : rendered;
+
+ str = _renderToString(
+ rendered,
+ context,
+ isSvgMode,
+ selectValue,
+ vnode,
+ asyncMode
+ );
}
+
+ return str;
+ } finally {
+ if (afterDiff) afterDiff(vnode);
+ vnode[PARENT] = null;
+
+ if (ummountHook) ummountHook(vnode);
}
- s += ` ${name}="${encodeEntities(v)}"`;
}
}
- }
- // account for >1 multiline attribute
- if (pretty) {
- let sub = s.replace(/\n\s*/, ' ');
- if (sub !== s && !~sub.indexOf('\n')) s = sub;
- else if (pretty && ~s.indexOf('\n')) s += '\n';
- }
+ // When a component returns a Fragment node we flatten it in core, so we
+ // need to mirror that logic here too
+ let isTopLevelFragment =
+ rendered != null &&
+ rendered.type === Fragment &&
+ rendered.key == null &&
+ rendered.props.tpl == null;
+ rendered = isTopLevelFragment ? rendered.props.children : rendered;
+
+ try {
+ // Recurse into children before invoking the after-diff hook
+ const str = _renderToString(
+ rendered,
+ context,
+ isSvgMode,
+ selectValue,
+ vnode,
+ asyncMode
+ );
- s += '>';
+ if (afterDiff) afterDiff(vnode);
+ vnode[PARENT] = null;
- if (UNSAFE_NAME.test(nodeName))
- throw new Error(`${nodeName} is not a valid HTML tag name in ${s}`);
+ if (ummountHook) ummountHook(vnode);
- let isVoid =
- VOID_ELEMENTS.test(nodeName) ||
- (opts.voidElements && opts.voidElements.test(nodeName));
- let pieces = [];
+ return str;
+ } catch (error) {
+ if (!asyncMode) throw error;
- let children;
- if (html) {
- // if multiline, indent.
- if (pretty && isLargeString(html)) {
- html = '\n' + indentChar + indent(html, indentChar);
- }
- s += html;
- } else if (
- propChildren != null &&
- getChildren((children = []), propChildren).length
- ) {
- let hasLarge = pretty && ~s.indexOf('\n');
- let lastWasText = false;
-
- for (let i = 0; i < children.length; i++) {
- let child = children[i];
-
- if (child != null && child !== false) {
- let childSvgMode =
- nodeName === 'svg'
- ? true
- : nodeName === 'foreignObject'
- ? false
- : isSvgMode,
- ret = _renderToString(
- child,
+ if (!error || typeof error.then !== 'function') throw error;
+
+ const renderNestedChildren = () => {
+ try {
+ return _renderToString(
+ rendered,
context,
- opts,
- true,
- childSvgMode,
- selectValue
+ isSvgMode,
+ selectValue,
+ vnode,
+ asyncMode
);
+ } catch (e) {
+ if (!e || typeof e.then !== 'function') throw e;
+
+ return e.then(
+ () =>
+ _renderToString(
+ rendered,
+ context,
+ isSvgMode,
+ selectValue,
+ vnode,
+ asyncMode
+ ),
+ () => renderNestedChildren()
+ );
+ }
+ };
- if (pretty && !hasLarge && isLargeString(ret)) hasLarge = true;
+ return error.then(() => renderNestedChildren());
+ }
+ }
- // Skip if we received an empty string
- if (ret) {
- if (pretty) {
- let isText = ret.length > 0 && ret[0] != '<';
+ // Serialize Element VNodes to HTML
+ let s = '<' + type,
+ html = '',
+ children;
- // We merge adjacent text nodes, otherwise each piece would be printed
- // on a new line.
- if (lastWasText && isText) {
- pieces[pieces.length - 1] += ret;
- } else {
- pieces.push(ret);
+ for (let name in props) {
+ let v = props[name];
+
+ switch (name) {
+ case 'children':
+ children = v;
+ continue;
+
+ // VDOM-specific props
+ case 'key':
+ case 'ref':
+ case '__self':
+ case '__source':
+ continue;
+
+ // prefer for/class over htmlFor/className
+ case 'htmlFor':
+ if ('for' in props) continue;
+ name = 'for';
+ break;
+ case 'className':
+ if ('class' in props) continue;
+ name = 'class';
+ break;
+
+ // Form element reflected properties
+ case 'defaultChecked':
+ name = 'checked';
+ break;
+ case 'defaultSelected':
+ name = 'selected';
+ break;
+
+ // Special value attribute handling
+ case 'defaultValue':
+ case 'value':
+ name = 'value';
+ switch (type) {
+ //
+ case 'textarea':
+ children = v;
+ continue;
+
+ // is serialized as a selected attribute on the matching option child
+ case 'select':
+ selectValue = v;
+ continue;
+
+ // Add a selected attribute to if its value matches the parent value
+ case 'option':
+ if (selectValue == v && !('selected' in props)) {
+ s = s + ' selected';
}
+ break;
+ }
+ break;
- lastWasText = isText;
- } else {
- pieces.push(ret);
+ case 'dangerouslySetInnerHTML':
+ html = v && v.__html;
+ continue;
+
+ // serialize object styles to a CSS string
+ case 'style':
+ if (typeof v === 'object') {
+ v = styleObjToCss(v);
+ }
+ break;
+ case 'acceptCharset':
+ name = 'accept-charset';
+ break;
+ case 'httpEquiv':
+ name = 'http-equiv';
+ break;
+
+ default: {
+ if (NAMESPACE_REPLACE_REGEX.test(name)) {
+ name = name.replace(NAMESPACE_REPLACE_REGEX, '$1:$2').toLowerCase();
+ } else if (UNSAFE_NAME.test(name)) {
+ continue;
+ } else if ((name[4] === '-' || name === 'draggable') && v != null) {
+ // serialize boolean aria-xyz or draggable attribute values as strings
+ // `draggable` is an enumerated attribute and not Boolean. A value of `true` or `false` is mandatory
+ // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable
+ v += '';
+ } else if (isSvgMode) {
+ if (SVG_CAMEL_CASE.test(name)) {
+ name =
+ name === 'panose1'
+ ? 'panose-1'
+ : name.replace(/([A-Z])/g, '-$1').toLowerCase();
}
+ } else if (HTML_LOWER_CASE.test(name)) {
+ name = name.toLowerCase();
}
}
}
- if (pretty && hasLarge) {
- for (let i = pieces.length; i--; ) {
- pieces[i] = '\n' + indentChar + indent(pieces[i], indentChar);
+
+ // write this attribute to the buffer
+ if (v != null && v !== false && typeof v !== 'function') {
+ if (v === true || v === '') {
+ s = s + ' ' + name;
+ } else {
+ s = s + ' ' + name + '="' + encodeEntities(v + '') + '"';
}
}
}
- if (pieces.length || html) {
- s += pieces.join('');
- } else if (opts && opts.xml) {
- return s.substring(0, s.length - 1) + ' />';
+ if (UNSAFE_NAME.test(type)) {
+ // this seems to performs a lot better than throwing
+ // return '';
+ throw new Error(`${type} is not a valid HTML tag name in ${s}>`);
}
- if (isVoid && !children && !html) {
- s = s.replace(/>$/, ' />');
- } else {
- if (pretty && ~s.indexOf('\n')) s += '\n';
- s += ``;
+ if (html) {
+ // dangerouslySetInnerHTML defined this node's contents
+ } else if (typeof children === 'string') {
+ // single text child
+ html = encodeEntities(children);
+ } else if (children != null && children !== false && children !== true) {
+ // recurse into this element VNode's children
+ let childSvgMode =
+ type === 'svg' || (type !== 'foreignObject' && isSvgMode);
+ html = _renderToString(
+ children,
+ context,
+ childSvgMode,
+ selectValue,
+ vnode,
+ asyncMode
+ );
}
- return s;
-}
-
-function getComponentName(component) {
- return (
- component.displayName ||
- (component !== Function && component.name) ||
- getFallbackComponentName(component)
- );
-}
+ if (afterDiff) afterDiff(vnode);
+ vnode[PARENT] = null;
+ if (ummountHook) ummountHook(vnode);
-function getFallbackComponentName(component) {
- let str = Function.prototype.toString.call(component),
- name = (str.match(/^\s*function\s+([^( ]+)/) || '')[1];
- if (!name) {
- // search for an existing indexed name for the given component:
- let index = -1;
- for (let i = UNNAMED.length; i--; ) {
- if (UNNAMED[i] === component) {
- index = i;
- break;
- }
- }
- // not found, create a new indexed name:
- if (index < 0) {
- index = UNNAMED.push(component) - 1;
- }
- name = `UnnamedComponent${index}`;
+ // Emit self-closing tag for empty void elements:
+ if (!html && SELF_CLOSING.has(type)) {
+ return s + '/>';
}
- return name;
+
+ const endTag = '';
+ const startTag = s + '>';
+
+ if (Array.isArray(html)) return [startTag, ...html, endTag];
+ else if (typeof html !== 'string') return [startTag, html, endTag];
+
+ return startTag + html + endTag;
}
-renderToString.shallowRender = shallowRender;
-export default renderToString;
+const SELF_CLOSING = new Set([
+ 'area',
+ 'base',
+ 'br',
+ 'col',
+ 'command',
+ 'embed',
+ 'hr',
+ 'img',
+ 'input',
+ 'keygen',
+ 'link',
+ 'meta',
+ 'param',
+ 'source',
+ 'track',
+ 'wbr'
+]);
-export {
- renderToString as render,
- renderToString as renderToStaticMarkup,
- renderToString,
- shallowRender
-};
+export default renderToString;
+export const render = renderToString;
+export const renderToStaticMarkup = renderToString;
diff --git a/src/jsx.d.ts b/src/jsx.d.ts
index 98fad555..752f3e55 100644
--- a/src/jsx.d.ts
+++ b/src/jsx.d.ts
@@ -3,11 +3,22 @@ import { VNode } from 'preact';
interface Options {
jsx?: boolean;
xml?: boolean;
+ pretty?: boolean | string;
+ shallow?: boolean;
functions?: boolean;
functionNames?: boolean;
skipFalseAttributes?: boolean;
- pretty?: boolean | string;
}
+export default function renderToStringPretty(
+ vnode: VNode,
+ context?: any,
+ options?: Options
+): string;
export function render(vnode: VNode, context?: any, options?: Options): string;
-export default render;
+
+export function shallowRender(
+ vnode: VNode,
+ context?: any,
+ options?: Options
+): string;
diff --git a/src/jsx.js b/src/jsx.js
index f2ac1c78..6007311a 100644
--- a/src/jsx.js
+++ b/src/jsx.js
@@ -1,8 +1,10 @@
-import './polyfills';
-import renderToString from './index';
-import { indent, encodeEntities, assign } from './util';
+import './polyfills.js';
+import renderToString from './pretty.js';
+import { indent, encodeEntities } from './util.js';
import prettyFormat from 'pretty-format';
+/** @typedef {import('preact').VNode} VNode */
+
// we have to patch in Array support, Possible issue in npm.im/pretty-format
let preactPlugin = {
test(object) {
@@ -67,10 +69,36 @@ let defaultOpts = {
pretty: ' '
};
-function renderToJsxString(vnode, context, opts, inner) {
- opts = assign(assign({}, defaultOpts), opts || {});
- return renderToString(vnode, context, opts, inner);
+/**
+ * Render Preact JSX + Components to a pretty-printed HTML-like string.
+ * @param {VNode} vnode JSX Element / VNode to render
+ * @param {Object} [context={}] Initial root context object
+ * @param {Object} [options={}] Rendering options
+ * @param {Boolean} [options.jsx=true] Generate JSX/XML output instead of HTML
+ * @param {Boolean} [options.xml=false] Use self-closing tags for elements without children
+ * @param {Boolean} [options.shallow=false] Serialize nested Components (`[2]} [options] Optionally pass an initial context object through the render path.
+ */
+export function shallowRender(vnode, context, options) {
+ const opts = Object.assign({}, SHALLOW, options || {});
+ return renderToStringPretty(vnode, context, opts);
+}
diff --git a/src/pretty.js b/src/pretty.js
new file mode 100644
index 00000000..08f1c699
--- /dev/null
+++ b/src/pretty.js
@@ -0,0 +1,446 @@
+import {
+ encodeEntities,
+ indent,
+ isLargeString,
+ styleObjToCss,
+ getChildren,
+ createComponent,
+ UNSAFE_NAME,
+ VOID_ELEMENTS,
+ NAMESPACE_REPLACE_REGEX,
+ HTML_LOWER_CASE,
+ SVG_CAMEL_CASE
+} from './util.js';
+import { COMMIT, DIFF, DIFFED, RENDER, SKIP_EFFECTS } from './constants.js';
+import { options, Fragment } from 'preact';
+
+/** @typedef {import('preact').VNode} VNode */
+
+// components without names, kept as a hash for later comparison to return consistent UnnamedComponentXX names.
+const UNNAMED = [];
+
+const EMPTY_ARR = [];
+
+/**
+ * Render Preact JSX + Components to a pretty-printed HTML-like string.
+ * @param {VNode} vnode JSX Element / VNode to render
+ * @param {Object} [context={}] Initial root context object
+ * @param {Object} [opts={}] Rendering options
+ * @param {Boolean} [opts.shallow=false] Serialize nested Components (` and it's the currently selected one
+ nodeName === 'option' &&
+ selectValue == v &&
+ // and the doesn't already have a selected attribute on it
+ typeof props.selected === 'undefined'
+ ) {
+ s = s + ` selected`;
+ }
+ }
+ s = s + ` ${name}="${encodeEntities(v + '')}"`;
+ }
+ }
+ }
+
+ // account for >1 multiline attribute
+ if (pretty) {
+ let sub = s.replace(/\n\s*/, ' ');
+ if (sub !== s && !~sub.indexOf('\n')) s = sub;
+ else if (pretty && ~s.indexOf('\n')) s = s + '\n';
+ }
+
+ s = s + '>';
+
+ if (UNSAFE_NAME.test(nodeName))
+ throw new Error(`${nodeName} is not a valid HTML tag name in ${s}`);
+
+ let isVoid =
+ VOID_ELEMENTS.test(nodeName) ||
+ (opts.voidElements && opts.voidElements.test(nodeName));
+ let pieces = [];
+
+ let children;
+ if (html) {
+ // if multiline, indent.
+ if (pretty && isLargeString(html)) {
+ html = '\n' + indentChar + indent(html, indentChar);
+ }
+ s = s + html;
+ } else if (
+ propChildren != null &&
+ getChildren((children = []), propChildren).length
+ ) {
+ let hasLarge = pretty && ~s.indexOf('\n');
+ let lastWasText = false;
+
+ for (let i = 0; i < children.length; i++) {
+ let child = children[i];
+
+ if (child != null && child !== false) {
+ let childSvgMode =
+ nodeName === 'svg'
+ ? true
+ : nodeName === 'foreignObject'
+ ? false
+ : isSvgMode,
+ ret = _renderToStringPretty(
+ child,
+ context,
+ opts,
+ true,
+ childSvgMode,
+ selectValue
+ );
+
+ if (pretty && !hasLarge && isLargeString(ret)) hasLarge = true;
+
+ // Skip if we received an empty string
+ if (ret) {
+ if (pretty) {
+ let isText = ret.length > 0 && ret[0] != '<';
+
+ // We merge adjacent text nodes, otherwise each piece would be printed
+ // on a new line.
+ if (lastWasText && isText) {
+ pieces[pieces.length - 1] += ret;
+ } else {
+ pieces.push(ret);
+ }
+
+ lastWasText = isText;
+ } else {
+ pieces.push(ret);
+ }
+ }
+ }
+ }
+ if (pretty && hasLarge) {
+ for (let i = pieces.length; i--; ) {
+ pieces[i] = '\n' + indentChar + indent(pieces[i], indentChar);
+ }
+ }
+ }
+
+ if (options[DIFFED]) options[DIFFED](vnode);
+
+ if (pieces.length || html) {
+ s = s + pieces.join('');
+ } else if (opts && opts.xml) {
+ return s.substring(0, s.length - 1) + ' />';
+ }
+
+ if (isVoid && !children && !html) {
+ s = s.replace(/>$/, ' />');
+ } else {
+ if (pretty && ~s.indexOf('\n')) s = s + '\n';
+ s = s + ``;
+ }
+
+ return s;
+}
+
+function getComponentName(component) {
+ return (
+ component.displayName ||
+ (component !== Function && component.name) ||
+ getFallbackComponentName(component)
+ );
+}
+
+function getFallbackComponentName(component) {
+ let str = Function.prototype.toString.call(component),
+ name = (str.match(/^\s*function\s+([^( ]+)/) || '')[1];
+ if (!name) {
+ // search for an existing indexed name for the given component:
+ let index = -1;
+ for (let i = UNNAMED.length; i--; ) {
+ if (UNNAMED[i] === component) {
+ index = i;
+ break;
+ }
+ }
+ // not found, create a new indexed name:
+ if (index < 0) {
+ index = UNNAMED.push(component) - 1;
+ }
+ name = `UnnamedComponent${index}`;
+ }
+ return name;
+}
diff --git a/src/util.js b/src/util.js
index 5ade429e..c950ebf0 100644
--- a/src/util.js
+++ b/src/util.js
@@ -1,18 +1,45 @@
+export const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
+export const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
+export const NAMESPACE_REPLACE_REGEX = /^(xlink|xmlns|xml)([A-Z])/;
+export const HTML_LOWER_CASE = /^accessK|^auto[A-Z]|^ch|^col|cont|cross|dateT|encT|form[A-Z]|frame|hrefL|inputM|maxL|minL|noV|playsI|readO|rowS|spellC|src[A-Z]|tabI|item[A-Z]/;
+export const SVG_CAMEL_CASE = /^ac|^ali|arabic|basel|cap|clipPath$|clipRule$|color|dominant|enable|fill|flood|font|glyph[^R]|horiz|image|letter|lighting|marker[^WUH]|overline|panose|pointe|paint|rendering|shape|stop|strikethrough|stroke|text[^L]|transform|underline|unicode|units|^v[^i]|^w|^xH/;
+
// DOM properties that should NOT have "px" added when numeric
-export const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/i;
+const ENCODED_ENTITIES = /["&<]/;
+
+/** @param {string} str */
+export function encodeEntities(str) {
+ // Skip all work for strings with no entities needing encoding:
+ if (str.length === 0 || ENCODED_ENTITIES.test(str) === false) return str;
-const ENCODED_ENTITIES = /[&<>"]/;
+ let last = 0,
+ i = 0,
+ out = '',
+ ch = '';
-export function encodeEntities(input) {
- const s = String(input);
- if (!ENCODED_ENTITIES.test(s)) {
- return s;
+ // Seek forward in str until the next entity char:
+ for (; i < str.length; i++) {
+ switch (str.charCodeAt(i)) {
+ case 34:
+ ch = '"';
+ break;
+ case 38:
+ ch = '&';
+ break;
+ case 60:
+ ch = '<';
+ break;
+ default:
+ continue;
+ }
+ // Append skipped/buffered characters and the encoded entity:
+ if (i !== last) out += str.slice(last, i);
+ out += ch;
+ // Start the next seek/buffer after the entity's offset:
+ last = i + 1;
}
- return s
- .replace(/&/g, '&')
- .replace(//g, '>')
- .replace(/"/g, '"');
+ if (i !== last) out += str.slice(last, i);
+ return out;
}
export let indent = (s, char) =>
@@ -25,42 +52,71 @@ export let isLargeString = (s, length, ignoreLines) =>
const JS_TO_CSS = {};
+const IS_NON_DIMENSIONAL = new Set([
+ 'animation-iteration-count',
+ 'border-image-outset',
+ 'border-image-slice',
+ 'border-image-width',
+ 'box-flex',
+ 'box-flex-group',
+ 'box-ordinal-group',
+ 'column-count',
+ 'fill-opacity',
+ 'flex',
+ 'flex-grow',
+ 'flex-negative',
+ 'flex-order',
+ 'flex-positive',
+ 'flex-shrink',
+ 'flood-opacity',
+ 'font-weight',
+ 'grid-column',
+ 'grid-row',
+ 'line-clamp',
+ 'line-height',
+ 'opacity',
+ 'order',
+ 'orphans',
+ 'stop-opacity',
+ 'stroke-dasharray',
+ 'stroke-dashoffset',
+ 'stroke-miterlimit',
+ 'stroke-opacity',
+ 'stroke-width',
+ 'tab-size',
+ 'widows',
+ 'z-index',
+ 'zoom'
+]);
+
+const CSS_REGEX = /[A-Z]/g;
// Convert an Object style to a CSSText string
export function styleObjToCss(s) {
let str = '';
for (let prop in s) {
let val = s[prop];
if (val != null && val !== '') {
- if (str) str += ' ';
- // str += jsToCss(prop);
- str +=
+ const name =
prop[0] == '-'
? prop
: JS_TO_CSS[prop] ||
- (JS_TO_CSS[prop] = prop.replace(/([A-Z])/g, '-$1').toLowerCase());
- str += ': ';
- str += val;
- if (typeof val === 'number' && IS_NON_DIMENSIONAL.test(prop) === false) {
- str += 'px';
+ (JS_TO_CSS[prop] = prop.replace(CSS_REGEX, '-$&').toLowerCase());
+
+ let suffix = ';';
+ if (
+ typeof val === 'number' &&
+ // Exclude custom-attributes
+ !name.startsWith('--') &&
+ !IS_NON_DIMENSIONAL.has(name)
+ ) {
+ suffix = 'px;';
}
- str += ';';
+ str = str + name + ':' + val + suffix;
}
}
return str || undefined;
}
-/**
- * Copy all properties from `props` onto `obj`.
- * @param {object} obj Object onto which properties should be copied.
- * @param {object} props Object from which to copy properties.
- * @returns {object}
- * @private
- */
-export function assign(obj, props) {
- for (let i in props) obj[i] = props[i];
- return obj;
-}
-
/**
* Get flattened children from the children prop
* @param {Array} accumulator
@@ -76,3 +132,35 @@ export function getChildren(accumulator, children) {
}
return accumulator;
}
+
+function markAsDirty() {
+ this.__d = true;
+}
+
+export function createComponent(vnode, context) {
+ return {
+ __v: vnode,
+ context,
+ props: vnode.props,
+ // silently drop state updates
+ setState: markAsDirty,
+ forceUpdate: markAsDirty,
+ __d: true,
+ // hooks
+ __h: []
+ };
+}
+
+/**
+ * @template T
+ */
+export class Deferred {
+ constructor() {
+ // eslint-disable-next-line lines-around-comment
+ /** @type {Promise} */
+ this.promise = new Promise((resolve, reject) => {
+ this.resolve = resolve;
+ this.reject = reject;
+ });
+ }
+}
diff --git a/test/compat/async.test.jsx b/test/compat/async.test.jsx
new file mode 100644
index 00000000..fe513e11
--- /dev/null
+++ b/test/compat/async.test.jsx
@@ -0,0 +1,192 @@
+import { renderToStringAsync } from '../../src/index.js';
+import { h } from 'preact';
+import { Suspense, useId } from 'preact/compat';
+import { expect } from 'chai';
+import { createSuspender } from '../utils.js';
+
+describe('Async renderToString', () => {
+ it('should render JSX after a suspense boundary', async () => {
+ const { Suspender, suspended } = createSuspender();
+
+ const promise = renderToStringAsync(
+ loading...}>
+
+ bar
+
+
+ );
+
+ const expected = `bar
`;
+
+ suspended.resolve();
+
+ const rendered = await promise;
+
+ expect(rendered).to.equal(expected);
+ });
+
+ it('should render JSX with nested suspended components', async () => {
+ const {
+ Suspender: SuspenderOne,
+ suspended: suspendedOne
+ } = createSuspender();
+ const {
+ Suspender: SuspenderTwo,
+ suspended: suspendedTwo
+ } = createSuspender();
+
+ const promise = renderToStringAsync(
+
+
+
+ one
+
+ two
+
+ three
+
+
+
+ );
+
+ const expected = ``;
+
+ suspendedOne.resolve();
+ suspendedTwo.resolve();
+
+ const rendered = await promise;
+
+ expect(rendered).to.equal(expected);
+ });
+
+ it('should render JSX with nested suspense boundaries', async () => {
+ const {
+ Suspender: SuspenderOne,
+ suspended: suspendedOne
+ } = createSuspender();
+ const {
+ Suspender: SuspenderTwo,
+ suspended: suspendedTwo
+ } = createSuspender();
+
+ const promise = renderToStringAsync(
+
+
+
+ one
+
+
+ two
+
+
+ three
+
+
+
+ );
+
+ const expected = ``;
+
+ suspendedOne.resolve();
+ suspendedTwo.resolve();
+
+ const rendered = await promise;
+
+ expect(rendered).to.equal(expected);
+ });
+
+ it('should render JSX with multiple suspended direct children within a single suspense boundary', async () => {
+ const {
+ Suspender: SuspenderOne,
+ suspended: suspendedOne
+ } = createSuspender();
+ const {
+ Suspender: SuspenderTwo,
+ suspended: suspendedTwo
+ } = createSuspender();
+ const {
+ Suspender: SuspenderThree,
+ suspended: suspendedThree
+ } = createSuspender();
+
+ const promise = renderToStringAsync(
+
+
+
+ one
+
+
+
+ two
+
+
+
+ three
+
+
+
+ );
+
+ const expected = ``;
+
+ suspendedOne.resolve();
+ suspendedTwo.resolve();
+ suspendedThree.resolve();
+
+ const rendered = await promise;
+
+ expect(rendered).to.equal(expected);
+ });
+
+ it('should rethrow error thrown after suspending', async () => {
+ const { suspended, getResolved } = createSuspender();
+
+ function Suspender() {
+ if (!getResolved()) {
+ throw suspended.promise;
+ }
+
+ throw new Error('fail');
+ }
+
+ const promise = renderToStringAsync(
+ loading...}>
+
+ );
+
+ let msg = '';
+ try {
+ suspended.resolve();
+ await promise;
+ } catch (err) {
+ msg = err.message;
+ }
+
+ expect(msg).to.equal('fail');
+ });
+
+ it('should support hooks', async () => {
+ const { suspended, getResolved } = createSuspender();
+
+ function Suspender() {
+ const id = useId();
+
+ if (!getResolved()) {
+ throw suspended.promise;
+ }
+
+ return {typeof id === 'string' ? 'ok' : 'fail'}
;
+ }
+
+ const promise = renderToStringAsync(
+ loading...}>
+
+ );
+
+ suspended.resolve();
+ const rendered = await promise;
+ expect(rendered).to.equal('ok
');
+ });
+});
diff --git a/test/compat/index.test.jsx b/test/compat/index.test.jsx
new file mode 100644
index 00000000..d30cba89
--- /dev/null
+++ b/test/compat/index.test.jsx
@@ -0,0 +1,12 @@
+import render from '../../src/index.js';
+import { createElement } from 'preact/compat';
+import { expect } from 'chai';
+
+describe('compat', () => {
+ it('should not duplicate class attribute when className is empty', async () => {
+ let rendered = render(createElement('div', { className: '' }));
+ let expected = `
`;
+
+ expect(rendered).to.equal(expected);
+ });
+});
diff --git a/test/context.test.js b/test/context.test.jsx
similarity index 96%
rename from test/context.test.js
rename to test/context.test.jsx
index d0cfcc40..98172efe 100644
--- a/test/context.test.js
+++ b/test/context.test.jsx
@@ -1,7 +1,7 @@
-import render from '../src/jsx';
+import render from '../src/jsx.js';
import { h, createContext, Component } from 'preact';
import { expect } from 'chai';
-import { dedent } from './utils';
+import { dedent } from './utils.js';
describe('context', () => {
let renderJsx = (jsx, opts) => render(jsx, null, opts).replace(/ {2}/g, '\t');
diff --git a/test/debug/index.test.jsx b/test/debug/index.test.jsx
new file mode 100644
index 00000000..bf6aebb8
--- /dev/null
+++ b/test/debug/index.test.jsx
@@ -0,0 +1,26 @@
+import 'preact/debug';
+import render from '../../src/index.js';
+import { h } from 'preact';
+import { expect } from 'chai';
+
+describe('debug', () => {
+ it('should not throw "Objects are not valid as a child" error', () => {
+ expect(() => render({'foo'}
)).not.to.throw();
+ expect(() => render({2}
)).not.to.throw();
+ expect(() => render({true}
)).not.to.throw();
+ expect(() => render({false}
)).not.to.throw();
+ expect(() => render({null}
)).not.to.throw();
+ expect(() => render({undefined}
)).not.to.throw();
+ });
+
+ it('should not throw "Objects are not valid as a child" error #2', () => {
+ function Str() {
+ return ['foo'];
+ }
+ expect(() => render({'foo'}bar
)).not.to.throw();
+ });
+});
diff --git a/test/index.test.js b/test/index.test.js
deleted file mode 100644
index 32fcaf1e..00000000
--- a/test/index.test.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import renderToString, {
- render,
- shallowRender,
- renderToStaticMarkup,
- renderToString as _renderToString
-} from '../src';
-import { expect } from 'chai';
-
-describe('render-to-string', () => {
- describe('exports', () => {
- it('exposes renderToString as default', () => {
- expect(renderToString).to.be.a('function');
- });
-
- it('exposes render as a named export', () => {
- expect(render).to.be.a('function');
- expect(render).to.equal(renderToString);
- });
-
- it('exposes renderToString as a named export', () => {
- expect(_renderToString).to.be.a('function');
- expect(_renderToString).to.equal(renderToString);
- });
-
- it('exposes renderToStaticMarkup as a named export', () => {
- expect(renderToStaticMarkup).to.be.a('function');
- expect(renderToStaticMarkup).to.equal(renderToStaticMarkup);
- });
-
- it('exposes shallowRender as a named export', () => {
- expect(shallowRender).to.be.a('function');
- });
- });
-});
diff --git a/test/index.test.jsx b/test/index.test.jsx
new file mode 100644
index 00000000..491c3e86
--- /dev/null
+++ b/test/index.test.jsx
@@ -0,0 +1,21 @@
+import renderToString from '../src/index.js';
+import { default as renderToStringPretty, shallowRender } from '../src/jsx.js';
+import { expect } from 'chai';
+
+describe('render-to-string', () => {
+ describe('exports', () => {
+ it('exposes renderToString as default', () => {
+ expect(renderToString).to.be.a('function');
+ });
+ });
+});
+
+describe('render-to-string/jsx', () => {
+ it('exposes renderToStringPretty as default export', () => {
+ expect(renderToStringPretty).to.be.a('function');
+ });
+
+ it('exposes shallowRender as a named export', () => {
+ expect(shallowRender).to.be.a('function');
+ });
+});
diff --git a/test/jsx.test.js b/test/jsx.test.jsx
similarity index 91%
rename from test/jsx.test.js
rename to test/jsx.test.jsx
index 733ebaf4..e2f153cf 100644
--- a/test/jsx.test.js
+++ b/test/jsx.test.jsx
@@ -1,7 +1,7 @@
-import render from '../src/jsx';
+import render from '../src/jsx.js';
import { h } from 'preact';
import { expect } from 'chai';
-import { dedent } from './utils';
+import { dedent } from './utils.js';
describe('jsx', () => {
let renderJsx = (jsx, opts) => render(jsx, null, opts).replace(/ {2}/g, '\t');
@@ -163,4 +163,12 @@ describe('jsx', () => {
{{ hello: 'world' }}
)).to.equal('
');
+ });
+
+ it('should not render function children', () => {
+ expect(renderJsx({() => {}}
)).to.equal('
');
+ });
});
diff --git a/test/preact-render-to-string-tests.tsx b/test/preact-render-to-string-tests.tsx
index 4f6924d1..b2d9ba8c 100644
--- a/test/preact-render-to-string-tests.tsx
+++ b/test/preact-render-to-string-tests.tsx
@@ -1,4 +1,4 @@
-import render from '../src';
+import render from '../src/index.js';
import { h } from 'preact';
let vdom = content
;
diff --git a/test/pretty.test.js b/test/pretty.test.jsx
similarity index 59%
rename from test/pretty.test.js
rename to test/pretty.test.jsx
index 5c6b4410..a5812dc2 100644
--- a/test/pretty.test.js
+++ b/test/pretty.test.jsx
@@ -1,11 +1,11 @@
-import { render as basicRender } from '../src';
-import { render } from '../src/jsx';
+import basicRender from '../src/index.js';
+import { render } from '../src/jsx.js';
import { h, Fragment } from 'preact';
import { expect } from 'chai';
-import { dedent } from './utils';
+import { dedent, svgAttributes, htmlAttributes } from './utils.js';
describe('pretty', () => {
- let prettyRender = (jsx) => render(jsx, {}, { pretty: true });
+ let prettyRender = (jsx, opts) => render(jsx, {}, { pretty: true, ...opts });
it('should render no whitespace by default', () => {
let rendered = basicRender(
@@ -120,35 +120,19 @@ describe('pretty', () => {
// prettier-ignore
expect(prettyRender(
hello{' '}
- )).to.equal(dedent`
-
- hello
-
- `);
+ )).to.equal(`\n\thello \n\t
`);
// prettier-ignore
expect(prettyRender(
hello{' '}
- )).to.equal(dedent`
-
- hello
-
- `);
+ )).to.equal(`\n\thello \n\t
`);
});
it('should join adjacent text nodeswith Fragments', () => {
// prettier-ignore
expect(prettyRender(
foo bar{' '}
- )).to.equal(dedent`
-
- foobar
-
- `);
+ )).to.equal(`\n\tfoobar \n\t
`);
});
it('should collapse whitespace', () => {
@@ -158,12 +142,7 @@ describe('pretty', () => {
ab
)
- ).to.equal(dedent`
-
- a
- b
-
- `);
+ ).to.equal(`\n\ta\n\tb \n
`);
expect(
prettyRender(
@@ -171,12 +150,7 @@ describe('pretty', () => {
a b
)
- ).to.equal(dedent`
-
- a
- b
-
- `);
+ ).to.equal(`\n\ta \n\tb \n
`);
expect(
prettyRender(
@@ -198,12 +172,7 @@ describe('pretty', () => {
a b
)
- ).to.equal(dedent`
-
- a\
- b
-
- `);
+ ).to.equal(`\n\ta \n\tb \n
`);
expect(prettyRender( b )).to.equal(dedent`
b
@@ -215,11 +184,68 @@ describe('pretty', () => {
-
- `);
+ ).to.equal(`\n\t
`);
+ });
+
+ it('should prevent JSON injection', () => {
+ expect(prettyRender({{ hello: 'world' }}
)).to.equal(
+ '
'
+ );
+ });
+
+ it('should not render function children', () => {
+ expect(prettyRender({() => {}}
)).to.equal('
');
+ });
+
+ it('should render SVG elements', () => {
+ let rendered = prettyRender(
+
+
+
+
+
+
+
+ );
+
+ expect(rendered).to.equal(
+ `\n\t\n\t\t
\n\t \n\t\n\t\t \n `
+ );
+ });
+
+ describe('Attribute casing', () => {
+ it('should have correct SVG casing', () => {
+ for (let name in svgAttributes) {
+ let value = svgAttributes[name];
+
+ let rendered = prettyRender(
+
+
+ );
+ expect(rendered).to.equal(
+ `\n\t `
+ );
+ }
+ });
+
+ it('should have correct HTML casing', () => {
+ for (let name in htmlAttributes) {
+ let value = htmlAttributes[name];
+
+ if (name === 'checked') {
+ let rendered = prettyRender(
);
+ expect(rendered).to.equal(`
`);
+ }
+ }
+ });
});
});
diff --git a/test/render.test.js b/test/render.test.jsx
similarity index 66%
rename from test/render.test.js
rename to test/render.test.jsx
index 9327d496..588c86f6 100644
--- a/test/render.test.js
+++ b/test/render.test.jsx
@@ -1,8 +1,34 @@
-import { render, shallowRender } from '../src';
-import { h, Component, createContext, Fragment, options } from 'preact';
-import { useState, useContext, useEffect, useLayoutEffect } from 'preact/hooks';
+import render from '../src/index.js';
+import renderToStringPretty from '../src/pretty.js';
+import renderToStringJSX from '../src/jsx.js';
+import {
+ h,
+ Component,
+ createContext,
+ Fragment,
+ options,
+ createRef
+} from 'preact';
+import {
+ useState,
+ useContext,
+ useEffect,
+ useLayoutEffect,
+ useMemo,
+ useId
+} from 'preact/hooks';
import { expect } from 'chai';
import { spy, stub, match } from 'sinon';
+import { svgAttributes, htmlAttributes } from './utils.js';
+
+function shallowRender(vnode) {
+ return renderToStringJSX(vnode, context, {
+ jsx: false,
+ xml: false,
+ pretty: ' ',
+ shallow: true
+ });
+}
describe('render', () => {
describe('Basic JSX', () => {
@@ -62,7 +88,7 @@ describe('render', () => {
});
it('should omit ref attribute', () => {
- let rendered = render(
),
+ let rendered = render(
),
expected = `
`;
expect(rendered).to.equal(expected);
@@ -82,9 +108,23 @@ describe('render', () => {
expect(rendered).to.equal(expected);
});
- it('should omit defaultValue attribute', () => {
+ it('should serialize defaultValue props to the value attribute', () => {
let rendered = render(
),
- expected = `
`;
+ expected = `
`;
+
+ expect(rendered).to.equal(expected);
+ });
+
+ it('should serialize defaultChecked prop to the checked attribute', () => {
+ let rendered = render(
),
+ expected = `
`;
+
+ expect(rendered).to.equal(expected);
+ });
+
+ it('should support false aria-* attributes', () => {
+ let rendered = render(
);
+ expect(rendered).to.equal(`
`);
+ });
+
+ it('should support false data-* attributes', () => {
+ let rendered = render(
);
+ expect(rendered).to.equal(`
`);
+ });
+
describe('attribute name sanitization', () => {
it('should omit attributes with invalid names', () => {
let rendered = render(
@@ -157,7 +214,7 @@ describe('render', () => {
it('should encode entities', () => {
let rendered = render(&'}>{'"<>&'}
),
- expected = `"<>&
`;
+ expected = `"<>&
`;
expect(rendered).to.equal(expected);
});
@@ -201,13 +258,13 @@ describe('render', () => {
`;
+ expected = `
`;
expect(rendered).to.equal(expected);
});
it('should self-close custom void elements', () => {
- let rendered = render(
+ let rendered = renderToStringPretty(
,
@@ -237,14 +294,14 @@ describe('render', () => {
it('should serialize object styles', () => {
let rendered = render(
),
- expected = `
`;
+ expected = `
`;
expect(rendered).to.equal(expected);
});
it('should preserve CSS Custom Properties', () => {
let rendered = render(
),
- expected = `
`;
+ expected = `
`;
expect(rendered).to.equal(expected);
});
@@ -277,9 +334,15 @@ describe('render', () => {
);
expect(rendered).to.equal(
- `
{h('image', { 'xlink:href': '#' })} );
+
+ expect(rendered).to.equal(`child foo '
+ `\n child \n foo \n `
);
});
@@ -737,10 +800,10 @@ describe('render', () => {
let rendered = render(hi
');
- rendered = render(
, null, {
- sortAttributes: true
- });
+ let rendered = renderToStringPretty(
+
,
+ null,
+ {
+ sortAttributes: true
+ }
+ );
expect(rendered).to.equal('
');
});
});
describe('xml:true', () => {
- let renderXml = (jsx) => render(jsx, null, { xml: true });
+ let renderXml = (jsx) => renderToStringPretty(jsx, null, { xml: true });
it('should render end-tags', () => {
expect(renderXml(
)).to.equal(`
`);
@@ -851,7 +918,7 @@ describe('render', () => {
});
describe('state locking', () => {
- it('should set _dirty and __d to true', () => {
+ it('should set __d (_dirty) to true', () => {
let inst;
class Foo extends Component {
constructor(props, context) {
@@ -865,7 +932,7 @@ describe('render', () => {
expect(render(
');
- expect(inst).to.have.property('_dirty', true);
+ // expect(inst).to.have.property('_dirty', true);
expect(inst).to.have.property('__d', true);
});
@@ -924,7 +991,7 @@ describe('render', () => {
});
it('should indent Fragment children when pretty printing', () => {
- let html = render(
+ let html = renderToStringPretty(
foo
@@ -1052,12 +1119,48 @@ describe('render', () => {
});
it('should work with useState', () => {
+ let renders = 0;
+
function Foo() {
+ renders++;
let [v] = useState(0);
return {v}
;
}
expect(render(0
');
+ expect(renders).to.equal(1);
+ });
+
+ it('should re-render when useState setter is called during rendering', () => {
+ let renders = 0;
+
+ function Foo() {
+ renders++;
+ let [v, setV] = useState(0);
+ useMemo(() => {
+ setV(1);
+ }, []);
+ return {v}
;
+ }
+
+ expect(render(1
');
+ expect(renders).to.equal(2);
+ });
+
+ it('should re-render up to 25 times to allow useState settling', () => {
+ let renders = 0;
+
+ function Foo() {
+ renders++;
+ let [v, setV] = useState(0);
+ if (v < 30) {
+ setV(v + 1);
+ }
+ return {v}
;
+ }
+
+ expect(render(24
');
+ expect(renders).to.equal(25);
});
it('should not trigger useEffect callbacks', () => {
@@ -1098,30 +1201,38 @@ describe('render', () => {
if (oldCommit) oldCommit(...args);
};
- function Component1({ children }) {
- return children;
- }
+ const outer =
;
- function Component2() {
- return
;
+ function Outer() {
+ return inner;
}
- const vnode2 = 1 ;
- const vnode1 = {vnode2} ;
+ function Inner() {
+ return div;
+ }
- render(vnode1);
+ render(outer);
expect(calls).to.deep.equal([
- ['_diff', [vnode1]],
- ['_render', [vnode1]],
- ['diffed', [vnode1]],
- ['_diff', [vnode2]],
- ['_render', [vnode2]],
- ['diffed', [vnode2]],
- ['_commit', [vnode1, []]]
+ ['_diff', [outer]], // before diff
+ ['_render', [outer]], // render attempt
+
+ ['_diff', [inner]], // before diff
+ ['_render', [inner]], // render attempt
+
+ // innermost
+ ['_diff', [div]], // before diff
+ ['diffed', [div]], // after diff
+
+ ['diffed', [inner]], // after diff
+ ['diffed', [outer]], // after diff
+
+ ['_commit', [outer, []]] // commit root
]);
- expect(calls.length).to.equal(7);
+ expect(calls.length).to.equal(9);
options.__b = oldDiff;
options.__r = oldRender;
@@ -1139,6 +1250,20 @@ describe('render', () => {
);
});
+ it('should not add a selected attribute if one already exists', () => {
+ let res = render(
+
+ A
+
+ B
+
+
+ );
+ expect(res).to.equal(
+ '
A B '
+ );
+ });
+
it('should render select value on option with a Fragment', () => {
let res = render(
@@ -1182,4 +1307,397 @@ describe('render', () => {
'2 {{ hello: 'world' }}
)).to.equal('
');
+ });
+
+ it('should not render function children', () => {
+ expect(render({() => {}}
)).to.equal('
');
+ });
+
+ describe('HTML Comments', () => {
+ it('should render HTML comments via Fragments', () => {
+ expect(render(
+ foo
+
+ )
+ ).to.equal('');
+ });
+ });
+
+ describe('vnode masks (useId)', () => {
+ it('should skip component top level Fragment child', () => {
+ const Wrapper = ({ children }) => {children} ;
+
+ function Foo() {
+ const id = useId();
+ return {id}
;
+ }
+
+ function App() {
+ const id = useId();
+ return (
+
+ );
+ }
+
+ expect(render({this.state.error.message}
+ ) : (
+ {this.state.error.message}
+ ) : (
+ fail
');
+ expect(args).to.deep.equal({ error: 'fail', info: {} });
+ });
+
+ it("should not invoke parent's componentDidCatch", () => {
+ class ErrorBoundary extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { error: null };
+ }
+ componentDidCatch(error) {
+ this.setState({ error });
+ }
+
+ render() {
+ return this.state.error ? (
+ {this.state.error.message}
+ ) : (
+ it doesn't work
;
+ }
+ }
+
+ let args = null;
+ class ErrorBoundary extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { error: null };
+ }
+ componentDidCatch(error, info) {
+ args = { error: error.message, info };
+ this.setState({ error });
+ }
+
+ render() {
+ return this.state.error ? (
+ {this.state.error.message}
+ ) : (
+ fail
');
+ expect(args).to.deep.equal({ error: 'fail', info: {} });
+
+ expect(throwerCatchCalled).to.equal(
+ false,
+ "Thrower's componentDidCatch should not be called"
+ );
+ });
+
+ it('should invoke componentWillUpdate on state render', () => {
+ let calledWillUpdate = false;
+
+ class ErrorBoundary extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { error: null };
+ }
+ componentWillUpdate() {
+ calledWillUpdate = true;
+ }
+ componentDidCatch(error, info) {
+ this.setState({ error });
+ }
+
+ render() {
+ return this.state.error ? (
+ {this.state.error.message}
+ ) : (
+ fail
');
+ expect(calledWillUpdate).to.equal(
+ true,
+ 'Did not call componentWillUpdate'
+ );
+ });
+ });
+
+ describe('getDerivedStateFromError', () => {
+ it('should disable gDSFE by default', () => {
+ class ErrorBoundary extends Component {
+ static getDerivedStateFromError(error) {
+ return { error };
+ }
+
+ render() {
+ return this.state.error ? (
+ {this.state.error.message}
+ ) : (
+ it works
: it works
');
+ expect(calls).to.deep.equal([
+ ['gDSFE', 'fail'],
+ ['cDC', 'fail']
+ ]);
+ expect(cDCState).to.deep.equal({});
+ expect(renderState).to.deep.equal({
+ foo: 1,
+ bar: 2
+ });
+ });
+
+ it('should work without componentDidCatch', () => {
+ class ErrorBoundary extends Component {
+ static getDerivedStateFromError(error) {
+ return { error: error.message };
+ }
+
+ render() {
+ return this.state.error ? {this.state.error}
: fail
');
+ });
+ });
+ });
+
+ describe('Attribute casing', () => {
+ it('should have correct SVG casing', () => {
+ for (let name in svgAttributes) {
+ let value = svgAttributes[name];
+
+ let rendered = render(
+
+
+ );
+ expect(rendered).to.equal(`
+
+
+ );
+
+ expect(rendered).to.equal(
+ '
);
+ expect(rendered).to.equal(`
`);
+ }
+ }
+ });
+ });
+
+ describe('precompiled JSX', () => {
+ it('should render template', () => {
+ let vnode = foo foo
');
+ });
+
+ it('should render template with attribute expressions', () => {
+ let vnode = (
+ foo ']} exprs={['class="foo"']} />
+ );
+ let rendered = render(vnode);
+ expect(rendered).to.equal('foo
');
+ });
+
+ it('should render template with child expressions', () => {
+ let vnode = (
+ foo', '']} exprs={[bar ]} />
+ );
+ let rendered = render(vnode);
+ expect(rendered).to.equal('foobar
');
+ });
+
+ it('should render mapped children', () => {
+ let vnode = (
+ foo', '', '']}
+ exprs={[bar , [foo
, bar
]]}
+ />
+ );
+ let rendered = render(vnode);
+ expect(rendered).to.equal(
+ ''
+ );
+ });
+
+ it('should bypass top level fragment detection', () => {
+ function Foo(props) {
+ return props.children;
+ }
+ let vnode = (
+
+ foo', '']} exprs={[bar ]} />
+
+ );
+ let rendered = render(vnode);
+ expect(rendered).to.equal('foobar
');
+ });
+ });
});
diff --git a/test/shallowRender.test.js b/test/shallowRender.test.jsx
similarity index 88%
rename from test/shallowRender.test.js
rename to test/shallowRender.test.jsx
index 5da311b0..8b981f36 100644
--- a/test/shallowRender.test.js
+++ b/test/shallowRender.test.jsx
@@ -1,4 +1,4 @@
-import { shallowRender } from '../src';
+import { shallowRender } from '../src/jsx.js';
import { h, Fragment } from 'preact';
import { expect } from 'chai';
import { spy } from 'sinon';
@@ -18,7 +18,9 @@ describe('shallowRender()', () => {
asdf
-
+ ,
+ null,
+ { pretty: false, jsx: false }
);
expect(rendered).to.equal(
@@ -39,7 +41,9 @@ describe('shallowRender()', () => {
let rendered = shallowRender(
asdf
-
+ ,
+ null,
+ { pretty: false, jsx: false }
);
expect(rendered).to.equal(
diff --git a/test/utils.js b/test/utils.js
index abb3418a..6a2c10db 100644
--- a/test/utils.js
+++ b/test/utils.js
@@ -1,3 +1,5 @@
+import { Deferred } from '../src/util';
+
/**
* tag to remove leading whitespace from tagged template
* literal.
@@ -10,3 +12,432 @@ export function dedent([str]) {
.join('\n')
.replace(/(^\n+|\n+\s*$)/g, '');
}
+
+export function createSuspender() {
+ const deferred = new Deferred();
+ let resolved;
+
+ deferred.promise.then(() => (resolved = true));
+ function Suspender({ children = null }) {
+ if (!resolved) {
+ throw deferred.promise;
+ }
+
+ return children;
+ }
+
+ return {
+ getResolved() {
+ return resolved;
+ },
+ suspended: deferred,
+ Suspender
+ };
+}
+
+export const svgAttributes = {
+ accentHeight: 'accent-height',
+ accumulate: 'accumulate',
+ additive: 'additive',
+ alignmentBaseline: 'alignment-baseline',
+ allowReorder: 'allowReorder', // unsure
+ alphabetic: 'alphabetic',
+ amplitude: 'amplitude',
+ arabicForm: 'arabic-form',
+ ascent: 'ascent',
+ attributeName: 'attributeName',
+ attributeType: 'attributeType',
+ autoReverse: 'autoReverse', // unsure
+ azimuth: 'azimuth',
+ baseFrequency: 'baseFrequency',
+ baselineShift: 'baseline-shift',
+ baseProfile: 'baseProfile',
+ bbox: 'bbox',
+ begin: 'begin',
+ bias: 'bias',
+ by: 'by',
+ calcMode: 'calcMode',
+ capHeight: 'cap-height',
+ class: 'class',
+ clip: 'clip',
+ clipPathUnits: 'clipPathUnits',
+ clipPath: 'clip-path',
+ clipRule: 'clip-rule',
+ color: 'color',
+ colorInterpolation: 'color-interpolation',
+ colorInterpolationFilters: 'color-interpolation-filters',
+ colorProfile: 'color-profile',
+ colorRendering: 'color-rendering',
+ contentScriptType: 'contentScriptType',
+ contentStyleType: 'contentStyleType',
+ crossorigin: 'crossorigin',
+ cursor: 'cursor',
+ cx: 'cx',
+ cy: 'cy',
+ d: 'd',
+ decelerate: 'decelerate',
+ descent: 'descent',
+ diffuseConstant: 'diffuseConstant',
+ direction: 'direction',
+ display: 'display',
+ divisor: 'divisor',
+ dominantBaseline: 'dominant-baseline',
+ dur: 'dur',
+ dx: 'dx',
+ dy: 'dy',
+ edgeMode: 'edgeMode',
+ elevation: 'elevation',
+ enableBackground: 'enable-background',
+ end: 'end',
+ exponent: 'exponent',
+ fill: 'fill',
+ fillOpacity: 'fill-opacity',
+ fillRule: 'fill-rule',
+ filter: 'filter',
+ filterRes: 'filterRes',
+ filterUnits: 'filterUnits',
+ floodColor: 'flood-color',
+ floodOpacity: 'flood-opacity',
+ fontFamily: 'font-family',
+ fontSize: 'font-size',
+ fontSizeAdjust: 'font-size-adjust',
+ fontStretch: 'font-stretch',
+ fontStyle: 'font-style',
+ fontVariant: 'font-variant',
+ fontWeight: 'font-weight',
+ format: 'format',
+ from: 'from',
+ fx: 'fx',
+ fy: 'fy',
+ g1: 'g1',
+ g2: 'g2',
+ glyphName: 'glyph-name',
+ glyphOrientationHorizontal: 'glyph-orientation-horizontal',
+ glyphOrientationVertical: 'glyph-orientation-vertical',
+ glyphRef: 'glyphRef',
+ gradientTransform: 'gradientTransform',
+ gradientUnits: 'gradientUnits',
+ hanging: 'hanging',
+ horizAdvX: 'horiz-adv-x',
+ horizOriginX: 'horiz-origin-x',
+ ideographic: 'ideographic',
+ imageRendering: 'image-rendering',
+ in: 'in',
+ in2: 'in2',
+ intercept: 'intercept',
+ k: 'k',
+ k1: 'k1',
+ k2: 'k2',
+ k3: 'k3',
+ k4: 'k4',
+ kernelMatrix: 'kernelMatrix',
+ kernelUnitLength: 'kernelUnitLength',
+ kerning: 'kerning',
+ keyPoints: 'keyPoints',
+ keySplines: 'keySplines',
+ keyTimes: 'keyTimes',
+ lengthAdjust: 'lengthAdjust',
+ letterSpacing: 'letter-spacing',
+ lightingColor: 'lighting-color',
+ limitingConeAngle: 'limitingConeAngle',
+ local: 'local',
+ markerEnd: 'marker-end',
+ markerMid: 'marker-mid',
+ markerStart: 'marker-start',
+ markerHeight: 'markerHeight',
+ markerUnits: 'markerUnits',
+ markerWidth: 'markerWidth',
+ mask: 'mask',
+ maskContentUnits: 'maskContentUnits',
+ maskUnits: 'maskUnits',
+ mathematical: 'mathematical',
+ numOctaves: 'numOctaves',
+ offset: 'offset',
+ opacity: 'opacity',
+ operator: 'operator',
+ order: 'order',
+ orient: 'orient',
+ orientation: 'orientation',
+ origin: 'origin',
+ overflow: 'overflow',
+ overlinePosition: 'overline-position',
+ overlineThickness: 'overline-thickness',
+ panose1: 'panose-1',
+ paintOrder: 'paint-order',
+ pathLength: 'pathLength',
+ patternContentUnits: 'patternContentUnits',
+ patternTransform: 'patternTransform',
+ patternUnits: 'patternUnits',
+ pointerEvents: 'pointer-events',
+ points: 'points',
+ pointsAtX: 'pointsAtX',
+ pointsAtY: 'pointsAtY',
+ pointsAtZ: 'pointsAtZ',
+ preserveAlpha: 'preserveAlpha',
+ preserveAspectRatio: 'preserveAspectRatio',
+ primitiveUnits: 'primitiveUnits',
+ r: 'r',
+ radius: 'radius',
+ refX: 'refX',
+ refY: 'refY',
+ rel: 'rel',
+ renderingIntent: 'rendering-intent',
+ repeatCount: 'repeatCount',
+ repeatDur: 'repeatDur',
+ requiredExtensions: 'requiredExtensions',
+ requiredFeatures: 'requiredFeatures',
+ restart: 'restart',
+ result: 'result',
+ rotate: 'rotate',
+ rx: 'rx',
+ ry: 'ry',
+ scale: 'scale',
+ seed: 'seed',
+ shapeRendering: 'shape-rendering',
+ slope: 'slope',
+ spacing: 'spacing',
+ specularConstant: 'specularConstant',
+ specularExponent: 'specularExponent',
+ speed: 'speed',
+ spreadMethod: 'spreadMethod',
+ startOffset: 'startOffset',
+ stdDeviation: 'stdDeviation',
+ stemh: 'stemh',
+ stemv: 'stemv',
+ stitchTiles: 'stitchTiles',
+ stopColor: 'stop-color',
+ stopOpacity: 'stop-opacity',
+ strikethroughPosition: 'strikethrough-position',
+ strikethroughThickness: 'strikethrough-thickness',
+ string: 'string',
+ stroke: 'stroke',
+ strokeDasharray: 'stroke-dasharray',
+ strokeDashoffset: 'stroke-dashoffset',
+ strokeLinecap: 'stroke-linecap',
+ strokeLinejoin: 'stroke-linejoin',
+ strokeMiterlimit: 'stroke-miterlimit',
+ strokeOpacity: 'stroke-opacity',
+ strokeWidth: 'stroke-width',
+ surfaceScale: 'surfaceScale',
+ systemLanguage: 'systemLanguage',
+ tableValues: 'tableValues',
+ targetX: 'targetX',
+ targetY: 'targetY',
+ textAnchor: 'text-anchor',
+ textDecoration: 'text-decoration',
+ textRendering: 'text-rendering',
+ textLength: 'textLength',
+ to: 'to',
+ transform: 'transform',
+ transformOrigin: 'transform-origin',
+ u1: 'u1',
+ u2: 'u2',
+ underlinePosition: 'underline-position',
+ underlineThickness: 'underline-thickness',
+ unicode: 'unicode',
+ unicodeBidi: 'unicode-bidi',
+ unicodeRange: 'unicode-range',
+ unitsPerEm: 'units-per-em',
+ vAlphabetic: 'v-alphabetic',
+ vHanging: 'v-hanging',
+ vIdeographic: 'v-ideographic',
+ vMathematical: 'v-mathematical',
+ values: 'values',
+ vectorEffect: 'vector-effect',
+ version: 'version',
+ vertAdvY: 'vert-adv-y',
+ vertOriginX: 'vert-origin-x',
+ vertOriginY: 'vert-origin-y',
+ viewBox: 'viewBox',
+ viewTarget: 'viewTarget',
+ visibility: 'visibility',
+ widths: 'widths',
+ wordSpacing: 'word-spacing',
+ writingMode: 'writing-mode',
+ x: 'x',
+ xHeight: 'x-height',
+ x1: 'x1',
+ x2: 'x2',
+ xChannelSelector: 'xChannelSelector',
+ xlinkActuate: 'xlink:actuate',
+ xlinkArcrole: 'xlink:arcrole',
+ xlinkHref: 'xlink:href',
+ xlinkRole: 'xlink:role',
+ xlinkShow: 'xlink:show',
+ xlinkTitle: 'xlink:title',
+ xlinkType: 'xlink:type',
+ xmlBase: 'xml:base',
+ xmlLang: 'xml:lang',
+ xmlSpace: 'xml:space',
+ y: 'y',
+ y1: 'y1',
+ y2: 'y2',
+ yChannelSelector: 'yChannelSelector',
+ z: 'z',
+ zoomAndPan: 'zoomAndPan'
+};
+
+export const htmlAttributes = {
+ accept: 'accept',
+ acceptCharset: 'accept-charset',
+ accessKey: 'accesskey',
+ action: 'action',
+ allow: 'allow',
+ // allowFullScreen: '', // unsure?
+ // allowTransparency: '', // unsure?
+ alt: 'alt',
+ as: 'as',
+ async: 'async',
+ autocomplete: 'autocomplete',
+ autoComplete: 'autocomplete',
+ autocorrect: 'autocorrect',
+ autoCorrect: 'autocorrect',
+ autofocus: 'autofocus',
+ autoFocus: 'autofocus',
+ autoPlay: 'autoplay',
+ capture: 'capture',
+ cellPadding: 'cellPadding',
+ cellSpacing: 'cellSpacing',
+ charSet: 'charset',
+ challenge: 'challenge',
+ checked: 'checked',
+ cite: 'cite',
+ class: 'class',
+ className: 'class',
+ cols: 'cols',
+ colSpan: 'colspan',
+ content: 'content',
+ contentEditable: 'contenteditable',
+ contextMenu: 'contextmenu',
+ controls: 'controls',
+ coords: 'coords',
+ crossOrigin: 'crossorigin',
+ data: 'data',
+ dateTime: 'datetime',
+ default: 'default',
+ defaultChecked: 'checked',
+ defaultValue: 'value',
+ defer: 'defer',
+ dir: 'dir',
+ disabled: 'disabled',
+ download: 'download',
+ decoding: 'decoding',
+ draggable: 'draggable',
+ encType: 'enctype',
+ enterkeyhint: 'enterkeyhint',
+ for: 'for',
+ form: 'form',
+ formAction: 'formaction',
+ formEncType: 'formenctype',
+ formMethod: 'formmethod',
+ formNoValidate: 'formnovalidate',
+ formTarget: 'formtarget',
+ frameBorder: 'frameborder',
+ headers: 'headers',
+ height: 'height',
+ hidden: 'hidden',
+ high: 'high',
+ href: 'href',
+ hrefLang: 'hreflang',
+ htmlFor: 'for',
+ httpEquiv: 'http-equiv',
+ icon: 'icon',
+ id: 'id',
+ indeterminate: 'indeterminate',
+ inputMode: 'inputmode',
+ integrity: 'integrity',
+ is: 'is',
+ kind: 'kind',
+ label: 'label',
+ lang: 'lang',
+ list: 'list',
+ loading: 'loading',
+ loop: 'loop',
+ low: 'low',
+ manifest: 'manifest',
+ max: 'max',
+ maxLength: 'maxlength',
+ media: 'media',
+ method: 'method',
+ min: 'min',
+ minLength: 'minlength',
+ multiple: 'multiple',
+ muted: 'muted',
+ name: 'name',
+ nomodule: 'nomodule',
+ nonce: 'nonce',
+ noValidate: 'novalidate',
+ open: 'open',
+ optimum: 'optimum',
+ part: 'part',
+ pattern: 'pattern',
+ ping: 'ping',
+ placeholder: 'placeholder',
+ playsInline: 'playsinline',
+ poster: 'poster',
+ preload: 'preload',
+ readonly: 'readonly',
+ readOnly: 'readonly',
+ referrerpolicy: 'referrerpolicy',
+ rel: 'rel',
+ required: 'required',
+ reversed: 'reversed',
+ role: 'role',
+ rows: 'rows',
+ rowSpan: 'rowspan',
+ sandbox: 'sandbox',
+ scope: 'scope',
+ scoped: 'scoped',
+ scrolling: 'scrolling',
+ seamless: 'seamless',
+ selected: 'selected',
+ shape: 'shape',
+ size: 'size',
+ sizes: 'sizes',
+ slot: 'slot',
+ span: 'span',
+ spellcheck: 'spellcheck',
+ spellCheck: 'spellcheck',
+ src: 'src',
+ srcset: 'srcset',
+ srcDoc: 'srcdoc',
+ srcLang: 'srclang',
+ srcSet: 'srcset',
+ start: 'start',
+ step: 'step',
+ style: 'style',
+ summary: 'summary',
+ tabIndex: 'tabindex',
+ target: 'target',
+ title: 'title',
+ type: 'type',
+ useMap: 'useMap',
+ value: 'value',
+ volume: 'volume',
+ width: 'width',
+ wmode: 'wmode',
+ wrap: 'wrap',
+
+ // Non-standard Attributes
+ autocapitalize: 'autocapitalize',
+ autoCapitalize: 'autocapitalize',
+ results: 'results',
+ translate: 'translate',
+
+ // RDFa Attributes
+ about: 'about',
+ datatype: 'datatype',
+ inlist: 'inlist',
+ prefix: 'prefix',
+ property: 'property',
+ resource: 'resource',
+ typeof: 'typeof',
+ vocab: 'vocab',
+
+ // Microdata Attributes
+ itemProp: 'itemprop',
+ itemScope: 'itemscope',
+ itemType: 'itemtype',
+ itemID: 'itemid',
+ itemRef: 'itemref'
+};