Merge branch 'main' into docs

msaroufim · web-flow · commit c3345b38d2df · 2022-04-30T22:58:04.000-07:00
diff --git a/GETTING-STARTED.md b/GETTING-STARTED.md
@@ -7,23 +7,21 @@ This page will guide you through getting started with PyScript.
 PyScript does not require any development environment other
 than a web browser. We recommend using Chrome.
 
+If, you're using [VSCode](https://code.visualstudio.com/) the
+[Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
+can be used to reload the page as you edit the HTML file.
+
 ## Installation
 
-First, go to https://pyscript.net and download the PyScript assets.
-Unzip the archive to a directory where you wish to write PyScript-enabled
-HTML files. You should then have three files in your directory.
+There is no installation required. In this document we'll use
+the PyScript assets served on https://pyscript.net.
 
-```
-├── ./
-│   ├── pyscript.css
-│   ├── pyscript.js
-│   └── pyscript.js.map
-```
+If you want to download the source and build it yourself follow
+the instructions in the README.md file.
 
 ## Your first PyScript HTML file
 
-Here's a "Hello, world!" example using PyScript using the assets you
-downloaded from https://pyscript.net.
+Here's a "Hello, world!" example using PyScript
 
 Using your favorite editor create a new file called `hello.html` in
 the same directory as your PyScript JavaScript and CSS files with the
@@ -33,8 +31,8 @@ open an HTML by double clicking it in your file explorer.
 ```html
 <html>
   <head>
-    <link rel="stylesheet" href="pyscript.css" />
-    <script defer src="pyscript.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
+    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
   </head>
   <body> <py-script> print('Hello, World!') </py-script> </body>
 </html>
@@ -53,8 +51,8 @@ example we can compute π.
 ```html
 <html>
   <head>
-    <link rel="stylesheet" href="pyscript.css" />
-    <script defer src="pyscript.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
+    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
   </head>
   <body>
       <py-script>
@@ -85,8 +83,8 @@ the `<py-script>` tag write to.
 ```html
 <html>
     <head>
-      <link rel="stylesheet" href="pyscript.css" />
-      <script defer src="pyscript.js"></script>
+      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
+      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
     </head>
 
@@ -124,15 +122,17 @@ HTML head. You can also link to `.whl` files directly on disk like in our [toga
 </py-env>
 ```
 
+If your `.whl` is not a pure Python wheel then open a PR or issue with [pyodide](https://github.com/pyodide/pyodide) to get it added here https://github.com/pyodide/pyodide/tree/main/packages
+
 For example, NumPy and Matplotlib are available. Notice here we're using `<py-script output="plot">`
 as a shortcut, which takes the expression on the last line of the script and runs `pyscript.write('plot', fig)`.
 
 
 ```html
 <html>
     <head>
-      <link rel="stylesheet" href="pyscript.css" />
-      <script defer src="pyscript.js"></script>
+      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
+      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
       <py-env>
         - numpy
         - matplotlib
@@ -157,4 +157,52 @@ fig
 </html>
 ```
 
-If your `.whl` is not a pure Python wheel then open a PR or issue with [pyodide](https://github.com/pyodide/pyodide) to get it added here https://github.com/pyodide/pyodide/tree/main/packages
+### Local modules
+
+In addition to packages you can declare local Python modules that will
+be imported in the `<py-script>` tag. For example we can place the random
+number generation steps in a function in the file `data.py`.
+
+```python
+# data.py
+import numpy as np
+
+def make_x_and_y(n):
+    x = np.random.randn(n)
+    y = np.random.randn(n)
+    return x, y
+```
+
+In the HTML tag `<py-env>` paths to local modules are provided in the
+`paths:` key.
+
+```html
+<html>
+    <head>
+      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
+      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
+      <py-env>
+        - numpy
+        - matplotlib
+        - paths:
+          - /data.py
+      </py-env>
+    </head>
+
+  <body>
+    <h1>Let's plot random numbers</h1>
+    <div id="plot"></div>
+    <py-script output="plot">
+import matplotlib.pyplot as plt
+from data import make_x_and_y
+
+x, y = make_x_and_y(n=1000)
+
+fig, ax = plt.subplots()
+ax.scatter(x, y)
+fig
+    </py-script>
+  </body>
+</html>
+```
+
diff --git a/README.md b/README.md
@@ -16,8 +16,8 @@ PyScript is a meta project that aims to combine multiple open technologies to cr
 
 To try PyScript, import the pyscript to your html page with:
 ```
-<link rel="stylesheet" href="pyscript.css" />
-<script defer src="pyscript.js"></script>
+<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
+<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
 ```
 At that point, you can then use PyScript components in your html page. PyScript currently implements the following elements:
 
@@ -35,6 +35,12 @@ To contribute:
 * install the dependencies with `npm install` - make sure to use nodejs version >= 16
 * run `npm run dev` to build and run the dev server. This will also watch for changes and rebuild when a file is saved
 
+## Resources
+
+* [Discussion board](https://community.anaconda.cloud/c/tech-topics/pyscript)
+* [Home Page](https://pyscript.net/)
+* [Blog Post](https://engineering.anaconda.com/2022/04/welcome-pyscript.html)
+
 ## Notes
 
 * This is an extremely experimental project, so expect things to break!
diff --git a/pyscriptjs/examples/fractals.py b/pyscriptjs/examples/fractals.py
@@ -1,4 +1,6 @@
+from typing import Tuple
 import numpy as np
+from numpy.polynomial import Polynomial
 
 def mandelbrot(width: int, height: int, *,
       x: float = -0.5, y: float = 0, zoom: int = 1, max_iterations: int = 100) -> np.array:
@@ -60,3 +62,48 @@ def julia(width: int, height: int, *,
         div_time[m] = i
 
     return div_time
+
+Range = Tuple[float, float]
+
+def newton(width: int, height: int, *,
+        p: Polynomial, a: complex, xr: Range = (-2.5, 1), yr: Range = (-1, 1), max_iterations: int = 100) -> (np.array, np.array):
+    """ """
+    # To make navigation easier we calculate these values
+    x_from, x_to = xr
+    y_from, y_to = yr
+
+    # Here the actual algorithm starts
+    x = np.linspace(x_from, x_to, width).reshape((1, width))
+    y = np.linspace(y_from, y_to, height).reshape((height, 1))
+    z = x + 1j*y
+
+    # Compute the derivative
+    dp = p.deriv()
+
+    # Compute roots
+    roots = p.roots()
+    epsilon = 1e-5
+
+    # Set the initial conditions
+    a = np.full(z.shape, a)
+
+    # To keep track in which iteration the point diverged
+    div_time = np.zeros(z.shape, dtype=int)
+
+    # To keep track on which points did not converge so far
+    m = np.full(a.shape, True, dtype=bool)
+
+    # To keep track which root each point converged to
+    r = np.full(a.shape, 0, dtype=int)
+
+    for i in range(max_iterations):
+        z[m] = z[m] - a[m]*p(z[m])/dp(z[m])
+
+        for j, root in enumerate(roots):
+            converged = (np.abs(z.real - root.real) < epsilon) & (np.abs(z.imag - root.imag) < epsilon)
+            m[converged] = False
+            r[converged] = j + 1
+
+        div_time[m] = i
+
+    return div_time, r
diff --git a/pyscriptjs/examples/numpy_canvas_fractals.html b/pyscriptjs/examples/numpy_canvas_fractals.html
