timw4mail/film-exif
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Screw IPC, I'm going with websockets

Browse Source
This commit is contained in:
Timothy Warren 2018-04-12 21:57:16 -04:00
parent 95a52dd535
commit 5e90a0f0a8
12 changed files with 483 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

456
config/webpack.config.dev.js
View File

@ -26,236 +26,236 @@ const env = getClientEnvironment(publicUrl);
// It is focused on developer experience and fast rebuilds. // It is focused on developer experience and fast rebuilds.
// The production configuration is different and lives in a separate file. // The production configuration is different and lives in a separate file.
module.exports = { module.exports = {
// You may want 'eval' instead if you prefer to see the compiled output in DevTools. // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/infernojs/create-inferno-app/issues/343. // See the discussion in https://github.com/infernojs/create-inferno-app/issues/343.
devtool: 'cheap-module-source-map', devtool: 'cheap-module-source-map',
// These are the "entry points" to our application. // These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle. // This means they will be the "root" imports that are included in JS bundle.
// The first two entry points enable "hot" CSS and auto-refreshes for JS. // The first two entry points enable "hot" CSS and auto-refreshes for JS.
entry: [ entry: [
// We ship a few polyfills by default: // We ship a few polyfills by default:
require.resolve('./polyfills'), require.resolve('./polyfills'),
// Include an alternative client for WebpackDevServer. A client's job is to // Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes. // connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case // When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you // of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay. // make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one // Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create Inferno App users. You can replace // to bring better experience for Create Inferno App users. You can replace
// the line below with these two lines if you prefer the stock client: // the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/', // require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'), // require.resolve('webpack/hot/dev-server'),
require.resolve('inferno-dev-utils/webpackHotDevClient'), require.resolve('inferno-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code: // Finally, this is your app's code:
paths.appIndexJs, paths.appIndexJs,
// We include the app code last so that if there is a runtime error during // We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and // initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh. // changing JS code would still trigger a refresh.
], ],
output: { output: {
// Add /* filename */ comments to generated require()s in the output. // Add /* filename */ comments to generated require()s in the output.
pathinfo: true, pathinfo: true,
// This does not produce a real file. It's just the virtual path that is // This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle // served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime. // containing code from all our entry points, and the Webpack runtime.
filename: 'static/js/bundle.js', filename: 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting. // There are also additional JS chunk files if you use code splitting.
chunkFilename: 'static/js/[name].chunk.js', chunkFilename: 'static/js/[name].chunk.js',
// This is the URL that app is served from. We use "/" in development. // This is the URL that app is served from. We use "/" in development.
publicPath: publicPath, publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows) // Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info => devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'), path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
}, },
resolve: { resolve: {
// This allows you to set a fallback for where Webpack should look for modules. // This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win" // We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism. // if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/infernojs/create-inferno-app/issues/253 // https://github.com/infernojs/create-inferno-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat( modules: ['node_modules', paths.appNodeModules].concat(
// It is guaranteed to exist because we tweak it in `env.js` // It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean) process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
), ),
// These are the reasonable defaults supported by the Node ecosystem. // These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support // We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see: // some tools, although we do not recommend using it, see:
// https://github.com/infernojs/create-inferno-app/issues/290 // https://github.com/infernojs/create-inferno-app/issues/290
// `web` extension prefixes have been added for better support // `web` extension prefixes have been added for better support
// for React Native Web. // for React Native Web.
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'], extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: { alias: {
// Use development build of inferno for better validations during development process // Use development build of inferno for better validations during development process
inferno: path.resolve(require.resolve('inferno/dist/index.dev.esm.js')), inferno: path.resolve(require.resolve('inferno/dist/index.dev.esm.js')),
}, },
plugins: [ plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/). // Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel. // This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to, // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in. // please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way. // Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
], ],
}, },
module: { module: {
strictExportPresence: true, strictExportPresence: true,
rules: [ rules: [
// TODO: Disable require.ensure as it's not a standard language feature. // TODO: Disable require.ensure as it's not a standard language feature.
// We are waiting for https://github.com/facebookincubator/create-inferno-app/issues/2176. // We are waiting for https://github.com/facebookincubator/create-inferno-app/issues/2176.
// { parser: { requireEnsure: false } }, // { parser: { requireEnsure: false } },
// First, run the linter. // First, run the linter.
// It's important to do this before Babel processes the JS. // It's important to do this before Babel processes the JS.
{ {
test: /\.(js|jsx|mjs)$/, test: /\.(js|jsx|mjs)$/,
enforce: 'pre', enforce: 'pre',
use: [ use: [
{ {
options: { options: {
formatter: eslintFormatter, formatter: eslintFormatter,
eslintPath: require.resolve('eslint'), eslintPath: require.resolve('eslint'),
}, },
loader: require.resolve('eslint-loader'), loader: require.resolve('eslint-loader'),
}, },
], ],
include: paths.appSrc, include: paths.appSrc,
}, },
{ {
// "oneOf" will traverse all following loaders until one will // "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall // match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list. // back to the "file" loader at the end of the loader list.
oneOf: [ oneOf: [
// "url" loader works like "file" loader except that it embeds assets // "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests. // smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match. // A missing `test` is equivalent to a match.
{ {
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'), loader: require.resolve('url-loader'),
options: { options: {
limit: 10000, limit: 10000,
name: 'static/media/[name].[hash:8].[ext]', name: 'static/media/[name].[hash:8].[ext]',
}, },
}, },
// Process JS with Babel. // Process JS with Babel.
{ {
test: /\.(js|jsx|mjs)$/, test: /\.(js|jsx|mjs)$/,
include: paths.appSrc, include: paths.appSrc,
loader: require.resolve('babel-loader'), loader: require.resolve('babel-loader'),
options: { options: {
// This is a feature of `babel-loader` for webpack (not Babel itself). // This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/ // It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds. // directory for faster rebuilds.
cacheDirectory: true, cacheDirectory: true,
}, },
}, },
// "postcss" loader applies autoprefixer to our CSS. // "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies. // "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags. // "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but // In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS. // in development "style" loader enables hot editing of CSS.
{ {
test: /\.css$/, test: /\.css$/,
use: [ use: [
require.resolve('style-loader'), require.resolve('style-loader'),
{ {
loader: require.resolve('css-loader'), loader: require.resolve('css-loader'),
options: { options: {
importLoaders: 1, importLoaders: 1,
}, },
}, },
{ {
loader: require.resolve('postcss-loader'), loader: require.resolve('postcss-loader'),
options: { options: {
// Necessary for external CSS imports to work // Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677 // https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss', ident: 'postcss',
plugins: () => [ plugins: () => [
require('postcss-flexbugs-fixes'), require('postcss-flexbugs-fixes'),
autoprefixer({ autoprefixer({
browsers: [ browsers: [
'>1%', '>1%',
'last 4 versions', 'last 4 versions',
'Firefox ESR', 'Firefox ESR',
'not ie < 11', 'not ie < 11',
], ],
flexbox: 'no-2009', flexbox: 'no-2009',
}), }),
], ],
}, },
}, },
], ],
}, },
// "file" loader makes sure those assets get served by WebpackDevServer. // "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename. // When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder. // In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules // This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders. // that fall through the other loaders.
{ {
// Exclude `js` files to keep "css" loader working as it injects // Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise processed through "file" loader. // its runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed // Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders. // by webpacks internal loaders.
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/], exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'), loader: require.resolve('file-loader'),
options: { options: {
name: 'static/media/[name].[hash:8].[ext]', name: 'static/media/[name].[hash:8].[ext]',
}, },
}, },
], ],
}, },
// ** STOP ** Are you adding a new loader? // ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader. // Make sure to add the new loader(s) before the "file" loader.
], ],
}, },
plugins: [ plugins: [
// Makes some environment variables available in index.html. // Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.: // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In development, this will be an empty string. // In development, this will be an empty string.
new InterpolateHtmlPlugin(env.raw), new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected. // Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
inject: true, inject: true,
template: paths.appHtml, template: paths.appHtml,
}), }),
// Add module names to factory functions so they appear in browser profiler. // Add module names to factory functions so they appear in browser profiler.
new webpack.NamedModulesPlugin(), new webpack.NamedModulesPlugin(),
// Makes some environment variables available to the JS code, for example: // Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`. // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
new webpack.DefinePlugin(env.stringified), new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only): // This is necessary to emit hot updates (currently CSS only):
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use // Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this. // a plugin that prints an error when you attempt to do this.
// See https://github.com/infernojs/create-inferno-app/issues/240 // See https://github.com/infernojs/create-inferno-app/issues/240
new CaseSensitivePathsPlugin(), new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have // If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin // to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart. // makes the discovery automatic so you don't have to restart.
// See https://github.com/infernojs/create-inferno-app/issues/186 // See https://github.com/infernojs/create-inferno-app/issues/186
new WatchMissingNodeModulesPlugin(paths.appNodeModules), new WatchMissingNodeModulesPlugin(paths.appNodeModules),
// Moment.js is an extremely popular library that bundles large locale files // Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical // by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales. // solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js: // You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
], ],
// Some libraries import Node modules but don't use them in the browser. // Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works. // Tell Webpack to provide empty mocks for them so importing them works.
node: { node: {
dgram: 'empty', dgram: 'empty',
fs: 'empty', fs: 'empty',
net: 'empty', net: 'empty',
tls: 'empty', tls: 'empty',
child_process: 'empty', child_process: 'empty',
}, },
// Turn off performance hints during development because we don't do any // Turn off performance hints during development because we don't do any
// splitting or minification in interest of speed. These warnings become // splitting or minification in interest of speed. These warnings become
// cumbersome. // cumbersome.
performance: { performance: {
hints: false, hints: false,
}, },
}; };

7
package.json
View File

@ -9,7 +9,10 @@
"inferno": "^5.0.1", "inferno": "^5.0.1",
"inferno-bootstrap": "^5.0.0", "inferno-bootstrap": "^5.0.0",
"inferno-dev-utils": "^5.3.0", "inferno-dev-utils": "^5.3.0",
"inferno-router": "^5.0.1" "inferno-router": "^5.0.1",
"isomorphic-ws": "^4.0.0",
"lodash": "^4.17.5",
"ws": "^5.1.1"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^8.2.0", "autoprefixer": "^8.2.0",
@ -19,6 +22,7 @@
"babel-loader": "^7.1.4", "babel-loader": "^7.1.4",
"babel-preset-inferno-app": "^7.1.0", "babel-preset-inferno-app": "^7.1.0",
"babel-runtime": "6.26.0", "babel-runtime": "6.26.0",
"bootstrap": "^4",
"case-sensitive-paths-webpack-plugin": "^2.1.2", "case-sensitive-paths-webpack-plugin": "^2.1.2",
"chalk": "2.3.2", "chalk": "2.3.2",
"css-loader": "^0.28.11", "css-loader": "^0.28.11",
@ -42,6 +46,7 @@
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"husky": "^0.14.3", "husky": "^0.14.3",
"jest": "^22.4.3", "jest": "^22.4.3",
"jquery": "^3.3.1",
"object-assign": "4.1.1", "object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.3.0", "postcss-flexbugs-fixes": "3.3.0",
"postcss-loader": "^2.1.3", "postcss-loader": "^2.1.3",

107
public/css/app.css
View File

@ -44,3 +44,110 @@ bs-jumbotron {
} }
/*! Ids */ /*! Ids */
/* -----------------------------------------------------------------------------
CSS loading icon
------------------------------------------------------------------------------*/
cssload-loader {
display: flex;
/* position: relative;
left: calc(50% - 50px); */
justify-content: center;
width: 100px;
height: 100px;
border-radius: 50%;
perspective: 780px;
margin: auto;
}
.cssload-inner {
position: absolute;
width: 100%;
height: 100%;
margin: auto;
box-sizing: border-box;
border-radius: 50%;
}
cssload-one {
left: 0%;
top: 0%;
animation: cssload-rotate-one 1.15s linear infinite;
border-bottom: 3px solid rgb(0,0,0);
}
cssload-two {
right: 0%;
top: 0%;
animation: cssload-rotate-two 1.15s linear infinite;
border-right: 3px solid rgb(0,0,0);
}
cssload-three {
right: 0%;
bottom: 0%;
animation: cssload-rotate-three 1.15s linear infinite;
border-top: 3px solid rgb(0,0,0);
}
@keyframes cssload-rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes cssload-rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes cssload-rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
/* ----------------------------------------------------------------------------
Loading overlay
-----------------------------------------------------------------------------*/
#loading-shadow {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 500;
}
#loading-shadow loading-wrapper {
position: fixed;
z-index: 501;
top: 0;
left: 0;
width: 100%;
height: 100%;
display:flex;
align-items: center;
justify-content: center;
}
#loading-shadow loading-content {
position: relative;
color: #fff
}
loading-content .cssload-inner {
border-color: #fff
}

92
src/App.js
View File

@ -1,4 +1,8 @@
import * as _ from 'lodash';
import { Component } from 'inferno';
import { BrowserRouter, Link, NavLink } from 'inferno-router'; import { BrowserRouter, Link, NavLink } from 'inferno-router';
import WS from 'isomorphic-ws';
import { Loader } from './components';
import { import {
Container, Container,
Nav, Nav,
@ -8,24 +12,70 @@ import {
} from './components/Bootstrap'; } from './components/Bootstrap';
import { Routes } from './Routes'; import { Routes } from './Routes';
export const App = () => ( export class App extends Component {
<BrowserRouter> constructor (props) {
<Container className="full-height" tag="bs-container"> super(props);
<Navbar className="static-top" color="dark" dark expandable="sm">
<NavbarBrand to="/" tag={Link}>Film Exif</NavbarBrand> this.state = {
<Nav fill pills> webSocketLoaded: false,
<NavItem> };
<NavLink className="nav-link" to="/camera/list">Cameras</NavLink>
</NavItem> _.bindAll(this, [
<NavItem> 'onWebSocketOpen',
<NavLink className="nav-link" to="/film/add">Films</NavLink> 'onWebSocketClose',
</NavItem> ]);
<NavItem> }
<NavLink className="nav-link" to="/oops">Oops</NavLink>
</NavItem> componentDidMount () {
</Nav> window.clientWS = new WS('ws://localhost:65432/');
</Navbar>
<Routes /> window.clientWS.addEventListener('open', this.onWebSocketOpen);
</Container> window.clientWS.addEventListener('message', console);
</BrowserRouter> window.clientWS.addEventListener('close', this.onWebSocketClose);
); }
componentWillUnmount () {
if (window.clientWS) {
window.clientWS.close();
}
}
onWebSocketOpen () {
this.setState({
webSocketLoaded: true,
});
window.clientWS.onmessage = console.info;
console.info(window.clientWS);
}
onWebSocketClose () {
console.log('WebSocket closed');
}
render () {
return (
<BrowserRouter>
<Container className="full-height" tag="bs-container">
<Navbar className="static-top" color="dark" dark expandable="sm">
<NavbarBrand to="/" tag={Link}>Film Exif</NavbarBrand>
<Nav fill pills>
<NavItem>
<NavLink className="nav-link" to="/camera/list">Cameras</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to="/film/add">Films</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to="/oops">Oops</NavLink>
</NavItem>
</Nav>
</Navbar>
<Routes />
<Loader title="Connecting to WebSocket" hidden={this.state.webSocketLoaded} />
</Container>
</BrowserRouter>
);
}
}

24
src/components/Loader.js Normal file
View File

@ -0,0 +1,24 @@
/**
* Overlay loader component
*
* @param {object} props
* @param {boolean} props.hidden
* @param {string} props.title
*/
export const Loader = (props) => {
return (
<section id="loading-shadow" hidden={props.hidden}>
<loading-wrapper>
<loading-content>
<h3>{props.title}</h3>
<br />
<cssload-loader>
<cssload-one className="cssload-inner" />
<cssload-two className="cssload-inner" />
<cssload-three className="cssload-inner" />
</cssload-loader>
</loading-content>
</loading-wrapper>
</section>
);
};

1
src/components/index.js
View File

@ -1,2 +1,3 @@
export * from './Bootstrap'; export * from './Bootstrap';
export * from './Form'; export * from './Form';
export * from './Loader';

5
src/electron/events.js
View File

@ -1,5 +0,0 @@
const { ipcMain } = require('electron');
ipcMain.on('dropped-files', () => {
});

1
src/electron/preload.js Normal file
View File

@ -0,0 +1 @@
window.ipcRenderer = require('electron').ipcRenderer;

12
src/electron/starter.js
View File

@ -4,6 +4,8 @@ const app = electron.app;
// Module to create native browser window. // Module to create native browser window.
const BrowserWindow = electron.BrowserWindow; const BrowserWindow = electron.BrowserWindow;
const WS = require('isomorphic-ws');
const path = require('path'); const path = require('path');
const url = require('url'); const url = require('url');
@ -31,9 +33,9 @@ const createWindow = () => {
}); });
mainWindow.loadURL(startUrl); mainWindow.loadURL(startUrl);
// Open the DevTools. // Open the DevTools.
/* mainWindow.webContents.openDevTools({ mainWindow.webContents.openDevTools({
mode: 'bottom', mode: 'bottom',
}); */ });
// Emitted when the window is closed. // Emitted when the window is closed.
mainWindow.on('closed', () => { mainWindow.on('closed', () => {
@ -66,6 +68,10 @@ app.on('activate', () => {
} }
}); });
const wss = new WS.Server({
port: 65432,
});
// In this file you can include the rest of your app's specific main process // In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here. // code. You can also put them in separate files and require them here.
require('./events'); require('./websocket-events')(wss);

13
src/electron/websocket-events.js Normal file
View File

@ -0,0 +1,13 @@
/**
* Websocket event handlers
*/
module.exports = (wss) => {
wss.on('open', ws => {
wss.send('server-log', 'Connected to client!');
wss.on('dropped-files', e => {
wss.send('recieved-dropped-files', e);
});
});
};

3
src/views/HomeView.js
View File

@ -8,6 +8,9 @@ function handleDrop (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
// console.log(e.dataTransfer.files);
window.clientWS.send('dropped-files', e.dataTransfer.files);
for (const f of e.dataTransfer.files) { for (const f of e.dataTransfer.files) {
console.log('Dragged files', f.path); console.log('Dragged files', f.path);
} }

22
yarn.lock
View File

@ -1062,7 +1062,7 @@ babel-preset-jest@^22.4.3:
babel-register@^6.26.0: babel-register@^6.26.0:
version "6.26.0" version "6.26.0"
resolved "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071" resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
dependencies: dependencies:
babel-core "^6.26.0" babel-core "^6.26.0"
babel-runtime "^6.26.0" babel-runtime "^6.26.0"
@ -1238,6 +1238,10 @@ boom@5.x.x:
dependencies: dependencies:
hoek "4.x.x" hoek "4.x.x"
bootstrap@^4:
version "4.1.0"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.0.tgz#110b05c31a236d56dbc9adcda6dd16f53738a28a"
boxen@^1.2.1: boxen@^1.2.1:
version "1.3.0" version "1.3.0"
resolved "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b" resolved "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@ -4463,6 +4467,10 @@ isomorphic-fetch@^2.1.1:
node-fetch "^1.0.1" node-fetch "^1.0.1"
whatwg-fetch ">=0.10.0" whatwg-fetch ">=0.10.0"
isomorphic-ws@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-4.0.0.tgz#7b528b238c920eeb3f5fe429ac416df669ea4cba"
isstream@~0.1.2: isstream@~0.1.2:
version "0.1.2" version "0.1.2"
resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a" resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@ -4800,6 +4808,10 @@ jest@^22.4.3:
import-local "^1.0.0" import-local "^1.0.0"
jest-cli "^22.4.3" jest-cli "^22.4.3"
jquery@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
js-base64@^2.1.9: js-base64@^2.1.9:
version "2.4.3" version "2.4.3"
resolved "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582" resolved "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
@ -5102,7 +5114,7 @@ lodash.uniq@^4.5.0:
version "4.5.0" version "4.5.0"
resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0: "lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
version "4.17.5" version "4.17.5"
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
@ -8175,6 +8187,12 @@ ws@^4.0.0:
async-limiter "~1.0.0" async-limiter "~1.0.0"
safe-buffer "~5.1.0" safe-buffer "~5.1.0"
ws@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/ws/-/ws-5.1.1.tgz#1d43704689711ac1942fd2f283e38f825c4b8b95"
dependencies:
async-limiter "~1.0.0"
xdg-basedir@^3.0.0: xdg-basedir@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4" resolved "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"