@vyriy/hoc 0.1.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vyriy contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,93 @@
+# @vyriy/hoc
+
+React higher-order component utilities for Vyriy projects.
+
+## Purpose
+
+This package is a home for reusable React HOC helpers such as strict rendering wrappers and other component decorators.
+
+## Install
+
+With npm:
+
+```bash
+npm install @vyriy/hoc
+```
+
+With Yarn:
+
+```bash
+yarn add @vyriy/hoc
+```
+
+## Usage
+
+Wrap a component with React `StrictMode`:
+
+```tsx
+import { withStrictMode } from '@vyriy/hoc';
+
+const App = () => <main />;
+
+export default withStrictMode(App);
+```
+
+Wrap a component with the default React HOC stack:
+
+```tsx
+import { withReact } from '@vyriy/hoc';
+
+const App = () => <main />;
+
+export default withReact(App);
+```
+
+Compose your own HOC stack:
+
+```tsx
+import { compose, withActivity, withProfiler, withStrictMode, withSuspense } from '@vyriy/hoc';
+
+const withApp = compose(withStrictMode, withSuspense, withActivity, withProfiler);
+
+export default withApp(App);
+```
+
+Create a custom HOC from a wrapper component:
+
+```tsx
+import { builder } from '@vyriy/hoc';
+import type { PropsWithChildren } from 'react';
+
+type LayoutProps = {
+  title: string;
+};
+
+const Layout = ({ children, title }: PropsWithChildren<LayoutProps>) => (
+  <section aria-label={title}>{children}</section>
+);
+
+export const withLayout = builder(Layout, {
+  title: 'Application',
+});
+```
+
+Use the shared HOC type when declaring package-local helpers:
+
+```ts
+import type { Hoc } from '@vyriy/hoc';
+```
+
+## API
+
+- `builder(WrapperComponent, wrapperProps?, childrenProps?)` creates a HOC from a wrapper component.
+- `builder(WrapperComponent, wrapperProps, childrenProps, Component)` wraps a component immediately.
+- `compose(...hocs)` composes HOCs from outermost to innermost.
+- `wrapper(WrapperComponent, wrapperProps, childrenProps, Component)` wraps a component directly.
+- `withActivity(Component)` wraps a component with React `Activity`.
+- `withProfiler(Component)` wraps a component with React `Profiler` and default no-op profiling props.
+- `withReact(Component)` wraps a component with `StrictMode`, `Suspense`, `Activity`, and `Profiler`.
+- `withStrictMode(Component)` wraps a component with React `StrictMode`.
+- `withSuspense(Component)` wraps a component with React `Suspense` and the default `<div>Loading...</div>` fallback.
+- `Hoc<Props>` describes a React higher-order component that receives a component and returns a component with the same props.
+- `ChildrenProps<Props, LocalProps>` maps render-prop wrapper values into wrapped component props.
+- `WrapperComponent<WrapperProps, Children>` describes a component that accepts wrapper props and `children`.

package/builder.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { ChildrenProps, Hoc, WrapperComponent } from './types.js';
+type RenderChildren<LocalProps extends unknown[]> = (...localProps: LocalProps) => ReactNode;
+type Builder = {
+    <Props extends object, WrapperProps extends object = object, LocalProps extends unknown[] = unknown[]>(WrapperComponent: WrapperComponent<WrapperProps, RenderChildren<LocalProps>>, wrapperProps: WrapperProps | undefined, childrenProps: ChildrenProps<Props, LocalProps>, Component: ComponentType<Props>): ComponentType<Props>;
+    <Props extends object, WrapperProps extends object = object>(WrapperComponent: WrapperComponent<WrapperProps, ReactNode>, wrapperProps: WrapperProps | undefined, childrenProps: null | undefined, Component: ComponentType<Props>): ComponentType<Props>;
+    <Props extends object, WrapperProps extends object = object>(WrapperComponent: WrapperComponent<WrapperProps, ReactNode>, wrapperProps: WrapperProps, Component: ComponentType<Props>): ComponentType<Props>;
+    <Props extends object, WrapperProps extends object = object>(WrapperComponent: WrapperComponent<WrapperProps, ReactNode>, wrapperProps?: WrapperProps): Hoc<Props>;
+    <Props extends object = object, WrapperProps extends object = object, LocalProps extends unknown[] = unknown[]>(WrapperComponent: WrapperComponent<WrapperProps, RenderChildren<LocalProps>>, wrapperProps: WrapperProps | undefined, childrenProps: ChildrenProps<Props, LocalProps>): Hoc<Props>;
+};
+export declare const builder: Builder;
+export {};

package/builder.js

@@ -0,0 +1,16 @@
+import { wrapper } from './wrapper.js';
+const createBuilder = (WrapperComponent, wrapperProps = {}, childrenProps = null, Component) => {
+    if (!WrapperComponent) {
+        throw new Error('WrapperComponent should be set!');
+    }
+    if (Component) {
+        return wrapper(WrapperComponent, wrapperProps, childrenProps, Component);
+    }
+    return (NewComponent) => {
+        if (!NewComponent) {
+            throw new Error('Component should be set!');
+        }
+        return wrapper(WrapperComponent, wrapperProps, childrenProps, NewComponent);
+    };
+};
+export const builder = createBuilder;

package/compose.d.ts

@@ -0,0 +1,2 @@
+import type { Hoc } from './types.js';
+export declare const compose: <Props extends object = object>(...hocs: Hoc<Props>[]) => Hoc<Props>;

package/compose.js

@@ -0,0 +1 @@
+export const compose = (...hocs) => (Component) => hocs.reduceRight((CurrentComponent, hoc) => hoc(CurrentComponent), Component);

package/hocs/activity.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentType } from 'react';
+export declare const withActivity: <Props extends object>(Component: ComponentType<Props>) => ComponentType<Props>;

package/hocs/activity.js

@@ -0,0 +1,3 @@
+import { Activity } from 'react';
+import { builder } from '../builder.js';
+export const withActivity = (Component) => builder(Activity)(Component);

package/hocs/profiler.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentType } from 'react';
+export declare const withProfiler: <Props extends object>(Component: ComponentType<Props>) => ComponentType<Props>;

package/hocs/profiler.js

@@ -0,0 +1,7 @@
+import { Profiler } from 'react';
+import { builder } from '../builder.js';
+const onRender = () => { };
+export const withProfiler = (Component) => builder(Profiler, {
+    id: 'profiler',
+    onRender,
+})(Component);

package/hocs/strict-mode.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentType } from 'react';
+export declare const withStrictMode: <Props extends object>(Component: ComponentType<Props>) => ComponentType<Props>;

package/hocs/strict-mode.js

@@ -0,0 +1,3 @@
+import { StrictMode } from 'react';
+import { builder } from '../builder.js';
+export const withStrictMode = (Component) => builder(StrictMode)(Component);

package/hocs/suspense.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentType } from 'react';
+export declare const withSuspense: <Props extends object>(Component: ComponentType<Props>) => ComponentType<Props>;

package/hocs/suspense.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { builder } from '../builder.js';
+export const withSuspense = (Component) => builder(Suspense, {
+    fallback: _jsx("div", { children: "Loading..." }),
+})(Component);

package/index.d.ts

@@ -0,0 +1,9 @@
+export * from './builder.js';
+export * from './compose.js';
+export * from './hocs/activity.js';
+export * from './hocs/profiler.js';
+export * from './hocs/strict-mode.js';
+export * from './hocs/suspense.js';
+export * from './react.js';
+export * from './wrapper.js';
+export type * from './types.js';

package/index.js

@@ -0,0 +1,8 @@
+export * from './builder.js';
+export * from './compose.js';
+export * from './hocs/activity.js';
+export * from './hocs/profiler.js';
+export * from './hocs/strict-mode.js';
+export * from './hocs/suspense.js';
+export * from './react.js';
+export * from './wrapper.js';

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@vyriy/hoc",
+  "version": "0.1.9",
+  "description": "React higher-order component utilities for Vyriy projects",
+  "type": "module",
+  "main": "./index.js",
+  "dependencies": {
+    "@types/react": "^19.2.14",
+    "react": "^19.2.6"
+  },
+  "license": "MIT",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./builder": {
+      "types": "./builder.d.ts",
+      "import": "./builder.js",
+      "default": "./builder.js"
+    },
+    "./builder.js": {
+      "types": "./builder.d.ts",
+      "import": "./builder.js",
+      "default": "./builder.js"
+    },
+    "./compose": {
+      "types": "./compose.d.ts",
+      "import": "./compose.js",
+      "default": "./compose.js"
+    },
+    "./compose.js": {
+      "types": "./compose.d.ts",
+      "import": "./compose.js",
+      "default": "./compose.js"
+    },
+    "./hocs/activity": {
+      "types": "./hocs/activity.d.ts",
+      "import": "./hocs/activity.js",
+      "default": "./hocs/activity.js"
+    },
+    "./hocs/activity.js": {
+      "types": "./hocs/activity.d.ts",
+      "import": "./hocs/activity.js",
+      "default": "./hocs/activity.js"
+    },
+    "./hocs/profiler": {
+      "types": "./hocs/profiler.d.ts",
+      "import": "./hocs/profiler.js",
+      "default": "./hocs/profiler.js"
+    },
+    "./hocs/profiler.js": {
+      "types": "./hocs/profiler.d.ts",
+      "import": "./hocs/profiler.js",
+      "default": "./hocs/profiler.js"
+    },
+    "./hocs/strict-mode": {
+      "types": "./hocs/strict-mode.d.ts",
+      "import": "./hocs/strict-mode.js",
+      "default": "./hocs/strict-mode.js"
+    },
+    "./hocs/strict-mode.js": {
+      "types": "./hocs/strict-mode.d.ts",
+      "import": "./hocs/strict-mode.js",
+      "default": "./hocs/strict-mode.js"
+    },
+    "./hocs/suspense": {
+      "types": "./hocs/suspense.d.ts",
+      "import": "./hocs/suspense.js",
+      "default": "./hocs/suspense.js"
+    },
+    "./hocs/suspense.js": {
+      "types": "./hocs/suspense.d.ts",
+      "import": "./hocs/suspense.js",
+      "default": "./hocs/suspense.js"
+    },
+    "./index": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./index.js": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "import": "./react.js",
+      "default": "./react.js"
+    },
+    "./react.js": {
+      "types": "./react.d.ts",
+      "import": "./react.js",
+      "default": "./react.js"
+    },
+    "./wrapper": {
+      "types": "./wrapper.d.ts",
+      "import": "./wrapper.js",
+      "default": "./wrapper.js"
+    },
+    "./wrapper.js": {
+      "types": "./wrapper.d.ts",
+      "import": "./wrapper.js",
+      "default": "./wrapper.js"
+    }
+  }
+}

package/react.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentType } from 'react';
+export declare const withReact: <Props extends object>(Component: ComponentType<Props>) => ComponentType<Props>;

package/react.js

@@ -0,0 +1,6 @@
+import { compose } from './compose.js';
+import { withActivity } from './hocs/activity.js';
+import { withProfiler } from './hocs/profiler.js';
+import { withStrictMode } from './hocs/strict-mode.js';
+import { withSuspense } from './hocs/suspense.js';
+export const withReact = (Component) => compose(withStrictMode, withSuspense, withActivity, withProfiler)(Component);

package/types.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentType, JSXElementConstructor, ReactNode } from 'react';
+export type Hoc<Props extends object = object> = (Component: ComponentType<Props>) => ComponentType<Props>;
+export type ChildrenProps<Props extends object = object, LocalProps extends unknown[] = unknown[]> = (...localProps: LocalProps) => Partial<Props>;
+export type WrapperComponent<WrapperProps extends object = object, Children = ReactNode> = JSXElementConstructor<WrapperProps & {
+    children: Children;
+}>;

package/wrapper.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { ChildrenProps, WrapperComponent } from './types.js';
+type RenderChildren<LocalProps extends unknown[]> = (...localProps: LocalProps) => ReactNode;
+type Wrapper = {
+    <Props extends object, WrapperProps extends object = object, LocalProps extends unknown[] = unknown[]>(WrapperComponent: WrapperComponent<WrapperProps, RenderChildren<LocalProps>>, wrapperProps: WrapperProps, childrenProps: ChildrenProps<Props, LocalProps>, Component: ComponentType<Props>): ComponentType<Props>;
+    <Props extends object, WrapperProps extends object = object>(WrapperComponent: WrapperComponent<WrapperProps, ReactNode>, wrapperProps: WrapperProps, childrenProps: null, Component: ComponentType<Props>): ComponentType<Props>;
+    <Props extends object, WrapperProps extends object = object, LocalProps extends unknown[] = unknown[]>(WrapperComponent: WrapperComponent<WrapperProps, ReactNode | RenderChildren<LocalProps>>, wrapperProps: WrapperProps, childrenProps: ChildrenProps<Props, LocalProps> | null, Component: ComponentType<Props>): ComponentType<Props>;
+};
+export declare const wrapper: Wrapper;
+export {};

package/wrapper.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const createWrapper = (WrapperComponent, wrapperProps = {}, childrenProps = null, Component) => {
+    const WrappedComponent = (props) => {
+        if (childrenProps) {
+            return (_jsx(WrapperComponent, { ...wrapperProps, ...props, children: (...localProps) => _jsx(Component, { ...props, ...childrenProps(...localProps) }) }));
+        }
+        return (_jsx(WrapperComponent, { ...wrapperProps, ...props, children: _jsx(Component, { ...props }) }));
+    };
+    return WrappedComponent;
+};
+export const wrapper = createWrapper;