@codeyam/codeyam-cli

packages/analyze

This package is concerned with analyzing projects that users add to codeyam. It is used to analyze projects via the background job/script defined in <root>/background/runLocally.ts.

architecture

The external API is defined in src/index.ts and is intended to be as minimal as possible.

The internal APIs are defined in src/lib/index.ts. The intention is to access all internal functionality via lib calls, e.g., lib.namespace.functionName().

notes

There are many ways to declare components

There are many ways to declare components because there are many ways to declare functions: variables (const and let), default export, nameless, arrow, functional-keyword, etc. There is also class declarations.

getPropsFromFunctionalComponent2.ts

This file assumes the props are the first argument of the function. While this is true for the vast majority of React components, here are the times it is not:

1. Higher-Order Components (HOCs)

A higher-order component takes an existing component and returns a new component with added functionality.

function withExtraInfo(WrappedComponent) {
  return function (props) {
    return <WrappedComponent extraInfo="This is extra info" {...props} />;
  };
}

// Usage
const EnhancedComponent = withExtraInfo(MyComponent);

2. Render Props Pattern

A component uses a render prop to share code between components using a prop whose value is a function.

function MouseTracker(props) {
  return <div>{props.render({ x: 100, y: 200 })}</div>;
}

// Usage
<MouseTracker
  render={({ x, y }) => (
    <h1>
      Mouse is at ({x}, {y})
    </h1>
  )}
/>;

3. Function Components with Additional Parameters

An unconventional pattern where a functional component is defined with additional parameters.

// Not a common or recommended approach for React components
function MyComponent({ name }, extraArg) {
  return (
    <div>
      Hello, {name} - {extraArg}
    </div>
  );
}

// Hypothetical usage (React does not support this pattern natively)

4. Components Utilizing Context or Hooks for Prop Derivation

Components might use hooks or context to derive some of their props instead of receiving all through props parameter.

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);
  return <div>Current theme is {theme}</div>;
};

5. TypeScript Utility Types or Conditional Types

Components that leverage TypeScript's utility types for props.

type MyProps = {
  name: string;
  age?: number;
};

const MyComponent: React.FC<Partial<MyProps>> = ({ name, age }) => {
  return (
    <div>
      {name} {age && `- Age: ${age}`}
    </div>
  );
};

6. Functional Components Wrapped in Decorators

Components modified by decorators to inject or modify props.

// Decorator (hypothetical example, as decorators are not yet a part of React's standard pattern)
function withGreeting(target: Function) {
  target.prototype.greeting = 'Hello';
}

@withGreeting
class MyComponent extends React.Component {
  render() {
    return <div>{this.greeting}, world!</div>;
  }
}