JSX interface v2

[yhatt]

Background

We have a virtual node interface of JSX element, to manipulate nodes easily for ergonomic templating. But it also has caused of always using a complex render function JSXSlack().

I suppose jsx-slack wants to have a simple interface without confusion and hesitation. It's the world JSXSlack() isn't needed.

v1.5.0 had a provisional improvement about usage of JSXSlack(): Some JSX components make serializable implictly due to implementing toJSON() function. However, there is ambiguous in the usability for developer. When developer wanted to manipulate raw JSON, still have to convert JSX into JSON by calling JSXSlack() explicitly.

In the new JSX interface, get rid of ambiguous and make developer use generated JSON simpler.

Proposal

The functional component for jsx-slack will return the actual JSON for output, and store meta data for JSX element in not-enumerable key of the object.

/** NOTE: The following is psuedo-code */

// Component returns JSON object
const Divider = () => ({ type: 'divider' })

// JSXSlack.h defines JSX metadata to the output
JSXSlack.h = (type, props, ...children) =>
  Object.defineProperty(
    type({ ...props, children }),
    '$$jsxslack',
    { value: { type, props, children } },
  )

console.log(JSON.stringify(<Divider />))
// => {"type":"divider"}

console.log((<Divider />).$$jsxslack)
// => { type: Divider, props: {}, children: [] }

JSON.stringify() ignores not-enumerable key so developer can use JSX element as serialized JSON for Slack API without using JSXSlack().

JSX metadata is required by built-in components to manipulate children nodes.

[yhatt]

In TypeScript, JSX element must have JSX.Element type but it is incompatible with Slack Node SDK. See also #132.

For compatibility with v1 and as a helper for type casting into any, JSXSlack() would keep providing in v2 (Pass through wrapped JSX with no operations).