mirror of https://github.com/pyscript/pyscript.git synced 2025-12-19 18:27:29 -05:00

Files

Andrea Giammarchi a1281d1331 Fix #1326 - Allow <script type="py"> tag to work as <py-script> (#1396 )

The goal of this MR is to unobtrusively allow the usage of `<script type="py">`, `<script type="pyscript">` or `<script type="py-script">` tags instead of `<py-script>` for all those case where the layout in custom elements get parsed and breaks users' expectations (including our SVG based tests).

2023-04-27 15:21:31 +02:00

4.7 KiB

Raw Blame History

<py-script>

The <py-script> element, also available as <script type="py-script">, lets you execute multi-line Python scripts both inline and via a src attribute.

Attributes

attribute	type	description
src	url	You don't need to add long python code in py-script, you can provide url of the python source file in the py-script tag with the `src` attribute. When a Python file is referred with the `src` attribute it is executed, and then added to the namespace where it was referred.
output	string	The id of a DOM element to route `sys.stdout` and `stderr` to, in addition to sending it to the `<py-terminal>`
stderr	string	The id of a DOM element to route just `sys.stderr` to, in addition to sending it to the `<py-terminal>`

output

If the output attribute is provided, any output to sys.stdout or sys.stderr is written to the DOM element with the ID matching the attribute. If no DOM element is found with a matching ID, a warning is shown. The msg is output to the innerHTML of the HTML Element, with newlines (\n') converted to breaks (<br/>).

This output is in addition to the output being written to the developer console and the <py-terminal> if it is being used.

stderr

If the stderr attribute is provided, any output to sys.stderr is written to the DOM element with the ID matching the attribute. If no DOM element is found with a matching ID, a warning is shown. The msg is output to the innerHTML of the HTML Element, with newlines (\n') converted to breaks (<br/>).

This output is in addition to the output being written to the developer console and the <py-terminal> if it is being used.

Examples

Inline `<py-script>` element

Let's execute this multi-line Python script to compute π and print it back onto the page

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>
  <body>
      <py-script>
        print("Let's compute π:")
        def compute_pi(n):
            pi = 2
            for i in range(1,n):
                pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
            return pi

        pi = compute_pi(100000)
        s = f"π is approximately {pi:.3f}"
        print(s)
      </py-script>
  </body>
</html>

Using `<py-script>` element with `src` attribute

we can also move our python code to its own file and reference it via the src attribute.

# compute_pi.py
print("Let's compute π:")
def compute_pi(n):
    pi = 2
    for i in range(1,n):
        pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
    return pi

pi = compute_pi(100000)
s = f"π is approximately {pi:.3f}"
print(s)

Since both compute_pi.py and index.html are in the same directory, we can reference the python file with a relative path.

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>
  <body>
      <py-script src="compute_pi.py"></py-script>
  </body>
</html>

Writing into labeled elements

In the example above, we had a single <py-script> tag printing one or more lines onto the page in order. Within the <py-script>, you can use the Element class to create a python object for interacting with page elements. Objects created from the Element class provide the .write() method which enables you to send strings into the page elements referenced by those objects.

For example, we'll add some style elements and provide placeholders for the <py-script> tag to write to.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
      <script defer src="https://pyscript.net/latest/pyscript.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    </head>

  <body>
    <b><p>Today is <u><label id='today'></label></u></p></b>
    <br>
    <div id="pi" class="alert alert-primary"></div>
    <py-script>
      import datetime as dt
      Element('today').write(dt.date.today().strftime('%A %B %d, %Y'))

      def compute_pi(n):
          pi = 2
          for i in range(1,n):
              pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
          return pi

      pi = compute_pi(100000)
      Element('pi').write(f'π is approximately {pi:.3f}')
    </py-script>
  </body>
</html>

4.7 KiB Raw Blame History