Skip to content

Replace JSXElement node on 'exit' instead of 'enter'. #86

Closed
@nandin-borjigin

Description

@nandin-borjigin

Current behavior of this plugin is replacing the entire JSXElement node, along with its children, on enter phase, which hinders other plugins from visiting decendants of that JSXElement recursively.

Usecase:

Suppose that a plugin foo is to collect thrid party component references in every file and then emit a file that imports and globally registeres all used components (common practice when the third party library provides tons of components but only a few of them is of interest).

Problem:

With this (referring to @vue/babel-plugin-transform-vue-jsx) plugin applied, foo can only visit the root JSXElement and all of its children would not be visited because they would have been replaced with normal h call by this plugin. Indeed, author of foo can traverse the children of root JSXElement by himself/herself but that would be duplicating the visitor pattern provided by babel.

Solution:

Changing this plugin's visitor to replace the original jsx node on exit phase would make other plugins (which are, by assumption, applied prior to this plugin) have a chance to recursively visit all the jsx nodes, without affecting the original behavior of this plugin.

Reference:

Both babel-plugin-jsx and babel-plugin-transform-react-jsx(which inherits the former) are applying the actual transformation on exit phase.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions