How to embed the PGLite REPL inside a LiaScript-generated course site?

[PeterReiter]

Hello,

My name is Peter. I am seeking guidance on integrating the PGLite REPL into a course website generated with LiaScript. The objective is to allow learners to execute SQL snippets directly on the page (client-side, without server components). I have reviewed the REPL documentation (https://pglite.dev/docs/repl
), but I am uncertain about the recommended approach for embedding and initializing it within LiaScript’s environment.

It would be great if someone could supply me with a minimal working .md file.

This would be a simple example of a working "traditional" website:

test.html

[andre-dietrich]

Hi, that is a great project, I will have to dive deeper into PGLite ... however, here is a minimal working example

I created a reusable macro called @PGlite_REPL, you can rename it... This macro calls another macro helper with a parameter. Just think of this as code injections or substitutions. Whenever the interpreter detects a macro it will replace it with the definition defined in the header. There are two types of macros used, the first with : is a simple one-liner, while the second one has no colon but an @end marker, the second one will preserve the indentation in contrast to the first one ... however, the first one calls the helper with an aditional @uid macro, this is a build in and will generate a uid, which is used to replace the parameter @0. This way you can define multiple repls, without the need of defining ids manually...

External scripts can be loaded with a script: url defined in the header, while loading modules is still a bit tricky, that is why I used @onload for this. This is the place where you can add your init code, that is executed before all other scripts ...

Since the repl contains state, this will be destroyed, when you switch the slide (this also stops videos from playing), however you can create persistent slides by turning persitent to true globally or you can set this also on a slide level, shown on the last slide ...

<!--
persistent: true

@onload
LIA.debug = true

import("https://cdn.jsdelivr.net/npm/@electric-sql/pglite-repl/dist-webcomponent/Repl.js").then((e) => {
    console.log("REPL loaded")
})

import("https://cdn.jsdelivr.net/npm/@electric-sql/pglite/dist/index.js").then((module) => {
    window.PGlite = module
    console.log("PGlite loaded")
})
@end

@PGlite_REPL: @PGlite_REPL_helper(@uid)

@PGlite_REPL_helper
<pglite-repl id="repl-@0" style="display: flex;
  align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
  font-size: 1rem;
  height: 350px;"></pglite-repl>
<script run-once>
function initRepl() {
  if(!window.PGlite) {
    setTimeout(function() {initRepl()}, 100)
  } else {
    // Create a PGlite instance
    const pg = new PGlite.PGlite()

    // Retrieve the Repl element
    const repl = document.getElementById('repl-@0')

    // REPL to your PGlite instance
    repl.pg = pg

    send.lia("")
  }
}

initRepl()

"LIA: wait"
</script>
@end
-->

# PGLite

@PGlite_REPL

## Second

@PGlite_REPL

## not persistent
<!--
persistent: false
-->

this will load only once

@PGlite_REPL

You can add such macros and external scripts and styles to your main README, thus it will not be visible on GitHub and allow other users to refer to your project by importing your functionality into their courses, simply by using import: url.md within the head of their course ...

I am currently preparing a lecture on databases, where I would like to show and apply different DBs within the browser. Here is a template for SQLite

https://github.com/LiaTemplates/SQLite

https://liascript.github.io/course/?https://raw.githubusercontent.com/liaTemplates/SQLite/main/README.md

This project contains more glue-code, so that I can export and import also DBs. In this case the code-blocks contain the SQL-statements, which can be made executable by attaching a script to the end of the code-block, which in this case is a macro too ... (there is also a terminal, when you execute the code, which is not so sophisticated as yours ;-)

Let me know if this solution works for you, maybe this combination of code-blocks with PGlite would be also interesting ...