Skip to content

Commit de014d4

Browse files
author
Ives van Hoorne
committed
Fix react-ts zip creation
1 parent 49f764b commit de014d4

File tree

3 files changed

+38
-69
lines changed

3 files changed

+38
-69
lines changed

‎packages/app/src/app/store/providers/Utils/create-zip/create-react-app-typescript/files.zip‎

9.16 KB
Binary file not shown.

‎packages/app/src/app/store/providers/Utils/create-zip/create-react-app-typescript/index.js‎

Lines changed: 37 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -8,94 +8,62 @@ import {
88
createDirectoryWithFiles,
99
} from '../';
1010

11-
const getHTML = (modules, resources) =>
12-
`<!doctype html>
13-
<html lang="en">
14-
<head>
15-
<meta charset="utf-8">
16-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
17-
<meta name="theme-color" content="#000000">
18-
<!--
19-
manifest.json provides metadata used when your web app is added to the
20-
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
21-
-->
22-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
23-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
24-
<!--
25-
Notice the use of %PUBLIC_URL% in the tags above.
26-
It will be replaced with the URL of the \`public\` folder during the build.
27-
Only files inside the \`public\` folder can be referenced from the HTML.
11+
/**
12+
* Add necessary scripts to package.json if they don't exist
13+
* @param {*} module
14+
*/
15+
function alterPackageJSON(module: Module) {
16+
try {
17+
const parsed = JSON.parse(module.code);
2818

29-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
30-
work correctly both with client-side routing and a non-root public URL.
31-
Learn how to configure a non-root public URL by running \`npm run build\`.
32-
-->
33-
<title>React App</title>
34-
${resources.map(getResourceTag).join('\n')}
35-
</head>
36-
<body>
37-
${getIndexHtmlBody(modules)}
38-
<!--
39-
This HTML file is a template.
40-
If you open it directly in the browser, you will see an empty page.
19+
if (!parsed.scripts || !parsed.scripts.start) {
20+
parsed.scripts = parsed.scripts || {};
4121

42-
You can add webfonts, meta tags, or analytics to this file.
43-
The build step will place the bundled scripts into the <body> tag.
22+
parsed.scripts.start = parsed.scripts.start || 'react-scripts-ts start';
23+
parsed.scripts.build = parsed.scripts.build || 'react-scripts-ts build';
24+
parsed.scripts.test =
25+
parsed.scripts.test || 'react-scripts-ts test --env=jsdom';
26+
parsed.scripts.eject = parsed.scripts.eject || 'react-scripts-ts eject';
27+
}
4428

45-
To begin the development, run \`npm start\` or \`yarn start\`.
46-
To create a production bundle, use \`npm run build\` or \`yarn build\`.
47-
-->
48-
</body>
49-
</html>
50-
`;
29+
if (
30+
!parsed.dependencies ||
31+
!parsed.dependencies['react-scripts-ts'] ||
32+
(!parsed.devDependencies || !parsed.devDependencies['react-scripts-ts'])
33+
) {
34+
parsed.dependencies['react-scripts-ts'] = '^2.13.0';
35+
}
36+
37+
return { ...module, code: JSON.stringify(parsed, null, 2) };
38+
} catch (e) {
39+
return module;
40+
}
41+
}
5142

5243
export default function createZip(
5344
zip,
5445
sandbox: Sandbox,
5546
modules: Array<Module>,
5647
directories: Array<Directory>
5748
) {
58-
return zip.loadAsync(files).then(async srcFolder => {
59-
const src = srcFolder.folder('src');
60-
49+
return zip.loadAsync(files).then(async src => {
6150
await Promise.all(
6251
modules
6352
.filter(x => x.directoryShortid == null)
64-
.filter(x => x.title !== 'index.html') // This will be included in the body
65-
.map(x => createFile(x, src))
53+
.filter(x => x.title !== 'yarn.lock' && x.title !== 'package-lock.json')
54+
.map(x => {
55+
if (x.title === 'package.json' && x.directoryShortid == null) {
56+
createFile(alterPackageJSON(x), src);
57+
} else {
58+
createFile(x, src);
59+
}
60+
})
6661
);
6762

6863
await Promise.all(
6964
directories
7065
.filter(x => x.directoryShortid == null)
7166
.map(x => createDirectoryWithFiles(modules, directories, x, src))
7267
);
73-
74-
const publicFolder = zip.folder('public');
75-
76-
publicFolder.file(
77-
'index.html',
78-
getHTML(modules, sandbox.externalResources)
79-
);
80-
81-
zip.file(
82-
'package.json',
83-
createPackageJSON(
84-
sandbox,
85-
{
86-
'@types/jest': '^20.0.8',
87-
'@types/node': '^8.0.28',
88-
},
89-
{
90-
'react-scripts-ts': '2.6.0',
91-
},
92-
{
93-
start: 'react-scripts-ts start',
94-
build: 'react-scripts-ts build',
95-
test: 'react-scripts-ts test --env=jsdom',
96-
eject: 'react-scripts-ts eject',
97-
}
98-
)
99-
);
10068
});
10169
}

‎packages/app/src/app/store/providers/Utils/create-zip/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ export async function createZip(
146146

147147
if (
148148
sandbox.template !== vue.name &&
149+
sandbox.template !== reactTs.name &&
149150
directories.find(m => m.title === 'src' && m.directoryShortid == null)
150151
) {
151152
// This is a full project, with all files already in there. We need to create

0 commit comments

Comments
 (0)