vue-me

vue-me

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)

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]: https://github.com/nine36/vue-me/blob/HEAD/(props) => [async](https://github.com/nine36/vue-me/blob/HEAD/values) => { }
})

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]: https://github.com/nine36/vue-me/blob/HEAD/(props) => () => { }
})

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)

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)

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)

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)

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);