Component async loading

Questions
1

Currently it’s possible in the routes definition to specify those type :

url , content , template , templateUrl , component or componentUrl

I think there is a missing type the : componentContent

Why ?

I had an idea to implement a “live reload” function to fix emergency bug in components code.
I have already done this by doing a custom code modification in F7 lib.

  • All my routes are defined with “componentUrl” type
  • In the F7 code, “Router.prototype.xhrRequest”, I intercept the request to “https://MY_EXTERNAL_SERVER/components/about.html”,
  • I first check in IndexedDB if i previously created an entry for “about.html” with emergency fix requested.
  • If NO fix => i modify the requestUrl to the local URL file (about.html).
  • If YES fix => I go and fetch on my remote server the fixed about.html file, store it in the indexedDB file system, and resolve the Router.prototype.xhrRequest promise with the retreived content from my server. Next calls to the about.html FIXED will be donne from IndexedDB by intercepting next remote fetch request.

Like that, i have fixed about.html with juste one download only and after we stay “offline”.

At the next Store update, i will include the fixed about.html files and so on…

Questions are :

  • What do you think of this emergency update system. It’s way cheaper that AppFlow for example, with infinite updates.
  • I miss the componentContent type. It would avoid me to “hack” the code. I would just feed componentContent with the string that my server would have. Instead of “hacking” componentUrl code.
2

You can fetch the component from your server as string with json serialized content (object with template, script and style members). Then store it in your local db, and on usage just JSON.parse it and solve the async route with your component.

If I had to do this, I would create a PHP script which you can ask for a component file: get_component.php?comp=myfile.html

Then get_component.php will check if file_exists, and if it exists load the file from a regular component .html file on your server. Then parse it into a associative array with some regex and output it with json_encode. This way, you can just copy-paste an existing component file from your app contents to the server. I develop my apps as web apps, and could even pull the component file from the webroot using the php file.

2 Likes
3

What you mention as componentContent basically a string representation of component. So you can store file content as a string, and to resolve it as component there is a method app.component.parse(componentString) that returns component

const component = app.component.parse(`
<template>
  ...
</template>
<script>
   ...
</script>
`);

resolve({ component })
2 Likes
4

Thanks for detailing this. That’s exactly what i decided to implement yesterday. Your answer confirm me it’s a usable choice.

5

Thanks again Vladimir.

That is my “dream” method i was looking for.