symref/dist/test/react/FunctionComponentPatterns.test.js

Static code checker for AI code agents (Windsurf, Cline, etc.)

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, memo, forwardRef } from 'react';
// パターン1: 関数宣言 + JSX
function DeclarationComponent() {
    return _jsx("div", { children: "Function Declaration" });
}
// パターン2: アロー関数 + JSX
const ArrowComponent = () => {
    return _jsx("div", { children: "Arrow Function" });
};
// パターン3: 関数式 + JSX
const FunctionExpressionComponent = function () {
    return _jsx("div", { children: "Function Expression" });
};
// パターン4: 型アノテーション (React.FC)
const TypedComponent = ({ name = 'default' }) => {
    return _jsxs("div", { children: ["Hello, ", name] });
};
// パターン5: 型アノテーション (FC)
const ShorthandTypedComponent = () => _jsx("div", { children: "FC Shorthand" });
// パターン6: Reactフック使用
const HooksComponent = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);
    return (_jsxs("div", { children: [_jsxs("p", { children: ["Count: ", count] }), _jsx("button", { onClick: () => setCount(count + 1), children: "Increment" })] }));
};
// パターン7: React.memo
const MemoizedComponent = memo(() => {
    return _jsx("div", { children: "Memoized Component" });
});
// パターン8: React.forwardRef
const ForwardRefComponent = forwardRef((props, ref) => {
    return _jsx("div", { ref: ref, children: props.text });
});
// パターン9: propsパラメータを持つ関数
function PropsComponent(props) {
    return _jsx("h1", { children: props.title });
}
// パターン10: JSXを返さないが、プロパティ名からコンポーネントと推測される
const SomethingComponent = () => {
    // JSXを返さないがpropsパラメータを持つ
    return null;
};
// パターン11: PascalCaseでComponentで終わる名前
const UserProfileComponent = () => {
    return _jsx("div", { children: "User Profile" });
};
export { DeclarationComponent, ArrowComponent, FunctionExpressionComponent, TypedComponent, ShorthandTypedComponent, HooksComponent, MemoizedComponent, ForwardRefComponent, PropsComponent, SomethingComponent, UserProfileComponent };
//# sourceMappingURL=FunctionComponentPatterns.test.js.map