Refactor on live editor implementation

src/AppDocumentation.vue

@@ -64,7 +64,7 @@ export default {
                 this.data.forEach(el => {
                     dataArr.push(el.split(','))
                 })
-                
+
                 dataArr.forEach((el, i) => {
                     tabs.push(
                         <TabPanel key={`${el}_i`} header={`${el}.json`}>
@@ -113,11 +113,26 @@ export default {
         },
         renderSource(sourceType, tabs) {
             if (this.sources && this.sources[sourceType]) {
+                let extFiles = this.extFiles ? this.extFiles[sourceType] || this.extFiles : null;
+                extFiles = extFiles && Object.entries(extFiles).map(([key, value], i) => {
+                    if (key === 'index.css' || !value.content) {
+                        return null;
+                    }
+
+                    return (
+                        <pre v-code><code>
+                            {`\n/* ${key.replace('src/components/', '')} */\n`}
+                            {this.renderContent(value)}
+                        </code></pre>
+                    )
+                });
+
                 tabs.push(
                     <TabPanel key={sourceType} header={this.sources[sourceType].tabName}>
                         <pre v-code><code>
                             {this.renderContent(this.sources[sourceType])}
                         </code></pre>
+                        {extFiles}
                     </TabPanel>
                 );
             }

src/views/dynamicdialog/DynamicDialogDoc.vue

@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DynamicDialogDemo" :sources="sources" :extPages="pages" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
+    <AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
         <h5>DialogService</h5>
         <p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
 
@@ -514,7 +514,7 @@ export default {
 			<p-column field="name" header="Name"></p-column>
             <p-column header="Image">
                 <template #body="slotProps">
-                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
                 </template>
             </p-column>
 			<p-column field="category" header="Category"></p-column>
@@ -595,113 +595,13 @@ export default {
             .use(primevue.toastservice)
             .mount("#app");
         <\\/script>
-                        `
-                    },
-                    'demo1':  {
-                        tabName: 'ProductListDemo.vue',
-                        content: `
-<template>
-	<div>
-        <div class="flex justify-content-end mt-1 mb-3">
-            <Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" />
-        </div>
-        <DataTable :value="products" responsiveLayout="scroll">
-			<Column field="code" header="Code"></Column>
-			<Column field="name" header="Name"></Column>
-            <Column header="Image">
-                <template #body="slotProps">
-                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
-                </template>
-            </Column>
-			<Column field="category" header="Category"></Column>
-			<Column field="quantity" header="Quantity"></Column>
-            <Column style="width:5rem">
-                <template #body="slotProps">
-                    <Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button>
-                </template>
-            </Column>
-		</DataTable>
-
-	</div>
-</template>
-
-<script>
-import ProductService from '../../service/ProductService';
-import InfoDemo from './InfoDemo.vue';
-
-export default {
-    inject: ['dialogRef'],
-    data() {
-        return {
-            products: null
-        }
-    },
-    productService: null,
-    created() {
-        this.productService = new ProductService();
-    },
-    mounted() {
-        this.productService.getProductsSmall().then(data => this.products = data.slice(0,5));
-    },
-    methods: {
-        selectProduct(data) {
-            this.dialogRef.close(data);
-        },
-        showInfo() {
-            this.$dialog.open(InfoDemo, {
-                props: {
-                    header: 'Information',
-                    modal: true,
-                    dismissableMask: true
-                },
-                data: {
-                    totalProducts: this.products ? this.products.length : 0
-                }
-            });
-        }
-    }
-}
-<\\/script>
-                        `
-                    },
-                    'demo2': {
-                        tabName: 'InfoDemo.vue',
-                        content: `
-<template>
-    <div>
-        <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
-        <div class="flex justify-content-end">
-            <Button type="button" label="Close" @click="closeDialog"></Button>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    inject: ['dialogRef'],
-    data() {
-        return {
-            totalProducts: 0
-        }
-    },
-    mounted() {
-        this.totalProducts = this.dialogRef.data.totalProducts;
-    },
-    methods: {
-        closeDialog() {
-            this.dialogRef.close();
-        }
-    }
-}
-<\\/script>
-
                         `
                     }
                 },
-                pages: [
+                extFiles: {
-                    {
+                    'options-api': {
-                        tabName: 'ProductListDemo',
+                        'src/components/ProductListDemo.vue': {
-                        content: `
+                            content: `
 <template>
 	<div>
         <div class="flex justify-content-end mt-1 mb-3">
@@ -712,7 +612,7 @@ export default {
 			<Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
                 </template>
             </Column>
 			<Column field="category" header="Category"></Column>
@@ -764,12 +664,10 @@ export default {
     }
 }
 <\\/script>
-
                         `
-                    },
+                        },
-                    {
+                        'src/components/InfoDemo.vue': {
-                        tabName: 'InfoDemo',
+                            content: `
-                        content: `
 <template>
     <div>
         <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
@@ -797,10 +695,109 @@ export default {
     }
 }
 <\\/script>
+                            `
+                        }
+                    },
+                    'composition-api': {
+                        'src/components/ProductListDemo.vue': {
+                            content: `
+<template>
+	<div>
+        <div class="flex justify-content-end mt-1 mb-3">
+            <Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" />
+        </div>
+        <DataTable :value="products" responsiveLayout="scroll">
+			<Column field="code" header="Code"></Column>
+			<Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                </template>
+            </Column>
+			<Column field="category" header="Category"></Column>
+			<Column field="quantity" header="Quantity"></Column>
+            <Column style="width:5rem">
+                <template #body="slotProps">
+                    <Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button>
+                </template>
+            </Column>
+		</DataTable>
 
+	</div>
+</template>
+
+<script>
+import ProductService from '../service/ProductService';
+import InfoDemo from './InfoDemo.vue';
+
+export default {
+    inject: ['dialogRef'],
+    data() {
+        return {
+            products: null
+        }
+    },
+    productService: null,
+    created() {
+        this.productService = new ProductService();
+    },
+    mounted() {
+        this.productService.getProductsSmall().then(data => this.products = data.slice(0,5));
+    },
+    methods: {
+        selectProduct(data) {
+            this.dialogRef.close(data);
+        },
+        showInfo() {
+            this.$dialog.open(InfoDemo, {
+                props: {
+                    header: 'Information',
+                    modal: true,
+                    dismissableMask: true
+                },
+                data: {
+                    totalProducts: this.products ? this.products.length : 0
+                }
+            });
+        }
+    }
+}
+<\\/script>
                         `
+                        },
+                        'src/components/InfoDemo.vue': {
+                            content: `
+<template>
+    <div>
+        <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
+        <div class="flex justify-content-end">
+            <Button type="button" label="Close" @click="closeDialog"></Button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    inject: ['dialogRef'],
+    data() {
+        return {
+            totalProducts: 0
+        }
+    },
+    mounted() {
+        this.totalProducts = this.dialogRef.data.totalProducts;
+    },
+    methods: {
+        closeDialog() {
+            this.dialogRef.close();
+        }
+    }
+}
+<\\/script>
+                            `
+                        }
                     }
-                ]
+                }
             }
         }
     }

src/views/liveeditor/LiveEditor.vue

@@ -8,6 +8,8 @@
 import EventBus from '@/AppEventBus';
 import { services, data } from './LiveEditorData';
 
+const sourceTypes = ['options-api', 'composition-api', 'browser-source'];
+
 export default {
     data() {
         return {
@@ -80,8 +82,10 @@ export default {
         },
 
         createSandboxParameters(sourceType, nameWithExt, files, extDependencies) {
-            const boolExtFiles = !this.extFiles;
+            /* eslint-disable */
-            let extFiles = !boolExtFiles ? {...this.extFiles} : {};
+            let extFiles = this.extFiles ? (this.extFiles[sourceType] ? {...this.extFiles[sourceType]} : Object.keys(this.extFiles).filter(k => !sourceTypes.includes(k)).reduce((result, current) => (result[current] = this.extFiles[current]) && result, {})) : {};
+            Object.entries(extFiles).forEach(([key, value]) => extFiles[key].content && (extFiles[key].content = value.content.replaceAll('<\\/script>', '<\/script>')));
+
             let extIndexCSS = extFiles['index.css'] || '';
             delete extFiles['index.css'];
 
@@ -295,7 +299,7 @@ export default {
     ${extIndexCSS}
     `
 };
-            
+
             if (sourceType === 'browser-source') {
                 return {
                     files: {
@@ -397,8 +401,8 @@ export default {
 
                 serviceArr.forEach(serv => {
                     path = sourceType === 'browser-source' ? `${serv}.js` : `src/service/${serv}.js`;
-                    let _content = sourceType === 'browser-source' ? 
+                    let _content = sourceType === 'browser-source' ?
-                                `${services[serv].replaceAll('export default class', 'class').replaceAll('demo/data/', './')}` : 
+                                `${services[serv].replaceAll('export default class', 'class').replaceAll('demo/data/', './')}` :
                                 `${services[serv]}`;
 
                     _files[path] = {