Add prettier to pre-commit (#1255)

* Add prettier to pre-commit

* Apply prettier

.github/workflows/build-unstable.yml

@@ -1,4 +1,4 @@
-name: '[CI] Build Unstable'
+name: "[CI] Build Unstable"
 
 on:
     push: # Only run on merges into main that modify files under pyscriptjs/ and examples/

.github/workflows/docs-release.yml

@@ -1,4 +1,4 @@
-name: '[Docs] Build Release'
+name: "[Docs] Build Release"
 
 on:
     release:
@@ -25,7 +25,7 @@ jobs:
                   auto-update-conda: true
                   activate-environment: docs
                   environment-file: docs/environment.yml
-                python-version: '3.9'
+                  python-version: "3.9"
 
             - name: Build
               shell: bash -l {0}

.github/workflows/docs-review.yml

@@ -1,9 +1,9 @@
-name: '[Docs] Build Review'
+name: "[Docs] Build Review"
 
 on:
     pull_request:
         branches:
-        -   '*'
+            - "*"
         paths:
             - docs/**
 
@@ -38,7 +38,7 @@ jobs:
                   auto-update-conda: true
                   activate-environment: docs
                   environment-file: docs/environment.yml
-                python-version: '3.9'
+                  python-version: "3.9"
 
             - name: Build
               shell: bash -l {0}

.github/workflows/docs-unstable.yml

@@ -1,4 +1,4 @@
-name: '[Docs] Build Latest'
+name: "[Docs] Build Latest"
 
 on:
     push:
@@ -28,7 +28,7 @@ jobs:
                   auto-update-conda: true
                   activate-environment: docs
                   environment-file: docs/environment.yml
-                python-version: '3.9'
+                  python-version: "3.9"
 
             - name: Build
               shell: bash -l {0}

.github/workflows/prepare-release.yml

@@ -1,9 +1,9 @@
-name: '[CI] Prepare Release'
+name: "[CI] Prepare Release"
 
 on:
     push:
         tags:
-        -   '[0-9][0-9][0-9][0-9].[0-9][0-9].[0-9]+'   # YYYY.MM.MICRO
+            - "[0-9][0-9][0-9][0-9].[0-9][0-9].[0-9]+" # YYYY.MM.MICRO
 
 env:
     MINICONDA_PYTHON_VERSION: py38

.github/workflows/publish-release.yml

@@ -1,4 +1,4 @@
-name: '[CI] Publish Release'
+name: "[CI] Publish Release"
 
 on:
     release:
@@ -57,6 +57,7 @@ jobs:
                   role-to-assume: ${{ secrets.AWS_OIDC_RUNNER_ROLE }}
 
             - name: Sync to S3
-            run: | # Update /latest and create an explicitly versioned directory under releases/YYYY.MM.MICRO/
+              run:
+                  | # Update /latest and create an explicitly versioned directory under releases/YYYY.MM.MICRO/
                   aws s3 sync --quiet ./build/ s3://pyscript.net/latest/
                   aws s3 sync --quiet ./build/ s3://pyscript.net/releases/${{ github.ref_name }}/

.github/workflows/publish-snapshot.yml

@@ -1,11 +1,11 @@
-name: '[CI] Publish Snapshot'
+name: "[CI] Publish Snapshot"
 # Copy /unstable/ to /snapshots/2022.09.1.RC1/
 
 on:
     workflow_dispatch:
         inputs:
             snapshot_version:
-                description: 'The calver version of this snapshot: 2022.09.1 or 2022.09.1.RC1'
+                description: "The calver version of this snapshot: 2022.09.1 or 2022.09.1.RC1"
                 type: string
                 required: true
 

.github/workflows/sync-examples.yml

@@ -1,4 +1,4 @@
-name: '[CI] Sync Examples'
+name: "[CI] Sync Examples"
 
 on:
     release:
@@ -23,6 +23,7 @@ jobs:
               with:
                   aws-region: ${{ secrets.AWS_REGION }}
                   role-to-assume: ${{ secrets.AWS_OIDC_RUNNER_ROLE }}
-        -   name: Sync to S3
+            - name:
+                  Sync to S3
                   # Sync outdated or new files, delete ones no longer in source
               run: aws s3 sync --quiet --delete . s3://pyscript.net/examples/ # Sync directory, delete what is not in source

.github/workflows/test_report.yml

@@ -12,5 +12,5 @@ jobs:
               with:
                   artifact: test_results
                   name: Test reports
-                path: '*.xml'
+                  path: "*.xml"
                   reporter: java-junit

.pre-commit-config.yaml

@@ -3,7 +3,7 @@
 
 default_stages: [commit]
 repos:
--   repo: https://github.com/pre-commit/pre-commit-hooks
+    - repo: https://github.com/pre-commit/pre-commit-hooks
       rev: v4.4.0
       hooks:
           - id: check-builtin-literals
@@ -20,31 +20,30 @@ repos:
             exclude: \.min\.js$
           - id: trailing-whitespace
 
--   repo: https://github.com/charliermarsh/ruff-pre-commit
+    - repo: https://github.com/charliermarsh/ruff-pre-commit
       rev: v0.0.247
       hooks:
           - id: ruff
 
--   repo: https://github.com/psf/black
+    - repo: https://github.com/psf/black
       rev: 23.1.0
       hooks:
           - id: black
 
--   repo: https://github.com/codespell-project/codespell
+    - repo: https://github.com/codespell-project/codespell
       rev: v2.2.2
       hooks:
           - id: codespell # See 'pyproject.toml' for args
             additional_dependencies:
                 - tomli
 
--   repo: https://github.com/macisamuele/language-formatters-pre-commit-hooks
-    rev: v2.7.0
+    - repo: https://github.com/hoodmane/pyscript-prettier-precommit
+      rev: "v3.0.0-alpha.6"
       hooks:
-    -   id: pretty-format-yaml
-        args: [--autofix, --indent, '4']
-        exclude: .github/ISSUE_TEMPLATE/.*\.yml$
+          - id: prettier
+            args: [--tab-width, "4"]
 
--   repo: https://github.com/pre-commit/mirrors-eslint
+    - repo: https://github.com/pre-commit/mirrors-eslint
       rev: v8.35.0
       hooks:
           - id: eslint
@@ -53,16 +52,5 @@ repos:
             additional_dependencies:
                 - eslint@8.25.0
                 - typescript@4.8.4
-        -   '@typescript-eslint/eslint-plugin@5.39.0'
-        -   '@typescript-eslint/parser@5.39.0'
-
-# Commented out until mdformat-myst supports custom extensions
-# See https://github.com/executablebooks/mdformat-myst/pull/9
-# -   repo: https://github.com/executablebooks/mdformat
-#     rev: 0.7.14 # Use the ref you want to point at
-#     hooks:
-#     -   id: mdformat
-#         additional_dependencies:
-#         -   mdformat-gfm
-#         -   mdformat-myst
-#         -   mdformat-black
+                - "@typescript-eslint/eslint-plugin@5.39.0"
+                - "@typescript-eslint/parser@5.39.0"

.prettierignore

@@ -0,0 +1,4 @@
+ISSUE_TEMPLATE
+*.min.*
+package-lock.json
+docs

examples/handtrack/say_hello.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
@@ -7,30 +7,33 @@
         <title>Say Hello</title>
 
         <link rel="icon" type="image/png" href="../favicon.png" />
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
 
         <script defer src="https://pyscript.net/latest/pyscript.js"></script>
     </head>
 
     <body>
         <py-script>
-from js import handTrack, requestAnimationFrame
-from pyodide import create_once_callable
-import asyncio
+            from js import handTrack, requestAnimationFrame
+            from pyodide import create_once_callable
+            import asyncio
 
-context = canvas.element.getContext("2d")
+            context = canvas.element.getContext("2d")
 
-isVideo = False
-model = None
+            isVideo = False
+            model = None
 
-modelParams = {
+            modelParams = {
               "flipHorizontal": True, # flip e.g for video
               "maxNumBoxes": 20, # maximum number of boxes to detect
               "iouThreshold": 0.5, # ioU threshold for non-max suppression
               "scoreThreshold": 0.6, # confidence threshold for predictions.
-}
+            }
 
-def toggle_video(evt):
+            def toggle_video(evt):
               global isVideo
               if (not isVideo):
                 update_note.write("Starting video")
@@ -41,7 +44,7 @@ def toggle_video(evt):
                 isVideo = False
                 update_note.write("Video stopped")
 
-async def start_video():
+            async def start_video():
               global isVideo
               update_note.write("Inside sstart video")
               status = await handTrack.startVideo(video.element)
@@ -54,10 +57,10 @@ async def start_video():
               else:
                 update_note.write( "Please enable video")
 
-def sync_run_detection(evt):
+            def sync_run_detection(evt):
               pyscript.run_until_complete(run_detection())
 
-async def run_detection():
+            async def run_detection():
               console.log("in RUN DETECTION: ");
               global model
               global isVideo
@@ -74,7 +77,7 @@ async def run_detection():
                 await requestAnimationFrame(create_once_callable(sync_run_detection));
               console.log("...2")
 
-def run_detection_image(img):
+            def run_detection_image(img):
               console.log("in RUN DETECTION IMAGE", predictions);
               global model
               def detect(predition):
@@ -84,12 +87,12 @@ def run_detection_image(img):
               model.detect(img).then(detect)
               console.log("...4")
 
-def handle_model(lmodel):
+            def handle_model(lmodel):
               global model
               model = lmodel
               update_note.write("Loaded Model!")
 
-async def start():
+            async def start():
               console.log("creating x")
               console.log("calling x")
               model = await handTrack.load(modelParams)#.then(handle_model)
@@ -99,25 +102,36 @@ async def start():
               print(dir(x))
               print(x)
 
-pyscript.run_until_complete(start())
-
-#});
+            pyscript.run_until_complete(start())
 
+            #});
         </py-script>
 
         <div class="mb10">
-      <button  id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video()">
+            <button
+                id="trackbutton"
+                class="bx--btn bx--btn--secondary"
+                type="button"
+                py-onClick="toggle_video()"
+            >
                 Toggle Video
             </button>
-      <button id="nextimagebutton" class="mt10 bx--btn bx--btn--secondary" type="button" disabled>
+            <button
+                id="nextimagebutton"
+                class="mt10 bx--btn bx--btn--secondary"
+                type="button"
+                disabled
+            >
                 Next Image
             </button>
-      <div id="update-note" py-mount class="updatenote mt10">loading model ..</div>
+            <div id="update-note" py-mount class="updatenote mt10">
+                loading model ..
+            </div>
         </div>
         <div>
             <video autoplay="autoplay" id="myvideo" py-mount="video"></video>
             <canvas id="canvas" py-mount class="border canvasbox"></canvas>
         </div>
-    <script src="lib/handtrack.min.js"> </script>
+        <script src="lib/handtrack.min.js"></script>
     </body>
 </html>

examples/mario/play_mario.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
@@ -7,7 +7,10 @@
         <title>Mario</title>
 
         <link rel="icon" type="image/png" href="../favicon.png" />
-    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+        <link
+            rel="stylesheet"
+            href="https://pyscript.net/latest/pyscript.css"
+        />
 
         <script defer src="https://pyscript.net/latest/pyscript.js"></script>
     </head>
@@ -39,25 +42,25 @@
         <script type="text/javascript" src="js/game.js"></script>
 
         <py-script>
-from js import handTrack, setTimeout, requestAnimationFrame, player
-from pyodide import create_once_callable
-import asyncio
+            from js import handTrack, setTimeout, requestAnimationFrame, player
+            from pyodide import create_once_callable
+            import asyncio
 
-context = canvas.element.getContext("2d")
+            context = canvas.element.getContext("2d")
 
-isVideo = False
-model = None
-last_position = 0
-direction = "stop"
+            isVideo = False
+            model = None
+            last_position = 0
+            direction = "stop"
 
-modelParams = {
+            modelParams = {
               "flipHorizontal": True, # flip e.g for video
               "maxNumBoxes": 20, # maximum number of boxes to detect
               "iouThreshold": 0.5, # ioU threshold for non-max suppression
               "scoreThreshold": 0.6, # confidence threshold for predictions.
-}
+            }
 
-def toggle_video(evt):
+            def toggle_video(evt):
               global isVideo
               player.jump()
 
@@ -70,7 +73,7 @@ def toggle_video(evt):
                 isVideo = False
                 update_note.write("Video stopped")
 
-async def start_video():
+            async def start_video():
               global isVideo
               update_note.write("Inside start video")
               status = await handTrack.startVideo(video.element)
@@ -83,10 +86,10 @@ async def start_video():
               else:
                 update_note.write( "Please enable video")
 
-def sync_run_detection(evt):
+            def sync_run_detection(evt):
               pyscript.run_until_complete(run_detection())
 
-async def run_detection():
+            async def run_detection():
               global model
               global isVideo
               global last_position
@@ -116,30 +119,39 @@ async def run_detection():
               if (isVideo):
                 await requestAnimationFrame(create_once_callable(sync_run_detection));
 
-def handle_model(lmodel):
+            def handle_model(lmodel):
               global model
               model = lmodel
               update_note.write("Loaded Model!")
 
-async def start():
+            async def start():
               model = await handTrack.load(modelParams)#.then(handle_model)
               handle_model(model)
 
-pyscript.run_until_complete(start())
-
+            pyscript.run_until_complete(start())
         </py-script>
 
         <div class="mb10">
-      <p>Use < > to move, ↓ to crouch and x to jump. If video is enabled, say hi to jump as well! </p>
-      <button  id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video()">
+            <p>
+                Use < > to move, ↓ to crouch and x to jump. If video is enabled,
+                say hi to jump as well!
+            </p>
+            <button
+                id="trackbutton"
+                class="bx--btn bx--btn--secondary"
+                type="button"
+                py-onClick="toggle_video()"
+            >
                 Start Video
             </button>
-      <div id="update-note" py-mount class="updatenote mt10">loading model ..</div>
+            <div id="update-note" py-mount class="updatenote mt10">
+                loading model ..
+            </div>
         </div>
         <div>
             <video autoplay="autoplay" id="myvideo" py-mount="video"></video>
             <canvas id="canvas" py-mount class="border canvasbox"></canvas>
         </div>
-    <script src="../handtrack/lib/handtrack.min.js"> </script>
+        <script src="../handtrack/lib/handtrack.min.js"></script>
     </body>
 </html>

pyscriptjs/environment.yml

@@ -1,20 +1,20 @@
 channels:
--   defaults
--   conda-forge
--   microsoft
+    - defaults
+    - conda-forge
+    - microsoft
 dependencies:
--   python=3.9
--   pip
--   pytest=7
--   nodejs=16
--   black
--   isort
--   codespell
--   pre-commit
--   pillow
--   numpy
--   markdown
--   pip:
+    - python=3.9
+    - pip
+    - pytest=7
+    - nodejs=16
+    - black
+    - isort
+    - codespell
+    - pre-commit
+    - pillow
+    - numpy
+    - markdown
+    - pip:
           - playwright
           - pytest-playwright
           - pytest-xdist