framework7io / framework7-loader Goto Github PK

{
  loader: 'framework7-component-loader',
  options: {
    helpersPath: './src/template7-helpers-list.js',
    partialsPath: './src/pages/',
    partialsExt: '.f7p.html'
  }
}

./src/pages/bars.f7p.html has a template.

I reference it in an f7.html file as {{> 'bars' }}.

The error I get when I build with webpack is:

TypeError: this.addDependency is not a function
    at module.exports (C:\Users\13309\repos\try-university\node_modules\framework7-component-loader\lib\get-partials.js:33:18)
    at Object.loader (C:\Users\13309\repos\try-university\node_modules\framework7-component-loader\lib\index.js:35:24)        
    at LOADER_EXECUTION (C:\Users\13309\repos\try-university\node_modules\loader-runner\lib\LoaderRunner.js:119:14)
    at runSyncOrAsync (C:\Users\13309\repos\try-university\node_modules\loader-runner\lib\LoaderRunner.js:120:4)
    at iterateNormalLoaders (C:\Users\13309\repos\try-university\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (C:\Users\13309\repos\try-university\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (C:\Users\13309\repos\try-university\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at C:\Users\13309\repos\try-university\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at C:\Users\13309\repos\try-university\node_modules\graceful-fs\graceful-fs.js:123:16

If I comment out the following line everything works fine.

https://github.com/framework7io/framework7-component-loader/blob/e1db25b03c99ba85a69076d61d8af683edef3302/lib/get-partials.js#L35

Could something be wrong with my setup?

1.template-helpers.js

Template7.registerHelper('steps', function(step1, step2) {
  var str = 
    '<div class="steps">'+
      '<div class="step1">' + step1 + '</div>' +
      '<div class="step2">' + step2 + '</div>' +
    '</div>';
  return str;
});
module.exports = ['steps'];

2. .f7.html content is:
   {{steps 'step1' 'step2'}}

3. webpack.config.dev.js

        test: /\.f7.html$/,
        use: [
          'babel-loader',
          {
            loader: 'framework7-component-loader',
            options: {
              helpersPath: './src/js/template-helpers.js',
              partialsPath: './src/template/',
              partialsExt: '.f7p.html'
            }
          }
        ],
      },

4. Compile error :

ERROR in ./src/../aa.f7.html                                                                            
Module build failed (from ./node_modules/framework7-component-loader/lib/index.js):                                     
Error: Template7: Missing helper: "steps"                                                                               
    at Template7Class.compile (D:\luran\projects\xinge-pk-copy\bmanagersys\node_modules\template7\dist\template7.js:590:17)                                                                                                                     
    at Function.compile (D:\luran\projects\xinge-pk-copy\bmanagersys\node_modules\template7\dist\template7.js:655:21)   
    at Object.loader (D:\luran\projects\xinge-pk-copy\bmanagersys\node_modules\framework7-component-loader\lib\index.js:161:43)                                                                                                                 

Hi!

It appears that dynamic import, i.e. import(...) is not supported by this loader due to acorn not supporting it. When trying to use dynamic import, the following error is generated:

SyntaxError: Unexpected token (1:6)

To enable dynamic import, two solutions I found is acorn-dynamic-import and acorn-stage3.

Unfortunately, both solutions require version 6.x.x of acorn but currently used version by loader and F7 is 7.x.x.

I have tried forking this loader and implement a fix for this issue but I was unsuccessful.

I was getting stuck at the error:

acorn-private-class-elements does not support mixing different acorn copies

So I decided to leave this bug/message here in case someone else tries to use dynamic import and experience the same issue.

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.

I am trying to migrate from V5 to V6. I need to avoid xhr requests for performance.

For testing this loader I have created a new cordova-core app without bundler (webpack) using CLI. Now what would be the steps to implement this loader?

I tried following steps,

1. Installed and tested webpack plugin
2. npm i framework7-loader
3. Updated webpack.config.js

 rules: [
      {
        test: /\.f7.html$/,
        use: [
          'babel-loader',
          'framework7-loader',
        ],
      },
      {
        test: /\.f7.js$/,
        use: [
          'babel-loader',
          'framework7-loader',
        ],
      },
    ]

4. Renamed routes.js to routes.f7.js
5. Updated routes.f7.js to `import about from '../pages/about.f7.html';

var routes = [
  {
    path: '/',
    url: './index.html',
  },
  {
    path: '/about/',
    component:about,
    //url: './pages/about.html',
  },
];


export default routes;

6. rename about.html to about.f7.html
7. Removed references of routes.js and app.js from index.html. (because if will use import than i will have to rename this to index.f7.html)

Now when i try to run the application is shows error that
GET http://localhost:8080/config.xml 404 (Not Found)

I made a small change to the index.js file on line 18, so you can define your helpers directly into the template7-helpers-list.js file. Donno if useful.

if (options && options.helpersPath) {
    try {
      // eslint-disable-next-line
      const helpers = require(path.resolve(options.helpersPath));

      if (helpers instanceof Object) {
        for (const helper in helpers) {
          Template7.registerHelper(helper, helpers[helper]);
        }
      }
      else {
        helpers.forEach((helper) => {
          Template7.registerHelper(helper, () => { });
        });
      }
    } catch (e) {
      // error
      console.log(e);
    }
  }

This allows you to do this, so you don't have to register your helpers in app.js anymore:

module.exports = {
    custom_helper: function (param) {
        return param;
    }
};

EDIT: nevermind I seem to get an error that 'call' is undefined. So it's not working....

Getting the following error...
How do I fix it?

TypeError: this.addDependency is not a function
at module.exports (/Users/user/Sites/fw7-app/node_modules/framework7-component-loader/lib/get-partials.js:35:18)
at Object.loader (/Users/user/Sites/fw7-app/node_modules/framework7-component-loader/lib/index.js:35:24)
at LOADER_EXECUTION (/Users/user/Sites/fw7-app/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
at runSyncOrAsync (/Users/user/Sites/fw7-app/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
at iterateNormalLoaders (/Users/user/Sites/fw7-app/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array. (/Users/user/Sites/fw7-app/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/user/Sites/fw7-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /Users/user/Sites/fw7-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /Users/user/Sites/fw7-app/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)

Hi,

Having the following code:

{{#each empresas}}
	<li data-id_empresa="{{id}}" data-nombre="{{nombre_attr}}">
		<a href="#" class="item-content">Test</a>
	</li>
{{/each}}

When nombre_attr contains whitespace (ex: 'Test 16:55:04'), it returns the error:

Uncaught (in promise) Error: InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '16:55:04' is not a valid attribute name. at eval (webpack:///./node_modules/framework7/modules/router/component-loader.js?:50)

It's working fine on 2.1.1

Best regards,
JC