Slide 40
Slide 40 text
© PLAID, Inc. | Confidential
ダイナミックブロックを
構成する技術要素
© PLAID, Inc. | Confidential 40
export function createPetiteVueDynamicRenderer({
selectors,
PetiteVuePkg,
}: {
selectors: string[];
PetiteVuePkg: PetiteVue;
}): DynamicRenderer {
const rootElementsMap: Record = {};
const reactiveScopeValuesMap: Record = {};
let app: PetiteVueApp | undefined;
const render: DynamicRenderer['render'] = () => {
const { createApp } = PetiteVuePkg;
selectors.forEach(selector => {
const element = document.querySelector(selector);
if (element) {
rootElementsMap[selector] = element;
}
});
Object.entries(rootElementsMap).forEach(([selector, element]) => {
setAttributesForRender(element, selector);
});
app = createApp({
Scope,
$delimiters: ['#{', '}'],
});
app.directive(EXPORT_DIRECTIVE_NAME, exportDirective).mount();
};
const setData: DynamicRenderer['setData'] = (selector, data) => {
reactiveScopeValuesMap[selector]?._setData(data);
};
const getData: DynamicRenderer['getData'] = selector => {
return reactiveScopeValuesMap[selector]?._getData();
};
return { render, setData, getData };
}
ターゲットとなる要素に対してレンダリング⽤の属性を設定
各要素に対して、 krt-scope 属性と krt-_export 属性を設定。
petite-vueは、 krt-scope 属性が有効な要素に対してリアクティブな管理を
⾏います。
function setAttributesForRender(element: Element, selector: string) {
element.setAttribute('krt-scope', `Scope('${selector}')`);
element.setAttribute('krt-_export', '{ _getData, _setData, _selector }');
}