wc-f7

wc-f7 is a Framework7 setup that provides seamless integration with Web Components

$3

wc-f7 extends Framework7 core modules replacing the router component loader with one that accepts a Web Component declaration (tag name or class constructor) instead of a Framework7 component model. As a side effect, vdom (Snabbdom) and parser/loader modules are not imported/bundled.

$3

- Declares Framework7 pages as Web Components
- Supports async rendering (e.g. LitElement / SkateJS)
- Bundle size smaller than Framework7 core
- Supports component lifecycle hooks and page events
- No hard dependency on a specific Framework7 version (any v4 version should work)

$3

- Does not works with shadow dom, due to the Framework7 architecture
- Only ES modules build is provided

$3

$ npm install wc-f7 framework7

$3

Define component class

``Javascript
import { LitElement, html } from 'lit-element'


export class IndexPage extends LitElement {
// page events are declared in static property $on
static get $on() {
return {
pageMounted: function(e, page) {
console.log('page mounted')
},
pageInit: function(e, page) {
console.log('page init', this.level)
}
}
}

get level() {
// $route, $router, $app, $f7, $theme properties are avaliable in instance
return +this.$route.params.level || 0
}

// disables shadow dom
createRenderRoot() {
return this
}

// lifecycle hooks must be declared with $ prefix
$created() {
console.log('$created', this.level)
}

$beforeMount() {
console.log('$beforeMount', this.level)
}

render() {
const level = this.level
const message = level ? 'Hello Again' : 'Hello World!'
return html



}
}

customElements.define('index-page', IndexPage)
`

Create the app and setup the route

`Javascript
import Framework7 from 'wc-f7' // 'wc-f7/bundle' for all components bundled
import { IndexPage } from './index/index-page'

const app = new Framework7({
root: '#app',
routes: [
{
path: '/my-page/level/:level',
component: IndexPage // or 'index-page'
},
],
})

``

See examples folder for complete apps

---

Copyright © 2019 Luiz Américo Pereira Câmara