Merge pull request #234 from connect-foundation/cocode

1.2.0 진짜 마지막 배포

cocode/src/actions/Project.js

@@ -6,7 +6,8 @@ import {
 	CREATE_FILE,
 	DELETE_FILE,
 	MOVE_FILE,
-	INSTALL_DEPENDENCY
+	INSTALL_DEPENDENCY,
+	WAITING_INSTALL_DEPENDENCY
 } from './types';
 
 function fetchProjectActionCreator(payload) {
@@ -41,6 +42,10 @@ function installDependencyActionCreator(payload) {
 	return { type: INSTALL_DEPENDENCY, payload };
 }
 
+function waitingInstallDependencyActionCreator(payload) {
+	return { type: WAITING_INSTALL_DEPENDENCY, payload };
+}
+
 export {
 	updateCodeActionCreator,
 	fetchProjectActionCreator,
@@ -49,5 +54,6 @@ export {
 	createFileActionCreator,
 	deleteFileActionCreator,
 	moveFileActionCreator,
-	installDependencyActionCreator
+	installDependencyActionCreator,
+	waitingInstallDependencyActionCreator
 };

cocode/src/actions/types.js

@@ -13,6 +13,7 @@ const UPDATE_FILE_NAME = 'updateFileName';
 const DELETE_FILE = 'deleteFile';
 const MOVE_FILE = 'moveFile';
 const INSTALL_DEPENDENCY = 'installDependency';
+const WAITING_INSTALL_DEPENDENCY = 'waitingInstallDependency';
 
 //DashBoard
 const FETCH_COCONUT = 'fetchCoconut';
@@ -32,6 +33,7 @@ export {
 	DELETE_FILE,
 	MOVE_FILE,
 	INSTALL_DEPENDENCY,
+	WAITING_INSTALL_DEPENDENCY,
 	FETCH_COCONUT,
 	UPDATE_COCONUT_NAME,
 	DELETE_COCONUT

cocode/src/apis/Project.js

@@ -15,11 +15,15 @@ function forkProjectAPICreator(data) {
 	};
 }
 
-function getDenpendencyList(name) {
+function getDenpendencyListAPICreator(name) {
 	return {
 		url: `${API.dependency(name)}`,
 		method: 'get'
 	};
 }
 
-export { getProjectInfoAPICreator, forkProjectAPICreator, getDenpendencyList };
+export {
+	getProjectInfoAPICreator,
+	forkProjectAPICreator,
+	getDenpendencyListAPICreator
+};

cocode/src/bundler/pathParser.js

@@ -3,6 +3,8 @@ import path from 'path';
 
 const DEPENDENCY_PATH = '/node_modules/';
 function pathParser(param) {
+	const moduleName = param;
+
 	if (param[0] !== '.' && param[0] !== '/') {
 		param = `${DEPENDENCY_PATH}${param}`;
 	}
@@ -15,7 +17,7 @@ function pathParser(param) {
 		} else if (fileSystem[`${param}/index.js`]) {
 			return [`${param}/index.js`, param];
 		} else {
-			throw Error('path error');
+			throw Error(`Module not found: '${moduleName}'`);
 		}
 	} else {
 		return [param, path.dirname(param)];

cocode/src/bundler/require.js

@@ -2,33 +2,48 @@ import { pathStack } from './global';
 import { pathParser } from './pathParser';
 import { transformCode } from './core';
 
+const executeCodeTemplate = code => /*javascript*/ `
+(() => {
+	const exports = {};
+	try {
+		${code}
+		return Object.keys(exports).length ? exports : module.exports;
+	} catch (e) {
+		const ignoreErrorList = [
+			'Cannot redefine property',
+			'Cannot read property',
+			'Cannot set property default of #<Object> which has only a getter'
+		];
+		const errorType = e.message;
+		const isExistInIgnoreList = ignoreErrorList.some(ignoreError =>
+			errorType.startsWith(ignoreError)
+		);
+
+		if(!isExistInIgnoreList) throw e;
+	}
+})()`;
+
 function require(path) {
-	if (path.length < 3) throw Error('path error');
+	if (path === '.') throw Error('Recursive path parsing error');
 	const [newPath, newPathParent] = pathParser(path);
-	if (exports[newPath]) {
-		return exports[newPath];
-	}
+
+	if (exports[newPath]) return exports[newPath];
+
 	pathStack.push(newPathParent);
 	const code = transformCode(fileSystem[newPath].contents).value;
 
 	let result = null;
 	let stackLength = 0;
 	try {
 		stackLength = pathStack.length;
-		result = eval(`
-	(() =>{const exports = {};
-	try {
-		${code}
-		return Object.keys(exports).length ? exports : module.exports 
-	}catch(e) {}
-	})()`);
+		result = eval(executeCodeTemplate(code));
 	} catch (error) {
 		while (stackLength < pathStack.length) pathStack.pop();
 		result = eval(code);
 	}
+
 	exports[newPath] = result;
 	pathStack.pop();
-
 	return result;
 }
 

cocode/src/components/Common/CoconutSpinner/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import * as Styled from './style';
+
+import TinyCoconutLogo from 'components/Common/TinyCoconutLogo';
+
+function Spinner() {
+	return (
+		<Styled.Container>
+			<Styled.Content>
+				<TinyCoconutLogo />
+			</Styled.Content>
+			<Styled.SpinningArc />
+		</Styled.Container>
+	);
+}
+
+export default Spinner;

cocode/src/components/Common/CoconutSpinner/style.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+	position: relative;
+
+	width: 3.5rem;
+	height: 3.5rem;
+`;
+
+const Content = styled.div`
+	position: absolute;
+	top: 1.1rem;
+	left: 0.8rem;
+`;
+
+const SpinningArc = styled.div`
+	position: absolute;
+	width: 3.5rem;
+	height: 3.5rem;
+	background-color: transparent;
+
+	box-sizing: content-box;
+	border: 3px solid white;
+	border-radius: 100%;
+	border-bottom-color: transparent;
+
+	animation: 1s linear 0s infinite normal both running spin;
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+`;
+
+export { Container, Content, SpinningArc };

cocode/src/components/Common/TinyCoconutLogo/index.js

@@ -0,0 +1,105 @@
+import React from 'react';
+
+function TinyCoconutLogo() {
+	return (
+		<svg width="40" height="40" viewBox="0 0 160 200">
+			<g id="코코넛_dark">
+				<path
+					id="패스_7"
+					data-name="패스 7"
+					d="M56,0c30.928,0,56,26.191,56,58.5S86.928,117,56,117c-14.443,0-26.883-7.212-37.017-16.783C8.643,89.262,0,75.721,0,58.5,0,26.191,25.072,0,56,0Z"
+					transform="translate(29)"
+					fill="#fff"
+				/>
+				<g
+					id="그룹_8"
+					data-name="그룹 8"
+					transform="translate(-887 -226)"
+				>
+					<path
+						id="패스_3"
+						data-name="패스 3"
+						d="M49.276-3.027c8.377,0,17.406.013,24.485,3.91C88.375,8.923,96,29.867,96,48c0,15.11-6.956,33.243-18.088,42.216C69.9,96.679,55.633,97.743,55.47,97.541,28.961,97.541,0,74.51,0,48S22.767-3.027,49.276-3.027Z"
+						transform="matrix(0.719, -0.695, 0.695, 0.719, 868.031, 305.515)"
+						fill="#fff"
+					/>
+					<ellipse
+						id="타원_3"
+						data-name="타원 3"
+						cx="33"
+						cy="48"
+						rx="33"
+						ry="48"
+						transform="translate(888.078 285.318) rotate(-45)"
+					/>
+					<ellipse
+						id="타원_2"
+						data-name="타원 2"
+						cx="27.5"
+						cy="42.5"
+						rx="27.5"
+						ry="42.5"
+						transform="translate(896.563 284.247) rotate(-45)"
+						fill="#fff"
+					/>
+					<ellipse
+						id="타원_1"
+						data-name="타원 1"
+						cx="18.5"
+						cy="33.5"
+						rx="18.5"
+						ry="33.5"
+						transform="translate(910.291 283.661) rotate(-45)"
+					/>
+					<path
+						id="패스_4"
+						data-name="패스 4"
+						d="M1012.734,439.839l-7.112,8.289-7,17.906,8.671-3.769,8.519-3.511,3.259-16.913Z"
+						transform="translate(-65 -123)"
+					/>
+					<path
+						id="패스_5"
+						data-name="패스 5"
+						d="M1036.2,328.494l-16.08,7.214-2.338,6.326,17.157-7.056Z"
+						transform="translate(-84.163 1)"
+					/>
+					<path
+						id="패스_6"
+						data-name="패스 6"
+						d="M1037.809,319.126l-14.6,8.212-3.122,8.42,15.983-7.161Z"
+						transform="translate(-84 1)"
+					/>
+				</g>
+				<ellipse
+					id="타원_6"
+					data-name="타원 6"
+					cx="6.5"
+					cy="5.5"
+					rx="6.5"
+					ry="5.5"
+					transform="translate(98 14)"
+				/>
+				<ellipse
+					id="타원_7"
+					data-name="타원 7"
+					cx="6.5"
+					cy="5.5"
+					rx="6.5"
+					ry="5.5"
+					transform="translate(93 27)"
+				/>
+				<ellipse
+					id="타원_8"
+					data-name="타원 8"
+					cx="6.5"
+					cy="5.5"
+					rx="6.5"
+					ry="5.5"
+					transform="translate(111 25)"
+				/>
+			</g>
+		</svg>
+	);
+}
+
+export default TinyCoconutLogo;

cocode/src/components/Project/BrowserV2/index.js

@@ -7,31 +7,35 @@ import ProjectContext from 'contexts/ProjectContext';
 
 function BrowserV2({ ...props }) {
 	const { project } = useContext(ProjectContext);
-	const { files, root } = project;
+	const { files, root, dependencyInstalling } = project;
 	const [isChange, setIsChange] = useState(false);
-	const [fileSystem, setFileSystem] = useState({});
 	const [errorDescription, setErrorDescription] = useState(null);
 
-	useEffect(() => {
-		function fileParser(path, id) {
-			if (files[id].type !== 'directory') {
-				fileSystem[path] = {
-					contents: files[id].contents
-				};
-				delete exports[path];
-			} else if (files[id].child) {
-				files[id].child.forEach(id => {
-					const path = files[id].path;
-					fileParser(path, id);
-				});
-			}
+	function fileParser(path, id) {
+		if (files[id].type !== 'directory') {
+			fileSystem[path] = {
+				contents: files[id].contents
+			};
+			delete exports[path];
+		} else if (files[id].child) {
+			files[id].child.forEach(id => {
+				const path = files[id].path;
+				fileParser(path, id);
+			});
 		}
+	}
+
+	const handleEndInstallDependency = () => {
+		if (!dependencyInstalling) setIsChange(true);
+	};
+
+	const handleParsingProject = () => {
 		const rootPath = files[root].path;
 		if (project) fileParser(rootPath, project.root);
 		setIsChange(true);
-	}, [files]);
+	};
 
-	useEffect(() => {
+	const handleBuildProject = () => {
 		if (isChange) {
 			setIsChange(false);
 			try {
@@ -42,7 +46,11 @@ function BrowserV2({ ...props }) {
 				setErrorDescription(error.stack);
 			}
 		}
-	}, [isChange]);
+	};
+
+	useEffect(handleEndInstallDependency, [dependencyInstalling]);
+	useEffect(handleParsingProject, [files]);
+	useEffect(handleBuildProject, [isChange]);
 
 	return (
 		<Styled.Frame>

cocode/src/components/Project/BrowserV2/style.js

@@ -8,7 +8,7 @@ const Frame = styled.div`
 const ErrorDisplay = styled.div`
 	& {
 		position: absolute;
-		z-index: 1;
+		z-index: ${({ errorDescription }) => (errorDescription ? 1 : -1)};
 		overflow-x: scroll;
 
 		padding: 1rem;