From 15e7ca2c2aff43f55e36cec4101a7025b596f4f4 Mon Sep 17 00:00:00 2001 From: Niko Salminen Date: Fri, 27 Oct 2017 16:22:21 +0300 Subject: [PATCH] Add introduction to readme, provide webserver, fix example --- README.md | 34 +- example/globals/index.html | 4 +- example/globals/test.html | 2 +- gulpfile.babel.js | 12 + package-lock.json | 8313 ++++++++++++++++++++++++++++++++++++ package.json | 3 +- 6 files changed, 8360 insertions(+), 8 deletions(-) create mode 100644 package-lock.json diff --git a/README.md b/README.md index 0b59d8f..4a78132 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,39 @@ -# PPR.js - [![Coverage Status](https://coveralls.io/repos/github/Houston-Inc/ppr.js/badge.svg?branch=master)](https://coveralls.io/github/Houston-Inc/ppr.js?branch=master) [![Build Status](https://travis-ci.org/Houston-Inc/ppr.js.svg?branch=master)](https://travis-ci.org/Houston-Inc/ppr.js) +# Introduction + +PPR.js is a JavaScript library for hydrating a statically rendered HTML page. It is designed to be used with CMS generated pages with lots of variation and different components. PPR.js works well together with RequireJS to load only the functionality and dependencies of the components present on the page. + +PPR.js uses jQuery to search all elements on the page with the `data-component="exampleComponent"` attribute set. It then finds the JS code associated with the name `exampleComponent` and builds it. + +```html +
+ +
+``` + +```javascript +import BasePrototype from 'ppr.component.baseprototype'; + +export default class ExampleComponent extends BasePrototype { + build() { + this.node.find('button').click(() => { + alert('Hello world!'); + }); + } +} +``` + ## Installation -### Install +To use PPR.js in your project, first install it using NPM or yarn: + + npm install ppr-js --save + +or - bower install ppr-js --save + yarn add ppr-js ## Building diff --git a/example/globals/index.html b/example/globals/index.html index 062449b..0e31b11 100644 --- a/example/globals/index.html +++ b/example/globals/index.html @@ -58,8 +58,8 @@

Reloadable component

- - + +