intact-react - npm Package Compare versions

Comparing version 3.0.0-beta.17 to 3.0.0-beta.18

dist/fakePromise.d.ts

@@ -7,3 +7,3 @@ declare type Callback = () => void;
     };
-    private resolved;
+    resolved: boolean;
     private callbacks;
@@ -10,0 +10,0 @@ constructor(executor: Executor);

dist/functionalWrapper.d.ts

@@ -6,2 +6,3 @@ import { ComponentFunction, VNodeComponentClass, Props } from 'intact';
 };
+export declare const cid = "IntactReactFunctional";
 export declare function functionalWrapper<P = {}>(Component: ComponentFunctionForIntact<P>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P & {
@@ -8,0 +9,0 @@ forwardRef?: ForwardedRef<any> | undefined;

dist/index.cjs.dev.js

@@ -103,3 +103,3 @@ 'use strict';
             if (this.done) {
-                throw new Error('The FakePromises has done and cannot add new promise. ' +
+                console.error('The FakePromises has done and cannot add new promise. ' +
                     'Maybe it is a bug of IntactReact');
@@ -239,4 +239,7 @@ }
         });
-        // parent.$promises.value.push(promise);
-        parentComponent.$promises.value.push(promise);
+        // if the promised has be resolved, it indicate that this render is sync.
+        // Maybe we call update in intact directly, and it is not in React's render context
+        if (!promise.resolved) {
+            parentComponent.$promises.add(promise);
+        }
     };
@@ -320,2 +323,34 @@ return Wrapper;
 
+var cid = 'IntactReactFunctional';
+function functionalWrapper(Component) {
+    function Ctor(props, context) {
+        if (context) {
+            // invoked by React
+            var vNodes = Component(normalizeProps(props), true);
+            if (isArray(vNodes)) {
+                return react.createElement(react.Fragment, null, vNodes.map(function (vNode, index) {
+                    return normalizeIntactVNodeToReactVNode(vNode, index);
+                }));
+            }
+            return normalizeIntactVNodeToReactVNode(vNodes, 0);
+        }
+        else {
+            // invoked by Intact
+            return Component(props);
+        }
+    }
+    var element = react.forwardRef(function (props, ref) {
+        if (ref)
+            props = tslib.__assign(tslib.__assign({}, props), { forwardRef: ref });
+        return react.createElement(Ctor, props);
+    });
+    element._$type = Ctor;
+    element.$cid = cid;
+    return element;
+}
+function normalizeIntactVNodeToReactVNode(vNode, key) {
+    var props = vNode.props;
+    return react.createElement(vNode.tag, props ? tslib.__assign({ key: key }, props) : { key: key });
+}
+
 function normalize(vNode) {
@@ -340,6 +375,7 @@ if (isInvalid(vNode))
         var props = normalizeProps(vNode.props);
+        var type = vNode.type;
         if (!isNullOrUndefined(key)) {
             props.key = key;
         }
-        return intact.createComponentVNode(4, vNode.type, props, key, normalizeRef(vNode.ref));
+        return intact.createComponentVNode(4, type.$cid === cid ? type._$type : type, props, key, normalizeRef(vNode.ref));
     }
@@ -474,36 +510,6 @@ if (vNode.type === react.Fragment) {
     var fiber = placeholder[internalInstanceKey];
-    // (node as any)[internalInstanceKey] = fiber;
+    node[internalInstanceKey] = fiber;
     return fiber;
 }
 
-function functionalWrapper(Component) {
-    function Ctor(props, context) {
-        if (context) {
-            // invoked by React
-            var vNodes = Component(normalizeProps(props), true);
-            if (isArray(vNodes)) {
-                return react.createElement(react.Fragment, null, vNodes.map(function (vNode, index) {
-                    return normalizeIntactVNodeToReactVNode(vNode, index);
-                }));
-            }
-            return normalizeIntactVNodeToReactVNode(vNodes, 0);
-        }
-        else {
-            // invoked by Intact
-            return Component(props);
-        }
-    }
-    var element = react.forwardRef(function (props, ref) {
-        if (ref)
-            props = tslib.__assign(tslib.__assign({}, props), { forwardRef: ref });
-        return react.createElement(Ctor, props);
-    });
-    element._$type = Ctor;
-    return element;
-}
-function normalizeIntactVNodeToReactVNode(vNode, key) {
-    var props = vNode.props;
-    return react.createElement(vNode.tag, props ? tslib.__assign({ key: key }, props) : { key: key });
-}
-
 var PROMISES = '_$IntactReactPromises';
@@ -608,3 +614,9 @@ var EMPTY_ARRAY = [];
         vNode.children = this;
-        this.$render(null, vNode, parentElement, placeholder.nextElementSibling, this.$mountedQueue);
+        var sibling = placeholder;
+        while (sibling = sibling.nextSibling) {
+            if (sibling.nodeType !== 8 || sibling.nodeValue !== containerComment) {
+                break;
+            }
+        }
+        this.$render(null, vNode, parentElement, sibling, this.$mountedQueue);
         this.$done(function () {
@@ -626,6 +638,12 @@ handleElementOnMounted(parentElement, placeholder, intact.findDomFromVNode(vNode, true));
         this.$vNode = vNode;
-        this.$promises.reset();
-        var mountedQueue = this.$mountedQueue = getMountedQueue(this.$senior);
-        this.$update(lastVNode, vNode, this.$parentElement, null, mountedQueue, false);
-        this.$done(null);
+        var promises = this.$promises;
+        if (promises.done) {
+            promises.reset();
+            var mountedQueue = this.$mountedQueue = getMountedQueue(this.$senior);
+            this.$update(lastVNode, vNode, this.$parentElement, null, mountedQueue, false);
+            this.$done(null);
+        }
+        else {
+            this.$update(lastVNode, vNode, this.$parentElement, null, this.$mountedQueue, false);
+        }
     };
@@ -692,2 +710,6 @@ Component.prototype.componentWillUnmount = function () {
     fiber.stateNode = element;
+    var alternate = fiber.alternate;
+    if (alternate) {
+        alternate.stateNode = element;
+    }
 }
@@ -694,0 +716,0 @@

dist/index.cjs.prod.js

@@ -227,4 +227,7 @@ 'use strict';
         });
-        // parent.$promises.value.push(promise);
-        parentComponent.$promises.value.push(promise);
+        // if the promised has be resolved, it indicate that this render is sync.
+        // Maybe we call update in intact directly, and it is not in React's render context
+        if (!promise.resolved) {
+            parentComponent.$promises.add(promise);
+        }
     };
@@ -302,2 +305,34 @@ return Wrapper;
 
+var cid = 'IntactReactFunctional';
+function functionalWrapper(Component) {
+    function Ctor(props, context) {
+        if (context) {
+            // invoked by React
+            var vNodes = Component(normalizeProps(props), true);
+            if (isArray(vNodes)) {
+                return react.createElement(react.Fragment, null, vNodes.map(function (vNode, index) {
+                    return normalizeIntactVNodeToReactVNode(vNode, index);
+                }));
+            }
+            return normalizeIntactVNodeToReactVNode(vNodes, 0);
+        }
+        else {
+            // invoked by Intact
+            return Component(props);
+        }
+    }
+    var element = react.forwardRef(function (props, ref) {
+        if (ref)
+            props = tslib.__assign(tslib.__assign({}, props), { forwardRef: ref });
+        return react.createElement(Ctor, props);
+    });
+    element._$type = Ctor;
+    element.$cid = cid;
+    return element;
+}
+function normalizeIntactVNodeToReactVNode(vNode, key) {
+    var props = vNode.props;
+    return react.createElement(vNode.tag, props ? tslib.__assign({ key: key }, props) : { key: key });
+}
+
 function normalize(vNode) {
@@ -322,6 +357,7 @@ if (isInvalid(vNode))
         var props = normalizeProps(vNode.props);
+        var type = vNode.type;
         if (!isNullOrUndefined(key)) {
             props.key = key;
         }
-        return intact.createComponentVNode(4, vNode.type, props, key, normalizeRef(vNode.ref));
+        return intact.createComponentVNode(4, type.$cid === cid ? type._$type : type, props, key, normalizeRef(vNode.ref));
     }
@@ -456,36 +492,6 @@ if (vNode.type === react.Fragment) {
     var fiber = placeholder[internalInstanceKey];
-    // (node as any)[internalInstanceKey] = fiber;
+    node[internalInstanceKey] = fiber;
     return fiber;
 }
 
-function functionalWrapper(Component) {
-    function Ctor(props, context) {
-        if (context) {
-            // invoked by React
-            var vNodes = Component(normalizeProps(props), true);
-            if (isArray(vNodes)) {
-                return react.createElement(react.Fragment, null, vNodes.map(function (vNode, index) {
-                    return normalizeIntactVNodeToReactVNode(vNode, index);
-                }));
-            }
-            return normalizeIntactVNodeToReactVNode(vNodes, 0);
-        }
-        else {
-            // invoked by Intact
-            return Component(props);
-        }
-    }
-    var element = react.forwardRef(function (props, ref) {
-        if (ref)
-            props = tslib.__assign(tslib.__assign({}, props), { forwardRef: ref });
-        return react.createElement(Ctor, props);
-    });
-    element._$type = Ctor;
-    return element;
-}
-function normalizeIntactVNodeToReactVNode(vNode, key) {
-    var props = vNode.props;
-    return react.createElement(vNode.tag, props ? tslib.__assign({ key: key }, props) : { key: key });
-}
-
 var PROMISES = '_$IntactReactPromises';
@@ -583,3 +589,9 @@ var Component = /*#__PURE__*/ /*#__PURE__*/ /** @class */ (function (_super) {
         vNode.children = this;
-        this.$render(null, vNode, parentElement, placeholder.nextElementSibling, this.$mountedQueue);
+        var sibling = placeholder;
+        while (sibling = sibling.nextSibling) {
+            if (sibling.nodeType !== 8 || sibling.nodeValue !== containerComment) {
+                break;
+            }
+        }
+        this.$render(null, vNode, parentElement, sibling, this.$mountedQueue);
         this.$done(function () {
@@ -598,6 +610,12 @@ handleElementOnMounted(parentElement, placeholder, intact.findDomFromVNode(vNode, true));
         this.$vNode = vNode;
-        this.$promises.reset();
-        var mountedQueue = this.$mountedQueue = getMountedQueue(this.$senior);
-        this.$update(lastVNode, vNode, this.$parentElement, null, mountedQueue, false);
-        this.$done(null);
+        var promises = this.$promises;
+        if (promises.done) {
+            promises.reset();
+            var mountedQueue = this.$mountedQueue = getMountedQueue(this.$senior);
+            this.$update(lastVNode, vNode, this.$parentElement, null, mountedQueue, false);
+            this.$done(null);
+        }
+        else {
+            this.$update(lastVNode, vNode, this.$parentElement, null, this.$mountedQueue, false);
+        }
     };
@@ -664,2 +682,6 @@ Component.prototype.componentWillUnmount = function () {
     fiber.stateNode = element;
+    var alternate = fiber.alternate;
+    if (alternate) {
+        alternate.stateNode = element;
+    }
 }
@@ -666,0 +688,0 @@

dist/index.d.ts

@@ -8,2 +8,5 @@ import { Component as IntactComponent, Props, VNodeComponentClass } from 'intact';
 declare type ValidReactNode = ReactChild | null | undefined;
+declare type OnEvents<E> = {
+    [K in keyof E as `on${Capitalize<string & K>}`]: E[K];
+};
 declare type IntactReactProps<P, E, B> = Readonly<P> & Readonly<{
@@ -16,6 +19,9 @@ children?: ReactNode | undefined;
 }> & Readonly<{
-    [K in keyof E as `on${Capitalize<string & K>}`]?: (...args: any[] & E[K]) => void;
+    [K in keyof E as `on${Capitalize<string & K>}`]?: (...args: E[K]) => void;
 }> & Readonly<{
     [K in keyof B as `slot${Capitalize<string & K>}`]?: B[K] extends null ? ValidReactNode : (data: B[K]) => ValidReactNode;
-}> & Readonly<Omit<HTMLAttributes<any>, keyof P | keyof E | 'style'>>;
+}> & Readonly<Omit<NormalizedHTMLAttibutes, keyof P | keyof OnEvents<E> | 'style'>>;
+declare type NormalizedHTMLAttibutes = {
+    [Key in keyof HTMLAttributes<any>]: Key extends `on${infer Name}` ? GlobalEventHandlers[Lowercase<Key>] : HTMLAttributes<any>[Key];
+};
 export declare class Component<P = {}, E = {}, B = {}> extends IntactComponent<P, E, B> implements ReactComponent {
@@ -22,0 +28,0 @@ static $cid: string;

dist/index.esm.js

 import { __assign, __extends } from 'tslib';
 import { removeVNodeDom, createVNode, createTextVNode, createComponentVNode, isComponentClass, validateProps, inject, provide, setInstance, findDomFromVNode, callAll, Component as Component$1 } from 'intact';
 export * from 'intact';
-import { createContext, createElement, cloneElement, Fragment, forwardRef, createRef } from 'react';
+import { createContext, createElement, cloneElement, forwardRef, Fragment, createRef } from 'react';
 import { render, unstable_renderSubtreeIntoContainer } from 'react-dom';
@@ -100,3 +100,3 @@
             if (this.done) {
-                throw new Error('The FakePromises has done and cannot add new promise. ' +
+                console.error('The FakePromises has done and cannot add new promise. ' +
                     'Maybe it is a bug of IntactReact');
@@ -236,4 +236,7 @@ }
         });
-        // parent.$promises.value.push(promise);
-        parentComponent.$promises.value.push(promise);
+        // if the promised has be resolved, it indicate that this render is sync.
+        // Maybe we call update in intact directly, and it is not in React's render context
+        if (!promise.resolved) {
+            parentComponent.$promises.add(promise);
+        }
     };
@@ -317,2 +320,34 @@ return Wrapper;
 
+var cid = 'IntactReactFunctional';
+function functionalWrapper(Component) {
+    function Ctor(props, context) {
+        if (context) {
+            // invoked by React
+            var vNodes = Component(normalizeProps(props), true);
+            if (isArray(vNodes)) {
+                return createElement(Fragment, null, vNodes.map(function (vNode, index) {
+                    return normalizeIntactVNodeToReactVNode(vNode, index);
+                }));
+            }
+            return normalizeIntactVNodeToReactVNode(vNodes, 0);
+        }
+        else {
+            // invoked by Intact
+            return Component(props);
+        }
+    }
+    var element = forwardRef(function (props, ref) {
+        if (ref)
+            props = __assign(__assign({}, props), { forwardRef: ref });
+        return createElement(Ctor, props);
+    });
+    element._$type = Ctor;
+    element.$cid = cid;
+    return element;
+}
+function normalizeIntactVNodeToReactVNode(vNode, key) {
+    var props = vNode.props;
+    return createElement(vNode.tag, props ? __assign({ key: key }, props) : { key: key });
+}
+
 function normalize(vNode) {
@@ -337,6 +372,7 @@ if (isInvalid(vNode))
         var props = normalizeProps(vNode.props);
+        var type = vNode.type;
         if (!isNullOrUndefined(key)) {
             props.key = key;
         }
-        return createComponentVNode(4, vNode.type, props, key, normalizeRef(vNode.ref));
+        return createComponentVNode(4, type.$cid === cid ? type._$type : type, props, key, normalizeRef(vNode.ref));
     }
@@ -471,36 +507,6 @@ if (vNode.type === Fragment) {
     var fiber = placeholder[internalInstanceKey];
-    // (node as any)[internalInstanceKey] = fiber;
+    node[internalInstanceKey] = fiber;
     return fiber;
 }
 
-function functionalWrapper(Component) {
-    function Ctor(props, context) {
-        if (context) {
-            // invoked by React
-            var vNodes = Component(normalizeProps(props), true);
-            if (isArray(vNodes)) {
-                return createElement(Fragment, null, vNodes.map(function (vNode, index) {
-                    return normalizeIntactVNodeToReactVNode(vNode, index);
-                }));
-            }
-            return normalizeIntactVNodeToReactVNode(vNodes, 0);
-        }
-        else {
-            // invoked by Intact
-            return Component(props);
-        }
-    }
-    var element = forwardRef(function (props, ref) {
-        if (ref)
-            props = __assign(__assign({}, props), { forwardRef: ref });
-        return createElement(Ctor, props);
-    });
-    element._$type = Ctor;
-    return element;
-}
-function normalizeIntactVNodeToReactVNode(vNode, key) {
-    var props = vNode.props;
-    return createElement(vNode.tag, props ? __assign({ key: key }, props) : { key: key });
-}
-
 var PROMISES = '_$IntactReactPromises';
@@ -605,3 +611,9 @@ var EMPTY_ARRAY = [];
         vNode.children = this;
-        this.$render(null, vNode, parentElement, placeholder.nextElementSibling, this.$mountedQueue);
+        var sibling = placeholder;
+        while (sibling = sibling.nextSibling) {
+            if (sibling.nodeType !== 8 || sibling.nodeValue !== containerComment) {
+                break;
+            }
+        }
+        this.$render(null, vNode, parentElement, sibling, this.$mountedQueue);
         this.$done(function () {
@@ -623,6 +635,12 @@ handleElementOnMounted(parentElement, placeholder, findDomFromVNode(vNode, true));
         this.$vNode = vNode;
-        this.$promises.reset();
-        var mountedQueue = this.$mountedQueue = getMountedQueue(this.$senior);
-        this.$update(lastVNode, vNode, this.$parentElement, null, mountedQueue, false);
-        this.$done(null);
+        var promises = this.$promises;
+        if (promises.done) {
+            promises.reset();
+            var mountedQueue = this.$mountedQueue = getMountedQueue(this.$senior);
+            this.$update(lastVNode, vNode, this.$parentElement, null, mountedQueue, false);
+            this.$done(null);
+        }
+        else {
+            this.$update(lastVNode, vNode, this.$parentElement, null, this.$mountedQueue, false);
+        }
     };
@@ -689,4 +707,8 @@ Component.prototype.componentWillUnmount = function () {
     fiber.stateNode = element;
+    var alternate = fiber.alternate;
+    if (alternate) {
+        alternate.stateNode = element;
+    }
 }
 
 export { Component };

dist/packages/intact-react/src/fakePromise.d.ts

@@ -7,3 +7,3 @@ declare type Callback = () => void;
     };
-    private resolved;
+    resolved: boolean;
     private callbacks;
@@ -10,0 +10,0 @@ constructor(executor: Executor);

dist/packages/intact-react/src/functionalWrapper.d.ts

@@ -6,2 +6,3 @@ import { ComponentFunction, VNodeComponentClass, Props } from 'intact';
 };
+export declare const cid = "IntactReactFunctional";
 export declare function functionalWrapper<P = {}>(Component: ComponentFunctionForIntact<P>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P & {
@@ -8,0 +9,0 @@ forwardRef?: ForwardedRef<any> | undefined;

dist/packages/intact-react/src/index.d.ts

@@ -8,2 +8,5 @@ import { Component as IntactComponent, Props, VNodeComponentClass } from 'intact';
 declare type ValidReactNode = ReactChild | null | undefined;
+declare type OnEvents<E> = {
+    [K in keyof E as `on${Capitalize<string & K>}`]: E[K];
+};
 declare type IntactReactProps<P, E, B> = Readonly<P> & Readonly<{
@@ -16,6 +19,9 @@ children?: ReactNode | undefined;
 }> & Readonly<{
-    [K in keyof E as `on${Capitalize<string & K>}`]?: (...args: any[] & E[K]) => void;
+    [K in keyof E as `on${Capitalize<string & K>}`]?: (...args: E[K]) => void;
 }> & Readonly<{
     [K in keyof B as `slot${Capitalize<string & K>}`]?: B[K] extends null ? ValidReactNode : (data: B[K]) => ValidReactNode;
-}> & Readonly<Omit<HTMLAttributes<any>, keyof P | keyof E | 'style'>>;
+}> & Readonly<Omit<NormalizedHTMLAttibutes, keyof P | keyof OnEvents<E> | 'style'>>;
+declare type NormalizedHTMLAttibutes = {
+    [Key in keyof HTMLAttributes<any>]: Key extends `on${infer Name}` ? GlobalEventHandlers[Lowercase<Key>] : HTMLAttributes<any>[Key];
+};
 export declare class Component<P = {}, E = {}, B = {}> extends IntactComponent<P, E, B> implements ReactComponent {
@@ -22,0 +28,0 @@ static $cid: string;

dist/packages/intact-react/src/wrapper.d.ts

@@ -8,2 +8,3 @@ import { ComponentClass, VNode, VNodeComponentClass, Props, IntactDom } from 'intact';
 export declare const Context: import("react").Context<Component<{}, {}, {}> | null>;
+export declare const containerComment = " react-mount-point-unstable ";
 export declare class Wrapper implements ComponentClass<WrapperProps> {
@@ -10,0 +11,0 @@ $props: Props<WrapperProps, ComponentClass<WrapperProps>>;

dist/wrapper.d.ts

@@ -8,2 +8,3 @@ import { ComponentClass, VNode, VNodeComponentClass, Props, IntactDom } from 'intact';
 export declare const Context: import("react").Context<Component<{}, {}, {}> | null>;
+export declare const containerComment = " react-mount-point-unstable ";
 export declare class Wrapper implements ComponentClass<WrapperProps> {
@@ -10,0 +11,0 @@ $props: Props<WrapperProps, ComponentClass<WrapperProps>>;

package.json

 {
   "name": "intact-react",
-  "version": "3.0.0-beta.17",
+  "version": "3.0.0-beta.18",
   "description": "A compatibility layer for running intact component in React@17",
@@ -32,5 +32,5 @@ "main": "index.js",
   "dependencies": {
-    "intact": "^3.0.0-beta.17",
+    "intact": "^3.0.0-beta.18",
     "tslib": "^2.3.1"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

956785

increased by0.63%

Lines of code

22795

increased by0.66%

Dependency changes

• Updatedintact@^3.0.0-beta.18