Add vue config (#174)

packages/devextreme-cli/templates/vue/application/src/router.js

@@ -12,8 +12,14 @@ import simpleLayout from "./layouts/single-card";
 Vue.use(Router);
 
 const router = new Router({
-  routes: [<%=^empty%>
+  routes: [<%=#empty%>
     {
+      path: "/",
+      components: {
+        layout: defaultLayout
+      }
+    },<%=/empty%>
+    <%=^empty%>{
       path: "/home",
       name: "home",
       meta: { requiresAuth: true },
@@ -39,14 +45,7 @@ const router = new Router({
         layout: defaultLayout,
         content: DisplayData
       }
-    },<%=/empty%>
-    <%=#empty%>{
-      path: "/",
-      components: {
-        layout: defaultLayout
-      }
-    },<%=/empty%>
-    {
+    },<%=/empty%>{
       path: "/login-form",
       name: "login-form",
       meta: { requiresAuth: false },
@@ -58,8 +57,8 @@ const router = new Router({
         content: () =>
           import(/* webpackChunkName: "login" */ "./views/login-form")
       }
-    },<%=^empty%>
-    {
+    },
+    <%=^empty%>{
       path: "/",
       redirect: "/home"
     },

templates-generator/index.js

@@ -4,69 +4,80 @@ const path = require('path');
 const glob = require('glob');
 const micromatch = require('micromatch');
 const args = require('minimist')(process.argv.slice(2),
-    buildOptions({ platform: {
-        type: 'string',
-        alias: 'p'
-    }
+    buildOptions({
+        platform: {
+            type: 'string',
+            alias: 'p'
+        }
     }));
 
 const platformsConfigs = {
-    react: './react-config.js'
+    react: './react-config.js',
+    angular: './angular-config.js',
+    vue: './vue-config.js'
 };
 
 const commands = args['_'];
-    if(commands.length) {
-        throw new Error(`Unexpected command(s) '${args._}'`);
-    }
+if(commands.length) {
+    throw new Error(`Unexpected command(s) '${args._}'`);
+}
 
-    if(args.platform in platformsConfigs) {
-        generateTemplate(args.platform);
-    } else if(!args.platform) {
-        for(let platform in platformsConfigs) {
-            generateTemplate(platform);
-        }
-    } else {
-        throw new Error('Platform doesn\'t exist');
+if(args.platform in platformsConfigs) {
+    generateTemplate(args.platform);
+} else if(!args.platform) {
+    for(let platform in platformsConfigs) {
+        generateTemplate(platform);
     }
+} else {
+    throw new Error('Platform doesn\'t exist');
+}
 
-    function generateTemplate(platform) {
-        const config = require(platformsConfigs[platform], 'utf8');
-        const relativePaths = glob.sync(config.sourceGlob, {
-            cwd: config.sourcePath,
-            ignore: config.ignoreList
-        });
-        relativePaths.forEach(relativePath => {
-            let content = fs.readFileSync(`${config.sourcePath}${relativePath}`, 'utf8');
-            content = updateContent(relativePath, content, config.updateRules);
+function generateTemplate(platform) {
+    const config = require(platformsConfigs[platform], 'utf8');
+    const relativePaths = glob.sync(config.sourceGlob, {
+        cwd: config.sourcePath,
+        ignore: config.ignoreList
+    });
+    relativePaths.forEach(relativePath => {
+        let content = fs.readFileSync(`${config.sourcePath}${relativePath}`, 'utf8');
+        content = updateContent(relativePath, content, config.replaceRules, config.removeRules);
 
-            writeFile(relativePath, content, config);
-        });
-    }
+        writeFile(relativePath, content, config);
+    });
+}
 
-    function updateContent(relativePath, content, updateRules) {
-        const rules = updateRules.filter(info => micromatch.isMatch(relativePath, info.glob));
-        rules.forEach(rule => {
-            rule.definitions.forEach(definition => {
+function updateContent(relativePath, content, replaceRules, removeRules) {
+    replaceRules.forEach(replacement => {
+        if(micromatch.isMatch(relativePath, replacement.glob)) {
+            replacement.definitions.forEach(definition => {
                 content = content.replace(definition.before, definition.after);
             });
-        });
+        }
+    });
 
-        return content;
-    }
+    removeRules.forEach(removal => {
+        if(micromatch.isMatch(relativePath, removal.glob)) {
+            removal.definitions.forEach(definition => {
+                content = content.replace(definition, '');
+            });
+        }
+    });
+    return content;
+}
 
-    function writeFile(relativePath, content, { moveRules, targetPath }) {
-        const rule = moveRules.find(rule => micromatch.isMatch(relativePath, rule.glob));
-        const fullPath = rule
-            ? `${rule.definition.targetPath}${relativePath.replace(rule.definition.sourcePath, '')}`
-            : `${targetPath}${relativePath}`;
+function writeFile(relativePath, content, { moveRules, targetPath }) {
+    const rule = moveRules.find(rule => micromatch.isMatch(relativePath, rule.glob));
+    const fullPath = rule
+        ? `${rule.definition.targetPath}${relativePath.replace(rule.definition.sourcePath, '')}`
+        : `${targetPath}${relativePath}`;
 
-        createNestedFolder(fullPath, content);
-        fs.writeFileSync(fullPath, content);
-    }
+    createNestedFolder(fullPath, content);
+    fs.writeFileSync(fullPath, content);
+}
 
-    function createNestedFolder(fullPath) {
-        const dirName = path.dirname(fullPath);
-        if(!fs.existsSync(dirName)) {
-            fs.mkdirSync(dirName, { recursive: true });
-        }
+function createNestedFolder(fullPath) {
+    const dirName = path.dirname(fullPath);
+    if(!fs.existsSync(dirName)) {
+        fs.mkdirSync(dirName, { recursive: true });
     }
+}

templates-generator/vue-config.js

@@ -0,0 +1,132 @@
+module.exports = {
+    sourcePath: 'packages/devextreme-cli/testing/sandbox/vue/my-app/',
+    targetPath: 'packages/devextreme-cli/templates/vue/',
+    sourceGlob: '**/*.{js,scss,json,vue}',
+    ignoreList: [
+        '{node_modules,public,src/themes/generated}/**/*.*',
+        'src/{App.test,setupTests,serviceWorker,index}.js',
+        'src/components/HelloWorld.vue',
+        '{package,package-lock}.json',
+        'babel.config.js'
+    ],
+    replaceRules: [
+        {
+            glob: 'src/themes/metadata.additional.json',
+            definitions: [
+                {
+                    before: /"baseTheme": "[^"]*"/,
+                    after: '"baseTheme": "material.orange.dark"'
+                }
+            ]
+        },
+        {
+            glob: 'src/themes/metadata.base.json',
+            definitions: [
+                {
+                    before: /"baseTheme": "[^"]*"/,
+                    after: '"baseTheme": "material.orange.light"'
+                }
+            ]
+        },
+        {
+            glob: 'src/themes/metadata.*.json',
+            definitions: [
+                {
+                    before: /"items": \[[^\]]*]/,
+                    after: '"items": []'
+                }
+            ]
+        },
+        {
+            glob: 'src/app-info.js',
+            definitions: [
+                {
+                    before: 'My App',
+                    after: '<%=project%>'
+                }
+            ],
+        },
+        {
+            glob: 'src/app-navigation.js',
+            definitions: [
+                {
+                    before: /\[(.*?)\];/s,
+                    after: '[<%=^empty%>$1<%=/empty%>];'
+                }
+            ]
+        },
+        {
+            glob: 'src/router.js',
+            definitions: [
+                {
+                    before: /((import (Home|Profile|DisplayData).*\n)+)/,
+                    after: '<%=^empty%>$1<%=/empty%>'
+                },
+                {
+                    before: /side-nav-(inner|outer)-toolbar/,
+                    after: '<%=layout%>'
+                },
+                {
+                    before: /routes: \[\s+/,
+                    after: `routes: [<%=#empty%>
+    {
+      path: "/",
+      components: {
+        layout: defaultLayout
+      }
+    },<%=/empty%>
+    `
+                },
+                {
+                    before: /({\s+path: "\/home".*content: DisplayData(\s+})+,)\s+/s,
+                    after: '<%=^empty%>$1<%=/empty%>'
+                },
+                {
+                    before: /({[^}]*redirect: "\/home"[^\]]*})\s+]/,
+                    after: `<%=^empty%>$1<%=/empty%>
+    <%=#empty%>{
+      path: "*",
+      redirect: "/"
+    }<%=/empty%>
+  ]`
+                }
+            ]
+        }
+    ],
+    removeRules: [
+        {
+            glob: 'src/main.js',
+            definitions: [
+                'import \'devextreme/dist/css/dx.common.css\';\n',
+                'import \'./themes/generated/theme.base.css\';\n',
+                'import \'./themes/generated/theme.additional.css\';\n',
+            ]
+        }
+    ],
+    moveRules: [
+        {
+            glob: 'src/{!(views)/*.*,views/login-form.vue,*.*}',
+            definition:
+            {
+                sourcePath: '',
+                targetPath: 'packages/devextreme-cli/templates/vue/application/'
+            }
+        },
+        {
+            glob: 'devextreme.json',
+            definition:
+            {
+                sourcePath: '',
+                targetPath: 'packages/devextreme-cli/templates/vue/application/'
+            }
+        },
+        {
+            glob: 'src/views/**/*.*',
+            definition:
+            {
+                sourcePath: 'src/views/',
+                targetPath: 'packages/devextreme-cli/templates/vue/sample-pages/'
+            }
+        }
+    ]
+};