function createPetiteVueDynamicRenderer({ selectors, PetiteVuePkg, }: { selectors: string[]; PetiteVuePkg: PetiteVue; }): DynamicRenderer { const rootElementsMap: Record<string, Element> = {}; const reactiveScopeValuesMap: Record<string, { _setData: any; _getData: any }> = {}; 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 }'); }