Skip to content

Commit

Permalink
[Vue][EE]Cannot add a new rendering to the newly created (#902)
Browse files Browse the repository at this point in the history
  • Loading branch information
@illiakovalenko
illiakovalenko authored Jan 11, 2022
1 parent 55fd922 commit a57d7ad
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 18 deletions.
38 changes: 20 additions & 18 deletions packages/sitecore-jss-vue/src/components/PlaceholderCommon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
Item,
RouteData,
} from '@sitecore-jss/sitecore-jss';
import { Component, h, VNode, DefineComponent, ref, watchEffect } from 'vue';
import { Component, h, VNode, DefineComponent, ref, onMounted } from 'vue';
import { MissingComponent } from './MissingComponent';
import { ComponentFactory } from './sharedTypes';

Expand Down Expand Up @@ -187,27 +187,29 @@ function createRawElement(elem: any) {
setup() {
const elRef = ref(null);

/*
* Since we can't set the "key" via Vue attributes
* so we can set in the DOM after render.
*/
if (
!Array.isArray(elem.attributes) &&
elem.attributes &&
elem.attributes.chrometype === 'placeholder' &&
elem.attributes.key
) {
watchEffect(
() => {
elRef.value.setAttribute('key', elem.attributes.key);
},
{ flush: 'post' }
);
}
onMounted(() => {
/*
* Since we can't set the "key" via Vue attributes
* so we can set in the DOM after render.
* onMounted is called when the initial page load is happening
* onMounted is not called when we add new rendering on the page,
* so we will replace phkey by key
*/
if (
!Array.isArray(elem.attributes) &&
elem.attributes &&
elem.attributes.chrometype === 'placeholder' &&
elem.attributes.key
) {
elRef.value.setAttribute('key', elem.attributes.key);
}
});

return () =>
h(elem.name, {
...elem.attributes,
innerHTML: elem.contents,
phkey: elem.attributes?.key,
ref: elRef,
});
},
Expand Down
10 changes: 10 additions & 0 deletions packages/sitecore-jss-vue/src/components/__snapshots__/Placeholder.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should pass properties
id="main"
class="scpm"
data-selectable="true"
phkey="main"
key="main"
>
{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"main","expandedDisplayName":null}
Expand All @@ -265,6 +266,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should pass properties
id="page_header"
class="scpm"
data-selectable="true"
phkey="page-header"
key="page-header"
>
{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-header","expandedDisplayName":null}
Expand Down Expand Up @@ -303,6 +305,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should pass properties
id="page_content"
class="scpm"
data-selectable="true"
phkey="page-content"
key="page-content"
>
{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-content","expandedDisplayName":null}
Expand Down Expand Up @@ -370,6 +373,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render a placeho
id="page_content"
class="scpm"
data-selectable="true"
phkey="page-content"
key="page-content"
>
{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-content","expandedDisplayName":null}
Expand Down Expand Up @@ -423,6 +427,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render component
id="main"
class="scpm"
data-selectable="true"
phkey="main"
key="main"
>
{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"main","expandedDisplayName":null}
Expand All @@ -448,6 +453,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render component
id="page_header"
class="scpm"
data-selectable="true"
phkey="page-header"
key="page-header"
>
{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-header","expandedDisplayName":null}
Expand Down Expand Up @@ -486,6 +492,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render component
id="page_content"
class="scpm"
data-selectable="true"
phkey="page-content"
key="page-content"
>
{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-content","expandedDisplayName":null}
Expand Down Expand Up @@ -560,6 +567,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render nested pl
id="main"
class="scpm"
data-selectable="true"
phkey="main"
key="main"
>
{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"main","expandedDisplayName":null}
Expand All @@ -581,6 +589,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render nested pl
id="page_header"
class="scpm"
data-selectable="true"
phkey="page-header"
key="page-header"
>
{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-header","expandedDisplayName":null}
Expand Down Expand Up @@ -619,6 +628,7 @@ exports[`<Placeholder /> with LayoutService data - EE on should render nested pl
id="page_content"
class="scpm"
data-selectable="true"
phkey="page-content"
key="page-content"
>
{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&amp;ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-content","expandedDisplayName":null}
Expand Down
2 changes: 2 additions & 0 deletions samples/vue/server/server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ export function renderView(callback, path, data, viewBag) {
html = assertReplace(html, '<body>', `<body ${meta.teleports.bodyAttrs || ''}>`);
}

html = html.replace(new RegExp('phkey', 'g'), 'key');

callback(null, {
html,
});
Expand Down

0 comments on commit a57d7ad

Please sign in to comment.