feat(general): Applications will now be loaded from /Applications

package.json

@@ -21,7 +21,7 @@
   "license": "ISC",
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "@material-ui/core": "^4.7.1",
+    "@material-ui/core": "^4.7.2",
     "@material-ui/icons": "^4.5.1",
     "@types/react-loadable": "^5.5.2",
     "@types/react-resizable": "^1.7.1",
@@ -48,7 +48,7 @@
     "react-dropzone": "^10.2.1",
     "react-loadable": "^5.5.0",
     "react-redux": "^7.1.3",
-    "react-rnd": "^10.1.1",
+    "react-rnd": "^10.1.2",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-router-redux": "^4.0.8",
@@ -70,13 +70,13 @@
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.4",
+    "@babel/core": "^7.7.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
     "@babel/preset-env": "7.7.4",
     "@babel/preset-react": "7.7.4",
     "@types/classnames": "^2.2.9",
     "@types/jszip": "^3.1.6",
-    "@types/react": "^16.9.14",
+    "@types/react": "^16.9.16",
     "@types/react-dom": "^16.9.4",
     "@types/react-redux": "^7.1.5",
     "@types/react-router": "^5.1.3",
@@ -88,9 +88,9 @@
     "documentation": "12.1.4",
     "eslint": "6.7.2",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-loader": "^3.0.2",
+    "eslint-loader": "^3.0.3",
     "eslint-plugin-babel": "5.3.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.17.0",
     "eslint-summary": "^1.0.0",

src/js/apps/Explorer/Explorer.tsx

@@ -17,6 +17,7 @@ import File from './components/File';
 import Dirent from 'memfs/lib/Dirent';
 import Dropzone from '../../components/molecules/Dropzone';
 import Kernel from '../../kernel';
+import BackgroundTerminal from '../../background/BackgroundTerminal';
 const styles = require('./Explorer.scss');
 
 export default function Explorer() {
@@ -25,15 +26,18 @@ export default function Explorer() {
     const [path, setPath] = React.useState('/');
 
     React.useEffect(() => {
-        const kernel = InstanceBag.get<Kernel>('kernel');
-        const { wasmFs } = kernel.fs;
+        async function setup() {
+            const kernel = InstanceBag.get<Kernel>('kernel');
+            const filesAndDirectories: any = await kernel.fs.readDir(path, {
+                encoding: 'utf8',
+                withFileTypes: true,
+                ignoreDotFiles: true,
+            });
 
-        const filesAndDirectories: any = wasmFs.fs.readdirSync(path, {
-            encoding: 'utf8',
-            withFileTypes: true,
-        });
+            setFiles(filesAndDirectories);
+        }
 
-        setFiles(filesAndDirectories);
+        setup();
     }, [path]);
 
     function handleFileClick(file: Dirent) {
@@ -48,6 +52,12 @@ export default function Explorer() {
                 newPath = newPath.slice(1);
             }
 
+            if (newPath.endsWith('.wapp')) {
+                const terminal = InstanceBag.get<BackgroundTerminal>('terminal');
+                terminal.runCommand(`open ${newPath}`);
+                return;
+            }
+
             setPath(newPath);
         }
     }

src/js/background/BackgroundTerminal.ts

@@ -0,0 +1,29 @@
+// @ts-ignore
+import WasmTerminal from '@wasmer/wasm-terminal/lib/unoptimized/wasm-terminal.esm';
+import Kernel from '../kernel';
+import TerminalService from '../services/TerminalService';
+
+class BackgroundTerminal {
+    kernel: Kernel;
+    wasmTerminal: any;
+
+    constructor(kernel: Kernel) {
+        this.kernel = kernel;
+
+        const terminalService = new TerminalService(this.kernel.fs, '/');
+        const terminalElement = document.createElement('div');
+
+        this.wasmTerminal = new WasmTerminal({
+            fetchCommand: terminalService.handleCommand,
+            wasmFs: this.kernel.fs.wasmFs,
+        });
+
+        this.wasmTerminal.open(terminalElement);
+    }
+
+    async runCommand(command: string) {
+        await this.wasmTerminal.runCommand(command);
+    }
+}
+
+export default BackgroundTerminal;

src/js/components/molecules/AppGrid/AppGrid.tsx

@@ -13,7 +13,7 @@ export default function AppGrid(props: Props) {
     return (
         <div className={styles.AppGrid}>
             {props.grid.apps.map((app) => {
-                return <App key={app.id} app={app} />
+                return <App key={app.manifest.id} app={app} />
             })}
         </div>
     );

src/js/components/molecules/new/App/App.tsx

@@ -4,24 +4,30 @@ import Typography from '@material-ui/core/Typography';
 import Application from '../../../../models/Application';
 import { openApp } from '../../../../store/AppProcessesStore';
 import resolveUrl from '../../../../services/micro/resolveUrl';
+import InstanceBag from '../../../../InstanceBag';
+import BackgroundTerminal from '../../../../background/BackgroundTerminal';
+import { ParsedApplicationInfo } from '../../../../kernel';
 const styles = require('./App.scss');
 
 interface Props {
-    app: Application;
+    app: ParsedApplicationInfo;
     dispatch: Function;
 }
 
 function App(props: Props) {
+    const { app } = props;
+
     function handleAppClick() {
-        props.dispatch(openApp(props.app));
+        const terminal = InstanceBag.get<BackgroundTerminal>('terminal');
+        terminal.runCommand(`open ${app.location}`);
     }
 
-    const highestResIcon = resolveUrl(props.app.manifest_url, props.app.icons[0].src);
+    const icon = URL.createObjectURL(app.icon);
 
     return (
         <button className={styles.App} onClick={handleAppClick}>
-            <img src={highestResIcon} className={styles.icon} />
-            <Typography noWrap variant="body1" className={styles.title}>{props.app.short_name}</Typography>
+            <img src={icon} className={styles.icon} />
+            <Typography noWrap variant="body1" className={styles.title}>{app.manifest.short_name}</Typography>
         </button>
     );
 }

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

@@ -9,12 +9,13 @@ import AppGrid from '../../molecules/AppGrid';
 import useMedia from '../../../services/hooks/useMedia';
 import BulletNavigation from '../../atoms/BulletNavigation';
 import AppTerminal from '../AppTerminal/index';
+import { ParsedApplicationInfo } from '../../../kernel';
 // import Folder from '../Folder';
 const styles = require('./AppSection.styles.scss');
 const SwipeableViews = bindKeyboard(SwipeableViewsRaw)
 
 interface Props {
-    apps: Application[];
+    apps: ParsedApplicationInfo[];
 }
 
 function AppSection(props: Props) {

src/js/kernel/Kernel.ts

@@ -3,6 +3,7 @@ import FileSystem from './core/FileSystem';
 import IKernelProvider from './interfaces/IKernelProvider';
 import VirtualMachine from './core/VirtualMachine';
 import Encryption from './core/Encryption';
+import WasmParser from './core/WasmParser';
 
 class Kernel {
     registry: Registry;
@@ -17,6 +18,8 @@ class Kernel {
 
     provider: IKernelProvider;
 
+    wasmParser: WasmParser;
+
     constructor(privateSeed: string, provider: IKernelProvider) {
         this.privateSeed = privateSeed;
         this.provider = provider;
@@ -34,6 +37,7 @@ class Kernel {
         this.provider.setKeys(this.encryption.createKey('provider'));
 
         this.fs = await FileSystem.create(this.registry, this.provider);
+        this.wasmParser = new WasmParser(this.fs);
         this.vm = new VirtualMachine();
     }
 }

src/js/kernel/apps/Explorer.wapp/manifest.json

@@ -0,0 +1,22 @@
+{
+    "id": "FileExplorer",
+    "name": "Files",
+    "short_name": "Files",
+    "display": "standalone",
+    "background_color": "#fff",
+    "theme_color": "#2196F3",
+    "icons": [
+        {
+            "sizes": "512x512",
+            "src": "./icon.png",
+            "type": "image/png"
+        }
+    ],
+    "scope": "/",
+    "start_url": "#",
+    "manifest_url": "https://airhorner.com/manifest.json",
+    "playos": {
+        "isWasm": true,
+        "showTerminal": false
+    }
+}

src/js/kernel/apps/Terminal.wapp/manifest.json

@@ -1,23 +1,23 @@
 {
-    "id": "AppId",
+    "id": "AppId3",
     "name": "Terminal",
     "short_name": "Terminal",
     "display": "standalone",
-    "background_color": "#2196F3",
-    "theme_color": "#2196F3",
+    "background_color": "#000",
+    "theme_color": "#9E9E9E",
     "icons": [
         {
             "sizes": "512x512",
-            "src": "/images/touch/android-launchericon-512-512.png",
+            "src": "./icon.png",
             "type": "image/png"
         }
     ],
     "scope": "/",
-    "start_url": "/?homescreen=1",
+    "start_url": "#",
     "manifest_url": "https://airhorner.com/manifest.json",
     "playos": {
-        "isPwa": true,
-        "isWasm": false,
-        "showTerminal": false
+        "isPwa": false,
+        "isWasm": true,
+        "showTerminal": true
     }
 }

src/js/kernel/core/FileSystem.ts

@@ -2,11 +2,18 @@
 import WasmFs from '@wasmer/wasmfs/lib/index.esm';
 import WasmFsType from '@wasmer/wasmfs';
 import { TFileId, IReadFileOptions, TData, TFilePath, TMode, IMkdirOptions } from 'memfs/lib/volume';
-import { TDataOut } from 'memfs/lib/encoding';
+import { TDataOut, TEncodingExtended } from 'memfs/lib/encoding';
 import stringToBytes from '../services/stringToBytes';
 import Registry from './Registry';
 import IKernelProvider from '../interfaces/IKernelProvider';
-import WasmApplication from './WasmApplication';
+import WasmParser from './WasmParser';
+import Dirent from 'memfs/lib/Dirent';
+
+interface FileSystemDirOptions {
+    encoding?: TEncodingExtended;
+    withFileTypes?: boolean;
+    ignoreDotFiles?: boolean;
+}
 
 class FileSystem {
     private registry: Registry;
@@ -49,7 +56,7 @@ class FileSystem {
             this.wasmFs.fromJSON(fileMap);
         }
 
-        await WasmApplication.createDefaultApps(this);
+        await WasmParser.createDefaultApps(this);
     }
 
     /**
@@ -111,6 +118,41 @@ class FileSystem {
         });
     }
 
+    /**
+     * Reads a directory
+     *
+     * @param {TFilePath} path
+     * @returns {(Promise<TDataOut[] | Dirent[]>)}
+     * @memberof FileSystem
+     */
+    readDir(path: TFilePath, options?: FileSystemDirOptions): Promise<TDataOut[] | Dirent[]> {
+        return new Promise((resolve, reject) => {
+            this.wasmFs.fs.readdir(path, {
+                encoding: options.encoding,
+                withFileTypes: options.withFileTypes,
+            }, (error, data) => {
+                let result = data;
+
+                if (error) {
+                    return reject(error);
+                }
+
+                if (options && options.ignoreDotFiles) {
+                    if (options.withFileTypes) {
+                        // @ts-ignore
+                        result = result.filter((folder: Dirent) => !folder.name.toString().startsWith('.'));
+                    } else {
+                        // @ts-ignore
+                        result = result.filter(folder => !folder.startsWith('.'));
+                    }
+                }
+
+                // @ts-ignore
+                resolve(result);
+            })
+        });
+    }
+
     /**
      * Creates a new instance of the FileSystem and init's the system
      *