Skip to content

Commit bd31cdd

Browse files
megateramegatera
committed
Updated project export functionality
- export with Vite instead of Webpack - updated package.json algorithm - updated tsconfig.json algorithm - added vite.config.json algorithm - added ts-config.vite-config.json algorithm - added eslintrc algorithm - updated router export algorithms to update to separate directory as well as import/export declarations - updated import for router in main.js/ts - updated index file algorithm favicon link tag ref and added script tag for main.js/ts Co-authored by Bryan Bart <[email protected]>
1 parent d4c8219 commit bd31cdd

File tree

1 file changed

+82
-66
lines changed

1 file changed

+82
-66
lines changed

‎src/components/file_system_interface/ExportProject.vue

Lines changed: 82 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,13 @@ export default {
5252
createRouter(location) {
5353
if (this.exportAsTypescript === "on") {
5454
fs.writeFileSync(
55-
path.join(location, "src", "router.ts"),
55+
path.join(location, "src", "router", "index.ts"),
5656
this.createRouterImports(this.componentMap["App"].children) +
5757
this.createExport(this.componentMap["App"].children)
5858
);
5959
} else {
6060
fs.writeFileSync(
61-
path.join(location, "src", "router.js"),
61+
path.join(location, "src", "router", "index.js"),
6262
this.createRouterImports(this.componentMap["App"].children) +
6363
this.createExport(this.componentMap["App"].children)
6464
);
@@ -71,25 +71,20 @@ export default {
7171
createRouterImports(appChildren) {
7272
let str = "import { createRouter, createWebHistory } from 'vue-router';\n";
7373
appChildren.forEach((child) => {
74-
str += `import ${child} from './views/${child}.vue';\n`;
74+
str += `import ${child} from '../views/${child}.vue';\n`;
7575
});
7676
return str;
7777
},
7878
/**
7979
* @description creates the `export default` code in <script>
8080
*/
8181
createExport(appChildren) {
82-
let str;
83-
if (this.exportAsTypescript === "on") {
84-
str = "export default createRouter({\n\thistory: createWebHistory(process.env.BASE_URL),\n\troutes: [\n";
85-
} else {
86-
str = "export default createRouter({\n\thistory: createWebHistory(),\n\tbase: process.env.BASE_URL,\n\troutes: [\n";
87-
}
82+
let str = "export default createRouter({\n\thistory: createWebHistory(import.meta.env.BASE_URL),\n\troutes: [\n";
8883
appChildren.forEach((child) => {
8984
if (child === "HomeView") {
9085
str += `\t\t{\n\t\t\tpath: '/',\n\t\t\tname:'${child}',\n\t\t\tcomponent:${child}\n\t\t},\n`;
9186
} else {
92-
str += `\t\t{\n\t\t\tpath: '/${child}',\n\t\t\tname:'${child}',\n\t\t\tcomponent: ${child}\n\t\t},\n`;
87+
str += `\t\t{\n\t\t\tpath: '/${child}',\n\t\t\tname:'${child}',\n\t\t\tcomponent: () => import('../views/${child}.vue')\n\t\t},\n`;
9388
}
9489
});
9590
str += `\t]\n})\n`;
@@ -347,19 +342,23 @@ export default {
347342
str += `\n\t<meta charset="utf-8">`;
348343
str += `\n\t<meta http-equiv="X-UA-Compatible" content="IE=edge">`;
349344
str += `\n\t<meta name="viewport" content="width=device-width,initial-scale=1.0">`;
350-
str += `\n\t<link rel="icon" href="<%= BASE_URL %>favicon.ico">`;
351-
str += `\n\t<title>New Vue Project</title>`;
345+
str += `\n\t<link rel="icon" href="/favicon.ico">`;
346+
str += `\n\t<title>New OverVue Project</title>`;
352347
str += `\n</head>\n\n`;
353348
str += `<body>`;
354349
str += `\n\t<noscript>`;
355350
str += `\n\t\t<strong>We're sorry but vue-boiler-plate-routes doesn't work properly without JavaScript enabled. Please enable it
356351
to continue.</strong>`;
357352
str += `\n\t</noscript>`;
358353
str += `\n\t<div id="app"></div>`;
359-
str += `\n\t<!-- built files will be auto injected -->`;
354+
if (this.exportAsTypescript === "on"){
355+
str += `\n\t<script type="module" src="/src/main.ts"><\/script>`;
356+
} else {
357+
str += `\n\t<script type="module" src="/src/main.js"><\/script>`;
358+
}
360359
str += `\n</body>\n\n`;
361360
str += `</html>\n`;
362-
fs.writeFileSync(path.join(location, "public", "index.html"), str);
361+
fs.writeFileSync(path.join(location, "index.html"), str);
363362
},
364363
// creates main.js boilerplate
365364
createMainFile(location) {
@@ -379,22 +378,56 @@ export default {
379378
}
380379
},
381380
// create babel file
382-
createBabel(location) {
383-
let str = `module.exports = {`;
384-
str += `\n\tpresets: [`;
385-
str += `\n\t\t'@vue/app'`;
386-
str += `\n\t]`;
387-
str += `\n}`;
381+
createViteConfig(location) {
382+
let str = `import { fileURLToPath, URL } from 'url';\n\n`;
383+
str += `import { defineConfig } from 'vite';\n`;
384+
str += `import vue from '@vitejs/plugin-vue';\n\n`;
385+
str += `export default defineConfig({\n`
386+
str += `\tplugins: [vue()],\n`
387+
str += `\tresolve: {\n`
388+
str += `\t\t alias: {\n`
389+
str += `\t\t\t'@': fileURLToPath(new URL('./src', import.meta.url))\n`
390+
str += `\t\t}\n\t}\n})`
391+
388392
// if using typescript, export with .ts extension
389393
if (this.exportAsTypescript === "on") {
390-
fs.writeFileSync(path.join(location, "src", "babel.config.ts"), str);
394+
fs.writeFileSync(path.join(location, "vite.config.ts"), str);
395+
} else {
396+
fs.writeFileSync(path.join(location, "vite.config.js"), str);
397+
}
398+
},
399+
createESLintRC(location) {
400+
let str;
401+
if (this.exportAsTypescript === "on"){
402+
str += `require("@rushstack/eslint-patch/modern-module-resolution");\n\n`;
403+
}
404+
str += `module.exports = {\n`;
405+
str += `\t"root": true,\n`;
406+
str += `\t"extends": [\n`;
407+
str += `\t\t"plugin:vue/vue3-essential",\n`
408+
str += `\t\t"eslint:recommended"`
409+
if (this.exportAsTypescript === "on"){
410+
str += `,\n\t\t"@vue/eslint-config-typescript/recommended"\n`
411+
}
412+
str += `\n\t],\n`
413+
str += `\t"env": {\n`
414+
str += `\t\t"vue/setup-compiler-macros": true\n`
415+
str += `\t}\n}`
416+
fs.writeFileSync(path.join(location, ".eslintrc.cjs"), str);
417+
},
418+
createTSViteConfig(location) {
419+
if (this.exportAsTypescript === "on") {
420+
let str = `{\n\t"extends": "@vue/tsconfig/tsconfig.node.json",\n\t"include": ["vite.config.*"],\n\t"compilerOptions": {\n\t\t"composite": true,\n\t\t"types": ["node", "viteset"]\n\t}\n}`;
421+
fs.writeFileSync(path.join(location, "tsconfig.vite-config.json"), str);
391422
} else {
392-
fs.writeFileSync(path.join(location, "babel.config.js"), str);
423+
return;
393424
}
394425
},
395426
createTSConfig(location) {
396427
if (this.exportAsTypescript === "on") {
397-
let str = `{\n\t"extends": "@vue/tsconfig/tsconfig.web.json",\n\t"include": ["src/**/*", "src/**/*.vue"],\n\t"compilerOptions": {\n\t\t"baseUrl": ".",\n\t\t"paths": {\n\t\t\t"@/*": ["./src/*"]\n\t\t}\n\t}\n}`;
428+
let str = `{\n\t"extends": "@vue/tsconfig/tsconfig.web.json",\n\t"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],\n\t"compilerOptions": {\n\t\t"baseUrl": ".",\n\t\t"paths": {\n\t\t\t"@/*": ["./src/*"]\n\t\t}\n\t},`;
429+
str += `\t"references": [\n`
430+
str += `\t\t{\n\t\t\t"path": "./tsconfig.vite-config.json"\n\t\t}\n\t]\n}`
398431
fs.writeFileSync(path.join(location, "tsconfig.json"), str);
399432
} else {
400433
return;
@@ -403,59 +436,39 @@ export default {
403436
// create package.json file
404437
createPackage(location) {
405438
let str = `{`;
406-
str += `\n\t"name": "vue-boiler-plate-routes",`;
407-
str += `\n\t"version": "0.1.0",`;
408-
str += `\n\t"private": true,`;
439+
str += `\n\t"name": "My-OverVue-Project",`;
440+
str += `\n\t"version": "0.0.0",`;
409441
str += `\n\t"scripts": {`;
410-
str += `\n\t\t"start": "vue-cli-service serve",`;
411-
str += `\n\t\t"build": "vue-cli-service build",`;
412-
str += `\n\t\t"lint": "vue-cli-service lint"`;
442+
str += `\n\t\t"dev": "vite",`;
443+
if (this.exportAsTypescript === "on") {
444+
str += `\n\t\t"build": "vue-tsc --noEmit && vite build",`;
445+
str += `\n\t\t"typecheck": "vue-tsc --noEmit",`;
446+
str += `\n\t\t"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",`;
447+
} else {
448+
str += `\n\t\t"build": "vite build",`;
449+
str += `\n\t\t"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",`;
450+
}
451+
str += `\n\t\t"preview": "vite preview --port 5050"`;
413452
str += `\n\t},`;
414453
str += `\n\t"dependencies": {`;
415-
str += `\n\t\t"vue": "^3.2.26",`;
454+
str += `\n\t\t"vue": "^3.2.31",`;
416455
str += `\n\t\t"vue-router": "^4.0.12",`;
417456
str += `\n\t\t"vuex": "^4.0.2"`;
418457
str += `\n\t},`;
419458
str += `\n\t"devDependencies": {`;
420-
str += `\n\t\t"@vue/cli-plugin-babel": "~4.5.0",`;
421-
str += `\n\t\t"@vue/cli-plugin-eslint": "~4.5.0",`;
422-
str += `\n\t\t"@vue/cli-service": "~4.5.0",`;
423-
str += `\n\t\t"babel-eslint": "^10.0.1",`;
424-
str += `\n\t\t"eslint": "^8.9.0",`;
425-
str += `\n\t\t"eslint-plugin-vue": "^8.4.1",`;
426-
str += `\n\t\t"@vue/compiler-sfc": "^3.0.0-0"`;
459+
str += `\n\t\t"@vitejs/plugin-vue": "^2.2.2",`;
460+
str += `\n\t\t"eslint": "^8.5.0",`;
461+
str += `\n\t\t"eslint-plugin-vue": "^8.2.0",`;
462+
str += `\n\t\t"vite": "^2.8.4"`
427463
if (this.exportAsTypescript === "on") {
428-
str += `,\n\t\t"@vue/tsconfig": "^0.1.3",`;
464+
str += `,\n\t\t"@rushstack/eslint-patch": "^1.1.0",`
465+
str += `\n\t\t"@vue/tsconfig": "^0.1.3",`;
429466
str += `\n\t\t"typescript": "~4.5.5",`;
430467
str += `\n\t\t"vue-tsc": "^0.31.4",`;
431-
str += `\n\t\t"@babel/preset-typescript": "^7.16.7"`; // not sure we need this?
468+
str += `\n\t\t"@types/node": "^16.11.25",`;
469+
str += `\n\t\t"@vue/eslint-config-typescript": "^10.0.0"`;
432470
}
433-
str += `\n\t},`;
434-
str += `\n\t"eslintConfig": {`;
435-
str += `\n\t\t"root": true,`;
436-
str += `\n\t\t"env": {`;
437-
str += `\n\t\t\t"node": true`;
438-
str += `\n\t\t},`;
439-
str += `\n\t\t"extends": [`;
440-
str += `\n\t\t\t"plugin:vue/essential",`;
441-
str += `\n\t\t\t"eslint:recommended"`;
442-
str += `\n\t\t],`;
443-
str += `\n\t\t"rules": {},`;
444-
str += `\n\t\t"parserOptions": {`;
445-
str += `\n\t\t\t"parser": "babel-eslint"`;
446-
str += `\n\t\t}`;
447-
str += `\n\t},`;
448-
str += `\n\t"postcss": {`;
449-
str += `\n\t\t"plugins": {`;
450-
str += `\n\t\t\t"autoprefixer": {}`;
451-
str += `\n\t\t}`;
452-
str += `\n\t},`;
453-
str += `\n\t"browserslist": [`;
454-
str += `\n\t\t"> 1%",`;
455-
str += `\n\t\t"last 2 versions",`;
456-
str += `\n\t\t"not ie <= 8"`;
457-
str += `\n\t]`;
458-
str += `\n}`;
471+
str += `\n\t}\n}`;
459472
fs.writeFileSync(path.join(location, "package.json"), str);
460473
},
461474
exportFile(data) {
@@ -468,12 +481,15 @@ export default {
468481
fs.mkdirSync(path.join(data, "src", "assets"));
469482
fs.mkdirSync(path.join(data, "src", "components"));
470483
fs.mkdirSync(path.join(data, "src", "views"));
484+
fs.mkdirSync(path.join(data, "src", "router"));
471485
}
472486
// creating basic boilerplate for vue app
473487
this.createIndexFile(data);
474488
this.createMainFile(data);
475-
this.createBabel(data);
489+
this.createViteConfig(data);
490+
this.createESLintRC(data);
476491
this.createTSConfig(data);
492+
this.createTSViteConfig(data);
477493
this.createPackage(data);
478494
// exports images to the /assets folder
479495
// eslint-disable-next-line no-unused-vars

0 commit comments

Comments
 (0)