3.0.0-beta.1 release

Author: nolimits4web

README.md

@@ -1,53 +1,30 @@
 # Framework7 Component Loader
 
-> Webpack loader for Framework7 single file router components
+> Webpack loader for Framework7 single file components
 
 ## What is Framework7 Component Loader?
 
-`framework7-component-loader` is a loader for [webpack](https://webpack.js.org/) that allows you to author [Framework7 Router components](http://framework7.io/docs/router-component.html) in a format called [Single-File Components](http://framework7.io/docs/router-component.html#single-file-component):
+`framework7-loader` is a loader for [webpack](https://webpack.js.org/) that allows you to author [Framework7 Router components](http://framework7.io/docs/router-component.html) in a format called [Single-File Components](http://framework7.io/docs/router-component.html#single-file-component):
 
 ```html
 <!-- my-page.f7.html -->
 <template>
-  <div class="page">{{msg}}</div>
-  <!-- Inline partials -->
-  {{> 'foo'}} {{> 'bar'}}
-  <!-- External partials -->
-  {{> 'external'}}
+  <div class="page">${msg}</div>
 </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!',
-      };
-    },
+  export default () => {
+    const msg = 'Hello world';
+
+    return $render;
   };
 </script>
 ```
 
-#### External partial templates example (see config for location)
-
-```html
-<!-- external.f7p.html -->
-<template>
-  <div>External template get scope context {{msg}}</div>
-</template>
-```
-
 ## Installation
 
 ```
-npm i framework7-component-loader
+npm i framework7-loader
 ```
 
 ## Configuration
@@ -62,19 +39,7 @@ module.exports = {
         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,
-            }
-          }
+          'framework7-loader',
         ],
       },
 
@@ -85,36 +50,27 @@ module.exports = {
 }
 ```
 
-## Template7 Helpers
+## JSX
 
-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.
+Framework7 v6 single file components also support JSX:
 
-So, if we use helpers named `foo` and `bar` in our templates, we need to register their names in file:
+```html
+<!-- my-page.f7.html -->
+<script>
+  export default () => {
+    const msg = 'Hello world';
 
-```js
-/* src/template7-helpers-list.js */
-module.exports = ['foo', 'bar'];
+    return () => <div class="page">{msg}</div>;
+  };
+</script>
 ```
 
-And specify this file in loader options:
-
 ```js
-  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',
-            // ...
-          }
-        }
-      ],
-    },
-    ...
-  ]
+// my-page.f7.js
+
+export default () => {
+  const msg = 'Hello world';
+
+  return () => <div class="page">{msg}</div>;
+};
 ```

package-lock.json

@@ -1,21 +1,21 @@
 {
-  "name": "framework7-component-loader",
-  "version": "3.0.0",
+  "name": "framework7-loader",
+  "version": "3.0.0-beta.1",
   "description": "Framework7 single-file component loader for Webpack",
   "main": "lib/index.js",
   "scripts": {
     "lint": "eslint ."
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/framework7io/framework7-component-loader.git"
+    "url": "git+https://github.com/framework7io/framework7-loader.git"
   },
   "author": "Vladimir Kharlampidi",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/framework7io/framework7-component-loader/issues"
+    "url": "https://github.com/framework7io/framework7-loader/issues"
   },
-  "homepage": "https://github.com/framework7io/framework7-component-loader#readme",
+  "homepage": "https://github.com/framework7io/framework7-loader#readme",
   "dependencies": {
     "@babel/core": "^7.10.4",
     "loader-utils": "^1.2.3"