module() — react Function Reference

Architecture documentation for the module() function in transform-lazy-jsx-import.js from the react codebase.

Function javascript CompilerCore BabelIntegration

Entity Profile

CompilerCore→ BabelIntegration→ module() — react Function Reference

Dependency Diagram

graph TD
  4ab677a8_7ca1_f3a0_56d4_e73bb97852cf["module()"]
  38b47b4f_37cd_e261_caae_a1f94f73d0fb["transform-lazy-jsx-import.js"]
  4ab677a8_7ca1_f3a0_56d4_e73bb97852cf -->|defined in| 38b47b4f_37cd_e261_caae_a1f94f73d0fb
  style 4ab677a8_7ca1_f3a0_56d4_e73bb97852cf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

scripts/babel/transform-lazy-jsx-import.js lines 23–92

module.exports = function replaceJSXImportWithLazy(babel) {
  const {types: t} = babel;

  function getInlineRequire(moduleName) {
    return t.callExpression(t.identifier('require'), [
      t.stringLiteral(moduleName),
    ]);
  }

  return {
    visitor: {
      CallExpression: function (path, pass) {
        let callee = path.node.callee;
        if (callee.type === 'SequenceExpression') {
          callee = callee.expressions[callee.expressions.length - 1];
        }
        if (callee.type === 'Identifier') {
          // Sometimes we seem to hit this before the imports are transformed
          // into requires and so we hit this case.
          switch (callee.name) {
            case '_jsxDEV':
              path.node.callee = t.memberExpression(
                getInlineRequire('react/jsx-dev-runtime'),
                t.identifier('jsxDEV')
              );
              return;
            case '_jsx':
              path.node.callee = t.memberExpression(
                getInlineRequire('react/jsx-runtime'),
                t.identifier('jsx')
              );
              return;
            case '_jsxs':
              path.node.callee = t.memberExpression(
                getInlineRequire('react/jsx-runtime'),
                t.identifier('jsxs')
              );
              return;
          }
          return;
        }
        if (callee.type !== 'MemberExpression') {
          return;
        }
        if (callee.property.type !== 'Identifier') {
          // Needs to be jsx, jsxs, jsxDEV.
          return;
        }
        if (callee.object.type !== 'Identifier') {
          // Needs to be _reactJsxDevRuntime or _reactJsxRuntime.
          return;
        }
        // Replace the cached identifier with a new require call.
        // Relying on the identifier name is a little flaky. Should ideally pick
        // this from the import. For some reason it sometimes has the react prefix
        // and other times it doesn't.
        switch (callee.object.name) {
          case '_reactJsxDevRuntime':
          case '_jsxDevRuntime':
            callee.object = getInlineRequire('react/jsx-dev-runtime');
            return;
          case '_reactJsxRuntime':
          case '_jsxRuntime':
            callee.object = getInlineRequire('react/jsx-runtime');
            return;
        }
      },
    },
  };
};