[Feature Request] Partial Loader

[dimitriadamou]

The views can easily become overly large which makes navigation and maintenance of code cumbersome as time goes on and with more people being involved.

Splitting up Views into Partials keeps the design process very concise, clear, testable and allows better reusability. It would be fantastic if partials could be compiled easily via similar mechanisms of framework7-component-loader.

I did notice that in framework7-component-loader there already are (or was - seems to be removed in version 3) options for loading partials, however I find the previous implementation does not work when you nest your files a folder or more deeper, and hot-loading did not work.

While I know Framework7 pushes a single file component design philosophy (https://framework7.io/docs/router-component.html#single-file-component) - I find for my use case, this does not suit my requirements as I am also involving storybook; so I need to separate my logic concerns from the UI - an example of my structure is the following;

/pages/
---job
------list
---------job.listitem.partial.html
---------job.list.f7.html
---------list.js
---------list.stories.js
------view
---------job.details.partial.html
---------job.view.f7.html
---------view.js
---------view.stories.js

Inside the respective list.js and view.js I export 2 objects, a Route object and the Page. This way I am able to separate the concerns, and allow the UI/UX designers to simply focus on the view

At the moment I do it this way.

In my webpack.config.js I've added

{
   use: [
   test: /\.partial.html$/,
       'babel-loader',
       {
       loader: 'html-loader'
       },
   ]
}

Inside my page view controller I have code such as this
view.js

import Template7 from 'template7';
import DetailsPartial from './job.details.partial.html';
import Component from './job.view.f7.html';

Template7.registerPartial(
    "job.details", DetailsPartial
);

const Route = {
   path: '/job/view/:jobID',
   name: 'jobview',
   async: async (routeTo, routeFrom, resolve, reject) => {
      ...do logic here...
      resolve({component: Component}, {contenxt: payload});
   }
};

export {
   Route,
   Component
}

export default Component;

job.view.f7.html

...html...
{{^ "job.details"}}
...more html...

Describe the solution you'd like
I imagine the use case would be akin to the following
name.partial.html

   <div>
       I am a partial. My name is {{name}}
   </div>

index.f7.html

   <div class="page-content">
      lorem ipsum {{^ "name"}}
   </div>
   <script>
      export default {};
   </script>

index.js

import "name.f7p.html"; //framework7-loader automatically resolves this to Template7.registerPartial("name", <<content>>);
import Component from "index.f7.html";

const Route = {
    path: "/",
    component: Component,
    options: {
        context: {
            name: "Dimitri",
        },
    },
};

export { Route, Component };
export default Component;

Which would output

lorem ipsum I am a partial. My name is Dimitri

The name can come from the portion before .partial.html or if the partial requires a script export just having export {partial: "name"} would be fine to, this method would allow for webpack to hot-reload, and allow for more responsive design times with Storybook.

I was going to attempt to modify the framework7-loader, however there seems to be a difference between version 2 and current version 3-beta, and with Framework7 v6 being close to release my efforts may not align with your view.