https://github.com/undercloud/paysage
Vuejs Reactive Components
https://github.com/undercloud/paysage
paysage react reactive redux vue vuejs vuex web-components
Last synced: 11 months ago
JSON representation
Vuejs Reactive Components
- Host: GitHub
- URL: https://github.com/undercloud/paysage
- Owner: undercloud
- License: mit
- Created: 2017-11-26T19:54:16.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-25T19:13:36.000Z (about 7 years ago)
- Last Synced: 2025-03-02T07:17:54.517Z (12 months ago)
- Topics: paysage, react, reactive, redux, vue, vuejs, vuex, web-components
- Language: JavaScript
- Size: 22.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Paysage
Paysage is a helper for quickly and easily creating web components based on Vuejs.
## Installation
`npm install paysage`
## Usage
```javascript
import Paysage from './paysage'
class HelloWorld extends Paysage.Component
{
static props = ['to'];
draw() {
return (
`
Hello {{ to }}`
);
}
}
Paysage.register(HelloWorld, 'HelloWorld');
Paysage.mount('#app','');
```
## Draw and JSX
For creating HTML markup you must implement `draw` method:
```javascript
class SomeComponent extends Paysage.Component
{
draw() {
return (
`
Hello World
`
);
}
}
```
Or define static template:
```javascript
class SomeComponent extends Paysage.Component
{
static draw = '
Hello World';
}
```
Also you can build HTML with `createElement` function:
```javascript
class SomeComponent extends Paysage.Component
{
draw(createElement) {
return createElement(
'div', 'Hello World'
);
}
}
```
More about render function at https://vuejs.org/v2/guide/render-function.html
JSX also support with https://github.com/vuejs/babel-plugin-transform-vue-jsx plugin
```javascript
class SomeComponent extends Paysage.Component
{
// h must be in scope
draw(h) {
return (
Hello World
);
}
```
## Properties
You should not use the following names as properties or class methods,
because they have special meanings in Vue:
`template`, `render`, `renderError`,
`props`, `propsData`, `computed`,
`watch`, `name`, `delimiters`,
`functional`, `model`, `mixins`,
`components`, `directives`, `filter`,
`inheritAttrs`
But if you define them, then they will work according to the built-in Vue logic.
Properties can be defined by two way:
```javascript
class SomeComponent extends Paysage.Component
{
/*
define static property,
common for all instances
*/
static props = ['foo'];
constructor() {
super();
/*
define property on fly,
each instance has own variable copy
*/
this.bar = 'Bar';
}
draw() {
return (
/*
{{ foo }} and {{ bar }} available here,
and in any method defined in this class
*/
);
}
}
```
More about properties at https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
## Computed
All getters and setters will be processed as computed properties:
```javascript
class SomeComponent extends Paysage.Component
{
get fullName() {
return this.firstName + ' ' + this.lastName;
}
set fullName(newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
```
More about computed properties at https://vuejs.org/v2/guide/computed.html
## Events
Next events you can use as Vue's lifecycle hooks
* beforeCreate
* created
* beforeMount
* mounted
* beforeUpdate
* updated
* activated
* deactivated
* beforeDestroy
* destroyed
* errorCaptured
```javascript
class SomeComponent extends Paysage.Component
{
created() {
...
}
mounted() {
...
}
updated() {
...
}
}
```
More about hooks at https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
## Register
You must register component before use:
```javascript
/*
component - component instance
name - component name, default equal instance name
*/
Paysage.register(component, name)
```
## Mount
Mount component to DOM:
```javascript
/*
selector - string or HTMLElement instance
component - HTML markup or component instance
options - additional Vue options
*/
Paysage.mount(selector [, component [, options]])
```
## ES5
If you wanna use it without transpilling, use `createClass` helper:
```javascript
var HelloWorld = Paysage.createClass({
constructor: function () {
this.to = 'World';
},
draw: function() {
return (
'
Hello {{ to }}'
)
}
})
Paysage.register(HelloWorld, 'HelloWorld');
```