search

Active-CSS / active-css

The epic event-driven browser language for UI with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?
https://activecss.org
Other
42 stars 7 forks source link

Add a data option to @component syntax #252

Closed bob2517 closed 1 year ago

bob2517 commented 2 years ago

Dunno why I didn't think of this one earlier.

Loading JSON data into a component is a common thing. There could be an option in the \@component statement, like the new "html" and "css" options, that loads JSON and evaluates variables, etc. before the component renders. Thereby avoiding flicker while things load up.

I'm going to get 2.10.0 done first and that will be part of the next release.

bob2517 commented 2 years ago

I'm calling this option json().

Instead of this:

@component address-field privateVars {
  &:beforeComponentOpen {
    ajax: "/get-address-data.php" post-pars(id={@host:person});
  }
  html {
    <h2>Title: {{title}}</h2>
    <p>Address: {{address}}</p>
  }
}

You will be able to do this and it will preload fully and in theory avoid any flicker at render point:

@component address-field
    json(/get-address-data.php post post-pars(id={@person}))
    privateVars
  {
  html {
    <h2>Title: {title}</h2>
    <p>Address: {address}</p>
  }
}

It goes without saying that html() and css() will work alongside it.

dragontheory commented 2 years ago

How would this be in context?

ACSS:

@component address-field json(/get-address-data.php post post-pars(id={@person})) privateVars {

HTML:

<body>
  <address-field>
    <h2>Title: {{person.title}}</h2>
    <p>Address: {{person.address}}</p>
  </address-field>
</body>
bob2517 commented 2 years ago

It's based on the example from this page: https://activecss.org/manual/component-ajax.html

Where the component tag itself looks like this:

<address-field person="1"></address-field>

When the component loads, the "person" attribute from the tag is used as the id.

It's a good method to use if you have a fixed data structure that will always have something in them.

bob2517 commented 2 years ago

There were double-curlies on the original example because variables need to automatically update on the page after the ajax command had finally loaded, and that was always after the component had been drawn on the page.

With the new example reactive variables are no longer needed, because the variables will be ready by the time the component gets drawn. In the original method, the component would render first, and then update the variables on the page when the ajax had loaded, so there was always a slight flicker. There won't be any flicker with this new method.

It's just one of many ways to use components. The components that I write often have ajax commands in beforeComponentOpen, so it seemed worth doing. It's not the new way - it just makes a specific use case better. The other ways to use components are just as valid.

bob2517 commented 2 years ago

Now on the branch.

bob2517 commented 1 year ago

Closing in preparation for release.