Skip to content

Commit 7934fb1

Browse files
jbbakejbbake
authored
Merge pull request #31 from oslabs-beta/bryanmegan/typescript
Updated export project functionality
2 parents d4c8219 + 92c6302 commit 7934fb1

File tree

1 file changed

+91
-66
lines changed

1 file changed

+91
-66
lines changed

‎src/components/file_system_interface/ExportProject.vue

Lines changed: 91 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,83 +378,105 @@ 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);
391395
} else {
392-
fs.writeFileSync(path.join(location, "babel.config.js"), str);
396+
fs.writeFileSync(path.join(location, "vite.config.js"), str);
393397
}
394398
},
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+
},
395418
createTSConfig(location) {
396419
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}`;
420+
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},`;
421+
str += `\t"references": [\n`
422+
str += `\t\t{\n\t\t\t"path": "./tsconfig.vite-config.json"\n\t\t}\n\t]\n}`
398423
fs.writeFileSync(path.join(location, "tsconfig.json"), str);
399424
} else {
400425
return;
401426
}
402427
},
428+
createTSViteConfig(location) {
429+
if (this.exportAsTypescript === "on") {
430+
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}`;
431+
fs.writeFileSync(path.join(location, "tsconfig.vite-config.json"), str);
432+
} else {
433+
return;
434+
}
435+
},
436+
createTSDeclaration(location) {
437+
if (this.exportAsTypescript === "on") {
438+
let str = `/// <reference types="vite/client" />`;
439+
fs.writeFileSync(path.join(location, "env.d.ts"), str);
440+
} else {
441+
return;
442+
}
443+
},
403444
// create package.json file
404445
createPackage(location) {
405446
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,`;
447+
str += `\n\t"name": "My-OverVue-Project",`;
448+
str += `\n\t"version": "0.0.0",`;
409449
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"`;
450+
str += `\n\t\t"dev": "vite",`;
451+
if (this.exportAsTypescript === "on") {
452+
str += `\n\t\t"build": "vue-tsc --noEmit && vite build",`;
453+
str += `\n\t\t"typecheck": "vue-tsc --noEmit",`;
454+
str += `\n\t\t"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",`;
455+
} else {
456+
str += `\n\t\t"build": "vite build",`;
457+
str += `\n\t\t"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",`;
458+
}
459+
str += `\n\t\t"preview": "vite preview --port 5050"`;
413460
str += `\n\t},`;
414461
str += `\n\t"dependencies": {`;
415-
str += `\n\t\t"vue": "^3.2.26",`;
462+
str += `\n\t\t"vue": "^3.2.31",`;
416463
str += `\n\t\t"vue-router": "^4.0.12",`;
417464
str += `\n\t\t"vuex": "^4.0.2"`;
418465
str += `\n\t},`;
419466
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"`;
467+
str += `\n\t\t"@vitejs/plugin-vue": "^2.2.2",`;
468+
str += `\n\t\t"eslint": "^8.5.0",`;
469+
str += `\n\t\t"eslint-plugin-vue": "^8.2.0",`;
470+
str += `\n\t\t"vite": "^2.8.4"`
427471
if (this.exportAsTypescript === "on") {
428-
str += `,\n\t\t"@vue/tsconfig": "^0.1.3",`;
472+
str += `,\n\t\t"@rushstack/eslint-patch": "^1.1.0",`
473+
str += `\n\t\t"@vue/tsconfig": "^0.1.3",`;
429474
str += `\n\t\t"typescript": "~4.5.5",`;
430475
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?
476+
str += `\n\t\t"@types/node": "^16.11.25",`;
477+
str += `\n\t\t"@vue/eslint-config-typescript": "^10.0.0"`;
432478
}
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}`;
479+
str += `\n\t}\n}`;
459480
fs.writeFileSync(path.join(location, "package.json"), str);
460481
},
461482
exportFile(data) {
@@ -468,12 +489,16 @@ export default {
468489
fs.mkdirSync(path.join(data, "src", "assets"));
469490
fs.mkdirSync(path.join(data, "src", "components"));
470491
fs.mkdirSync(path.join(data, "src", "views"));
492+
fs.mkdirSync(path.join(data, "src", "router"));
471493
}
472494
// creating basic boilerplate for vue app
473495
this.createIndexFile(data);
474496
this.createMainFile(data);
475-
this.createBabel(data);
497+
this.createViteConfig(data);
498+
this.createESLintRC(data);
476499
this.createTSConfig(data);
500+
this.createTSViteConfig(data);
501+
this.createTSDeclaration(data);
477502
this.createPackage(data);
478503
// exports images to the /assets folder
479504
// eslint-disable-next-line no-unused-vars

0 commit comments

Comments
 (0)