Added doc jspython-interpreter

ViktorKukurba · ViktorKukurba · commit ed3a518da15c · 2019-12-17T14:34:04.000+02:00
diff --git a/rollup.config.js b/rollup.config.js
@@ -7,7 +7,7 @@ const input = 'src/interpreter.ts';
 
 export default [{
   input,
-  output: { file: pkg.main, name: 'jspython', format: 'umd', sourcemap: true, compact: true, globals: {} },
+  output: { file: pkg.main, name: 'jspython', format: 'umd', sourcemap: true, compact: true },
   external: [],
   treeshake: true,
   plugins: [
diff --git a/website/docs/jspython-interpreter.md b/website/docs/jspython-interpreter.md
@@ -4,14 +4,112 @@ title: How to run JSPython interpreter
 sidebar_label: JSPython interpreter
 ---
 
+## Install  JS Python Interpreter
+
+```
+npm i jspython-interpreter
+```
+
 ## How to use JS Python Interpreter
 
+#### ECMAScript module
+
+```js
+import { jsPython } from 'jspython-interpreter';
+```
+
+#### CommonJS module
+
+```js
+const jsPython = require('jspython-interpreter').jsPython;
+```
+
+#### Append `<script>` in html
+
+```html
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jspython-interpreter/dist/jspython-interpreter.min.js"></script>
+
+<script>
+const jsPython = window.jspython.jsPython
+</script>
+```
+
+## Create interpreter and evaluate script.
+
+```js
+const script = `
+  x = 2 + 3
+  x
+`;
+const interpreter = jsPython();
+interpreter.evaluate(script).then(res => {
+  consoe.log(res); // 5
+})
+```
+
 ## Expose functions for JSPython import
 
-### In browser app
+### Install needed modules localy using `npm install moduleName` command.
+
+### Register package loader function to use js libraries in your script.
+#### In browser app
+```js
+import * as papaparse from 'papaparse';
+import * as dataPipe from 'datapipe-js';
+
+const AVAILABLE_PACKAGES = {
+  papaparse,
+  'datapipe-js': dataPipe
+};
+
+interpreter.registerPackagesLoader((packageName) => {
+  return AVAILABLE_PACKAGES[packageName];
+});
+
+```
+
+#### In NodeJS
+```js
+interpreter.registerPackagesLoader((packageName) => {
+  return require(packageName);
+});
+```
+### Import js libraries in script
+```js
+import axios // import library
+from fs import readFileSync as rfs, writeFileSync // import only methods from library
+import json5 as JSON5 // use as to provide appropriate name for lib.
+res = axios.get("data/url")
+```
+
+## Register to the global scope
+#### Make custom function available in script.
+```js
+interpreter.addFunction('greeting', (name) => {
+  return 'Hello ' + name + '!';
+});
 
-### In NodeJS
+await interpreter.evaluate('greeting("John")') // Hello John.
+```
 
-## Register functions to the global scope
+#### Make object availabel in script
+```js
+interpreter.assignGlobalContext({
+  method1: () => 1,
+  prop1: 2
+})
+const script = `
+  v = method1() + prop1
+  v
+`
+await interpreter.evaluate(script) // 3.
+```
 
 ## Provide evaluation context
+```js
+const script = `
+  v = prop1 + prop2
+  v
+`
+await interpreter.evaluate(script, {prop1: 3, prop2: -2}) // 1
+```
diff --git a/website/src/components/JSPythonEditor.js b/website/src/components/JSPythonEditor.js
@@ -1,16 +1,29 @@
 import React from 'react';
 import AceEditor from "react-ace";
-
 import '../../../src/assets/mode-jspython';
 import 'ace-builds/src-noconflict/theme-github';
+import 'ace-builds/src-noconflict/theme-tomorrow_night';
 
 class JSPythonEditor extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: this.props.value
+      value: this.props.value,
+      theme: this.theme
     }
-    this.onChange = this.onChange.bind(this)
+    this.onChange = this.onChange.bind(this);
+    document.querySelector('.navbar .react-toggle').addEventListener('click', () => {
+      setTimeout(() => {
+        this.setState({
+          theme: this.theme
+        })
+      });
+    });
+  }
+
+  get theme() {
+    const appTheme = document.querySelector('html').getAttribute('data-theme');
+    return appTheme === 'dark' ? 'tomorrow_night' : 'github'
   }
 
   onChange(newValue) {
@@ -33,7 +46,7 @@ class JSPythonEditor extends React.Component {
         mode="python"
         height="100%"
         width="100%"
-        theme="github"
+        theme={this.state.theme}
         value={this.state.value}
         onChange={this.onChange}
         editorProps={{ $blockScrolling: true }}
