question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[FEATURE] Add a <py-module> tag

See original GitHub issue

Problem statement

  • A new developer is learning about Python modules, code organization, local imports, etc
  • Up to this point, they have used PyScript to show off their work as a single, stand-alone HTML file
  • While attempting to refactor code into Python modules, they run into several road blocks
    • CORS won’t allow local files to be loaded by PyScript
    • Solutions asking the new developer to host their code on GitHub or other platform is a barrier to learning

Desired Solution

Add a <py-module> tag which is typically added to the HTML header.

This is similar to a <py-script> tag, but is meant to represent a Python module. It is available to other PyScript code without needing to be called out in py-env. However, just like any Python module, it must be imported to be used. And it respects Python namespaces (please, let’s never replicate the global variable fiasco that is Javascript).

Having these modules separated out would allow for an easy translation for python-cli to bundle up a Python project, and also be able to go in reverse (from a single PyScript HTML file with py-modules back into a regular Python project).

As modules follow a folder structure, there needs to be a path attribute on the tag. So the modules might look something like:

<py-module path="foo/utils.py">
from datetime import datetime as dt

def format_date(dt_, fmt = "%m/%d/%Y, %H:%M:%S"):
    return dt_.strftime(fmt)

def now(fmt = "%m/%d/%Y, %H:%M:%S"):
    return format_date(dt.now(), fmt)
</py-module>

<py-module path="bar/espresso.py">
from ..foo.utils import now

def is_espresso_time():
    return now()[-1] in ["0", "4", "8"]
</py-module>

And then in the body, we might have

<py-script>
from .bar.espresso import is_espresso_time

if is_espresso_time():
    # do something here
</py-script>

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:5
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
jim22kcommented, May 16, 2022

@sugatoray It’s not an issue of loading python modules, but rather an issue of where those modules are stored.

I am aware of the py-env tag and local paths. But that solution runs into my 3rd bullet point in the original post. Web browsers normally block attempts to load local files (for security purposes). And attempting to share an HTML file with local paths would fail because data.py is not included in the HTML. The main file would need to be hosted on a server where the relative link can be resolved.

Both of these issues are a barrier to someone learning to code via PyScript. My proposal for a new py-module tag is an attempt to solve these issues. I want a way for a single HTML file to contain a directory’s worth of python files. I don’t expect that to be the easiest way to view the code, but I could easily imagine an editor which collects the individual py-module tags, arranges them into a tree view based on the paths, and lets you edit the file. So it would feel like a folder and project view, but all modules are actually contained in a single, sharable HTML file.

0reactions
sugatoraycommented, Jun 12, 2022

Hi @jim22k,

However, Jupyter notebooks can’t teach relative imports and init.py.

I would disagree with this. You can write any file from jupyter notebooks. Save the contents of a cell as a file with %%writefile <YOUR_INTENDED_FILEPATH> at the top of that cell. I have done this even as an experiment to make contributions to some GitHub repositories.

It’s not ideal. But if you want to teach how to create python modules, it works. I used Google Colab.

🔥 See an example here:

Read more comments on GitHub >

github_iconTop Results From Across the Web

Feature modules - Angular
To add a component, enter the following command at the command line where customer-dashboard is the directory where the CLI generated the feature...
Read more >
JavaScript modules - MDN Web Docs
This guide gives you all you need to get started with JavaScript module syntax.
Read more >
How to use tag feature in custom module - Odoo
i have a situation like i have a i have to by ship for one port to another when i search for a...
Read more >
Using modules in templates - HubSpot Developers
Modules are editable areas of HubSpot pages or emails. While you can add modules to a template layout using the drag and drop...
Read more >
Dev HOWTO: Add a new meta tag to an existing module ...
Drupal 7 · Decide whether the new meta tags should go in the main module or a submodule, · Edit that module's "*....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found