Add list of APIs used by Preact

[developit]

As suggested in developit/preact#585. Here's the list I came up with:

Browser APIs Preact Uses

• ~It will use Promise only if available, falling back to~ setTimeout(0)
• DOM APIs used are very minimal DOM core 1 / 2:
  • document.createElement() and document.createTextNode()
  • Text.prototype.nodeValue
  • Text.prototype.splitText - simply needs to exist (used as fast "is text node" check)
  • From Element.prototype:
    • .attributes NodeList
    • .setAttribute(), .getAttribute(), .removeAttribute()
    • .appendChild(), .insertBefore(), .replaceChild()

If you use SVG, createElementNS() and (get|set|remove)AttributeNS() are used.

[joaolucasl]

As of Preact 8.1.0, I also found the following ES5 APIs in use:

• Array.prototype.slice
• Array.prototype.push
• String.prototype.replace
• String.prototype.trim

[developit]

Hiya - those are all ES5 built-ins, I think the goal here was to catalog DOM methods.

[38elements]

@developit

I executed the following code to extract the execution part of the function and the reference part of the property of the object.

const fs = require('fs')

const esprima = require('esprima')
const esquery = require('esquery')


const packages = [ 
  'node_modules/preact/dist/preact.js',
  'node_modules/preact/compat/dist/compat.js',
  'node_modules/preact/debug/dist/debug.js',
  'node_modules/preact/devtools/dist/devtools.js',
  'node_modules/preact/hooks/dist/hooks.js',
  'node_modules/preact/test-utils/dist/testUtils.js',
]

const _functionNames = new Set()
const _propertyNames = new Set()

packages.forEach((path) => {
  const code = fs.readFileSync(path, {encoding: 'utf-8'})
  const ast = esprima.parse(code)
  let selector = esquery.parse('[type="CallExpression"]')
  let matches = esquery.match(ast, selector)
  matches.forEach((match) => {
    const name = match.callee.name || (match.callee.property && match.callee.property.name)
    if (name) {
      _functionNames.add(name)
    }
  })

  selector = esquery.parse('[type="MemberExpression"]')
  matches = esquery.match(ast, selector)
  matches.forEach((match) => {
    const name = match.property && match.property.name
    if (name && !_functionNames.has(name)) {
      _propertyNames.add(name)
    }
  })
})

const functionNames = Array.from(_functionNames).filter((fn) => fn.length > 1 && fn[0] !== '_')
const propertyNames = Array.from(_propertyNames).filter((fn) => fn.length > 1 && fn[0] !== '_')

console.log(JSON.stringify(functionNames, null, 2)) 
console.log(JSON.stringify(propertyNames, null, 2))

[
  "removeChild", // Node.removeChild()
  "push",
  "vnode",
  "indexOf",
  "sort",
  "some",
  "appendChild", // Node.appendChild()
  "insertBefore", // Node.insertBefore() 
  "isArray",
  "setProperty",
  "test",
  "replace",
  "toLowerCase",
  "slice",
  "addEventListener", // EventTarget.addEventListener()
  "removeEventListener", // EventTarget.removeEventListener()
  "removeAttributeNS", // element.removeAttributeNS()
  "setAttributeNS", // element.setAttributeNS()
  "removeAttribute", // Element.removeAttribute()
  "setAttribute", // element.setAttribute()
  "event",
  "sub",
  "getDerivedStateFromProps",
  "componentWillMount",
  "componentWillReceiveProps",
  "shouldComponentUpdate",
  "componentWillUpdate",
  "componentDidUpdate",
  "render",
  "getChildContext",
  "getSnapshotBeforeUpdate",
  "call",
  "createTextNode", // Document.createTextNode()
  "createElementNS", // Document.createElementNS()
  "createElement", // Document.createElement()
  "unmount",
  "componentWillUnmount",
  "constructor",
  "setState",
  "getDerivedStateFromError",
  "componentDidCatch",
  "bind",
  "resolve", // Promise.resolve()
  "children",
  "splice",
  "require",
  "create",
  "reduce",
  "toChildArray",
  "concat",
  "map",
  "then", // Promise.then
  "pop",
  "forceUpdate",
  "delete",
  "get",
  "reverse",
  "set",
  "forEach",
  "hydrate",
  "for",
  "defineProperty",
  "apply",
  "keys",
  "warn",
  "hasOwnProperty",
  "Object",
  "stringify",
  "error",
  "has",
  "type",
  "setPrototypeOf",
  "join",
  "attachPreact",
  "clearTimeout", // window.clearTimeout()
  "cancelAnimationFrame", // window.cancelAnimationFrame()
  "setTimeout", // window.setTimeout()
  "requestAnimationFrame", // window.requestAnimationFrame()
  "filter",
  "useDebugValue"
]
[
  "parentNode", // Node.parentNode
  "length",
  "defaultProps",
  "key",
  "ref",
  "props",
  "context",
  "type",
  "base",
  "debounceRendering",
  "ownerSVGElement", // SVGElement.ownerSVGElement
  "nextSibling", // Node.nextSibling
  "value", // 
  "style", // CSSStyleDeclaration
  "cssText", // CSSStyleDeclaration.cssText
  "contextType",
  "prototype",
  "state",
  "componentDidMount",
  "diffed",
  "nodeType", // Node.nodeType
  "localName",
  "is",
  "data",
  "childNodes", // Node.childNodes
  "dangerouslySetInnerHTML",
  "attributes", // Element.attributes
  "name",
  "innerHTML", // element.innerHTML
  "checked", // 
  "current",
  "forceUpdate",
  "then",
  "hydrate",
  "Fragment",
  "createRef",
  "isValidElement",
  "Component",
  "cloneElement",
  "createContext",
  "Consumer",
  "toChildArray",
  "options",
  "isPureReactComponent",
  "isReactComponent",
  "displayName",
  "default",
  "fallback",
  "revealOrder",
  "size",
  "container",
  "firstChild", // Node.firstChild
  "persist",
  "stopPropagation",
  "preventDefault",
  "isPropagationStopped",
  "isDefaultPrevented",
  "nativeEvent",
  "class",
  "$$typeof",
  "className",
  "enumerable",
  "defaultValue",
  "multiple",
  "selected",
  "ondoubleclick",
  "ondblclick",
  "onbeforeinput",
  "onchange",
  "oninput",
  "useState",
  "useReducer",
  "useEffect",
  "useLayoutEffect",
  "useRef",
  "useImperativeHandle",
  "useMemo",
  "useCallback",
  "useContext",
  "useDebugValue",
  "version",
  "Children",
  "unmountComponentAtNode",
  "createPortal",
  "createFactory",
  "findDOMNode",
  "PureComponent",
  "memo",
  "forwardRef",
  "unstable_batchedUpdates",
  "Suspense",
  "SuspenseList",
  "lazy",
  "fileName",
  "lineNumber",
  "toString",
  "propTypes",
  "lazyPropTypes",
  "message",
  "useErrorBoundary",
  "setupRerender",
  "act",
  "teardown"
]