react-compiler-check
Version:
Diagnostics tool for React Compiler compatibility
158 lines (157 loc) • 7.59 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const parser_1 = require("@babel/parser");
const traverse_1 = __importDefault(require("@babel/traverse"));
const t = __importStar(require("@babel/types"));
const rules = {
'no-legacy-patterns': {
meta: {
type: 'problem',
docs: {
description: 'Detect patterns that may break React Compiler optimizations',
recommended: true,
},
schema: [],
messages: {
legacyPattern: '{{message}}\nSuggestion: {{suggestion}}',
},
},
create(context) {
return {
Program(node) {
const sourceCode = context.getSourceCode().text;
try {
const ast = (0, parser_1.parse)(sourceCode, {
sourceType: 'module',
plugins: ['jsx', 'typescript'],
});
const diagnostics = [];
(0, traverse_1.default)(ast, {
MemberExpression(path) {
if (path.node.object.type === 'ThisExpression' &&
t.isIdentifier(path.node.property) &&
path.node.property.name === 'refs') {
diagnostics.push({
node: path.node,
message: 'String refs are deprecated and may break React Compiler optimizations.',
suggestion: 'Replace with useRef hook or createRef.',
});
}
},
ClassProperty(path) {
if (t.isIdentifier(path.node.key) &&
path.node.key.name === 'contextTypes') {
diagnostics.push({
node: path.node,
message: 'Legacy Context (contextTypes) is deprecated and may cause React Compiler to fail.',
suggestion: 'Use createContext and contextType or useContext.',
});
}
},
ObjectExpression(path) {
if (path.findParent((p) => p.isJSXElement()) &&
path.node.properties.some((prop) => t.isObjectProperty(prop) &&
t.isExpression(prop.key) &&
prop.computed)) {
diagnostics.push({
node: path.node,
message: 'Dynamic object structures in render may prevent React Compiler memoization.',
suggestion: 'Move dynamic logic to useMemo or extract to a separate function.',
});
}
},
ThisExpression(path) {
const parentFunction = path.findParent((p) => p.isFunctionDeclaration() || p.isFunctionExpression());
if (parentFunction &&
t.isFunction(parentFunction.node) &&
!parentFunction.node.params.some((param) => t.isIdentifier(param) && param.name === 'this')) {
diagnostics.push({
node: path.node,
message: 'Unbound `this` in class methods may lead to runtime errors with React Compiler.',
suggestion: 'Bind methods in constructor or use arrow functions.',
});
}
},
CallExpression(path) {
if (t.isIdentifier(path.node.callee) &&
path.node.callee.name === 'fetch' &&
path.findParent((p) => p.isJSXElement())) {
diagnostics.push({
node: path.node,
message: 'Impure render (fetch in render) violates React Compiler’s purity rules.',
suggestion: 'Move fetch to useEffect or a separate event handler.',
});
}
},
});
diagnostics.forEach((diag) => {
context.report({
node,
loc: diag.node.loc,
messageId: 'legacyPattern',
data: {
message: diag.message,
suggestion: diag.suggestion,
},
});
});
}
catch (error) {
context.report({
node,
message: `Failed to parse file: ${error.message}`,
loc: { line: 0, column: 0 },
});
}
},
};
},
},
};
exports.default = {
rules,
configs: {
recommended: {
plugins: ['react-compiler-check'],
rules: {
'react-compiler-check/no-legacy-patterns': 'error',
},
},
},
};