Complex stateless component not recognized

[pke]

This component is no longer recognised if I removed the superfluous return <noscript/> at the end. The static analyser seems to have a problem also when I would just remove the last else clause since its also not really needed for the correct flow. But docgen's parser does not seem to understand, that null is also a valid return for a components render function.

const required = name => {
  throw new TypeError(`${name} is required`)
}

const ExtensionPoint = ({
  extensionName = required("extensionName"),
  children,
  ...props }) => {
  const Extension = getExtension(extensionName)

  if (typeof children === "function") {
    return children(Extension, props) || null
  } else if (typeof Extension !== "undefined") {
    return Extension ? <Extension {...props} /> : null
  } else {
    return children || null
  }
  return <noscript/>
}

[LukeChannings]

+1

I have a somewhat simple higher-order stateless component that relies on React 16's change that allows a component to return a list of components.

const InsertBetween = ({ children, Component, ...props }) =>
  children.reduce(
    (a, b) => (!a.length ? [a, b] : [...a, <Component {...props} />, b]),
    []
  )

Used like:

const Hr = () => <hr/>

<InsertBetween component={Hr}>
  <h1>Hello world!</h1>
  <p>Gonna have an hr between us!</p>
</InsertBetween>

docgen errors on this sort of component with "Error: No suitable component definition found.".

*not actually tested this, but it's something like a component I've built.

[danez]

Yes right now we rely on the fact that a component returns jsx. Because we only want to generate documentation for react components and not for helpers , utils or code only containing business logic.

We need to figure out a better algorithm to detect react components, especially stateless.

[pke]

@danez eslint-plugin-react uses a very good component detection algo. Maybe you could borrow that? https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/util/Components.js

Maybe isReturningJSX is all you'd need?

[fkling]

We could check whether a function has children or ...props as destructured parameter. Maybe that helps?

[danez]

Cannot reproduce anymore.