How to use inside javascript. closes #22

pylover · Aug 5, 2021 · 6a7b7f7 · 6a7b7f7
1 parent 743278e
commit 6a7b7f7
Show file tree

Hide file tree

Showing 11 changed files with 173 additions and 17 deletions.
diff --git a/Makefile b/Makefile
@@ -59,6 +59,7 @@ BRYTHON_FILES = \
 
 DIST_FILES = \
 	$(WWWDIST)/index.html \
+	$(WWWDIST)/jsdemo.html \
 	$(WWWDIST)/check.html \
 	$(WWWDIST)/check.py \
 	$(WWWDIST)/kitchen.py \
@@ -72,13 +73,13 @@ $(WWWDIST)/adia.js:
 		--output-directory $(WWWDIST) \
 		adia
 
-$(WWWDIST)/stdlib.js: $(WWWDIST)/brython_stdlib.js
+$(WWWDIST)/lib.js: $(WWWDIST)/brython_stdlib.js
 	- mkdir -p $(WWWDIST)
 	brython pack-dependencies \
 		--output-directory $(WWWDIST) \
 		--search-directory $(ADIA) \
 		--stdlib-directory $(WWWDIST) \
-		--filename stdlib.js
+		--filename lib.js
 
 $(WWWDIST)/tests:
 	- mkdir -p $(WWWDIST)
@@ -92,9 +93,16 @@ $(DIST_FILES): $(WWWDIST)/%:
 	- mkdir -p $(WWWDIST)
 	ln -s $(shell readlink -f $(WWW)/$(shell basename $@)) $(WWWDIST_ABS)
 
+$(WWWDIST)/adia.bundle.js: $(BRYTHON_FILES) $(WWWDIST)/adia.js \
+	$(WWWDIST)/lib.js
+	cat $(WWWDIST)/brython.js > $@
+	cat $(WWWDIST)/brython_stdlib.js >> $@
+	cat $(WWWDIST)/adia.js >> $@
+
 .PHONY: www
-www: $(DIST_FILES) $(BRYTHON_FILES) $(WWWDIST)/adia.js $(WWWDIST)/tests \
-	$(WWWDIST)/stdlib.js
+www: $(DIST_FILES) $(WWWDIST)/adia.bundle.js $(WWWDIST)/adia.js \
+	$(WWWDIST)/tests $(WWWDIST)/lib.js
+
 
 .PHONY: serve
 serve: www
@@ -106,8 +114,9 @@ clean:
 	- rm -rf $(ADIA)/__pycache__
 	- rm $(DIST_FILES)
 	- rm $(WWWDIST)/tests
-	- rm $(WWWDIST)/stdlib.js
+	- rm $(WWWDIST)/lib.js
 	- rm $(WWWDIST)/adia.js
+	- rm $(WWWDIST)/adia.bundle.js
 	- rm dist/*.egg
 	- rm dist/*.gz
 

diff --git a/adia/__init__.py b/adia/__init__.py
@@ -2,7 +2,7 @@
 
 
 from .diagram import Diagram
-from .exceptions import InterpreterError
+from .exceptions import InterpreterError, BadAttribute, BadSyntax
 from .renderer import Renderer
 
 

diff --git a/documentation/faq.rst b/documentation/faq.rst
@@ -0,0 +1,2 @@
+FAQ
+===
diff --git a/documentation/index.rst b/documentation/index.rst
@@ -67,11 +67,10 @@ Contents
 .. toctree::
    :maxdepth: 2
 
-   tutorial
+   tutorials/index
    lang
    api
    faq
-   howto
 
 Indices and tables
 ******************

diff --git a/documentation/tutorial.rst b/documentation/tutorial.rst
diff --git a/documentation/tutorials/index.rst b/documentation/tutorials/index.rst
@@ -0,0 +1,8 @@
+Tutorials
+=========
+
+.. toctree:: 
+   :maxdepth: 2
+
+   javascript
+
diff --git a/documentation/tutorials/javascript.rst b/documentation/tutorials/javascript.rst
@@ -0,0 +1,67 @@
+Javascript
+==========
+
+Introduction
+************
+
+You may use the ``adia`` inside Javascript (browser) because we pass all tests 
+with both ``CPython`` and ``Brython`` environments before each commit.
+
+This page aims to demonstrate how to use the ``adia`` inside your javascript 
+project.
+
+For the first you have to generate ``adia.bundle.js`` using:
+
+.. code-block:: bash
+
+   cd path/to/adia
+   make www
+
+
+``www/build/adia.bundle.js`` is what you need now.
+
+Copy and paste the generated file inside your Javascript project's static
+directory, where you can fetch it by a URL. then load it using:
+
+.. code-block:: html
+
+   <html>
+   <head>
+   ...
+   <script type="text/javascript" src="adia.bundle.js"></script>
+   </head>
+   <body onload="brython()">
+   <script type="text/python">
+   from browser import window
+   from adia import renders, BadSyntax
+   
+   def adia_renders(source):
+     try:
+       return renders(source)
+     except BadSyntax as ex:
+       return f'Error: {ex}'
+   
+   window.adiaRenders = adia_renders
+   </script>
+
+   ...
+
+   </body>
+   </html>
+
+
+After the setup above you can use the function ``window.adiaRenders(...)`` 
+anywhere.
+
+
+Javascript demo page
+********************
+
+Let's make and visit the provided javascript demo page: ``www/jsdemo.html``.
+
+.. code-block:: bash
+
+   cd path/to/adia
+   make clean serve
+
+Now browse the http://localhost:8000/jsdemo.html.
diff --git a/www/check.html b/www/check.html
@@ -4,7 +4,7 @@
 <head>
 <meta charset="utf-8">
 <script type="text/javascript" src="brython.js"></script>
-<script type="text/javascript" src="stdlib.js"></script>
+<script type="text/javascript" src="lib.js"></script>
 <script type="text/javascript" src="adia.js"></script>
 <style>
   font-family: monospace;

diff --git a/www/index.html b/www/index.html
@@ -3,9 +3,7 @@
 
 <head>
 <meta charset="utf-8">
-<script type="text/javascript" src="brython.js"></script>
-<script type="text/javascript" src="stdlib.js"></script>
-<script type="text/javascript" src="adia.js"></script>
+<script type="text/javascript" src="adia.bundle.js"></script>
 <style>
   font-family: monospace;
 </style>

diff --git a/www/jsdemo.html b/www/jsdemo.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html>
+
+<head>
+<meta charset="utf-8">
+<script type="text/javascript" src="adia.bundle.js"></script>
+<style>
+  font-family: monospace;
+</style>
+</head>
+
+<body onload="brython({debug: 1})">
+
+<a href="/check.html">Jump to tests</a>
+<br />
+
+<textarea cols="100%" rows="8" id="error"></textarea>
+<br />
+<textarea cols="55" rows="40" id="source">
+diagram: ADia demo
+version: 1.0
+author: pylover
+
+sequence:
+
+@foo: Start
+foo -> bar: hello() -> HI
+  bar -> baz: hey() -> Hey
+
+@foo: End
+</textarea>
+<textarea cols="120" rows="40" id="target"></textarea>
+
+<script type="text/python">
+from browser import window
+from adia import renders, BadSyntax
+
+def adia_renders(source):
+  try:
+    return renders(source)
+  except BadSyntax as ex:
+    return f'Error: {ex}'
+
+window.adiaRenders = adia_renders
+</script>
+
+<script>
+let source = document.getElementById('source');
+let target = document.getElementById('target');
+let error = document.getElementById('error');
+
+function refresh(ev) {
+  if (window.adiaRenders == undefined) {
+    setTimeout(refresh, 200);
+    return;
+  }
+
+  if ((ev != undefined) && (ev.charCode != undefined) && 
+      (ev.charCode != 13)) {
+    return;
+  }
+  var out = window.adiaRenders(source.value);
+  if (out.startsWith('Error: ')) {
+    error.value = out; 
+  }
+  else {
+    error.value = ''; 
+    target.value = out;
+  }
+}
+
+window.addEventListener('load', refresh);
+source.addEventListener('keypress', refresh);
+</script>
+
+</body>
+</html>
diff --git a/www/kitchen.html b/www/kitchen.html
@@ -4,7 +4,7 @@
 <head>
 <meta charset="utf-8">
 <script type="text/javascript" src="brython.js"></script>
-<script type="text/javascript" src="stdlib.js"></script>
+<script type="text/javascript" src="lib.js"></script>
 <script type="text/javascript" src="adia.js"></script>
 <style>
   font-family: monospace;