Skip to content

Commit 758b6ec

Browse files
raclimraclim
authored
Merge pull request #3636 from clairep94/pr05/setup_server_ts_deps
pr05 Typescript Migration #10: Setup Server TS Dependencies & migrate instance of server file
2 parents 397f65b + b6a1f95 commit 758b6ec

File tree

16 files changed

+130
-50
lines changed

16 files changed

+130
-50
lines changed

‎client/tsconfig.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,6 @@
66
"lib": ["DOM", "ESNext"],
77
"jsx": "react",
88
},
9+
"include": ["./**/*"],
10+
"exclude": ["../node_modules", "../server"]
911
}

‎index.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
if (process.env.NODE_ENV === 'production') {
2-
process.env.webpackAssets = JSON.stringify(require('./dist/static/manifest.json'));
2+
process.env.webpackAssets = JSON.stringify(
3+
require('./dist/static/manifest.json')
4+
);
35
require('./dist/server.bundle.js');
46
require('./dist/previewServer.bundle.js');
57
} else {
68
let parsed = require('dotenv').config();
79
require('@babel/register')({
8-
presets: ["@babel/preset-env"]
10+
extensions: ['.js', '.jsx', '.ts', '.tsx'],
11+
presets: ['@babel/preset-env', '@babel/preset-typescript']
912
});
1013
require('regenerator-runtime/runtime');
1114
//// in development, let .env values override those in the environment already (i.e. in docker-compose.yml)

‎nodemon.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@
1212
"env": {
1313
"NODE_ENV": "development"
1414
},
15-
"ext": "js json"
15+
"ext": "js ts json"
1616
}

‎package.json‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,9 @@
2727
"storybook:build:css": "sass client/styles/main.scss client/styles/storybook.css",
2828
"storybook": "npm run storybook:build:css && storybook dev -p 6006",
2929
"build-storybook": "storybook build",
30-
"typecheck": "npm run typecheck:client",
31-
"typecheck:client": "npx tsc --noEmit -p ./client/tsconfig.json"
30+
"typecheck": "npm run typecheck:client && npm run typecheck:server",
31+
"typecheck:client": "npx tsc --noEmit -p ./client/tsconfig.json",
32+
"typecheck:server": "npx tsc --noEmit -p ./server/tsconfig.json"
3233
},
3334
"husky": {
3435
"hooks": {
@@ -45,6 +46,15 @@
4546
{
4647
"displayName": "server",
4748
"testEnvironment": "node",
49+
"transform": {
50+
"^.+\\.[jt]sx?$": "babel-jest"
51+
},
52+
"moduleFileExtensions": [
53+
"ts",
54+
"js",
55+
"json",
56+
"node"
57+
],
4858
"setupFilesAfterEnv": [
4959
"<rootDir>/server/jest.setup.js"
5060
],

‎server/controllers/project.controller.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import slugify from 'slugify';
99
import Project from '../models/project';
1010
import User from '../models/user';
1111
import { resolvePathToFile } from '../utils/filePath';
12-
import generateFileSystemSafeName from '../utils/generateFileSystemSafeName';
12+
import { generateFileSystemSafeName } from '../utils/generateFileSystemSafeName';
1313

1414
export {
1515
default as createProject,

‎server/previewServer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import webpackHotMiddleware from '@gatsbyjs/webpack-hot-middleware';
88
import config from '../webpack/config.dev';
99
import embedRoutes from './routes/embed.routes';
1010
import assetRoutes from './routes/asset.routes';
11-
import renderPreviewIndex from './views/previewIndex';
11+
import { renderPreviewIndex } from './views/previewIndex';
1212

1313
const app = new Express();
1414

‎server/routes/server.routes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Router } from 'express';
2-
import sendHtml, { renderIndex, renderProjectIndex } from '../views/index';
2+
import { sendHtml, renderIndex, renderProjectIndex } from '../views/index';
33
import { userExists } from '../controllers/user.controller';
44
import {
55
projectExists,

‎server/tsconfig.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "../tsconfig.base.json",
3+
"compilerOptions": {
4+
"target": "ES2022",
5+
"module": "commonjs",
6+
"lib": ["ES2022"],
7+
"types": ["node", "jest"]
8+
},
9+
"include": ["./**/*"],
10+
"exclude": ["../node_modules", "../client"]
11+
}

‎server/utils/generateFileSystemSafeName.js‎ renamed to ‎server/utils/generateFileSystemSafeName.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
/**
2-
* generate file system safe string for a given string
2+
* generate file system safe string for a given name
33
* that can be used as a valid file name
44
* in all operating systems
5-
* @param {String} string
5+
* @param {String} originalName
66
* @param {String} replacer (optional) character to replace invalid characters
77
*/
8-
function generateFileSystemSafeName(string, replacer) {
8+
export function generateFileSystemSafeName(
9+
originalName: string,
10+
replacer: string
11+
) {
912
// from here https://serverfault.com/a/242134
1013
const INVALID_CHARS_REGEX = /[*/?:\\<>|"\u0000-\u001F]/g; // eslint-disable-line
11-
const slug = string.replace(INVALID_CHARS_REGEX, replacer || '');
14+
const slug = originalName.replace(INVALID_CHARS_REGEX, replacer || '');
1215

1316
return slug;
1417
}
15-
16-
export default generateFileSystemSafeName;

‎server/views/index.js‎ renamed to ‎server/views/index.ts‎

Lines changed: 80 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import { Request, Response } from 'express';
12
import get404Sketch from './404Page';
23

34
export function renderIndex() {
4-
const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
5+
const assetsManifest =
6+
process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
57
return `
68
<!DOCTYPE html>
79
<html lang="en">
@@ -11,7 +13,11 @@ export function renderIndex() {
1113
<meta name="keywords" content="p5.js, p5.js web editor, web editor, processing, code editor" />
1214
<meta name="description" content="A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners." />
1315
<title>p5.js Web Editor</title>
14-
${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
16+
${
17+
process.env.NODE_ENV === 'production'
18+
? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />`
19+
: ''
20+
}
1521
<link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
1622
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
1723
<link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' / >
@@ -25,31 +31,54 @@ export function renderIndex() {
2531
window.process.env.API_URL = '${process.env.API_URL}';
2632
window.process.env.NODE_ENV = '${process.env.NODE_ENV}';
2733
window.process.env.S3_BUCKET = '${process.env.S3_BUCKET}';
28-
window.process.env.S3_BUCKET_URL_BASE = ${process.env.S3_BUCKET_URL_BASE ? `'${process.env.S3_BUCKET_URL_BASE}'` : undefined};
34+
window.process.env.S3_BUCKET_URL_BASE = ${
35+
process.env.S3_BUCKET_URL_BASE
36+
? `'${process.env.S3_BUCKET_URL_BASE}'`
37+
: undefined
38+
};
2939
window.process.env.AWS_REGION = '${process.env.AWS_REGION}';
30-
window.process.env.FORCE_TO_HTTPS = ${process.env.FORCE_TO_HTTPS === 'false' ? false : undefined};
40+
window.process.env.FORCE_TO_HTTPS = ${
41+
process.env.FORCE_TO_HTTPS === 'false' ? false : undefined
42+
};
3143
window.process.env.CLIENT = true;
32-
window.process.env.LOGIN_ENABLED = ${process.env.LOGIN_ENABLED === 'false' ? false : true};
33-
window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
34-
window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
35-
window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
36-
window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
37-
window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false};
44+
window.process.env.LOGIN_ENABLED = ${
45+
process.env.LOGIN_ENABLED !== 'false'
46+
};
47+
window.process.env.EXAMPLES_ENABLED = ${
48+
process.env.EXAMPLES_ENABLED !== 'false'
49+
};
50+
window.process.env.UI_ACCESS_TOKEN_ENABLED = ${
51+
process.env.UI_ACCESS_TOKEN_ENABLED !== 'false'
52+
};
53+
window.process.env.UI_COLLECTIONS_ENABLED = ${
54+
process.env.UI_COLLECTIONS_ENABLED !== 'false'
55+
};
56+
window.process.env.UPLOAD_LIMIT = ${
57+
process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined
58+
};
59+
window.process.env.TRANSLATIONS_ENABLED = ${
60+
process.env.TRANSLATIONS_ENABLED === 'true'
61+
};
3862
window.process.env.PREVIEW_URL = '${process.env.PREVIEW_URL}';
3963
window.process.env.GA_MEASUREMENT_ID='${process.env.GA_MEASUREMENT_ID}';
4064
</script>
4165
</head>
4266
<body>
4367
<div id="root" class="root-app">
4468
</div>
45-
<script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
69+
<script src='${
70+
process.env.NODE_ENV === 'production'
71+
? `${assetsManifest['/app.js']}`
72+
: '/app.js'
73+
}'></script>
4674
</body>
4775
</html>
4876
`;
4977
}
5078

51-
export function renderProjectIndex(username, projectName) {
52-
const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
79+
export function renderProjectIndex(username: string, projectName: string) {
80+
const assetsManifest =
81+
process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
5382
return `
5483
<!DOCTYPE html>
5584
<html lang="en">
@@ -59,7 +88,11 @@ export function renderProjectIndex(username, projectName) {
5988
<meta name="keywords" content="p5.js, p5.js web editor, web editor, processing, code editor" />
6089
<meta name="description" content="A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners." />
6190
<title>${`${projectName} by ${username} -`}p5.js Web Editor</title>
62-
${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
91+
${
92+
process.env.NODE_ENV === 'production'
93+
? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />`
94+
: ''
95+
}
6396
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
6497
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
6598
<link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' / >
@@ -73,24 +106,46 @@ export function renderProjectIndex(username, projectName) {
73106
window.process.env.API_URL = '${process.env.API_URL}';
74107
window.process.env.NODE_ENV = '${process.env.NODE_ENV}';
75108
window.process.env.S3_BUCKET = '${process.env.S3_BUCKET}';
76-
window.process.env.S3_BUCKET_URL_BASE = ${process.env.S3_BUCKET_URL_BASE ? `'${process.env.S3_BUCKET_URL_BASE}'` : undefined};
109+
window.process.env.S3_BUCKET_URL_BASE = ${
110+
process.env.S3_BUCKET_URL_BASE
111+
? `'${process.env.S3_BUCKET_URL_BASE}'`
112+
: undefined
113+
};
77114
window.process.env.AWS_REGION = '${process.env.AWS_REGION}';
78-
window.process.env.FORCE_TO_HTTPS = ${process.env.FORCE_TO_HTTPS === 'false' ? false : undefined};
115+
window.process.env.FORCE_TO_HTTPS = ${
116+
process.env.FORCE_TO_HTTPS === 'false' ? false : undefined
117+
};
79118
window.process.env.CLIENT = true;
80-
window.process.env.LOGIN_ENABLED = ${process.env.LOGIN_ENABLED === 'false' ? false : true};
81-
window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
82-
window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
83-
window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
84-
window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
85-
window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false};
119+
window.process.env.LOGIN_ENABLED = ${
120+
process.env.LOGIN_ENABLED !== 'false'
121+
};
122+
window.process.env.EXAMPLES_ENABLED = ${
123+
process.env.EXAMPLES_ENABLED !== 'false'
124+
};
125+
window.process.env.UI_ACCESS_TOKEN_ENABLED = ${
126+
process.env.UI_ACCESS_TOKEN_ENABLED !== 'false'
127+
};
128+
window.process.env.UI_COLLECTIONS_ENABLED = ${
129+
process.env.UI_COLLECTIONS_ENABLED !== 'false'
130+
};
131+
window.process.env.UPLOAD_LIMIT = ${
132+
process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined
133+
};
134+
window.process.env.TRANSLATIONS_ENABLED = ${
135+
process.env.TRANSLATIONS_ENABLED === 'true'
136+
};
86137
window.process.env.PREVIEW_URL = '${process.env.PREVIEW_URL}';
87138
window.process.env.GA_MEASUREMENT_ID='${process.env.GA_MEASUREMENT_ID}';
88139
</script>
89140
</head>
90141
<body>
91142
<div id="root" class="root-app">
92143
</div>
93-
<script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
144+
<script src='${
145+
process.env.NODE_ENV === 'production'
146+
? `${assetsManifest['/app.js']}`
147+
: '/app.js'
148+
}'></script>
94149
</body>
95150
</html>
96151
`;
@@ -102,12 +157,12 @@ export function renderProjectIndex(username, projectName) {
102157
* @param {import('express').e.Response} res
103158
* @param {boolean} [exists]
104159
*/
105-
export default async function sendHtml(req, res, exists = true) {
160+
export async function sendHtml(req: Request, res: Response, exists = true) {
106161
if (!exists) {
107162
res.status(404);
108163
const html = await get404Sketch();
109164
res.send(html);
110165
} else {
111166
res.send(renderIndex());
112167
}
113-
};
168+
}

0 commit comments

Comments
 (0)