JustRightBeforeSwitchDOM hook or event

[misog]

Hi, currently there are events:

1. pjax:send event when Pjax sends the request.
2. pjax:receive event when Pjax receives the response.
3. Pjax switches the DOM. See switchDOM method for details.
4. pjax:error event if any error happens to previous steps.
5. pjax:complete event when previous steps finish.
6. pjax:success event if previous steps finish without any error.

However I need to destroy some custom plugins which have DOM components just right before switchDOM is executed. But currently in Pjax I have to use pjax:receive event - but this event is many milliseconds away from switchDOM and the effect is that browser renders blank components after they were destroyed for a short time (before DOM is switched).

I would need a hook or event that is executed just right before switchDOM and browser will not have time to render DOM changes up to the time of switchDOM.

Is it currently possible?

Thank you

[misog]

The thing is that with non-PJAX, object destruction and plugin destruction (usually plugin.destroy()) was not so important. Hovewer with SPA/PJAX it is important to clear plugins from memory before switchDOM. It should be done very close to actual switchDOM/swap to prevent short "blinks" caused by plugin.destroy().

More info

[PaperStrike]

The document hook is a bit closer to the DOM switches. The closest one (and semantically better) is switches option, with that you can write something like

const pjax = new Pjax({
  selectors: ['element-that-contains-the-component'],
  switches: {
    'element-that-contains-the-component': (...args) => {
      theComponentPlugin.destroy();
      Pjax.switches.default(...args);
    },
  },
});

Does it suit your needs?

[misog]

I won't add a such option for your "once" listeners because I think it violates the specification, which can easily lead to strange problems if some piece of your code or a lib you use (now or in a future version) relies on the standard DOMContentLoaded events.

A way to differentiate PJAX from standard load would be useful in general. DOM loaded by browser and DOM loaded by PJAX are results of different ways of getting HTML.

If you really want it you can simply do it yourself:
document.addEventListener('pjax:success', () => {
document.dispatchEvent(new Event('DOMContentLoaded', { bubbles: true }));
});

Thanks, I will test this. However maybe I will still need to differentiate PJAX from browser in some cases.

I still suggest you to use the switches option, and to use event-based algorithm, you can design your own events like:

I prefer handle my plugin instance locally in view Laravel view files; init function which returns destroyhandler per each instance. I do not like to handle lifecycle of plugins at one central place while creating Pjax object.

So, instead of this:

<script>
var library;
// ...
document.addEventListener('destory-the-component', () => {
  library.destroy();
});
</script>

I would like to use something like this:

<script>
var library;
// ...
library = new SomeLibrary();
document.addEventListener('pjax:just-right-before-dom-swap', () => {
  library.destroy();
}, {once: true || "once just as the new keyword was executed once"});
</script>

Currently I handle constructors like this and it works OK and fast:

    ...
    onLoad: function(fn) {
        let fnWrap = () => {
            this.runClearHandlers();
            // handle fn with result as clear handler
        }
        // set listeners with fnWrap
    },
    runClearHandlers: function() {
        while (this.clearHandlers.length) {
            let fn = this.clearHandlers.shift();
            fn();
        }
    },
    ...

[PaperStrike]

A way to differentiate PJAX from standard load would be useful in general.

I'm not sure if I have understood your need correctly. There're two possibilities I think you may be asking:

• In a script outside of the selectors, differentiate Pjax navigations and browser navigations. These navigations are already differentiated, as they dispatch different events.
• In a script inside of the selectors, differentiate whether it is being loaded by the initial browser load or by a Pjax navigation. If in this case, I wonder the circumstance you need this, because I haven't met with a such need where it can't be solved in a better way.

I do not like to handle lifecycle of plugins at one central place while creating Pjax object.
So, instead of this:
I would like to use something like

The name 'destory-the-component' is just an example. You are free to name it 'pjax-remove-the-component-element', 'pjax-unload-the-sidebar' or whatever you like, with no or any other meaning attached. It has nothing to do with any kind of centralization. I was just suggesting the proper place that you can emit the "JustRightBeforeSwitchDOM event" yourself.

[misog]

• In a script outside of the selectors, differentiate Pjax navigations and browser navigations. These navigations are already differentiated, as they dispatch different events.
• In a script inside of the selectors, differentiate whether it is being loaded by the initial browser load or by a Pjax navigation. If in this case, I wonder the circumstance you need this, because I haven't met with a such need where it can't be solved in a better way.

I mean, when JS code is run (in <script> tag), it would be helpful to differentiate PJAX evaluation and browser evaluation. In <script> tags placed all over the page (for example when using https://atomicdesign.bradfrost.com/chapter-2/) there are codes which orchestrate JS plugins or do some other action which should be called in both cases (PJAX+browser), however sometimes something more must be done only in PJAX evaluation or only in browser evaluation.

It could look like this:

Pjax.isPjaxEvaluation()

And used like this:

<script>
  //  handle general cases
  if (Pjax.isPjaxEvaluation()) {
    // handle some specific cases
  } else {
    // handle only first browser load
  }
</script>

As you mentioned, DOMContentLoaded can be dispatched on pjax:success, however that just blurs the difference. detail object can be added to CustomEvent with a flag, however this requires polyfill for IE10 and below and possibly for IE11. Event does not work with detail object in Firefox:

document.addEventListener('pjax:success', () => {

    document.dispatchEvent(new CustomEvent('DOMContentLoaded', { bubbles: true, detail: {'pjax': true} }));

});

However this does not help with <script> tags which evaluate while parsing and when differentiation between PJAX/browser should be done right there.

[misog]

The name 'destory-the-component' is just an example. You are free to name it 'pjax-remove-the-component-element', 'pjax-unload-the-sidebar' or whatever you like, with no or any other meaning attached. It has nothing to do with any kind of centralization. I was just suggesting the proper place that you can emit the "JustRightBeforeSwitchDOM event" yourself.

Yes but my point was not that I do not like the naming. My point was that I do not want to mention anything related to my elements in the central place (when creating new Pjax). But I could do this:

const pjax = new Pjax({
  selectors: ['body'],
  switches: {
    'body': (...args) => {
      document.dispatchEvent(new Event('pjax:just-right-before-switch')); // custom event
      Pjax.switches.default(...args);
    },
  },
});

This should do the job, thanks. However I still think that this could be implemented in the package because it is important event like pjax:success and others, because it is critical for fast and pretty component destructions with no visual "blinks".

And what to do if I want to not have body selector but still want to dispatch this for all selectors, but just once? This would fire three times but it should fire just once:

const pjax = new Pjax({
  selectors: ['sel1', 'sel2', 'sel3'],
  switches: {
    'sel1': (...args) => {
      document.dispatchEvent(new Event('pjax:just-right-before-switch')); // custom event
      Pjax.switches.default(...args);
    },
    'sel2': (...args) => {
      document.dispatchEvent(new Event('pjax:just-right-before-switch')); // custom event
      Pjax.switches.default(...args);
    },
    'sel3': (...args) => {
      document.dispatchEvent(new Event('pjax:just-right-before-switch')); // custom event
      Pjax.switches.default(...args);
    },
  },
});

I could use CustomEvent instead of Event and pass selector to it. However this would require polyfill. Also, in event listener, how would the code know in what selector/parent it resides?

[PaperStrike]

I mean, when JS code is run (in <script> tag), it would be helpful to differentiate PJAX evaluation and browser evaluation.

A <script> tag can be either inside of your selectors option, or outside of your selectors option. There is a difference.

• A script outside of your selectors option will only be executed once, the time when the page is initial loaded by the browser. In a such "outside script", to run something on each navigation, you can write something like

  const onBrowserLoadOrPjaxNavigation = () => {
    // ... These code should be executed on the initial page load and Pjax navigations.
  };
  
  const onBrowserLoad = () => {
    // ... These code should only be executed on the initial page load.
  };
  
  const onPjaxNavigation = () => {
    // ... These code should only be executed on Pjax navigations.
  };
  
  // You can also remove the listener wrapper and run them directly.
  document.addEventListener('DOMContentLoaded', () => {
    onBrowserLoadOrPjaxNavigation();
    onBrowserLoad();
  });
  
  document.addEventListener('pjax:success', () => {
    onBrowserLoadOrPjaxNavigation();
    onPjaxNavigation();
  });

• A script inside your selectors option may be executed multiple times (e.g., when navigate somewhere and navigate back), and it should only contain the "general cases" code (onBrowserLoadOrPjaxNavigation). You should move the code specific to browser/pjax out of your selectors option, and refer to the previous paragraph.

however this requires polyfill for IE10 and below and possibly for IE11

IE and some older browsers aren't the target of this project. See https://github.com/PaperStrike/Pjax#compatibility. And Pjax is already using CustomEvent and much more non-IE-compatible API internally, so you may need to switch to another project or use many more polyfills if you really need to support these browser engines.

However I still think that this could be implemented in the package because it is important event like pjax:success and others, because it is critical for fast and pretty component destructions with no visual "blinks".

While it appears that the "switches" happen at the same time, in fact they don't, even in the current version of Pjax. And someday we may provide an option that makes it possible to run and await the custom switchers one-by-one. (e.g., switch the page content first, wait for the animation promise (like the one in the custom switcher example) to fulfill, then switch the menu and the other parts of the page). So you shouldn't expect the "JustRightBeforeSwitchDOM event" to be functionally equivalent to "JustRightBeforeXXXSwitch event".

All the web component plugins I know of either have their own pjax-like systems, or can automatically destory what should be destoryed when the related elements are removed, or their destruction functions can be called after the related elements have been removed. I don't see the popularity to make this kind of event a native part of this package.

And what to do if I want to not have body selector but still want to dispatch this for all selectors, but just once? This would fire three times but it should fire just once:

You can use commas (,) to group CSS selectors.

const pjax = new Pjax({
  selectors: ['sel1, sel2, sel3'],
  switches: {
    'sel1, sel2, sel3': (...args) => {
      document.dispatchEvent(new Event('pjax:just-right-before-switch')); // custom event
      Pjax.switches.default(...args);
    },
  },
});

[Yahav]

It seem to me that you're looking for a solution for something that is caused by not constructing your app properly. I've managed to achive a rather good pjax powered complex app using laravel/webpack too. Pm me if you'd like and i might be able to demonstrate. בתאריך יום ב׳, 25 ביולי 2022, 11:58, מאת misog ***@***.***>:

…

I won't add a such option for your "once" listeners because I think it violates the specification, which can easily lead to strange problems if some piece of your code or a lib you use (now or in a future version) relies on the standard DOMContentLoaded events. A way to differentiate PJAX from standard load would be useful in general. DOM loaded by browser and DOM loaded by PJAX are results of different ways of getting HTML. If you really want it you can simply do it yourself: document.addEventListener('pjax:success', () => { document.dispatchEvent(new Event('DOMContentLoaded', { bubbles: true })); }); Thanks, I will test this. However maybe I will still need to differentiate PJAX from browser in some cases. I still suggest you to use the switches <https://github.com/PaperStrike/Pjax/tree/v2.4.0#switches> option, and to use event-based algorithm, you can design your own events like: I prefer handle my plugin instance locally in view Laravel view files; init function which returns destroyhandler per each instance. I do not like to handle lifecycle of plugins at one central place while creating Pjax object. So, instead of this: <script> var library; // ... document.addEventListener('destory-the-component', () => { library.destroy(); }); </script> I would like to use something like this: <script> var library; // ... library = new SomeLibrary(); document.addEventListener('pjax:just-right-before-dom-swap', () => { library.destroy(); }, {once: true || "once just as the new keyword was executed once"}); </script> — Reply to this email directly, view it on GitHub <#339 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA3UVHZPCFI3VRJ5GNMJ5TVVZJMHANCNFSM54PN2OTA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[misog]

I can not PM you here as you have no public contact here, but we can chat at https://client.chatcrypt.com, channel is pjax and password is G54C5LKg

[Yahav]

Tried entering the chat, you're not there
So basically what i did is that each page has a javascript file that is imported dynamically in the page loading process.
And each page js file have 3 functions:

export const SetupPage = async function () {
// Setup everything that needs to be there before the init, in my case Alpine Stores etc..
}

export const InitPage = async function () {
// Init all the javascript components of the page 
}

export const DestroyPage = async function () {
// Remove/destroy all the javascript components of the page
// Nullify stores etc..
}

The main app.js file contains something like:

// Get page id from actual page
const currentPage = window.pageParams.pageId

//load page js and init pjax
pageLoader(currentPage, true).then(res => {
  initPjax()
})

pageLoader is something like:

const pageLoader = async (pageToLoad, isInitialPageLoad = true) => {
  return new Promise(resolve => {
    // Dynamically import the page js file
    import('../pages/' + pageToLoad).then(async page => {
      window.pageParams.currentPageObject = page

      // Some misc tasks 
     // ...
     
       // Fire and wait for setuppage function at the page js file
      await page.SetupPage()

      // If initial page load, do some tasks
      if (isInitialPageLoad) {

       //Some misc tasks

       // fire the initpage function at the page js file
        await page.InitPage()
      }
      resolve()
    })
  })
}

and the initPjax function is something like that:

const initPjax = () => {
  document.addEventListener('pjax:fetch', (e) => { console.log(e) })
  document.addEventListener('pjax:unload', (e) => { console.log(e) })
  document.addEventListener('pjax:content', (e) => { console.log(e) })
  document.addEventListener('pjax:ready', (e) => { console.log(e) })
  document.addEventListener('pjax:load', (e) => { console.log(e) })

  const sequence = {
    async fetch (r, req) {
      try {
        appStore().state = 'loading'
        // Destroying Alpine Effects/Watchers

       // Fire the destroy function of the page that we unloading
        if (window.pageParams.currentPageObject !== null) {
          window.pageParams.currentPageObject.destroyPage()
        }
      } catch (e) {
        console.error(e)
      }
      return 1
    },
    async unload (r, res) {
      try {
        const pageId = res.document.querySelector("meta[name='page-id']").getAttribute('content').trim()
        // Fire pageLoader to load the page js
        await pageLoader(pageId, false)
      } catch (e) {
        console.error(e)
      }
      return 2
    },
    async content (r, areas) {
      console.log('content', r, areas)
      try {
        // Some misc tasks, in my case init common ui elements
      } catch (e) {
        console.error(e)
      }
      return 3
    },
    async ready (r) {
      return 4
    },
    async load (r, events) {
      try {
        // Fire the initpage of the new page that's being loaded
        window.pageParams.currentPageObject.InitPage()
      } catch (e) {
        console.error(e)
      }
      console.log('load', r, events)
    }
  }

  return new Pjax({
    sequence: sequence,
    form: 'form:not([data-disable-pjax])',
    areas: [
      '#system-alert-modal, #site-content, #navbarMenuDesktop .ui.header, #pageParams'
    ]
  })
}

[Yahav]

This works perfectly since each page got its own separate js file even after the bundling and i got all the control i need for the entire flow of the pageload as well as a way to differentiate between initial/browser page load and pjax page load.

[misog]

Thank you, I will get to it. You could make it a public project because it looks helpful. However, the sequence is undocumented as well as pjax:unload - do you use PaperStrike/Pjax ?

[Yahav]

Damn you're right, this is the old pjax adapter.
The implementation for PaperStrike pjax:

const initPjax = () => {
  document.addEventListener('pjax:send', (e) => { console.log(e) })
  document.addEventListener('pjax:receive', (e) => { console.log(e) })
  document.addEventListener('pjax:error', (e) => { console.log(e) })
  document.addEventListener('pjax:complete', (e) => { console.log(e) })
  document.addEventListener('pjax:success', (e) => { console.log(e) })

  return new Pjax({
    selectors: [
      'title',
      'meta',
      '#site-content',
      '#navbarLeftContainer',
      '#CloudProperties',
      '#CloudPageData'
    ],
    defaultTrigger: {
      enable: true,
      exclude: 'a[data-pjax-disable],form[data-pjax-disable]'
    },
    hooks: {
      request: async (request) => {
        request.headers.set('X-CSRF-TOKEN', document.querySelector("meta[name='csrf-token']").getAttribute('content'))
        try {
          window.Cloud.pageData = {}
          $('#site-content').find('*').off() // Removes all jquery event listeners in container
          // $('style[data-type="page-style"]').remove() // Removed Injected styles @TODO: check how to handle this during optimazation
          if (window.Cloud.currentPageObject !== null) {
            await window.Cloud.currentPageObject.DestroyPage()
          }
        } catch (e) {
          console.error(e)
        }
      },

      response: (response) => {

      },

      document: async (document) => {
        try {
          const pageId = document.querySelector("meta[name='page-id']").getAttribute('content').trim()
          const pageJsData = document.querySelector('#CloudPageJsData').innerHTML
          eval(pageJsData)
          const cloudPropertiesJs = document.querySelector('#CloudProperties').innerHTML
          eval(cloudPropertiesJs)
          await pageLoader(pageId, false)
        } catch (e) {
          console.error(e)
        }
      },

      switchesResult: async (switchesResult) => {
        try {
          InitUI()
          await window.Cloud.currentPageObject.InitPage()
          appStore().state = 'ready'
        } catch (e) {
          console.error(e)
        }
      }
    }
  })
}

I've stripped some parts that were app specific but this should give you an idea on how its implemented.
As for the view blinking/changes, when the page loads until the init is ready i have a skeleton placeholders in place..