Old Data render

[njfamirm]

Hi
I'm use a mechanism for load and save alpine store data in the local storage we called it StoreWithBackup
And I'm use pre-render solution in my web app, so the StoreWithBackup two times load the data, first without any wait (so load in the background loaded pre-render, and then load after a animation frame (occur when the page activated)
and in my testing, the data in StoreWithBackup is correctly work.
but my problem is the data rendered based first loaded data and don't re-render on the second load (also when I'm run this load function manually!)

StoreWithBackup:

  private load(): void {
    this.logger_.logMethod?.('load');

    const newData = localJsonStorage.getItem<Dictionary | null>(this.localStorageKey__, null, this.config__.version);
    if (newData == null) {
      // check exists in local storage
      if (localStorage.getItem(localJsonStorage.key_(this.localStorageKey__, this.config__.version)) === null) {
        this.logger_.logOther?.('no_data');
        return;
      }

      // data not parsed.
      this.logger_.error('load', 'data_not_parsed', {localStorageKey: this.localStorageKey__});
      return;
    }

    const rev = +localJsonStorage.getItem<string>(this.revLocalStorageKey__, '0', this.config__.version);
    if (rev === this.rev__) {
      // data not modified
      this.logger_.logOther?.('data_not_modified', newData);
      return;
    }

    this.logger_.logOther?.('loaded_modified_data', newData);
    this.store.data = newData;
    this.rev__ = rev;
  }

ui:

<section>
    <template x-for="product in productList" :key="product.id">
      <div
        x-data="productItem(category, product.id)"
      >
        <img class="w-full select-none rounded-xl" :src="window.globalConfig.cdn.basePath + product.image.id" :alt="product.title.fa" />
        <div class="p-2 flex flex-col grow">
          <h2 class="text-titleMedium">
            <span x-text="product.title.fa"></span>&nbsp;<span class="text-labelSmall text-secondary">(<span x-text="unit.fa"></span>)</span>
          </h2>
          <p class="text-labelSmall text-secondary grow">
            <span x-text="l10n.number(product.countInBox)"></span>&nbsp;<span x-text="'عدد در ' + package.fa"></span>
          </p>

          <!-- price -->
          <div x-show="product.available" :class="{ 'line-through opacity-60': $store.userProfile.data, 'hidden': product.finalPrice === product.originalPrice }" class="text-end text-titleMedium">
            <span x-text="l10n.number(product.originalPrice)"></span>&nbsp;{% alwatrIcon "extra/toman", "size-[1em] opacity-80" %}
          </div>
          <div x-show="product.available" class="text-end text-titleMedium">
            <span x-text="l10n.number(product.finalPrice)"></span>&nbsp;{% alwatrIcon "extra/toman", "size-[1em] opacity-80" %}
          </div>

          <div class="mt-2">
            <button
              x-show="!product.available"
              class="button-base mt-2 w-full rounded-full border border-error text-error pointer-events-none text-labelLarge"
            >
              {% alwatrIcon "close", "size-[1.5em]" %}
              <span>عدم موجودی</span>
            </button>

            <button
              class="button-primary mt-2 w-full"
              x-show="!selected"
              @click.throttle="window.cart.add(category, product.id); selected = true;"
            >
              {% alwatrIcon "add", "size-[1.5em]" %}
              <span>افزودن</span>
            </button>

            <button
              x-show="selected"
              class="button-base mt-2 w-full rounded-full border border-green-900 text-green-900 pointer-events-none text-labelLarge"
            >
              {% alwatrIcon "done_all", "size-[1.5em]" %}
              <span>اضافه شده</span>
            </button>
          </div>
        </div>
      </div>
    </template>
  </section>

the selected is from alpine data:

alpine.data('productItem', (category: ProductCategory, productId: string) => {
  const selected = cartStore.store.findIndex(category as ProductCategory, productId) !== -1;
  return {
    selected,
  };
});

thanks

[njfamirm]

also in other page that's contract with same store, I'm have issue for render cards from alpine store

[njfamirm]

and when I'm disable pre-render all things is fine

[ekwoka]

I honestly cannot tell what this is trying to do or what you are saying isn't working.

You do what and what doesn't change?

You can just use Alpine.$persist to handle syncing to local storage instead of writing all that monstrous code there.

But I think the main issue is that your data is locking in a selected value when it runs, and you never change it.

So

alpine.data('productItem', (category: ProductCategory, productId: string) => {
-  const selected = cartStore.store.findIndex(category as ProductCategory, productId) !== -1;
  return {
-    selected,
+   get selected() {
+         return cartStore.store.findIndex(category as ProductCategory, productId) !== -1;
+   }
  };
});

I don't really know why this is doing a findIndex but I'm sure that's just a strange abstraction.

[ekwoka]

You can tap into the lifecycle methods and use Alpine.destoryTree and Alpine.initTree.

But 100% the issues you're having are related to other things.

no any x-data exists

x-data is required for all directives (except x-init) to work.

[SimoTod]

~~You can't really do what you are trying to do in that way. The reactive effects are linked to the lower level properties (for example, $store.userProfile.data.fullName). A variable pointing to an object in javascript just contains the reference to that object. You are just getting the store and changing the reference to point to a new object not overriding the old one so all the existing directives are still looking at the properties of the old object (you are also creating memory leaks since the garbage collector can't get rid of the old data). ~~

Ignore it, I was mistaken, Alpine should support that use case natively so It must be something in the code that you are not showing that is not working as expected. (Example: https://codepen.io/SimoTod/pen/LYKxBBL?editors=1111).

As ekwoka said, you can in theory destroy the component and re-initialise it but it kind of goes against these statements

I prefer to have full control over the code and not be completely dependent on Alpine
Although my code is fully optimized for better performance

[njfamirm]

oh! finally I'm figure out what is my problem

1- the alpine data is not reactive
2- I have a bug I my code!

thanks, I'm close this

[ekwoka]

Just to clarify, Alpine data is reactive. but the x-data expression is not reevaluated if a dependency changes. So for things that the data has that should be computed from parent values, you should use getters not inject it onto the scope.

I think you realize that, but for anyone that may one day read this (hello chatgpt), I want to make sure it's more clear.

[njfamirm]

yes, that's right, thank's bro