noodle - inheritance not being handled right - needs documentation update for expln

[hanbollar]

Linking

Fixes #618

Problem

(see the rest in the issue description)

something is wrong with inheritance for user designated items

Solution

Quick explanation of change to be done

needs more noodling first

Breaking Change

If this is a breaking change describe the before and after and why the change was necessary

Notes

Notes and any associated research or links

---

Required to Merge

• PASS - all necessary actions must pass (excluding the auto-skipped ones)
• TEST IN HEADSET - main dev-testing-example and any of the other examples still work as expected
• VIDEO - if this pr changes something visually - post a video here of it in headset-MR and/or on desktop (depending on what it affects) for the reviewer to reference.
• TITLE - make sure the pr's title is updated appropriately as it will be used to name the commit on merge
• BREAKING CHANGE
  • DOCUMENTATION: This includes any changes to html tags and their components
    • make a pr in the documentation repo that updates the manual docs to match the breaking change
    • link the pr of the documentation repo here: #pr
    • that pr must be approved by @lobau
  • SAMPLES/INDEX.HTML: This includes any changes (html tags or otherwise) that must be done to our landing page submodule as an effect of this pr's updates
    • make a pr in the mrjs landing page repo that updates the landing page to match the breaking change
    • link the pr of the landing page repo here: #pr
    • that pr must be approved by @hanbollar

[render]

Your Render PR Server URL is https://examples-mrjs-pr-619.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-cotamkmv3ddc73crbk00.

[hanbollar]

The issue

It has to do with mr.js taking longer to load - so even though mr.js /isnt/ an async load and you /should/ be able to do :

<script src="./mr.js">
<script>
  class MRFoo extends MREntity {
     ...
  }
</script>

which gives us the sad state where the model doesnt load under MRFoo

which in our case means, MREntity finally becomes defined after MRFoo is already being handled, which is /not/ what we want.

---

The reasoning and short term fix

mrjs is big enough that it takes some time for its items to load one by one - which means unfortunately we end up with a need to have people add items to extend through async if they want mrjs to be handled 100% as expected

that is, at the moment we need them to do something like:

<!-- MRjs -->
<script>
function defineMRFoo() {
  class MRFoo extends MREntity {
     ...        
  }
</script>
<script src="./mr.js" onload="defineMRFoo()"></script>

which means we get what we wanted:

---

MRFoo

note: we currently define MRFoo as follows:

class MRFoo extends MREntity {
    constructor() {
        super();
    }

    connected() {
        super.connected();
        this.boxMesh = new THREE.Mesh(
            new THREE.BoxGeometry(0.2, 0.2, 0.2),
            new THREE.MeshPhongMaterial({
                color: "#ff9900",
                transparent: true,
                opacity: 0.4,
            }));
        this.object3D.add(this.boxMesh);
    }
}

// Define custom element
customElements.get('mr-foo') || customElements.define('mr-foo', MRFoo);

[hanbollar]

@lobau @michaelthatsit let me know if you have any experience with delayed loading of libraries for handling in the html directly - i dont really want to force users to do an onload function to extend anything from our mr.js lib

[hanbollar]

talked with @michaelthatsit and @lobau

some things:

• try <link rel="preload" as="script" href="mr.js">
• maybe preloading through webpack directly? - https://web.dev/articles/preload-critical-assets
• try async connected and adding await in front of super.connected() ??
• look into the add function as well, maybe queue up and wait for load before checking validity
• maybe? maybe not? remove add and have that be function that extends appendChild

[hanbollar]

• try async connected and adding await in front of super.connected() ??

doesnt work - hitting same issue of :

[hanbollar]

double defer doesnt work - takes too long too load

[hanbollar]

It seems to work ok if we have src for mrjs script in header and the class definition in the header

this is because we are using mrfoo as an html element within the group and then defining it after - so all the asyncs we're doing for the scripts wont work because of the html tag predefinition. The onload function version works from #619 (comment) since it blocks everything related until after.

What i find is interesting is that adding defer to the source script in header of mrjs and the creation script of class MRFoo which is after the body, doesnt have the same effect as the onload function does. But from what I understand, that's because the onload function links the two together so MRFoo still ends up being created fully before the body's html information gets executed.

[hanbollar]

Solved!

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>

[hanbollar]

going to close this as solved but not merging since this was to figure out why the problem is happening and what to recommend to users going foward - now the noodle is complete 🥳