pyrepl-web 0.1.6 → 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 +102 -4
  2. package/dist/pyrepl.js +90 -383
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -6,7 +6,7 @@ An embeddable Python REPL, powered by Pyodide.
6
6
 
7
7
  ## Getting started
8
8
 
9
- Add a `.pyrepl` div and include the script from a CDN:
9
+ Add a `.pyrepl` div and include the script:
10
10
 
11
11
  ```html
12
12
  <script src="https://cdn.jsdelivr.net/npm/pyrepl-web/dist/pyrepl.js"></script>
@@ -35,6 +35,9 @@ Configure via `data-*` attributes:
35
35
  data-theme="catppuccin-latte"
36
36
  data-packages="pydantic, requests">
37
37
  </div>
38
+
39
+ <!-- Load and run a Python script on startup -->
40
+ <div class="pyrepl" data-src="/scripts/demo.py"></div>
38
41
  ```
39
42
 
40
43
  Supports...
@@ -44,15 +47,110 @@ Supports...
44
47
  - Tab completion
45
48
  - Command history (up/down arrows)
46
49
  - Smart indentation
47
- - 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
48
55
  - Multiple color themes (Catppuccin Mocha/Latte)
49
56
 
50
57
  ### Attributes
51
58
 
52
59
  | Attribute | Description | Default |
53
60
  |-----------|-------------|---------|
54
- | `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 |
55
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 |
56
154
 
57
155
  ### Hugo Shortcode
58
156
 
@@ -87,7 +185,7 @@ bun run build.ts
87
185
  ## How it works
88
186
 
89
187
  pyrepl-web uses:
90
- - [Pyodide](https://pyodide.org/) - Python compiled to WebAssembly
188
+ - [Pyodide](https://pyodide.org/) - CPython port to WebAssembly
91
189
  - [xterm.js](https://xtermjs.org/) - Terminal emulator
92
190
  - [Pygments](https://pygments.org/) - Syntax highlighting
93
191
  - [Catppuccin](https://github.com/catppuccin/catppuccin) - Color themes