jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-21 03:05:38 -05:00
Code Issues Projects Releases Wiki Activity

Make the life-cycle more linear and kill some svelte stores (#830)

Browse Source 
This is a follow-up of PR #806 and it's a big step forward towards solving issue #763.

The basic idea is that at this stage I want to streamline the execution logic
and make it as linear and easy to read/understand as possible. The diff is
relatively big, but for the most part is just "shuffling code around".


Svelte stores:
the idea is to eventually kill of them, so that we can remove the dependency
on svelte but also to avoid relying on so much global state, which makes
things more complicated and error-prone (e.g., we have several issues related
to using runtime when it's not ready yet).

I killed addInitializer, addPostInitializer and the corresponding svelte
stores tada. They are no longer needed since the relevant code is called
directly from main.ts.

I started to kill the usage of the runtimeLoaded svelte store: instead of
relying on a global variable, I want to arrive at the point in which the
runtime is passed as a parameter in all places where it's needed: pyscript.ts
is now free of global state, but I couldn't kill it yet because it's used
heavily by base.ts and pyrepl.ts. I will do it in another PR.

Other misc changes:
I added sanity checks (and corresponding tests!) which complain if you specify
0 or multiple runtimes. Currently we support having one and only one, so there
is no point to pretend otherwise

I modified the messages displayed by the loader, to be more informative from
the user point of view.
This commit is contained in:
Antonio Cuni
2022-10-07 17:13:12 +02:00
committed by GitHub
parent 66b57bf812
commit 11a517bba4
7 changed files with 194 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
pyscriptjs/src/main.ts
View File

@@ -3,42 +3,73 @@ import './styles/pyscript_base.css';
import { loadConfigFromElement } from './pyconfig';
import type { AppConfig } from './pyconfig';
import type { Runtime } from './runtime';
import { PyScript } from './components/pyscript';
import { PyScript, initHandlers, mountElements } from './components/pyscript';
import { PyLoader } from './components/pyloader';
import { PyodideRuntime } from './pyodide';
import { getLogger } from './logger';
import { globalLoader, runtimeLoaded, addInitializer } from './stores';
import {
runtimeLoaded,
scriptsQueue,
} from './stores';
import { handleFetchError, showError, globalExport } from './utils'
import { createCustomElements } from './components/elements';
const logger = getLogger('pyscript/main');
// XXX this should be killed eventually
let runtimeSpec: Runtime;
runtimeLoaded.subscribe(value => {
runtimeSpec = value;
let scriptsQueue_: PyScript[];
scriptsQueue.subscribe((value: PyScript[]) => {
scriptsQueue_ = value;
});
/* High-level overview of the lifecycle of a PyScript App:
1. pyscript.js is loaded by the browser. PyScriptApp().main() is called
2. loadConfig(): search for py-config and compute the config for the app
3. show the loader/splashscreen
4. loadRuntime(): start downloading the actual runtime (e.g. pyodide.js)
--- wait until (4) has finished ---
5. now the pyodide src is available. Initialize the engine
6. setup the environment, install packages
7. run user scripts
8. initialize the rest of web components such as py-button, py-repl, etc.
More concretely:
- Points 1-4 are implemented sequentially in PyScriptApp.main().
- PyScriptApp.loadRuntime adds a <script> tag to the document to initiate
the download, and then adds an event listener for the 'load' event, which
in turns calls PyScriptApp.afterRuntimeLoad().
- PyScriptApp.afterRuntimeLoad() implements all the points >= 5.
*/
class PyScriptApp {
config: AppConfig;
loader: PyLoader;
// lifecycle (1)
main() {
this.loadConfig();
this.initialize();
/* eslint-disable @typescript-eslint/no-unused-vars */
const xPyScript = customElements.define('py-script', PyScript);
const xPyLoader = customElements.define('py-loader', PyLoader);
/* eslint-disable @typescript-eslint/no-unused-vars */
// add loader to the page body
logger.info('add py-loader');
const loader = <PyLoader>document.createElement('py-loader');
document.body.append(loader);
globalLoader.set(loader);
customElements.define('py-script', PyScript);
this.showLoader();
this.loadRuntime();
}
// lifecycle (2)
loadConfig() {
// find the <py-config> tag. If not found, we get null which means
// "use the default config"
@@ -61,46 +92,117 @@ class PyScriptApp {
logger.info('config loaded:\n' + JSON.stringify(this.config, null, 2));
}
initialize() {
addInitializer(this.loadPackages);
addInitializer(this.loadPaths);
this.loadRuntimes();
// lifecycle (3)
showLoader() {
// add loader to the page body
logger.info('add py-loader');
customElements.define('py-loader', PyLoader);
this.loader = <PyLoader>document.createElement('py-loader');
document.body.append(this.loader);
}
loadPackages = async () => {
// lifecycle (4)
loadRuntime() {
logger.info('Initializing runtime');
if (this.config.runtimes.length == 0) {
showError("Fatal error: config.runtimes is empty");
return;
}
if (this.config.runtimes.length > 1) {
showError("Multiple runtimes are not supported yet. " +
"Only the first will be used");
}
const runtime_cfg = this.config.runtimes[0];
const runtime: Runtime = new PyodideRuntime(this.config, runtime_cfg.src,
runtime_cfg.name, runtime_cfg.lang);
this.loader.log(`Downloading ${runtime_cfg.name}...`);
const script = document.createElement('script'); // create a script DOM node
script.src = runtime.src;
script.addEventListener('load', () => {
void this.afterRuntimeLoad(runtime);
});
document.head.appendChild(script);
}
// lifecycle (5)
// See the overview comment above for an explanation of how we jump from
// point (4) to point (5).
//
// Invariant: this.config and this.loader are set and available.
async afterRuntimeLoad(runtime: Runtime): Promise<void> {
// XXX what is the JS/TS standard way of doing asserts?
console.assert(this.config !== undefined);
console.assert(this.loader !== undefined);
this.loader.log('Python startup...');
await runtime.loadInterpreter();
runtimeLoaded.set(runtime);
this.loader.log('Python ready!');
// eslint-disable-next-line
runtime.globals.set('pyscript_loader', this.loader);
this.loader.log('Setting up virtual environment...');
await this.setupVirtualEnv(runtime);
await mountElements(runtime);
this.loader.log('Executing <py-script> tags...');
this.executeScripts(runtime);
this.loader.log('Initializing web components...');
// lifecycle (8)
createCustomElements();
if (runtime.config.autoclose_loader) {
this.loader.close();
}
await initHandlers(runtime);
// NOTE: runtime message is used by integration tests to know that
// pyscript initialization has complete. If you change it, you need to
// change it also in tests/integration/support.py
logger.info('PyScript page fully initialized');
}
// lifecycle (6)
async setupVirtualEnv(runtime: Runtime): Promise<void> {
// XXX: maybe the following calls could be parallelized, instead of
// await()ing immediately. For now I'm using await to be 100%
// compatible with the old behavior.
logger.info("Packages to install: ", this.config.packages);
await runtimeSpec.installPackage(this.config.packages);
await runtime.installPackage(this.config.packages);
await this.fetchPaths(runtime);
}
loadPaths = async () => {
async fetchPaths(runtime: Runtime) {
// XXX this can be VASTLY improved: for each path we need to fetch a
// URL and write to the virtual filesystem: pyodide.loadFromFile does
// it in Python, which means we need to have the runtime
// initialized. But we could easily do it in JS in parallel with the
// download/startup of pyodide.
const paths = this.config.paths;
logger.info("Paths to load: ", paths)
logger.info("Paths to fetch: ", paths)
for (const singleFile of paths) {
logger.info(` loading path: ${singleFile}`);
logger.info(` fetching path: ${singleFile}`);
try {
await runtimeSpec.loadFromFile(singleFile);
await runtime.loadFromFile(singleFile);
} catch (e) {
//Should we still export full error contents to console?
handleFetchError(<Error>e, singleFile);
}
}
logger.info("All paths loaded");
logger.info("All paths fetched");
}
loadRuntimes() {
logger.info('Initializing runtimes');
for (const runtime of this.config.runtimes) {
const runtimeObj: Runtime = new PyodideRuntime(this.config, runtime.src,
runtime.name, runtime.lang);
const script = document.createElement('script'); // create a script DOM node
script.src = runtimeObj.src; // set its src to the provided URL
script.addEventListener('load', () => {
void runtimeObj.initialize();
});
document.head.appendChild(script);
// lifecycle (7)
executeScripts(runtime: Runtime) {
for (const script of scriptsQueue_) {
void script.evaluate();
}
scriptsQueue.set([]);
}
}
function pyscript_get_config() {