search

cheng-alvin / durian.js

Durian.js is a lightweight Javascript framework that allows for custom HTML tag to create interactive components for large applications! Easy to learn, light and fun to develop with!
MIT License
2 stars 2 forks source link

Addressing problems with DOM exposure feature (#20) #23

Open cheng-alvin opened 10 months ago

cheng-alvin commented 10 months ago

Bug report 🐛

After completeing Q&A testing in the new DOM exposure feature (As per #20), I have found a couple of bugs on the feature that was implememented. In a nutshell, the after exposing the variable component to the component shadow root, if there is another component within, the component variable would just conflict with the parent component variable.

Reproduction 🔁

To reproduce this issue, please just simply create a nested component inside another component on the durian DOM. Once the component is declared, the console would error an issue stating that the component variable would be conflicting with the parent. Please see below for more information and full code for reproduction

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Durian.js sample application</title>
    <script src="./build.js"></script>
  </head>
  <body>
    <my-durian-component></my-durian-component>
  </body>
</html>

<durian-component name="my-durian-component">
  <my-durian-component-two></my-durian-component-two>
  <h1>Hello, this is a durian component</h1>
  <script>
    console.log("Hello, this is a durian component!");
  </script>
</durian-component>

<durian-component name="my-durian-component-two">
  <h1>Hello, this is a durian component two</h1>
  <script>
    console.log("Hello, this is the second durian component!");
  </script>
</durian-component>

Technical information 💻

[Add terminal output]

Other sources 📖

cheng-alvin commented 10 months ago

Please note that the source code that's causing this would be added soon after the reproduction is cocmpleted. I would suppose the source code would come in tonight (ASET)

cheng-alvin commented 10 months ago

Potential implementation 🧑‍💻

One potential implementation technique is by using getters and setters. Using getters and setters, we can run some code and do some operations before returing the value for the component DOM functions. Please note that this is just a very simple prototype that woule be implmented soon in the attached PR (To be implemented and attachted)

External sources 📃

cheng-alvin commented 10 months ago

Another thing about this is the fact that the behaviour could vary inside different browsers. For example, some browsers support having many script tags while some don't.

However, other behaviors are not defined and there is variation. For example, Opera (at least on Windows XP for version 10.6) ran each script tag in its own context -- so local variables in the 3rd script block would be out of scope if referred to in the 4th script block.

From original source: https://stackoverflow.com/a/4659555/15492585

cheng-alvin commented 10 months ago

Another thing about this is the fact that the behaviour could vary inside different browsers. For example, some browsers support having many script tags while some don't.

However, other behaviors are not defined and there is variation. For example, Opera (at least on Windows XP for version 10.6) ran each script tag in its own context -- so local variables in the 3rd script block would be out of scope if referred to in the 4th script block.

From original source: https://stackoverflow.com/a/4659555/15492585

Honestly, this seems very irrelevant from this point in this issue, I think this belongs to be in another issue for itself.

This issue will now be filed in #25, please see #25 for more information

25 is now closed due to impractically, please refer to #25 for more information about this issue.

cheng-alvin commented 10 months ago

Potential implementation 2 🧑‍💻

Another potential implementation of this fix for this issue is using the power of shadow roots. Shadow roots are used all over the durian.js codebase and provide a great sandbox enviroment for styling, html and Javascript (Most importantly).

The issue with shadow roots 🐛

As discussed above, the shadow root introduced in html is a great way encapsulate html logic into a container of some type. However, when introduced to Javascript, the shadow dom also allows the children or sub-elements of the shadow to access the Javascript functions, variables, classes etc. This could be useful in some circumstances, however, in this case the variables are just conflicting with each other. Inparticular, it's conflicting on the line where the component variable is declared (link) inside the componentFactory() function. This injected code would get called several times as it tries to redeclare the variable in the children DOM elements.

The fix 👨‍🔧

A fix for this could be just to make a child shadow root within the parent shadow root which since the shadow root does not cross-feed, it cannot affect the other scripts (Which are isolated in the shadow root). Please view the example code below this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Durian.js sample application</title>
    <script src="./build.js"></script>
  </head>
  <body>
    <my-durian-component></my-durian-component>
  </body>
</html>

<durian-component name="my-durian-component">
  <h1>Hello, this is a durian component</h1>
  <component-two></component-two>
  <script>
    console.log("Hello, this is a durian component!");
  </script>
</durian-component>

<durian-component name="component-two">
  <h1>Hello, this is the. second durian component</h1>
  <script>
    console.log("Hello, this is the second durian component!");
  </script>
</durian-component>

External sources 📃

cheng-alvin commented 10 months ago

The development would be continued in #24