@cleanweb/react 1.0.0 → 1.0.3

package/README.md

@@ -0,0 +1,30 @@
+# Structured React Function Components
+This package provides a suite of tools for writing cleaner React function components. It is particularly useful for larger components with lots of state variables and multiple closure functions that need to access those variables. Below is a brief summary of the exported members. A more robust documentation is in the works.
+
+## useCleanState
+Example:
+```jsx
+const state1 = useCleanState(initialStateObject); // { myValue: 'initial-value' }
+const state2 = useCleanState(initialStateGetter); // () => ({ myValue: 'initial-value' })
+
+return (
+	{/* or state2.put.clicked(true) or state2.putMany({ clicked: true }) */}
+	<button onClick={() => state2.clicked = true }>
+		{state1.label}
+	</button>
+)
+```
+
+## useMethods
+To be finished
+
+## useLogic
+To be finished
+
+## useInstance
+To be finished
+Define all of your component's logic and lifecycle effects in a seperate class. Allow your function component to remain neat as just a JSX template. Access the instance of your class within the template with the useInstance hook.
+
+## ClassComponent
+To be finished.
+Wrap your function component in a class, allowing you to organize logic into discreet methods and work with a persistent instance throughout the component's lifecycle that's much easier to reason about. At it's core, your component remains a function component and maintains all features of function components.

package/build/base/index.d.ts

@@ -0,0 +1,2 @@
+export * from './state';
+export * from './methods';

package/build/base/index.js

@@ -0,0 +1,2 @@
+export * from './state';
+export * from './methods';

package/build/{methods.d.ts → base/methods.d.ts}

@@ -1,4 +1,4 @@
-import type { CleanState } from "./state";
+import type { CleanState } from './state';
 export declare class ComponentMethods<TState extends object, TProps extends object> {
     state: CleanState<TState>;
     props: TProps;

package/build/{methods.js → base/methods.js}

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { useMemo } from "react";
+import { useMemo } from 'react';
 var ComponentMethods = /** @class */ (function () {
     function ComponentMethods() {
     }

package/build/{state.js → base/state.js}

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from 'react';
 var _CleanState_ = /** @class */ (function () {
     function _CleanState_(stateAndSetters) {
         var _this = this;
@@ -18,7 +18,7 @@ var _CleanState_ = /** @class */ (function () {
             if (reservedKeys.includes(key))
                 throw new Error("The name \"".concat(key, "\" is reserved by CleanState and cannot be used to index state variables. Please use a different key."));
             _this._values_[key] = responseFromUseState[0], _this._setters_[key] = responseFromUseState[1];
-            _this.put[key] = _this._setters_[key];
+            // this.put[key] = this._setters_[key];
             var self = _this;
             Object.defineProperty(_this, key, {
                 get: function () {

package/build/{class.d.ts → classy/class.d.ts}

@@ -1,10 +1,10 @@
-import type { ComponentInstanceConstructor } from '@/instance';
-import { FunctionComponent } from "react";
-import { ComponentInstance } from '@/instance';
+import type { FunctionComponent } from 'react';
+import type { ComponentInstanceConstructor } from './instance';
+import { ComponentInstance } from './instance';
 type Obj = Record<string, any>;
 type IComponentConstructor = ComponentInstanceConstructor<any, any, any> & typeof ClassComponent<any, any, any>;
 export declare class ClassComponent<TState extends Obj, TProps extends Obj, THooks extends Obj> extends ComponentInstance<TState, TProps, THooks> {
     Render: FunctionComponent<TProps>;
-    static FC: <IComponentType extends IComponentConstructor>(this: IComponentType, _Component?: IComponentType) => (props: InstanceType<IComponentType>["props"]) => import("react").JSX.Element;
+    static FC: <IComponentType extends IComponentConstructor>(this: IComponentType, _Component?: IComponentType) => (props: InstanceType<IComponentType>["props"]) => JSX.Element;
 }
 export {};

package/build/{class.jsx → classy/class.js}

@@ -13,8 +13,9 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { useMemo } from "react";
-import { ComponentInstance, useInstance } from '@/instance';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ComponentInstance, useInstance } from './instance';
 /** Provide more useful stack traces for otherwise non-specific function names. */
 var setFunctionName = function (func, newName) {
     try {
@@ -42,7 +43,7 @@ var ClassComponent = /** @class */ (function (_super) {
             var Render = useInstance(Component, props).Render;
             // Add calling component name to Render function name in stack traces.
             useMemo(function () { return setFunctionName(Render, "".concat(Component.name, ".Render")); }, []);
-            return <Render />;
+            return _jsx(Render, {});
         };
         // Include calling component name in wrapper function name on stack traces.
         var wrapperName = "ClassComponent".concat(Wrapper.name, " > ").concat(Component.name);

package/build/classy/index.d.ts

@@ -0,0 +1,3 @@
+export * from './logic';
+export * from './instance';
+export * from './class';

package/build/classy/index.js

@@ -0,0 +1,3 @@
+export * from './logic';
+export * from './instance';
+export * from './class';

package/build/{instance.d.ts → classy/instance.d.ts}

@@ -1,4 +1,5 @@
-import { ComponentLogic, ComponentLogicConstructor } from "./logic";
+import type { ComponentLogicConstructor } from './logic';
+import { ComponentLogic } from './logic';
 type Obj = Record<string, any>;
 type AsyncAllowedEffectCallback = () => IVoidFunction | Promise<IVoidFunction>;
 export declare const noOp: () => void;

package/build/{instance.js → classy/instance.js}

@@ -13,9 +13,9 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { useEffect } from "react";
-import { useMountState } from "./state";
-import { ComponentLogic, useLogic } from "./logic";
+import { useEffect } from 'react';
+import { useMountState } from '../base/state';
+import { ComponentLogic, useLogic } from './logic';
 export var noOp = function () { };
 var ComponentInstance = /** @class */ (function (_super) {
     __extends(ComponentInstance, _super);

package/build/{logic.d.ts → classy/logic.d.ts}

@@ -1,4 +1,4 @@
-import type { CleanState } from "./state";
+import type { CleanState } from '../base/state';
 export declare class ComponentLogic<TState extends object, TProps extends object, THooks extends object> {
     state: CleanState<TState>;
     props: TProps;

package/build/{logic.js → classy/logic.js}

@@ -1,5 +1,5 @@
-import { useMemo } from "react";
-import { useCleanState } from "./state";
+import { useMemo } from 'react';
+import { useCleanState } from '../base/state';
 var ComponentLogic = /** @class */ (function () {
     function ComponentLogic() {
     }

package/build/globals.d.ts

@@ -18,7 +18,6 @@ type Constructor<
  * @example
  * ```js
  * const getNumber: AsyncFunction<number> = async () => {
- * 	await oneTickDelay();
  * 	return 5;
  * }
  * ```

package/build/index.d.ts

@@ -0,0 +1 @@
+export * from "./classy";

package/build/index.js

@@ -0,0 +1 @@
+export * from "./classy";

package/build/tsconfig.json

@@ -27,7 +27,7 @@
 		"moduleResolution": "node",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"jsx": "preserve",
+		"jsx": "react-jsx",
 		"strictNullChecks": true
 	},
 	"include": [

package/package.json

@@ -1,29 +1,47 @@
 {
   "name": "@cleanweb/react",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "A suite of helpers for writing cleaner React function components.",
   "engines": {
     "node": ">=18"
   },
   "files": [
-    "build"
+    "build",
+    ".npmrc"
   ],
+  "main": "build/index.js",
+  "exports": {
+    ".": "./build/index.js",
+    "./base": "./build/base/index.js",
+    "./classy": "./build/classy/index.js",
+    "./state": "./build/base/state.js",
+    "./methods": "./build/base/methods.js",
+    "./logic": "./build/classy/logic",
+    "./instance": "./build/classy/instance",
+    "./class-component": "./build/classy/class",
+    "./full-class": "./build/classy/class"
+  },
   "scripts": {
-    "build": "rimraf ./build && tsc && copyfiles README.md package.json .npmrc globals.d.ts tsconfig.json build",
+    "prebuild": "rimraf ./build",
+    "build": "tsc && tsc-alias",
+    "postbuild": "copyfiles globals.d.ts tsconfig.json build",
+    "_": "",
     "prepublishOnly": "npm run build",
-    "postpublish": "cd ./mirror-pkg && npm publish && cd ..",
+    "publish:patch": "npm version patch && npm publish",
+    "//postpublish": "cd ./mirror-pkg && npm publish && cd ..",
+    "__": "",
     "test": "echo \"No tests ATM\""
   },
   "keywords": [
     "react",
-    "clean-react",
-    "clean react",
     "function components",
     "hooks",
     "react hooks",
+    "react state",
     "state",
     "clean state",
-    "group state"
+    "group state",
+    "grouped state"
   ],
   "author": {
     "name": "Feranmi Akinlade",
@@ -35,6 +53,7 @@
     "@types/react": "^16",
     "copyfiles": "^2.4.1",
     "rimraf": "^6.0.1",
+    "tsc-alias": "1.8.10",
     "typescript": "^5.6.2"
   },
   "peerDependencies": {

package/build/package.json

@@ -1,43 +0,0 @@
-{
-  "name": "@cleanweb/react",
-  "version": "1.0.0",
-  "description": "A suite of helpers for writing cleaner React function components.",
-  "engines": {
-    "node": ">=18"
-  },
-  "files": [
-    "build"
-  ],
-  "scripts": {
-    "build": "rimraf ./build && tsc && copyfiles README.md package.json .npmrc globals.d.ts tsconfig.json build",
-    "prepublishOnly": "npm run build",
-    "postpublish": "cd ./mirror-pkg && npm publish && cd ..",
-    "test": "echo \"No tests ATM\""
-  },
-  "keywords": [
-    "react",
-    "clean-react",
-    "clean react",
-    "function components",
-    "hooks",
-    "react hooks",
-    "state",
-    "clean state",
-    "group state"
-  ],
-  "author": {
-    "name": "Feranmi Akinlade",
-    "url": "https://feranmi.dev"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@types/node": "20.14.10",
-    "@types/react": "^16",
-    "copyfiles": "^2.4.1",
-    "rimraf": "^6.0.1",
-    "typescript": "^5.6.2"
-  },
-  "peerDependencies": {
-    "react": ">=16"
-  }
-}