Skip to content
New issue

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

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

Already on GitHub? # to your account

add "fallthrough" attributes #38

Open
eWert-Online opened this issue Sep 6, 2024 · 1 comment
Open

add "fallthrough" attributes #38

eWert-Online opened this issue Sep 6, 2024 · 1 comment

Comments

@eWert-Online
Copy link
Member

Currently if one wants to use a tag in a nested component, the tag needs to be redeclared in every level. This is not only unergonomic, but also leads to the tag defining its (meaningful) attributes at the first level.

Take the following example. Ideally we would like to define the constraints for the #Tree in the "MainNavigation" component.
Currently this is not possible, because the implementor (CMS) is asked for the data at the top level (PageDefault).

component MainNavigation {
  let mainNav = #Tree();

  <nav>
     ...
  </nav>
}

component Header {
  let mainNav = #Tree();

  <header class="Header">
    <MainNavigation mainNav={mainNav} />
  </header>
}


page DefaultPage {
  let mainNav = #Tree(filter: [DefaultPage]);

  <body>
    <Header mainNav={mainNav} />
  </body>
}

A solution would be to add a syntax for letting a tag "fall through". This way the tag could be defined where its actually used and it would not need to be redefined at every level.

This could look something like that:

component MainNavigation {
  let mainNav = #Tree(filter: [DefaultPage]);

  <nav>
     ...
  </nav>
}

component Header {
  <header class="Header">
    <MainNavigation #mainNav />
  </header>
}


page DefaultPage {
  <body>
    <Header #mainNav />
  </body>
}
@eWert-Online
Copy link
Member Author

eWert-Online commented Sep 6, 2024

One problem to watch out for is the reuse of same key names.
For example:

component MediaText {
  let text = #String(multiline: true);
  
  <article class="MediaText">
    {#Slot(key: "image", constraints: [Image], min: 1, max: 1)}
    {text}
    <Button
      class="MediaText-button"
      primary={true}
      icon="arrow-right"
      #text
      #href 
    />
  </article>
}

In this case the #text on the button would reuse the data of the multiline text defined in the "MediaText" component.
This needs a solution, which could be that the user can define a new key for the redefined tag.
A syntax could look like this:

<Button
  class="MediaText-button"
  primary={true}
  icon="arrow-right"
  #(text as buttonText)
  #href 
/>

In this example, the redefined "text" attribute of the button would have the key "buttonText".

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant