i2-like functionalities for ReactJS

[thorwhalen]

We'd like to find or build a few fundamental meta-tools for React to reduce boilerplate and non-reuse in our JS code.

We'll let our front end needs direct what we need, but many ideas can be found in the python i2 package

[thorwhalen]

i2.wrapper

i2.wrapper is a meta-tool for wrapping functions.

[thorwhalen]

What would an equivalent in React be?

Creating an equivalent in React for the i2.wrapper module described in the provided documentation would involve creating higher-order components (HOCs) or hooks that modify the behavior of React components. Here's a conceptual translation:

1. Wrap Class Equivalent in React:

   • In the i2.wrapper module, the Wrap class seems to be a way to wrap a function and modify its behavior using ingress and egress functions.
   • In React, this can be achieved using a Higher-Order Component (HOC). An HOC is a function that takes a component and returns a new component with additional props or modified behavior.

2. Ingress and Egress in React:

   • In the provided module, ingress and egress functions modify the input and output of the wrapped function.
   • In React, this can be achieved using props manipulation in HOCs or custom hooks.

Here's a conceptual example in React:

// HOC that acts as a "wrapper"
function withWrapper(WrappedComponent) {
  return function WrapperComponent(props) {
    // Ingress: Modify props before they are passed to the wrapped component
    const modifiedProps = ingress(props);

    // Render the wrapped component with modified props
    const renderedComponent = <WrappedComponent {...modifiedProps} />;

    // Egress: Modify the rendered component or its behavior
    return egress(renderedComponent);
  };
}

// Example ingress function: adds a new prop
function ingress(props) {
  return {
    ...props,
    newProp: "This is a new prop!"
  };
}

// Example egress function: wraps the component in a div
function egress(component) {
  return <div className="wrapper">{component}</div>;
}

// Usage
const EnhancedComponent = withWrapper(MyComponent);

3. Exceptions and Validations:

   • In the provided module, there are exceptions like CallerValidationError and EgressValidationError.
   • In React, you can throw similar exceptions or display error boundaries when certain conditions are not met.

4. Ingress Class and Mapping:

   • The Ingress class and related functionalities in the module seem to provide a way to systematically modify function arguments.
   • In React, this can be achieved using custom hooks that modify component props or state based on certain rules or mappings.

5. SmartDefault and MakeFromFunc:

   • These functionalities can be translated into React as custom hooks or utility functions that provide default values or generate values based on certain conditions.

It's important to note that while the concepts can be translated, the exact behavior and use cases might differ based on the context in which the i2.wrapper module is used versus a React application. The above is a high-level conceptual translation, and the actual implementation would depend on specific requirements.

[thorwhalen]

Are there some react libraries that would give me such functionalities?

Yes, there are several React libraries and utilities that can provide similar functionalities to the i2.wrapper module. Here are some popular ones:

1. Higher-Order Components (HOCs):

   • recompose: A React utility belt for function components and higher-order components. It provides a suite of utilities for creating and composing React components.

2. Hooks:

   • react-use: A collection of essential React Hooks. It provides a wide variety of hooks for different use cases, including state management, side effects, and more.

3. Validation:

   • prop-types: Runtime type checking for React props and similar objects.
   • yup: A JavaScript schema builder for value parsing and validation. It can be integrated with React to validate props, state, or form values.

4. Error Boundaries:

   • react-error-boundary: Simple reusable React error boundary component.

5. Function Wrapping and Composition:

   • lodash: A modern JavaScript utility library delivering modularity, performance, and extras. It provides functions like _.wrap for wrapping functions and _.compose for function composition.

6. State Management and Middleware:

   • redux: A predictable state container for JavaScript apps. With middleware like redux-thunk or redux-saga, you can intercept and modify actions or effects.
   • mobx: Simple, scalable state management. It provides decorators and observables to modify and track state changes.

7. Function Argument Manipulation:

   • ramda: A practical functional library for JavaScript programmers. It provides utilities for function argument manipulation, composition, and more.

8. Default Props and State:

   • React itself provides the ability to set default props using defaultProps on class components or by setting default values in functional component arguments.

While these libraries provide functionalities that can be used to achieve similar behavior to the i2.wrapper module, the exact implementation and integration would depend on the specific requirements and use cases in your React application.