HTML not getting rendered everytime. #370

kumargautam99 · 2022-05-14T06:11:35Z

I tried the sample script for computing the value of pi.

Using the CDN url of pyscript.js and pyscript.css , 80% of the times the render is happening after Loading runtime...
But sometimes it gives the pink color section as output and no content.

Using the pyscript.js and pyscript.css locally, the Loading runtime.. persists for minutes without any output.

rayjolt · 2022-05-14T06:31:49Z

I am seeing this issue as well, with the following HTML document:

<html>
  <head>
    <title>PyScript Test</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
    <py-script>
print("Testing PyScript")
    </py-script>
  </body>
</html>

Looking at the console, I see the following error:

Uncaught (in promise) PythonError: Traceback (most recent call last):
  File "<exec>", line 164, in write
  File "<exec>", line 116, in write
JsException: SyntaxError: Document.querySelector: '#-2cfe72dd-aed7-7bb3-50f0-d5a53fa5d0ab' is not a valid selector
    PythonError error_handling.gen.ts:309
    new_error pyodide.asm.js:14
    callPyObjectKwargs pyproxy.gen.ts:374
    callKwargs pyproxy.gen.ts:1167
    evaluate base.ts:115
error_handling.gen.ts:309:4

This error occurred 5 times out of 10 when I tested it.
Tested on Firefox 100.0, Ubuntu 20.04 LTS.

marianoweber · 2022-05-14T08:10:11Z

This seems to be a problem with the CDN build.
With the build from the CDN, I can reproduce it. Locally built from the source, I can't.

pauleveritt · 2022-05-14T21:04:27Z

There's a discussion in #359

yannickfunk · 2022-05-14T21:18:18Z

@pauleveritt I think the issue here is a different issue than #359

yannickfunk · 2022-05-14T22:48:45Z

I think the problem here is that this.constructor.name breaks in minified code.

There is name property that already exists in regular functions class constructors. A known pitfall is that it will be mangled in minified code, so it is generally useless in browser JS, and its use can be considered an antipattern. name cannot be reassigned (in some browsers), so a separate property is needed to identify the class.

(https://stackoverflow.com/questions/46217853/get-constructor-name-of-object)

This could then break the id creation, because it relies on constructor.name

pyscript/pyscriptjs/src/components/base.ts

Line 57 in 8c65cad

if (!this.id) this.id = this.constructor.name + '-' + guidGenerator();

One fix could be to use the html tag name to generate the id prefix:

checkId() {
    const idPrefix = this.tagName.split("-").map(e => {
        e = e.toLowerCase();
        return e.charAt(0).toUpperCase() + e.slice(1)
    }).join("");
    if (!this.id) this.id = idPrefix + '-' + guidGenerator();
}

This will work for minified code aswell

Navaneeth-Sharma · 2022-05-15T12:58:41Z

Hi,
I am facing similar issue.

I observe these points

The text are rendered sometimes when refreshed.
The "live" server behaves the same.

Hi @yannickfunk, thank you for providing the solution. I am new to Javascript, Can you please guide where to put this snippet?

I tried adding

 <script> 
    checkId() {
    const idPrefix = this.tagName.split("-").map(e => {
        e = e.toLowerCase();
        return e.charAt(0).toUpperCase() + e.slice(1)
    }).join("");
    if (!this.id) this.id = idPrefix + '-' + guidGenerator();
}
</script>

But didnt work.

Thank you

rayjolt · 2022-05-15T13:51:04Z

@Navaneeth-Sharma

Hi yannickfunk, thank you for providing the solution. I am new to Javascript, Can you please guide where to put this snippet?

This needs to be fixed inside PyScript itself. You can't fix it inside HTML documents you create. The snippet Yannick provided is meant to be applied here in the PyScript code; please wait while the PyScript devs fix it.

marianoweber · 2022-05-15T14:29:29Z

checkId() {
    const idPrefix = this.tagName.split("-").map(e => {
        e = e.toLowerCase();
        return e.charAt(0).toUpperCase() + e.slice(1)
    }).join("");
    if (!this.id) this.id = idPrefix + '-' + guidGenerator();
}

Hey,

just to clarify:
With this function, the Id of elements like py-script would be "#Pyscript-xyz" instead of "#PyScript-xyz", correct?
Does anyone know if that is relevant in any other parts of the project?

Thanks

yannickfunk · 2022-05-15T14:36:46Z

checkId() {
    const idPrefix = this.tagName.split("-").map(e => {
        e = e.toLowerCase();
        return e.charAt(0).toUpperCase() + e.slice(1)
    }).join("");
    if (!this.id) this.id = idPrefix + '-' + guidGenerator();
}
Hey,

just to clarify: With this function, the Id of elements like py-script would be "#Pyscript-xyz" instead of "#PyScript-xyz", correct? Does anyone know if that is relevant in any other parts of the project?

Thanks

No, it will still be "#PyScript-xyz".

"PY-SCRIPT".split("-") // => ["PY", "SCRIPT"]
.map(e.toLowercase()) // => ["py", "script"]
.map(e.charAt(0).toUpperCase() + e.slice(1)) // => ["Py", "Script"]
.join("") // => "PyScript"

marianoweber · 2022-05-15T14:41:33Z

checkId() {
const idPrefix = this.tagName.split("-").map(e => {
    e = e.toLowerCase();
    return e.charAt(0).toUpperCase() + e.slice(1)
}).join("");
if (!this.id) this.id = idPrefix + '-' + guidGenerator();
}
Hey,

just to clarify: With this function, the Id of elements like py-script would be "#Pyscript-xyz" instead of "#PyScript-xyz", correct? Does anyone know if that is relevant in any other parts of the project?

Thanks

No, it will still be "#PyScript-xyz".
"PY-SCRIPT".split("-") // => ["PY", "SCRIPT"]

.map(e.toLowercase()) // => ["py", "script"]

.map(e.charAt(0).toUpperCase() + e.slice(1)) // => ["Py", "Script"]

.join("") // => "PyScript"

Got it, somehow overlooked the first split... thanks for the clarification.

yannickfunk · 2022-05-16T13:49:05Z

@marimeireles In case this is missed, could you give the issue title a [BUG] tag and add the bug label?

fpliger · 2022-05-16T16:10:32Z

@kumargautam99 can you try now? #395 should have temporarily fixed it (although we need to investigate to actually come with a better fix)

kumargautam99 · 2022-05-16T17:08:44Z

Thanks for looking into it but the issue still persists. Below is the error message. *pyodide.asm.js:14 Uncaught (in promise) PythonError: Traceback (most recent call last): File "<exec>", line 164, in write File "<exec>", line 116, in writeJsException: SyntaxError: Failed to execute 'querySelector' on 'Document': '#-80d2aff4-9486-153b-aff3-39d1e597fc8c' is not a valid selector. at new_error (pyodide.asm.js:14:238191) at pyodide.asm.wasm:0xedbcb at pyodide.asm.wasm:0xedccc at Object.Module.callPyObjectKwargs (pyproxy.gen.ts:374:12) at Proxy.callKwargs (pyproxy.gen.ts:1167:19) at z.evaluate (pyscript.js:1:5845)* [image: image.png]

…

On Mon, May 16, 2022 at 9:40 PM Fabio Pliger ***@***.***> wrote: @kumargautam99 <https://github.com/kumargautam99> can you try now? #395 <#395> should have temporarily fixed it (although we need to investigate to actually come with a better fix) — Reply to this email directly, view it on GitHub <#370 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADCX32MXAJ3LI2VSVJVQ7DLVKJXQLANCNFSM5V5DKP2A> . You are receiving this because you were mentioned.Message ID: ***@***.***>

fpliger · 2022-05-16T17:30:10Z

Can you make sure you try on an incognito browser or can you flush your cache?

If it still persists, can you please send some code for us to reproduce?

kumargautam99 · 2022-05-16T17:44:38Z

Tried both (incognito browser and cache flush), the issue persists.

Below is the sample code which i am using inside google chrome.
`

pi = compute_pi(100000)
s = f"π is approximately {pi:.3f}"
print(s)

`

fpliger · 2022-05-16T18:23:59Z

@kumargautam99 Not sure I understand. This, pointing to the cdn, works just fine. What am I missing?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>Reproducing #370</title>

    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>

  <body>
    <py-script>
print("Let's compute π:") 
def compute_pi(n): 
    pi = 2
    for i in range(1,n): 
        pi *= 4 * i ** 2 / (4 * i ** 2 - 1) 
        return pi
pi = compute_pi(100000)
s = f"π is approximately {pi:.3f}"
print(s)
    </py-script>
  </body>
</html>

Can you paste your full example?

rayjolt · 2022-05-17T01:06:16Z

I tested again with the code I posted above, and I can confirm that the issue is fixed. Thank you for your work on this.

fpliger · 2022-05-17T02:27:38Z

Awesome! Thank you @rayjolt !

Navaneeth-Sharma · 2022-05-17T18:06:26Z

Thank you @fpliger and community ! The issue is resolved!

rayjolt mentioned this issue May 15, 2022

[BUG] #380

Closed

yannickfunk mentioned this issue May 16, 2022

[BUG] pys-onClick attribute does not work, when element has no id #359

Closed

marianoweber mentioned this issue May 16, 2022

[BUG] <py-script> fails inbetween two <p> Tags #391

Closed

yannickfunk mentioned this issue May 16, 2022

Fixed the hello.html Hello World example. #376

Closed

philippjfr added the type: bug Something isn't working label May 16, 2022

yannickfunk mentioned this issue May 16, 2022

remove terser since it's breaking specific examples #395

Merged

fpliger mentioned this issue May 16, 2022

fix autogenerated element #397

Merged

fpliger closed this as completed in #397 May 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML not getting rendered everytime. #370

HTML not getting rendered everytime. #370

kumargautam99 commented May 14, 2022 •

edited

Loading

rayjolt commented May 14, 2022 •

edited

Loading

marianoweber commented May 14, 2022

pauleveritt commented May 14, 2022

yannickfunk commented May 14, 2022

yannickfunk commented May 14, 2022 •

edited

Loading

Navaneeth-Sharma commented May 15, 2022

rayjolt commented May 15, 2022

marianoweber commented May 15, 2022

yannickfunk commented May 15, 2022 •

edited

Loading

marianoweber commented May 15, 2022

yannickfunk commented May 16, 2022

fpliger commented May 16, 2022

kumargautam99 commented May 16, 2022 via email

fpliger commented May 16, 2022

kumargautam99 commented May 16, 2022

fpliger commented May 16, 2022

rayjolt commented May 17, 2022

fpliger commented May 17, 2022

Navaneeth-Sharma commented May 17, 2022

HTML not getting rendered everytime. #370

HTML not getting rendered everytime. #370

Comments

kumargautam99 commented May 14, 2022 • edited Loading

rayjolt commented May 14, 2022 • edited Loading

marianoweber commented May 14, 2022

pauleveritt commented May 14, 2022

yannickfunk commented May 14, 2022

yannickfunk commented May 14, 2022 • edited Loading

Navaneeth-Sharma commented May 15, 2022

rayjolt commented May 15, 2022

marianoweber commented May 15, 2022

yannickfunk commented May 15, 2022 • edited Loading

marianoweber commented May 15, 2022

yannickfunk commented May 16, 2022

fpliger commented May 16, 2022

kumargautam99 commented May 16, 2022 via email

fpliger commented May 16, 2022

kumargautam99 commented May 16, 2022

fpliger commented May 16, 2022

rayjolt commented May 17, 2022

fpliger commented May 17, 2022

Navaneeth-Sharma commented May 17, 2022

kumargautam99 commented May 14, 2022 •

edited

Loading

rayjolt commented May 14, 2022 •

edited

Loading

yannickfunk commented May 14, 2022 •

edited

Loading

yannickfunk commented May 15, 2022 •

edited

Loading