Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render to and from AST #88

Open
yandeu opened this issue Jan 4, 2022 · 1 comment
Open

Render to and from AST #88

yandeu opened this issue Jan 4, 2022 · 1 comment
Labels
enhancement New feature or request

Comments

@yandeu
Copy link
Member

yandeu commented Jan 4, 2022

Would be nice to convert Nano JSX to and from an AST.

const App = () => {
  return (
    <div>
      <h1 style="color: blue;">title</h1>
      <p>paragraph</p>
    </div>
  )
}

const tree = renderToTree(<App />)

// tree would be something like this:
{
  type: 'FC',
  name: 'App',
  children: [
    {
      type: 'html',
      name: 'div',
      children: [
        { type: 'html', name: 'h1', body: 'title', props: { style: 'color: blue;' } },
        { type: 'html', name: 'p', body: 'paragraph' }
      ]
    }
  ]
}

// modify the tree if needed and render it to html
const html = renderFromTree(tree)
@yandeu yandeu added the enhancement New feature or request label Jan 4, 2022
@jcayzac
Copy link

jcayzac commented Jul 25, 2023

If you followed the conventions of unifiedjs for the tree nodes and attributes, you could use all the plugins in that ecosystem to modify your tree.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants