Merge pull request #191 from berinhard/pr186

Always use CDN as JS servers

CHANGELOG.md

@@ -1,5 +1,7 @@
 Development
 -----------
+- Serve pyodide JS files locally [PR #186](https://github.com/berinhard/pyp5js/pull/186)
+- Create sketch using p5.js from CDN [PR #191](https://github.com/berinhard/pyp5js/pull/191)
 - Add `keyIsDown` event to Transcrypt mode - [PR #187](https://github.com/berinhard/pyp5js/pull/187)
 - Fix bug with multiple events calls - PR #187 too
 

MANIFEST.in

@@ -1,4 +1,3 @@
-recursive-include pyp5js/static *
 recursive-include pyp5js/templates *
 recursive-include pyp5js/http/templates *
 recursive-include pyp5js/http/static *

docs/index.md

@@ -69,11 +69,7 @@ $ SKETCHBOOK_DIR='~/my-custom-sketchbook' pyp5js serve
 
 Now, have fun =]
 
-## Internals details
-
-The web application is an interface to reduce barriers on playing around with
-`pyp5js` to newcomers and people who don't feel confortable with the terminal
-interface. But if you want to use the terminal, `pyp5js` also exposes a CLI.
+## Command Line Interface
 
 So, to start a new sketch, you'll have to run:
 
@@ -86,7 +82,7 @@ This command will create a directory with the following code structure using **p
 ```
 ~ my_sketch/
   ~ static /
-    - p5.js
+  ~ target /
   - index.html
   - my_sketch.py
 ```
@@ -132,6 +128,10 @@ as specifying the sketch directory. You can check them by running:
 
 ```
 $ pyp5js --help
+
+# or also
+
+$ pyp5js new --help
 ```
 
 

pyp5js/cli.py

@@ -25,12 +25,13 @@ def command_line_entrypoint():
 @click.option('--monitor', '-m', is_flag=True, help='Starts the monitor command too')
 @click.option('--interpreter', '-i', type=click.Choice(AVAILABLE_INTERPRETERS), default=PYODIDE_INTERPRETER, help='Which python tool to use to run the sketch. (defaults to pyodide)')
 @click.option('--template', '-t', type=click.Path(exists=True), help='Specify a custom index.html template to use.')
-def configure_new_sketch(sketch_name, monitor, interpreter, template):
+@click.option('--cdn/--local', default=True)
+def configure_new_sketch(sketch_name, monitor, interpreter, template, use_cdn):
     """
     Create dir and configure boilerplate - Example:\n
     $ pyp5js new my_sketch -i pyodide
     """
-    files = commands.new_sketch(sketch_name, interpreter, template_file=template)
+    files = commands.new_sketch(sketch_name, interpreter, template_file=template, use_cdn=use_cdn)
 
     cprint.ok(f"Your sketch was created!")
 

pyp5js/commands.py

@@ -14,24 +14,35 @@
 from pyp5js.config import PYODIDE_INTERPRETER
 
 
-def new_sketch(sketch_name, interpreter=PYODIDE_INTERPRETER, template_file=""):
+def new_sketch(sketch_name, interpreter=PYODIDE_INTERPRETER, template_file="", use_cdn=True):
     """
     Creates a new sketch with the required assets and a index.html file, based on pyp5js's templates
 
     :param sketch_name: name for new sketch
     :param interpreter: interpreter to use (transcrypt or pyodide)
     :param template_file: use a custom template for index.html instead of default one
+    :param use_cdn: if false, the sketch will have copies of required static assets (p5.js and pyodide)
     :type sketch_name: string
     :return: file names
     :rtype: list of strings
     """
-    sketch = Sketch(sketch_name, interpreter=interpreter, index_template=template_file)
+    cfg = {
+        "interpreter": interpreter,
+        "index_template": template_file,
+    }
+    if not use_cdn:
+        cfg["p5_js_url"] = "/static/p5.js"
+        # TODO: static version for pyodide too
+
+    sketch = Sketch(sketch_name, **cfg)
     sketch.create_sketch_dir()
 
     templates_files = [
         (sketch.config.get_base_sketch_template(), sketch.sketch_py),
-        (PYP5JS_FILES.p5js, sketch.p5js),
     ]
+    if not use_cdn:
+        templates_files.append((PYP5JS_FILES.p5js, sketch.p5js))
+        # TODO: copy pyodide files to static dir too
     for src, dest in templates_files:
         shutil.copyfile(src, dest)
 

pyp5js/config/fs.py

@@ -17,25 +17,21 @@ def __init__(self):
     def templates_dir(self):
         return self.install.joinpath('templates')
 
-    @property
-    def assets_dir(self):
-        return self.install.joinpath('assets')
-
     @property
     def static_dir(self):
-        return self.assets_dir.joinpath('static')
+        return self.install.joinpath('http', 'static')
 
     @property
     def pytop5js(self):
         return self.transcrypt_conf_dir.joinpath('pyp5js.py')
 
     @property
     def p5js(self):
-        return self.static_dir.joinpath('p5', 'p5.min.js')
+        return self.static_dir.joinpath('js', 'p5', 'p5.min.js')
 
     @property
     def p5_yml(self):
-        return self.assets_dir.joinpath('p5_reference.yml')
+        return self.static_dir.joinpath('p5_reference.yml')
 
     ##### TRANSCRYPT SPECIFICS
 

pyp5js/config/sketch.py

@@ -5,6 +5,7 @@
 
 TRANSCRYPT_INTERPRETER = 'transcrypt'
 PYODIDE_INTERPRETER = 'pyodide'
+P5_JS_CDN = 'https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js'
 
 class SketchConfig:
 
@@ -14,9 +15,10 @@ def from_json(cls, json_file_path):
             config_data = json.load(fd)
             return cls(**config_data)
 
-    def __init__(self, interpreter, index_template=""):
+    def __init__(self, interpreter, **kwargs):
         self.interpreter = interpreter
-        self.index_template = index_template # must be a string
+        self.index_template = kwargs.get("index_template", "")
+        self.p5_js_url = kwargs.get("p5_js_url", P5_JS_CDN)
 
     @property
     def index_template_path(self):
@@ -29,7 +31,9 @@ def write(self, fname):
         with open(fname, "w") as fd:
             data = {
                 "interpreter": self.interpreter,
-                "index_template": index_template
+                "index_template": index_template,
+                # TODO: also store pyodide_js_url
+                "p5_js_url": self.p5_js_url,
             }
             json.dump(data, fd)
 

pyp5js/http/templates/view_sketch.html

@@ -67,7 +67,7 @@
 
 {% block content %}
     <div class="demoContainer">
-    
+
       <div style="display: block">
         <a href="/">Back to sketchbook</a>
         <form action="." method="POST">
@@ -94,7 +94,7 @@
           </div>
         </form>
       </div>
-    
+
       <div id="sketch-holder">
         <!-- You sketch will go here! -->
       </div>
@@ -123,8 +123,7 @@
     <script src="/static/js/pyodide/pyodide_v0.18.1.js"></script>
     {% endif %}
 
-    <script src="{{ p5_js_url }}"></script>
-
+    <script src="/static/p5/p5.js.min"></script>
     <script src="{{ sketch_js_url }}" {% if js_as_module %}type="module"{% endif %}></script>
 
     <script type="text/javascript">

pyp5js/sketch.py

@@ -109,6 +109,7 @@ def __eq__(self, other):
     @property
     def urls(self):
         return SketchUrls(
-            p5_js_url=f"{self.STATIC_NAME}/p5.js",
+            # TODO: add pyodide_js_url
+            p5_js_url=self.config.p5_js_url,
             sketch_js_url=f"{self.TARGET_NAME}/target_sketch.js",
         )

pyp5js/templates/pyodide/target_sketch.js.template

@@ -1674,7 +1674,7 @@ function runCode() {
 
 async function main() {
     const config = {
-        indexURL : "/static/js/pyodide/",
+        indexURL : "/static/js/pyodide/",  # TODO: replace hardcoded string by {{ indexURL }}
         fullStdLib: false,
     }
     window.pyodide = await loadPyodide(config);

pyp5js/templates_renderers.py

@@ -34,6 +34,8 @@ def get_target_sketch_content(sketch):
     context = {
         "sketch_name": sketch.sketch_name,
         "sketch_content": sketch.sketch_content,
+        # TODO: if pyodide, add the pyodide indexUrl here too
+        # (details about this here https://github.com/berinhard/pyp5js/pull/186#pullrequestreview-782362038)
     }
     target_js_file = sketch.config.get_target_js_template()
     return _template_from_file(target_js_file, context)

pyp5js/tests/test_commands.py

@@ -72,7 +72,7 @@ def test_create_new_sketch_with_all_required_files(self):
 
         assert self.sketch.index_html.exists()
         assert self.sketch.sketch_py.exists()
-        assert self.sketch.p5js.exists()
+        assert not self.sketch.p5js.exists()
         assert self.sketch.config_file.exists()
         assert self.sketch.config.interpreter == TRANSCRYPT_INTERPRETER
         assert self.sketch.config.index_template == ""
@@ -83,7 +83,7 @@ def test_create_pyodide_sketch(self):
 
         assert self.sketch.index_html.exists()
         assert self.sketch.sketch_py.exists()
-        assert self.sketch.p5js.exists()
+        assert not self.sketch.p5js.exists()
         assert self.sketch.config_file.exists()
         assert self.sketch.config.interpreter == PYODIDE_INTERPRETER
 
@@ -101,3 +101,9 @@ def test_create_sketch_with_custom_index(self):
         with open(self.sketch.index_html) as fd:
             content = fd.read()
         assert "demoContainer" in content
+
+    def test_create_sketch_using_local_installed_assets(self):
+        commands.new_sketch(self.sketch_name, use_cdn=False)
+
+        assert self.sketch.p5js.exists()
+        # TODO: assertion on pyodide assets too

pyp5js/tests/test_config/test_fs.py

@@ -12,9 +12,7 @@ def test_dir_properties(lib_files):
 
     assert lib_files.templates_dir == pyp5_dir.joinpath('templates')
     assert lib_files.templates_dir.exists()
-    assert lib_files.assets_dir == pyp5_dir.joinpath('assets')
-    assert lib_files.assets_dir.exists()
-    assert lib_files.static_dir == pyp5_dir.joinpath('assets', 'static')
+    assert lib_files.static_dir == pyp5_dir.joinpath('http', 'static')
     assert lib_files.static_dir.exists()
 
 
@@ -25,10 +23,10 @@ def test_files_properties(lib_files):
     assert lib_files.pytop5js == pyp5_dir.joinpath('templates', 'transcrypt', 'pyp5js.py')
     assert lib_files.pytop5js.exists()
 
-    assert lib_files.p5js == pyp5_dir.joinpath('assets', 'static', 'p5', 'p5.min.js')
+    assert lib_files.p5js == pyp5_dir.joinpath('http', 'static', 'js', 'p5', 'p5.min.js')
     assert lib_files.p5js.exists()
 
-    assert lib_files.p5_yml == pyp5_dir.joinpath('assets', 'p5_reference.yml')
+    assert lib_files.p5_yml == pyp5_dir.joinpath('http', 'static', 'p5_reference.yml')
     assert lib_files.p5_yml.exists()
 
 

pyp5js/tests/test_config/test_sketch.py

@@ -4,7 +4,7 @@
 from tempfile import NamedTemporaryFile
 
 from pyp5js.config import TRANSCRYPT_INTERPRETER, PYODIDE_INTERPRETER
-from pyp5js.config.sketch import SketchConfig
+from pyp5js.config.sketch import SketchConfig, P5_JS_CDN
 from pyp5js.config.fs import PYP5JS_FILES
 
 from ..fixtures import transcrypt_json_file, pyodide_json_file, transcrypt_config, pyodide_config, custom_index_json_file
@@ -28,8 +28,12 @@ def test_write_sketch_interpreter_config(custom_index_json_file):
     with open(fd.name) as fd:
         data = json.load(fd)
 
-    assert data["interpreter"] == TRANSCRYPT_INTERPRETER
-    assert str(config.index_template_path.resolve()) == data["index_template"]
+    expected = {
+        "interpreter": TRANSCRYPT_INTERPRETER,
+        "index_template": str(config.index_template_path.resolve()),
+        "p5_js_url": P5_JS_CDN,
+    }
+    assert data == expected
 
 
 def test_wrrite_defaults():

pyp5js/tests/test_http/test_web_app.py

@@ -28,8 +28,8 @@ def tearDown(self):
     def create_sketch(self, name, interpreter=PYODIDE_INTERPRETER):
         return commands.new_sketch(name, interpreter=interpreter)
 
-    def create_sketch_with_static_files(self, name):
-        sketch = commands.new_sketch(name)
+    def create_sketch_with_static_files(self, name, use_cdn=True):
+        sketch = commands.new_sketch(name, use_cdn=use_cdn)
         commands.compile_sketch(name)
         return sketch.sketch_dir
 
@@ -133,7 +133,7 @@ def test_get_static_file_does_not_exist(self):
         self.assert_404(response)
 
     def test_get_static_javascript_file(self):
-        self.create_sketch_with_static_files('sketch_with_static_js')
+        self.create_sketch_with_static_files('sketch_with_static_js', use_cdn=False)
         response = self.client.get(self.route + 'sketch_with_static_js/static/p5.js')
         self.assert_200(response)
         self.assertEqual(response.headers['Content-Type'], 'application/javascript; charset=utf-8')

pyp5js/tests/test_sketch.py

@@ -3,6 +3,7 @@
 from unittest import TestCase
 
 from pyp5js.config import SKETCHBOOK_DIR, PYODIDE_INTERPRETER
+from pyp5js.config.sketch import P5_JS_CDN
 from pyp5js.exceptions import SketchDirAlreadyExistException
 from pyp5js.sketch import Sketch
 from pyp5js.exceptions import InvalidName
@@ -87,3 +88,14 @@ def test_loads_config_from_config_file(self):
 
         assert same_files.config_file == files.config_file
         assert same_files.config.interpreter == PYODIDE_INTERPRETER
+
+    def test_sketch_custom_urls(self):
+        files = Sketch(self.files.sketch_name, p5_js_url="static/p5.js")
+        urls = files.urls
+        assert "static/p5.js" == urls.p5_js_url
+        assert "target/target_sketch.js" == urls.sketch_js_url
+
+    def test_sketch_urls(self):
+        urls = self.files.urls
+        assert P5_JS_CDN == urls.p5_js_url
+        assert "target/target_sketch.js" == urls.sketch_js_url

pyp5js/tests/test_templates_renderers.py

@@ -5,13 +5,14 @@
 from pyp5js.config.fs import PYP5JS_FILES
 
 from .fixtures import sketch
+from ..config.sketch import P5_JS_CDN
 
 
 def test_get_sketch_index_content(sketch):
     expected_template = renderers.templates.get_template('transcrypt/index.html')
     expected_content = expected_template.render({
         'sketch_name': sketch.sketch_name,
-        "p5_js_url": sketch.STATIC_NAME + "/p5.js",
+        "p5_js_url": P5_JS_CDN,
         "sketch_js_url": sketch.TARGET_NAME + "/target_sketch.js",
     })
 

setup.py

@@ -38,8 +38,6 @@
     packages=find_packages(exclude=["pyp5js.tests"]),
     package_data={
         'pyp5js': [
-            'assets/*',
-            'assets/static/**/*',
             'templates/*',
             'http/templates/*',
             'http/static/*',