@cleanweb/react 1.0.0 → 1.0.2

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/{class.d.ts → classy/class.d.ts}

@@ -1,6 +1,6 @@
-import type { ComponentInstanceConstructor } from '@/instance';
+import type { ComponentInstanceConstructor } from './instance';
 import { FunctionComponent } from "react";
-import { ComponentInstance } 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> {

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

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { useMemo } from "react";
-import { ComponentInstance, useInstance } from '@/instance';
+import { ComponentInstance, useInstance } from './instance';
 /** Provide more useful stack traces for otherwise non-specific function names. */
 var setFunctionName = function (func, newName) {
     try {

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.js → classy/instance.js}

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { useEffect } from "react";
-import { useMountState } from "./state";
+import { useMountState } from "../base/state";
 import { ComponentLogic, useLogic } from "./logic";
 export var noOp = function () { };
 var ComponentInstance = /** @class */ (function (_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 { useCleanState } from "../base/state";
 var ComponentLogic = /** @class */ (function () {
     function ComponentLogic() {
     }

package/build/index.d.ts

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

package/build/index.js

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

package/package.json

@@ -1,29 +1,47 @@
 {
   "name": "@cleanweb/react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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"
-  }
-}