pyrepl-web 0.1.3 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +105 -5
  2. package/dist/pyrepl.js +89 -363
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -2,9 +2,11 @@
2
2
 
3
3
  An embeddable Python REPL, powered by Pyodide.
4
4
 
5
+ [Live demo](https://savannah.dev/projects/)
6
+
5
7
  ## Getting started
6
8
 
7
- Add a `.pyrepl` div and include the script from a CDN:
9
+ Add a `.pyrepl` div and include the script:
8
10
 
9
11
  ```html
10
12
  <script src="https://cdn.jsdelivr.net/npm/pyrepl-web/dist/pyrepl.js"></script>
@@ -33,24 +35,122 @@ Configure via `data-*` attributes:
33
35
  data-theme="catppuccin-latte"
34
36
  data-packages="pydantic, requests">
35
37
  </div>
38
+
39
+ <!-- Load and run a Python script on startup -->
40
+ <div class="pyrepl" data-src="/scripts/demo.py"></div>
36
41
  ```
37
42
 
38
43
  Supports...
39
44
 
40
- - Full Python 3.13 running in the browser via WebAssembly
45
+ - Python 3.13 running in the browser via WebAssembly
41
46
  - Syntax highlighting with Pygments
42
47
  - Tab completion
43
48
  - Command history (up/down arrows)
44
49
  - Smart indentation
45
- - Preload any PyPI packages
50
+ - Keyboard shortcuts (Ctrl+L clear, Ctrl+C cancel)
51
+ - Preload PyPI packages
52
+ - Preload and run a Python script on startup
53
+ - Copy and clear buttons in the header
54
+ - Custom header title
46
55
  - Multiple color themes (Catppuccin Mocha/Latte)
47
56
 
48
57
  ### Attributes
49
58
 
50
59
  | Attribute | Description | Default |
51
60
  |-----------|-------------|---------|
52
- | `data-theme` | Color theme (`catppuccin-mocha` or `catppuccin-latte`) | `catppuccin-mocha` |
61
+ | `data-theme` | Color theme name (builtin or registered via `window.pyreplThemes`) | `catppuccin-mocha` |
62
+ | `data-theme-config` | Inline JSON theme object for full customization | none |
53
63
  | `data-packages` | Comma-separated list of PyPI packages to preload | none |
64
+ | `data-header` | Show the header bar (`true` or `false`) | `true` |
65
+ | `data-buttons` | Show copy/clear buttons in header (`true` or `false`) | `true` |
66
+ | `data-title` | Custom title in the header bar | `python` |
67
+ | `data-src` | Path to a Python script to preload (runs silently, populates namespace) | none |
68
+ | `data-readonly` | Disable input, display only (`true` or `false`) | `false` |
69
+
70
+ ### Custom Themes
71
+
72
+ You can fully customize the theme using two approaches:
73
+
74
+ #### 1. Register a named theme via JavaScript
75
+
76
+ ```html
77
+ <script>
78
+ window.pyreplThemes = {
79
+ 'my-theme': {
80
+ background: '#282c34',
81
+ foreground: '#abb2bf',
82
+ cursor: '#528bff',
83
+ cursorAccent: '#282c34',
84
+ selectionBackground: '#3e4451',
85
+ black: '#1e2127',
86
+ red: '#e06c75',
87
+ green: '#98c379',
88
+ yellow: '#d19a66',
89
+ blue: '#61afef',
90
+ magenta: '#c678dd',
91
+ cyan: '#56b6c2',
92
+ white: '#abb2bf',
93
+ brightBlack: '#5c6370',
94
+ brightRed: '#e06c75',
95
+ brightGreen: '#98c379',
96
+ brightYellow: '#d19a66',
97
+ brightBlue: '#61afef',
98
+ brightMagenta: '#c678dd',
99
+ brightCyan: '#56b6c2',
100
+ brightWhite: '#ffffff',
101
+ // Optional header customization
102
+ headerBackground: '#21252b',
103
+ headerTitle: '#5c6370',
104
+ }
105
+ };
106
+ </script>
107
+ <script src="https://cdn.jsdelivr.net/npm/pyrepl-web/dist/pyrepl.js"></script>
108
+
109
+ <div class="pyrepl" data-theme="my-theme"></div>
110
+ ```
111
+
112
+ #### 2. Inline theme via data attribute
113
+
114
+ ```html
115
+ <div class="pyrepl" data-theme-config='{
116
+ "background": "#1a1b26",
117
+ "foreground": "#a9b1d6",
118
+ "cursor": "#c0caf5",
119
+ "cursorAccent": "#1a1b26",
120
+ "selectionBackground": "#33467c",
121
+ "black": "#15161e",
122
+ "red": "#f7768e",
123
+ "green": "#9ece6a",
124
+ "yellow": "#e0af68",
125
+ "blue": "#7aa2f7",
126
+ "magenta": "#bb9af7",
127
+ "cyan": "#7dcfff",
128
+ "white": "#a9b1d6",
129
+ "brightBlack": "#414868",
130
+ "brightRed": "#f7768e",
131
+ "brightGreen": "#9ece6a",
132
+ "brightYellow": "#e0af68",
133
+ "brightBlue": "#7aa2f7",
134
+ "brightMagenta": "#bb9af7",
135
+ "brightCyan": "#7dcfff",
136
+ "brightWhite": "#c0caf5"
137
+ }'></div>
138
+ ```
139
+
140
+ #### Theme Properties
141
+
142
+ | Property | Description |
143
+ |----------|-------------|
144
+ | `background` | Terminal background color |
145
+ | `foreground` | Default text color |
146
+ | `cursor` | Cursor color |
147
+ | `cursorAccent` | Cursor text color |
148
+ | `selectionBackground` | Text selection highlight |
149
+ | `black`, `red`, `green`, `yellow`, `blue`, `magenta`, `cyan`, `white` | Standard ANSI colors |
150
+ | `brightBlack`, `brightRed`, ... `brightWhite` | Bright ANSI color variants |
151
+ | `headerBackground` | (Optional) Header bar background, defaults to `black` |
152
+ | `headerTitle` | (Optional) Header title text color, defaults to `brightBlack` |
153
+ | `shadow` | (Optional) Box shadow CSS value |
54
154
 
55
155
  ### Hugo Shortcode
56
156
 
@@ -85,7 +185,7 @@ bun run build.ts
85
185
  ## How it works
86
186
 
87
187
  pyrepl-web uses:
88
- - [Pyodide](https://pyodide.org/) - Python compiled to WebAssembly
188
+ - [Pyodide](https://pyodide.org/) - CPython port to WebAssembly
89
189
  - [xterm.js](https://xtermjs.org/) - Terminal emulator
90
190
  - [Pygments](https://pygments.org/) - Syntax highlighting
91
191
  - [Catppuccin](https://github.com/catppuccin/catppuccin) - Color themes