Skip to content

Commit f116396

Browse files
CompuIvesCompuIves
committed
More TypeScript
1 parent e53862f commit f116396

File tree

6 files changed

+78
-67
lines changed

6 files changed

+78
-67
lines changed

‎packages/app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"@types/react-dom": "^16.0.11",
4848
"@types/react-icons": "2.2.7",
4949
"@types/resolve": "^0.0.8",
50+
"@types/socket.io-client": "^1.4.32",
5051
"@types/styled-components": "^4.1.6",
5152
"autoprefixer": "8.5.0",
5253
"babel-core": "7.0.0-bridge.0",

‎packages/app/src/app/components/CodeEditor/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export type Settings = {
1111
autoCompleteEnabled: boolean;
1212
autoDownloadTypes: boolean;
1313
codeMirror: boolean;
14+
clearConsoleEnabled: boolean;
1415
fontFamily?: string;
1516
fontSize: number;
1617
lineHeight: number;
@@ -21,6 +22,7 @@ export type Settings = {
2122
forceRefresh: boolean;
2223
experimentVSCode: boolean;
2324
prettierConfig: Object;
25+
zenMode: boolean;
2426
};
2527

2628
type ModuleTab = {

packages/app/src/app/components/Preview/elements.js renamed to packages/app/src/app/components/Preview/elements.ts

File renamed without changes.

packages/app/src/app/components/Preview/index.js renamed to packages/app/src/app/components/Preview/index.tsx

Lines changed: 69 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// @flow
22
import * as React from 'react';
3-
import type { Sandbox, Module } from 'common/lib/types';
3+
import { Sandbox, Module } from 'common/lib/types';
44
import { listen, dispatch, registerFrame, resetState } from 'codesandbox-api';
55
import { debounce } from 'lodash-es';
66
import io from 'socket.io-client';
@@ -15,54 +15,59 @@ import { generateFileFromSandbox } from 'common/lib/templates/configuration/pack
1515

1616
import Navigator from './Navigator';
1717
import { Container, StyledFrame, Loading } from './elements';
18-
import type { Settings } from '../CodeEditor/types';
18+
import { Settings } from '../CodeEditor/types';
1919

2020
type Props = {
21-
onInitialized: (preview: BasePreview) => void, // eslint-disable-line no-use-before-define
22-
sandbox: Sandbox,
23-
extraModules: { [path: string]: { code: string, path: string } },
24-
currentModule: Module,
25-
settings: Settings,
26-
initialPath: string,
27-
isInProjectView: boolean,
28-
onClearErrors: () => void,
29-
onAction: (action: Object) => void,
30-
onOpenNewWindow: () => void,
31-
onToggleProjectView: () => void,
32-
isResizing: boolean,
33-
alignRight: () => void,
34-
alignBottom: () => void,
35-
onResize?: (height: number) => void,
36-
showNavigation?: boolean,
37-
inactive?: boolean,
38-
dragging?: boolean,
39-
hide: boolean,
40-
noPreview: boolean,
41-
alignDirection?: 'right' | 'bottom',
42-
delay?: number,
43-
setServerStatus?: (status: string) => void,
44-
syncSandbox?: (updates: any) => void,
21+
onInitialized: (preview: BasePreview) => (() => void); // eslint-disable-line no-use-before-define
22+
sandbox: Sandbox;
23+
extraModules: { [path: string]: { code: string; path: string } };
24+
currentModule: Module;
25+
settings: Settings;
26+
initialPath: string;
27+
isInProjectView: boolean;
28+
onClearErrors: () => void;
29+
onAction: (action: Object) => void;
30+
onOpenNewWindow: () => void;
31+
onToggleProjectView: () => void;
32+
isResizing: boolean;
33+
alignRight: () => void;
34+
alignBottom: () => void;
35+
onResize?: (height: number) => void;
36+
showNavigation?: boolean;
37+
inactive?: boolean;
38+
dragging?: boolean;
39+
hide: boolean;
40+
noPreview: boolean;
41+
alignDirection?: 'right' | 'bottom';
42+
delay?: number;
43+
setServerStatus?: (status: string) => void;
44+
syncSandbox?: (updates: any) => void;
45+
className?: string;
4546
};
4647

4748
type State = {
48-
frameInitialized: boolean,
49-
history: Array<string>,
50-
historyPosition: number,
51-
urlInAddressBar: string,
52-
url: ?string,
53-
overlayMessage: ?string,
54-
hibernated: boolean,
55-
sseError: boolean,
56-
showScreenshot: boolean,
49+
frameInitialized: boolean;
50+
history: Array<string>;
51+
historyPosition: number;
52+
urlInAddressBar: string;
53+
url: string | undefined;
54+
overlayMessage: string | undefined;
55+
hibernated: boolean;
56+
sseError: boolean;
57+
showScreenshot: boolean;
5758
};
5859

59-
const getSSEUrl = (id?: string, initialPath?: string = '') =>
60+
const getSSEUrl = (id?: string, initialPath: string = '') =>
6061
`https://${id ? id + '.' : ''}sse.${
6162
process.env.NODE_ENV === 'development' ? 'codesandbox.io' : host()
6263
}${initialPath}`;
6364

64-
const getDiff = (a, b) => {
65-
const diff = {};
65+
interface IModulesByPath {
66+
[path: string]: { path: string; code: null | string; isBinary?: boolean };
67+
}
68+
69+
const getDiff = (a: IModulesByPath, b: IModulesByPath) => {
70+
const diff: IModulesByPath = {};
6671

6772
Object.keys(b)
6873
.filter(p => {
@@ -148,15 +153,13 @@ function sseTerminalMessage(msg) {
148153
class BasePreview extends React.Component<Props, State> {
149154
serverPreview: boolean;
150155
lastSent: {
151-
sandboxId: string,
152-
modules: {
153-
[path: string]: any,
154-
},
155-
ignoreNextUpdate: boolean,
156+
sandboxId: string;
157+
modules: IModulesByPath;
158+
ignoreNextUpdate: boolean;
156159
};
157-
// TODO: Find typedefs for this
158-
$socket: ?any;
159-
connectTimeout: ?number;
160+
161+
$socket: SocketIOClient.Socket;
162+
connectTimeout: number | undefined;
160163
// indicates if the socket closing is initiated by us
161164
localClose: boolean;
162165

@@ -203,7 +206,7 @@ class BasePreview extends React.Component<Props, State> {
203206
this.executeCode = debounce(this.executeCode, 800);
204207
}
205208

206-
window.openNewWindow = this.openNewWindow;
209+
(window as any).openNewWindow = this.openNewWindow;
207210
}
208211

209212
initializeLastSent = () => {
@@ -242,7 +245,7 @@ class BasePreview extends React.Component<Props, State> {
242245
this.$socket.close();
243246
// we need this setTimeout() for socket open() to work immediately after close()
244247
setTimeout(() => {
245-
this.connectTimeout = setTimeout(() => onTimeout(this), 3000);
248+
this.connectTimeout = window.setTimeout(() => onTimeout(this), 3000);
246249
this.$socket.open();
247250
}, 0);
248251
}
@@ -253,7 +256,7 @@ class BasePreview extends React.Component<Props, State> {
253256
});
254257
this.$socket = socket;
255258
if (process.env.NODE_ENV === 'development') {
256-
window.$socket = socket;
259+
(window as any).$socket = socket;
257260
}
258261

259262
socket.on('disconnect', () => {
@@ -379,11 +382,14 @@ class BasePreview extends React.Component<Props, State> {
379382
() => this.$socket.close()
380383
);
381384
} else {
382-
window.showNotification(`Sandbox Container: ${message}`, 'error');
385+
(window as any).showNotification(
386+
`Sandbox Container: ${message}`,
387+
'error'
388+
);
383389
}
384390
});
385391

386-
this.connectTimeout = setTimeout(() => onTimeout(this), 3000);
392+
this.connectTimeout = window.setTimeout(() => onTimeout(this), 3000);
387393
socket.open();
388394
}
389395
};
@@ -393,8 +399,8 @@ class BasePreview extends React.Component<Props, State> {
393399
delay: true,
394400
};
395401

396-
listener: ?Function;
397-
disposeInitializer: ?Function;
402+
listener: () => void;
403+
disposeInitializer: () => void;
398404
initialPath: string;
399405

400406
componentWillUnmount() {
@@ -464,7 +470,7 @@ class BasePreview extends React.Component<Props, State> {
464470
this.handleRefresh();
465471
};
466472

467-
handleMessage = (data: Object, source: any) => {
473+
handleMessage = (data: any, source: any) => {
468474
if (data && data.codesandbox) {
469475
if (data.type === 'initialized' && source) {
470476
registerFrame(
@@ -547,8 +553,8 @@ class BasePreview extends React.Component<Props, State> {
547553
: getModulePath(sandbox.modules, sandbox.directories, currentModule.id);
548554
};
549555

550-
getModulesToSend = () => {
551-
const modulesObject = {};
556+
getModulesToSend = (): IModulesByPath => {
557+
const modulesObject: IModulesByPath = {};
552558
const sandbox = this.props.sandbox;
553559

554560
sandbox.modules.forEach(m => {
@@ -581,7 +587,7 @@ class BasePreview extends React.Component<Props, State> {
581587
const sandbox = this.props.sandbox;
582588

583589
if (settings.clearConsoleEnabled && !this.serverPreview) {
584-
// $FlowIssue: Chrome behaviour
590+
// @ts-ignore Chrome behaviour
585591
console.clear('__internal__'); // eslint-disable-line no-console
586592
dispatch({ type: 'clear-console' });
587593
}
@@ -638,9 +644,9 @@ class BasePreview extends React.Component<Props, State> {
638644
sendUrl = () => {
639645
const { urlInAddressBar } = this.state;
640646

641-
if (document.getElementById('sandbox')) {
642-
// $FlowIssue
643-
document.getElementById('sandbox').src = urlInAddressBar;
647+
const el = document.getElementById('sandbox');
648+
if (el) {
649+
(el as HTMLIFrameElement).src = urlInAddressBar;
644650

645651
this.setState({
646652
history: [urlInAddressBar],
@@ -654,9 +660,9 @@ class BasePreview extends React.Component<Props, State> {
654660
const { history, historyPosition, urlInAddressBar } = this.state;
655661
const url = history[historyPosition] || urlInAddressBar;
656662

657-
if (document.getElementById('sandbox')) {
658-
// $FlowIssue
659-
document.getElementById('sandbox').src =
663+
const el = document.getElementById('sandbox');
664+
if (el) {
665+
(el as HTMLIFrameElement).src =
660666
url ||
661667
(this.serverPreview
662668
? getSSEUrl(this.props.sandbox.id)
@@ -777,7 +783,6 @@ class BasePreview extends React.Component<Props, State> {
777783
alignBottom={this.props.alignBottom}
778784
alignDirection={this.props.alignDirection}
779785
isServer={this.serverPreview}
780-
owned={sandbox.owned}
781786
/>
782787
)}
783788
{overlayMessage && <Loading>{overlayMessage}</Loading>}
@@ -799,7 +804,6 @@ class BasePreview extends React.Component<Props, State> {
799804
}
800805
id="sandbox"
801806
title={sandbox.title || sandbox.id}
802-
hideNavigation={!showNavigation}
803807
style={{
804808
...style,
805809
zIndex: 1,
@@ -828,7 +832,6 @@ class BasePreview extends React.Component<Props, State> {
828832
}}
829833
>
830834
<div
831-
alt={this.props.sandbox.title}
832835
style={{
833836
width: '100%',
834837
height: '100%',

‎packages/dynamic-pages/components/PageContainer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as React from 'react';
33
import Padding from 'common/lib/components/spacing/Padding';
44
import MaxWidth from 'common/lib/components/flex/MaxWidth';
55

6-
export default ({ children, ...props }: { children: React.Node }) => (
6+
export default ({ children, ...props }) => (
77
<MaxWidth width={1440} {...props}>
88
<Padding top={8} bottom={1}>
99
{children}

‎yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2448,6 +2448,11 @@
24482448
"@types/glob" "*"
24492449
"@types/node" "*"
24502450

2451+
"@types/socket.io-client@^1.4.32":
2452+
version "1.4.32"
2453+
resolved "https://registry.yarnpkg.com/@types/socket.io-client/-/socket.io-client-1.4.32.tgz#988a65a0386c274b1c22a55377fab6a30789ac14"
2454+
integrity sha512-Vs55Kq8F+OWvy1RLA31rT+cAyemzgm0EWNeax6BWF8H7QiiOYMJIdcwSDdm5LVgfEkoepsWkS+40+WNb7BUMbg==
2455+
24512456
"@types/strip-bom@^3.0.0":
24522457
version "3.0.0"
24532458
resolved "https://registry.yarnpkg.com/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2"

0 commit comments

Comments
 (0)