feat(kernel): Updated kernel to use sepearet fs and process workers

package.json

@@ -34,24 +34,26 @@
   "author": "PlayOS",
   "license": "ISC",
   "dependencies": {
-    "@material-ui/core": "^4.9.4",
+    "@material-ui/core": "^4.9.5",
     "@material-ui/icons": "^4.9.1",
-    "@wasmer/wasm-terminal": "^0.6.0",
-    "@wasmer/wasm-transformer": "^0.6.0",
-    "@wasmer/wasmfs": "^0.6.0",
+    "@wasmer/wasm-terminal": "^0.10.1",
+    "@wasmer/wasm-transformer": "^0.10.1",
+    "@wasmer/io-devices": "^0.10.1",
+    "@wasmer/wasmfs": "^0.10.1",
+    "comlink": "^4.2.0",
     "classnames": "^2.2.6",
     "connected-react-router": "^6.6.1",
     "ethers": "^4.0.45",
     "inherits": "^2.0.4",
     "keccak": "^2.1.0",
     "material-ui": "^0.20.2",
     "material-ui-dialogs": "^1.3.0",
-    "memfs": "^3.1.1",
+    "memfs": "^3.1.2",
     "postcss-modules": "^1.5.0",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
+    "react": "^16.13.0",
     "react-code-input": "^3.9.0",
-    "react-dom": "^16.12.0",
+    "react-dom": "^16.13.0",
     "react-dropzone": "^10.2.1",
     "react-loadable": "^5.5.0",
     "react-redux": "^7.1.3",
@@ -70,7 +72,7 @@
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
-    "@types/classnames": "^2.2.9",
+    "@types/classnames": "^2.2.10",
     "@types/jszip": "^3.1.7",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
@@ -83,10 +85,10 @@
     "@types/react-swipeable-views": "^0.13.0",
     "@types/web3": "^1.2.2",
     "documentation": "12.1.4",
-    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb": "^18.1.0",
     "node-sass": "^4.13.1",
     "standard-version": "^7.1.0",
-    "typescript": "^3.8.2",
+    "typescript": "^3.8.3",
     "workerize-loader": "^1.1.0"
   }
 }

src/index.js

@@ -1,20 +1,7 @@
-import 'whatwg-fetch';
 import App from './js/App';
 import './scss/index.scss';
-// import Sdk from '../SDK';
-// import Configuration from './js/Configuration';
 import packageJson from '../package.json';
 
-// injectTapEventPlugin();
-
-// const env = Configuration.getEnvironment();
-// const sdkEnv = env === 'production' ? 'root' : env;
-
-// const sdk = new Sdk('__playos_auth_development', {
-//     environment: sdkEnv,
-// });
-
-// InstanceBag.set('sdk', sdk);
 const app = new App('app');
 app.run();
 

src/js/apps/Explorer/Explorer.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import AppHeader from '../../components/molecules/AppHeader';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import IconButton from '@material-ui/core/IconButton';
@@ -11,45 +10,37 @@ import ListItemText from '@material-ui/core/ListItemText';
 import Collapse from '@material-ui/core/Collapse';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
+import Dirent from 'memfs/lib/Dirent';
 import InstanceBag from '../../InstanceBag';
 import Folder from './components/Folder';
 import File from './components/File';
-import Dirent from 'memfs/lib/Dirent';
+import AppHeader from '../../components/molecules/AppHeader';
 import Dropzone from '../../components/molecules/Dropzone';
 import Kernel from '../../../vendor/kernel';
 import BackgroundTerminal from '../../background/BackgroundTerminal';
+import { getDirectoryListing, Listing } from '../../services/FileService';
+
 const styles = require('./Explorer.module.scss');
 
 export default function Explorer() {
     const [isLocationsOpen, setLocationsOpen] = React.useState(true);
-    const [files, setFiles] = React.useState<Dirent[]>([]);
+    const [files, setFiles] = React.useState<Listing[]>([]);
     const [path, setPath] = React.useState('/');
 
     React.useEffect(() => {
         async function setup() {
-            const kernel = InstanceBag.get<Kernel>('kernel');
-
-            if (!kernel.fs) {
-                throw new Error('System was not booted');
-            }
-
-            const filesAndDirectories: any = await kernel.fs.readDir(path, {
-                encoding: 'utf8',
-                withFileTypes: true,
-                ignoreDotFiles: true,
-            });
-
+            const filesAndDirectories = await getDirectoryListing(path);
             setFiles(filesAndDirectories);
         }
 
         setup();
     }, [path]);
 
-    function handleFileClick(file: Dirent) {
+    function handleFileClick(file: Listing) {
         // Directories should just navigate to the next page
-        if (file.isDirectory()) {
+        if (file.isFolder) {
             // We have to make the path pretty so we filter out all the empty spaces
-            const splittedPath = path.split('/').filter(p => p);
+            const splittedPath = path.split('/').filter((p) => p);
             let newPath = `/${splittedPath.join('/')}/${file.name}`;
 
             // Double // are ugly so we remove them
@@ -83,40 +74,43 @@ export default function Explorer() {
 
     return (
         <>
-            <AppHeader title={path} toolbar={
-                <>
-                    <IconButton>
-                        <CreateNewFolderOutlinedIcon className={styles.toolbarButton} />
-                    </IconButton>
-                    <IconButton onClick={handleFolderUpButtonClick}>
-                        <ArrowUpwardIcon className={styles.toolbarButton} />
-                    </IconButton>
-                </>
-            }
-
-            menu={
-                <List>
-                    <ListItem button onClick={() => setLocationsOpen(!isLocationsOpen)}>
-                        <ListItemText primary="Locations" />
-                        {isLocationsOpen ? <ExpandLess /> : <ExpandMore />}
-                    </ListItem>
-                    <Collapse in={isLocationsOpen} unmountOnExit>
-                        <ListItem button onClick={() => setPath('/')}>
-                            <ListItemIcon>
-                                <FolderIcon />
-                            </ListItemIcon>
-                            <ListItemText primary="Main Drive" />
+            <AppHeader
+                title={path}
+                toolbar={(
+                    <>
+                        <IconButton>
+                            <CreateNewFolderOutlinedIcon className={styles.toolbarButton} />
+                        </IconButton>
+                        <IconButton onClick={handleFolderUpButtonClick}>
+                            <ArrowUpwardIcon className={styles.toolbarButton} />
+                        </IconButton>
+                    </>
+                )}
+
+                menu={(
+                    <List>
+                        <ListItem button onClick={() => setLocationsOpen(!isLocationsOpen)}>
+                            <ListItemText primary="Locations" />
+                            {isLocationsOpen ? <ExpandLess /> : <ExpandMore />}
                         </ListItem>
-                    </Collapse>
-                </List>
-            }>
+                        <Collapse in={isLocationsOpen} unmountOnExit>
+                            <ListItem button onClick={() => setPath('/')}>
+                                <ListItemIcon>
+                                    <FolderIcon />
+                                </ListItemIcon>
+                                <ListItemText primary="Main Drive" />
+                            </ListItem>
+                        </Collapse>
+                    </List>
+                )}
+            >
                 <Dropzone currentPath={path} className={styles.files}>
                     {files.map((file) => {
-                        if (file.isDirectory()) {
-                            return <Folder path={path} key={file.name.toString()} folder={file} onClick={handleFileClick} />
+                        if (file.isFolder) {
+                            return <Folder path={path} key={file.name.toString()} folder={file} onClick={handleFileClick} />;
                         }
 
-                        return <File path={path} key={file.name.toString()} file={file} onClick={handleFileClick} />
+                        return <File path={path} key={file.name.toString()} file={file} onClick={handleFileClick} />;
                     })}
                 </Dropzone>
             </AppHeader>

src/js/apps/Explorer/components/File/File.tsx

@@ -3,16 +3,17 @@ import Dirent from 'memfs/lib/Dirent';
 import InsertDriveFileOutlinedIcon from '@material-ui/icons/InsertDriveFileOutlined';
 import WebIcon from '@material-ui/icons/Web';
 import getFileExtension from '../../../../services/micro/getFileExtension';
+import { Listing } from '../../../../services/FileService';
 
 const styles = require('./File.module.scss');
 
 interface Props {
-    file: Dirent;
+    file: Listing;
     path: string;
-    onClick: (folder: Dirent) => void;
+    onClick: (folder: Listing) => void;
 }
 
-function getFileIcon(file: Dirent): any {
+function getFileIcon(file: Listing): any {
     const fileName: any = file.name;
     const fileExtension = getFileExtension(fileName);
 

src/js/apps/Explorer/components/Folder/Folder.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
-import Dirent from 'memfs/lib/Dirent';
 import FolderIcon from '@material-ui/icons/Folder';
 import getFileExtension from '../../../../services/micro/getFileExtension';
 import { getWappInformation } from '../../../../services/WappService';
+import { Listing } from '../../../../services/FileService';
 
 const styles = require('./Folder.module.scss');
 
 const WAPP_EXTENSION = 'wapp';
 
 interface Props {
-    folder: Dirent;
+    folder: Listing;
     path: string;
-    onClick: (folder: Dirent) => void;
+    onClick: (folder: Listing) => void;
 }
 
 export default function Folder(props: Props) {
@@ -43,7 +43,7 @@ export default function Folder(props: Props) {
         }
 
         processFile();
-    });
+    }, []);
 
     return (
         <div className={styles.folder}>

src/js/background/BackgroundTerminal.ts

@@ -1,5 +1,4 @@
-// @ts-ignore
-import WasmTerminal from '@wasmer/wasm-terminal/lib/unoptimized/wasm-terminal.esm';
+import WasmTerminal from '@wasmer/wasm-terminal';
 import Kernel from '../../vendor/kernel';
 import TerminalService from '../services/TerminalService';
 
@@ -14,8 +13,7 @@ class BackgroundTerminal {
         const terminalElement = document.createElement('div');
 
         this.wasmTerminal = new WasmTerminal({
-            // @ts-ignore
-            fetchCommand: (...args: any[]) => terminalService.handleCommand(...args),
+            fetchCommand: (options: any) => terminalService.handleCommand(options.args, options.env),
             wasmFs: this.kernel.fs.wasmFs,
         });
 

src/js/components/molecules/AppUninstallDialog/AppUninstallDialog.jsx

@@ -4,7 +4,7 @@ import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import UserService from '../../../services/UserService';
 import SnackBarMessageActions from '../../../actions/SnackBarMessageActions';
-import { setApps } from '../../../store/ApplicationStore';
+import { setApps } from '../../../store/applications/applicationStore';
 
 class AppUninstallDialog extends React.Component {
     constructor(props) {

src/js/components/organims/AppSection/AppSection.tsx

@@ -8,7 +8,7 @@ import sortAppsInGrids from '../../../services/micro/sortAppsInGrids';
 import AppGrid from '../../molecules/AppGrid';
 import useMedia from '../../../services/hooks/useMedia';
 import BulletNavigation from '../../atoms/BulletNavigation';
-// import Folder from '../Folder';
+
 const styles = require('./AppSection.module.scss');
 
 const SwipeableViews = bindKeyboard(SwipeableViewsRaw);
@@ -18,6 +18,10 @@ interface Props {
 }
 
 function AppSection(props: Props) {
+    const {
+        apps,
+    } = props;
+
     const isDesktop = useMedia('(min-width: 960px)');
     const [viewIndex, setViewIndex] = React.useState(0);
 
@@ -27,7 +31,7 @@ function AppSection(props: Props) {
         amountPerGrid = 28;
     }
 
-    const appGrids = sortAppsInGrids(props.apps, amountPerGrid);
+    const appGrids = sortAppsInGrids(apps, amountPerGrid);
 
     function handleChangeIndex(index: number) {
         setViewIndex(index);
@@ -48,7 +52,6 @@ function AppSection(props: Props) {
 }
 
 const mapStateToProps = (store: any) => ({
-    ApplicationStore: store.ApplicationStore,
     apps: store.ApplicationStore.apps,
 });
 

src/js/components/organims/AppTerminal/AppTerminal.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-// @ts-ignore
-import WasmTerminal from "@wasmer/wasm-terminal/lib/unoptimized/wasm-terminal.esm";
+import WasmTerminal from '@wasmer/wasm-terminal';
 // import '@wasmer/wasm-terminal/dist/xterm/xterm.css';
 import TerminalService from '../../../services/TerminalService';
 import InstanceBag from '../../../InstanceBag';
@@ -23,8 +22,7 @@ function AppTerminal(props: Props) {
             const terminalService = new TerminalService(kernel.fs);
 
             wasmTerminal = new WasmTerminal({
-                // @ts-ignore
-                fetchCommand: (...args: any[]) => terminalService.handleCommand(...args),
+                fetchCommand: (options: any) => terminalService.handleCommand(options.args, options.env),
                 wasmFs: kernel.fs.wasmFs,
             });
 

src/js/pages/HomePage/HomePage.tsx

@@ -5,7 +5,7 @@ import { UserInfo, loadUserInfo } from '../../store/UserInfoStore';
 import KeyService from '../../services/KeyService';
 import Header from '../../components/molecules/Header';
 import AppSection from '../../components/organims/AppSection';
-import { loadApps } from '../../store/ApplicationStore';
+import { loadApps } from '../../store/applications/applicationsActions';
 import AppProcessesHolder from '../../components/organims/AppProcessesHolder';
 import bootSystem from '../../services/bootSystem';
 import redirect from '../../services/redirect';
@@ -53,18 +53,18 @@ class HomePage extends React.Component<Props, State> {
 
     render() {
         return (
-            <React.Fragment>
-                {!this.state.isLoaded &&
-                    <LoginLoadingScreen />
-                }
-                {this.state.isLoaded &&
-                    <>
-                        <Header />
-                        <AppSection />
-                        <AppProcessesHolder />
-                    </>
-                }
-            </React.Fragment>
+            <>
+                {!this.state.isLoaded
+                    && <LoginLoadingScreen />}
+                {this.state.isLoaded
+                    && (
+                        <>
+                            <Header />
+                            <AppSection />
+                            <AppProcessesHolder />
+                        </>
+                    )}
+            </>
         );
     }
 }
@@ -73,5 +73,5 @@ const mapStateToProps = (store: any) => ({
     user: store.UserInfoStore,
 });
 
-//@ts-ignore
+// @ts-ignore
 export default connect(mapStateToProps)(HomePage);