update liveeditor

src/views/liveeditor/LiveEditor.vue

@@ -15,7 +15,8 @@ export default {
             showCodeHighlight: false,
             items: [
                 {label: "Options API", command: () => { this.postSandboxParameters('options-api') }},
-                {label: "Composition API", command: () => { this.postSandboxParameters('composition-api') }}
+                {label: "Composition API", command: () => { this.postSandboxParameters('composition-api') }},
+                {label: "Browser Source", command: () => { this.postSandboxParameters('browser-source') }}
             ]
         }
     },
@@ -78,7 +79,7 @@ export default {
             .catch(() => this.showCodeHighlight = true );
         },
 
-        createSandboxParameters(nameWithExt, files, extDependencies) {
+        createSandboxParameters(sourceType, nameWithExt, files, extDependencies) {
             const boolExtFiles = !this.extFiles;
             let extFiles = !boolExtFiles ? {...this.extFiles} : {};
             let extIndexCSS = extFiles['index.css'] || '';
@@ -86,54 +87,7 @@ export default {
 
             const dependencies = require('../../../package.json') ? require('../../../package.json').devDependencies : {};
 
-            return {
+            let defaultCss = {
-                files: {
-                    'package.json': {
-                        content: {
-                            main: `src/demo/${nameWithExt}`,
-                            dependencies: {
-                                ...extDependencies,
-                                'vue': dependencies['vue'],
-                                'primevue': '^3.7.2',
-                                'primeflex': dependencies['primeflex'],
-                                'primeicons': dependencies['primeicons'],
-                                '@babel/cli': dependencies['@babel/cli'],
-                                'core-js': dependencies['core-js'],
-                                'vue-router': dependencies['vue-router']
-                            },
-                            devDependencies: {
-                                '@vue/cli-plugin-babel': dependencies['@vue/cli-plugin-babel'],
-                                '@vue/cli-plugin-eslint': dependencies['@vue/cli-plugin-eslint'],
-                                '@vue/cli-service': dependencies['@vue/cli-service'],
-                                '@vue/compiler-sfc': dependencies['@vue/compiler-sfc'],
-                                'eslint': dependencies['eslint'],
-                                'eslint-plugin-vue': dependencies['eslint-plugin-vue']
-                            }
-                        }
-                    },
-                    'babel.config.js': {
-                content: `module.exports = {
-    presets: [
-        '@vue/cli-plugin-babel/preset'
-    ]
-}`
-                    },
-                    '.eslintrc.js': {
-                        content: `module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended'
-  ],
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
-}`
-                    },
-                    'src/index.css': {
                 content: `html {
         font-size: 14px;
     }
@@ -337,7 +291,66 @@ img.flag {
     }
     ${extIndexCSS}
     `
+};
+            
+            if (sourceType === 'browser-source') {
+                return {
+                    files: {
+                        'index.css': defaultCss,
+                        ...files
+                    }
+                }
+            }
+             
+
+            return {
+                files: {
+                    'package.json': {
+                        content: {
+                            main: `src/demo/${nameWithExt}`,
+                            dependencies: {
+                                ...extDependencies,
+                                'vue': dependencies['vue'],
+                                'primevue': '^3.7.2',
+                                'primeflex': dependencies['primeflex'],
+                                'primeicons': dependencies['primeicons'],
+                                '@babel/cli': dependencies['@babel/cli'],
+                                'core-js': dependencies['core-js'],
+                                'vue-router': dependencies['vue-router']
                             },
+                            devDependencies: {
+                                '@vue/cli-plugin-babel': dependencies['@vue/cli-plugin-babel'],
+                                '@vue/cli-plugin-eslint': dependencies['@vue/cli-plugin-eslint'],
+                                '@vue/cli-service': dependencies['@vue/cli-service'],
+                                '@vue/compiler-sfc': dependencies['@vue/compiler-sfc'],
+                                'eslint': dependencies['eslint'],
+                                'eslint-plugin-vue': dependencies['eslint-plugin-vue']
+                            }
+                        }
+                    },
+                    'babel.config.js': {
+                        content: `module.exports = {
+    presets: [
+        '@vue/cli-plugin-babel/preset'
+    ]
+}`
+                    },
+                    '.eslintrc.js': {
+                        content: `module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}`
+                    },
+                    'src/index.css': defaultCss,
                     ...files,
                     ...extFiles
                 }
@@ -351,17 +364,13 @@ ${extIndexCSS}
             let extDependencies = this.dependencies || {};
             let extImport = '';
             let extElement = '';
-            let content = this.sources[sourceType].content.replace('<\\/script>', '<\/script>');
+            let content = this.sources[sourceType].content.replaceAll('<\\/script>', '<\/script>');
+            let imports = this.sources[sourceType].imports ? this.sources[sourceType].imports.replaceAll('<\\/script>', '<\/script>') : '';
             let pages = this.extPages ? this.extPages : '';
             let _files = {}, element = '';
 
-            if(this.component) {
-                extImport += `import ${this.component} from 'primevue/${this.component.toLowerCase()}';`
-                extElement += `app.component('${this.component}', ${this.component});`;
-            }
-
             if (this.service) {
-                let dataArr = [], serviceArr = [];
+                let dataArr = [], serviceArr = [], path = '';
 
                 this.service.forEach(el => {
                     serviceArr.push(el.split(','))
@@ -374,7 +383,10 @@ ${extIndexCSS}
 
                     if (dataArr) {
                         dataArr.forEach(el => {
-                            _files[`public/data/${el}.json`] = {
+                            let _path = `${el}.json`;
+                            path = sourceType === 'browser-source' ? _path : `public/demo/data/${_path}`;
+
+                            _files[path] = {
                                 content: data[el]
                             };
                         });
@@ -382,12 +394,42 @@ ${extIndexCSS}
                 }
 
                 serviceArr.forEach(serv => {
-                     _files[`src/service/${serv}.js`] = {
+                    path = sourceType === 'browser-source' ? `${serv}.js` : `src/service/${serv}.js`;
-                            content: `${services[serv]}`
+                    let _content = sourceType === 'browser-source' ? 
-                    };
+                                `${services[serv].replaceAll('export default class', 'class').replaceAll('demo/data/', './')}` : 
+                                `${services[serv]}`;
+
+                    _files[path] = {
+                        content: _content
+                    }
                 })
             }
 
+            if (sourceType === 'browser-source') {
+                _files['index.html'] = {
+                    content: `<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <title>${name}</title>
+        <link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
+        <link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
+        <link href="https://unpkg.com/primeflex@2.0.0/primeflex.min.css" rel="stylesheet" />
+        <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
+        <link href="./index.css" rel="stylesheet" />
+
+        <script src="https://unpkg.com/vue@next"><\/script>
+        <script src="https://unpkg.com/primevue@^3/core/core.min.js"><\/script>
+        ${imports}
+    </head>
+    <body>${content}
+    </body>
+</html>`
+                }
+            }
+            else {
                 element += `import ${name} from "./${name}.vue"`;
 
                 _files['src/main.js'] = {
@@ -475,6 +517,7 @@ import SplitButton from 'primevue/splitbutton';
 import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
 import Steps from 'primevue/steps';
+import StyleClass from 'primevue/styleclass';
 import TabMenu from 'primevue/tabmenu';
 import TieredMenu from 'primevue/tieredmenu';
 import Textarea from 'primevue/textarea';
@@ -505,6 +548,7 @@ app.use(router);
 app.directive('tooltip', Tooltip);
 app.directive('badge', BadgeDirective);
 app.directive('ripple', Ripple);
+app.directive('styleclass', StyleClass);
 
 app.component('Accordion', Accordion);
 app.component('AccordionTab', AccordionTab);
@@ -620,6 +664,11 @@ app.mount("#app");
 `
                 }
 
+                if (this.component) {
+                    extImport += `import ${this.component} from 'primevue/${this.component.toLowerCase()}';`
+                    extElement += `app.component('${this.component}', ${this.component});`;
+                }
+
                 if (pages) {
                     let routes = [], routeImports = '';
 
@@ -672,8 +721,9 @@ export const router = createRouter({
 });`
                     }
                 }
+            }
 
-            return this.createSandboxParameters(`${name}${extension}`, _files, extDependencies);
+            return this.createSandboxParameters(sourceType, `${name}${extension}`, _files, extDependencies);
         },
 
         openDefaultCSB() {