Update

resources/js/projects-renderer.js

@@ -0,0 +1,41 @@
+import { createApp } from 'vue';
+import ProjectPageRenderer from './projects-renderer/ProjectPageRenderer.vue';
+import ProjectStructureEditor from './projects-renderer/ProjectStructureEditor.vue';
+import { buildInitialProject } from './projects-renderer/schema/projectSchema';
+
+const readPayload = (element) => {
+    const targetId = element.dataset.payloadTarget;
+    const payloadNode = targetId ? document.getElementById(targetId) : null;
+
+    if (!payloadNode) {
+        return {};
+    }
+
+    try {
+        return JSON.parse(payloadNode.textContent || '{}');
+    } catch (error) {
+        console.error('Unable to parse project renderer payload.', error);
+        return {};
+    }
+};
+
+document.querySelectorAll('[data-project-structure-editor]').forEach((element) => {
+    const payload = readPayload(element);
+    createApp(ProjectStructureEditor, {
+        initialProject: payload,
+        fieldId: element.dataset.fieldId || 'project-structure-field',
+        uploadUrl: element.dataset.uploadUrl || null,
+        languages: payload.languages || [],
+        defaultLanguage: payload.defaultLanguage || '',
+        categories: payload.categories || [],
+        activeValue: payload.active ?? 'Y',
+    }).mount(element);
+});
+
+document.querySelectorAll('[data-project-page-renderer]').forEach((element) => {
+    const payload = readPayload(element);
+    createApp(ProjectPageRenderer, {
+        project: buildInitialProject(payload),
+        activeLang: payload.defaultLanguage || '',
+    }).mount(element);
+});