❤
npm
Sign UpSign In

vue-me

0.3.0 • Public • Published

vue-me

none npm version [none]https://img.shields.io/badge/vue-2.5.17-blue.svg

This package helps you to seperate concerns within your Vue Class Components. At this state of development it can be used for fast prototyping or small applications.

Due to lack of testing it is not recommended to used this library for business applications.

Heavily inspired by the recompose package provided by acdlite.

https://github.com/acdlite/recompose

Installation

npm i vue-me
 
- or -
 
yarn add vue-me

Quickstart

If you've never built a Vue app before or simply haven't found the time to setup a boilerplate, feel free to clone or fork the project below to get started.

https://github.com/nine36/vue-me-starterkit

git clone https://github.com/nine36/vue-me-starterkit.git

Example

ExampleComponent.js

import { 
  compose, 
  Composable, 
  withState 
} from 'vue-me';
 
class ExampleComponent extends Composable {
  render() {
    return (
      <div>
        <div>{this.title}</div>
        <button onClick={() => { this.changeTitle('A New Title'); }}>
          Change
        </button>
      </div>
    );
  }
}
 
export default compose(
  withState('title', 'changeTitle', 'Initial Title'),
)(ExampleComponent);

App.js

<template>
  <div>
    <ExampleComponent />
  </div>
</template>
 
<script>
import ExampleComponent from "./ExampleComponent";
 
export default {
  name: "App",
  components: {
    ExampleComponent
  }
};
</script> 

Api

withAxios

Demo (Use the axios server example locally)

Syntax

withAxios(endpoint, method, state, handler)
Parameter Type Description Required
endpoint String Endpoint for requests true
method String Request method (GET) true
state String State identifier true
handler String Handler identifier true

Description

Retrieve data from your server with axios and use it in your component.

Usage

...
 
return (
  <div>
    {this.allUsers.map(...)}
    <button onClick={this.fetchAllUsers}>Fetch users</button>
  </div>
)
 
...
 
export default compose(
  withAxios('http://localhost:3000/', 'GET', 'allUsers', 'fetchAllUsers')
)(ExampleComponent);

withHandlers

Demo https://codesandbox.io/s/k58jnnp60v

Syntax

withHandler({
  [identifier]: (props) => [async](values) => { }
})
Parameter Type Description Required
props Object Component props false
values Object Handler arguments false

Description

Declare handlers to manage more complex logic or async operations.

Usage

...
import { fetchUser } from './api';
 
...
 
return (
  <div>
    {this.user.name}
    <button onClick={this.getUser}>Fetch users</button>
  </div>
)
 
...
 
export default compose(
  withState('user', 'setUser', {})
  withHandlers({
    getUser: ({ setUsers }) => async() => {
      const callback = user => setUser(user)
      await fetchUser(id, callback)
      console.log('process done.')
    },
  }),
)(ExampleComponent);

withLifecycles

Demo https://codesandbox.io/s/yk72yvnx91

Syntax

withLifecycles({
  [identifier]: (props) => () => { }
})
Parameter Type Description Required
props Object Component props false

Description

Declare lifecycles to inject into your component.

Usage

export default compose(
  ...
  withLifecycles({
    created: () => () => {
      console.log('component created')
    },
    mounted: ({ title }) => () => {
      console.log('component mounted', title)
    },
  }),
)(ExampleComponent);

withNormalizer

Demo https://codesandbox.io/s/4qmy255kmx

Syntax

withNormalizer(state, data, objectIdentifier, <optional>newProperty)
Parameter Type Description Required
state String State identifier true
data Object, Array Target data true
objectIdentifier String Object identifier true
newProperty String New property true

Description

This function helps you to normalize your data. It can also be used to replace object identifiers with property values and add the old identifiers as new properties.

Usage

const dataSet1 = [
  {
    uuid: 'xxx-1',
    name: 'Socrates',
  },
  {
    uuid: 'xxx-2',
    name: 'Archimedes',
  },
]
 
const dataSet2 =  {
  'wise': {
    uuid: 'xxx-1',
    name: 'Socrates',
  },
  'also-wise': {
    uuid: 'xxx-2',
    name: 'Archimedes',
  },
}
 
class ExampleComponent extends Composable {
  return (
    <div>
      {Object.assign(this.normalizedDataSet1).map(...)}
      {Object.assign(this.normalizedDataSet2).map(...)}
    </div>
  )
}
 
export default compose(
  withNormalizer(
    'normalizedDataSet1', 
    dataSet1, 
    'uuid'
  ),
  withNormalizer(
    'normalizedDataSet2', 
    dataSet2, 
    'uuid', 
    'stateOfMind'
  ),
)(ExampleComponent);

withProps

Demo https://codesandbox.io/s/4lqo1ywnn9

Syntax

withProps(name, defaultValue, required)
Parameter Type Description Required
name String Property identifier true
defaultValue String Default value true
required Boolean Property is required true

Description

Declare component props.

Usage

class ChildComponent extends Composable {
  return (
    <div>
      {this.user.name}
    </div>
  )
}
 
const ChildContainer = compose(
  withProps('user', { name: 'Socrates' }, false)
)(ExampleComponent);
 
class ParentComponent extends Composable {
  return (
    <div>
      {/* renders the default 'Socrates' */}
      <ChildContainer />
      {/* renders 'Archimedes' */}
      <ChildContainer user={{ name: 'Archimedes'}} />
    </div>
  )
}

withService

Demo https://codesandbox.io/s/0oxn09rq4l

Syntax

withService(state, handler, service)
Parameter Type Description Required
state String State identifier true
handler String Handler identifier true
service Function Service true

Description

Hook up your service to a local state and handler

Usage

import { getUser } from '../api';
...
 
return (
  <div>
    {this.user.name}
    <button onClick={() => this.getUser('some-id')}>Fetch user</button>
  </div>
)
 
...
 
export default compose(
  withService('user', 'getUser', getUser)
)(ExampleComponent);

withState

Demo https://codesandbox.io/s/ym632o20pj

Syntax

withState(state, mutation, initialState)
Parameter Type Description Required
state String State identifier true
mutation String Mutation identifier true
initialState any Initial state true

Description

Declare local state and state mutations.

Usage

...
 
return (
  <div>
    {this.user.name}
    <button onClick={() => this.setUser({ name: 'Socrates' })}>Fetch users</button>
  </div>
)
 
...
 
export default compose(
  withState('user', 'setUser', { name: 'Archimedes' })
)(ExampleComponent);

Readme

Keywords

Package Sidebar

Install

npm i vue-me

Repository

github.com/nine36/vue-me

Homepage

github.com/nine36/vue-me#readme

Weekly Downloads

2

Version

0.3.0

License

MIT

Unpacked Size

1.25 MB

Total Files

13

Last publish

Collaborators

  • nine36
Try on RunKit
Report malware