oxc-project / backlog

backlog for collborators only
0 stars 0 forks source link

Cache scope tree lookups for React JSX classic mode transform #33

Open overlookmotel opened 1 month ago

overlookmotel commented 1 month ago

React JSX transform in classic mode currently performs a scope lookup on every JSX node, to find the binding React in React.createElement expressions which transform creates.

In classic mode, the binding for React can be anywhere, so we have to perform scope lookup every time to ensure correct scopes tree for weird cases like this:

export function generateHelloComponent(React) {
  return function Hello() {
    return <div>Greetings!</div>;
  };
}

export function generateGoodbyeComponent(React) {
  return function Goodbye() {
    return <div>Adios!</div>;
  };
}

However, this is of course a very uncommon case. 99% of the time React is bound to import React from 'react'; in top level scope.

Scope tree lookups are fairly expensive. While traversing the AST, we should cache scope tree lookups to optimize for the common case.

overlookmotel commented 3 weeks ago

Also calculate and cache the hash of the var name we're going to be repeatedly searching for in hash tables (i.e. React). Can even make it a const for the default pragma, if hash function is const.

overlookmotel commented 3 weeks ago

Some other possible optimizations to JSX transform commented here: https://github.com/oxc-project/oxc/commit/10dcc779b8ddb4d977fe4389c3c62089aa1e1e08