jinjor / elm-break-dom Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://elm-break-dom.netlify.com/
Home Page: https://elm-break-dom.netlify.com/
This was originally filed in the bug tracker for elm-3d-scene but this patch is the root cause ianmackenzie/elm-3d-scene#105
Clicking the one button in this example should update the model and otherwise do nothing. The console should not have any errors.
The console shows many copies of this error (1 per frame in a 60fps browser maybe?)
main.html:2843 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at _VirtualDom_render (main.html:2843:43)
at _VirtualDom_applyPatchRedraw (main.html:3878:16)
at _VirtualDom_addDomNodesHelp (main.html:3728:5)
at _VirtualDom_addDomNodesHelp (main.html:3643:5)
at _VirtualDom_addDomNodesHelp (main.html:3739:8)
at _VirtualDom_addDomNodes (main.html:3617:2)
at _VirtualDom_applyPatches (main.html:3762:2)
at main.html:4038:15
at updateIfNeeded (main.html:4107:56)
The line in the stack trace points to kids.length
in the last for loop in the code below. Lines included above just so it's easier to find in the generated JS. The error will be the same if I build with a JS file as output, only the line numbers will be different naturally.
// at this point `tag` must be 1 or 2
var domNode = vNode.f
? _VirtualDom_doc.createElementNS(vNode.f, vNode.c)
: _VirtualDom_doc.createElement(vNode.c);
domNode.created_by_elm = true;
if (_VirtualDom_divertHrefToApp && vNode.c == 'a')
{
domNode.addEventListener('click', _VirtualDom_divertHrefToApp(domNode));
}
_VirtualDom_applyFacts(domNode, eventNode, vNode.d);
for (var kids = vNode.e, i = 0; i < kids.length; i++)
{
_VirtualDom_appendChild(domNode, _VirtualDom_render(tag === 1 ? kids[i] : kids[i].b, eventNode));
}
return domNode;
~/.elm/0.19.1/packages/elm/virtual-dom/
patched with this patchelm make src/Main.elm --output=main.html
but this persists whether or not I have --debug
or --optimize
or --output=main.js
then include into main.js
into a handwritten index.html
. It persists whether I open the HTML file in the browser (i.e. with file:///path/to/index.html
) or if I serve it using a minimal webserver (I tend to use python3 -m http.server 4321
). I have even reproduced it in a lamdera page.
{
"type": "application",
"source-directories": [
"src"
],
"elm-version": "0.19.1",
"dependencies": {
"direct": {
"avh4/elm-color": "1.0.0",
"elm/browser": "1.0.2",
"elm/core": "1.0.5",
"elm/html": "1.0.0",
"ianmackenzie/elm-3d-camera": "3.1.0",
"ianmackenzie/elm-3d-scene": "1.0.1",
"ianmackenzie/elm-geometry": "3.11.0",
"ianmackenzie/elm-units": "2.10.0"
},
"indirect": {
"elm/json": "1.1.3",
"elm/random": "1.0.0",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"elm/virtual-dom": "1.0.3",
"elm-explorations/linear-algebra": "1.0.3",
"elm-explorations/webgl": "1.1.3",
"ianmackenzie/elm-1d-parameter": "1.0.1",
"ianmackenzie/elm-float-extra": "1.1.0",
"ianmackenzie/elm-geometry-linear-algebra-interop": "2.0.2",
"ianmackenzie/elm-interval": "3.1.0",
"ianmackenzie/elm-triangular-mesh": "1.1.0",
"ianmackenzie/elm-units-interval": "3.2.0"
}
},
"test-dependencies": {
"direct": {},
"indirect": {}
}
}
module Main exposing (main)
import Angle
import Browser
import Camera3d
import Color
import Direction3d
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Length
import Pixels
import Point3d
import Scene3d
import Scene3d.Material as Material
import Viewpoint3d
type Model
= Model
type Msg
= MakeErrorsHappen
update : Msg -> Model -> ( Model, Cmd msg )
update MakeErrorsHappen _ =
( Model, Cmd.none )
main =
Browser.element
{ init = \() -> ( Model, Cmd.none )
, subscriptions = \Model -> Sub.none
, update = update
, view = view
}
view : Model -> Html Msg
view model =
Html.div
[]
[ scene model
, button [ onClick MakeErrorsHappen ]
[ text "make bugs"
]
]
scene : Model -> Html msg
scene _ =
let
underlayment : Scene3d.Entity coordinates
underlayment =
Scene3d.quad (Material.color (Color.rgba 255 0 0 0.5))
(Point3d.meters -5 -5 -1)
(Point3d.meters 5 -5 -1)
(Point3d.meters 5 5 -1)
(Point3d.meters -5 5 -1)
r =
42.0
( camX, camY, camZ ) =
( r * cos 0.0, r * sin 0.0, 24.0 )
camera =
Camera3d.perspective
{ viewpoint =
Viewpoint3d.lookAt
{ focalPoint = Point3d.origin
, eyePoint = Point3d.meters camX camY camZ
, upDirection = Direction3d.positiveZ
}
, verticalFieldOfView = Angle.degrees 30
}
in
Scene3d.cloudy
{ entities = [ underlayment ]
, camera = camera
, clipDepth = Length.meters 1
, background = Scene3d.transparentBackground
, dimensions = ( Pixels.int 800, Pixels.int 1000 )
, upDirection = Direction3d.negativeZ
}
In the minimum example above, changing scene : Model -> Html msg
to scene : Html msg
gets rid of the problem. It means, of course, that the scene cannot change with the values in the model.
This one https://chrome.google.com/webstore/detail/stayfocusd/laankejkbhbdhmipfmgcngdelahlfoji?hl=en breaks Browser.application
even with the sed hack. It adds elements to the beginning of the inner and outer body
elements.
There is a new kid on the block.
legacyDisableGrammarly : Attribute msg
legacyDisableGrammarly =
Attrs.attribute "data-gramm_editor" "false"
currentDisableGrammarly : Attribute msg
currentDisableGrammarly =
Attrs.attribute "data-enable-grammarly" "false"
I tend to have them both on :)
Some context for the new attribute: facebookarchive/draft-js#616 (comment)
Thank you for the solution, I found out that elm-apps also crash when screen-readers change the focus or highlight certain elements and this patch was a solution to my problem.
Probably, it would be a good Idea to make it a larger project that collects such patches, so that other users could select on a more fine-grained level, which patches should be applied. I created two patches that fix the URL problem, since the file protocol is not allowed in elm, as well as adding external-click events or to use innerHTML ...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.