Merge pull request #95 from KyleKing/dev/add-CRA-demo

Add Create-React-App Example

Author: ChrisKnott

examples/07 - CreateReactApp/.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+*.spec

examples/07 - CreateReactApp/Demo.png

@@ -0,0 +1,44 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br>
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

examples/07 - CreateReactApp/README-CRA.md

@@ -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)