@vue/server-renderer - npm Package Compare versions

Comparing version 3.0.9 to 3.0.10

dist/server-renderer.cjs.js

@@ -180,3 +180,3 @@ 'use strict';
     if (shared.isFunction(comp)) {
-        renderVNode(push, (instance.subTree = renderComponentRoot(instance)), instance);
+        renderVNode(push, (instance.subTree = renderComponentRoot(instance)), instance, slotScopeId);
     }
@@ -195,11 +195,28 @@ else {
             let attrs = instance.type.inheritAttrs !== false ? instance.attrs : undefined;
-            // inherited scopeId
-            const scopeId = instance.vnode.scopeId;
-            if (scopeId || slotScopeId) {
-                attrs = { ...attrs };
-                if (scopeId)
+            let hasCloned = false;
+            let cur = instance;
+            while (true) {
+                const scopeId = cur.vnode.scopeId;
+                if (scopeId) {
+                    if (!hasCloned) {
+                        attrs = { ...attrs };
+                        hasCloned = true;
+                    }
                     attrs[scopeId] = '';
-                if (slotScopeId)
-                    attrs[slotScopeId.trim()] = '';
+                }
+                const parent = cur.parent;
+                if (parent && parent.subTree && parent.subTree === cur.vnode) {
+                    // parent is a non-SSR compiled component and is rendering this
+                    // component as root. inherit its scopeId if present.
+                    cur = parent;
+                }
+                else {
+                    break;
+                }
             }
+            if (slotScopeId) {
+                if (!hasCloned)
+                    attrs = { ...attrs };
+                attrs[slotScopeId.trim()] = '';
+            }
             // set current rendering instance for asset resolution
@@ -213,3 +230,3 @@ const prev = setCurrentRenderingInstance(instance);
         else if (instance.render && instance.render !== shared.NOOP) {
-            renderVNode(push, (instance.subTree = renderComponentRoot(instance)), instance);
+            renderVNode(push, (instance.subTree = renderComponentRoot(instance)), instance, slotScopeId);
         }
@@ -223,3 +240,3 @@ else {
 }
-function renderVNode(push, vnode, parentComponent) {
+function renderVNode(push, vnode, parentComponent, slotScopeId) {
     const { type, shapeFlag, children } = vnode;
@@ -237,4 +254,8 @@ switch (type) {
         case vue.Fragment:
+            if (vnode.slotScopeIds) {
+                slotScopeId =
+                    (slotScopeId ? slotScopeId + ' ' : '') + vnode.slotScopeIds.join(' ');
+            }
             push(`<!--[-->`); // open
-            renderVNodeChildren(push, children, parentComponent);
+            renderVNodeChildren(push, children, parentComponent, slotScopeId);
             push(`<!--]-->`); // close
@@ -244,12 +265,12 @@ break;
             if (shapeFlag & 1 /* ELEMENT */) {
-                renderElementVNode(push, vnode, parentComponent);
+                renderElementVNode(push, vnode, parentComponent, slotScopeId);
             }
             else if (shapeFlag & 6 /* COMPONENT */) {
-                push(renderComponentVNode(vnode, parentComponent));
+                push(renderComponentVNode(vnode, parentComponent, slotScopeId));
             }
             else if (shapeFlag & 64 /* TELEPORT */) {
-                renderTeleportVNode(push, vnode, parentComponent);
+                renderTeleportVNode(push, vnode, parentComponent, slotScopeId);
             }
             else if (shapeFlag & 128 /* SUSPENSE */) {
-                renderVNode(push, vnode.ssContent, parentComponent);
+                renderVNode(push, vnode.ssContent, parentComponent, slotScopeId);
             }
@@ -261,8 +282,8 @@ else {
 }
-function renderVNodeChildren(push, children, parentComponent) {
+function renderVNodeChildren(push, children, parentComponent, slotScopeId) {
     for (let i = 0; i < children.length; i++) {
-        renderVNode(push, normalizeVNode(children[i]), parentComponent);
+        renderVNode(push, normalizeVNode(children[i]), parentComponent, slotScopeId);
     }
 }
-function renderElementVNode(push, vnode, parentComponent) {
+function renderElementVNode(push, vnode, parentComponent, slotScopeId) {
     const tag = vnode.type;
@@ -277,3 +298,18 @@ let { props, children, shapeFlag, scopeId, dirs } = vnode;
     }
-    openTag += resolveScopeId(scopeId, vnode, parentComponent);
+    if (scopeId) {
+        openTag += ` ${scopeId}`;
+    }
+    // inherit parent chain scope id if this is the root node
+    let curParent = parentComponent;
+    let curVnode = vnode;
+    while (curParent && curVnode === curParent.subTree) {
+        curVnode = curParent.vnode;
+        if (curVnode.scopeId) {
+            openTag += ` ${curVnode.scopeId}`;
+        }
+        curParent = curParent.parent;
+    }
+    if (slotScopeId) {
+        openTag += ` ${slotScopeId}`;
+    }
     push(openTag + `>`);
@@ -301,3 +337,3 @@ if (!shared.isVoidTag(tag)) {
             else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {
-                renderVNodeChildren(push, children, parentComponent);
+                renderVNodeChildren(push, children, parentComponent, slotScopeId);
             }
@@ -308,20 +344,2 @@ }
 }
-function resolveScopeId(scopeId, vnode, parentComponent) {
-    let res = ``;
-    if (scopeId) {
-        res = ` ${scopeId}`;
-    }
-    if (parentComponent) {
-        const treeOwnerId = parentComponent.type.__scopeId;
-        // vnode's own scopeId and the current rendering component's scopeId is
-        // different - this is a slot content node.
-        if (treeOwnerId && treeOwnerId !== scopeId) {
-            res += ` ${treeOwnerId}-s`;
-        }
-        if (vnode === parentComponent.subTree) {
-            res += resolveScopeId(parentComponent.vnode.scopeId, parentComponent.vnode, parentComponent.parent);
-        }
-    }
-    return res;
-}
 function applySSRDirectives(vnode, rawProps, dirs) {
@@ -340,3 +358,3 @@ const toMerge = [];
 }
-function renderTeleportVNode(push, vnode, parentComponent) {
+function renderTeleportVNode(push, vnode, parentComponent, slotScopeId) {
     const target = vnode.props && vnode.props.to;
@@ -353,3 +371,3 @@ const disabled = vnode.props && vnode.props.disabled;
     ssrRenderTeleport(push, push => {
-        renderVNodeChildren(push, vnode.children, parentComponent);
+        renderVNodeChildren(push, vnode.children, parentComponent, slotScopeId);
     }, target, disabled || disabled === '', parentComponent);
@@ -493,3 +511,3 @@ }
             // normal slot
-            renderVNodeChildren(push, ret, parentComponent);
+            renderVNodeChildren(push, ret, parentComponent, slotScopeId);
         }
@@ -496,0 +514,0 @@ else {

dist/server-renderer.cjs.prod.js

@@ -177,3 +177,3 @@ 'use strict';
     if (shared.isFunction(comp)) {
-        renderVNode(push, (instance.subTree = renderComponentRoot(instance)), instance);
+        renderVNode(push, (instance.subTree = renderComponentRoot(instance)), instance, slotScopeId);
     }
@@ -192,11 +192,28 @@ else {
             let attrs = instance.type.inheritAttrs !== false ? instance.attrs : undefined;
-            // inherited scopeId
-            const scopeId = instance.vnode.scopeId;
-            if (scopeId || slotScopeId) {
-                attrs = { ...attrs };
-                if (scopeId)
+            let hasCloned = false;
+            let cur = instance;
+            while (true) {
+                const scopeId = cur.vnode.scopeId;
+                if (scopeId) {
+                    if (!hasCloned) {
+                        attrs = { ...attrs };
+                        hasCloned = true;
+                    }
                     attrs[scopeId] = '';
-                if (slotScopeId)
-                    attrs[slotScopeId.trim()] = '';
+                }
+                const parent = cur.parent;
+                if (parent && parent.subTree && parent.subTree === cur.vnode) {
+                    // parent is a non-SSR compiled component and is rendering this
+                    // component as root. inherit its scopeId if present.
+                    cur = parent;
+                }
+                else {
+                    break;
+                }
             }
+            if (slotScopeId) {
+                if (!hasCloned)
+                    attrs = { ...attrs };
+                attrs[slotScopeId.trim()] = '';
+            }
             // set current rendering instance for asset resolution
@@ -210,3 +227,3 @@ const prev = setCurrentRenderingInstance(instance);
         else if (instance.render && instance.render !== shared.NOOP) {
-            renderVNode(push, (instance.subTree = renderComponentRoot(instance)), instance);
+            renderVNode(push, (instance.subTree = renderComponentRoot(instance)), instance, slotScopeId);
         }
@@ -220,3 +237,3 @@ else {
 }
-function renderVNode(push, vnode, parentComponent) {
+function renderVNode(push, vnode, parentComponent, slotScopeId) {
     const { type, shapeFlag, children } = vnode;
@@ -234,4 +251,8 @@ switch (type) {
         case vue.Fragment:
+            if (vnode.slotScopeIds) {
+                slotScopeId =
+                    (slotScopeId ? slotScopeId + ' ' : '') + vnode.slotScopeIds.join(' ');
+            }
             push(`<!--[-->`); // open
-            renderVNodeChildren(push, children, parentComponent);
+            renderVNodeChildren(push, children, parentComponent, slotScopeId);
             push(`<!--]-->`); // close
@@ -241,12 +262,12 @@ break;
             if (shapeFlag & 1 /* ELEMENT */) {
-                renderElementVNode(push, vnode, parentComponent);
+                renderElementVNode(push, vnode, parentComponent, slotScopeId);
             }
             else if (shapeFlag & 6 /* COMPONENT */) {
-                push(renderComponentVNode(vnode, parentComponent));
+                push(renderComponentVNode(vnode, parentComponent, slotScopeId));
             }
             else if (shapeFlag & 64 /* TELEPORT */) {
-                renderTeleportVNode(push, vnode, parentComponent);
+                renderTeleportVNode(push, vnode, parentComponent, slotScopeId);
             }
             else if (shapeFlag & 128 /* SUSPENSE */) {
-                renderVNode(push, vnode.ssContent, parentComponent);
+                renderVNode(push, vnode.ssContent, parentComponent, slotScopeId);
             }
@@ -258,8 +279,8 @@ else {
 }
-function renderVNodeChildren(push, children, parentComponent) {
+function renderVNodeChildren(push, children, parentComponent, slotScopeId) {
     for (let i = 0; i < children.length; i++) {
-        renderVNode(push, normalizeVNode(children[i]), parentComponent);
+        renderVNode(push, normalizeVNode(children[i]), parentComponent, slotScopeId);
     }
 }
-function renderElementVNode(push, vnode, parentComponent) {
+function renderElementVNode(push, vnode, parentComponent, slotScopeId) {
     const tag = vnode.type;
@@ -274,3 +295,18 @@ let { props, children, shapeFlag, scopeId, dirs } = vnode;
     }
-    openTag += resolveScopeId(scopeId, vnode, parentComponent);
+    if (scopeId) {
+        openTag += ` ${scopeId}`;
+    }
+    // inherit parent chain scope id if this is the root node
+    let curParent = parentComponent;
+    let curVnode = vnode;
+    while (curParent && curVnode === curParent.subTree) {
+        curVnode = curParent.vnode;
+        if (curVnode.scopeId) {
+            openTag += ` ${curVnode.scopeId}`;
+        }
+        curParent = curParent.parent;
+    }
+    if (slotScopeId) {
+        openTag += ` ${slotScopeId}`;
+    }
     push(openTag + `>`);
@@ -298,3 +334,3 @@ if (!shared.isVoidTag(tag)) {
             else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {
-                renderVNodeChildren(push, children, parentComponent);
+                renderVNodeChildren(push, children, parentComponent, slotScopeId);
             }
@@ -305,20 +341,2 @@ }
 }
-function resolveScopeId(scopeId, vnode, parentComponent) {
-    let res = ``;
-    if (scopeId) {
-        res = ` ${scopeId}`;
-    }
-    if (parentComponent) {
-        const treeOwnerId = parentComponent.type.__scopeId;
-        // vnode's own scopeId and the current rendering component's scopeId is
-        // different - this is a slot content node.
-        if (treeOwnerId && treeOwnerId !== scopeId) {
-            res += ` ${treeOwnerId}-s`;
-        }
-        if (vnode === parentComponent.subTree) {
-            res += resolveScopeId(parentComponent.vnode.scopeId, parentComponent.vnode, parentComponent.parent);
-        }
-    }
-    return res;
-}
 function applySSRDirectives(vnode, rawProps, dirs) {
@@ -337,3 +355,3 @@ const toMerge = [];
 }
-function renderTeleportVNode(push, vnode, parentComponent) {
+function renderTeleportVNode(push, vnode, parentComponent, slotScopeId) {
     const target = vnode.props && vnode.props.to;
@@ -350,3 +368,3 @@ const disabled = vnode.props && vnode.props.disabled;
     ssrRenderTeleport(push, push => {
-        renderVNodeChildren(push, vnode.children, parentComponent);
+        renderVNodeChildren(push, vnode.children, parentComponent, slotScopeId);
     }, target, disabled || disabled === '', parentComponent);
@@ -490,3 +508,3 @@ }
             // normal slot
-            renderVNodeChildren(push, ret, parentComponent);
+            renderVNodeChildren(push, ret, parentComponent, slotScopeId);
         }
@@ -493,0 +511,0 @@ else {

dist/server-renderer.d.ts

@@ -57,3 +57,3 @@ /// <reference types="node" />
 
-export declare function ssrRenderSlot(slots: Slots | SSRSlots, slotName: string, slotProps: Props, fallbackRenderFn: (() => void) | null, push: PushFn, parentComponent: ComponentInternalInstance, slotScopeId?: string | null): void;
+export declare function ssrRenderSlot(slots: Slots | SSRSlots, slotName: string, slotProps: Props, fallbackRenderFn: (() => void) | null, push: PushFn, parentComponent: ComponentInternalInstance, slotScopeId?: string): void;
 
@@ -66,3 +66,3 @@ export declare function ssrRenderStyle(raw: unknown): string;
 
-export declare function ssrRenderVNode(push: PushFn, vnode: VNode, parentComponent: ComponentInternalInstance): void;
+export declare function ssrRenderVNode(push: PushFn, vnode: VNode, parentComponent: ComponentInternalInstance, slotScopeId?: string): void;
 
@@ -69,0 +69,0 @@ declare type SSRSlot = (props: Props, push: PushFn, parentComponent: ComponentInternalInstance | null, scopeId: string | null) => void;

package.json

 {
   "name": "@vue/server-renderer",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "description": "@vue/server-renderer",
@@ -31,8 +31,8 @@ "main": "index.js",
   "peerDependencies": {
-    "vue": "3.0.9"
+    "vue": "3.0.10"
   },
   "dependencies": {
-    "@vue/shared": "3.0.9",
-    "@vue/compiler-ssr": "3.0.9"
+    "@vue/shared": "3.0.10",
+    "@vue/compiler-ssr": "3.0.10"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58741

increased by2.77%

Lines of code

1514

increased by2.44%

Dependency changes

• + Added@vue/compiler-core@3.0.10(transitive)

• + Added@vue/compiler-dom@3.0.10(transitive)

• + Added@vue/compiler-ssr@3.0.10(transitive)

• + Added@vue/reactivity@3.0.10(transitive)

• + Added@vue/runtime-core@3.0.10(transitive)

• + Added@vue/runtime-dom@3.0.10(transitive)

• + Added@vue/shared@3.0.10(transitive)

• + Addedvue@3.0.10(transitive)

• - Removed@vue/compiler-core@3.0.9(transitive)

• - Removed@vue/compiler-dom@3.0.9(transitive)

• - Removed@vue/compiler-ssr@3.0.9(transitive)

• - Removed@vue/reactivity@3.0.9(transitive)

• - Removed@vue/runtime-core@3.0.9(transitive)

• - Removed@vue/runtime-dom@3.0.9(transitive)

• - Removed@vue/shared@3.0.9(transitive)

• - Removedvue@3.0.9(transitive)

• Updated@vue/compiler-ssr@3.0.10

• Updated@vue/shared@3.0.10