Implement basic dynamic component functionality

cheng-alvin commented 11 months ago

This issue is a general discussion and project board for the basic component functionality! I will post the project ideas, suggestions, information and progress here.

cheng-alvin commented 11 months ago

✨ Design documentation ✨

Welcome to the design documentation for the basic dynamic component feature. Basically, this component feature is the core functionality of the Durian.js framework and shall be implemented in the @durian/core package. Please note that this is not completed yet and is just a concept and design documentation for implementation later on. Please consult the documentation when it's released.

Sample usage 🧑‍💻

Here is a example on how to use the component implementation once it has been successfully implemented.

Syntax:

<!-- index.html -->
<html>
  <!-- Declaring a component -->
  <durian-component name="sample-component">
    <p>Welcome to the sample component!</p>
  </durian-component>

  <!-- Usage -->
  <body>
    <sample-component/>
  </body>
</html>

In the syntax above, a durian-component would be declared using web components to allow component creatation. Also note that some parts of the html file is missing or corrupt and should be added inorder to be executed correctly.

Implementation 🔨

To implement this feature, we can use the web components API to register the functionality of the component creation part. We can also add an export member to the class inorder to provide a component registration in plain Javascript and Typescript. Note that the implementation shall be implmented in core of the mono-repo.

Other sources 📖

cheng-alvin commented 11 months ago

The Durian components allows many components to be duplicated and scaled while reducing bundle sizes even more!

LetgoLetsGooooGIF

cheng-alvin commented 10 months ago

Project update 🎉

Now from 1033093 onwards, the durian-component element is now COMPLETELY implemented as according to the design documentation above! You can now render these elements on the DOM without repeating them!

Example

Here's an example that demonstrates the feature in action!

Input:

<!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>

    <!-- Defining the component into durian -->
    <durian-component name="my-first-component">
      <p>Hello world</p>
    </durian-component>

  </head>
  <body>
    <!-- Renders component -->
    <my-first-component></my-first-component>
  </body>
</html>

Output:

Hello world

For more information, regular commit updates, and an up-and-running source code, please check out #8! As usual! Have a great day!

cheng-alvin commented 10 months ago

In review:

cheng-alvin commented 10 months ago

Let's go!

cheng-alvin / durian.js