Code displays during startup

Technical Topics PyScript
1

Forgive me if this has been covered already, but I couldn’t find this exact issue, either because it’s not there or my search abilities are lacking. In any event, whenever I load a page, the code in the <py-script> tag displays on screen while pyodide is downloading (which, by the way, seems to download on every refresh). Here’s an example:

Screenshot 2023-01-27 at 8.10.25 AM
Screenshot 2023-01-27 at 8.10.25 AM2052×1336 212 KB

Here’s the HTML. What am I missing?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Shakespearean Insults!</title>
        <!-- PyScript import -->
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
        <style>
            h1 {
                text-align: center;
            }
        </style>
    </head>

    <body>
      
        <br><br><br><br><br>
        <h1 id="main"></h1>
        
<py-script>

import random


adjectives = """bankrupt base caterwauling corrupt cullionly detestable dishonest false filthsome filthy foolish foul gross heedless indistinguishable infected insatiate irksome lascivious lecherous loathsome lubbery old peevish rascaly rotten ruinous scurilous scurvy slanderous sodden-witted thin-faced toad-spotted unmannered vile wall-eyed""".split()

nouns = """Judas Satan ape ass barbermonger beggar block boy braggart butt carbuncle coward coxcomb cur dandy degenerate fiend fishmonger fool gull harpy jack jolthead knave liar lunatic maw milksop minion ratcatcher recreant rogue scold slave swine traitor varlet villain worm""".split()

adj = ", ".join(random.choices(adjectives, k=2))
noun = random.choice(nouns)

display = f"You {adj} {noun}!"
Element("main").write(display)

</py-script>

    </body>
    
</html>
2

You may wish to use some CSS to hide the contents of the <py-script> tag until PyScript is loaded. The PyScript distribution actually includes some CSS for this purpose, which also includes some styling the <py-repl>.

For the latest release, for example that CSS can be included via:

<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />

Or for versioned releases:

<link rel="stylesheet" href="https://pyscript.net/releases/2022.12.1/pyscript.css" />
2 Likes
3

As Jeff mentioned, you can include Pyscript’s CSS in your page to hide them, if you prefer not to include it, you can add the following to your own CSS file (this was taken from Pyscript’s CSS)

/* py-config - not a component */
py-config {
  display: none
}

/* py-{el} - components not defined */
py-script:not(:defined) {
  display: none
}

py-repl:not(:defined) {
  display: none
}

This will always hide your py-config tags and will hide the code under the py-script or py-repl until these elements are created (which will be once PyScript is loaded).

Hope this helps :smile:

1 Like
4

Many thanks to both of you!