Exemplos de maquette createProjector em JavaScript

Exemplo n.º 1

Arquivo: main.js Projeto: johan-gorter/sandbox

'use strict';

var maquette = require("maquette");

var h = maquette.h;

var renderMaquette = function() {
  return h.body([
    h.p([
      h.button(["Click me"]),
      h.a.linkClass({href:"#"}, ["Link"])
    ])
  ]);
};

var projector = maquette.createProjector(document.body, renderMaquette);

Exemplo n.º 2

Arquivo: index.js Projeto: gmschouten/css-modules-maquette

import styles from './app.css';
import * as maquette from 'maquette';

var h = maquette.h;
var projector = maquette.createProjector();

function renderMaquette() {
  return h(`div.${styles.test}`, {
    classes: {
      [styles.dark]: true,
      [styles.big]: true
    }
  }, ['testing div']);
}

document.addEventListener('DOMContentLoaded', function () {
  projector.append(document.body, renderMaquette);
});

Exemplo n.º 3

Arquivo: Router.js Projeto: ksibod/maquette-navstack

const Maquette = require('maquette');
const Projector = Maquette.createProjector();


class Router {

    constructor() {        
        this._navstack = [];
        this._modalPresent = false;
    }
    
    refresh() {
        Projector.scheduleRender();
    }
    
    render(component) {
        Projector.append(document.body, component.render);
    }

    navigateForward(component) {
        this.render(component);
        setTimeout(() => {
            if (this._navstack.length) {
                let currentPage = document.getElementById(this._navstack[this._navstack.length-1].id);
                let newPage = document.getElementById(component.id);
                
                newPage.className = 'screen right';
                newPage.className = 'screen moving center';
                currentPage.className = 'screen moving left';
            }
            this._navstack.push(component);