Comments (8)
geotre
commented on June 11, 2024
Recently fixed an issue (#232) where a browser extension was modifying the dom, seems like this could be similar. Once we can replicate the cause it should be possible to fix.
@ranok can you confirm which browser you are seeing this in, and with which extensions? If you have a lot of extensions installed, maybe try disabling some too see if you can figure out which is causing it.
You can also check the dom inspector in devtools to see if anything looks off (and post a screenshot here if so)
from karax.
ranok
commented on June 11, 2024
I'll try it in safemode and slowly add them back in shortly
from karax.
ranok
commented on June 11, 2024
Good catch, Adblock for Youtube oddly gets permissions for all sites and was somehow causing issues, by restricting it to only Youtube the example works again.
from karax.
geotre
commented on June 11, 2024
Thank you for confirming @ranok. I imagine the extension requests all pages so that it can also block ads on embedded youtube videos.
I would still like to fix this as it may impact other users. I can't replicate it by installing the extension, can you share what change it made to the browser dom?
from karax.
ranok
commented on June 11, 2024
Here are the two divs the extension injects:
If I make another div preceding the ROOT one that Karax uses, the extension injects into that one, and Karax works as expected:
<!doctype html>
<html>
<head>
<title>Testing</title>
</head>
<body id="body">
<div id="preroot"></div><!-- the extension injects into this div now -->
<div id="ROOT"></div>
<script src="karax.js" type="text/javascript"></script>
</body>
</html>
from karax.
geotre
commented on June 11, 2024
Thank you @ranok. Could you re-open the issue too?
Here's a minimal reproduction:
import std/dom
include pkg/karax/prelude
var lines: seq[kstring] = @[]
proc createDom(): VNode =
result = buildHtml(tdiv):
button:
text "Say hello!"
proc onclick(ev: Event; n: VNode) =
lines.add "Hello simulated universe"
for x in lines:
tdiv:
text x
var modified = false
proc postrender =
if modified: return
modified = true
document.getElementById("ROOT").appendChild(document.createElement("div"))
setRenderer(createDom, clientpostrenderCallback=postrender)The error is triggered by this line. Compiling the example above with karax@#head using -d:release works as expected.
I'm not sure of the best approach to fix here. Developers may have browser extensions that do dom modifications (as we saw also in issue #232) so I don't think these checks should be run by default. Perhaps they could be opt in with a -d:karaxCheckSame flag or similar when needed for debugging? What do you think @Araq?
from karax.
Araq
commented on June 11, 2024
Perhaps they could be opt in with a -d:karaxCheckSame flag or similar when needed for debugging? What do you think @Araq?
Sounds good to me. At least I cannot think of a better solution.
from karax.
geotre
commented on June 11, 2024
#244 has been merged, which should solve this issue. @ranok if you have a chance to check with your browser extension re-enabled please let us know if the issue persists.
I will close the issue again in the meantime.
from karax.
Related Issues (20)
- Broken functionalities when karax used with grammarly or languagetool (and possibly other extensions) HOT 8
- How to run a function on onclick event in a button? HOT 4
- Boolean Attributes in DSL HOT 6
- Release 1.2.3 HOT 5
- view doesn't update when changing state in setInterval HOT 3
- IndexDefect on array HOT 3
- Karax input text becoming null HOT 1
- Async karax? HOT 3
- Empty content editable raises an error HOT 1
- How to attach and detach a custom a `Node` to the karax dom? HOT 1
- Karax does not update event handlers HOT 4
- stack size exceeded error on js target HOT 1
- `verbitam` content is appended every time it changes HOT 1
- runtime error on redraw in `removeAllEventHandlers` proc HOT 2
- SVG rendering HOT 2
- 1.3.2 has a tag and release, but karax.nimble version still 1.3.1 HOT 1
- inline closures in loop all capture the last instance for onclick HOT 4
- setDragImage type signature causing BigInt conversion issue HOT 2
- node wrongly deleted after a redraw if style param is used
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from karax.