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

Add cursor to visitor #34

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add cursor to visitor #34

wants to merge 1 commit into from

Conversation

ashtonsix
Copy link

@ashtonsix ashtonsix commented Jun 12, 2018

This lets us do stuff that depends on knowing where the node we're visiting is.

For example, I noticed <v:roundrect /> is invalid but React.createElement('v:roundrect') is fine, so wrote some code like <v$roundrect /> & a function that can find/replace $ with : after an intermediate build step.

const React = require('react')
const ReactWalker = require('./reactTreeWalker').default

const ReactMapper = async (element, f) => {
  let root
  let next = new Map()
  await ReactWalker(
    element,
    (e, _0, _1, _2, cursor) => {
      if (typeof e.type === 'function') return
      if (e.type && e.type.toString().includes('react.fragment')) return

      const parent = cursor.filter(e => typeof e.type === 'string').slice(-1)[0]

      let ni
      if (typeof e.type === 'string') {
        ni = f(e)
        ni.children = []
        next.set(e, ni)
      }
      if (parent) next.get(parent).children.push(ni || e)
      if (!root) root = ni
    },
    {}
  )

  const recursive = el => {
    if (typeof el === 'string' || typeof el === 'number') return el
    const {type, props, children} = el
    return React.createElement(type, props, ...children.map(recursive))
  }

  return recursive(root)
}

const repairNamespaces = async element => {
  element = await ReactMapper(element, e => {
    const type = e.type.replace('$', ':')
    const props = e.props
    return {type, props}
  })

  return element
}

@codecov
Copy link

codecov bot commented Jun 12, 2018

Codecov Report

Merging #34 into master will not change coverage.
The diff coverage is 83.33%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master      #34   +/-   ##
=======================================
  Coverage   95.29%   95.29%           
=======================================
  Files           1        1           
  Lines          85       85           
  Branches       24       24           
=======================================
  Hits           81       81           
  Misses          4        4
Impacted Files Coverage Δ
src/index.js 95.29% <83.33%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b6c594f...d467f70. Read the comment docs.

@ctrlplusb
Copy link
Owner

This seems like a super interesting idea and could open up some powerful ideas. I'll need to give it a thorough bashing before we merge, but i feel like it holds a lot of promise. Thanks so much for this proposal!

@ashtonsix
Copy link
Author

@ctrlplusb how's the bashing going?

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

Successfully merging this pull request may close these issues.

2 participants