Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

onboarding / FAQ section that also includes notes on how to import items #54

Open
hanbollar opened this issue May 13, 2024 · 1 comment
Open

onboarding / FAQ section that also includes notes on how to import items #54

hanbollar opened this issue May 13, 2024 · 1 comment
Assignees
@hanbollar

Comments

@hanbollar
Copy link
Contributor

hanbollar commented May 13, 2024 •
edited
Loading

Related to issue and solution:

Starting Notes

@lobau @michaelthatsit - it seems to work all fine if we have users define things in the header after the <script src=mrjs> tag - it seems the reason for the issue was:

  • even though we can do async etc of mrjs loading in header with mrfoo in a script after <mr-app> is created, the onload function is needed as part of <script src=mrjs> to connect mr-foo to that part of the loading before any of the tag elements are included

The Cause

that is, this is what was causing the issue

<header>
    <script src="./mr.js"></script>
</header>
<body>
    <mr-app>
         ...
         <mr-foo>...</mr-foo>
         ...
    </mr-app>
    <script>
          ...
          class MRFoo extends MREntity { ... }
          ...
    </script>
</body>

so the <mr-foo> tag would be hit since it's not on async or defer, > even if the import script for mrjs and the construction script for > MRFoo have defer in their tag.

doing the onload for <script src="./mr.js" onload="constructMRFoo()"></script> (that was noted in the previous comment) works just because it ties MRFoo's implementation timing to mrjs's timing before the rest of the body gets fully filled out (even though the body is already fully read)

The Fix

to not require that, we just need to do the following to make sure the <mr-foo> html element inside <mr-app> is happy just like everything else:

<header>
    <script src="./mr.js"></script>
    <script>
          ...
          class MRFoo extends MREntity { ... }
          ...
    </script>
</header>
<body>
    <mr-app>
         ...
         <mr-foo>...</mr-foo>
         ...
    </mr-app>
</body>

Originally posted by @hanbollar in Volumetrics-io/mrjs#619 (comment)
@github-project-automation github-project-automation bot moved this to To-Triage in MRjs && Docs May 13, 2024
@hanbollar hanbollar changed the title ## Solved! onboarding / FAQ section that also includes notes on how to import items May 13, 2024
@hanbollar hanbollar self-assigned this May 13, 2024
@hanbollar hanbollar moved this from To-Triage to Todo in MRjs && Docs May 13, 2024
@hanbollar
Copy link
Contributor Author

make sure to include section for comparison to codepen? like: https://discord.com/channels/758943204715659264/1201281972815798343/1239675998711316490

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@hanbollar hanbollar

Labels
None yet
Projects
MRjs && Docs
Status: Todo
Milestone
No milestone
Development

No branches or pull requests
1 participant
@hanbollar