I don't remember was it used in this library or no

Elm is using linked list as far as I know for expedient speed.

Is it?

https://github.com/elm/virtual-dom/blob/5a5bcf48720bc7d53461b3cd42a9f19f119c5503/src/Elm/Kernel/VirtualDom.server.js#L72-L75

what would it take? mixfix for purescript compiler like in agda to define [] for List?

Could someone please add documentation about what each constructor is used for? What's the difference between Attribute and Property?

tnx, If I'll find first - I will add

https://github.com/slamdata/purescript-halogen-vdom/blob/34c032aa5f72b600d69ab970e2737ca533c6c118/src/Halogen/VDom/DOM/Prop.purs#L34-L38

I have an application that involves a list of embedded videos (in iframes) where the user can choose to hide any of them individually. I noticed that when I hid one of them, all the iframes after it in the list would get reloaded. Naturally I reached for a keyed node to solve this problem, but low and behold, it did not change anything. After talking with Nate Faubion on discord, it turns out that the current keyed node diffing algorithm still moves things around more than I expected it to, and when an iframe is moved, it gets reloaded. I learned functional UI in Elm originally, so this behavior surprised me. I checked if Elm behaved the way I expected it to, and it did. Nate said that the current algorithm was made not to minimize DOM manipulation, but to satisfy other design goals. I'm curious if getting this diffing on par with Elm, or at least fixing the iframe issue is something the project would currently be open to.

Comparisons

• Elm
  • Removal: no reloads
  • Reorder: 1/3 reloaded
• Halogen (the videos don't load but it doesn't matter for the demo, the black screens still flash white when they get reloaded)
  • Removal: All beneath are reloaded
  • Reorder: 2/3 reloaded

why here tid is an object with a render function

but everywhere else it is just a render function?

I need to come up with a small reproduction case for this, but as an example of the error:

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
    at ./output/Halogen.VDom.Util/foreign.js.exports.unsafeSetAny (http://localhost:3000/index.js:87081:14)
    at http://localhost:3000/index.js:86101:21
    at Object../output/Halogen.VDom.Util/foreign.js.exports.diffWithKeyAndIxE (http://localhost:3000/index.js:87156:15)
    at Step.patchProp [as value2] (http://localhost:3000/index.js:86133:40)
    at Object.step (http://localhost:3000/index.js:86664:14)
    at Step.patchElem [as value2] (http://localhost:3000/index.js:86273:43)
    at Object.step (http://localhost:3000/index.js:86664:14)
    at onThese (http://localhost:3000/index.js:86288:43)
    at Object../output/Halogen.VDom.Util/foreign.js.exports.diffWithIxE (http://localhost:3000/index.js:87124:17)
    at Step.patchElem [as value2] (http://localhost:3000/index.js:86297:36)

This is from a form where we have a switchable section, and so patching is reusing an input as both a password input and as a file input. Entering a value in the password field then switching back and forth resulted in the error.

I fixed it by keying the inputs so they would definitely not be shared, but it seems like something we should perhaps handle during patching rather than allowing it to explode at runtime.

here

well, I kind of understand why, but still want to know the explanation

the other question is should we update other propNames this way?

for example react calls value, checked, selected the Controlled attributes and handles them differently (diffHydratedProperties)

I have mentioned it here purescript-halogen/purescript-halogen#610 (comment)

just like for:

1. https://reactjs.org/docs/react-dom.html#hydrate
2. https://github.com/snabbdom/snabbdom/blob/master/src/tovnode.ts

The second link is just for reference. It builds VDOM from DOM node, but our hydrate method should

1. take DOM element
2. take VDOM element that contains event handlers
3. add event handlers to the DOM elements recursively AND throw error if the content of the DOM element is different from the VDOM (for example the text or class property)

here is the code from next.js example

here is how nextjs rendered html

here are relevant react code parts

https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/DOMNamespaces.js#L8-L10

https://github.com/facebook/react/blob/3e94bce765d355d74f6a60feb4addb6d196e3482/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js#L391

https://github.com/facebook/react/blob/03de849af03996b7477420c97de7741ce1214149/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js#L41

I'll go sleep

Howdy. I was looking into whether the tag at v3.0.0 could run on 0.13.x. Looks like there's one small thing that doesn't parse. It should be a non-breaking change as it parses with both 0.12.x and 0.13.x (unless I'm forgetting something). Would you be willing to accept a PR for the change and push out a v3.0.1? If so, it looks like a branch has to be made starting at v3.0.0, then I should be able to make a PR. If not, no big.

We can just call createElementNs, because namespace can be null according to spec

https://dom.spec.whatwg.org/#validate-and-extract

And examples

https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course

seems like we can reuse it

https://github.com/elm/virtual-dom/blob/5a5bcf48720bc7d53461b3cd42a9f19f119c5503/src/Elm/Kernel/VirtualDom.server.js#L196-L201

I will think where

It's used here in the main lib: https://github.com/slamdata/purescript-halogen-vdom/blob/master/src/Halogen/VDom/Util.purs#L35

I tried to run the example, and the browser is complaining about how ENV is not defined. Looking at the FFI javascript:

exports.getData = function () {
  return ENV.generateData().toArray();
};

exports.getTimeout = function () {
  return ENV.timeout
};

exports.pingRenderRate = function () {
  Monitoring.renderRate.ping();
};

exports.requestAnimationFrame = function (f) {
  return function () {
    window.requestAnimationFrame(function () {
      f();
    });
  }
}

It seems that ENV is meant to be provided by the user, but for example generateData() doesn't appear anywhere else in the code. Being a newcomer to the library (and purescript in general), I'm not sure what it's supposed to do.

I, on several occasions use third party libraries that manage HTML themselves (WYSIWYG editors, drag-drop, FontAwesome DOM watcher). I would like to define on the parent element of the elements managed by these libraries that any children should no longer be managed by the Halogen VDOM. So basically a node that is rendered by the VDOM and then never touched again. How can this be done with thunks/lazy, etc. or will it need a separate implementation?

Thanks!