Noosphere Possibilities Maximized

    framework7-component-loader

    2.1.2 • Public • Published

    Framework7 Component Loader

    Webpack loader for Framework7 single file router components

    What is Framework7 Component Loader?

    framework7-component-loader is a loader for webpack that allows you to author Framework7 Router components in a format called Single-File Components:

    <!-- my-page.f7.html -->
    <template>
      <div class="page">{{msg}}</div>
      <!-- Inline partials -->
      {{> 'foo'}} {{> 'bar'}}
      <!-- External partials -->
      {{> 'external'}}
    </template>
     
    <!-- Template7 inline partial support (optional) -->
    <template-partial id="foo">
      <div>foo</div>
    </template-partial>
    <template-partial id="bar">
      <div>bar</div>
    </template-partial>
     
    <script>
      export default {
        data() {
          return {
            msg: 'Hello world!',
          };
        },
      };
    </script> 

    External partial templates example (see config for location)

    <!-- external.f7p.html -->
    <template>
      <div>External template get scope context {{msg}}</div>
    </template>

    Installation

    npm i framework7-component-loader
    

    Configuration

    module.exports = {
      ...
      module: {
        rules: [
          ...
          {
            test: /\.f7.html$/,
            use: [
              'babel-loader',
              {
                loader: 'framework7-component-loader',
                options: {
                  // path to file that exports array of Template7 helpers names
                  helpersPath: './src/template7-helpers-list.js',
                  // path where to look for Template7 partials
                  partialsPath: './src/pages/',
                  // Template7 partials file extension
                  partialsExt: '.f7p.html',
                  // When enabled it will minify templates HTML content
                  minifyTemplate: true,
                }
              }
            ],
          },
     
          ...
        ]
      }
      ...
    }

    Template7 Helpers

    To use Template7 helpers, we need to specify helpers names in separate file and specify path to file in helpersPath loader parameter. It is required because template is compiled on server side which doesn't know about helpers registered during app runtime.

    So, if we use helpers named foo and bar in our templates, we need to register their names in file:

    /* src/template7-helpers-list.js */
    module.exports = ['foo', 'bar'];

    And specify this file in loader options:

      rules: [
        ...
        {
          test: /\.f7.html$/,
          use: [
            'babel-loader',
            {
              loader: 'framework7-component-loader',
              options: {
                // path to file that exports array of Template7 helpers names
                helpersPath: './src/template7-helpers-list.js',
                // ...
              }
            }
          ],
        },
        ...
      ]

    Keywords

    none

    Install

    npm i framework7-component-loader

    DownloadsWeekly Downloads

    27

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    19.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • nolimits4web