Odd issue with svg about hyperapp HOT 31 CLOSED

I was just looking at the error from the svg clock in Codepen. The error is being thrown by the patch function" var i = e.childNodes[r];. Something about how you're patching the DOM. I am getting the same error with nichoth's example of counters with child elements when I set it to render with a root element. No problem if it just gets appended to the body. nichoth's example. So you might want to look carefully at that patch function for some edge case that is throwing errors.

from hyperapp.

@tunnckoCore I ran into that length of undefined error but it was just because I didn't close some html tag properly 😂

I was using components approach as well: https://github.com/selfup/hyperapp-idea-box/blob/master/src/views/IdeaBox.js

from hyperapp.

Ah, components, haven't forgotten about #2. We'll get there too, somewhat, somehow.

from hyperapp.

@tunnckoCore I guess it's one component but with multiple views (stateless functional components in React). Using model as the entire application state tree. Just wanted to try it out haha

from hyperapp.

@jbucaran I am on 0.0.9, I can update to see if I get the same behavior

Update

Everything seems fine with 0.0.11: http://selfup.me/hyperapp-idea-box/

Still amazed at how fast that reloads (refresh render is super fast even from localStorage) mind blown

🎉

Another Update

With 10 "todos" from localStorage after refresh (in incognito with no extensions):

I am using my own localStorage npm module lspi, so if it's somehow slower than you thought it can be because of that 😂

from hyperapp.

@juxtar IIRC update is still supported in 0.4.2, but I plan to remove it soon.

Thanks, I've updated the examples to use reducers now. Also thanks for figuring out that attributes is what breaks svg in CodePen, that's a hint.

So, to summarize, SVG works when running from your own server (gomix, localhost), but fails in CodePen, specifically, when using attributes.

Could this be like a CodePen/JsFiddle security feature or something?

from hyperapp.

hmmm... Maybe it's a Browserify issue with the SVG. I've used SVG with JavaScript in the browser without namespaces before.

from hyperapp.

@rbiggs @juxtar @selfup Clock example now working.

• http://codepen.io/jbucaran/pen/PWMBLp?editors=0010

from hyperapp.

I was able to run the program correctly locally using a simple server. The only instance in which svg fails is on CodePen or when opening an index.html file directly in the browser locally (no server).

This is weird.

from hyperapp.

For me, no problem rendering the SVG clock example running on localhost, Chrome and Safari both. But I can't get the setLocation example to work running locally. Maybe something to do with localhost? I see it works fine on the Gomix server.

from hyperapp.

@rbiggs not the only bug coming from patch btw.

@jbucaran when I was playing with the "todo example with components approach" i faced some similar issue or maybe it was kinda "length of undefined" from for (var i = 0; i < node.tree.length; i++) { - that's easy fix, but i'm not sure.

kinda related #39

from hyperapp.

@tunnckoCore 🤔 Any code you could share?

from hyperapp.

@selfup don't know ;d idea box looks cool, gj

@jbucaran i don't think so...

edit: @selfup, that's single component and single app 😂

from hyperapp.

@jbucaran yep, i'm working on it ;d

from hyperapp.

But I can't get the setLocation example to work running locally. Maybe something to do with localhost? I see it works fine on the Gomix server.

Router examples using a local server should work. Make sure you are not using a buggy release, there were a few of those recently (like literally the router was broken for a while), during the ES6ish rewrite.

from hyperapp.

@jbucaran Hey, SVG rendering is failing for me once again on 0.4.2
It was working up until 0.2.1 I believe (before the updates to reducers renaming) and that's what the live example seems to be using.

It breaks when you assign attributes to the svg. Here's a CodePen for a working but useless svg and the broken one.

from hyperapp.

@jbucaran It's actually failing in my localhost too. Am I doing something wrong? The code (and the error) is the same as in the CodePens.

from hyperapp.

@juxtar Something obvious is happening on the server that works that we're just missing.

• https://gomix.com/#!/project/hyperapp
• https://hyperapp.gomix.me/svg_clock

from hyperapp.

@juxtar You're right, 0.2.1 works, but 0.4.2 doesn't! This bug is fun.

• Working: https://hyperapp-svg.gomix.me/

from hyperapp.

Okay, this is really weird, but it seems SVG elements (namespace) .ns is undefined only in the minified bundle.

Back in 0.2.1 we were still using commonjs, so the example that works is using the source directly.

Maybe this is an uglifyjs issue or how we're using it.

from hyperapp.

Could this be a race condition? Very cool bug, should get the hyperapp bug awards this month.

from hyperapp.

Maybe something about how Browserify injects things into the browser, combined with iframes on GoMix causing, well, iframe pain.

from hyperapp.

I'll dig more. Now that I know the cause, the fix is rather simple, but now I have to know why .ns is undefined only when using the uglified bundle.

from hyperapp.

Well, I noticed on the failing GoMix svg that's JSX that you have viewbox but no namespace. Try putting it in.

from hyperapp.

i'm sure the JSX Babel plugin doesn't add it automatically.

from hyperapp.

So i'm getting an error: 155:118TypeError: Attempted to assign to readonly property.

from hyperapp.

So after looking at the clock and playing with it locally I think I see why it sometimes doesn't work. x2 and y2 are attributes on the svg line. Therefore we're sometimes getting the error: Attempted to assign to a readonly property. That's because the example is trying to set the value of an attribute dynamically directly on that. Bad boy. Gotta use setAttribute in those cases.

from hyperapp.

Bug is/was "use strict"!

Removing "use strict" from the bundle fixed the problem. Or to be more specific, "use strict" causes setting a property in an element like this:

element[name] = value

to fail for read only properties, hence SVG complaining.

Setting the attribute like this:

element.setAttribute(name, value)

works alright.

Possible solutions:

1. not use "use strict" (perhaps a bad idea) or
2. avoid setting a property in a SVG element.

from hyperapp.

Fixed in 0.5.0! 💥

from hyperapp.

Yup, I notice after I updated my GoMix to 0.5.0

from hyperapp.

Ok I take 5.0 seems to be a healthy version :) I will update all my things to 5.0 now and report back!

from hyperapp.