@cleanweb/react 1.1.1-beta.27 → 1.1.1-beta.28

package/README.md

@@ -247,7 +247,7 @@ class Button extends ClassComponent {
 	}
 
 	/** Button Template */
-	Render = () => {
+	template = () => {
 		const { Paragraphs, submit, state } = this;
 
 		return <>

package/build/classy/class/index.d.ts

@@ -1,4 +1,3 @@
-import type { VoidFunctionComponent } from 'react';
 import type { TStateData } from '../../base';
 import type { THooksBase } from '../logic';
 import type { Extractor } from './types/extractor';
@@ -13,19 +12,6 @@ type o = object;
  * with little to no changes to their existing semantics/implementation.
  */
 export declare class ClassComponent<TProps extends o = WeakEmptyObject, TState extends TStateData = WeakEmptyObject, THooks extends THooksBase = void> extends ComponentInstance<TProps, TState, THooks> {
-    /**
-     * @deprecated An older alternative to {@link template}.
-     *
-     * Using this will add a component boundary between your JSX template
-     * and the function component returned from ClassComponent.FC();
-     *
-     * This means that from React's perspective, your template won't "own" the state and props it consumes.
-     * This could lead to subtle unexpected changes in behaviour.
-     *
-     * In most cases, you should use {@link template} instead, as it allows your class component
-     * to function more predictably as a single unit.
-     */
-    Render?: VoidFunctionComponent<{}>;
     /**
      * Analogous to {@link React.Component.render}. A function that returns
      * your component's JSX template.
@@ -57,7 +43,7 @@ export declare class ClassComponent<TProps extends o = WeakEmptyObject, TState e
      * }
      * ```
      */
-    template?: () => (React.JSX.Element | null);
+    template: () => (React.JSX.Element | null);
     /**
      * Manually trigger a rerender of your component.
      * You should rarely ever need this. But if you are migrating
@@ -93,9 +79,9 @@ export declare class ClassComponent<TProps extends o = WeakEmptyObject, TState e
      * // Render with `<Button.RC />`, or export RC to use the component in other files.
      * export default Button.RC;
      */
-    static readonly FC: Extractor;
-    /** @see {@link ClassComponent.FC} */
     static readonly extract: Extractor;
+    /** @see {@link ClassComponent.extract} */
+    static readonly FC: Extractor;
 }
 export { ClassComponent as Component };
 /** /testing: {

package/build/classy/class/index.js

@@ -16,7 +16,6 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Component = exports.ClassComponent = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var instance_1 = require("../instance");
 var function_name_1 = require("./utils/function-name");
@@ -32,7 +31,40 @@ var rerender_1 = require("./utils/rerender");
 var ClassComponent = /** @class */ (function (_super) {
     __extends(ClassComponent, _super);
     function ClassComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        /**
+         * Analogous to {@link React.Component.render}. A function that returns
+         * your component's JSX template.
+         *
+         * You should place most logic that would usually go here
+         * in {@link ComponentInstance.beforeRender | `beforeRender`} instead.
+         * This helps to separate concerns and keep the template itself clean.
+         *
+         * ******
+         *
+         * Ideally the template method should only be concerned with defining the HTML/JSX structure of
+         * your component's UI. This may include destructuring nested instance members
+         * into more easily accessible local variables, or some simple transformation of data from props/state
+         * into a more appropriate format for display.
+         *
+         * ******
+         *
+         * @example < caption>Using a template function that returns JSX.</ caption>
+         *
+         * ```tsx
+         * template = () => {
+         *     const { title } = this.props;
+         *
+         *     return (
+         *         <h1>
+         *             {this.props.title}
+         *         </h1>
+         *     );
+         * }
+         * ```
+         */
+        _this.template = function () { return null; };
+        return _this;
     }
     var _a;
     _a = ClassComponent;
@@ -62,7 +94,7 @@ var ClassComponent = /** @class */ (function (_super) {
      * // Render with `<Button.RC />`, or export RC to use the component in other files.
      * export default Button.RC;
      */
-    ClassComponent.FC = function FC(_Component) {
+    ClassComponent.extract = function FC(_Component) {
         var Component = _Component !== null && _Component !== void 0 ? _Component : this;
         var isClassComponentType = Component.prototype instanceof _a;
         if (!Component.getInitialState || !isClassComponentType)
@@ -73,56 +105,16 @@ var ClassComponent = /** @class */ (function (_super) {
         /** A class-based React function component created with (@cleanweb/react).{@link ClassComponent} */
         var Wrapper = function (props) {
             var instance = (0, instance_1.useInstance)(Component, props);
-            var Render = instance.Render, template = instance.template;
+            var template = instance.template;
             var _forceUpdate;
             // @ts-expect-error (Cannot assign to 'forceUpdate' because it is a read-only property.ts(2540))
             instance.forceUpdate = (_forceUpdate = (0, rerender_1.useRerender)() // Moved this to separate line to allow TS errors. Use proxy local variable to regain some type checking for the assignment to `instance.forceUpdate`.
             );
-            // Add calling component name to Render function name in stack traces.
+            // Add calling component name to template function name in stack traces.
             (0, react_1.useMemo)(function () {
-                if (typeof template === 'function')
-                    (0, function_name_1.setFunctionName)(template, "".concat(Component.name, ".template"));
-                else if (typeof Render === 'function')
-                    (0, function_name_1.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.
-             *
-             * It may be impossible to do this within the body of Render, if we call it as JSX here,
-             * since technically, the Wrapper component owns the state and not the Render component.
-             * Using it as JSX establishes a component boundary, and React will throw an error if we try to set
-             * state in the "before-render" stage of `Render`, since it will be attempting to update it's parent's
-             * state (i.e `Wrapper` component) rather than it's own state.
-             *
-             * Users should favor using the `template()` method instead. This way, we avoid
-             * establishing a component boundary between `Wrapper` and `Render`.
-             *
-             * Although, since beforeRender() is called earlier from a hook, this is probably
-             * a non-issue. It will only force users to move their logic into `beforeRender` instead
-             * of doing it directly in `Render`. Even if `template` is being used, the `beforeRender` method
-             * is the preferred location for such logic to maintain a high level of separation of concerns,
-             * which is what this library exists to provide.
-             *
-             * So there's probably no real value lost with the component boundary. Users should just use
-             * `beforeRender` + `template`.
-            **/
-            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: (JSX.Element | null);` member to your class, (or a `template` method that returns the same type).',
-                            'Alternatively, add a `Render: FunctionComponent;` method.',
-                            '\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;
-            }
+                (0, function_name_1.setFunctionName)(template, "".concat(Component.name, ".template"));
+            }, [template]);
+            return template();
         };
         /**************************************
         *     End Function Component          *
@@ -130,9 +122,25 @@ var ClassComponent = /** @class */ (function (_super) {
         (0, function_name_1.setFunctionName)(Wrapper, "$".concat(Component.name, "$"));
         return Wrapper;
     };
-    /** @see {@link ClassComponent.FC} */
-    ClassComponent.extract = _a.FC;
+    /** @see {@link ClassComponent.extract} */
+    ClassComponent.FC = _a.extract;
     return ClassComponent;
 }(instance_1.ComponentInstance));
 exports.ClassComponent = ClassComponent;
 exports.Component = ClassComponent;
+/** /testing: {
+    const a: object = {b: ''};
+
+    type t = keyof typeof a;
+
+    class MyComponentLogic extends ClassComponent<{}, {a: ''}> {
+        static getInitialState = () => ({a: '' as const});
+        // a = () => this.hooks.a = '';
+
+        useHooks = () => {
+            this.state.a;
+        };
+    };
+
+    const Template = MyComponentLogic.FC();
+}/**/

package/build/classy/class/types/extractor.d.ts

@@ -2,5 +2,5 @@ import type { VoidFunctionComponent } from 'react';
 import type { BaseClassComponent, IClassComponent } from './class/instance';
 import type { IClassComponentConstructor } from './class/static';
 type BaseCCConstructor = IClassComponentConstructor<BaseClassComponent>;
-export type Extractor = <TComponent extends BaseCCConstructor>(this: TComponent & Constructor<IClassComponent<InstanceType<TComponent>>>, Component?: TComponent & Constructor<IClassComponent<InstanceType<TComponent>>>) => VoidFunctionComponent<InstanceType<TComponent>['props']>;
+export type Extractor = <TComponent extends BaseCCConstructor>(this: TComponent & IClassComponentConstructor<IClassComponent<InstanceType<TComponent>>>, Component?: TComponent & IClassComponentConstructor<IClassComponent<InstanceType<TComponent>>>) => VoidFunctionComponent<InstanceType<TComponent>['props']>;
 export {};

package/build/classy/logic/index.d.ts

@@ -25,8 +25,6 @@ export declare class ComponentLogic<TProps extends object = {}, TState extends T
      * Called before each instance of your component is mounted.
      * It receives the initial `props` object and should return
      * an object with the initial values for your component's state.
-     *
-     * PS: `p?: object` wierdly causes TS error in v^5.5.4; object is not assignable to the component's TProps.
      */
     static getInitialState: (p?: any) => object;
     /** Do not use. Will be undefined at runtime. */

package/build/classy/logic/index.js

@@ -43,8 +43,6 @@ var ComponentLogic = /** @class */ (function () {
      * Called before each instance of your component is mounted.
      * It receives the initial `props` object and should return
      * an object with the initial values for your component's state.
-     *
-     * PS: `p?: object` wierdly causes TS error in v^5.5.4; object is not assignable to the component's TProps.
      */
     ComponentLogic.getInitialState = function (p) { return ({}); };
     return ComponentLogic;

package/package.json

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