Skip to content

Commit

Permalink
docs: started updating vuepress docs
Browse files Browse the repository at this point in the history
  • Loading branch information
andrewcourtice committed Aug 11, 2021
1 parent 092ecc8 commit 97dc773
Show file tree
Hide file tree
Showing 31 changed files with 791 additions and 649 deletions.
104 changes: 73 additions & 31 deletions docs/src/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,11 @@ module.exports = {
navbar: [
{
text: 'Guide',
link: '/guide/'
link: '/guide/introduction/features.html'
},
{
text: 'Extensions',
link: '/extensions/'
},
{
text: 'Plugins',
link: '/plugins/'
text: 'Extensibility',
link: '/extensibility/'
},
{
text: 'API Reference',
Expand All @@ -37,48 +33,94 @@ module.exports = {
sidebar: {
'/guide/': [
{
isGroup: true,
text: 'Guide',
text: 'Introduction',
children: [
{
text: 'Features',
link: '/guide/introduction/features.html'
},
{
text: 'Getting Started',
link: '/guide/introduction/getting-started.html'
},
]
},
{
text: 'Core Concepts',
children: [
'/guide/README.md',
'/guide/getting-started.md',
'/guide/core-concepts.md',
'/guide/devtools-integration.md',
'/guide/server-side-rendering.md',
'/guide/typescript-support.md',
'/guide/FAQ.md',
{
text: 'Architecture',
link: '/guide/core-concepts/architecture.html'
},
{
text: 'State',
link: '/guide/core-concepts/state.html'
},
{
text: 'Getters',
link: '/guide/core-concepts/getters.html'
},
{
text: 'Mutations',
link: '/guide/core-concepts/mutations.html'
},
{
text: 'Actions',
link: '/guide/core-concepts/actions.html'
},
{
text: 'Triggers',
link: '/guide/core-concepts/triggers.html'
},
]
},
{
text: 'Developer Experience',
children: [
{
text: 'Typescript Support',
link: '/guide/dx/typescript-support.html'
},
{
text: 'Devtools Integration',
link: '/guide/dx/devtools-integration.html'
},
]
},
{
text: 'FAQ',
link: '/guide/FAQ.html'
}
],
'/extensions/': [
'/extensibility/': [
{
isGroup: true,
text: 'Extensions',
children: [
'/extensions/README.md',
'/extensions/action.md',
'/extensibility/extensions/introduction.html',
'/extensibility/extensions/action.html',
'/extensibility/extensions/history.html',
'/extensibility/extensions/lazy.html',
'/extensibility/extensions/reset.html',
'/extensibility/extensions/snapshot.html',
'/extensibility/extensions/storage.html',
]
}
],
'/plugins/': [
},
{
isGroup: true,
text: 'Plugins',
children: [
'/plugins/README.md',
'/plugins/devtools.md',
'/plugins/server-side-rendering.md',
'/extensibility/plugins/introduction.html',
'/extensibility/plugins/devtools.html',
'/extensibility/plugins/server-side-rendering.html',
]
}
],
'/api-reference/': [
{
isGroup: true,
text: 'API Reference',
children: [
'/api-reference/README.md',
'/api-reference/store.md',
'/api-reference/types.md',
'/api-reference/README.html',
'/api-reference/store.html',
'/api-reference/types.html',
]
}
]
Expand Down
8 changes: 4 additions & 4 deletions docs/src/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ heroText: Harlem
tagline: Simple, unopinionated, lightweight and extensible state management for Vue 3
actions:
- text: Get Started →
link: /guide/getting-started.html
link: /guide/introduction/getting-started.html
- text: View Demo
link: https://codesandbox.io/s/harlem-demo-lmffj
link: https://andrewcourtice.github.io/harlem
type: Secondary
features:
- title: Simple
Expand All @@ -17,9 +17,9 @@ features:
- title: Immutable
details: All state provided from a Harlem store is immutable by default. The only write access to state is through mutations. This ensures all updates to your store are tracable, thereby reducing the amount of bugs produced by code unpredictably mutating state.
- title: Lightweight
details: Harlem weighs in at around 1KB (minified & gzipped) which makes it the perfect solution for codebases of all sizes. Harlem is also designed to be tree-shakable - unused stores, getters, or mutations will be removed from your code at build time (provided you are using a build tool that supports tree-shaking). It's also worth noting that Harlem has zero dependencies (apart from Vue obviously).
details: Harlem weighs in at around 1.5KB (minified & gzipped) which makes it the perfect solution for codebases of all sizes. Harlem is also designed to be tree-shakable - unused stores, getters, or mutations will be removed from your code at build time (provided you are using a build tool that supports tree-shaking). It's also worth noting that Harlem has zero dependencies (apart from Vue obviously).
- title: Extensible
details: Harlem uses a plugin architecture so you can extend it any way you want. Some of the official plugins include Vue devtools integration, local/session storage sync, and transactions for rolling back multiple mutations when write errors occur.
details: Harlem is architectured with extensibility in mind so you can extend it any way you want through extensions and plugins. Some of the official plugins and extensions include Vue devtools integration, local/session storage sync, snapshots, history (undo/redo) and more.
- title: Great DX
details: Harlem has a great developer experience. It's built using TypeScript so all of your state, getters, and mutations are strongly typed. Harlem also has devtools integration so you can explore your stores and see mutation events on the timeline in realtime.
footer: MIT Licensed | Copyright © 2020-present Andrew Courtice
Expand Down
3 changes: 3 additions & 0 deletions docs/src/extensibility/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Extensibility

Harlem uses a combination of [extensions](extensions) and plugins to extend core functionality.
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ This is the official action extension for Harlem. This extension adds asynchrono

## Getting Started

Follow the steps below to get started using the action extension.

### Installation

Before installing this extension make sure you have installed `@harlem/core`.
Expand All @@ -27,7 +29,7 @@ yarn add @harlem/extension-action

To get started simply register this extension with the store you wish to extend.

```typescript{16-20,23}
```typescript
import actionExtension from '@harlem/extension-action';

import {
Expand Down Expand Up @@ -55,7 +57,7 @@ const {
});
```

Notice how the extension has added 5 new methods to the store instance: `action`, `hasActionRun`, `isActionRunning`, `whenActionIdle` and `clearActionRunCount`.
The action extension adds 5 new methods to the store instance: `action`, `hasActionRun`, `isActionRunning`, `whenActionIdle` and `clearActionRunCount`.


## Usage
Expand Down Expand Up @@ -133,7 +135,7 @@ Cancelling the task will throw an `ActionAbortError`. It is recommended to wrap
### Handling nested actions
Using nested actions is as simple as calling any other action(s) within the body of the current action. However, to handle cancellation through nesting, the parent `controller` needs to be passed down to the nested instance(s).

```typescript{7-8}
```typescript
import {
childAction1,
childAction2,
Expand Down
81 changes: 81 additions & 0 deletions docs/src/extensibility/extensions/history.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
# History Extension

![npm](https://img.shields.io/npm/v/@harlem/extension-history)

This is the official history extension for Harlem. The history extension adds undo and redo capabilities to your store for easily integrating history features into your application.

## Getting Started

Follow the steps below to get started using the history extension.

### Installation

Before installing this extension make sure you have installed `@harlem/core`.

Install `@harlem/extension-history`:
```
npm install @harlem/extension-history
```
Or if you're using Yarn:
```
yarn add @harlem/extension-history
```

### Registration

To get started simply register this extension with the store you wish to extend.

```typescript
import historyExtension from '@harlem/extension-history';

import {
createStore
} from '@harlem/core';

const STATE = {
firstName: 'Jane',
lastName: 'Smith'
};

const {
state,
getter,
mutation,
undo,
redo
} = createStore('example', STATE, {
extensions: [
historyExtension({
max: 50,
mutations: [
{
name: 'set-name',
description: 'Set the current user\'s name'
}
]
})
]
});
```

The history extension adds 2 new methods to the store instance: `undo` and `redo`.


## Usage

### Options
The history extension method accepts an options object with the following properties:

- **max**: `number` - The maximum number of history steps to store. The default value is `50`.
- **mutations**: `object[]` - The mutations you wish to track. leaving this undefined will cause all mutations to be tracked. The default is undefined.
- **name**: `string` - The name of the mutation to track. This must match the name of a registered mutation.
- **description**: `string?` - An optional description of the mutations intentions. This is useful for displaying a list of commands in the UI.

### Undoing/Redoing mutations
To undo or redo a mutation simply call the `undo` or `redo` methods returned from the store instance.

## Considerations
Please keep the following points in mind when using this extension:

- This extension has a slight performance cost. Each tracked mutation is proxied and values are cloned pre/post mutation. If you are assigning/moving/deleting large object structures around state this cause a performance hit and increase in memory usage. It is recommended to keep mutations granular and precise when tracking them with the history (or trace) extension.
- This extension cannot handle untracked mutation side-effects. For example, say you have 2 mutations, `mutation1` and `mutation2`. Both mutations modify the same branch of state but `mutation1` is tracked by the history extension and `mutation2` is not. Undoing the changes from `mutation1` any time after running `mutation2` will cause changes from `mutation2` to be lost and unrecoverable.
24 changes: 24 additions & 0 deletions docs/src/extensibility/extensions/introduction.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Introduction

Extensions are per-store additions to Harlem's core functionaility. Extensions are often used for adding store features, changing store behaviour and various other low-level tasks. This is the primary method in which Harlem stores are extended.

Feel free to choose from some of the official extensions or write your own. See the [extensions documentation](extensions) from more information on the official set of extensions or how to author your own plugin.

## Official Extensions

Here is a list of officially supported Harlem plugins. These plugins are not designed to suit every use-case but instead add basic functionality for common use-cases.

- [Action](action.html) (`@harlem/extension-action`) - Extends a store to support cancellable async actions.
- [History](history.html) (`@harlem/extension-history`) - Extends a store to support undo and redo capabilities.
- [Lazy](lazy.html) (`@harlem/extension-lazy`) - Extends a store to support lazy async getters.
- [Reset](reset.html) (`@harlem/extension-reset`) - Extends a store to support resetting a store back to it's original state.
- [Snapshot](snapshot.html) (`@harlem/extension-snapshot`) - Extends a store to support taking snapshots of state and applying it at a later stage.
- [Storage](storage.html) (`@harlem/extension-storage`) - Extends a store to support synchronising state to/from `localStorage` or `sessionStorage`.
- [Trace](trace.html) (`@harlem/extension-trace`) - Extends a store to support tracing granular changes to state during mutations. Useful for auditing during development.
- [Transaction](transaction.html) (`@harlem/extension-transaction`) - Extends a store to support rolling back multiple mutations if one fails.

If you require functionality to suit a specific use-case you can write your own extension. See [Writing your own extension](#writing-your-own-extension) below.

If you feel that there is a piece of common functionality that should be included as an official Harlem extension please open an issue providing a description of the extension, the intended API and, if possible, a working example in a codesandbox.

## Writing your own extension
Loading

0 comments on commit 97dc773

Please sign in to comment.