[d565449] | 1 | /**
|
---|
| 2 | * @license React
|
---|
| 3 | * react-refresh-babel.development.js
|
---|
| 4 | *
|
---|
| 5 | * Copyright (c) Facebook, Inc. and its affiliates.
|
---|
| 6 | *
|
---|
| 7 | * This source code is licensed under the MIT license found in the
|
---|
| 8 | * LICENSE file in the root directory of this source tree.
|
---|
| 9 | */
|
---|
| 10 |
|
---|
| 11 | 'use strict';
|
---|
| 12 |
|
---|
| 13 | if (process.env.NODE_ENV !== "production") {
|
---|
| 14 | (function() {
|
---|
| 15 | 'use strict';
|
---|
| 16 |
|
---|
| 17 | function ReactFreshBabelPlugin (babel) {
|
---|
| 18 | var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
---|
| 19 |
|
---|
| 20 | if (typeof babel.env === 'function') {
|
---|
| 21 | // Only available in Babel 7.
|
---|
| 22 | var env = babel.env();
|
---|
| 23 |
|
---|
| 24 | if (env !== 'development' && !opts.skipEnvCheck) {
|
---|
| 25 | 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.');
|
---|
| 26 | }
|
---|
| 27 | }
|
---|
| 28 |
|
---|
| 29 | var t = babel.types;
|
---|
| 30 | var refreshReg = t.identifier(opts.refreshReg || '$RefreshReg$');
|
---|
| 31 | var refreshSig = t.identifier(opts.refreshSig || '$RefreshSig$');
|
---|
| 32 | var registrationsByProgramPath = new Map();
|
---|
| 33 |
|
---|
| 34 | function createRegistration(programPath, persistentID) {
|
---|
| 35 | var handle = programPath.scope.generateUidIdentifier('c');
|
---|
| 36 |
|
---|
| 37 | if (!registrationsByProgramPath.has(programPath)) {
|
---|
| 38 | registrationsByProgramPath.set(programPath, []);
|
---|
| 39 | }
|
---|
| 40 |
|
---|
| 41 | var registrations = registrationsByProgramPath.get(programPath);
|
---|
| 42 | registrations.push({
|
---|
| 43 | handle: handle,
|
---|
| 44 | persistentID: persistentID
|
---|
| 45 | });
|
---|
| 46 | return handle;
|
---|
| 47 | }
|
---|
| 48 |
|
---|
| 49 | function isComponentishName(name) {
|
---|
| 50 | return typeof name === 'string' && name[0] >= 'A' && name[0] <= 'Z';
|
---|
| 51 | }
|
---|
| 52 |
|
---|
| 53 | function findInnerComponents(inferredName, path, callback) {
|
---|
| 54 | var node = path.node;
|
---|
| 55 |
|
---|
| 56 | switch (node.type) {
|
---|
| 57 | case 'Identifier':
|
---|
| 58 | {
|
---|
| 59 | if (!isComponentishName(node.name)) {
|
---|
| 60 | return false;
|
---|
| 61 | } // export default hoc(Foo)
|
---|
| 62 | // const X = hoc(Foo)
|
---|
| 63 |
|
---|
| 64 |
|
---|
| 65 | callback(inferredName, node, null);
|
---|
| 66 | return true;
|
---|
| 67 | }
|
---|
| 68 |
|
---|
| 69 | case 'FunctionDeclaration':
|
---|
| 70 | {
|
---|
| 71 | // function Foo() {}
|
---|
| 72 | // export function Foo() {}
|
---|
| 73 | // export default function Foo() {}
|
---|
| 74 | callback(inferredName, node.id, null);
|
---|
| 75 | return true;
|
---|
| 76 | }
|
---|
| 77 |
|
---|
| 78 | case 'ArrowFunctionExpression':
|
---|
| 79 | {
|
---|
| 80 | if (node.body.type === 'ArrowFunctionExpression') {
|
---|
| 81 | return false;
|
---|
| 82 | } // let Foo = () => {}
|
---|
| 83 | // export default hoc1(hoc2(() => {}))
|
---|
| 84 |
|
---|
| 85 |
|
---|
| 86 | callback(inferredName, node, path);
|
---|
| 87 | return true;
|
---|
| 88 | }
|
---|
| 89 |
|
---|
| 90 | case 'FunctionExpression':
|
---|
| 91 | {
|
---|
| 92 | // let Foo = function() {}
|
---|
| 93 | // const Foo = hoc1(forwardRef(function renderFoo() {}))
|
---|
| 94 | // export default memo(function() {})
|
---|
| 95 | callback(inferredName, node, path);
|
---|
| 96 | return true;
|
---|
| 97 | }
|
---|
| 98 |
|
---|
| 99 | case 'CallExpression':
|
---|
| 100 | {
|
---|
| 101 | var argsPath = path.get('arguments');
|
---|
| 102 |
|
---|
| 103 | if (argsPath === undefined || argsPath.length === 0) {
|
---|
| 104 | return false;
|
---|
| 105 | }
|
---|
| 106 |
|
---|
| 107 | var calleePath = path.get('callee');
|
---|
| 108 |
|
---|
| 109 | switch (calleePath.node.type) {
|
---|
| 110 | case 'MemberExpression':
|
---|
| 111 | case 'Identifier':
|
---|
| 112 | {
|
---|
| 113 | var calleeSource = calleePath.getSource();
|
---|
| 114 | var firstArgPath = argsPath[0];
|
---|
| 115 | var innerName = inferredName + '$' + calleeSource;
|
---|
| 116 | var foundInside = findInnerComponents(innerName, firstArgPath, callback);
|
---|
| 117 |
|
---|
| 118 | if (!foundInside) {
|
---|
| 119 | return false;
|
---|
| 120 | } // const Foo = hoc1(hoc2(() => {}))
|
---|
| 121 | // export default memo(React.forwardRef(function() {}))
|
---|
| 122 |
|
---|
| 123 |
|
---|
| 124 | callback(inferredName, node, path);
|
---|
| 125 | return true;
|
---|
| 126 | }
|
---|
| 127 |
|
---|
| 128 | default:
|
---|
| 129 | {
|
---|
| 130 | return false;
|
---|
| 131 | }
|
---|
| 132 | }
|
---|
| 133 | }
|
---|
| 134 |
|
---|
| 135 | case 'VariableDeclarator':
|
---|
| 136 | {
|
---|
| 137 | var init = node.init;
|
---|
| 138 |
|
---|
| 139 | if (init === null) {
|
---|
| 140 | return false;
|
---|
| 141 | }
|
---|
| 142 |
|
---|
| 143 | var name = node.id.name;
|
---|
| 144 |
|
---|
| 145 | if (!isComponentishName(name)) {
|
---|
| 146 | return false;
|
---|
| 147 | }
|
---|
| 148 |
|
---|
| 149 | switch (init.type) {
|
---|
| 150 | case 'ArrowFunctionExpression':
|
---|
| 151 | case 'FunctionExpression':
|
---|
| 152 | // Likely component definitions.
|
---|
| 153 | break;
|
---|
| 154 |
|
---|
| 155 | case 'CallExpression':
|
---|
| 156 | {
|
---|
| 157 | // Maybe a HOC.
|
---|
| 158 | // Try to determine if this is some form of import.
|
---|
| 159 | var callee = init.callee;
|
---|
| 160 | var calleeType = callee.type;
|
---|
| 161 |
|
---|
| 162 | if (calleeType === 'Import') {
|
---|
| 163 | return false;
|
---|
| 164 | } else if (calleeType === 'Identifier') {
|
---|
| 165 | if (callee.name.indexOf('require') === 0) {
|
---|
| 166 | return false;
|
---|
| 167 | } else if (callee.name.indexOf('import') === 0) {
|
---|
| 168 | return false;
|
---|
| 169 | } // Neither require nor import. Might be a HOC.
|
---|
| 170 | // Pass through.
|
---|
| 171 |
|
---|
| 172 | }
|
---|
| 173 |
|
---|
| 174 | break;
|
---|
| 175 | }
|
---|
| 176 |
|
---|
| 177 | case 'TaggedTemplateExpression':
|
---|
| 178 | // Maybe something like styled.div`...`
|
---|
| 179 | break;
|
---|
| 180 |
|
---|
| 181 | default:
|
---|
| 182 | return false;
|
---|
| 183 | }
|
---|
| 184 |
|
---|
| 185 | var initPath = path.get('init');
|
---|
| 186 |
|
---|
| 187 | var _foundInside = findInnerComponents(inferredName, initPath, callback);
|
---|
| 188 |
|
---|
| 189 | if (_foundInside) {
|
---|
| 190 | return true;
|
---|
| 191 | } // See if this identifier is used in JSX. Then it's a component.
|
---|
| 192 |
|
---|
| 193 |
|
---|
| 194 | var binding = path.scope.getBinding(name);
|
---|
| 195 |
|
---|
| 196 | if (binding === undefined) {
|
---|
| 197 | return;
|
---|
| 198 | }
|
---|
| 199 |
|
---|
| 200 | var isLikelyUsedAsType = false;
|
---|
| 201 | var referencePaths = binding.referencePaths;
|
---|
| 202 |
|
---|
| 203 | for (var i = 0; i < referencePaths.length; i++) {
|
---|
| 204 | var ref = referencePaths[i];
|
---|
| 205 |
|
---|
| 206 | if (ref.node && ref.node.type !== 'JSXIdentifier' && ref.node.type !== 'Identifier') {
|
---|
| 207 | continue;
|
---|
| 208 | }
|
---|
| 209 |
|
---|
| 210 | var refParent = ref.parent;
|
---|
| 211 |
|
---|
| 212 | if (refParent.type === 'JSXOpeningElement') {
|
---|
| 213 | isLikelyUsedAsType = true;
|
---|
| 214 | } else if (refParent.type === 'CallExpression') {
|
---|
| 215 | var _callee = refParent.callee;
|
---|
| 216 | var fnName = void 0;
|
---|
| 217 |
|
---|
| 218 | switch (_callee.type) {
|
---|
| 219 | case 'Identifier':
|
---|
| 220 | fnName = _callee.name;
|
---|
| 221 | break;
|
---|
| 222 |
|
---|
| 223 | case 'MemberExpression':
|
---|
| 224 | fnName = _callee.property.name;
|
---|
| 225 | break;
|
---|
| 226 | }
|
---|
| 227 |
|
---|
| 228 | switch (fnName) {
|
---|
| 229 | case 'createElement':
|
---|
| 230 | case 'jsx':
|
---|
| 231 | case 'jsxDEV':
|
---|
| 232 | case 'jsxs':
|
---|
| 233 | isLikelyUsedAsType = true;
|
---|
| 234 | break;
|
---|
| 235 | }
|
---|
| 236 | }
|
---|
| 237 |
|
---|
| 238 | if (isLikelyUsedAsType) {
|
---|
| 239 | // const X = ... + later <X />
|
---|
| 240 | callback(inferredName, init, initPath);
|
---|
| 241 | return true;
|
---|
| 242 | }
|
---|
| 243 | }
|
---|
| 244 | }
|
---|
| 245 | }
|
---|
| 246 |
|
---|
| 247 | return false;
|
---|
| 248 | }
|
---|
| 249 |
|
---|
| 250 | function isBuiltinHook(hookName) {
|
---|
| 251 | switch (hookName) {
|
---|
| 252 | case 'useState':
|
---|
| 253 | case 'React.useState':
|
---|
| 254 | case 'useReducer':
|
---|
| 255 | case 'React.useReducer':
|
---|
| 256 | case 'useEffect':
|
---|
| 257 | case 'React.useEffect':
|
---|
| 258 | case 'useLayoutEffect':
|
---|
| 259 | case 'React.useLayoutEffect':
|
---|
| 260 | case 'useMemo':
|
---|
| 261 | case 'React.useMemo':
|
---|
| 262 | case 'useCallback':
|
---|
| 263 | case 'React.useCallback':
|
---|
| 264 | case 'useRef':
|
---|
| 265 | case 'React.useRef':
|
---|
| 266 | case 'useContext':
|
---|
| 267 | case 'React.useContext':
|
---|
| 268 | case 'useImperativeHandle':
|
---|
| 269 | case 'React.useImperativeHandle':
|
---|
| 270 | case 'useDebugValue':
|
---|
| 271 | case 'React.useDebugValue':
|
---|
| 272 | return true;
|
---|
| 273 |
|
---|
| 274 | default:
|
---|
| 275 | return false;
|
---|
| 276 | }
|
---|
| 277 | }
|
---|
| 278 |
|
---|
| 279 | function getHookCallsSignature(functionNode) {
|
---|
| 280 | var fnHookCalls = hookCalls.get(functionNode);
|
---|
| 281 |
|
---|
| 282 | if (fnHookCalls === undefined) {
|
---|
| 283 | return null;
|
---|
| 284 | }
|
---|
| 285 |
|
---|
| 286 | return {
|
---|
| 287 | key: fnHookCalls.map(function (call) {
|
---|
| 288 | return call.name + '{' + call.key + '}';
|
---|
| 289 | }).join('\n'),
|
---|
| 290 | customHooks: fnHookCalls.filter(function (call) {
|
---|
| 291 | return !isBuiltinHook(call.name);
|
---|
| 292 | }).map(function (call) {
|
---|
| 293 | return t.cloneDeep(call.callee);
|
---|
| 294 | })
|
---|
| 295 | };
|
---|
| 296 | }
|
---|
| 297 |
|
---|
| 298 | var hasForceResetCommentByFile = new WeakMap(); // We let user do /* @refresh reset */ to reset state in the whole file.
|
---|
| 299 |
|
---|
| 300 | function hasForceResetComment(path) {
|
---|
| 301 | var file = path.hub.file;
|
---|
| 302 | var hasForceReset = hasForceResetCommentByFile.get(file);
|
---|
| 303 |
|
---|
| 304 | if (hasForceReset !== undefined) {
|
---|
| 305 | return hasForceReset;
|
---|
| 306 | }
|
---|
| 307 |
|
---|
| 308 | hasForceReset = false;
|
---|
| 309 | var comments = file.ast.comments;
|
---|
| 310 |
|
---|
| 311 | for (var i = 0; i < comments.length; i++) {
|
---|
| 312 | var cmt = comments[i];
|
---|
| 313 |
|
---|
| 314 | if (cmt.value.indexOf('@refresh reset') !== -1) {
|
---|
| 315 | hasForceReset = true;
|
---|
| 316 | break;
|
---|
| 317 | }
|
---|
| 318 | }
|
---|
| 319 |
|
---|
| 320 | hasForceResetCommentByFile.set(file, hasForceReset);
|
---|
| 321 | return hasForceReset;
|
---|
| 322 | }
|
---|
| 323 |
|
---|
| 324 | function createArgumentsForSignature(node, signature, scope) {
|
---|
| 325 | var key = signature.key,
|
---|
| 326 | customHooks = signature.customHooks;
|
---|
| 327 | var forceReset = hasForceResetComment(scope.path);
|
---|
| 328 | var customHooksInScope = [];
|
---|
| 329 | customHooks.forEach(function (callee) {
|
---|
| 330 | // Check if a corresponding binding exists where we emit the signature.
|
---|
| 331 | var bindingName;
|
---|
| 332 |
|
---|
| 333 | switch (callee.type) {
|
---|
| 334 | case 'MemberExpression':
|
---|
| 335 | if (callee.object.type === 'Identifier') {
|
---|
| 336 | bindingName = callee.object.name;
|
---|
| 337 | }
|
---|
| 338 |
|
---|
| 339 | break;
|
---|
| 340 |
|
---|
| 341 | case 'Identifier':
|
---|
| 342 | bindingName = callee.name;
|
---|
| 343 | break;
|
---|
| 344 | }
|
---|
| 345 |
|
---|
| 346 | if (scope.hasBinding(bindingName)) {
|
---|
| 347 | customHooksInScope.push(callee);
|
---|
| 348 | } else {
|
---|
| 349 | // We don't have anything to put in the array because Hook is out of scope.
|
---|
| 350 | // Since it could potentially have been edited, remount the component.
|
---|
| 351 | forceReset = true;
|
---|
| 352 | }
|
---|
| 353 | });
|
---|
| 354 | var finalKey = key;
|
---|
| 355 |
|
---|
| 356 | if (typeof require === 'function' && !opts.emitFullSignatures) {
|
---|
| 357 | // Prefer to hash when we can (e.g. outside of ASTExplorer).
|
---|
| 358 | // This makes it deterministically compact, even if there's
|
---|
| 359 | // e.g. a useState initializer with some code inside.
|
---|
| 360 | // We also need it for www that has transforms like cx()
|
---|
| 361 | // that don't understand if something is part of a string.
|
---|
| 362 | finalKey = require('crypto').createHash('sha1').update(key).digest('base64');
|
---|
| 363 | }
|
---|
| 364 |
|
---|
| 365 | var args = [node, t.stringLiteral(finalKey)];
|
---|
| 366 |
|
---|
| 367 | if (forceReset || customHooksInScope.length > 0) {
|
---|
| 368 | args.push(t.booleanLiteral(forceReset));
|
---|
| 369 | }
|
---|
| 370 |
|
---|
| 371 | if (customHooksInScope.length > 0) {
|
---|
| 372 | args.push( // TODO: We could use an arrow here to be more compact.
|
---|
| 373 | // However, don't do it until AMA can run them natively.
|
---|
| 374 | t.functionExpression(null, [], t.blockStatement([t.returnStatement(t.arrayExpression(customHooksInScope))])));
|
---|
| 375 | }
|
---|
| 376 |
|
---|
| 377 | return args;
|
---|
| 378 | }
|
---|
| 379 |
|
---|
| 380 | function findHOCCallPathsAbove(path) {
|
---|
| 381 | var calls = [];
|
---|
| 382 |
|
---|
| 383 | while (true) {
|
---|
| 384 | if (!path) {
|
---|
| 385 | return calls;
|
---|
| 386 | }
|
---|
| 387 |
|
---|
| 388 | var parentPath = path.parentPath;
|
---|
| 389 |
|
---|
| 390 | if (!parentPath) {
|
---|
| 391 | return calls;
|
---|
| 392 | }
|
---|
| 393 |
|
---|
| 394 | if ( // hoc(_c = function() { })
|
---|
| 395 | parentPath.node.type === 'AssignmentExpression' && path.node === parentPath.node.right) {
|
---|
| 396 | // Ignore registrations.
|
---|
| 397 | path = parentPath;
|
---|
| 398 | continue;
|
---|
| 399 | }
|
---|
| 400 |
|
---|
| 401 | if ( // hoc1(hoc2(...))
|
---|
| 402 | parentPath.node.type === 'CallExpression' && path.node !== parentPath.node.callee) {
|
---|
| 403 | calls.push(parentPath);
|
---|
| 404 | path = parentPath;
|
---|
| 405 | continue;
|
---|
| 406 | }
|
---|
| 407 |
|
---|
| 408 | return calls; // Stop at other types.
|
---|
| 409 | }
|
---|
| 410 | }
|
---|
| 411 |
|
---|
| 412 | var seenForRegistration = new WeakSet();
|
---|
| 413 | var seenForSignature = new WeakSet();
|
---|
| 414 | var seenForOutro = new WeakSet();
|
---|
| 415 | var hookCalls = new WeakMap();
|
---|
| 416 | var HookCallsVisitor = {
|
---|
| 417 | CallExpression: function (path) {
|
---|
| 418 | var node = path.node;
|
---|
| 419 | var callee = node.callee; // Note: this visitor MUST NOT mutate the tree in any way.
|
---|
| 420 | // It runs early in a separate traversal and should be very fast.
|
---|
| 421 |
|
---|
| 422 | var name = null;
|
---|
| 423 |
|
---|
| 424 | switch (callee.type) {
|
---|
| 425 | case 'Identifier':
|
---|
| 426 | name = callee.name;
|
---|
| 427 | break;
|
---|
| 428 |
|
---|
| 429 | case 'MemberExpression':
|
---|
| 430 | name = callee.property.name;
|
---|
| 431 | break;
|
---|
| 432 | }
|
---|
| 433 |
|
---|
| 434 | if (name === null || !/^use[A-Z]/.test(name)) {
|
---|
| 435 | return;
|
---|
| 436 | }
|
---|
| 437 |
|
---|
| 438 | var fnScope = path.scope.getFunctionParent();
|
---|
| 439 |
|
---|
| 440 | if (fnScope === null) {
|
---|
| 441 | return;
|
---|
| 442 | } // This is a Hook call. Record it.
|
---|
| 443 |
|
---|
| 444 |
|
---|
| 445 | var fnNode = fnScope.block;
|
---|
| 446 |
|
---|
| 447 | if (!hookCalls.has(fnNode)) {
|
---|
| 448 | hookCalls.set(fnNode, []);
|
---|
| 449 | }
|
---|
| 450 |
|
---|
| 451 | var hookCallsForFn = hookCalls.get(fnNode);
|
---|
| 452 | var key = '';
|
---|
| 453 |
|
---|
| 454 | if (path.parent.type === 'VariableDeclarator') {
|
---|
| 455 | // TODO: if there is no LHS, consider some other heuristic.
|
---|
| 456 | key = path.parentPath.get('id').getSource();
|
---|
| 457 | } // Some built-in Hooks reset on edits to arguments.
|
---|
| 458 |
|
---|
| 459 |
|
---|
| 460 | var args = path.get('arguments');
|
---|
| 461 |
|
---|
| 462 | if (name === 'useState' && args.length > 0) {
|
---|
| 463 | // useState second argument is initial state.
|
---|
| 464 | key += '(' + args[0].getSource() + ')';
|
---|
| 465 | } else if (name === 'useReducer' && args.length > 1) {
|
---|
| 466 | // useReducer second argument is initial state.
|
---|
| 467 | key += '(' + args[1].getSource() + ')';
|
---|
| 468 | }
|
---|
| 469 |
|
---|
| 470 | hookCallsForFn.push({
|
---|
| 471 | callee: path.node.callee,
|
---|
| 472 | name: name,
|
---|
| 473 | key: key
|
---|
| 474 | });
|
---|
| 475 | }
|
---|
| 476 | };
|
---|
| 477 | return {
|
---|
| 478 | visitor: {
|
---|
| 479 | ExportDefaultDeclaration: function (path) {
|
---|
| 480 | var node = path.node;
|
---|
| 481 | var decl = node.declaration;
|
---|
| 482 | var declPath = path.get('declaration');
|
---|
| 483 |
|
---|
| 484 | if (decl.type !== 'CallExpression') {
|
---|
| 485 | // For now, we only support possible HOC calls here.
|
---|
| 486 | // Named function declarations are handled in FunctionDeclaration.
|
---|
| 487 | // Anonymous direct exports like export default function() {}
|
---|
| 488 | // are currently ignored.
|
---|
| 489 | return;
|
---|
| 490 | } // Make sure we're not mutating the same tree twice.
|
---|
| 491 | // This can happen if another Babel plugin replaces parents.
|
---|
| 492 |
|
---|
| 493 |
|
---|
| 494 | if (seenForRegistration.has(node)) {
|
---|
| 495 | return;
|
---|
| 496 | }
|
---|
| 497 |
|
---|
| 498 | seenForRegistration.add(node); // Don't mutate the tree above this point.
|
---|
| 499 | // This code path handles nested cases like:
|
---|
| 500 | // export default memo(() => {})
|
---|
| 501 | // In those cases it is more plausible people will omit names
|
---|
| 502 | // so they're worth handling despite possible false positives.
|
---|
| 503 | // More importantly, it handles the named case:
|
---|
| 504 | // export default memo(function Named() {})
|
---|
| 505 |
|
---|
| 506 | var inferredName = '%default%';
|
---|
| 507 | var programPath = path.parentPath;
|
---|
| 508 | findInnerComponents(inferredName, declPath, function (persistentID, targetExpr, targetPath) {
|
---|
| 509 | if (targetPath === null) {
|
---|
| 510 | // For case like:
|
---|
| 511 | // export default hoc(Foo)
|
---|
| 512 | // we don't want to wrap Foo inside the call.
|
---|
| 513 | // Instead we assume it's registered at definition.
|
---|
| 514 | return;
|
---|
| 515 | }
|
---|
| 516 |
|
---|
| 517 | var handle = createRegistration(programPath, persistentID);
|
---|
| 518 | targetPath.replaceWith(t.assignmentExpression('=', handle, targetExpr));
|
---|
| 519 | });
|
---|
| 520 | },
|
---|
| 521 | FunctionDeclaration: {
|
---|
| 522 | enter: function (path) {
|
---|
| 523 | var node = path.node;
|
---|
| 524 | var programPath;
|
---|
| 525 | var insertAfterPath;
|
---|
| 526 | var modulePrefix = '';
|
---|
| 527 |
|
---|
| 528 | switch (path.parent.type) {
|
---|
| 529 | case 'Program':
|
---|
| 530 | insertAfterPath = path;
|
---|
| 531 | programPath = path.parentPath;
|
---|
| 532 | break;
|
---|
| 533 |
|
---|
| 534 | case 'TSModuleBlock':
|
---|
| 535 | insertAfterPath = path;
|
---|
| 536 | programPath = insertAfterPath.parentPath.parentPath;
|
---|
| 537 | break;
|
---|
| 538 |
|
---|
| 539 | case 'ExportNamedDeclaration':
|
---|
| 540 | insertAfterPath = path.parentPath;
|
---|
| 541 | programPath = insertAfterPath.parentPath;
|
---|
| 542 | break;
|
---|
| 543 |
|
---|
| 544 | case 'ExportDefaultDeclaration':
|
---|
| 545 | insertAfterPath = path.parentPath;
|
---|
| 546 | programPath = insertAfterPath.parentPath;
|
---|
| 547 | break;
|
---|
| 548 |
|
---|
| 549 | default:
|
---|
| 550 | return;
|
---|
| 551 | } // These types can be nested in typescript namespace
|
---|
| 552 | // We need to find the export chain
|
---|
| 553 | // Or return if it stays local
|
---|
| 554 |
|
---|
| 555 |
|
---|
| 556 | if (path.parent.type === 'TSModuleBlock' || path.parent.type === 'ExportNamedDeclaration') {
|
---|
| 557 | while (programPath.type !== 'Program') {
|
---|
| 558 | if (programPath.type === 'TSModuleDeclaration') {
|
---|
| 559 | if (programPath.parentPath.type !== 'Program' && programPath.parentPath.type !== 'ExportNamedDeclaration') {
|
---|
| 560 | return;
|
---|
| 561 | }
|
---|
| 562 |
|
---|
| 563 | modulePrefix = programPath.node.id.name + '$' + modulePrefix;
|
---|
| 564 | }
|
---|
| 565 |
|
---|
| 566 | programPath = programPath.parentPath;
|
---|
| 567 | }
|
---|
| 568 | }
|
---|
| 569 |
|
---|
| 570 | var id = node.id;
|
---|
| 571 |
|
---|
| 572 | if (id === null) {
|
---|
| 573 | // We don't currently handle anonymous default exports.
|
---|
| 574 | return;
|
---|
| 575 | }
|
---|
| 576 |
|
---|
| 577 | var inferredName = id.name;
|
---|
| 578 |
|
---|
| 579 | if (!isComponentishName(inferredName)) {
|
---|
| 580 | return;
|
---|
| 581 | } // Make sure we're not mutating the same tree twice.
|
---|
| 582 | // This can happen if another Babel plugin replaces parents.
|
---|
| 583 |
|
---|
| 584 |
|
---|
| 585 | if (seenForRegistration.has(node)) {
|
---|
| 586 | return;
|
---|
| 587 | }
|
---|
| 588 |
|
---|
| 589 | seenForRegistration.add(node); // Don't mutate the tree above this point.
|
---|
| 590 |
|
---|
| 591 | var innerName = modulePrefix + inferredName; // export function Named() {}
|
---|
| 592 | // function Named() {}
|
---|
| 593 |
|
---|
| 594 | findInnerComponents(innerName, path, function (persistentID, targetExpr) {
|
---|
| 595 | var handle = createRegistration(programPath, persistentID);
|
---|
| 596 | insertAfterPath.insertAfter(t.expressionStatement(t.assignmentExpression('=', handle, targetExpr)));
|
---|
| 597 | });
|
---|
| 598 | },
|
---|
| 599 | exit: function (path) {
|
---|
| 600 | var node = path.node;
|
---|
| 601 | var id = node.id;
|
---|
| 602 |
|
---|
| 603 | if (id === null) {
|
---|
| 604 | return;
|
---|
| 605 | }
|
---|
| 606 |
|
---|
| 607 | var signature = getHookCallsSignature(node);
|
---|
| 608 |
|
---|
| 609 | if (signature === null) {
|
---|
| 610 | return;
|
---|
| 611 | } // Make sure we're not mutating the same tree twice.
|
---|
| 612 | // This can happen if another Babel plugin replaces parents.
|
---|
| 613 |
|
---|
| 614 |
|
---|
| 615 | if (seenForSignature.has(node)) {
|
---|
| 616 | return;
|
---|
| 617 | }
|
---|
| 618 |
|
---|
| 619 | seenForSignature.add(node); // Don't mutate the tree above this point.
|
---|
| 620 |
|
---|
| 621 | var sigCallID = path.scope.generateUidIdentifier('_s');
|
---|
| 622 | path.scope.parent.push({
|
---|
| 623 | id: sigCallID,
|
---|
| 624 | init: t.callExpression(refreshSig, [])
|
---|
| 625 | }); // The signature call is split in two parts. One part is called inside the function.
|
---|
| 626 | // This is used to signal when first render happens.
|
---|
| 627 |
|
---|
| 628 | path.get('body').unshiftContainer('body', t.expressionStatement(t.callExpression(sigCallID, []))); // The second call is around the function itself.
|
---|
| 629 | // This is used to associate a type with a signature.
|
---|
| 630 | // Unlike with $RefreshReg$, this needs to work for nested
|
---|
| 631 | // declarations too. So we need to search for a path where
|
---|
| 632 | // we can insert a statement rather than hard coding it.
|
---|
| 633 |
|
---|
| 634 | var insertAfterPath = null;
|
---|
| 635 | path.find(function (p) {
|
---|
| 636 | if (p.parentPath.isBlock()) {
|
---|
| 637 | insertAfterPath = p;
|
---|
| 638 | return true;
|
---|
| 639 | }
|
---|
| 640 | });
|
---|
| 641 |
|
---|
| 642 | if (insertAfterPath === null) {
|
---|
| 643 | return;
|
---|
| 644 | }
|
---|
| 645 |
|
---|
| 646 | insertAfterPath.insertAfter(t.expressionStatement(t.callExpression(sigCallID, createArgumentsForSignature(id, signature, insertAfterPath.scope))));
|
---|
| 647 | }
|
---|
| 648 | },
|
---|
| 649 | 'ArrowFunctionExpression|FunctionExpression': {
|
---|
| 650 | exit: function (path) {
|
---|
| 651 | var node = path.node;
|
---|
| 652 | var signature = getHookCallsSignature(node);
|
---|
| 653 |
|
---|
| 654 | if (signature === null) {
|
---|
| 655 | return;
|
---|
| 656 | } // Make sure we're not mutating the same tree twice.
|
---|
| 657 | // This can happen if another Babel plugin replaces parents.
|
---|
| 658 |
|
---|
| 659 |
|
---|
| 660 | if (seenForSignature.has(node)) {
|
---|
| 661 | return;
|
---|
| 662 | }
|
---|
| 663 |
|
---|
| 664 | seenForSignature.add(node); // Don't mutate the tree above this point.
|
---|
| 665 |
|
---|
| 666 | var sigCallID = path.scope.generateUidIdentifier('_s');
|
---|
| 667 | path.scope.parent.push({
|
---|
| 668 | id: sigCallID,
|
---|
| 669 | init: t.callExpression(refreshSig, [])
|
---|
| 670 | }); // The signature call is split in two parts. One part is called inside the function.
|
---|
| 671 | // This is used to signal when first render happens.
|
---|
| 672 |
|
---|
| 673 | if (path.node.body.type !== 'BlockStatement') {
|
---|
| 674 | path.node.body = t.blockStatement([t.returnStatement(path.node.body)]);
|
---|
| 675 | }
|
---|
| 676 |
|
---|
| 677 | path.get('body').unshiftContainer('body', t.expressionStatement(t.callExpression(sigCallID, []))); // The second call is around the function itself.
|
---|
| 678 | // This is used to associate a type with a signature.
|
---|
| 679 |
|
---|
| 680 | if (path.parent.type === 'VariableDeclarator') {
|
---|
| 681 | var insertAfterPath = null;
|
---|
| 682 | path.find(function (p) {
|
---|
| 683 | if (p.parentPath.isBlock()) {
|
---|
| 684 | insertAfterPath = p;
|
---|
| 685 | return true;
|
---|
| 686 | }
|
---|
| 687 | });
|
---|
| 688 |
|
---|
| 689 | if (insertAfterPath === null) {
|
---|
| 690 | return;
|
---|
| 691 | } // Special case when a function would get an inferred name:
|
---|
| 692 | // let Foo = () => {}
|
---|
| 693 | // let Foo = function() {}
|
---|
| 694 | // We'll add signature it on next line so that
|
---|
| 695 | // we don't mess up the inferred 'Foo' function name.
|
---|
| 696 |
|
---|
| 697 |
|
---|
| 698 | insertAfterPath.insertAfter(t.expressionStatement(t.callExpression(sigCallID, createArgumentsForSignature(path.parent.id, signature, insertAfterPath.scope)))); // Result: let Foo = () => {}; __signature(Foo, ...);
|
---|
| 699 | } else {
|
---|
| 700 | // let Foo = hoc(() => {})
|
---|
| 701 | var paths = [path].concat(findHOCCallPathsAbove(path));
|
---|
| 702 | paths.forEach(function (p) {
|
---|
| 703 | p.replaceWith(t.callExpression(sigCallID, createArgumentsForSignature(p.node, signature, p.scope)));
|
---|
| 704 | }); // Result: let Foo = __signature(hoc(__signature(() => {}, ...)), ...)
|
---|
| 705 | }
|
---|
| 706 | }
|
---|
| 707 | },
|
---|
| 708 | VariableDeclaration: function (path) {
|
---|
| 709 | var node = path.node;
|
---|
| 710 | var programPath;
|
---|
| 711 | var insertAfterPath;
|
---|
| 712 | var modulePrefix = '';
|
---|
| 713 |
|
---|
| 714 | switch (path.parent.type) {
|
---|
| 715 | case 'Program':
|
---|
| 716 | insertAfterPath = path;
|
---|
| 717 | programPath = path.parentPath;
|
---|
| 718 | break;
|
---|
| 719 |
|
---|
| 720 | case 'TSModuleBlock':
|
---|
| 721 | insertAfterPath = path;
|
---|
| 722 | programPath = insertAfterPath.parentPath.parentPath;
|
---|
| 723 | break;
|
---|
| 724 |
|
---|
| 725 | case 'ExportNamedDeclaration':
|
---|
| 726 | insertAfterPath = path.parentPath;
|
---|
| 727 | programPath = insertAfterPath.parentPath;
|
---|
| 728 | break;
|
---|
| 729 |
|
---|
| 730 | case 'ExportDefaultDeclaration':
|
---|
| 731 | insertAfterPath = path.parentPath;
|
---|
| 732 | programPath = insertAfterPath.parentPath;
|
---|
| 733 | break;
|
---|
| 734 |
|
---|
| 735 | default:
|
---|
| 736 | return;
|
---|
| 737 | } // These types can be nested in typescript namespace
|
---|
| 738 | // We need to find the export chain
|
---|
| 739 | // Or return if it stays local
|
---|
| 740 |
|
---|
| 741 |
|
---|
| 742 | if (path.parent.type === 'TSModuleBlock' || path.parent.type === 'ExportNamedDeclaration') {
|
---|
| 743 | while (programPath.type !== 'Program') {
|
---|
| 744 | if (programPath.type === 'TSModuleDeclaration') {
|
---|
| 745 | if (programPath.parentPath.type !== 'Program' && programPath.parentPath.type !== 'ExportNamedDeclaration') {
|
---|
| 746 | return;
|
---|
| 747 | }
|
---|
| 748 |
|
---|
| 749 | modulePrefix = programPath.node.id.name + '$' + modulePrefix;
|
---|
| 750 | }
|
---|
| 751 |
|
---|
| 752 | programPath = programPath.parentPath;
|
---|
| 753 | }
|
---|
| 754 | } // Make sure we're not mutating the same tree twice.
|
---|
| 755 | // This can happen if another Babel plugin replaces parents.
|
---|
| 756 |
|
---|
| 757 |
|
---|
| 758 | if (seenForRegistration.has(node)) {
|
---|
| 759 | return;
|
---|
| 760 | }
|
---|
| 761 |
|
---|
| 762 | seenForRegistration.add(node); // Don't mutate the tree above this point.
|
---|
| 763 |
|
---|
| 764 | var declPaths = path.get('declarations');
|
---|
| 765 |
|
---|
| 766 | if (declPaths.length !== 1) {
|
---|
| 767 | return;
|
---|
| 768 | }
|
---|
| 769 |
|
---|
| 770 | var declPath = declPaths[0];
|
---|
| 771 | var inferredName = declPath.node.id.name;
|
---|
| 772 | var innerName = modulePrefix + inferredName;
|
---|
| 773 | findInnerComponents(innerName, declPath, function (persistentID, targetExpr, targetPath) {
|
---|
| 774 | if (targetPath === null) {
|
---|
| 775 | // For case like:
|
---|
| 776 | // export const Something = hoc(Foo)
|
---|
| 777 | // we don't want to wrap Foo inside the call.
|
---|
| 778 | // Instead we assume it's registered at definition.
|
---|
| 779 | return;
|
---|
| 780 | }
|
---|
| 781 |
|
---|
| 782 | var handle = createRegistration(programPath, persistentID);
|
---|
| 783 |
|
---|
| 784 | if (targetPath.parent.type === 'VariableDeclarator') {
|
---|
| 785 | // Special case when a variable would get an inferred name:
|
---|
| 786 | // let Foo = () => {}
|
---|
| 787 | // let Foo = function() {}
|
---|
| 788 | // let Foo = styled.div``;
|
---|
| 789 | // We'll register it on next line so that
|
---|
| 790 | // we don't mess up the inferred 'Foo' function name.
|
---|
| 791 | // (eg: with @babel/plugin-transform-react-display-name or
|
---|
| 792 | // babel-plugin-styled-components)
|
---|
| 793 | insertAfterPath.insertAfter(t.expressionStatement(t.assignmentExpression('=', handle, declPath.node.id))); // Result: let Foo = () => {}; _c1 = Foo;
|
---|
| 794 | } else {
|
---|
| 795 | // let Foo = hoc(() => {})
|
---|
| 796 | targetPath.replaceWith(t.assignmentExpression('=', handle, targetExpr)); // Result: let Foo = hoc(_c1 = () => {})
|
---|
| 797 | }
|
---|
| 798 | });
|
---|
| 799 | },
|
---|
| 800 | Program: {
|
---|
| 801 | enter: function (path) {
|
---|
| 802 | // This is a separate early visitor because we need to collect Hook calls
|
---|
| 803 | // and "const [foo, setFoo] = ..." signatures before the destructuring
|
---|
| 804 | // transform mangles them. This extra traversal is not ideal for perf,
|
---|
| 805 | // but it's the best we can do until we stop transpiling destructuring.
|
---|
| 806 | path.traverse(HookCallsVisitor);
|
---|
| 807 | },
|
---|
| 808 | exit: function (path) {
|
---|
| 809 | var registrations = registrationsByProgramPath.get(path);
|
---|
| 810 |
|
---|
| 811 | if (registrations === undefined) {
|
---|
| 812 | return;
|
---|
| 813 | } // Make sure we're not mutating the same tree twice.
|
---|
| 814 | // This can happen if another Babel plugin replaces parents.
|
---|
| 815 |
|
---|
| 816 |
|
---|
| 817 | var node = path.node;
|
---|
| 818 |
|
---|
| 819 | if (seenForOutro.has(node)) {
|
---|
| 820 | return;
|
---|
| 821 | }
|
---|
| 822 |
|
---|
| 823 | seenForOutro.add(node); // Don't mutate the tree above this point.
|
---|
| 824 |
|
---|
| 825 | registrationsByProgramPath.delete(path);
|
---|
| 826 | var declarators = [];
|
---|
| 827 | path.pushContainer('body', t.variableDeclaration('var', declarators));
|
---|
| 828 | registrations.forEach(function (_ref) {
|
---|
| 829 | var handle = _ref.handle,
|
---|
| 830 | persistentID = _ref.persistentID;
|
---|
| 831 | path.pushContainer('body', t.expressionStatement(t.callExpression(refreshReg, [handle, t.stringLiteral(persistentID)])));
|
---|
| 832 | declarators.push(t.variableDeclarator(handle));
|
---|
| 833 | });
|
---|
| 834 | }
|
---|
| 835 | }
|
---|
| 836 | }
|
---|
| 837 | };
|
---|
| 838 | }
|
---|
| 839 |
|
---|
| 840 | module.exports = ReactFreshBabelPlugin;
|
---|
| 841 | })();
|
---|
| 842 | }
|
---|