├── .gitignore
├── LICENSE
├── README-V0.md
├── README.md
├── setup.py
├── update-static.sh
└── vuejspython
    ├── __init__.py
    ├── builtin
        ├── create-demo-files.vue
        ├── diff.min.js
        ├── edit-file.vue
        ├── rotate-files.vue
        ├── serve-videos.vue
        ├── toggle-exam.vue
        └── view-file.vue
    ├── fsapi.js
    ├── index.html
    └── run.py


/.gitignore:
--------------------------------------------------------------------------------
1 | unzip-*/
2 | epoch*/
3 | build/
4 | dist/
5 | __pycache__/
6 | *.egg-info/
7 | demo/
8 | .params.json
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Rémi EMONET
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README-V0.md:
--------------------------------------------------------------------------------
  1 | 
  2 | Vuejs-python brings the concepts of vuejs to Python.
  3 | You can write your model/data as a Python object and your HTML UI/view with the very convenient vuejs syntax.
  4 | As soon as part of your model changes, all dependent variables are updated and the HTML UI is automatically refreshed.
  5 | 
  6 | The goal is to use not only Python the language but Python the platform (with numpy, system APIs, and other "native" things).
  7 | 
  8 | ## Installation
  9 | 
 10 | ~~~
 11 | pip install vuejspython
 12 | ~~~
 13 | 
 14 | ## Tiny Example
 15 | 
 16 | You need to create two files: one Python model and an HTML UI.
 17 | A good convention (to help tools) is to use the same name, with the `.py` and `.html` extensions, respectively.
 18 | 
 19 | <div style="display: flex">
 20 |   <div style="flex: 50%;">
 21 | 
 22 |   `# example.py`
 23 | 
 24 | ```python
 25 |     ...
 26 |     @model
 27 |     class App:
 28 |       radius = 5
 29 |       def computed_area(self):
 30 |         return pi * self.radius ** 2
 31 | 
 32 |     vuejspython.start(App())
 33 | ```
 34 | 
 35 |   </div>
 36 |   <div style="flex: 50%;">
 37 | 
 38 |   `# example.html`
 39 | 
 40 | ```html
 41 |     <div id="main">
 42 |       Fill the radius in the text field: <input v-model.number="radius"/>.
 43 |       (or with <button @click="radius += 1">+1</button> <br/>
 44 |       A disk with radius {{ radius }} has an area of {{ area }}.
 45 |     </div>
 46 |      
 47 |     <script src="lib/vuejspython.js"></script>
 48 |     <script>vuejspython.start()</script>
 49 | ```
 50 | 
 51 |   </div>
 52 | </div>
 53 | 
 54 | ## Running, option 1: only with Python
 55 | 
 56 | ~~~bash
 57 | python3 example.py
 58 | 
 59 | # or a tiny shell function helper
 60 | pvue() { (sleep .5;firefox ${1%.*}.html)& python3 ${1%.*}.py;}
 61 | pvue example.py
 62 | ~~~
 63 | 
 64 | This will give you an address to which you should append your HTML file name, here `example.html`.
 65 | In this example, you will visit <http://localhost:4260/example.html>
 66 | (or visit the given address `http://localhost:4260` and click your file).
 67 | 
 68 | NB: you need to stop the command with `Ctrl+C` if you want to run another example.
 69 | 
 70 | 
 71 | ## Running, option 2: with hot reload on file change
 72 | 
 73 | Here we will start two processes, one for the HTML part (with live reload, and another only for the Python).
 74 | 
 75 | Terminal 1, hosting the HTML files with hot reload:
 76 | 
 77 | ~~~bash
 78 | # one-time install
 79 | pip install watchdog
 80 | npm install -g simple-hot-reload-server
 81 | # in terminal 1 (hot html reload, for all files)
 82 | hrs .
 83 | ~~~
 84 | (this gives you the address to open, after appending your file name, e.g., <http://localhost:8082/example.html>)
 85 | 
 86 | Terminal 2, running the python server
 87 | 
 88 | ~~~bash
 89 | # in terminal 2 (start or restart python)
 90 | NOSERVE=1 python3 example.py
 91 | # OR, for live restart
 92 | NOSERVE=1 watchmedo auto-restart --patterns="*.py" python3 example.py
 93 | ~~~
 94 | NB: `NOSERVE=1` tells vuejspython to not serve the HTML files (it is handled by `hrs` above)
 95 | 
 96 | NB: when changing the .py, a manual browser refresh is still needed, see below for a more complete solution
 97 | 
 98 | ### Helper for complete live reload (live restart for python)
 99 | 
100 | ~~~bash
101 | pvue() { if test "$1" = open ; then shift ; (sleep 1 ; firefox "http://localhost:8082/${1%.*}.html") & fi; watchmedo auto-restart --patterns="*.py" --ignore-patterns="*/.#*.py" bash -- -c '(sleep .250 ; touch '"${1%.*}"'.html) & python3 '"${1%.*}"'.py' ; }
102 | # Then
103 | pvue example
104 | # OR to also open firefox
105 | pvue open example
106 | # OR some convenient variations
107 | NOSERVE=1 pvue open example
108 | pvue open example.
109 | pvue open example.py
110 | pvue open example.html
111 | # it always runs the file with the .py extension
112 | ~~~
113 | 
114 | 
115 | ## Other, different projects
116 | 
117 | If you're interested only in using Python the language with Vue.js, you can try [brython](http://brython.info/) and the [brython vue demo](http://brython.info/gallery/test_vue.html)
118 | 
119 | There are projects that try to help integrating Vue.js with different Python web frameworks. The goal is different: Vuejs-python makes python and vue tightly integrated, in a common, reactive model.
120 | 
121 | ----
122 | <!-- the line above delimits the end of pypi long_description -->
123 | 
124 | ## Development (TO BE REVIEWED AND UPDATED)
125 | 
126 | ### Requirements
127 | 
128 | ~~~ bash
129 | pip install aiohttp
130 | pip install websockets
131 | ~~~
132 | 
133 | You also need to get a few libraries:
134 | 
135 | ~~~
136 | cd vuejspython
137 | ./update-static.sh # or manually download the files
138 | ~~~
139 | 
140 | ### Notes
141 | 
142 | Currently, the project uses requires some "observable collections", with some modifications.
143 | They are included in the package, in `vuejspython/observablecollections`.
144 | They have been obtained with:
145 | 
146 | ~~~ bash
147 | git clone https://github.com/fousteris-dim/Python-observable-collections.git observablecollections
148 | patch -d observablecollections/ < 0001-Local-imports.patch
149 | ~~~
150 | 
151 | 
152 | 
153 | ## Helpers
154 | 
155 | ### Simply launch python and open a browser (firefox) at the right address.
156 | 
157 | ~~~ bash
158 | # bash function
159 | pvue() { (sleep .5;firefox ${1%.*}.html)& python3 ${1%.*}.py;}
160 | 
161 | # examples
162 | pvue example-1
163 | pvue example-1.
164 | pvue example-1.html
165 | pvue example-1.py
166 | ~~~
167 | 
168 | 
169 | ### OR, to develop with auto-reload.
170 | 
171 | ~~~ bash
172 | # one-time install
173 | pip install watchdog
174 | npm install -g simple-hot-reload-server
175 | 
176 | 
177 | # in terminal 1 (hot html reload, for all files)
178 | hrs .
179 | 
180 | # in terminal 2 (start and restart python
181 | pvue() { if test "$1" = open ; then shift ; (sleep 1 ; firefox "http://localhost:8082/${1%.*}.html") & fi; watchmedo auto-restart --patterns="*.py" --ignore-patterns="*/.#*.py" bash -- -c '(sleep .250 ; touch '"${1%.*}"'.html) & python3 '"${1%.*}"'.py' ; }
182 | pvue open example-1
183 | pvue example-1
184 | # the first opens firefox initially
185 | ~~~
186 | 
187 | 
188 | ## Pypi stuff
189 | 
190 | ~~~
191 | python3 -m pip install --upgrade setuptools wheel
192 | python3 -m pip install --upgrade twine
193 | 
194 | # update the version number in setup.py and then
195 | rm -rf dist/
196 | python3 setup.py sdist bdist_wheel
197 | python3 -m twine upload --repository-url https://test.pypi.org/legacy/ dist/*
198 | # OR: python3 -m twine upload dist/*
199 | 
200 | python3 -m pip install --index-url https://test.pypi.org/simple/ --no-deps vuejspython
201 | 
202 | pip uninstall vuejspython
203 | 
204 | python3 -m pip install  .. ; ll $VENV/lib/python3.6/site-packages/vuejspython
205 | ~~~
206 | 
207 | 
208 | ## TODO
209 | 
210 | - see why example-8 is slow with the python-only server
211 | - test atomic in components
212 | - make it an all-components (no too-special ROOT', with also js that tells what class and  package/file (import everything manually in a main.py if not easy)  is the root -> this way we can run a single python and have multiple demos
213 | - have a clean solution for the observable collections (integrate and clean minimal code or find another lib)
214 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | If you're looking for "Vuejs-python that brings the concepts of vuejs to Python", see our V0 branch (and readme, and V0.* on pypi).
  3 | 
  4 | The goal of vuejs-python (starting from V1) is to
  5 | - easily run standalone Vue.js components / micro-apps,
  6 | - give them access to the working directory,
  7 | - allow (unsafe) extensions to be written in Python (including numpy, local resource access, etc)
  8 | 
  9 | 
 10 | ## Installation
 11 | 
 12 | ~~~
 13 | pip install vuejspython
 14 | ~~~
 15 | 
 16 | ## Usage
 17 | 
 18 | ~~~
 19 | vjspy [--trust-python] [--port=...] [--host=...] myfile.vue more arbitrary parameters
 20 | ~~~
 21 | 
 22 | 
 23 | You can run the bundled tools using their `:` prefixed names instead of the vue file.
 24 | These files are in https://github.com/twitwi/vuejs-python/tree/main/vuejspython/builtin
 25 | 
 26 | Here are some example usage, that can be followed as a tutorial:
 27 | 
 28 | ~~~
 29 | vjspy :create-demo-files demo
 30 | vjspy :view-file demo/file1.txt
 31 | vjspy :edit-file demo/file1.txt
 32 | vjspy --trust-python :rotate-files demo/file*.txt
 33 | vjspy :toggle-exam demo/exam/*
 34 | 
 35 | # hosting the current folder with a video player
 36 | vjspy :serve-videos
 37 | ~~~
 38 | 
 39 | ## Snippets
 40 | 
 41 | ### HTML head
 42 | 
 43 | To add something in the HTML head (change title, icon, load library, etc):
 44 | 
 45 | ~~~html
 46 | <template>
 47 |     <add-in-head>
 48 |         <title>View File</title>
 49 |         <!-- an SVG icon emoji -->
 50 |         <link rel="icon" type="image/svg+xml"
 51 |         href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20style='filter:hue-rotate(60deg)'%20x='0'%20y='14'%3E👍%3C/text%3E%3C/svg%3E" />
 52 |     </add-in-head>
 53 |     ...
 54 | </template>
 55 | ~~~
 56 | 
 57 | ### Accessing Vue
 58 | 
 59 | To import elements from the bundled Vue (you can remove `lang="ts"` to use plain js, and setup to use a traditional component writing):
 60 | 
 61 | ~~~html
 62 | <script setup lang="ts">
 63 | import { ref, computed } from "#vue"
 64 | ...
 65 | </script>
 66 | ~~~
 67 | 
 68 | ### Accessing files
 69 | 
 70 | To use the custom filesystem API ([asynchronously](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises)):
 71 | 
 72 | ~~~javascript
 73 | <script...
 74 | const { fs } = window.VueRunner
 75 | 
 76 | const content = await fs.readFile('path/to/file')
 77 | 
 78 | await fs.writeFile('path/to/file', 'hello content')
 79 | 
 80 | await fs.deleteFile('path/to/file')
 81 | 
 82 | const allFilesRecursively = (await fs.listFiles()).files
 83 | ~~~
 84 | 
 85 | It allows only access to files in the folder where the program has been started (Warning: with `--trust-python`, this limitation can be worked around easily).
 86 | 
 87 | ### Accessing command line parameters
 88 | 
 89 | ~~~javascript
 90 | <script...
 91 | const { args } = window.VueRunner
 92 | // NB: starts at index 0, no parameters ⇒ args==[]
 93 | alert(JSON.stringify(args))
 94 | ~~~
 95 | 
 96 | 
 97 | ### Adding Python code
 98 | 
 99 | This requires the program to be launched with `--trust-python`.
100 | You can add python code in a script element and FastAPI:
101 | 
102 | ~~~javascript
103 | <script...
104 | alert(await((await fetch('/.path')).text()))
105 | </script>
106 | 
107 | <script lang="python">
108 | @app.get("/.path")
109 | def get_path():
110 |     import sys
111 |     return sys.path
112 | </script>
113 | ~~~
114 | 
115 | See also the [rotate-files example](https://github.com/twitwi/vuejs-python/tree/main/vuejspython/builtin/rotate-files.vue) that uses command line arguments (in python) too.
116 | 
117 | 
118 | ### Handling url hash
119 | 
120 | ~~~javascript
121 | <script...
122 | const { onHash, setHash } = window.VueRunner
123 | 
124 | onHash((h) => {
125 |     // also triggers on first load (with empty hash or the hash from the initial URL)
126 |     if (h !== '') {
127 |         alert('you changed the address to '+h)
128 |     }
129 | })
130 | 
131 | function showAbout() {
132 |     ...
133 |     setHash('about')
134 | }
135 | ~~~
136 | 
137 | 
138 | 
139 | ----
140 | <!-- the line above delimits the end of pypi long_description -->
141 | 
142 | 
143 | 
144 | ## Pypi stuff
145 | 
146 | (in a clean clone, to be sure that not too much thing are copied)
147 | 
148 | ~~~
149 | python3 -m pip install --upgrade setuptools wheel
150 | python3 -m pip install --upgrade twine
151 | 
152 | 
153 | # update the version number in setup.py and then
154 | ./update-static.sh
155 | rm -rf dist/
156 | python3 setup.py sdist bdist_wheel
157 | python3 -m twine upload --repository-url https://test.pypi.org/legacy/ dist/*
158 | # OR: python3 -m twine upload dist/*
159 | 
160 | python3 -m pip install --index-url https://test.pypi.org/simple/ --upgrade --no-deps vuejspython
161 | # OR: python3 -m pip install --upgrade --no-deps vuejspython
162 | 
163 | pip uninstall vuejspython
164 | 
165 | python3 -m pip install  .. ; ll $VENV/lib/python3.6/site-packages/vuejspython
166 | ~~~
167 | 
168 | 
169 | 
170 | ## TODO
171 | 
172 | 
173 | - [ ] maybe integrate zod?
174 | - [ ] doc that some thing are bunlded or with e.g. /.runner/builtin/diff.min.js ... consider e.g. #diff in addition for these... yes, like the #fsapi (which is built-in too)
175 | - [ ] example: exam, diff does not update/clear on save
176 | - [ ] Allow --online to get latest libs from cdn
177 | - [ ] Allow --open-browser to open the file
178 | - [ ] Allow opening an existing instance if the port is taken (already running)
179 | - [ ] Allow a random port
180 | - [ ] Warn if some python but no --trust-python (and neither --no-pyton) and show the updated command
181 | - [ ] Allow some config section, e.g. with prefered port etc
182 | - [ ] Update build system... python setup.py is deprecated
183 | - [ ] When trust-python, expose an api to run shell commands too (maybe proto in trailtools)
184 | - [ ] consider integration of .quit (from trailtools logdown / sport)
185 | - [ ] an eject command to get the source of a bultin
186 | - [ ] a @pkg/exc to allow for running a custom one, e.g. that have been vjspy install github:twitwi/blabla... or rather pip installed! (with maybe a default per package? so just @pkg is ok?)
187 | - [ ] video: allow for a logo
188 | - [ ] video: filter files (e.g. remove extensionless things, vtt too, etc, optionnal, still allow to show all with a checkbox)
189 | 
190 | BETTER FS API
191 | 
192 | - [ ] Allow --allow-all-files
193 | - [ ] Nicer not-all-recursive listing... for perfs
194 | - [ ] Also add watcher option (need websockets probably, or add a polling e.g. /.changed /.last-change)
195 | - [ ] consider use as vite-based projects too? and/or a version that hosts a build page but allows the fs api etc? and/or an fsapi that works similarly but in vite? see https://github.com/StarLederer/vite-plugin-fs (for inspiration or direct use) or 4y https://github.com/antfu/vite-fs
196 | 
197 | 


--------------------------------------------------------------------------------
/setup.py:
--------------------------------------------------------------------------------
 1 | import setuptools
 2 | 
 3 | with open("README.md", "r") as fh:
 4 |     long_description = fh.read().split('----')[0]
 5 | 
 6 | setuptools.setup(
 7 |     name="vuejspython",
 8 |     version="1.0.6",
 9 |     author="Rémi Emonet",
10 |     author_email="remi+242-e2f8@heeere.com",
11 |     description="Vuejs runner, with filesystem, and allowing python extension (e.g., to leverage numpy)",
12 |     long_description=long_description,
13 |     long_description_content_type="text/markdown",
14 |     url="https://github.com/twitwi/vuejs-python/",
15 |     install_requires=['fastapi', 'uvicorn'],
16 |     packages=setuptools.find_packages(),
17 |     package_data={
18 |         'vuejspython': ['index.html', '*.js', 'builtin/*'],
19 |     },
20 |     entry_points = {
21 |         'console_scripts': [
22 |             'vjspy = vuejspython.run:cli',                  
23 |         ],              
24 |     },
25 |     classifiers=[
26 |         "Programming Language :: Python :: 3",
27 |         "License :: OSI Approved :: MIT License",
28 |         "Operating System :: OS Independent",
29 |     ],
30 | )
31 | 


--------------------------------------------------------------------------------
/update-static.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | cat <<EOF > /dev/null
 4 |     <script type="importmap" class="addedbyvrunner">
 5 |       {
 6 |         "imports": {
 7 |           "#vue": "/.runner/vue.esm-browser.prod.js", "DOWNLOAD:https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js":"",
 8 |           ...
 9 | EOF
10 | 
11 | 
12 | function get() {
13 |     # key is e.g. #vue
14 |     local key=$1
15 |     local pathurl=$(cat vuejspython/index.html | grep "\"$key\": " | sed -e 's@.*: "/.runner/\(.*\)", "DOWNLOAD:\(.*\)":"".*@\1|||\2@g')
16 |     local path=${pathurl%|||*}
17 |     local url=${pathurl#*|||}
18 |     echo -e "\n\n# \"$url\" ⇒ \"$path\"\n"
19 |     wget "$url" -O "vuejspython/$path"
20 | }
21 | 
22 | 
23 | get '#vue' https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js
24 | get '#sfc' https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.esm.js


--------------------------------------------------------------------------------
/vuejspython/__init__.py:
--------------------------------------------------------------------------------
1 | __name__ = 'vuejspython'
2 | 


--------------------------------------------------------------------------------
/vuejspython/builtin/create-demo-files.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <add-in-head>
  3 |         <title>Create Demo Files</title>
  4 |     </add-in-head>
  5 |     <div>
  6 |         Status: {{ status }}.
  7 |         <br/>
  8 |         Files:
  9 |         <ul>
 10 |             <li v-for="f in files" @click="currentFile = f" :class="{current: currentFile == f}">{{ f }}</li>
 11 |         </ul>
 12 |         <button @click="clearDemoFiles()">Clear Demo Files</button>
 13 |         <button @click="clearDemoFiles(false)">🐇</button>
 14 |         <br/>
 15 |         <button @click="createDemoFiles()">Re-Create Demo Files</button>
 16 |         <pre>{{ currentFileContent }}</pre>
 17 |     </div>
 18 | </template>
 19 | <style>
 20 | .current { font-weight: bold; }
 21 | </style>
 22 | <script setup>
 23 | import { ref, watch } from '#vue'; // embedded vue
 24 | const { fs } = window.VueRunner;
 25 | 
 26 | const currentFile = ref('');
 27 | const currentFileContent = ref('');
 28 | watch(currentFile, async (f) => {
 29 |     if (!f) {
 30 |         currentFileContent.value = '';
 31 |         return;
 32 |     }
 33 |     currentFileContent.value = 'loading...';
 34 |     currentFileContent.value = await fs.readFile(f);
 35 | });
 36 | const status = ref('init...');
 37 | 
 38 | async function createDemoFiles() {
 39 |     await updateFiles();
 40 |     currentFile.value = '';
 41 |     status.value = 'creating (slowly)...';
 42 |     const demoFiles = {
 43 |         'demo/file1.txt': 'This is the first file\nEnjoy vjspy!\n',
 44 |         'demo/file2.txt': 'This is the second of the files\n',
 45 |         'demo/file3.txt': 'This is finally the third file.\nThe best of all!\n',
 46 |         'demo/exam/minimalish.tex': `
 47 | %META-SHOW: ["sess1", "sess2", "sess3"]
 48 | %META-PREFIXES: ["%", " "]
 49 | 
 50 | %\\question{What is your favorite color?} %META: ["sess1", "sess2"]\n
 51 |  \\question{What is the airspeed velocity of an unladen swallow?} %META: ["test", "sess1", "sess3"]\n
 52 | \\question{How do you know so much about swallows?} %META: ["sess3"]\n
 53 | %METASEP: a separator here\n
 54 | %\\question{What is the color of the sky?} %META: []\n`,
 55 | /////
 56 |         'demo/exam/main.tex': `
 57 | % This is the main source file, with some config shared by all files it could include.\n
 58 | % In practice this file is META-INCLUDED by the other files.\n\n
 59 | %META-INFO: sess1 ::: The first session with these questions.\n
 60 | %META-INFO: sess3 ::: The third session with these questions.\n
 61 | %META-HIGHLIGHT: {"sess1": "background: lightred", "sess2": "background: orange", "sess2 :not(:checked)": "opacity: 0.2" }\n\n
 62 | %META-SHOW: ["sess1", "sess2", "sess3"]\n\n
 63 | This can contain toggles too.\n
 64 | \n
 65 | %\\question{What is your favorite color?} %META: ["sess1", "sess2"]\n
 66 |  \\question{What is the airspeed velocity of an unladen swallow?} %META: ["test", "sess1", "sess3"]\n
 67 | \\question{How do you know so much about swallows?} %META: ["sess3"]\n
 68 | %METASEP: a separator here\n
 69 | %\\question{What is the color of the sky?} %META: []\n\n
 70 | Commenting all lines in a block is also supported.\n
 71 | % METABEGIN: groupall ::: ["sess1", "sess2"]\n
 72 | %Bla bla bla\n
 73 | %Blo blo blob\n
 74 | % METAEND\n\n
 75 | `,
 76 | /////
 77 |         'demo/exam/secondary.tex': `
 78 | %META-INCLUDE: main.tex
 79 | \n
 80 | %\\question{What is your favorite color?} %META: ["sess1", "sess2"]\n
 81 |  \\question{What is the airspeed velocity of an unladen swallow?} %META: ["test", "sess1", "sess3"]\n
 82 | \\question{How do you know so much about swallows?} %META: ["sess3"]\n
 83 | %METASEP: a separator here\n
 84 | %\\question{What is the color of the sky?} %META: []\n`,
 85 | /////
 86 |     };
 87 | 
 88 |     for (const [path, content] of Object.entries(demoFiles)) {
 89 |         await fs.writeFile(path, content);
 90 |         await updateFiles();
 91 |     }
 92 |     status.value = 'created';
 93 | }
 94 | 
 95 | async function clearDemoFiles(updateALot = true) {
 96 |     if (updateALot) await updateFiles();
 97 |     status.value = `clearing (slowly = ${updateALot})...`;
 98 |     for (const f of files.value) {
 99 |         await fs.deleteFile(f);
100 |         if (updateALot) await updateFiles();
101 |     }
102 |     await updateFiles();
103 |     status.value = 'cleared';
104 | }
105 | 
106 | const files = ref([]);
107 | async function updateFiles() {
108 |     files.value = (await fs.listFiles()).files.filter(f => f.startsWith('demo/') && !f.endsWith('/')).sort();
109 | }
110 | 
111 | createDemoFiles();
112 | </script>
113 | 


--------------------------------------------------------------------------------
/vuejspython/builtin/diff.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 | 
 3 |  diff v5.1.0
 4 | 
 5 | Software License Agreement (BSD License)
 6 | 
 7 | Copyright (c) 2009-2015, Kevin Decker <kpdecker@gmail.com>
 8 | 
 9 | All rights reserved.
10 | 
11 | Redistribution and use of this software in source and binary forms, with or without modification,
12 | are permitted provided that the following conditions are met:
13 | 
14 | * Redistributions of source code must retain the above
15 |   copyright notice, this list of conditions and the
16 |   following disclaimer.
17 | 
18 | * Redistributions in binary form must reproduce the above
19 |   copyright notice, this list of conditions and the
20 |   following disclaimer in the documentation and/or other
21 |   materials provided with the distribution.
22 | 
23 | * Neither the name of Kevin Decker nor the names of its
24 |   contributors may be used to endorse or promote products
25 |   derived from this software without specific prior
26 |   written permission.
27 | 
28 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
29 | IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
30 | FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
31 | CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
32 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
33 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
34 | IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
35 | OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
36 | @license
37 | */
38 | !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e=e||self).Diff={})}(this,function(e){"use strict";function t(){}t.prototype={diff:function(u,a,e){var n=2<arguments.length&&void 0!==e?e:{},t=n.callback;"function"==typeof n&&(t=n,n={}),this.options=n;var f=this;function d(e){return t?(setTimeout(function(){t(void 0,e)},0),!0):e}u=this.castInput(u),a=this.castInput(a),u=this.removeEmpty(this.tokenize(u));var c=(a=this.removeEmpty(this.tokenize(a))).length,h=u.length,p=1,r=c+h;n.maxEditLength&&(r=Math.min(r,n.maxEditLength));var v=[{newPos:-1,components:[]}],i=this.extractCommon(v[0],a,u,0);if(v[0].newPos+1>=c&&h<=i+1)return d([{value:this.join(a),count:a.length}]);function o(){for(var e,n=-1*p;n<=p;n+=2){var t=void 0,r=v[n-1],i=v[n+1],o=(i?i.newPos:0)-n;r&&(v[n-1]=void 0);var l=r&&r.newPos+1<c,s=i&&0<=o&&o<h;if(l||s){if(!l||s&&r.newPos<i.newPos?(t={newPos:(e=i).newPos,components:e.components.slice(0)},f.pushComponent(t.components,void 0,!0)):((t=r).newPos++,f.pushComponent(t.components,!0,void 0)),o=f.extractCommon(t,a,u,n),t.newPos+1>=c&&h<=o+1)return d(function(e,n,t,r,i){for(var o=0,l=n.length,s=0,u=0;o<l;o++){var a,f,d=n[o];d.removed?(d.value=e.join(r.slice(u,u+d.count)),u+=d.count,o&&n[o-1].added&&(a=n[o-1],n[o-1]=n[o],n[o]=a)):(!d.added&&i?(f=(f=t.slice(s,s+d.count)).map(function(e,n){var t=r[u+n];return t.length>e.length?t:e}),d.value=e.join(f)):d.value=e.join(t.slice(s,s+d.count)),s+=d.count,d.added||(u+=d.count))}var c=n[l-1];1<l&&"string"==typeof c.value&&(c.added||c.removed)&&e.equals("",c.value)&&(n[l-2].value+=c.value,n.pop());return n}(f,t.components,a,u,f.useLongestToken));v[n]=t}else v[n]=void 0}p++}if(t)!function e(){setTimeout(function(){return r<p?t():void(o()||e())},0)}();else for(;p<=r;){var l=o();if(l)return l}},pushComponent:function(e,n,t){var r=e[e.length-1];r&&r.added===n&&r.removed===t?e[e.length-1]={count:r.count+1,added:n,removed:t}:e.push({count:1,added:n,removed:t})},extractCommon:function(e,n,t,r){for(var i=n.length,o=t.length,l=e.newPos,s=l-r,u=0;l+1<i&&s+1<o&&this.equals(n[l+1],t[s+1]);)l++,s++,u++;return u&&e.components.push({count:u}),e.newPos=l,s},equals:function(e,n){return this.options.comparator?this.options.comparator(e,n):e===n||this.options.ignoreCase&&e.toLowerCase()===n.toLowerCase()},removeEmpty:function(e){for(var n=[],t=0;t<e.length;t++)e[t]&&n.push(e[t]);return n},castInput:function(e){return e},tokenize:function(e){return e.split("")},join:function(e){return e.join("")}};var r=new t;function i(e,n){if("function"==typeof e)n.callback=e;else if(e)for(var t in e)e.hasOwnProperty(t)&&(n[t]=e[t]);return n}var o=/^[A-Za-z\xC0-\u02C6\u02C8-\u02D7\u02DE-\u02FF\u1E00-\u1EFF]+$/,l=/\S/,s=new t;s.equals=function(e,n){return this.options.ignoreCase&&(e=e.toLowerCase(),n=n.toLowerCase()),e===n||this.options.ignoreWhitespace&&!l.test(e)&&!l.test(n)},s.tokenize=function(e){for(var n=e.split(/([^\S\r\n]+|[()[\]{}'"\r\n]|\b)/),t=0;t<n.length-1;t++)!n[t+1]&&n[t+2]&&o.test(n[t])&&o.test(n[t+2])&&(n[t]+=n[t+2],n.splice(t+1,2),t--);return n};var u=new t;function L(e,n,t){return u.diff(e,n,t)}u.tokenize=function(e){var n=[],t=e.split(/(\n|\r\n)/);t[t.length-1]||t.pop();for(var r=0;r<t.length;r++){var i=t[r];r%2&&!this.options.newlineIsToken?n[n.length-1]+=i:(this.options.ignoreWhitespace&&(i=i.trim()),n.push(i))}return n};var a=new t;a.tokenize=function(e){return e.split(/(\S.+?[.!?])(?=\s+|$)/)};var f=new t;function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function x(e){return function(e){if(Array.isArray(e))return c(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,n){if(!e)return;if("string"==typeof e)return c(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return c(e,n)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}f.tokenize=function(e){return e.split(/([{}:;,]|\s+)/)};var h=Object.prototype.toString,p=new t;function v(e,n,t,r,i){var o,l;for(n=n||[],t=t||[],r&&(e=r(i,e)),o=0;o<n.length;o+=1)if(n[o]===e)return t[o];if("[object Array]"===h.call(e)){for(n.push(e),l=new Array(e.length),t.push(l),o=0;o<e.length;o+=1)l[o]=v(e[o],n,t,r,i);return n.pop(),t.pop(),l}if(e&&e.toJSON&&(e=e.toJSON()),"object"===d(e)&&null!==e){n.push(e),l={},t.push(l);var s,u=[];for(s in e)e.hasOwnProperty(s)&&u.push(s);for(u.sort(),o=0;o<u.length;o+=1)l[s=u[o]]=v(e[s],n,t,r,s);n.pop(),t.pop()}else l=e;return l}p.useLongestToken=!0,p.tokenize=u.tokenize,p.castInput=function(e){var n=this.options,t=n.undefinedReplacement,r=n.stringifyReplacer,i=void 0===r?function(e,n){return void 0===n?t:n}:r;return"string"==typeof e?e:JSON.stringify(v(e,null,null,i),i,"  ")},p.equals=function(e,n){return t.prototype.equals.call(p,e.replace(/,([\r\n])/g,"$1"),n.replace(/,([\r\n])/g,"$1"))};var g=new t;function j(e){var l=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},s=e.split(/\r\n|[\n\v\f\r\x85]/),u=e.match(/\r\n|[\n\v\f\r\x85]/g)||[],i=[],a=0;function n(){var e={};for(i.push(e);a<s.length;){var n=s[a];if(/^(\-\-\-|\+\+\+|@@)\s/.test(n))break;var t=/^(?:Index:|diff(?: -r \w+)+)\s+(.+?)\s*$/.exec(n);t&&(e.index=t[1]),a++}for(o(e),o(e),e.hunks=[];a<s.length;){var r=s[a];if(/^(Index:|diff|\-\-\-|\+\+\+)\s/.test(r))break;if(/^@@/.test(r))e.hunks.push(function(){var e=a,n=s[a++].split(/@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/),t={oldStart:+n[1],oldLines:void 0===n[2]?1:+n[2],newStart:+n[3],newLines:void 0===n[4]?1:+n[4],lines:[],linedelimiters:[]};0===t.oldLines&&(t.oldStart+=1);0===t.newLines&&(t.newStart+=1);for(var r=0,i=0;a<s.length&&!(0===s[a].indexOf("--- ")&&a+2<s.length&&0===s[a+1].indexOf("+++ ")&&0===s[a+2].indexOf("@@"));a++){var o=0==s[a].length&&a!=s.length-1?" ":s[a][0];if("+"!==o&&"-"!==o&&" "!==o&&"\\"!==o)break;t.lines.push(s[a]),t.linedelimiters.push(u[a]||"\n"),"+"===o?r++:"-"===o?i++:" "===o&&(r++,i++)}r||1!==t.newLines||(t.newLines=0);i||1!==t.oldLines||(t.oldLines=0);if(l.strict){if(r!==t.newLines)throw new Error("Added line count did not match for hunk at line "+(e+1));if(i!==t.oldLines)throw new Error("Removed line count did not match for hunk at line "+(e+1))}return t}());else{if(r&&l.strict)throw new Error("Unknown line "+(a+1)+" "+JSON.stringify(r));a++}}}function o(e){var n,t,r,i=/^(---|\+\+\+)\s+(.*)$/.exec(s[a]);i&&(n="---"===i[1]?"old":"new",r=(t=i[2].split("\t",2))[0].replace(/\\\\/g,"\\"),/^".*"$/.test(r)&&(r=r.substr(1,r.length-2)),e[n+"FileName"]=r,e[n+"Header"]=(t[1]||"").trim(),a++)}for(;a<s.length;)n();return i}function m(e,n){var t=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};if("string"==typeof n&&(n=j(n)),Array.isArray(n)){if(1<n.length)throw new Error("applyPatch only works with a single input.");n=n[0]}var r,i,l=e.split(/\r\n|[\n\v\f\r\x85]/),o=e.match(/\r\n|[\n\v\f\r\x85]/g)||[],s=n.hunks,u=t.compareLine||function(e,n,t,r){return n===r},a=0,f=t.fuzzFactor||0,d=0,c=0;for(var h=0;h<s.length;h++){for(var p=s[h],v=l.length-p.oldLines,g=0,m=c+p.oldStart-1,w=function(n,t,r){var i=!0,o=!1,l=!1,s=1;return function e(){if(i&&!l){if(o?s++:i=!1,n+s<=r)return s;l=!0}if(!o)return l||(i=!0),t<=n-s?-s++:(o=!0,e())}}(m,d,v);void 0!==g;g=w())if(function(e,n){for(var t=0;t<e.lines.length;t++){var r=e.lines[t],i=0<r.length?r[0]:" ",o=0<r.length?r.substr(1):r;if(" "===i||"-"===i){if(!u(n+1,l[n],i,o)&&f<++a)return;n++}}return 1}(p,m+g)){p.offset=c+=g;break}if(void 0===g)return!1;d=p.offset+p.oldStart+p.oldLines}for(var y=0,L=0;L<s.length;L++){var x=s[L],S=x.oldStart+x.offset+y-1;y+=x.newLines-x.oldLines;for(var k=0;k<x.lines.length;k++){var b,F=x.lines[k],N=0<F.length?F[0]:" ",H=0<F.length?F.substr(1):F,P=x.linedelimiters[k];" "===N?S++:"-"===N?(l.splice(S,1),o.splice(S,1)):"+"===N?(l.splice(S,0,H),o.splice(S,0,P),S++):"\\"===N&&("+"===(b=x.lines[k-1]?x.lines[k-1][0]:null)?r=!0:"-"===b&&(i=!0))}}if(r)for(;!l[l.length-1];)l.pop(),o.pop();else i&&(l.push(""),o.push("\n"));for(var C=0;C<l.length-1;C++)l[C]=l[C]+o[C];return l.join("")}function w(e,n,a,f,t,r,d){void 0===(d=d||{}).context&&(d.context=4);var c=L(a,f,d);if(c){c.push({value:"",lines:[]});for(var h=[],p=0,v=0,g=[],m=1,w=1,i=0;i<c.length;i++)!function(e){var n,t,r,i,o,l,s=c[e],u=s.lines||s.value.replace(/\n$/,"").split("\n");s.lines=u,s.added||s.removed?(p||(n=c[e-1],p=m,v=w,n&&(g=0<d.context?y(n.lines.slice(-d.context)):[],p-=g.length,v-=g.length)),g.push.apply(g,x(u.map(function(e){return(s.added?"+":"-")+e}))),s.added?w+=u.length:m+=u.length):(p&&(u.length<=2*d.context&&e<c.length-2?g.push.apply(g,x(y(u))):(t=Math.min(u.length,d.context),g.push.apply(g,x(y(u.slice(0,t)))),r={oldStart:p,oldLines:m-p+t,newStart:v,newLines:w-v+t,lines:g},e>=c.length-2&&u.length<=d.context&&(i=/\n$/.test(a),o=/\n$/.test(f),l=0==u.length&&g.length>r.oldLines,!i&&l&&0<a.length&&g.splice(r.oldLines,0,"\\ No newline at end of file"),(i||l)&&o||g.push("\\ No newline at end of file")),h.push(r),v=p=0,g=[])),m+=u.length,w+=u.length)}(i);return{oldFileName:e,newFileName:n,oldHeader:t,newHeader:r,hunks:h}}function y(e){return e.map(function(e){return" "+e})}}function y(e,n,t,r,i,o,l){return function(e){var n=[];e.oldFileName==e.newFileName&&n.push("Index: "+e.oldFileName),n.push("==================================================================="),n.push("--- "+e.oldFileName+(void 0===e.oldHeader?"":"\t"+e.oldHeader)),n.push("+++ "+e.newFileName+(void 0===e.newHeader?"":"\t"+e.newHeader));for(var t=0;t<e.hunks.length;t++){var r=e.hunks[t];0===r.oldLines&&--r.oldStart,0===r.newLines&&--r.newStart,n.push("@@ -"+r.oldStart+","+r.oldLines+" +"+r.newStart+","+r.newLines+" @@"),n.push.apply(n,r.lines)}return n.join("\n")+"\n"}(w(e,n,t,r,i,o,l))}function S(e,n){if(n.length>e.length)return!1;for(var t=0;t<n.length;t++)if(n[t]!==e[t])return!1;return!0}function k(e){var n=function r(e){var i=0;var o=0;e.forEach(function(e){var n,t;"string"!=typeof e?(n=r(e.mine),t=r(e.theirs),void 0!==i&&(n.oldLines===t.oldLines?i+=n.oldLines:i=void 0),void 0!==o&&(n.newLines===t.newLines?o+=n.newLines:o=void 0)):(void 0===o||"+"!==e[0]&&" "!==e[0]||o++,void 0===i||"-"!==e[0]&&" "!==e[0]||i++)});return{oldLines:i,newLines:o}}(e.lines),t=n.oldLines,r=n.newLines;void 0!==t?e.oldLines=t:delete e.oldLines,void 0!==r?e.newLines=r:delete e.newLines}function b(e,n){if("string"!=typeof e)return e;if(/^@@/m.test(e)||/^Index:/m.test(e))return j(e)[0];if(!n)throw new Error("Must provide a base reference or pass in a patch");return w(void 0,void 0,n,e)}function F(e){return e.newFileName&&e.newFileName!==e.oldFileName}function N(e,n,t){return n===t?n:(e.conflict=!0,{mine:n,theirs:t})}function H(e,n){return e.oldStart<n.oldStart&&e.oldStart+e.oldLines<n.oldStart}function P(e,n){return{oldStart:e.oldStart,oldLines:e.oldLines,newStart:e.newStart+n,newLines:e.newLines,lines:e.lines}}function C(e,n,t,r){var i,o=O(n),l=function(e,n){var t=[],r=[],i=0,o=!1,l=!1;for(;i<n.length&&e.index<e.lines.length;){var s=e.lines[e.index],u=n[i];if("+"===u[0])break;if(o=o||" "!==s[0],r.push(u),i++,"+"===s[0])for(l=!0;"+"===s[0];)t.push(s),s=e.lines[++e.index];u.substr(1)===s.substr(1)?(t.push(s),e.index++):l=!0}"+"===(n[i]||"")[0]&&o&&(l=!0);if(l)return t;for(;i<n.length;)r.push(n[i++]);return{merged:r,changes:t}}(t,o);l.merged?(i=e.lines).push.apply(i,x(l.merged)):E(e,r?l:o,r?o:l)}function E(e,n,t){e.conflict=!0,e.lines.push({conflict:!0,mine:n,theirs:t})}function z(e,n,t){for(;n.offset<t.offset&&n.index<n.lines.length;){var r=n.lines[n.index++];e.lines.push(r),n.offset++}}function A(e,n){for(;n.index<n.lines.length;){var t=n.lines[n.index++];e.lines.push(t)}}function O(e){for(var n=[],t=e.lines[e.index][0];e.index<e.lines.length;){var r=e.lines[e.index];if("-"===t&&"+"===r[0]&&(t="+"),t!==r[0])break;n.push(r),e.index++}return n}function I(e){return e.reduce(function(e,n){return e&&"-"===n[0]},!0)}function $(e,n,t){for(var r=0;r<t;r++){var i=n[n.length-t+r].substr(1);if(e.lines[e.index+r]!==" "+i)return}return e.index+=t,1}g.tokenize=function(e){return e.slice()},g.join=g.removeEmpty=function(e){return e},e.Diff=t,e.applyPatch=m,e.applyPatches=function(e,o){"string"==typeof e&&(e=j(e));var n=0;!function r(){var i=e[n++];if(!i)return o.complete();o.loadFile(i,function(e,n){if(e)return o.complete(e);var t=m(n,i,o);o.patched(i,t,function(e){return e?o.complete(e):void r()})})}()},e.canonicalize=v,e.convertChangesToDMP=function(e){for(var n,t,r=[],i=0;i<e.length;i++)t=(n=e[i]).added?1:n.removed?-1:0,r.push([t,n.value]);return r},e.convertChangesToXML=function(e){for(var n,t=[],r=0;r<e.length;r++){var i=e[r];i.added?t.push("<ins>"):i.removed&&t.push("<del>"),t.push((n=i.value,n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"))),i.added?t.push("</ins>"):i.removed&&t.push("</del>")}return t.join("")},e.createPatch=function(e,n,t,r,i,o){return y(e,e,n,t,r,i,o)},e.createTwoFilesPatch=y,e.diffArrays=function(e,n,t){return g.diff(e,n,t)},e.diffChars=function(e,n,t){return r.diff(e,n,t)},e.diffCss=function(e,n,t){return f.diff(e,n,t)},e.diffJson=function(e,n,t){return p.diff(e,n,t)},e.diffLines=L,e.diffSentences=function(e,n,t){return a.diff(e,n,t)},e.diffTrimmedLines=function(e,n,t){var r=i(t,{ignoreWhitespace:!0});return u.diff(e,n,r)},e.diffWords=function(e,n,t){return t=i(t,{ignoreWhitespace:!0}),s.diff(e,n,t)},e.diffWordsWithSpace=function(e,n,t){return s.diff(e,n,t)},e.merge=function(e,n,t){e=b(e,t),n=b(n,t);var r={};(e.index||n.index)&&(r.index=e.index||n.index),(e.newFileName||n.newFileName)&&(F(e)?F(n)?(r.oldFileName=N(r,e.oldFileName,n.oldFileName),r.newFileName=N(r,e.newFileName,n.newFileName),r.oldHeader=N(r,e.oldHeader,n.oldHeader),r.newHeader=N(r,e.newHeader,n.newHeader)):(r.oldFileName=e.oldFileName,r.newFileName=e.newFileName,r.oldHeader=e.oldHeader,r.newHeader=e.newHeader):(r.oldFileName=n.oldFileName||e.oldFileName,r.newFileName=n.newFileName||e.newFileName,r.oldHeader=n.oldHeader||e.oldHeader,r.newHeader=n.newHeader||e.newHeader)),r.hunks=[];for(var i=0,o=0,l=0,s=0;i<e.hunks.length||o<n.hunks.length;){var u,a=e.hunks[i]||{oldStart:1/0},f=n.hunks[o]||{oldStart:1/0};H(a,f)?(r.hunks.push(P(a,l)),i++,s+=a.newLines-a.oldLines):H(f,a)?(r.hunks.push(P(f,s)),o++,l+=f.newLines-f.oldLines):(function(e,n,t,r,i){var o,l,s={offset:n,lines:t,index:0},u={offset:r,lines:i,index:0};z(e,s,u),z(e,u,s);for(;s.index<s.lines.length&&u.index<u.lines.length;){var a=s.lines[s.index],f=u.lines[u.index];"-"!==a[0]&&"+"!==a[0]||"-"!==f[0]&&"+"!==f[0]?"+"===a[0]&&" "===f[0]?(o=e.lines).push.apply(o,x(O(s))):"+"===f[0]&&" "===a[0]?(l=e.lines).push.apply(l,x(O(u))):"-"===a[0]&&" "===f[0]?C(e,s,u):"-"===f[0]&&" "===a[0]?C(e,u,s,!0):a===f?(e.lines.push(a),s.index++,u.index++):E(e,O(s),O(u)):function(e,n,t){var r,i,o,l=O(n),s=O(t);if(I(l)&&I(s)){if(S(l,s)&&$(t,l,l.length-s.length))return(r=e.lines).push.apply(r,x(l));if(S(s,l)&&$(n,s,s.length-l.length))return(i=e.lines).push.apply(i,x(s))}else if(function(e,n){return e.length===n.length&&S(e,n)}(l,s))return(o=e.lines).push.apply(o,x(l));E(e,l,s)}(e,s,u)}A(e,s),A(e,u),k(e)}(u={oldStart:Math.min(a.oldStart,f.oldStart),oldLines:0,newStart:Math.min(a.newStart+l,f.oldStart+s),newLines:0,lines:[]},a.oldStart,a.lines,f.oldStart,f.lines),o++,i++,r.hunks.push(u))}return r},e.parsePatch=j,e.structuredPatch=w,Object.defineProperty(e,"__esModule",{value:!0})});


--------------------------------------------------------------------------------
/vuejspython/builtin/edit-file.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <add-in-head>
 3 |         <title>Edit File</title>
 4 |     </add-in-head>
 5 |     <div>
 6 |         <h1><pre>{{ file }}</pre></h1>
 7 |         <div>
 8 |             <button @click="refresh()">reload</button>
 9 |             <button @click="save()" :disabled="content == lastContent">save</button>
10 |         </div>
11 |         <textarea v-model="content"></textarea>
12 |     </div>
13 | </template>
14 | <style>
15 | button {
16 |     margin: 1em;
17 | }
18 | textarea {
19 |     margin: 1em -0.2em;
20 |     width: 100%;
21 |     height: 80vh;
22 | }
23 | </style>
24 | <script setup>
25 | import { ref } from '#vue';
26 | const { args, fs } = window.VueRunner;
27 | 
28 | const file = args[0];
29 | const lastContent = ref('loading...');
30 | const content = ref(lastContent.value);
31 | 
32 | async function refresh() {
33 |     content.value = await fs.readFile(file)
34 |     lastContent.value = content.value;
35 | }
36 | 
37 | async function save() {
38 |     await fs.writeFile(file, content.value);
39 |     await refresh();
40 | }
41 | 
42 | refresh();
43 | </script>
44 | 


--------------------------------------------------------------------------------
/vuejspython/builtin/rotate-files.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <add-in-head>
 3 |         <title>Rotate Files</title>
 4 |     </add-in-head>
 5 |     <div>
 6 |         <h1>Rotate <pre>{{ files.length }} files</pre></h1>
 7 |         <div class="main">
 8 |             <div v-for="f in files" :class="{ wip: !fileContent[f] }">
 9 |                 <h5>{{ f }}</h5>
10 |                 <pre>{{ fileContent[f] }}</pre>
11 |             </div>
12 |         </div>
13 |         <button @click="rotate()">Rotate</button>
14 |     </div>
15 | </template>
16 | <script setup>
17 | import { ref, computed } from '#vue';
18 | const { args, fs } = window.VueRunner;
19 | 
20 | const files = args;
21 | const fileContent = ref({});
22 | 
23 | async function refresh() {
24 |     const newFileContent = {};
25 |     for (const f of files) {
26 |         newFileContent[f] = await fs.readFile(f);
27 |     }
28 |     fileContent.value = newFileContent;
29 | }
30 | async function rotate() {
31 |     await fetch('/.rotate');
32 |     await refresh();
33 | }
34 | refresh();
35 | </script>
36 | <script lang="python">
37 | 
38 | @app.get("/.rotate")
39 | def do_rotate():
40 |     import os
41 |     import sys
42 |     import shutil
43 |     import tempfile
44 |     files = sys.argv[1:]
45 | 
46 |     temp_file = tempfile.NamedTemporaryFile(delete=False)
47 |     temp_file.close()
48 |     shutil.copyfile(files[0], temp_file.name)
49 |     for i in range(len(files) - 1):
50 |         shutil.copyfile(files[i + 1], files[i])
51 |     shutil.copyfile(temp_file.name, files[-1])
52 |     os.remove(temp_file.name)
53 | 
54 | </script>
55 | 
56 | 


--------------------------------------------------------------------------------
/vuejspython/builtin/serve-videos.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <add-in-head>
  3 |         <title>video serve</title>
  4 |         <link
  5 |         rel="icon"
  6 |         href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20style='filter:hue-rotate(-90deg)'%20x='0'%20y='14'%3E📺%3C/text%3E%3C/svg%3E"
  7 |         type="image/svg+xml"
  8 |       />
  9 |     </add-in-head>
 10 |     <div id="list" :class="{hidden: loading, force: !video}">
 11 |         <ul>
 12 |             <li v-for="f in files" :key="f" @click="play(f)">
 13 |                 {{ f }}
 14 |             </li>
 15 |         </ul>
 16 |     </div>
 17 |     <div :class="{logo: true, dismissed}">
 18 |         <img src="__logo.svg" onerror="this.src = this.src.endsWith('svg') ? this.src.replace(/[.]svg$/, '.png') : ''"/>
 19 |     </div>
 20 |     <div id="player">
 21 |         <video :src="video" controls ref="videoElement" :class="{hidden: video==''}">
 22 |             <track :src="(video??'').replace(/[.][^.]*$/g, '.vtt')" kind="subtitles" srclang="en" label="English" default />
 23 |         </video>
 24 |     </div>
 25 | </template>
 26 | 
 27 | <script setup lang="ts">
 28 | import { ref, onMounted } from "#vue";
 29 | 
 30 | const { fs, onHash, setHash } = window.VueRunner;
 31 | 
 32 | const loading = ref(false)
 33 | const video = ref('')
 34 | const videoElement = ref(null)
 35 | const files = ref([] as string[])
 36 | const dismissed = ref(false)
 37 | 
 38 | onMounted(() => dismissed.value = true)
 39 | 
 40 | setInterval(()=> {
 41 |     if (videoElement.value) {
 42 |         const t = videoElement.value.currentTime
 43 |         if (t > 10) {
 44 |             localStorage.setItem('TIME:'+video.value, t)
 45 |         }
 46 |     }
 47 | }, 5000)
 48 | 
 49 | function play(f: string, t?: number) {
 50 |     video.value = f
 51 |     setHash(f)
 52 |     loading.value = true
 53 |     setTimeout(()=> {
 54 |         loading.value = false
 55 |         if (videoElement.value) {
 56 |             videoElement.value.currentTime = t ?? 0
 57 |             videoElement.value.play()
 58 |         }
 59 |     }, 10)
 60 | }
 61 | 
 62 | onHash(function (f) {
 63 |     const t = localStorage.getItem('TIME:' + f)
 64 |     if (t) {
 65 |         setTimeout(() => {
 66 |             if (confirm('Restart from minute ' + parseInt(parseFloat(t)/60) + '?')) {
 67 |                 play(f, parseFloat(t))
 68 |             }
 69 |         }, 10)
 70 |     } else {
 71 |         play(f)
 72 |     }
 73 | })
 74 | 
 75 | async function start() {
 76 |     files.value = (await fs.listFiles()).files.filter(f => !f.startsWith('.') && !f.startsWith('__') && !f.includes('.part') && !f.endsWith('.vtt') && !f.endsWith('/'))
 77 | }
 78 | start()
 79 | </script>
 80 | 
 81 | <style>
 82 | body, html {
 83 |   padding: 0;
 84 |   margin: 0;
 85 | }
 86 | #player {
 87 |   background-color: #111;
 88 |   width: 100vw;
 89 |   height: 100vh;
 90 |   display: flex;
 91 |   flex-direction: column;
 92 |   justify-content: center;
 93 |   video {
 94 |       max-height: 100%;
 95 |       &.hidden {
 96 |         display: none;
 97 |       }
 98 |   }
 99 | }
100 | #list {
101 |     padding: 1em;
102 |     position: fixed;
103 |     color: white;
104 |     background: #222A;
105 |     height: 90vh;
106 |     transition: 1s all;
107 |     width: 40vw;
108 |     max-height: 100vh;
109 |     overflow: scroll;
110 |     font-size: 25px;
111 |     line-height: 1.85;
112 |     &:not(:hover):not(.force), &.hidden {
113 |         opacity: 0;
114 |         width: 0px;
115 |     }
116 | }
117 | .logo {
118 |   position: fixed;
119 |   inset: 0;
120 |   display: flex;
121 |   justify-content: center;
122 |   img {
123 |     max-width: 100vw;
124 |     max-height: 100vh;
125 |   }
126 |   visibility: visible;
127 |   &.dismissed {
128 |     opacity: 0;
129 |     visibility: hidden;
130 |     transition: opacity 1s 1s, visibility 2s;
131 |     }
132 | }
133 | </style>
134 | 


--------------------------------------------------------------------------------
/vuejspython/builtin/toggle-exam.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <add-in-head>
  3 |         <title>Exam Toggle</title>
  4 |     </add-in-head>
  5 |     <CSSRules/>
  6 |     <div class="tabs">
  7 |         <span v-for="f in args" @click="clickFile(f)" :class="{current: currentFile === f }">{{ f }}</span>
  8 |     </div>
  9 |     <h1>File {{ currentFile }} (commentPrefix is <pre>{{ commentPrefix }}</pre>)</h1>
 10 |     <table>
 11 |         <thead>
 12 |         <tr>
 13 |             <th v-for="s in shown" :title="info[s]">{{s}}</th>
 14 |         </tr>
 15 |         </thead>
 16 |         <tr v-for="d,dindex in data">
 17 |             <td v-for="s, index in shown" :class="'meta--'+s">
 18 |                 <span v-if="d.special === 'separator'"></span>
 19 |                 <input v-else-if="index === last || editAll" :id="index === last ? 'lastcb--'+dindex : ''" type="checkbox" :checked="d.appearsIn.includes(s)" @input="ev => toggle(d.appearsIn, s, ev.target.checked)" />
 20 |                 <input v-else type="checkbox" :checked="d.appearsIn.includes(s)" disabled />
 21 |             </td>
 22 |             <td><label :for="'lastcb--'+dindex" :title="d.title"><pre>{{d.oneliner}}</pre></label></td>
 23 |         </tr>
 24 |     </table>
 25 |     <hr/>
 26 |     <h3>Would write <button @click="() => commit()">Do WRITE</button></h3>
 27 |     <div class="diff">
 28 |     DIFF:<br/>
 29 |     <span v-for="p in diff" :class="{ added: p.added, removed: p.removed}">{{ p.value }}</span>
 30 |     </div>
 31 |     <pre>
 32 |     RAW:
 33 |     {{ willWrite }}
 34 |     </pre>
 35 |     <hr/>
 36 |     <h3>Last Read</h3>
 37 |     <pre>
 38 |     {{ lastReadContent }}
 39 |     </pre>
 40 | </template>
 41 | <style>
 42 | .tabs {
 43 |     line-height: 2.1em;
 44 | }
 45 | .tabs > span {
 46 |     display: inline-block;
 47 |     border: 4px solid grey;
 48 |     background: #EEE;
 49 |     padding: 0 1em;
 50 |     margin: 0.2em 1em;
 51 | }
 52 | .tabs > span:not(.current):hover {
 53 |     border-color: blueviolet;
 54 | }
 55 | .tabs > span.current {
 56 |     border-color: black;
 57 | }
 58 | tr:first-of-type {
 59 |     border-top: 1px solid grey;
 60 | }
 61 | thead {
 62 |     position: sticky;
 63 |     top: 20px;
 64 |     background: white;
 65 | }
 66 | td pre {
 67 |     margin: 0;
 68 |     font-weight: bold;
 69 | }
 70 | th {
 71 |     font-size: .8em;
 72 |     height: 10px;
 73 |     max-width: 20px;
 74 |     transform: translate(9px, 0px) rotate(-45deg);
 75 |     white-space: nowrap;
 76 |     border-bottom: 1px solid grey;
 77 |     padding: 0;
 78 | }
 79 | label:hover {
 80 |     text-decoration: underline;
 81 | }
 82 | h1 pre {
 83 |     display: inline-block;
 84 |     border: 1px solid grey;
 85 | }
 86 | .diff {
 87 |     white-space: pre;
 88 |     font-family: monospace;
 89 |     position: fixed;
 90 |     top: 10em; right: 0; bottom: 0;
 91 |     border: 1px solid black;
 92 |     font-size: .8rem;
 93 |     max-width: 50vw;
 94 |     overflow: scroll;
 95 |     background: #fef3c79f;
 96 |     padding: 2em;
 97 | }
 98 | .diff:hover {
 99 |     background: #fef8dc;
100 | }
101 | .diff .added {
102 |     background-color: #a7f3d0;
103 |     color: #064e3b;
104 | }
105 | .diff .removed {
106 |     background-color: #7f1d1d;
107 |     color: #fecaca;
108 | }
109 | </style>
110 | <script type="module">
111 | const { args, fs, onHash, setHash } = window.VueRunner;
112 | import { h } from '#vue'
113 | const Diff = require('.assets/diff.min.js')
114 | 
115 | function JSONparse(txt) {
116 |     try {
117 |         return JSON.parse(txt);
118 |     } catch(e) {
119 |         console.log("EXCEPTION IN JSON.parse", txt, e)
120 |         throw e;
121 |     }
122 | }
123 | 
124 | export default {
125 |     props: {
126 |         args: { default: args },
127 |     },
128 |     components: {
129 |         CSSRules: {
130 |             render() {
131 |                 return h('style', {innerHTML: this.$parent.style})
132 |             }
133 |         }
134 |     },
135 |     data: () => ({
136 |         currentFile: '',
137 |         editAll: false,
138 |         commentPrefix: '%%% ',
139 |         nocommentPrefix: ' ',
140 |         shown: [],
141 |         highlighted: {},
142 |         info: {},
143 |         data: [],
144 |         lastReadContent: '',
145 |         willWrite: '',
146 |         diff: {},
147 |     }),
148 |     async mounted() {
149 |         window.vm = this
150 |         onHash(async (h) => {
151 |             if (!h) {
152 |                 setHash(this.args[0])
153 |             } else {
154 |                 await this.openFile(h)
155 |             }
156 |         });
157 |     },
158 |     computed: {
159 |         last() {
160 |             return this.shown.length - 1
161 |         },
162 |         style() {
163 |             return Object.entries(this.highlighted).map(([k, v]) => `.meta--${k} { ${v} }`).join('\n\n')
164 |         },
165 |     },
166 |     methods: {
167 |         clickFile(f) {
168 |             setHash(f)
169 |         },
170 |         async openFile(f) {
171 |             this.currentFile = f
172 |             this.diff = {}
173 |             setHash(f)
174 |             await this.reload()
175 |         },
176 |         async toggle(arr, txt, add) {
177 |             const deleted = '::DELETED::'+txt
178 |             const i = arr.indexOf(txt)
179 |             const j = arr.indexOf(deleted)
180 |             if (i > -1) {
181 |                 arr[i] = deleted
182 |             } else if (j > -1) {
183 |                 arr[j] = txt
184 |             } else {
185 |                 arr.push(txt)
186 |             }
187 |             this.dryRun()
188 |         },
189 |         async _parse_and_digest_config(diskLines, path) {
190 |             for (const i in diskLines) {
191 |                 const l = diskLines[i]
192 |                 if (l.includes('META-PREFIXES:')) {
193 |                     [this.commentPrefix, this.nocommentPrefix] = JSONparse(l.split(/META-PREFIXES:/, 2)[1])
194 |                 } else if (l.includes('META-SHOW:')) {
195 |                     const [prefix, shown] = l.split(/META-SHOW:/, 2)
196 |                     this.commentPrefix = prefix
197 |                     this.shown = JSONparse(shown)
198 |                 } else if (l.includes('META-HIGHLIGHT:')) {
199 |                     const [, highlight] = l.split(/META-HIGHLIGHT:/, 2)
200 |                     this.highlighted = {...this.highlighted, ...JSONparse(highlight)}
201 |                 } else if (l.includes('META-INFO:')) {
202 |                     const [k, v] = l.split(/META-INFO: */, 2)[1].split(/ *::: */)
203 |                     this.info[k] = v
204 |                 } else if (l.includes('META-INCLUDE:')) {
205 |                     const [k, v] = l.split(/META-INCLUDE: */, 2)
206 |                     const includePath = [...path.split(/\//g).slice(0, -1), v].join('/')
207 |                     console.log(`Including '${v}' as '${includePath}'`)
208 |                     const includeLines = (await fs.readFile(includePath)).split(/\n/g);
209 |                     await this._parse_and_digest_config(includeLines, includePath)
210 |                 }
211 |             }
212 |         },
213 |         async _loadAndIterate(checkEquals, mode) {
214 |             const isRead = mode !== 'WRITE'
215 |             if (isRead) {
216 |                 this.data = []
217 |                 this.commentPrefix = '%%% '
218 |                 this.nocommentPrefix = ' '
219 |                 this.shown = []
220 |                 this.highlighted = {}
221 |                 this.info = {}
222 |                 this.data = []
223 |             }
224 |             const path = this.currentFile
225 |             const diskContent = await fs.readFile(path);
226 |             if (checkEquals) {
227 |                 if (diskContent !== this.lastReadContent) {
228 |                     console.log("Failed equality test", "DISK", diskContent, "LAST", this.lastReadContent)
229 |                     return false
230 |                 }
231 |             }
232 |             let diskLines = diskContent.split(/\n/g)
233 |             if (isRead) {
234 |                 this.lastReadContent = diskContent
235 |                 await this._parse_and_digest_config(diskLines, path)
236 |             }
237 |             let state = 'base'
238 |             let mem = {}
239 |             let i = 0
240 |             let iData = 0
241 |             while (i < diskLines.length) {
242 |                 let l = diskLines[i]
243 |                 if (state === 'base') {
244 |                     if (l.includes('META:')) {
245 |                         const [prefix, suffix] = l.split(/META:/, 2)
246 |                         if (isRead) {
247 |                             const appearsIn = JSONparse(suffix)
248 |                             this.data.push({
249 |                                 l, prefix, suffix, appearsIn, oneliner: prefix, title: l,
250 |                             })
251 |                         } else {
252 |                             const app = this.data[iData].appearsIn.filter(v => !v.startsWith('::DELETED::'))
253 |                             const isPresent = this.data[iData].appearsIn.includes(this.shown.slice(-1)[0])
254 |                             const P = isPresent ? this.nocommentPrefix : this.commentPrefix
255 |                             const S = prefix.startsWith(this.commentPrefix) ? prefix.substring(this.commentPrefix.length) : prefix.startsWith(this.nocommentPrefix) ? prefix.substring(this.nocommentPrefix.length) : prefix
256 |                             diskLines[i] = `${P}${S.trimLeft()}META: ${JSON.stringify(app, null, " ").replaceAll("\n", "").replaceAll('[ ', '[')}`
257 |                             iData++
258 |                         }
259 |                     } else if (l.includes('METABEGIN:')) {
260 |                         state = 'inblock'
261 |                         const [prefix, suffix1] = l.split(/METABEGIN:/, 2)
262 |                         const [desc, suffix] = suffix1.split(/ *::: */)
263 |                         if (isRead) {
264 |                             const appearsIn = JSONparse(suffix)
265 |                             this.data.push({
266 |                                 l, prefix, suffix, appearsIn, oneliner: '(((block))) ' + desc, title: '', special: 'block'
267 |                             })
268 |                         } else {
269 |                             const app = this.data[iData].appearsIn.filter(v => !v.startsWith('::DELETED::'))
270 |                             mem.isPresent = this.data[iData].appearsIn.includes(this.shown.slice(-1)[0])
271 |                             diskLines[i] = `${prefix}METABEGIN:${desc} ::: ${JSON.stringify(app, null, " ").replaceAll("\n", "").replaceAll('[ ', '[')}`
272 |                             iData++
273 |                         }
274 |                     } else if (l.includes('METASEP')) {
275 |                         const [prefix, suffix] = l.split(/METASEP/, 2)
276 |                         if (isRead) {
277 |                             this.data.push({
278 |                                 l, prefix, suffix, appearsIn: [], oneliner: '(((separator))) ' + suffix, title: l, special: 'separator'
279 |                             })
280 |                         } else {
281 |                             iData++
282 |                         }
283 |                     }
284 |                 } else if (state === 'inblock') {
285 |                     if (l.includes('METAEND')) {
286 |                         state = 'base'
287 |                     } else {
288 |                         if (isRead) {
289 |                             this.data.slice(-1)[0].title += '\n' + l
290 |                         } else {
291 |                             const { isPresent } = mem
292 |                             const P = isPresent ? this.nocommentPrefix : this.commentPrefix
293 |                             const S = l.startsWith(this.commentPrefix) ? l.substring(this.commentPrefix.length) : l.startsWith(this.nocommentPrefix) ? l.substring(this.nocommentPrefix.length) : l
294 |                             diskLines[i] = `${P}${S}`
295 |                         }
296 |                     }
297 |                 }
298 |                 i++
299 |             }
300 |             if (!isRead) {
301 |                 this.willWrite = diskLines.join('\n')
302 |                 this.diff = Diff.diffChars(this.lastReadContent, this.willWrite)
303 |             }
304 |             return true
305 |         },
306 |         async reload() {
307 |             this.lastReadContent = '(((reloading...)))'
308 |             await this._loadAndIterate(false, 'READ')
309 |             
310 |         },
311 |         async dryRun() {
312 |             try {
313 |                 await this._loadAndIterate(true, 'WRITE')
314 |             } catch {
315 |                 this.willWrite = '(((ERROR...)))'
316 |                 this.diff = {}
317 |             }
318 |         },
319 |         async commit() {
320 |             this.willWrite = '(((will write...)))'
321 |             if (await this._loadAndIterate(true, 'WRITE')) {
322 |                 await fs.writeFile(this.currentFile, this.willWrite)
323 |                 await this.reload()
324 |             }
325 |         },
326 |     },
327 | }
328 | </script>
329 | 


--------------------------------------------------------------------------------
/vuejspython/builtin/view-file.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <add-in-head>
 3 |         <title>View File</title>
 4 |     </add-in-head>
 5 |     <div>
 6 |         <h1><pre>{{ file }}</pre></h1>
 7 |         <pre>{{ content }}</pre>
 8 |     </div>
 9 | </template>
10 | <script setup>
11 | import { ref } from '#vue';
12 | const { args, fs } = window.VueRunner;
13 | 
14 | const file = args[0];
15 | const content = ref('loading...');
16 | 
17 | (async () => {
18 |     content.value = await fs.readFile(file);
19 | })()
20 | </script>
21 | 


--------------------------------------------------------------------------------
/vuejspython/fsapi.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export class FileSystemAPI {
 3 |   constructor(baseURL = "") {
 4 |     this.baseURL = baseURL;
 5 |   }
 6 | 
 7 |   async readFile(filename, prefix="", binary = false) {
 8 |     const response = await fetch(`${this.baseURL}/${prefix}${filename}`);
 9 |     if (!response.ok) {
10 |       throw new Error(`Failed to read file: ${response.statusText}`);
11 |     }
12 |     if (binary) {
13 |       return response.arrayBuffer();
14 |     } else {
15 |       return response.text();
16 |     }
17 |   }
18 | 
19 |   async writeFile(filename, data) {
20 |     const response = await fetch(`${this.baseURL}/.file/${filename}`, {
21 |       method: "POST",
22 |       body: data,
23 |       headers: {
24 |         "Content-Type":
25 |           typeof data === "string" ? "text/plain" : "application/octet-stream",
26 |       },
27 |     });
28 |     if (!response.ok) {
29 |       throw new Error(`Failed to write file: ${response.statusText}`);
30 |     }
31 |     return response.text();
32 |   }
33 | 
34 |   async listFiles() {
35 |     const response = await fetch(`${this.baseURL}/.files`);
36 |     if (!response.ok) {
37 |       throw new Error(`Failed to list files: ${response.statusText}`);
38 |     }
39 |     return response.json();
40 |   }
41 | 
42 |   async deleteFile(filename) {
43 |     const response = await fetch(`${this.baseURL}/.file/${filename}`, {
44 |       method: "DELETE",
45 |     });
46 |     if (!response.ok) {
47 |       throw new Error(`Failed to delete file: ${response.statusText}`);
48 |     }
49 |     return response.text();
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/vuejspython/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <link
 5 |       rel="icon"
 6 |       href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20style='filter:hue-rotate(-60deg)'%20viewBox='0%200%2016%2016'%3E%3Ctext%20transform='scale(-1,1)'%20x='-20'%20y='14'%3E⚡%3C/text%3E%3C/svg%3E"
 7 |       type="image/svg+xml"
 8 |     />
 9 |     <meta charset="UTF-8" />
10 |     <title>___</title>
11 |   </head>
12 | 
13 |   <body>
14 |     <div id="app"></div>
15 | 
16 |     <!-- importmap may also be used to download for building the local version -->
17 |     <script type="importmap" class="addedbyvrunner">
18 |       {
19 |         "imports": {
20 |           "#vue": "/.runner/vue.esm-browser.prod.js", "DOWNLOAD:https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js":"",
21 |           "#sfc": "/.runner/vue3-sfc-loader.esm.js", "DOWNLOAD:https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.esm.js":"",
22 |           "#fsapi": "/.runner/fsapi.js"
23 |         }
24 |       }
25 |     </script>
26 |     <script type="module" class="addedbyvrunner">
27 |       import * as Vue from "#vue";
28 |       import { loadModule } from "#sfc";
29 |       import { FileSystemAPI } from "#fsapi";
30 |       window.VueRunner = {
31 |         fs: new FileSystemAPI(),
32 |         onHash(f) {
33 |           const notify = () => f(window.location.hash.slice(1), window.location.hash);
34 |           window.addEventListener("hashchange", () => notify());
35 |           notify();
36 |         },
37 |         setHash(h) {
38 |           window.location.hash = h;
39 |         },
40 |         args: ['will be filled by the runner'],
41 |       };
42 | 
43 |       const options = {
44 |         moduleCache: {
45 |           '#vue': Vue, // prefer explicit embedded Vue instance
46 |           vue: Vue, // still if people use 'vue', it is ok
47 |         },
48 |         async getFile(url) {
49 |           const res = await fetch(url);
50 |           if (!res.ok)
51 |             throw Object.assign(new Error(res.statusText + " " + url), { res });
52 |           return {
53 |             getContentData: (asBinary) =>
54 |               asBinary ? res.arrayBuffer() : res.text(),
55 |           };
56 |         },
57 |         addStyle(textContent) {
58 |           const style = Object.assign(document.createElement("style"), {
59 |             textContent,
60 |           });
61 |           const ref = document.head.getElementsByTagName("style")[0] || null;
62 |           document.head.insertBefore(style, ref);
63 |         },
64 |       };
65 | 
66 |       const app = Vue.createApp({
67 |         template: "<entry-point></entry-point>",
68 |       });
69 | 
70 |       app.component("entry-point", Vue.defineAsyncComponent(async () => {
71 |         //window.args ??= await (await fetch("/.params.json")).json();
72 |         const params = await (await fetch("/.params.json")).json();
73 |         window.VueRunner.args.splice(0, 1, ...params.slice(1));
74 |         return await loadModule("__entrypoint.vue", options);
75 |       }))
76 |       app.component("add-in-head", {
77 |         template: "<div class='addedbyvrunner'><slot/></div>",
78 |         props: {after: false},
79 |         mounted() {
80 |           if (this.after) {
81 |             document.head.append(...this.$el.children);
82 |           } else {
83 |             document.head.prepend(...this.$el.children);
84 |           }
85 |       }})
86 |       app.mount("#app");
87 |     </script>
88 |   </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/vuejspython/run.py:
--------------------------------------------------------------------------------
  1 | 
  2 | from fastapi import FastAPI, Response, Request
  3 | from fastapi.staticfiles import StaticFiles
  4 | from starlette.responses import FileResponse
  5 | 
  6 | import os
  7 | import re
  8 | import sys
  9 | import json
 10 | import pathlib
 11 | 
 12 | import click
 13 | 
 14 | @click.command()
 15 | @click.argument('vue_file', default='simple.vue')
 16 | @click.option('--trust-python', is_flag=True, help='Trust Python code execution')
 17 | @click.option('--keep-params', is_flag=True, help='Keep parameters file (.params.json)')
 18 | @click.option('--port', default=42042, help='Port to run the server on')
 19 | @click.option('--host', default='localhost', help='Host/interface to run the server on')
 20 | @click.argument('params', nargs=-1)
 21 | def cli(vue_file, trust_python, keep_params, port, host, params):
 22 | 
 23 |     if not keep_params:
 24 |         json.dump([vue_file, *params], open(".params.json", "w"))
 25 | 
 26 |     sys.argv = []
 27 |     if trust_python:
 28 |         sys.argv.append('--trust-python')
 29 |     sys.argv = [*sys.argv, vue_file, *params]
 30 |     import uvicorn
 31 |     uvicorn.run('vuejspython.run:startup', reload=True, host=host, port=port)
 32 | 
 33 | if __name__ == "__main__":
 34 |     cli()
 35 | 
 36 | def startup():
 37 |     TRUST_PYTHON = False
 38 |     if sys.argv[0] == '--trust-python':
 39 |         TRUST_PYTHON = True
 40 |         sys.argv = sys.argv[1:]
 41 |     
 42 |     if len(sys.argv) == 0:
 43 |         return
 44 |     RUNNER_PATH = os.path.realpath(__file__)
 45 |     RUNNER_DIR = pathlib.Path(os.path.dirname(RUNNER_PATH))
 46 |     # if file does not exist AND name starts with :, it is a builtin file
 47 |     if not os.path.exists(sys.argv[0]) and sys.argv[0].startswith(":"):
 48 |         BUILTIN = RUNNER_DIR / "builtin"
 49 |         sys.argv[0] = str(BUILTIN / (sys.argv[0][1:] + ".vue"))
 50 |     VUE_PATH = os.path.realpath(sys.argv[0])
 51 |     VUE_DIR = pathlib.Path(os.path.dirname(VUE_PATH))
 52 |     script_python_find = r'<script  *lang="python">([\s\S]*?)</script>'
 53 | 
 54 |     # one can hack and redefine this function but anyway if we set --trust-python, everything is open
 55 |     def is_safe_path(relative_path):
 56 |         cwd = pathlib.Path.cwd()
 57 |         path = pathlib.PurePath(relative_path)
 58 |         joined_path = cwd / path
 59 |         return joined_path.is_relative_to(cwd)
 60 |     
 61 |     def create_parent_dirs(filename):
 62 |         pathlib.Path(filename).parent.mkdir(parents=True, exist_ok=True)
 63 | 
 64 |     app = FastAPI()
 65 | 
 66 |     @app.get("/", response_model=None)
 67 |     async def root():
 68 |         return FileResponse(RUNNER_DIR / "index.html", headers=NO_CACHE_HEADERS)
 69 | 
 70 |     @app.get("/__entrypoint.vue", response_model=None)
 71 |     async def entrypoint():
 72 |         with open(VUE_PATH) as f:
 73 |             vue = f.read()
 74 |             # remove ALL instances of <script lang="python">...</script>, make sure it is all and multiline
 75 |             vue = re.sub(script_python_find, "", vue)
 76 |         return Response(content=vue, media_type="text/plain", headers=NO_CACHE_HEADERS)
 77 | 
 78 |     # API endpoint to list files in the cwd
 79 |     @app.get("/.files", response_model=None)
 80 |     async def list_files():
 81 |         files = []
 82 |         # path of all files, recursively
 83 |         for file in pathlib.Path(".").rglob("*"):
 84 |             if file.is_file():
 85 |                 files.append(str(file))
 86 |             else:
 87 |                 files.append(str(file) + "/")
 88 |         return {"files": files}
 89 | 
 90 |     # API endpoint to write a file
 91 |     @app.post("/.file/{filename:path}", response_model=None)
 92 |     async def write_file(filename: str, request: Request):
 93 |         if not is_safe_path(filename):
 94 |             return Response(status_code=400, content="Invalid path (good try!)")
 95 |         create_parent_dirs(filename)
 96 |         with open(filename, "wb") as f:
 97 |             f.write(await request.body())
 98 |         return "File written successfully"
 99 | 
100 |     # API endpoint to delete a file
101 |     @app.delete("/.file/{filename:path}", response_model=None)
102 |     async def delete_file(filename: str):
103 |         if not is_safe_path(filename):
104 |             return Response(status_code=400, content="Invalid path (good try!)")
105 |         pathlib.Path(filename).unlink()
106 |         return "File deleted successfully"
107 | 
108 |     #app.mount("/", StaticFiles(directory='./'), name="static user local")
109 |     #StaticFiles.is_not_modified = lambda *args, **kwargs: False
110 |     NO_CACHE_HEADERS = {
111 |         "Cache-Control": "max-age=0, no-cache, no-store, must-revalidate",
112 |         "Pragma": "no-cache",
113 |         "Expires": "0",
114 |     }
115 |     class NoCacheStaticFiles(StaticFiles):
116 |         def file_response(self, *args, **kwargs) -> Response:
117 |             resp = super().file_response(*args, **kwargs)
118 |             for k, v in NO_CACHE_HEADERS.items():
119 |                 resp.headers.setdefault(k, v)
120 |             return resp
121 |     app.mount("/.runner", NoCacheStaticFiles(directory=RUNNER_DIR), name="static runner script")
122 |     app.mount("/.assets", NoCacheStaticFiles(directory=VUE_DIR), name="static vue assets")
123 | 
124 |     if TRUST_PYTHON:
125 |         with open(VUE_PATH) as f:
126 |             vue = f.read()
127 |             # all instances of <script lang="python">...</script>
128 |             for m in re.finditer(script_python_find, vue, re.DOTALL):
129 |                 exec(m.group(1), locals()) # locals is read only (python <=3.12) but still contains app etc, so ok
130 |                 # need reload in some way?
131 |                 # need exec at each request? or file change? or only once? i.e. for dev mode...
132 | 
133 |     @app.get("/{filename:path}")
134 |     async def file(filename: str, response: Response):
135 |         return FileResponse(filename, headers=NO_CACHE_HEADERS)
136 | 
137 |     print("###", VUE_DIR, RUNNER_DIR)
138 | 
139 |     return app
140 | 
141 | 
142 | if __name__ == "__main__":
143 |     exit(cli())
144 | 
145 | 


--------------------------------------------------------------------------------