Skip to content

Commit ceaf265

Browse files
dnohashidnohashi
authored
Merge pull request #32 from dnohashi/save
Save Project and Open Project services complete
2 parents eb8050a + 183a2d4 commit ceaf265

File tree

4 files changed

+577
-6
lines changed

4 files changed

+577
-6
lines changed

‎src/components/ExportProject.vue

Lines changed: 372 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,378 @@
44

55
<script>
66
// Where all of the boilerplate is exported
7-
// import { mapState } from "vuex";
8-
// const { remote } = require("electron");
9-
// import fs from "fs-extra";
10-
// import path from "path";
11-
// const ipc = require("electron").ipcRenderer;
7+
import { mapState } from "vuex";
8+
const { remote } = require("electron");
9+
import fs from "fs-extra";
10+
import path from "path";
11+
const ipc = require("electron").ipcRenderer;
1212
export default {
13+
<<<<<<< HEAD
14+
name: "ExportProjectComponent",
15+
16+
methods: {
17+
showExportDialog() {
18+
remote.dialog.showSaveDialog({
19+
title: 'Choose location to save folder in',
20+
defaultPath: remote.app.getPath('desktop'),
21+
message: 'Choose location to save folder in',
22+
nameFieldLabel: 'Application Name'
23+
},
24+
result => {
25+
this.exportFile(result);
26+
});
27+
},
28+
exportProject: function() {
29+
// ipc.send("show-export-dialog")
30+
this.showExportDialog();
31+
},
32+
/**
33+
* @description creates the router.js file
34+
* input: path to dir
35+
* invokes: createRouterImports(this.componentMap['App'].children),
36+
* createExport(this.componentMap['App'].children)
37+
* bug: this.componentMap['App'].children might have bad reference to state..
38+
* */
39+
createRouter(location) {
40+
fs.writeFileSync(
41+
path.join(location, "src", "router.js"),
42+
this.createRouterImports(this.componentMap["App"].children) +
43+
"\nVue.use(Router);\n" +
44+
this.createExport(this.componentMap["App"].children)
45+
);
46+
},
47+
/**
48+
* @description import routed components from the /views/ dir
49+
* @argument: this.componentMap['App'].children
50+
* bug: showing undefined in the import routes
51+
* fix: changing the child.componentName to child
52+
*/
53+
createRouterImports(appChildren) {
54+
let str = "import Vue from 'vue'\nimport Router from 'vue-router'\n";
55+
appChildren.forEach(child => {
56+
// console.log(`createRouterImports child: ${child}`);
57+
str += `import ${
58+
// child.componentName
59+
child
60+
} from './views/${
61+
// this reference to store state is buggy, returns undefined
62+
// import undefined from './views/undefined.vue'
63+
// child.componentName
64+
child
65+
}.vue'\n`;
66+
});
67+
return str;
68+
},
69+
/**
70+
* @description creates the `export default`
71+
* bug: path: '/undefined', name: 'undefined', component: undefined
72+
* issue: child.componentName returning undefined
73+
*/
74+
createExport(appChildren) {
75+
let str =
76+
"export default new Router({\n\tmode: 'history',\n\tbase: process.env.BASE_URL,\n\troutes: [\n";
77+
appChildren.forEach(child => {
78+
// console.log(`createExport child: ${child}`);
79+
// changed if/else: `child.componentName` to `name`
80+
if (child === "HomeView") {
81+
// console.log(`if createExport addChildren child.componentName${child.componentName}`);
82+
str += `\t\t{\n\t\t\tpath: '/',\n\t\t\tname:'${child}',\n\t\t\tcomponent:${child}\n\t\t},\n`;
83+
} else {
84+
// console.log(`else createExport addChildren child.componentName${child}`);
85+
str += `\t\t{\n\t\t\tpath: '/${child}',\n\t\t\tname:'${child}',\n\t\t\tcomponent: ${child}\n\t\t},\n`;
86+
}
87+
});
88+
str += `\t]\n})\n`;
89+
return str;
90+
},
91+
/**
92+
* @description
93+
* invokes: writeTemplate, writeScript, writeStyle
94+
* bug: name.componentName
95+
*/
96+
/*
97+
createComponentCode(
98+
componentLocation = path.join(data, 'src', 'views', componentName),
99+
componentName = componentName,
100+
children = this.componentMap[componentName].children
101+
)
102+
*/
103+
createComponentCode(componentLocation, componentName, children) {
104+
if (componentName === "App") {
105+
fs.writeFileSync(
106+
componentLocation + ".vue",
107+
this.writeTemplate(componentName, children) +
108+
this.writeStyle(componentName)
109+
);
110+
} else {
111+
fs.writeFileSync(
112+
componentLocation + ".vue",
113+
this.writeTemplate(componentName, children) +
114+
this.writeScript(componentName, children) +
115+
this.writeStyle(componentName)
116+
);
117+
}
118+
},
119+
/**
120+
* @description helper function for writeTemplate
121+
* @name writeTemplateTag
122+
* - gets objects from htmlList from appropriate component and adds them to the template string, then inserts into writeTemplate return str
123+
* @input: componentMap['component'].htmlList[tag elements]
124+
*/
125+
writeTemplateTag(compName) {
126+
console.log("writeTemplateTag invoked!");
127+
// create reference object
128+
const htmlElementMap = {
129+
div: ["<div>", "</div>"],
130+
button: ["<button>", "</button>"],
131+
form: ["<form>", "</form>"],
132+
img: ["<img>", ""],
133+
link: ['<a href="#"/>', ""],
134+
list: ["<li>", "</li>"],
135+
paragraph: ["<p>", "</p>"],
136+
"list-ol": ["<ol>", "</ol>"],
137+
"list-ul": ["<ul>", "</ul>"],
138+
input: ["<input />", ""],
139+
navbar: ["<nav>", "</nav>"]
140+
};
141+
// loop to iterate through compName arr
142+
let htmlArr = this.componentMap[compName].htmlList;
143+
let outputStr = "";
144+
for (let el of htmlArr) {
145+
outputStr += "\t\t";
146+
outputStr += htmlElementMap[el.text][0];
147+
outputStr += htmlElementMap[el.text][1];
148+
outputStr += `\n`;
149+
}
150+
console.log(`outputStr from writeTemplateTag: ${outputStr}`);
151+
return outputStr;
152+
},
153+
/*
154+
* @description creates the <router-link> boilerplate for /views/components
155+
* also creates the <template></template> tag for each component
156+
* changed name.componentName to name, name is the reference to the object name(?)
157+
* bug: name.componentName is a bad reference, something is wrong with it
158+
*/
159+
writeTemplate(compName, children) {
160+
let str = "";
161+
let htmlArr = this.componentMap[compName].htmlList;
162+
// for (let el of htmlArr) {
163+
// console.log(`el of htmlArr: ${el.text}`);
164+
// }
165+
if (compName === "App") {
166+
// console.log(`form if compName === 'App'`);
167+
// console.log(`children: ${children}`)
168+
str += `<div id="app">\n\t\t<div id="nav">\n`;
169+
children.forEach(name => {
170+
if (name === "HomeView") {
171+
// console.log(`HomeView if statement invoked!`);
172+
// console.log(`name: ${name}`);
173+
// console.log(`name.componentName: ${
174+
// // name.componentName
175+
// name
176+
// }`);
177+
str += `\t\t\t<router-link to="/">${
178+
// name.componentName
179+
name
180+
}</router-link>\n`;
181+
} else {
182+
// console.log(`else invoked`);
183+
// console.log(`name: ${name}`);
184+
str += `\t\t\t<router-link to="/${
185+
// name.componentName
186+
name
187+
}">${
188+
// name.componentName
189+
name
190+
}</router-link>\n`;
191+
}
192+
});
193+
str += "\t\t\t<router-view></router-view>\n\t\t</div>\n";
194+
} else {
195+
// console.log(`else (if compName === 'App'`);
196+
str += `<div>\n`;
197+
children.forEach(name => {
198+
str += `\t\t<${
199+
// name.componentName
200+
name
201+
}>\n\t\t</${
202+
// name.componentName
203+
name
204+
}>\n`;
205+
});
206+
}
207+
// writes the html tag boilerplate
208+
let templateTagStr = this.writeTemplateTag(compName);
209+
console.log(`templateTagStr: ${templateTagStr}`);
210+
let testStr = `<template>\n\t<div>\n${templateTagStr}\t</div>\n</template>`;
211+
console.log(`testStr: \n${testStr}`);
212+
return `<template>\n\t${str}${templateTagStr}\t</div>\n</template>`;
213+
},
214+
/**
215+
* changed name.componentName = name
216+
* @description imports child components into style
217+
*/
218+
writeScript(componentName, children) {
219+
let str = "";
220+
children.forEach(name => {
221+
str += `import ${name} from '@/components/${name}.vue';\n`;
222+
});
223+
let childrenComponentNames = "";
224+
children.forEach(name => {
225+
childrenComponentNames += `\t\t${name},\n`;
226+
});
227+
return `\n\n<script>\n${str}\nexport default {\n\tname: '${componentName}',\n\tcomponents: {\n${childrenComponentNames}\t}\n};\n<\/script>`;
228+
},
229+
/**
230+
* @description writes the <style> in vue component, if component is 'App', writes a shitton of css, else returns <style scoped
231+
*/
232+
writeStyle(componentName) {
233+
let style =
234+
componentName !== "App"
235+
? ""
236+
: `#app {\n\tfont-family: 'Avenir', Helvetica, Arial, sans-serif;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\ttext-align: center;\n\tcolor: #2c3e50;\n\tmargin-top: 60px;\n}\n`;
237+
return `\n\n<style scoped>\n${style}</style>`;
238+
},
239+
// creates index html
240+
createIndexFile(location) {
241+
let str = `<!DOCTYPE html>\n<html lang="en">\n\n<head>`;
242+
str += `\n\t<meta charset="utf-8">`;
243+
str += `\n\t<meta http-equiv="X-UA-Compatible" content="IE=edge">`;
244+
str += `\n\t<meta name="viewport" content="width=device-width,initial-scale=1.0">`;
245+
str += `\n\t<link rel="icon" href="<%= BASE_URL %>favicon.ico">`;
246+
str += `\n\t<title>vue-boiler-plate-routes</title>`;
247+
str += `\n</head>\n\n`;
248+
str += `<body>`;
249+
str += `\n\t<noscript>`;
250+
str += `\n\t\t<strong>We're sorry but vue-boiler-plate-routes doesn't work properly without JavaScript enabled. Please enable it
251+
to continue.</strong>`;
252+
str += `\n\t</noscript>`;
253+
str += `\n\t<div id="app"></div>`;
254+
str += `\n\t<!-- built files will be auto injected -->`;
255+
str += `\n</body>\n\n`;
256+
str += `</html>\n`;
257+
fs.writeFileSync(path.join(location, "public", "index.html"), str);
258+
},
259+
// creates main.js boilerplate
260+
createMainFile(location) {
261+
let str = `import Vue from 'vue'`;
262+
str += `\nimport App from './App.vue'`;
263+
str += `\nimport router from './router'`;
264+
str += `\n\nVue.config.productionTip = false`;
265+
str += `\n\nnew Vue({`;
266+
str += `\n\trouter,`;
267+
str += `\n\trender: h => h(App)`;
268+
str += `\n}).$mount('#app')`;
269+
fs.writeFileSync(path.join(location, "src", "main.js"), str);
270+
},
271+
// create babel file
272+
createBabel(location) {
273+
let str = `module.exports = {`;
274+
str += `\n\tpresets: [`;
275+
str += `\n\t\t'@vue/app'`;
276+
str += `\n\t]`;
277+
str += `\n}`;
278+
fs.writeFileSync(path.join(location, "babel.config.js"), str);
279+
},
280+
// create package.json file
281+
createPackage(location) {
282+
let str = `{`;
283+
str += `\n\t"name": "vue-boiler-plate-routes",`;
284+
str += `\n\t"version": "0.1.0",`;
285+
str += `\n\t"private": true,`;
286+
str += `\n\t"scripts": {`;
287+
str += `\n\t\t"start": "vue-cli-service serve",`;
288+
str += `\n\t\t"build": "vue-cli-service build",`;
289+
str += `\n\t\t"lint": "vue-cli-service lint"`;
290+
str += `\n\t},`;
291+
str += `\n\t"dependencies": {`;
292+
str += `\n\t\t"vue": "^2.6.6",`;
293+
str += `\n\t\t"vue-router": "^3.0.1"`;
294+
str += `\n\t},`;
295+
str += `\n\t"devDependencies": {`;
296+
str += `\n\t\t"@vue/cli-plugin-babel": "^3.5.0",`;
297+
str += `\n\t\t"@vue/cli-plugin-eslint": "^3.5.0",`;
298+
str += `\n\t\t"@vue/cli-service": "^3.5.0",`;
299+
str += `\n\t\t"babel-eslint": "^10.0.1",`;
300+
str += `\n\t\t"eslint": "^5.8.0",`;
301+
str += `\n\t\t"eslint-plugin-vue": "^5.0.0",`;
302+
str += `\n\t\t"vue-template-compiler": "^2.5.21"`;
303+
str += `\n\t},`;
304+
str += `\n\t"eslintConfig": {`;
305+
str += `\n\t\t"root": true,`;
306+
str += `\n\t\t"env": {`;
307+
str += `\n\t\t\t"node": true`;
308+
str += `\n\t\t},`;
309+
str += `\n\t\t"extends": [`;
310+
str += `\n\t\t\t"plugin:vue/essential",`;
311+
str += `\n\t\t\t"eslint:recommended"`;
312+
str += `\n\t\t],`;
313+
str += `\n\t\t"rules": {},`;
314+
str += `\n\t\t"parserOptions": {`;
315+
str += `\n\t\t\t"parser": "babel-eslint"`;
316+
str += `\n\t\t}`;
317+
str += `\n\t},`;
318+
str += `\n\t"postcss": {`;
319+
str += `\n\t\t"plugins": {`;
320+
str += `\n\t\t\t"autoprefixer": {}`;
321+
str += `\n\t\t}`;
322+
str += `\n\t},`;
323+
str += `\n\t"browserslist": [`;
324+
str += `\n\t\t"> 1%",`;
325+
str += `\n\t\t"last 2 versions",`;
326+
str += `\n\t\t"not ie <= 8"`;
327+
str += `\n\t]`;
328+
str += `\n}`;
329+
fs.writeFileSync(path.join(location, "package.json"), str);
330+
},
331+
exportFile(data){
332+
if (!fs.existsSync(data)) {
333+
fs.mkdirSync(data);
334+
console.log("FOLDER CREATED!");
335+
// console.log(`data: ${data}`); // displays the directory path
336+
fs.mkdirSync(path.join(data, "public"));
337+
fs.mkdirSync(path.join(data, "src"));
338+
fs.mkdirSync(path.join(data, "src", "assets"));
339+
fs.mkdirSync(path.join(data, "src", "components"));
340+
fs.mkdirSync(path.join(data, "src", "views"));
341+
}
342+
// creating basic boilerplate for vue app
343+
this.createIndexFile(data);
344+
this.createMainFile(data);
345+
this.createBabel(data);
346+
this.createPackage(data);
347+
// main logic below for creating components?
348+
this.createRouter(data);
349+
for (let componentName in this.componentMap) {
350+
if (componentName !== "App") {
351+
if (this.$store.state.routes[componentName]) {
352+
this.createComponentCode(
353+
path.join(data, "src", "views", componentName),
354+
componentName,
355+
this.componentMap[componentName].children
356+
);
357+
} else {
358+
this.createComponentCode(
359+
path.join(data, "src", "components", componentName),
360+
componentName,
361+
this.componentMap[componentName].children
362+
);
363+
}
364+
} else {
365+
this.createComponentCode(
366+
path.join(data, "src", componentName),
367+
componentName,
368+
this.componentMap[componentName].children
369+
);
370+
}
371+
}
372+
}
373+
},
374+
computed: {
375+
...mapState(["componentMap"])
376+
}
377+
};
378+
=======
13379
name: 'ExportProjectComponent'
14380
}
15381
// methods: {
@@ -374,6 +740,7 @@ export default {
374740
// ...mapState(["componentMap"])
375741
// }
376742
// };
743+
>>>>>>> eb8050a746b97da8fd27a59e01d6b8cd4cac0516
377744
</script>
378745

379746
<style>

0 commit comments

Comments
 (0)