Skip to content

Commit 6473582

Browse files
aw2934aw2934
committed
export in gatsby mode now creates fully functional gatsby application
1 parent f13ce70 commit 6473582

File tree

3 files changed

+212
-1
lines changed

3 files changed

+212
-1
lines changed

‎app/src/utils/createGatsbyApp.util.ts

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
// Create all files necessary to run a gatsby.js application
2+
3+
import createGatsbyFiles from './createGatsbyFiles.util';
4+
import { Component } from '../interfaces/Interfaces';
5+
6+
const camelToKebab= (camel:string) => {
7+
return camel.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
8+
};
9+
10+
const compToCSS = (component: Component) => {
11+
const name = component.name;
12+
const styleObj = component.style;
13+
let cssClass = `
14+
.${name} {
15+
`;
16+
Object.keys(styleObj).forEach(property => {
17+
let cssStyle = `${camelToKebab(property)}: ${styleObj[property]};
18+
`;
19+
cssClass += cssStyle;
20+
})
21+
cssClass += `}
22+
`;
23+
return cssClass;
24+
}
25+
26+
//createPackage
27+
export const createPackage = (path, appName) => {
28+
const filePath = `${path}/${appName}/package.json`;
29+
const data = `
30+
{
31+
"name": "reactype-gatsby",
32+
"version": "1.0.0",
33+
"description": "",
34+
"scripts": {
35+
"dev": "gatsby develop",
36+
"build": "gatsby build",
37+
"start": "npm run dev"
38+
},
39+
"dependencies": {
40+
"gatsby": "^2.26.1",
41+
"react": "16.13.1",
42+
"react-dom": "16.13.1"
43+
},
44+
"devDependencies": {
45+
"@types/node": "^14.0.20",
46+
"@types/react": "^16.9.41",
47+
"typescript": "^3.9.6"
48+
}
49+
}
50+
`;
51+
window.api.writeFile(filePath, data, err => {
52+
if (err) {
53+
console.log('package.json error:', err.message);
54+
} else {
55+
console.log('package.json written successfully');
56+
}
57+
});
58+
};
59+
//createTSConfig (empty)
60+
export const createTsConfig = (path, appName) => {
61+
const filePath = `${path}/${appName}/tsconfig.json`;
62+
//running 'gatsby dev' will autopopulate this with default values
63+
window.api.writeFile(filePath, '', err => {
64+
if (err) {
65+
console.log('TSConfig error:', err.message);
66+
} else {
67+
console.log('TSConfig written successfully');
68+
}
69+
});
70+
};
71+
72+
//createDefaultCSS
73+
export const createDefaultCSS = (path, appName, components) => {
74+
const filePath = `${path}/${appName}/global.css`;
75+
let data = `
76+
#__gatsby div {
77+
box-sizing: border-box;
78+
width: 100%;
79+
border: 1px solid rgba(0,0,0,0.25);
80+
padding: 12px;
81+
text-align: center;
82+
font-family: Helvetica, Arial;
83+
}
84+
`;
85+
components.forEach(comp => {
86+
data += compToCSS(comp);
87+
})
88+
window.api.writeFile(filePath, data, err => {
89+
if (err) {
90+
console.log('global.css error:', err.message);
91+
} else {
92+
console.log('global.css written successfully');
93+
}
94+
});
95+
}
96+
97+
export const initFolders = (path:string, appName: string) => {
98+
let dir = path;
99+
let dirPages;
100+
let dirComponents;
101+
dir = `${dir}/${appName}`;
102+
if (!window.api.existsSync(dir)) {
103+
window.api.mkdirSync(dir);
104+
window.api.mkdirSync(`${dir}/src`)
105+
dirPages = `${dir}/src/pages`;
106+
window.api.mkdirSync(dirPages);
107+
dirComponents = `${dir}/src/components`;
108+
window.api.mkdirSync(dirComponents);
109+
}
110+
};
111+
112+
//createBaseTsx
113+
export const createBaseTsx = (path, appName) => {
114+
115+
const filePath:string = `${path}/${appName}/src/pages/_app.tsx`;
116+
const data:string = `
117+
import React from 'react';
118+
import '../global.css';
119+
120+
const Base = ({ Component }):JSX.Element => {
121+
return (
122+
<>
123+
<Component />
124+
</>
125+
)
126+
}
127+
128+
export default Base;
129+
`;
130+
window.api.writeFile(filePath, data, err => {
131+
if (err) {
132+
console.log('_app.tsx error:', err.message);
133+
} else {
134+
console.log('_app.tsx written successfully');
135+
}
136+
});
137+
};
138+
139+
async function createGatsbyAppUtil({
140+
path,
141+
appName,
142+
components,
143+
rootComponents
144+
}: {
145+
path: string;
146+
appName: string;
147+
components: Component[];
148+
rootComponents: number[];
149+
}) {
150+
console.log('in the createGatsbyApplication util');
151+
152+
await initFolders(path, appName);
153+
await createBaseTsx(path, appName);
154+
await createDefaultCSS(path, appName, components);
155+
await createPackage(path, appName);
156+
await createTsConfig(path, appName);
157+
await createGatsbyFiles(components, path, appName, rootComponents);
158+
159+
}
160+
export default createGatsbyAppUtil;

‎app/src/utils/createGatsbyFiles.util.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// Create all component files for a Gatsby.js application
2+
// this function is identical to the Next.js function
3+
// "Root" level components are stored in a pages directory
4+
// all other components will be in a components directory
5+
6+
import { Component } from '../interfaces/Interfaces';
7+
8+
const isRoot = (component: Component, rootArray: number[]) => {
9+
return rootArray.includes(component.id) ? true : false;
10+
};
11+
12+
const createGatsbyFiles = (
13+
components: Component[],
14+
path: string,
15+
appName: string,
16+
rootComponents: number[]
17+
) => {
18+
let dir = path;
19+
dir = `${dir}/${appName}`;
20+
21+
const promises: Array<any> = [];
22+
components.forEach((component: Component) => {
23+
let code: string;
24+
let fileName: string;
25+
if (isRoot(component, rootComponents)) {
26+
if (component.id === 1) {
27+
// first root component must be index.tsx
28+
fileName = `${dir}/src/pages/index.tsx`;
29+
} else {
30+
fileName = `${dir}/src/pages/${component.name}.tsx`;
31+
}
32+
} else {
33+
fileName = `${dir}/src/components/${component.name}.tsx`;
34+
}
35+
const newPromise = new Promise((resolve, reject) => {
36+
window.api.writeFileSync(fileName, component.code, (err: any) => {
37+
if (err) return reject(err.message);
38+
return resolve(path);
39+
});
40+
});
41+
42+
promises.push(newPromise);
43+
});
44+
return Promise.all(promises);
45+
};
46+
47+
export default createGatsbyFiles;

‎app/src/utils/exportProject.util.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import createApplicationUtil from './createApplication.util';
22
import createNextApp from './createNextApp.util';
33
import createFiles from './createFiles.util';
4+
import createGatsbyApp from './createGatsbyApp.util';
45

56
// When a user clicks the "Export project" function from the app, this function is invoked
67
const exportProject = (
@@ -20,10 +21,13 @@ const exportProject = (
2021
else if (genOption === 0) {
2122
createFiles(components, path, appName, false);
2223
} // Create fully functional Next.js and Gatsby.js application files
23-
else if (genOption === 1 && (projectType === 'Next.js' || projectType === 'Gatsby.js')) {
24+
else if (genOption === 1 && projectType === 'Next.js') {
2425
createNextApp({ path, appName, components, rootComponents }).catch(err =>
2526
console.log(err)
2627
);
28+
} else if (genOption === 1 && projectType === 'Gatsby.js') {
29+
createGatsbyApp({ path, appName, components, rootComponents }).catch(err =>
30+
console.log(err));
2731
}
2832
};
2933

0 commit comments

Comments
 (0)