LibWeb: Survive and partially parse importmap

[rzeigler]

Improves #21794.

The first commit gets https://node-projects.github.io/web-component-designer-demo/index.html to load into a broken state rather than crash the browsers.

The second commit begins parsing the importmap but I was unable to test further due to an assert at Userland/Libraries/LibWeb/HTML/Scripting/ModuleScript.cpp:136 trying to execute a module.

There are a few bits in the spec that I'm not sure about the correct way to handle. Specifically the phrase 'error to rethrow' which I added dbglns and early returns for instead. There didn't seem to be nearby infrastructure to do that so I'm not sure what the correct approach is.

[rzeigler]

I have extracted functions were you pointed out. I set them currently to return ErrorOr on the assumption that eventually instead of dbglns this will do the 'throw error' or similar.

[jogibear9988]

Only for information: The site does use the importmaps polyfill not importmaps directly, cause it uses importmaps wich could be dynamicly modified, wich is not yet supported by the importmap spec.

[rzeigler]

@AtkinsSJ I will make these changes (and will squash/rebase down to 1 commit), but in the meantime I did have a question around what the correct error handling should be here. It appears per https://html.spec.whatwg.org/multipage/webappapis.html#impr-error-to-rethrow that failure is 'throw an error' but I'm not sure exactly sure what that should mean. The only thing I could come up with is to recover certain kinds of ErrorOr into a JS script that is throw Error(...) maybe along with some dbgln that can be evaluated by execute_script. Does this track?

[AtkinsSJ]

@AtkinsSJ I will make these changes (and will squash/rebase down to 1 commit), but in the meantime I did have a question around what the correct error handling should be here. It appears per html.spec.whatwg.org/multipage/webappapis.html#impr-error-to-rethrow that failure is 'throw an error' but I'm not sure exactly sure what that should mean. The only thing I could come up with is to recover certain kinds of ErrorOr into a JS script that is throw Error(...) maybe along with some dbgln that can be evaluated by execute_script. Does this track?

Oh I missed that you weren't doing anything with the error! I'm not much of a JS person unfortunately. :sweat_smile: My rough understanding is you'd return vm.throw_completion(...)' which would mean changing the return type to JS::ThrowCompletionOr<...>instead ofErrorOr<...>. (You may also need to then wrap any Errors to return them.) There are lots of examples of that around the codebase. But you can always ask in #js` if you get stuck.

[AtkinsSJ]

Oh also you don't need to only have a single commit per PR, just that if you have a commit, then later need to fix a mistake you made in it, just modify that commit.

[rzeigler]

Regarding the tests, Its not immediately clear to me where I would add a test and what I would test. In Tests/LibWeb I found lots of .html files and related expectations, but its not clear to me how these are registered/run. I'm also not able to actually run modules to exercise the importmap, although I think I saw in the Discord someone was working on that and maybe rebasing against HEAD would help.

[jogibear9988]

I tried it. Needed to change

child_text_content().view()

to

child_text_content().bytes_as_string_view()

But I could not get as far as in the screenshot. But no crash, and also no exception.

The console output looks like this:

    ResourceLoader: Starting load of: "https://node-projects.github.io/web-component-designer-demo/index.html"
    ResourceLoader: Finished load of: "https://node-projects.github.io/web-component-designer-demo/index.html", Duration: 271ms
    HTMLScriptElement: Refusing to run script because the type 'esms-options' is not recognized.
    ResourceLoader: Starting load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/es-module-shims/dist/es-module-shims.js"
    ResourceLoader: Finished load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/es-module-shims/dist/es-module-shims.js", Duration: 30ms
    ResourceLoader: Starting load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/metro4-dist/css/metro-all.min.css"
    ResourceLoader: Starting load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/metro4-dist/css/metro-all.min.css"
    ResourceLoader: Starting load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/@fortawesome/fontawesome-free/css/all.min.css"
    ResourceLoader: Starting load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/@fortawesome/fontawesome-free/css/all.min.css"
    ResourceLoader: Starting load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/mobile-drag-drop/default.css"
    ResourceLoader: Starting load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/mobile-drag-drop/default.css"
    ResourceLoader: Starting load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/mobile-drag-drop/index.js"
    invalid import_map url x
    ResourceLoader: Finished load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/metro4-dist/css/metro-all.min.css", Duration: 60ms
    No property (from 4 properties) matched Token: Comma
        animation-direction
        animation-play-state
        animation-delay
        animation-fill-mode
    No property (from 4 properties) matched Token: Comma
        animation-direction
        animation-play-state
        animation-delay
        animation-fill-mode
    ResourceLoader: Finished load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/metro4-dist/css/metro-all.min.css", Duration: 239ms
    No property (from 4 properties) matched Token: Comma
        animation-direction
        animation-play-state
        animation-delay
        animation-fill-mode
    No property (from 4 properties) matched Token: Comma
        animation-direction
        animation-play-state
        animation-delay
        animation-fill-mode
    ResourceLoader: Finished load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/mobile-drag-drop/default.css", Duration: 395ms
    ResourceLoader: Finished load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/mobile-drag-drop/default.css", Duration: 394ms
    ResourceLoader: Finished load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/mobile-drag-drop/index.js", Duration: 393ms
    ResourceLoader: Finished load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/@fortawesome/fontawesome-free/css/all.min.css", Duration: 397ms
    ResourceLoader: Finished load of: "https://node-projects.github.io/web-component-designer-demo/node_modules/@fortawesome/fontawesome-free/css/all.min.css", Duration: 397ms

[stale[bot]]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions!

[stale[bot]]

This pull request has been closed because it has not had recent activity. Feel free to re-open if you wish to still contribute these changes. Thank you for your contributions!