Implement props and data flow

cheng-alvin commented 1 year ago

This is the issue for posting ideas, code, progress and information regarding the implementation of props and dataflow. I would post more information once the implementation starts!

cheng-alvin commented 1 year ago

Welcome back! The implementation of this feature would be starting 🚀! Here is a design documentation/outline of the feature's implementation and usage.

✨Design documentation✨

This feature would be regarding the implementation of the 'props' if you would and passing data through the components as you should be familiar with react. If not, here is a link regarding the props and data flow! However please do note that this documentation would be deprecated and you should not use it as a learning tool for React, it's just an example!

Sample usage 👨‍💻

Here is an example of how this feature shall be used when implemented fully, please see the code below for more information.

Syntax:

<!-- index.html -->
<html>
  <!-- Declaring the component -->
  <durian-component name="sample-component">
    <p>{text}</p> <!-- 👈 Reference the prop! -->
  </durian-component>

  <!-- Use the component -->
  <body>
    <sample-component text="Welcome to `sample-component`!"/>
  </body>
</html>

As shown in line 5, the reference of the prop is very familiar and resembles the JSX syntax in react.js, I am still very unsure of how to implement the referencing of the variables/props. Also while we're at this, I am also quite tentative about how I should type/declare and tell the fact the prop should exist.

Implementation 🔨

For implementation, I am ok to implement this inside the @durian.js/core package alongside the component logic of #1 and #8. Then, we could just simply use this.getAttribute() (More information is listed below) to get the individual props from the DOM and do some type annotation, checking and inferring one I figure out how I would like for it to be declared as mentioned above.

Other sources 📖

cheng-alvin commented 1 year ago

Design documentation updates 🤩

So for data flow and referencing variables from JS, I thought we could go for a 'react' like approach, we can use {} and wrap the variable and maybe expressions inside this to allow for a better inter-opt. Please view the example below for more information.

Example 👨‍💻

<html>
  <!--Reference a component -->
  <my-component prop="{foo}">

  <!-- Script required to demonstrate the code --> 
  <script>
    var foo = "foo";
  </script>
</html>

Please do note that these are not ready to be executed and shall be treated as an example or draft of the service/functionality of the framework.

The element above in the html code would reference the Javascript variable and place it inside the placeholder. We could use a combination of getters and setters to get it reactive and stateful, but however, we would discuss that later in another feature.

cheng-alvin commented 1 year ago

Ok, now I had a think about this, I think I should define props by using a component as such:

<html>
  <!-- Define the component of the framework -->
  <durian-component name="my-component">
    <durian-prop name="prop" type="string" required="true"></durian-prop> <!-- Defines the props -->
  </durian-component>

  <!--Reference a component -->
  <my-component prop="{foo}">

  <!-- Script required to demonstrate the code --> 
  <script>
    var foo = "foo";
  </script>
</html>

cheng-alvin commented 1 year ago

Also this is probably worth mentioning, I think we need a way to implement which scope or which component the javascript belongs to. I had a think about the usage below:

<html>
  <!-- Define the component of the framework -->
  <durian-component name="my-component">
    <script></script> <!-- Dynamically detects scope of code -->
    <durian-prop name="prop" type="string" required="true"></durian-prop> <!-- Defines the props -->
  </durian-component>

  <!--Reference a component -->
  <my-component prop="foo">
</html>

cheng-alvin commented 1 year ago

I think #11 is quite invalid at this point, it's just messing with the version control. Therefore, I've closed it to be re-implemented in another branch

cheng-alvin / durian.js