Add: full Eel-CRA demo

Author: KyleKing

examples/07 - CreateReactApp/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*.spec

examples/07 - CreateReactApp/Demo.png

@@ -0,0 +1,53 @@
+# README
+
+Eello World example Create-React-App (CRA) with Eel. This particular project was bootstrapped with `npx create-react-app 07_CreateReactApp --typescript` (Typescript enabled), but the below modifications can be implemented in any CRA configuration or CRA version.
+
+If you run into any issues with this example, open a [new issue](https://github.com/ChrisKnott/Eel/issues/new) and tag @KyleKing
+
+## Quick Start
+
+1. In the app's directory, run `npm install` and `pip install bottle bottle-websocket future whichcraft pyinstaller`
+2. Build the application with `npm run build`
+3. Run the built version with `python eel_CRA.py`. A Chrome window should open running the code from `build/`
+4. Build a binary distribution with PyInstaller using `python -m eel eel_CRA.py build --onefile` (See more detailed instructions at bottom of [the main README](https://github.com/ChrisKnott/Eel))
+5. For development, open two prompts. In one, run  `python eel_CRA.py true` and the other, `npm start`. A browser window should open in your default web browser at: [http://localhost:3000/](http://localhost:3000/). As you make changes to the JavaScript in `src/` the browser will reload. Any changes to `eel_CRA.py` will require a restart to take effect. You may need to refresh the browser window if it gets out of sync with eel.
+
+![Demo.png](Demo.png)
+
+## About
+
+These are the changes needed to convert the basic CRA application for Eel support.
+
+### Use `window.eel.expose(func, 'func')` with `npm run build`
+
+> TLDR: CRA's default code mangling in `npm run build` will rename variables and functions. To handle these changes, convert all `eel.expose(funcName)` to `window.eel(funcName, 'funcName')`. This workaround guarantees that 'funcName' will be available to call from Python
+
+When you run `npm run build`, CRA generates a mangled and minified JavaScript file. The mangling will change `eel.expose(funcName)` to something like `D.expose(J)`. The modified code won't be recognized by the Eel static JS-code analyzer, which uses a regular expression to look for `eel.expose(*)` and the function name expected in python, `funcName`, is now mangled as `J`.
+
+The easy workaround is just to refactor `eel.expose(funcName)` to `window.eel(funcName, 'func_name')` where `window.eel` prevents `eel` from being mangled. Then `eel.func_name()` can be called from Python
+
+### src/App.tsx
+
+Modified to demonstrate exposing a function from JavaScript and how to use callbacks from Python to update React GUI.
+
+### eel_CRA.py
+
+Basic eel file that exposes two Python functions to JavaScript. If a second argument (i.e. `true`) is provided, the app uses a development mode for a server already alive on port 3000; otherwise, the script will load `index.html` from the build/ directory, which is what you want for building from a binary.
+
+### public/index.html
+
+Added location of `eel.js` file based on options set in eel_CRA.py.
+
+```html
+<!-- Load eel.js from the port specified in the eel.start options -->
+<script type="text/javascript" src="http://localhost:8080/eel.js"></script>
+```
+
+### src/react-app-env.d.ts
+
+This file declares window.eel as a valid type for tslint. Note: capitalization of `window`
+
+
+### src/App.css
+
+Added some basic button styling :)

examples/07 - CreateReactApp/README.md

@@ -0,0 +1,58 @@
+import sys
+sys.path.insert(1, '../../')
+# Use latest version of Eel from parent directory
+
+import os
+import random
+
+import eel
+
+
+@eel.expose                         # Expose this function to JavaScript
+def say_hello_py(x):
+    # Print to Python console
+    print('Hello from %s' % x)
+    # Call a JavaScript function
+    eel.say_hello_js('Python {from within say_hello_py()}!')
+
+
+@eel.expose
+def pick_file(folder):
+    folder = os.path.expanduser(folder)
+    if os.path.isdir(folder):
+        return random.choice(os.listdir(folder))
+    else:
+        return '{} is not a valid folder'.format(folder)
+
+
+def start_eel(develop):
+    """Start Eel with either production or development configuration"""
+    if develop:
+        directory = 'src'
+        app = None
+        page = {'port': 3000}
+        flags = ['--auto-open-devtools-for-tabs']
+    else:
+        directory = 'build'
+        app = 'chrome-app'
+        page = 'index.html'
+        flags = []
+
+    eel.init(directory, ['.tsx', '.ts', '.jsx', '.js', '.html'])
+
+    # These will be queued until the first connection is made, but won't be repeated on a page reload
+    say_hello_py('Python World!')
+    eel.say_hello_js('Python World!')   # Call a JavaScript function (must be after `eel.init()`)
+
+    eel.start(page, size=(1280, 800), options={
+        'mode': app,
+        'port': 8080,
+        'host': 'localhost',
+        'chromeFlags': flags
+    })
+
+if __name__ == '__main__':
+    import sys
+
+    # Pass any second argument to enable debugging. Production distribution can't receive arguments
+    start_eel(develop=len(sys.argv) == 2)

examples/07 - CreateReactApp/eel_CRA.py

@@ -23,6 +23,10 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+
+    <!-- Load eel.js from the port specified in the eel.start options -->
+    <script type="text/javascript" src="http://localhost:8080/eel.js"></script>
+
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

examples/07 - CreateReactApp/public/index.html

@@ -18,8 +18,18 @@
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
+.App-button {
+  background-color: #61dafb;
+  border-radius: 2vmin;
+  color: #282c34;
+  font-size: calc(10px + 2vmin);
+  padding: 2vmin;
+}
+
+
+.App-button:hover {
+  background-color: #7ce3ff;
+  cursor: pointer;
 }
 
 @keyframes App-logo-spin {

examples/07 - CreateReactApp/src/App.css

@@ -2,23 +2,42 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-class App extends Component {
-  render() {
+// Point Eel web socket to the instance
+export const eel = window.eel
+eel.set_host( 'ws://localhost:8080' )
+
+// Expose the `sayHelloJS` function to Python as `say_hello_js`
+function sayHelloJS( x: any ) {
+  console.log( 'Hello from ' + x )
+}
+// WARN: must use window.eel to keep parse-able eel.expose{...}
+window.eel.expose( sayHelloJS, 'say_hello_js' )
+
+// Test calling sayHelloJS, then call the corresponding Python function
+sayHelloJS( 'Javascript World!' )
+eel.say_hello_py( 'Javascript World!' )
+
+
+interface IAppState {
+  message: string
+}
+
+export class App extends Component<{}, {}> {
+  public state: IAppState = {
+    message: `Click button to choose a random file from the user's sustem`
+  }
+
+  public pickFile = () => {
+    eel.pick_file('~')(( message: string ) => this.setState( { message } ) )
+  }
+
+  public render() {
     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.tsx</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
+          <p>{this.state.message}</p>
+          <button className='App-button' onClick={this.pickFile}>Pick Random File From `~/*`</button>
         </header>
       </div>
     );

examples/07 - CreateReactApp/src/App.tsx

@@ -1 +1,7 @@
 /// <reference types="react-scripts" />
+
+interface Window {
+  eel: any;
+}
+
+declare var window: Window;