1.0.28 • Published 2 years ago

prodotype v1.0.28

Weekly downloads
275
License
MIT
Repository
github
Last release
2 years ago

Prodotype is used in Silex website builder as a component creation tool. Use it to create components and the UI to edit them out of html templates and yaml files.

Links

Features

  • build components from 1 template file and 1 definition file per component
  • generate a UI to edit each component, which creates a data object
  • render a component given data object
  • manage dependencies for components

Install

Add to your project and build pub/prodotype.js

$ npm install
$ npm run build

Use in your projects

In your HTML page - e.g. see this demo page

  <script type="text/javascript" src="./ejs.min.js"></script>
  <script type="text/javascript" src="./prodotype.js"></script>
  <div id="stage"></div>
  <div id="ui"></div>

In your js file - e.g. see this demo script for a complete / real world example.

// the div where you want your components to be rendered
const stage = document.querySelector('#stage');
// the div where we want the UI to edit the components
const ui = document.querySelector('#ui');
// where prodotype templates are located
const templateFolder = './sample'
// the main Prodotype object
const prodotype = new Prodotype(ui, templateFolder);
prodotype.ready(function(err) {
  // create a slide show in the stage div
  const templateName = 'unslider';
  prodotype.decorate(templateName).then(html => stage.innerHTML = html);
  // display tool boxes to edit the component
  prodotype.edit(data, [{templateName:templateName}], templateName, {
    onChange: function(newData, html) {
      stage.innerHTML = html;
    }
  });
});

Run it with npm start and you should be able to edit the component like this:

sample component edition

create your own templates

Create a folder with a .yaml file and a .ejs file - see the sample/ folder to see examples of templates.

Then build your templates with this command line, which will generate a components.json in the destination folder (pub/sample/ in this example):

$ npm run build:templates

All the types of editors here

Development

Production (uses http-server to serve pub/):

$ npm start

Development (serve, watch, build and live reload):

$ npm run watch
$ npm run reload

Create a new version

$ npm version patch
$ git push origin master --follow-tags
$ npm publish
1.0.28

2 years ago

1.0.27

2 years ago

1.0.25

3 years ago

1.0.24

3 years ago

1.0.23

4 years ago

1.0.22

4 years ago

1.0.19

4 years ago

1.0.18

4 years ago

1.0.21

4 years ago

1.0.20

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

5 years ago

1.0.14

5 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

6 years ago

1.0.1

6 years ago