Use svelte for the HTML renderer

joerick · Nov 12, 2022 · 9c26535 · 9c26535
1 parent 337ba57
commit 9c26535
Show file tree

Hide file tree

Showing 34 changed files with 2,743 additions and 30,931 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -23,8 +23,9 @@ repos:
     rev: v2.1.0
     hooks:
       - id: codespell
+        exclude: "\\.(json)$"
         args:
-          - --ignore-words-list=vas --skip="*.js"
+          - --ignore-words-list=vas
 
 -   repo: local
     hooks:

diff --git a/bin/build_js_bundle.py b/bin/build_js_bundle.py
@@ -8,6 +8,7 @@
 
 HTML_RENDERER_DIR = "html_renderer"
 JS_BUNDLE = "pyinstrument/renderers/html_resources/app.js"
+CSS_BUNDLE = "pyinstrument/renderers/html_resources/app.css"
 
 if __name__ == "__main__":
     # chdir to root of repo
@@ -42,4 +43,5 @@
     subprocess.check_call("npm ci", cwd=HTML_RENDERER_DIR, shell=True)
     subprocess.check_call("npm run build", cwd=HTML_RENDERER_DIR, shell=True)
 
-    shutil.copyfile(HTML_RENDERER_DIR + "/dist/js/app.js", JS_BUNDLE)
+    shutil.copyfile(HTML_RENDERER_DIR + "/dist/pyinstrument-html.iife.js", JS_BUNDLE)
+    shutil.copyfile(HTML_RENDERER_DIR + "/dist/style.css", CSS_BUNDLE)
diff --git a/html_renderer/.editorconfig b/html_renderer/.editorconfig
@@ -0,0 +1,16 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.svelte]
+indent_size = 2
+
+[*.html]
+indent_size = 2
diff --git a/html_renderer/.gitignore b/html_renderer/.gitignore
@@ -1,21 +1,25 @@
-.DS_Store
-node_modules
-/dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+/stats.html
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
-*.sw*
+*.sw?
diff --git a/html_renderer/index.html b/html_renderer/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pyinstrument</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <script type="module">
+      import pyinstrumentHTMLRenderer from "/src/main.ts";
+
+      fetch('/sample.json')
+        .then(response => response.json())
+        .then(data => {
+            pyinstrumentHTMLRenderer.render(
+                document.getElementById('app'),
+                data,
+            )
+        });
+    </script>
+  </body>
+</html>