Skip to content

Latest commit

 

History

History

05_client-uid-counters

05_client-uid-counters

../05_client-uid-counters

Decentralized scoping js execution on an Astro component used mutiple times on the same page

Constraints :

  • decentralized : not conflicting with multiple integrations using the same concept
  • no global state management : which is not easy to fulfill when using components from different sources
  • multi instances used on the same page
  • components handle their own js scripts
  • each component has a lifecylce independence and its js only handles its own html and not one of other instances

Alternatives:

  • It is always possible to initialize all components from the top page js, but sometimes the js component code is preferrably placed within the component itself.
  • It is also possible within the component to have the code run on all components in the page of the same type, but this does not fit with lazy loading where each component has to be initialize separately
  • It is still possible to keep a component state in the window or as html attribute and still run init on all components everytime a new one wakes up, but this might incur incompatibilities when mixing versions
  • A centralized approach is also demonstrated but not recommend due to flaws that might happen when the sequence_uid function gets multiple instances for some reason such as being budled separately.

Optionally:

  • a hash function could be used if an unidentifieable id is desired that does not reflect the user input (using counting numbers or names,...), if the input data is too big such as complete file or if the uid is required to always have the same consistent format e.g. number of characters which the user cannot guarantee.

Open in StackBlitz open in Codesandbox open in Gitpod