Skip to content

Commit bbf5f45

Browse files
CompuIvesCompuIves
authored
Vue updates (codesandbox#553)
* Update vue template * Add compile tab, fix config files * Fix CSS * Fix actions
1 parent 905082f commit bbf5f45

File tree

12 files changed

+246
-182
lines changed

12 files changed

+246
-182
lines changed

‎packages/app/src/app/components/CodeEditor/FilePath/elements.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled, { css } from 'styled-components';
1+
import styled from 'styled-components';
22
import ChevronLeft from 'react-icons/lib/md/chevron-left';
33
import ExitZen from 'react-icons/lib/md/fullscreen-exit';
44
import { withTooltip } from 'common/components/Tooltip';

‎packages/app/src/app/components/Preview/DevTools/Problems/elements.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import styled from 'styled-components';
2+
3+
export const Container = styled.div`
4+
background-color: ${props => props.theme.background2};
5+
width: 100%;
6+
height: 100%;
7+
color: rgba(255, 255, 255, 0.8);
8+
`;
9+
10+
export const File = styled.div`
11+
display: flex;
12+
align-items: center;
13+
font-size: 1rem;
14+
padding: 0.5rem 1rem;
15+
background-color: rgba(0, 0, 0, 0.3);
16+
17+
cursor: pointer;
18+
`;
19+
20+
export const Path = styled.span`
21+
color: rgba(255, 255, 255, 0.6);
22+
`;
23+
24+
export const FileName = styled.span`
25+
color: rgba(255, 255, 255, 0.8);
26+
27+
flex: 1;
28+
`;
29+
30+
export const Actions = styled.div`
31+
transition: 0.3s ease opacity;
32+
font-size: 1.125rem;
33+
34+
color: white;
35+
36+
svg {
37+
margin-left: 0.5rem;
38+
transition: 0.3s ease color;
39+
40+
color: rgba(255, 255, 255, 0.6);
41+
42+
&:hover {
43+
color: rgba(255, 255, 255, 1);
44+
}
45+
}
46+
`;

‎packages/app/src/app/components/Preview/DevTools/Problems/index.js‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import React from 'react';
2+
import { listen, actions } from 'codesandbox-api';
3+
import { dispatch } from 'app/components/Preview';
4+
import Tooltip from 'common/components/Tooltip';
5+
import FileIcon from 'react-icons/lib/md/insert-drive-file';
6+
7+
import { Container, File, Path, FileName, Actions } from './elements';
8+
import Message from '../Console/Message';
9+
10+
type State = {
11+
corrections: {
12+
[path: string]: Array<string>,
13+
},
14+
};
15+
16+
class Problems extends React.PureComponent<*, State> {
17+
state = {
18+
corrections: {},
19+
};
20+
21+
componentDidMount() {
22+
this.listener = listen(this.handleMessage);
23+
}
24+
25+
componentWillUnmount() {
26+
this.listener();
27+
}
28+
29+
handleMessage = data => {
30+
if (data.action === 'show-correction') {
31+
const path = data.path || 'root';
32+
33+
const newMessages = [
34+
...(this.state.corrections[path] || []),
35+
{ type: 'warn', message: data.message },
36+
];
37+
38+
this.setState({
39+
corrections: {
40+
...this.state.corrections,
41+
[path]: newMessages,
42+
},
43+
});
44+
45+
this.props.updateStatus('warning');
46+
} else if (data.action === 'show-error') {
47+
const path = data.path || 'root';
48+
49+
const newMessages = [
50+
...(this.state.corrections[path] || []),
51+
{ type: 'error', message: data.message },
52+
];
53+
54+
this.setState({
55+
corrections: {
56+
...this.state.corrections,
57+
[path]: newMessages,
58+
},
59+
});
60+
61+
this.props.updateStatus('error');
62+
} else if (data.type === 'start') {
63+
this.setState({ corrections: [] });
64+
this.props.updateStatus('clear');
65+
}
66+
};
67+
68+
openFile = (path: string) => {
69+
dispatch(this.props.sandboxId, actions.editor.openModule(path));
70+
};
71+
72+
render() {
73+
if (this.props.hidden) {
74+
return null;
75+
}
76+
77+
const files = Object.keys(this.state.corrections)
78+
.sort()
79+
.filter(x => x !== 'root');
80+
81+
const root = this.state.corrections.root;
82+
83+
return (
84+
<Container>
85+
{Object.keys(this.state.corrections).length === 0 && (
86+
<div style={{ padding: '1rem' }}>No problems!</div>
87+
)}
88+
{root && (
89+
<div>
90+
<File>Root</File>
91+
{root.map((message, i) => (
92+
<Message
93+
message={{
94+
logType: message.type,
95+
arguments: [message.message],
96+
}}
97+
// eslint-disable-next-line react/no-array-index-key
98+
key={i}
99+
/>
100+
))}
101+
</div>
102+
)}
103+
{files.map(file => {
104+
const splittedPath = file.split('/');
105+
const fileName = splittedPath.pop();
106+
107+
return (
108+
<div key={file}>
109+
<File>
110+
<Path>{splittedPath.join('/')}/</Path>
111+
<FileName>{fileName}</FileName>
112+
<Actions>
113+
<Tooltip title="Open File">
114+
<FileIcon onClick={() => this.openFile(file)} />
115+
</Tooltip>
116+
</Actions>
117+
</File>
118+
{this.state.corrections[file].map((message, i) => (
119+
<Message
120+
message={{
121+
logType: message.type,
122+
arguments: [message.message],
123+
}}
124+
// eslint-disable-next-line react/no-array-index-key
125+
key={i}
126+
/>
127+
))}
128+
</div>
129+
);
130+
})}
131+
</Container>
132+
);
133+
}
134+
}
135+
136+
export default {
137+
title: 'Problems',
138+
Content: Problems,
139+
actions: [],
140+
};

‎packages/app/src/app/components/Preview/DevTools/index.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Tooltip from 'common/components/Tooltip';
1010
import Unread from './Unread';
1111
import console from './Console';
1212
import tests from './Tests';
13+
import problems from './Problems';
1314

1415
import { Container, Header, Tab, Actions } from './elements';
1516

@@ -34,7 +35,11 @@ function normalizeTouchEvent(event: TouchEvent): MouseEvent {
3435
};
3536
}
3637

37-
const PANES = { [console.title]: console, [tests.title]: tests };
38+
const PANES = {
39+
[console.title]: console,
40+
[problems.title]: problems,
41+
[tests.title]: tests,
42+
};
3843

3944
export type Status = {
4045
unread: number,

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,10 @@ export async function createZip(
144144

145145
let promise = null;
146146

147-
if (directories.find(m => m.title === 'src' && m.directoryShortid == null)) {
147+
if (
148+
sandbox.template !== vue.name &&
149+
directories.find(m => m.title === 'src' && m.directoryShortid == null)
150+
) {
148151
// This is a full project, with all files already in there. We need to create
149152
// a zip by just adding all existing files to it (downloading binaries too).
150153
promise = import(/* webpackChunkName: 'full-zip' */ './full').then(

‎packages/app/src/app/store/providers/Utils/create-zip/vue-cli/files.zip‎

1.95 KB
Binary file not shown.

0 commit comments

Comments
 (0)