@cleanweb/react 1.1.1-beta.8 → 1.1.1-beta.9

package/build/base/methods.d.ts

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

package/build/base/methods.js

@@ -66,7 +66,6 @@ var useMethods = function (Methods, props, state) {
     // But useRef and useState values appear to always be preserved whenever this happens.
     // So those two are the only cross-render-persistence methods we can consider safe.
     var methods = (0, react_1.useRef)((0, react_1.useMemo)(function () {
-        // See useLogic implementation for a discussion of this type assertion.
         return new Methods();
     }, [])).current;
     methods.props = props;

package/build/base/state.d.ts

@@ -7,8 +7,8 @@ type PutState<TState extends object> = {
     [Key in keyof TState]: React.Dispatch<React.SetStateAction<TState[Key]>>;
 };
 declare class CleanStateBase<TState extends Record<string, any>> {
-    reservedKeys: string[];
-    valueKeys: string[];
+    readonly reservedKeys: string[];
+    readonly valueKeys: string[];
     private _values_;
     private _initialValues_;
     private _setters_;
@@ -16,14 +16,16 @@ declare class CleanStateBase<TState extends Record<string, any>> {
     static update: <TState_1 extends object>(this: CleanStateBase<TState_1>) => void;
     get put(): PutState<TState>;
     get initialState(): TState;
-    putMany: (newValues: Partial<TState>) => void;
+    readonly putMany: (newValues: Partial<TState>) => void;
 }
-type TCleanStateInstance<TState extends object> = TState & CleanStateBase<TState>;
-export type TCleanState<TState extends object> = TCleanStateInstance<TState>;
-export type TState<YourCleanState extends CleanStateBase<{}>> = Omit<YourCleanState, keyof CleanStateBase<{}>>;
+export type TStateData = object & {
+    [Key in keyof CleanStateBase<{}>]?: never;
+};
+export type TCleanState<TState extends TStateData> = (CleanStateBase<TState> & Omit<TState, keyof CleanStateBase<{}>>);
+export type ExtractCleanStateData<YourCleanState extends CleanStateBase<{}>> = Omit<YourCleanState, keyof CleanStateBase<{}>>;
 type StateInitFunction = (...args: any[]) => object;
 type StateInit = object | StateInitFunction;
 type TInitialState<Initializer extends StateInit> = Initializer extends (...args: any[]) => (infer TState extends object) ? TState : Initializer;
-type TUseCleanState = <TInit extends StateInit>(_initialState: TInit, ...props: TInit extends (...args: infer TProps extends any[]) => (infer TState extends object) ? TProps : []) => TCleanStateInstance<TInitialState<TInit>>;
+type TUseCleanState = <TInit extends StateInit>(_initialState: TInit, ...props: TInit extends (...args: infer TProps extends any[]) => (infer TState extends object) ? TProps : []) => TCleanState<TInitialState<TInit>>;
 export declare const useCleanState: TUseCleanState;
 export {};

package/build/base/state.js

@@ -122,17 +122,13 @@ var useCleanState = function (_initialState) {
     for (var _i = 1; _i < arguments.length; _i++) {
         props[_i - 1] = arguments[_i];
     }
-    var mounted = (0, exports.useMountState)();
     var initialState = typeof _initialState === 'function'
         ? (0, react_1.useMemo)(function () { return _initialState.apply(void 0, props); }, [])
         : _initialState;
     ;
-    var freshInstance = {};
-    if (!mounted)
-        freshInstance = new CleanState(initialState);
-    if (!freshInstance.put)
-        throw new Error('useCleanState failed to initialized a state instance.');
-    var cleanState = (0, react_1.useRef)(freshInstance).current;
+    var cleanState = (0, react_1.useRef)((0, react_1.useMemo)(function () {
+        return new CleanState(initialState);
+    }, [])).current;
     CleanState.update.call(cleanState);
     return cleanState;
 };

package/build/classy/class.d.ts

@@ -1,15 +1,17 @@
 import type { VoidFunctionComponent } from 'react';
 import type { IComponentInstanceClass } from './instance';
+import type { TStateData } from '../base';
 import { ComponentInstance } from './instance';
 type ComponentClassParams = ConstructorParameters<typeof ClassComponent>;
 type o = object;
 export interface IComponentClass<Instance extends ClassComponent<o, o, o> = ClassComponent, Params extends ComponentClassParams = ComponentClassParams> extends IComponentInstanceClass<Instance, Params> {
 }
 type Extractor = <TComponent extends typeof ClassComponent<o, o, o>>(this: NonNullable<typeof _Component>, _Component?: TComponent & IComponentClass<InstanceType<TComponent>>) => VoidFunctionComponent<InstanceType<TComponent>['props']>;
-export declare class ClassComponent<TProps extends o = EmptyObject, TState extends o = EmptyObject, THooks extends o = EmptyObject> extends ComponentInstance<TProps, TState, THooks> {
-    Render: VoidFunctionComponent<{}>;
+type ReactTemplate = React.JSX.Element | null;
+export declare class ClassComponent<TProps extends o = EmptyObject, TState extends TStateData = EmptyObject, THooks extends o = EmptyObject> extends ComponentInstance<TProps, TState, THooks> {
+    Render?: VoidFunctionComponent<{}>;
+    template?: ReactTemplate | (() => ReactTemplate);
     readonly forceUpdate: VoidFunction;
-    static renderAs: 'component' | 'template';
     static readonly FC: Extractor;
 }
 interface HookWrapperProps<THookFunction extends AnyFunction> {

package/build/classy/class.js

@@ -47,21 +47,25 @@ var ClassComponent = /** @class */ (function (_super) {
     function ClassComponent() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    ClassComponent.renderAs = 'component';
     ClassComponent.FC = function FC(_Component) {
         var Component = _Component !== null && _Component !== void 0 ? _Component : this;
         var isClassComponentType = Component.prototype instanceof ClassComponent;
         if (!Component.getInitialState || !isClassComponentType)
             throw new Error('Attempted to initialize ClassComponent with invalid Class type. Either pass a class that extends ClassComponent to FC (e.g `export FC(MyComponent);`), or ensure it is called as a method on a ClassComponent constructor type (e.g `export MyComponent.FC()`).');
-        var Wrapper = function (props, context) {
+        var Wrapper = function (props) {
             var instance = (0, instance_1.useInstance)(Component, props);
-            var Render = instance.Render;
+            var Render = instance.Render, template = instance.template;
             var _forceUpdate;
             // @ts-expect-error (Cannot assign to 'forceUpdate' because it is a read-only property.ts(2540))
             instance.forceUpdate = (_forceUpdate = useRerender() // Moved this to separate line to allow TS errors. Use proxy local variable to regain some type checking for the assignment.
             );
             // Add calling component name to Render function name in stack traces.
-            (0, react_1.useMemo)(function () { return setFunctionName(Render, "".concat(Component.name, ".Render")); }, [Render]);
+            (0, react_1.useMemo)(function () {
+                if (typeof template === 'function')
+                    setFunctionName(template, "".concat(Component.name, ".template"));
+                else if (typeof Render === 'function')
+                    setFunctionName(Render, "".concat(Component.name, ".Render"));
+            }, [Render, template]);
             /**
              * Normally a component can update it's own state in the "before-render" stage to
              * skip DOM updates and trigger and immediate rerun of the rendering with the new state.
@@ -80,15 +84,25 @@ var ClassComponent = /** @class */ (function (_super) {
              * of doing it directly in `Render`. This might mean cleaner Render functions,
              * so there's probably no real value lost if we keep the component boundary.
             **/
-            if (Component.renderAs === 'template')
-                return Render({}, context);
-            // With the existence of useContext(),
-            // what exactly does the context argument to FunctionComponent represent?
-            // Do we need to find a way to pass that context value to <Render /> here?
-            return (0, jsx_runtime_1.jsx)(Render, {});
+            switch (typeof template) {
+                case 'undefined':
+                    if (typeof Render === 'function')
+                        return (0, jsx_runtime_1.jsx)(Render, {});
+                    else
+                        throw new Error([
+                            'A ClassComponent must have either a `template` or a `Render` property. But neither was found.',
+                            'Add a `template` member to your class and assign a valid (JSX.Element | null) to it. (or a function that returns that).',
+                            'Alternatively, add a `Render` method and assign a FunctionComponent to it.',
+                            '\n\n',
+                            'Expected `Render` to be a Function Component because `template` was `undefined`.',
+                            "Instead got the following '".concat(typeof Render, "': $o"),
+                        ].join(' '), Render);
+                case 'function': return template();
+                default: return template;
+            }
         };
         // Include calling component name in wrapper function name on stack traces.
-        setFunctionName(Wrapper, "".concat(Component.name, " < Wrapper")); // ${Wrapper.name}
+        setFunctionName(Wrapper, "$".concat(Component.name, "$"));
         return Wrapper;
     };
     return ClassComponent;

package/build/classy/instance.d.ts

@@ -1,9 +1,10 @@
+import { TStateData } from '../base/state';
 import { ComponentLogic, IComponentLogicClass } from './logic';
 type AsyncAllowedEffectCallback = () => Awaitable<IVoidFunction>;
 type UseMountCallbacks = <TInstance extends ComponentInstance<any, any, any>>(instance: TInstance) => void;
 export declare const useMountCallbacks: UseMountCallbacks;
 export declare const noOp: () => void;
-export declare class ComponentInstance<TProps extends o = EmptyObject, TState extends o = EmptyObject, THooks extends o = EmptyObject> extends ComponentLogic<TProps, TState, THooks> {
+export declare class ComponentInstance<TProps extends o = EmptyObject, TState extends TStateData = EmptyObject, THooks extends o = EmptyObject> extends ComponentLogic<TProps, TState, THooks> {
     /**
      * Runs only _before_ first render, i.e before the component instance is mounted.
      * Useful for logic that is involved in determining what to render.

package/build/classy/instance.js

@@ -150,3 +150,12 @@ var useInstance = function () {
     return instance;
 };
 exports.useInstance = useInstance;
+testing: {
+    var A = /** @class */ (function (_super) {
+        __extends(A, _super);
+        function A() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return A;
+    }(ComponentInstance));
+}

package/build/classy/logic.d.ts

@@ -1,16 +1,16 @@
-import type { TCleanState, TState } from '../base/state';
+import type { TCleanState, ExtractCleanStateData, TStateData } from '../base/state';
 export type Empty = EmptyObject;
 type o = object;
-export declare class ComponentLogic<TProps extends o = Empty, TState extends o = Empty, THooks extends o = Empty> {
+export declare class ComponentLogic<TProps extends o = Empty, TState extends TStateData = Empty, THooks extends o = Empty> {
     state: TCleanState<TState>;
     props: TProps;
     hooks: THooks;
-    static getInitialState: (p?: o) => {};
-    useHooks?: () => THooks;
+    static getInitialState: (p?: object) => {};
+    useHooks: THooks extends Empty ? undefined | (() => Empty | undefined) : () => THooks;
 }
 type LogicClassParams = ConstructorParameters<typeof ComponentLogic>;
 export interface IComponentLogicClass<Instance extends ComponentLogic<o, o, o> = ComponentLogic, Params extends LogicClassParams = LogicClassParams> extends Constructor<Instance, Params> {
-    getInitialState: (props?: Instance['props']) => TState<Instance['state']>;
+    getInitialState: (props?: Instance['props']) => ExtractCleanStateData<Instance['state']>;
 }
 type UseLogic2 = {
     <Class extends typeof ComponentLogic<Empty, o, o>>(Methods: Class & IComponentLogicClass<InstanceType<Class>>, ...props: ([] | [EmptyObject])): InstanceType<Class>;

package/build/classy/logic.js

@@ -14,6 +14,7 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = exports.ComponentLogic = void 0;
 var react_1 = require("react");
@@ -68,7 +69,9 @@ testing: {
         return C;
     }(ComponentLogic));
     A.getInitialState();
-    var self_2 = useLogic(A, { a: 'boo' });
+    // const oa = {['a' as unknown as symbol]: 'boo'};
+    var oa = (_a = {}, _a['a'] = 'boo', _a);
+    // const self = useLogic(A, oa);
 }
 // export type ComponentClassStatics<Instance extends ComponentLogic<object, object, object>> = {
 // 	getInitialState: (props?: Instance['props']) => TState<Instance['state']>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleanweb/react",
-  "version": "1.1.1-beta.8",
+  "version": "1.1.1-beta.9",
   "description": "A suite of helpers for writing cleaner React function components.",
   "engines": {
     "node": ">=18"