@viewfly/core 3.0.0-alpha.4 → 3.0.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/base/component.d.ts +2 -2
- package/dist/index.esm.js +31 -24
- package/dist/index.js +31 -24
- package/package.json +1 -1
package/dist/base/component.d.ts
CHANGED
|
@@ -15,9 +15,9 @@ export interface ComponentSetup<P = any> {
|
|
|
15
15
|
export interface ComponentViewMetadata {
|
|
16
16
|
atom: ComponentAtom;
|
|
17
17
|
anchorNode: NativeNode;
|
|
18
|
+
contextContainer: NativeNode;
|
|
18
19
|
isParent: boolean;
|
|
19
|
-
|
|
20
|
-
expectContainer: NativeNode;
|
|
20
|
+
computedContainer: NativeNode;
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
23
23
|
* Viewfly 组件管理类,用于管理组件的生命周期,上下文等
|
package/dist/index.esm.js
CHANGED
|
@@ -1951,7 +1951,8 @@ function createRenderer(component, nativeRenderer, namespace) {
|
|
|
1951
1951
|
}, {
|
|
1952
1952
|
isParent: true,
|
|
1953
1953
|
anchorNode: container,
|
|
1954
|
-
|
|
1954
|
+
contextContainer: container,
|
|
1955
|
+
computedContainer: container
|
|
1955
1956
|
});
|
|
1956
1957
|
} else deepUpdateByComponentDirtyTree(nativeRenderer, component, false);
|
|
1957
1958
|
};
|
|
@@ -1973,33 +1974,39 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
|
|
|
1973
1974
|
}
|
|
1974
1975
|
}
|
|
1975
1976
|
function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
|
|
1976
|
-
const oldContainer = component.viewMetadata.anchorNode;
|
|
1977
|
-
const expectContainer = component.viewMetadata.expectContainer;
|
|
1978
1977
|
const newTemplate = component.rerender();
|
|
1979
1978
|
const portalContainer = getContainer();
|
|
1979
|
+
const rawContext = context;
|
|
1980
|
+
const { computedContainer } = component.viewMetadata;
|
|
1980
1981
|
popContainer();
|
|
1981
|
-
if (portalContainer
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1982
|
+
if (portalContainer) if (portalContainer === context.contextContainer) {
|
|
1983
|
+
if (portalContainer !== computedContainer) needMove = true;
|
|
1984
|
+
} else {
|
|
1985
|
+
if (portalContainer !== computedContainer) needMove = true;
|
|
1986
|
+
context = {
|
|
1987
|
+
isParent: true,
|
|
1988
|
+
anchorNode: portalContainer,
|
|
1989
|
+
contextContainer: context.contextContainer,
|
|
1990
|
+
computedContainer: portalContainer
|
|
1991
|
+
};
|
|
1992
|
+
}
|
|
1993
|
+
else if (computedContainer !== context.contextContainer) needMove = true;
|
|
1986
1994
|
component.viewMetadata = {
|
|
1987
1995
|
atom: newAtom,
|
|
1988
|
-
expectContainer,
|
|
1989
1996
|
...context
|
|
1990
1997
|
};
|
|
1991
|
-
if (oldContainer !== context.anchorNode) needMove = true;
|
|
1992
1998
|
newAtom.child = createChildChain(newTemplate, nativeRenderer, newAtom.namespace);
|
|
1993
1999
|
diff(nativeRenderer, component, newAtom.child, oldChildAtom, context, needMove);
|
|
1994
|
-
return
|
|
2000
|
+
return rawContext;
|
|
1995
2001
|
}
|
|
1996
2002
|
function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
|
|
1997
2003
|
if (component.dirty) {
|
|
1998
|
-
const { atom, anchorNode, isParent,
|
|
2004
|
+
const { atom, anchorNode, isParent, computedContainer, contextContainer } = component.viewMetadata;
|
|
1999
2005
|
const context = {
|
|
2000
2006
|
anchorNode,
|
|
2001
2007
|
isParent,
|
|
2002
|
-
|
|
2008
|
+
contextContainer,
|
|
2009
|
+
computedContainer
|
|
2003
2010
|
};
|
|
2004
2011
|
const diffAtom = atom.child;
|
|
2005
2012
|
patchComponent(nativeRenderer, component, diffAtom, atom, context, needMove);
|
|
@@ -2095,8 +2102,9 @@ function updateElement(nativeRenderer, context, parentComponent, offset, needMov
|
|
|
2095
2102
|
context.isParent = false;
|
|
2096
2103
|
updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
|
|
2097
2104
|
anchorNode: nativeNode,
|
|
2105
|
+
contextContainer: nativeNode,
|
|
2098
2106
|
isParent: true,
|
|
2099
|
-
|
|
2107
|
+
computedContainer: nativeNode
|
|
2100
2108
|
});
|
|
2101
2109
|
}
|
|
2102
2110
|
function updateComponent(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
|
|
@@ -2116,7 +2124,6 @@ function updateComponent(nativeRenderer, context, offset, needMove, newAtom, old
|
|
|
2116
2124
|
} else {
|
|
2117
2125
|
component.viewMetadata = {
|
|
2118
2126
|
atom: newAtom,
|
|
2119
|
-
expectContainer: component.viewMetadata.expectContainer,
|
|
2120
2127
|
...context
|
|
2121
2128
|
};
|
|
2122
2129
|
newAtom.child = oldAtom.child;
|
|
@@ -2161,7 +2168,7 @@ function cleanElementChildren(atom, nativeRenderer) {
|
|
|
2161
2168
|
function cleanView(nativeRenderer, atom, needClean) {
|
|
2162
2169
|
if (atom.type === ComponentAtomType) {
|
|
2163
2170
|
const jsxNode = atom.jsxNode;
|
|
2164
|
-
if (jsxNode.viewMetadata.
|
|
2171
|
+
if (jsxNode.viewMetadata.computedContainer !== jsxNode.viewMetadata.contextContainer) needClean = true;
|
|
2165
2172
|
cleanChildren(atom, nativeRenderer, needClean);
|
|
2166
2173
|
jsxNode.destroy();
|
|
2167
2174
|
return;
|
|
@@ -2193,15 +2200,14 @@ function componentRender(nativeRenderer, component, from, context) {
|
|
|
2193
2200
|
const portalContainer = getContainer();
|
|
2194
2201
|
popContainer();
|
|
2195
2202
|
from.child = createChildChain(template, nativeRenderer, from.namespace);
|
|
2196
|
-
|
|
2197
|
-
context = portalContainer && portalContainer !== context.anchorNode ? {
|
|
2203
|
+
if (portalContainer && portalContainer !== context.contextContainer) context = {
|
|
2198
2204
|
isParent: true,
|
|
2199
2205
|
anchorNode: portalContainer,
|
|
2200
|
-
|
|
2201
|
-
|
|
2206
|
+
contextContainer: context.contextContainer,
|
|
2207
|
+
computedContainer: portalContainer
|
|
2208
|
+
};
|
|
2202
2209
|
component.viewMetadata = {
|
|
2203
2210
|
atom: from,
|
|
2204
|
-
expectContainer,
|
|
2205
2211
|
...context
|
|
2206
2212
|
};
|
|
2207
2213
|
let child = from.child;
|
|
@@ -2258,8 +2264,8 @@ function createChildChain(template, nativeRenderer, namespace) {
|
|
|
2258
2264
|
return beforeAtom.sibling;
|
|
2259
2265
|
}
|
|
2260
2266
|
function insertNode(nativeRenderer, atom, context) {
|
|
2261
|
-
if (context.isParent) if (context.
|
|
2262
|
-
else nativeRenderer.
|
|
2267
|
+
if (context.isParent) if (context.contextContainer === context.computedContainer) nativeRenderer.prependChild(context.anchorNode, atom.nativeNode, atom.namespace);
|
|
2268
|
+
else nativeRenderer.appendChild(context.anchorNode, atom.nativeNode, atom.namespace);
|
|
2263
2269
|
else nativeRenderer.insertAfter(atom.nativeNode, context.anchorNode, atom.namespace);
|
|
2264
2270
|
}
|
|
2265
2271
|
function createElementChildren(type, children, nativeRenderer, namespace) {
|
|
@@ -2301,7 +2307,8 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
|
|
|
2301
2307
|
buildElementChildren(atom, nativeRenderer, parentComponent, {
|
|
2302
2308
|
isParent: true,
|
|
2303
2309
|
anchorNode: nativeNode,
|
|
2304
|
-
|
|
2310
|
+
contextContainer: nativeNode,
|
|
2311
|
+
computedContainer: nativeNode
|
|
2305
2312
|
});
|
|
2306
2313
|
context.anchorNode = nativeNode;
|
|
2307
2314
|
context.isParent = false;
|
package/dist/index.js
CHANGED
|
@@ -1952,7 +1952,8 @@ function createRenderer(component, nativeRenderer, namespace) {
|
|
|
1952
1952
|
}, {
|
|
1953
1953
|
isParent: true,
|
|
1954
1954
|
anchorNode: container,
|
|
1955
|
-
|
|
1955
|
+
contextContainer: container,
|
|
1956
|
+
computedContainer: container
|
|
1956
1957
|
});
|
|
1957
1958
|
} else deepUpdateByComponentDirtyTree(nativeRenderer, component, false);
|
|
1958
1959
|
};
|
|
@@ -1974,33 +1975,39 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
|
|
|
1974
1975
|
}
|
|
1975
1976
|
}
|
|
1976
1977
|
function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
|
|
1977
|
-
const oldContainer = component.viewMetadata.anchorNode;
|
|
1978
|
-
const expectContainer = component.viewMetadata.expectContainer;
|
|
1979
1978
|
const newTemplate = component.rerender();
|
|
1980
1979
|
const portalContainer = getContainer();
|
|
1980
|
+
const rawContext = context;
|
|
1981
|
+
const { computedContainer } = component.viewMetadata;
|
|
1981
1982
|
popContainer();
|
|
1982
|
-
if (portalContainer
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1983
|
+
if (portalContainer) if (portalContainer === context.contextContainer) {
|
|
1984
|
+
if (portalContainer !== computedContainer) needMove = true;
|
|
1985
|
+
} else {
|
|
1986
|
+
if (portalContainer !== computedContainer) needMove = true;
|
|
1987
|
+
context = {
|
|
1988
|
+
isParent: true,
|
|
1989
|
+
anchorNode: portalContainer,
|
|
1990
|
+
contextContainer: context.contextContainer,
|
|
1991
|
+
computedContainer: portalContainer
|
|
1992
|
+
};
|
|
1993
|
+
}
|
|
1994
|
+
else if (computedContainer !== context.contextContainer) needMove = true;
|
|
1987
1995
|
component.viewMetadata = {
|
|
1988
1996
|
atom: newAtom,
|
|
1989
|
-
expectContainer,
|
|
1990
1997
|
...context
|
|
1991
1998
|
};
|
|
1992
|
-
if (oldContainer !== context.anchorNode) needMove = true;
|
|
1993
1999
|
newAtom.child = createChildChain(newTemplate, nativeRenderer, newAtom.namespace);
|
|
1994
2000
|
diff(nativeRenderer, component, newAtom.child, oldChildAtom, context, needMove);
|
|
1995
|
-
return
|
|
2001
|
+
return rawContext;
|
|
1996
2002
|
}
|
|
1997
2003
|
function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
|
|
1998
2004
|
if (component.dirty) {
|
|
1999
|
-
const { atom, anchorNode, isParent,
|
|
2005
|
+
const { atom, anchorNode, isParent, computedContainer, contextContainer } = component.viewMetadata;
|
|
2000
2006
|
const context = {
|
|
2001
2007
|
anchorNode,
|
|
2002
2008
|
isParent,
|
|
2003
|
-
|
|
2009
|
+
contextContainer,
|
|
2010
|
+
computedContainer
|
|
2004
2011
|
};
|
|
2005
2012
|
const diffAtom = atom.child;
|
|
2006
2013
|
patchComponent(nativeRenderer, component, diffAtom, atom, context, needMove);
|
|
@@ -2096,8 +2103,9 @@ function updateElement(nativeRenderer, context, parentComponent, offset, needMov
|
|
|
2096
2103
|
context.isParent = false;
|
|
2097
2104
|
updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
|
|
2098
2105
|
anchorNode: nativeNode,
|
|
2106
|
+
contextContainer: nativeNode,
|
|
2099
2107
|
isParent: true,
|
|
2100
|
-
|
|
2108
|
+
computedContainer: nativeNode
|
|
2101
2109
|
});
|
|
2102
2110
|
}
|
|
2103
2111
|
function updateComponent(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
|
|
@@ -2117,7 +2125,6 @@ function updateComponent(nativeRenderer, context, offset, needMove, newAtom, old
|
|
|
2117
2125
|
} else {
|
|
2118
2126
|
component.viewMetadata = {
|
|
2119
2127
|
atom: newAtom,
|
|
2120
|
-
expectContainer: component.viewMetadata.expectContainer,
|
|
2121
2128
|
...context
|
|
2122
2129
|
};
|
|
2123
2130
|
newAtom.child = oldAtom.child;
|
|
@@ -2162,7 +2169,7 @@ function cleanElementChildren(atom, nativeRenderer) {
|
|
|
2162
2169
|
function cleanView(nativeRenderer, atom, needClean) {
|
|
2163
2170
|
if (atom.type === ComponentAtomType) {
|
|
2164
2171
|
const jsxNode = atom.jsxNode;
|
|
2165
|
-
if (jsxNode.viewMetadata.
|
|
2172
|
+
if (jsxNode.viewMetadata.computedContainer !== jsxNode.viewMetadata.contextContainer) needClean = true;
|
|
2166
2173
|
cleanChildren(atom, nativeRenderer, needClean);
|
|
2167
2174
|
jsxNode.destroy();
|
|
2168
2175
|
return;
|
|
@@ -2194,15 +2201,14 @@ function componentRender(nativeRenderer, component, from, context) {
|
|
|
2194
2201
|
const portalContainer = getContainer();
|
|
2195
2202
|
popContainer();
|
|
2196
2203
|
from.child = createChildChain(template, nativeRenderer, from.namespace);
|
|
2197
|
-
|
|
2198
|
-
context = portalContainer && portalContainer !== context.anchorNode ? {
|
|
2204
|
+
if (portalContainer && portalContainer !== context.contextContainer) context = {
|
|
2199
2205
|
isParent: true,
|
|
2200
2206
|
anchorNode: portalContainer,
|
|
2201
|
-
|
|
2202
|
-
|
|
2207
|
+
contextContainer: context.contextContainer,
|
|
2208
|
+
computedContainer: portalContainer
|
|
2209
|
+
};
|
|
2203
2210
|
component.viewMetadata = {
|
|
2204
2211
|
atom: from,
|
|
2205
|
-
expectContainer,
|
|
2206
2212
|
...context
|
|
2207
2213
|
};
|
|
2208
2214
|
let child = from.child;
|
|
@@ -2259,8 +2265,8 @@ function createChildChain(template, nativeRenderer, namespace) {
|
|
|
2259
2265
|
return beforeAtom.sibling;
|
|
2260
2266
|
}
|
|
2261
2267
|
function insertNode(nativeRenderer, atom, context) {
|
|
2262
|
-
if (context.isParent) if (context.
|
|
2263
|
-
else nativeRenderer.
|
|
2268
|
+
if (context.isParent) if (context.contextContainer === context.computedContainer) nativeRenderer.prependChild(context.anchorNode, atom.nativeNode, atom.namespace);
|
|
2269
|
+
else nativeRenderer.appendChild(context.anchorNode, atom.nativeNode, atom.namespace);
|
|
2264
2270
|
else nativeRenderer.insertAfter(atom.nativeNode, context.anchorNode, atom.namespace);
|
|
2265
2271
|
}
|
|
2266
2272
|
function createElementChildren(type, children, nativeRenderer, namespace) {
|
|
@@ -2302,7 +2308,8 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
|
|
|
2302
2308
|
buildElementChildren(atom, nativeRenderer, parentComponent, {
|
|
2303
2309
|
isParent: true,
|
|
2304
2310
|
anchorNode: nativeNode,
|
|
2305
|
-
|
|
2311
|
+
contextContainer: nativeNode,
|
|
2312
|
+
computedContainer: nativeNode
|
|
2306
2313
|
});
|
|
2307
2314
|
context.anchorNode = nativeNode;
|
|
2308
2315
|
context.isParent = false;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viewfly/core",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.6",
|
|
4
4
|
"description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.esm.js",
|