Merge branch 'dev'

config/builder.json

@@ -0,0 +1,71 @@
+{
+    "appId": "figma-linux",
+    "productName": "figma-linux",
+    "extraMetadata": "main/main.js",
+    "icon": "resources/256x256.png",
+    "files": [
+        "**/*"
+    ],
+    "directories": {
+        "app": "dist/",
+        "buildResources": "build/installers",
+        "output": "build/installers"
+    },
+
+    "appImage": {
+        "systemIntegration": "doNotAsk"
+    },
+
+    "linux": {
+        "description": "Unofficial desktop application for linux",
+        "icon": "resources/256x256.png",
+        "category": "Graphic",
+        "depends": [
+            "libgconf2-4"
+        ],
+        "target": [
+            {
+                "target": "AppImage",
+                "arch": [
+                    "x64",
+                    "ia32"
+                ]
+            },
+            {
+                "target": "deb",
+                "arch": [
+                    "x64",
+                    "ia32"
+                ]
+            },
+            {
+                "target": "freebsd",
+                "arch": [
+                    "x64",
+                    "ia32"
+                ]
+            },
+            {
+                "target": "pacman",
+                "arch": [
+                    "x64",
+                    "ia32"
+                ]
+            },
+            {
+                "target": "zip",
+                "arch": [
+                    "x64",
+                    "ia32"
+                ]
+            },
+            {
+                "target": "rpm",
+                "arch": [
+                    "x64",
+                    "ia32"
+                ]
+            }
+        ]
+    }
+}

config/webpack.config.main.js

@@ -0,0 +1,33 @@
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const path = require('path');
+
+const rootFolder = process.cwd();
+
+const dev = {
+    resolve: {
+        modules: ["node_modules", "react"],
+        extensions: ['.ts', '.tsx', ".js", ".jsx", ".json"]
+    },
+
+
+    devtool: 'source-map',
+
+    plugins: [
+        new CleanWebpackPlugin(['dist']),
+
+        new CopyWebpackPlugin([
+            {
+                from: path.join(rootFolder, 'src/package.json'),
+                to: path.join(rootFolder, 'dist/')
+            },
+            {
+                from: path.join(rootFolder, 'resources/*'),
+                to: path.join(rootFolder, 'dist/')
+            }
+        ])
+    ]
+};
+
+module.exports = dev;

config/webpack.config.renderer.js

@@ -0,0 +1,24 @@
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const path = require('path');
+
+const rootFolder = process.cwd();
+
+const dev = {
+    resolve: {
+        modules: ["node_modules", "react"],
+        extensions: ['.ts', '.tsx', ".js", ".jsx", ".json"]
+    },
+
+    devtool: 'source-map',
+
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: path.resolve(rootFolder, 'src', 'index.html'),
+            filename: path.resolve(rootFolder, 'dist', 'index.html')
+        })
+    ]
+};
+
+module.exports = dev;

package.json

@@ -1,42 +1,59 @@
 {
   "name": "figma-linux",
-  "version": "0.0.4",
+  "version": "0.0.4-2",
   "description": "Figma is the first interface design tool based in the browser, making it easier for teams to create software.",
   "main": "src/main/index.js",
   "repository": "git@github.com:ChugunovRoman/figma-linux.git",
   "homepage": "https://github.com/ChugunovRoman/figma-linux",
   "author": "ChugunovRoman <Zebs-BMK@yandex.ru>",
   "license": "MIT",
   "scripts": {
-    "start": "electron src/main/index.js",
-    "pack:deb": "redrun -s clear build deb",
-    "clear": "rm -rf Figma-app-linux-x64 ./build/app/*",
-    "build": "electron-packager ./ Figma-app --ignore=\"(\\.git|node_modules|build|\\.bak|\\.log|yarn)\" --paltform=Linux --arch=x64 --executable-name=figma-linux --overwrite ./build",
-    "deb": "electron-installer-debian --config ./config/debpack.json"
+    "dev": "electron-webpack dev",
+    "start": "electron dist/main/main.js",
+    "build": "electron-webpack app",
+    "builder": "electron-builder --config=config/builder.json -l",
+    "pack": "npm run build && npm run builder"
+  },
+  "electronWebpack": {
+    "main": {
+      "webpackConfig": "config/webpack.config.main.js"
+    },
+    "renderer": {
+      "webpackConfig": "config/webpack.config.renderer.js"
+    }
   },
   "dependencies": {
-    "electron": "^1.8.4",
     "raven": "^2.4.1",
     "raven-js": "^3.22.3",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
     "redrun": "^6.0.4",
     "redux": "^3.7.2",
+    "source-map-support": "^0.5.6",
     "styled-components": "^3.1.6"
   },
   "devDependencies": {
+    "@types/electron": "^1.6.10",
+    "@types/electron-devtools-installer": "^2.0.3",
+    "@types/node": "^10.5.1",
     "@types/react": "^16.0.38",
     "@types/react-dom": "^16.0.4",
     "@types/react-redux": "^5.0.15",
     "@types/redux": "^3.6.0",
     "awesome-typescript-loader": "^3.4.1",
-    "electron-installer-debian": "^0.7.1",
-    "electron-packager": "^10.1.0",
-    "electron-webpack": "^1.11.0",
-    "source-map-loader": "^0.2.3",
-    "typescript": "^2.7.2",
-    "webpack": "^3.11.0"
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
+    "clean-webpack-plugin": "^0.1.19",
+    "copy-webpack-plugin": "^4.5.2",
+    "electron": "^2.0.3",
+    "electron-builder": "^20.18.0",
+    "electron-webpack": "^2.1.2",
+    "fork-ts-checker-webpack-plugin": "^0.4.2",
+    "ts-loader": "^4.4.2",
+    "typescript": "^2.9.2",
+    "webpack": "^4.14.0",
+    "webpack-cli": "2.1.5"
   },
   "keywords": [
     "Figma",

src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Figma</title>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>

src/main/args.js → src/main/Args.ts

@@ -1,6 +1,6 @@
 const pjson = require('./../../package.json');
 
-module.exports = function(app) {
+export default () => {
     const argv = process.argv;
 
     let withoutFrame = true;
@@ -36,5 +36,4 @@ use:
     return {
         withoutFrame
     };
-} 
-
+}

src/main/index.js → src/main/index.ts

@@ -1,49 +1,54 @@
-const {
-    shell,
+import {
     app,
     net,
     session,
     BrowserWindow,
-} = require('electron');
-const url = require('url');
+} from 'electron';
+import * as url from "url";
 
-const shorcuts = require('./shortcuts');
-const menu = require('./menu');
-const argv = require('./args')(app);
+import shorcuts from './shortcuts';
+import menu from './menu';
+import getArgv from './Args';
 
-const HOME = 'https://www.figma.com'
-const winOptions = {
+const argv = getArgv();
+const HOME = 'https://www.figma.com';
+const winOptions: Electron.BrowserWindowConstructorOptions = {
     width: 1200,
     height: 900,
     frame: argv.withoutFrame,
     webPreferences: {
         nodeIntegration: false,
-        'web-security': false,
+        webSecurity: false,
         webgl: true,
         experimentalFeatures: true,
         experimentalCanvasFeatures: true,
         zoomFactor: 0.7
     }
 };
 
+app.on('browser-window-created', (event, window) => {
+    window.setMenu(null);
+});
+
 app.on('ready', () => {
     let window = new BrowserWindow(winOptions);
 
-    window.setMenuBarVisibility(false);
-    window.loadURL(HOME);
+    window.loadURL(`${HOME}/login`);
+    // console.log(`load url: ${HOME}/login`);
+
 
-    window.webContents.on('will-navigate', (event, url) => {
-        parts = url.split("/");
-        if (parts[0] + "//" + parts[2] != HOME) {
-            event.preventDefault()
-            shell.openExternal(url)
-        };
-    });
+    // window.webContents.on('will-navigate', (event, url) => {
+    //     const parts = url.split("/");
+
+    //     if (parts[0] + "//" + parts[2] != HOME) {
+    //         event.preventDefault();
+    //         shell.openExternal(url);
+    //     };
+    // });
 
     shorcuts(window);
     menu(window);
 
-
     window.webContents.on('will-navigate', (event, newUrl) => {
         const currentUrl = event.sender.getURL();
 
@@ -62,17 +67,19 @@ app.on('ready', () => {
             return;
         }
 
+        console.log('will-navigate event, to: ', to);
+
         if (to.pathname === '/logout') {
             net.request(`${HOME}/logout`).on('response', response => {
                 response.on('data', chunk => {});
-                response.on('error', err => {
+                response.on('error', (err: Error) => {
                     console.log('Request error: ', err);
                 });
                 response.on('end', () => {
                     console.log('response.statusCode: ', response.statusCode);
                     if (response.statusCode >= 200 && response.statusCode <= 299) {
 
-                        session.defaultSession.cookies.flushStore(() => {
+                        session.defaultSession!.cookies.flushStore(() => {
                             const reload = () => app.relaunch({
                                 args: process.argv.slice(1).concat(['--reset'])
                             });
@@ -81,8 +88,13 @@ app.on('ready', () => {
                             app.quit();
                         });
                     }
+
+                    if (response.statusCode >= 400) {
+                        session.defaultSession!.clearStorageData();
+                        window.webContents.loadURL(`${HOME}/login`);
+                    }
                 });
-            }).end();;
+            }).end();
 
             event.preventDefault();
             return;
@@ -93,13 +105,13 @@ app.on('ready', () => {
     //     console.log('did-navigate event args:', event.sender.getURL());
     // });
 
-    window.webContents.on('new-window', (...args) => {
-        console.log('new-window event args:', args);
-    });
+    // window.webContents.on('new-window', (...args) => {
+    //     console.log('new-window event args:', args);
+    // });
 
-    window.on('closed', () => {
-        window = null;
-    });
+    // window.on('closed', () => {
+    //     window = null;
+    // });
 });
 
 app.on('window-all-closed', () => {