Functional option doesn't work #82

adamgiebl · 2023-11-25T12:09:04Z

I tried the example from the README for Node API and it seems to only return class components.
This is the example:

const extractReactComponents = require("html-to-react-components");

extractReactComponents(
  `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <header class="header" data-component="Header">

    <h1 class="heading" data-component="Heading">Hello, world!</h1>

    <nav class="nav" data-component="Nav">
      <ul class="list">
        <li class="list-item" data-component="ListItem">#1</li>
        <li class="list-item" data-component="ListItem">#2</li>
      </ul>
    </nav>

  </header>

</body>
</html>
`,
  {
    componentType: "functional",
    moduleType: false,
  }
);

/*
{ Header: 'const Header = () => <header className="header">\n\n    <Heading></Heading>\n\n    <Nav></Nav>\n\n  </header>;',
  Heading: 'const Heading = () => <h1 className="heading">Hello, world!</h1>;',
  Nav: 'const Nav = () => <nav className="nav">\n      <ul className="list">\n        <ListItem></ListItem>\n        <ListItem></ListItem>\n      </ul>\n    </nav>;',
  ListItem: 'const ListItem = () => <li className="list-item">#2</li>;' }
*/

When I run it in a completely new Node environment without anything else installed, this is what it outputs:

{       
  Header: 'import React from "react";\n' +
    'import Heading from "./Heading";\n' +
    'import Nav from "./Nav";\n' +
    '\n' +
    'class Header extends React.Component {\n' +
    '  render() {\n' +
    '    return (\n' +
    '      <header className="header">\n' +
    '        <Heading></Heading>\n' +
    '        <Nav></Nav>\n' +
    '      </header>\n' +
    '    );\n' +
    '  }\n' +
    '}\n' +
    '\n' +
    'export default Header;\n',
  Heading: 'import React from "react";\n' +
    '\n' +
    'class Heading extends React.Component {\n' +
    '  render() {\n' +
    '    return <h1 className="heading">Hello, world!</h1>;\n' +
    '  }\n' +
    '}\n' +
    '\n' +
    'export default Heading;\n',
  Nav: 'import React from "react";\n' +
    'import ListItem from "./ListItem";\n' +
    '\n' +
    'class Nav extends React.Component {\n' +
    '  render() {\n' +
    '    return (\n' +
    '      <nav className="nav">\n' +
    '        <ul className="list">\n' +
    '          <ListItem></ListItem>\n' +
    '          <ListItem></ListItem>\n' +
    '        </ul>\n' +
    '      </nav>\n' +
    '    );\n' +
    '  }\n' +
    '}\n' +
    '\n' +
    'export default Nav;\n',
  ListItem: 'import React from "react";\n' +
    '\n' +
    'class ListItem extends React.Component {\n' +
    '  render() {\n' +
    '    return <li className="list-item">#1</li>;\n' +    
    '  }\n' +
    '}\n' +
    '\n' +
    'export default ListItem;\n'
}

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Functional option doesn't work #82

Functional option doesn't work #82

adamgiebl commented Nov 25, 2023

Functional option doesn't work #82

Functional option doesn't work #82

Comments

adamgiebl commented Nov 25, 2023