'use strict';
export default function (babel, opts = {}) {
if (typeof babel.env === 'function') {
const env = babel.env();
if (env !== 'development' && !opts.skipEnvCheck) {
throw new Error(
'React Refresh Babel transform should only be enabled in development environment. ' +
'Instead, the environment is: "' +
env +
'". If you want to override this check, pass {skipEnvCheck: true} as plugin options.',
);
}
}
const {types: t} = babel;
const refreshReg = t.identifier(opts.refreshReg || '$RefreshReg$');
const refreshSig = t.identifier(opts.refreshSig || '$RefreshSig$');
const registrationsByProgramPath = new Map();
function createRegistration(programPath, persistentID) {
const handle = programPath.scope.generateUidIdentifier('c');
if (!registrationsByProgramPath.has(programPath)) {
registrationsByProgramPath.set(programPath, []);
}
const registrations = registrationsByProgramPath.get(programPath);
registrations.push({
handle,
persistentID,
});
return handle;
}
function isComponentishName(name) {
return typeof name === 'string' && name[0] >= 'A' && name[0] <= 'Z';
}
function findInnerComponents(inferredName, path, callback) {
const node = path.node;
switch (node.type) {
case 'Identifier': {
if (!isComponentishName(node.name)) {
return false;
}
callback(inferredName, node, null);
return true;
}
case 'FunctionDeclaration': {
callback(inferredName, node.id, null);
return true;
}
case 'ArrowFunctionExpression': {
if (node.body.type === 'ArrowFunctionExpression') {
return false;
}
callback(inferredName, node, path);
return true;
}
case 'FunctionExpression': {
callback(inferredName, node, path);
return true;
}
case 'CallExpression': {
const argsPath = path.get('arguments');
if (argsPath === undefined || argsPath.length === 0) {
return false;
}
const calleePath = path.get('callee');
switch (calleePath.node.type) {
case 'MemberExpression':
case 'Identifier': {
const calleeSource = calleePath.getSource();
const firstArgPath = argsPath[0];
const innerName = inferredName + '$' + calleeSource;
const foundInside = findInnerComponents(
innerName,
firstArgPath,
callback,
);
if (!foundInside) {
return false;
}
callback(inferredName, node, path);
return true;
}
default: {
return false;
}
}
}
case 'VariableDeclarator': {
const init = node.init;
if (init === null) {
return false;
}
const name = node.id.name;
if (!isComponentishName(name)) {
return false;
}
switch (init.type) {
case 'ArrowFunctionExpression':
case 'FunctionExpression':
break;
case 'CallExpression': {
const callee = init.callee;
const calleeType = callee.type;
if (calleeType === 'Import') {
return false;
} else if (calleeType === 'Identifier') {
if (callee.name.indexOf('require') === 0) {
return false;
} else if (callee.name.indexOf('import') === 0) {
return false;
}
} else if (calleeType === 'MemberExpression') {
}
break;
}
case 'TaggedTemplateExpression':
break;
default:
return false;
}
const initPath = path.get('init');
const foundInside = findInnerComponents(
inferredName,
initPath,
callback,
);
if (foundInside) {
return true;
}
const binding = path.scope.getBinding(name);
if (binding === undefined) {
return;
}
let isLikelyUsedAsType = false;
const referencePaths = binding.referencePaths;
for (let i = 0; i < referencePaths.length; i++) {
const ref = referencePaths[i];
if (
ref.node &&
ref.node.type !== 'JSXIdentifier' &&
ref.node.type !== 'Identifier'
) {
continue;
}
const refParent = ref.parent;
if (refParent.type === 'JSXOpeningElement') {
isLikelyUsedAsType = true;
} else if (refParent.type === 'CallExpression') {
const callee = refParent.callee;
let fnName;
switch (callee.type) {
case 'Identifier':
fnName = callee.name;
break;
case 'MemberExpression':
fnName = callee.property.name;
break;
}
switch (fnName) {
case 'createElement':
case 'jsx':
case 'jsxDEV':
case 'jsxs':
isLikelyUsedAsType = true;
break;
}
}
if (isLikelyUsedAsType) {
callback(inferredName, init, initPath);
return true;
}
}
}
}
return false;
}
function isBuiltinHook(hookName) {
switch (hookName) {
case 'useState':
case 'React.useState':
case 'useReducer':
case 'React.useReducer':
case 'useEffect':
case 'React.useEffect':
case 'useLayoutEffect':
case 'React.useLayoutEffect':
case 'useMemo':
case 'React.useMemo':
case 'useCallback':
case 'React.useCallback':
case 'useRef':
case 'React.useRef':
case 'useContext':
case 'React.useContext':
case 'useImperativeHandle':
case 'React.useImperativeHandle':
case 'useDebugValue':
case 'React.useDebugValue':
case 'useId':
case 'React.useId':
case 'useDeferredValue':
case 'React.useDeferredValue':
case 'useTransition':
case 'React.useTransition':
case 'useInsertionEffect':
case 'React.useInsertionEffect':
case 'useSyncExternalStore':
case 'React.useSyncExternalStore':
case 'useFormStatus':
case 'React.useFormStatus':
case 'useFormState':
case 'React.useFormState':
case 'useActionState':
case 'React.useActionState':
case 'useOptimistic':
case 'React.useOptimistic':
return true;
default:
return false;
}
}
function getHookCallsSignature(functionNode) {
const fnHookCalls = hookCalls.get(functionNode);
if (fnHookCalls === undefined) {
return null;
}
return {
key: fnHookCalls.map(call => call.name + '{' + call.key + '}').join('\n'),
customHooks: fnHookCalls
.filter(call => !isBuiltinHook(call.name))
.map(call => t.cloneDeep(call.callee)),
};
}
const hasForceResetCommentByFile = new WeakMap();
function hasForceResetComment(path) {
const file = path.hub.file;
let hasForceReset = hasForceResetCommentByFile.get(file);
if (hasForceReset !== undefined) {
return hasForceReset;
}
hasForceReset = false;
const comments = file.ast.comments;
for (let i = 0; i < comments.length; i++) {
const cmt = comments[i];
if (cmt.value.indexOf('@refresh reset') !== -1) {
hasForceReset = true;
break;
}
}
hasForceResetCommentByFile.set(file, hasForceReset);
return hasForceReset;
}
function createArgumentsForSignature(node, signature, scope) {
const {key, customHooks} = signature;
let forceReset = hasForceResetComment(scope.path);
const customHooksInScope = [];
customHooks.forEach(callee => {
let bindingName;
switch (callee.type) {
case 'MemberExpression':
if (callee.object.type === 'Identifier') {
bindingName = callee.object.name;
}
break;
case 'Identifier':
bindingName = callee.name;
break;
}
if (scope.hasBinding(bindingName)) {
customHooksInScope.push(callee);
} else {
forceReset = true;
}
});
let finalKey = key;
if (typeof require === 'function' && !opts.emitFullSignatures) {
finalKey = require('crypto')
.createHash('sha1')
.update(key)
.digest('base64');
}
const args = [node, t.stringLiteral(finalKey)];
if (forceReset || customHooksInScope.length > 0) {
args.push(t.booleanLiteral(forceReset));
}
if (customHooksInScope.length > 0) {
args.push(
t.functionExpression(
null,
[],
t.blockStatement([
t.returnStatement(t.arrayExpression(customHooksInScope)),
]),
),
);
}
return args;
}
function findHOCCallPathsAbove(path) {
const calls = [];
while (true) {
if (!path) {
return calls;
}
const parentPath = path.parentPath;
if (!parentPath) {
return calls;
}
if (
parentPath.node.type === 'AssignmentExpression' &&
path.node === parentPath.node.right
) {
path = parentPath;
continue;
}
if (
parentPath.node.type === 'CallExpression' &&
path.node !== parentPath.node.callee
) {
calls.push(parentPath);
path = parentPath;
continue;
}
return calls;
}
}
const seenForRegistration = new WeakSet();
const seenForSignature = new WeakSet();
const seenForOutro = new WeakSet();
const hookCalls = new WeakMap();
const HookCallsVisitor = {
CallExpression(path) {
const node = path.node;
const callee = node.callee;
let name = null;
switch (callee.type) {
case 'Identifier':
name = callee.name;
break;
case 'MemberExpression':
name = callee.property.name;
break;
}
if (name === null || !/^use[A-Z]/.test(name)) {
return;
}
const fnScope = path.scope.getFunctionParent();
if (fnScope === null) {
return;
}
const fnNode = fnScope.block;
if (!hookCalls.has(fnNode)) {
hookCalls.set(fnNode, []);
}
const hookCallsForFn = hookCalls.get(fnNode);
let key = '';
if (path.parent.type === 'VariableDeclarator') {
key = path.parentPath.get('id').getSource();
}
const args = path.get('arguments');
if (name === 'useState' && args.length > 0) {
key += '(' + args[0].getSource() + ')';
} else if (name === 'useReducer' && args.length > 1) {
key += '(' + args[1].getSource() + ')';
}
hookCallsForFn.push({
callee: path.node.callee,
name,
key,
});
},
};
return {
visitor: {
ExportDefaultDeclaration(path) {
const node = path.node;
const decl = node.declaration;
const declPath = path.get('declaration');
if (decl.type !== 'CallExpression') {
return;
}
if (seenForRegistration.has(node)) {
return;
}
seenForRegistration.add(node);
const inferredName = '%default%';
const programPath = path.parentPath;
findInnerComponents(
inferredName,
declPath,
(persistentID, targetExpr, targetPath) => {
if (targetPath === null) {
return;
}
const handle = createRegistration(programPath, persistentID);
targetPath.replaceWith(
t.assignmentExpression('=', handle, targetExpr),
);
},
);
},
FunctionDeclaration: {
enter(path) {
const node = path.node;
let programPath;
let insertAfterPath;
let modulePrefix = '';
switch (path.parent.type) {
case 'Program':
insertAfterPath = path;
programPath = path.parentPath;
break;
case 'TSModuleBlock':
insertAfterPath = path;
programPath = insertAfterPath.parentPath.parentPath;
break;
case 'ExportNamedDeclaration':
insertAfterPath = path.parentPath;
programPath = insertAfterPath.parentPath;
break;
case 'ExportDefaultDeclaration':
insertAfterPath = path.parentPath;
programPath = insertAfterPath.parentPath;
break;
default:
return;
}
if (
path.parent.type === 'TSModuleBlock' ||
path.parent.type === 'ExportNamedDeclaration'
) {
while (programPath.type !== 'Program') {
if (programPath.type === 'TSModuleDeclaration') {
if (
programPath.parentPath.type !== 'Program' &&
programPath.parentPath.type !== 'ExportNamedDeclaration'
) {
return;
}
modulePrefix = programPath.node.id.name + '$' + modulePrefix;
}
programPath = programPath.parentPath;
}
}
const id = node.id;
if (id === null) {
return;
}
const inferredName = id.name;
if (!isComponentishName(inferredName)) {
return;
}
if (seenForRegistration.has(node)) {
return;
}
seenForRegistration.add(node);
const innerName = modulePrefix + inferredName;
findInnerComponents(innerName, path, (persistentID, targetExpr) => {
const handle = createRegistration(programPath, persistentID);
insertAfterPath.insertAfter(
t.expressionStatement(
t.assignmentExpression('=', handle, targetExpr),
),
);
});
},
exit(path) {
const node = path.node;
const id = node.id;
if (id === null) {
return;
}
const signature = getHookCallsSignature(node);
if (signature === null) {
return;
}
if (seenForSignature.has(node)) {
return;
}
seenForSignature.add(node);
const sigCallID = path.scope.generateUidIdentifier('_s');
path.scope.parent.push({
id: sigCallID,
init: t.callExpression(refreshSig, []),
});
path
.get('body')
.unshiftContainer(
'body',
t.expressionStatement(t.callExpression(sigCallID, [])),
);
let insertAfterPath = null;
path.find(p => {
if (p.parentPath.isBlock()) {
insertAfterPath = p;
return true;
}
});
if (insertAfterPath === null) {
return;
}
insertAfterPath.insertAfter(
t.expressionStatement(
t.callExpression(
sigCallID,
createArgumentsForSignature(
id,
signature,
insertAfterPath.scope,
),
),
),
);
},
},
'ArrowFunctionExpression|FunctionExpression': {
exit(path) {
const node = path.node;
const signature = getHookCallsSignature(node);
if (signature === null) {
return;
}
if (seenForSignature.has(node)) {
return;
}
seenForSignature.add(node);
const sigCallID = path.scope.generateUidIdentifier('_s');
path.scope.parent.push({
id: sigCallID,
init: t.callExpression(refreshSig, []),
});
if (path.node.body.type !== 'BlockStatement') {
path.node.body = t.blockStatement([
t.returnStatement(path.node.body),
]);
}
path
.get('body')
.unshiftContainer(
'body',
t.expressionStatement(t.callExpression(sigCallID, [])),
);
if (path.parent.type === 'VariableDeclarator') {
let insertAfterPath = null;
path.find(p => {
if (p.parentPath.isBlock()) {
insertAfterPath = p;
return true;
}
});
if (insertAfterPath === null) {
return;
}
insertAfterPath.insertAfter(
t.expressionStatement(
t.callExpression(
sigCallID,
createArgumentsForSignature(
path.parent.id,
signature,
insertAfterPath.scope,
),
),
),
);
} else {
const paths = [path, ...findHOCCallPathsAbove(path)];
paths.forEach(p => {
p.replaceWith(
t.callExpression(
sigCallID,
createArgumentsForSignature(p.node, signature, p.scope),
),
);
});
}
},
},
VariableDeclaration(path) {
const node = path.node;
let programPath;
let insertAfterPath;
let modulePrefix = '';
switch (path.parent.type) {
case 'Program':
insertAfterPath = path;
programPath = path.parentPath;
break;
case 'TSModuleBlock':
insertAfterPath = path;
programPath = insertAfterPath.parentPath.parentPath;
break;
case 'ExportNamedDeclaration':
insertAfterPath = path.parentPath;
programPath = insertAfterPath.parentPath;
break;
case 'ExportDefaultDeclaration':
insertAfterPath = path.parentPath;
programPath = insertAfterPath.parentPath;
break;
default:
return;
}
if (
path.parent.type === 'TSModuleBlock' ||
path.parent.type === 'ExportNamedDeclaration'
) {
while (programPath.type !== 'Program') {
if (programPath.type === 'TSModuleDeclaration') {
if (
programPath.parentPath.type !== 'Program' &&
programPath.parentPath.type !== 'ExportNamedDeclaration'
) {
return;
}
modulePrefix = programPath.node.id.name + '$' + modulePrefix;
}
programPath = programPath.parentPath;
}
}
if (seenForRegistration.has(node)) {
return;
}
seenForRegistration.add(node);
const declPaths = path.get('declarations');
if (declPaths.length !== 1) {
return;
}
const declPath = declPaths[0];
const inferredName = declPath.node.id.name;
const innerName = modulePrefix + inferredName;
findInnerComponents(
innerName,
declPath,
(persistentID, targetExpr, targetPath) => {
if (targetPath === null) {
return;
}
const handle = createRegistration(programPath, persistentID);
if (targetPath.parent.type === 'VariableDeclarator') {
insertAfterPath.insertAfter(
t.expressionStatement(
t.assignmentExpression('=', handle, declPath.node.id),
),
);
} else {
targetPath.replaceWith(
t.assignmentExpression('=', handle, targetExpr),
);
}
},
);
},
Program: {
enter(path) {
path.traverse(HookCallsVisitor);
},
exit(path) {
const registrations = registrationsByProgramPath.get(path);
if (registrations === undefined) {
return;
}
const node = path.node;
if (seenForOutro.has(node)) {
return;
}
seenForOutro.add(node);
registrationsByProgramPath.delete(path);
const declarators = [];
path.pushContainer('body', t.variableDeclaration('var', declarators));
registrations.forEach(({handle, persistentID}) => {
path.pushContainer(
'body',
t.expressionStatement(
t.callExpression(refreshReg, [
handle,
t.stringLiteral(persistentID),
]),
),
);
declarators.push(t.variableDeclarator(handle));
});
},
},
},
};
}