Aucune description

Matheus Giovani db2b2e9838 added listeners and updated vscode ext il y a 3 ans
examples e5f79a8374 added implementation tag and one new example il y a 3 ans
packages db2b2e9838 added listeners and updated vscode ext il y a 3 ans
test db2b2e9838 added listeners and updated vscode ext il y a 3 ans
.gitignore 53337b9ad0 entire refactor with custom node parser il y a 3 ans
.npmignore 57dbd2e0b8 general refactor il y a 3 ans
LICENSE d873f3a526 first commit il y a 3 ans
README.md e5f79a8374 added implementation tag and one new example il y a 3 ans
jest.config.js 57dbd2e0b8 general refactor il y a 3 ans
nodemon.json dd48e19f34 reformulated component declaration il y a 3 ans
package.json dd48e19f34 reformulated component declaration il y a 3 ans
tsconfig.json dd48e19f34 reformulated component declaration il y a 3 ans
webpack.config.js 54434f1fa4 new version, entirely rewritten il y a 3 ans

README.md

pupper.js icon

pupper.js

pupper.js is a reactive template engine based in pugjs.

This is a BETA project, it can change drastically over time, so use it with caution for now and stay updated! :D


Basic syntax

pupper.js is based in pugjs, you can learn about pugjs's syntax here.

There's some new syntax added to use the reactivity:

  • {{ variable }} Renders the contents of variable as text, replacing HTML entities with escaped entities.
  • {- variable -} Renders the literal content of variable as-is

How to use

You can integrate pupper.js to your application by using one of the given loaders that compiles .pupper files into Javascript:


Or, you can integrate using the API:

const pupper = require("@pupperjs/core");
const Renderer = pupper.Renderer;

// Compiles the template to a string
const template = pupper.compileToStringSync(/*pupper*/`
template
    .test
        span.hello-world(id={{ id }})
            ={- content -}
`);

// Create a renderer (view) with some starting data
const renderer = new Renderer(template, {
    id: "the-id",
    content: "Hello, beautiful world!"
});

/**
 * <div class="test">
 *      <span class="hello-world" id="the-id">
 *          Hello, beautiful world!
 *      </span>
 * </div> 
 */
renderer.renderToString();