8 | [](http://standardjs.com/)
9 |
10 | ## Install
11 |
12 | ```sh
13 | npm install --save kasia-plugin-wp-api-all-terms
14 | ```
15 |
16 | ## Import
17 |
18 | ```js
19 | // ES2015
20 | import KasiaWpApiAllTermsPlugin from 'kasia-plugin-wp-api-all-terms'
21 | ```
22 |
23 | ```js
24 | // CommonJS
25 | var KasiaWpApiAllTermsPlugin = require('kasia-plugin-wp-api-all-terms')
26 | ```
27 |
28 | ## Initialise
29 |
30 | Pass to Kasia via the `plugins` option:
31 |
32 | ```js
33 | const { kasiaReducer, kasiaSagas } = Kasia({
34 | WP,
35 | plugins: [KasiaWpApiAllTermsPlugin]
36 | })
37 | ```
38 |
39 | ## Actions
40 |
41 | Import:
42 |
43 | ```js
44 | import { fetchTerms } from 'kasia-plugin-wp-api-all-terms'
45 | ```
46 |
47 | ### `fetchTerms()`
48 |
49 | Get all terms available.
50 |
51 | Terms will be available at `store.wordpress.terms`, for example:
52 |
53 | ```js
54 | {
55 | categories: [{
56 | term_id: 3
57 | }],
58 | tags: [{
59 | term_id: 16
60 | }],
61 | technologies: [{
62 | term_id: 15
63 | }]
64 | }
65 | ```
66 |
67 | ## Universal Applications
68 |
69 | ```js
70 | import kasiaPluginWpApiAllTerms from 'kasia-plugin-wp-api-all-terms'
71 | ```
72 |
73 | ### `kasiaPluginWpApiAllTerms.preload(WP)`
74 |
75 | - __WP__ {Object} WP API instance
76 |
77 | Returns a single saga generator.
78 |
79 | ## Contributing
80 |
81 | All pull requests and issues welcome!
82 |
83 | - When submitting an issue please provide adequate steps to reproduce the problem.
84 | - PRs must be made using the `standard` code style.
85 | - PRs must update the version of the library according to [semantic versioning](http://semver.org/).
86 |
87 | If you're not sure how to contribute, check out Kent C. Dodds'
88 | [great video tutorials on egghead.io](https://egghead.io/lessons/javascript-identifying-how-to-contribute-to-an-open-source-project-on-github)!
89 |
90 | ## Author & License
91 |
92 | `kasia-plugin-wp-api-all-terms` was created by [Outlandish](https://twitter.com/outlandish) and is released under the MIT license.
93 |
--------------------------------------------------------------------------------
/test/plugin.js:
--------------------------------------------------------------------------------
1 | /* global jest:false, expect:false */
2 |
3 | jest.disableAutomock()
4 |
5 | import Wpapi from 'wpapi'
6 | import { combineReducers, createStore } from 'redux'
7 | import { spawn } from 'redux-saga/effects'
8 |
9 | import kasia from '../src'
10 | import { ActionTypes } from '../src/constants'
11 | import { acknowledgeRequest, completeRequest } from '../src/redux/actions'
12 | import postJson from './__fixtures__/wp-api-responses/post'
13 |
14 | const testActionType = 'kasia/TEST_ACTION'
15 |
16 | let countHitPluginOwnActionTypeReducer = 0
17 | let countHitPluginNativeActionTypeReducer = 0
18 |
19 | function pluginSaga () {}
20 |
21 | function setup () {
22 | const plugin = () => ({
23 | sagas: [pluginSaga],
24 | reducers: {
25 | [testActionType]: (state) => {
26 | countHitPluginOwnActionTypeReducer++
27 | return state
28 | },
29 | [ActionTypes.RequestComplete]: (state) => {
30 | countHitPluginNativeActionTypeReducer++
31 | return state
32 | }
33 | }
34 | })
35 |
36 | const { kasiaReducer, kasiaSagas } = kasia({
37 | wpapi: new Wpapi({ endpoint: '' }),
38 | plugins: [plugin]
39 | })
40 |
41 | const rootReducer = combineReducers(kasiaReducer)
42 | const store = createStore(rootReducer)
43 |
44 | return { store, kasiaSagas }
45 | }
46 |
47 | describe('Plugin', () => {
48 | const { store, kasiaSagas } = setup()
49 |
50 | it('should run untouched native action type', () => {
51 | store.dispatch(acknowledgeRequest({ type: ActionTypes.RequestCreatePost, id: 0 }))
52 | expect(store.getState().wordpress.queries['0']).toBeTruthy()
53 | })
54 |
55 | describe('with native action type', () => {
56 | it('should hit native action handler', () => {
57 | store.dispatch(completeRequest(0, postJson))
58 | expect(store.getState().wordpress.queries['0']).toBeTruthy()
59 | })
60 |
61 | it('should hit third-party action handler for native action type', () => {
62 | expect(countHitPluginNativeActionTypeReducer).toEqual(1)
63 | })
64 | })
65 |
66 | describe('with new action type', () => {
67 | it('should hit third-party action handler for third-party action type', () => {
68 | store.dispatch({ type: testActionType })
69 | expect(countHitPluginOwnActionTypeReducer).toEqual(1)
70 | })
71 |
72 | it('should add the plugin saga to sagas array', () => {
73 | const actual = kasiaSagas.toString()
74 | const expected = spawn(pluginSaga).toString()
75 | expect(actual).toContain(expected)
76 | })
77 | })
78 | })
79 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects'
2 |
3 | import debug, { toggleDebug } from './util/debug'
4 | import makeReducer from './redux/reducer'
5 | import invariants from './invariants'
6 | import contentTypesManager from './util/contentTypesManager'
7 | import queryCounter from './util/queryCounter'
8 | import { default as _runSagas } from './util/runSagas'
9 | import { setWP } from './wpapi'
10 | import { watchRequests } from './redux/sagas'
11 | import { rewind as connectRewind } from './connect'
12 |
13 | export * from './util/preload'
14 |
15 | export default kasia
16 |
17 | // Components of the toolset that are extensible via plugins
18 | const COMPONENTS_BASE = {
19 | sagas: [watchRequests],
20 | reducers: {}
21 | }
22 |
23 | /** Reset the internal query counter and first mount bool.
24 | * Should be called before each SSR. */
25 | kasia.rewind = function rewind () {
26 | connectRewind()
27 | queryCounter.reset()
28 | }
29 |
30 | /** Run all `sagas` until they are complete. */
31 | export function runSagas (store, sagas) {
32 | kasia.rewind()
33 | return _runSagas(store, sagas)
34 | }
35 |
36 | /**
37 | * Configure Kasia.
38 | * @param {WP} opts.wpapi Instance of node-wpapi
39 | * @param {String} [opts.keyEntitiesBy] Property used to key entities in the store
40 | * @param {Boolean} [opts.debug] Log debug statements
41 | * @param {Array} [opts.plugins] Kasia plugins
42 | * @param {Array} [opts.contentTypes] Custom content type definition objects
43 | * @returns {Object} Kasia reducer
44 | */
45 | function kasia (opts = {}) {
46 | let {
47 | WP,
48 | wpapi,
49 | debug: _debug = false,
50 | keyEntitiesBy = 'id',
51 | plugins: userPlugins = [],
52 | contentTypes = []
53 | } = opts
54 |
55 | toggleDebug(_debug)
56 |
57 | debug('initialised with: ', opts)
58 |
59 | if (WP) {
60 | console.log('[kasia] config option `WP` is replaced by `wpapi` in v4.')
61 | wpapi = WP
62 | }
63 |
64 | invariants.isWpApiInstance(setWP(wpapi))
65 | invariants.isKeyEntitiesByOption(keyEntitiesBy)
66 | invariants.isArray('plugins', userPlugins)
67 | invariants.isArray('contentTypes', contentTypes)
68 |
69 | contentTypes.forEach((type) => contentTypesManager.register(type))
70 |
71 | // Merge plugins into internal sagas array and reducers object
72 | const { sagas, reducers } = userPlugins.reduce((components, p, i) => {
73 | const isArr = p instanceof Array
74 | invariants.isPlugin('plugin at index ' + i, isArr ? p[0] : p)
75 | const { sagas, reducers } = isArr ? p[0](wpapi, p[1] || {}, opts) : p(wpapi, {}, opts)
76 | components.sagas.push(...sagas)
77 | Object.assign(components.reducers, reducers)
78 | return components
79 | }, COMPONENTS_BASE)
80 |
81 | return {
82 | kasiaReducer: makeReducer({ keyEntitiesBy, reducers }),
83 | kasiaSagas: sagas.map((saga) => effects.spawn(saga))
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/test/connect/connectWpQuery.js:
--------------------------------------------------------------------------------
1 | /* global jest:false, expect:false */
2 |
3 | jest.disableAutomock()
4 |
5 | import React from 'react'
6 | import merge from 'lodash.merge'
7 | import { mount } from 'enzyme'
8 |
9 | import queryCounter from '../../src/util/queryCounter'
10 | import { wrapQueryFn } from '../../src/connect'
11 | import { ActionTypes } from '../../src/constants'
12 |
13 | import '../__mocks__/WP'
14 | import initialState from '../__mocks__/states/initial'
15 | import multipleBooks from '../__mocks__/states/multipleBooks'
16 | import bookJson from '../__fixtures__/wp-api-responses/book'
17 | import CustomQueryComponent, { target, queryFn } from '../__mocks__/components/CustomQuery'
18 |
19 | const CustomQuery = (props, store) => mount(Loading...
')
44 | })
45 |
46 | it('should render loading message with incomplete query', () => {
47 | const query = { id: 0, complete: false, OK: null, prepared: true }
48 | const state = merge({}, initialState('id'), { wordpress: { queries: { 0: query } } })
49 | const { store } = setup(state)
50 | const rendered = CustomQuery({ params: { id: 10 } }, store)
51 | expect(rendered.html()).toEqual('Loading...
')
52 | })
53 |
54 | it('should render prepared post data with complete query', () => {
55 | const query = { prepared: true }
56 | const { store } = setup(merge({}, multipleBooks, { wordpress: { queries: { 0: query } } }))
57 | const rendered = CustomQuery({ params: { id: bookJson.id } }, store)
58 | expect(rendered.html()).toEqual(`${bookJson.slug}
`)
59 | })
60 |
61 | it('should request data without query', () => {
62 | const { store } = setup(initialState('id'))
63 | CustomQuery({ params: { id: 10 } }, store)
64 | const action = store.dispatch.mock.calls[0][0]
65 | expect(action.id).toEqual(0)
66 | expect(action.type).toEqual(ActionTypes.RequestCreateQuery)
67 | expect(action.queryFn.toString()).toEqual(wrapQueryFn(queryFn).toString())
68 | })
69 | })
70 |
--------------------------------------------------------------------------------
/packages/kasia-plugin-wp-api-menus/README.md:
--------------------------------------------------------------------------------
1 | # Kasia Plugin WP-API Menus
2 |
3 | > Adds support for the WP-API menus to Kasia
4 |
5 | Made with ❤ at [@outlandish](http://www.twitter.com/outlandish)
6 |
7 | 
8 | [](http://standardjs.com/)
9 |
10 | ## Install
11 |
12 | ```sh
13 | npm install --save kasia-plugin-wp-api-menus
14 | ```
15 |
16 | ## Import
17 |
18 | ```js
19 | // ES2015
20 | import KasiaWpApiMenusPlugin from 'kasia-plugin-wp-api-menus'
21 | ```
22 |
23 | ```js
24 | // CommonJS
25 | var KasiaWpApiMenusPlugin = require('kasia-plugin-wp-api-menus')
26 | ```
27 |
28 | ## Initialise
29 |
30 | Pass to Kasia via the `plugins` option:
31 |
32 | ```js
33 | const { kasiaReducer, kasiaSagas } = Kasia({
34 | WP,
35 | plugins: [KasiaWpApiMenusPlugin]
36 | })
37 | ```
38 |
39 | ## Action creators
40 |
41 | ```js
42 | import {
43 | fetchMenus, fetchMenu,
44 | fetchThemeLocations, fetchThemeLocation
45 | } from 'kasia-plugin-wp-api-menus'
46 | ```
47 |
48 | Dispatch the returned action objects with `store.dispatch(
8 | [](http://standardjs.com/)
9 |
10 | ## Install
11 |
12 | ```sh
13 | npm install --save kasia-plugin-wp-api-response-modify
14 | ```
15 |
16 | ## Import
17 |
18 | ```js
19 | // ES2015
20 | import KasiaWpApiResponseModifyPlugin from 'kasia-plugin-wp-api-response-modify'
21 | ```
22 |
23 | ```js
24 | // CommonJS
25 | var KasiaWpApiResponseModifyPlugin = require('kasia-plugin-wp-api-response-modify')
26 | ```
27 |
28 | ## Initialise
29 |
30 | Pass to Kasia via the `plugins` option:
31 |
32 | ```js
33 | const { kasiaReducer, kasiaSagas } = Kasia({
34 | WP,
35 | plugins: [KasiaWpApiResponseModifyPlugin]
36 | })
37 | ```
38 |
39 | ## The Shape of Things
40 |
41 | With this plugin Kasia restructures the [shape of things](https://www.youtube.com/watch?v=Zn2JFlteeJ0) returned from the WP-API.
42 |
43 | The changes made to the data are all effects available in the
44 | [`wp-api-response-modify`](https://github.com/outlandishideas/wp-api-response-modify) library.
45 |
46 | ### Why?
47 |
48 | The JSON returned from WP-API contains such things as objects with a single property (e.g. objects with `rendered`)
49 | and meta data property names prefixed with an underscore (e.g. `_links`).
50 |
51 | ### What changes should I be aware of?
52 |
53 | - All property names are camel-cased.
54 |
55 | ```js
56 | "featured_media" => "featuredMedia"
57 | ```
58 |
59 | - Links are removed.
60 |
61 | ```js
62 | { title: 'Wow what an amazing title!', _links: {}, ... }
63 | // becomes...
64 | { title: 'Wow what an amazing title!', ... }
65 | ```
66 |
67 | - Objects that have a single property `'rendered'` are flattened.
68 |
69 | ```js
70 | { content: { rendered: 'Hello, World!
' }, ... } 71 | // becomes... 72 | { content: 'Hello, World!
', ... } 73 | ``` 74 | 75 | - Content types are normalised using [`normalizr`](https://github.com/paularmstrong/normalizr). 76 | This means that any embedded content data is made available on the store within its respective content type collection. 77 | For example: 78 | 79 | ```js 80 | { 81 | posts: {}, 82 | users: {}, 83 | pages: {}, 84 | news: {}, // custom content type 85 | ... 86 | } 87 | ``` 88 | 89 | ## Contributing 90 | 91 | All pull requests and issues welcome! 92 | 93 | - When submitting an issue please provide adequate steps to reproduce the problem. 94 | - PRs must be made using the `standard` code style. 95 | - PRs must update the version of the library according to [semantic versioning](http://semver.org/). 96 | 97 | If you're not sure how to contribute, check out Kent C. Dodds' 98 | [great video tutorials on egghead.io](https://egghead.io/lessons/javascript-identifying-how-to-contribute-to-an-open-source-project-on-github)! 99 | 100 | ## Author & License 101 | 102 | `kasia-plugin-wp-api-response-modify` was created by [Outlandish](https://twitter.com/outlandish) and is released under the MIT license. 103 | -------------------------------------------------------------------------------- /src/invariants.js: -------------------------------------------------------------------------------- 1 | const NODE_WPAPI_GITHUB_URL = 'http://bit.ly/2adfKKg' 2 | const KASIA_URL = 'http://kasia.io' 3 | 4 | function invariant (predicate, message, ...args) { 5 | if (!predicate) { 6 | const interpolated = args.reduce((str, arg) => str.replace(/%s/, arg), message) 7 | const err = new Error('[kasia] ' + interpolated) 8 | err.framesToPop = 1 9 | throw err 10 | } 11 | } 12 | 13 | export default { 14 | isString: (name, value) => invariant( 15 | typeof value === 'string', 16 | 'Expecting %s to be string, got "%s".', 17 | name, typeof value 18 | ), 19 | isFunction: (name, value) => invariant( 20 | typeof value === 'function', 21 | 'Expecting %s to be function, got "%s".', 22 | name, typeof value 23 | ), 24 | isPlugin: (name, value) => invariant( 25 | typeof value === 'function', 26 | 'Expecting %s to be function, got "%s". ' + 27 | 'Please file an issue with the plugin if you ' + 28 | 'think there might be a problem with it.', 29 | name, typeof value 30 | ), 31 | isArray: (name, value) => invariant( 32 | Array.isArray(value), 33 | 'Expecting %s to be array, got "%s".', 34 | name, typeof value 35 | ), 36 | isBoolean: (name, value) => invariant( 37 | typeof value === 'object', 38 | 'Expecting %s to be boolean, got "%s".', 39 | name, typeof value 40 | ), 41 | isWpApiInstance: (value = {}) => invariant( 42 | typeof value.registerRoute === 'function', 43 | 'Expecting WP to be instance of `node-wpapi`. ' + 44 | `See documentation: ${NODE_WPAPI_GITHUB_URL}.` 45 | ), 46 | isIdentifierArg: (identifier) => invariant( 47 | typeof identifier === 'function' || typeof identifier === 'string' || typeof identifier === 'number', 48 | 'Expecting id given to connectWpPost to be function/string/number, got "%s".', 49 | typeof identifier 50 | ), 51 | isValidContentTypeObject: (obj) => invariant( 52 | typeof obj.name === 'string' && 53 | typeof obj.plural === 'string' && 54 | typeof obj.slug === 'string', 55 | 'Invalid content type object. ' + 56 | `See documentation: ${KASIA_URL}.` 57 | ), 58 | isValidContentType: (contentTypeOptions, name, checkStr) => invariant( 59 | typeof contentTypeOptions !== 'undefined', 60 | 'Content type "%s" is not recognised. ' + 61 | 'Pass built-ins from `kasia/types`, e.g. `connectWpPost(Post, ...)`. ' + 62 | 'Pass the name of custom content types, e.g. `connectWpPost("Book", ...)`. ' + 63 | 'Check %s.', 64 | name, checkStr 65 | ), 66 | isNewContentType: (typesMap, contentType) => invariant( 67 | typesMap && !typesMap.get(contentType.name), 68 | 'Content type with name "%s" already exists.', 69 | contentType.name 70 | ), 71 | isNotWrapped: (target, displayName) => invariant( 72 | !target.__kasia, 73 | '%s is already wrapped by Kasia.', 74 | displayName 75 | ), 76 | isIdentifierValue: (id) => invariant( 77 | typeof id === 'string' || typeof id === 'number', 78 | 'The final identifier is invalid. ' + 79 | 'Expecting a string or number, got "%s".', 80 | typeof id 81 | ), 82 | hasWordpressObject: (wordpress) => invariant( 83 | wordpress, 84 | 'No `wordpress` object on the store. ' + 85 | 'Is your store configured correctly? ' + 86 | `See documentation ${KASIA_URL}.`, 87 | typeof wordpress 88 | ), 89 | queryHasError: (query, displayName) => { 90 | if (query && query.error) { 91 | console.log(`[kasia] error in query for ${displayName || 'unknown component'}:\n` + query.error) 92 | } 93 | }, 94 | isKeyEntitiesByOption: (keyEntitiesBy) => invariant( 95 | keyEntitiesBy === 'slug' || keyEntitiesBy === 'id', 96 | 'Expecting keyEntitiesBy to be "slug" or "id", got "%s".', 97 | keyEntitiesBy 98 | ) 99 | } 100 | -------------------------------------------------------------------------------- /packages/kasia-plugin-wp-api-menus/src/index.js: -------------------------------------------------------------------------------- 1 | import { take, call, put } from 'redux-saga/effects' 2 | import merge from 'lodash.merge' 3 | 4 | import ActionTypes from './constants/ActionTypes' 5 | 6 | export * from './actions' 7 | 8 | export default kasiaPluginWpApiMenus 9 | 10 | // The default wp-api-menus namespace in the WP-API. 11 | const defaultRoute = 'wp-api-menus/v2' 12 | 13 | // Set of action type names that is used to capture 14 | // only actions of these type in the reducer. 15 | const requestTypes = [ 16 | ActionTypes.REQUEST_MENU, 17 | ActionTypes.REQUEST_MENUS, 18 | ActionTypes.REQUEST_LOCATION, 19 | ActionTypes.REQUEST_LOCATIONS 20 | ] 21 | 22 | const reducer = { 23 | // RECEIVE DATA 24 | // Place data in the store according to the type of data that was requested. 25 | [ActionTypes.RECEIVE_DATA]: (state, action) => { 26 | switch (action.request) { 27 | case ActionTypes.REQUEST_MENU: 28 | return merge({}, state, { menus: { [action.id]: action.data } }) 29 | case ActionTypes.REQUEST_MENUS: 30 | return merge({}, state, { menus: action.data }) 31 | case ActionTypes.REQUEST_LOCATION: 32 | return merge({}, state, { menuLocations: { [action.id]: action.data } }) 33 | case ActionTypes.REQUEST_LOCATIONS: 34 | return merge({}, state, { menuLocations: action.data }) 35 | default: 36 | return state 37 | } 38 | } 39 | } 40 | 41 | /** 42 | * Perform the actual request for data from wp-api-menus. 43 | * @param {Object} WP Instance of `wpapi` 44 | * @param {Object} action Action object 45 | * @returns {Promise} Resolves to response data 46 | */ 47 | function fetch (WP, action) { 48 | switch (action.type) { 49 | case ActionTypes.REQUEST_MENU: 50 | return typeof action.id === 'string' 51 | ? WP.menus().slug(action.id).get() 52 | : WP.menus().id(action.id).get() 53 | case ActionTypes.REQUEST_MENUS: 54 | return WP.menus().get() 55 | case ActionTypes.REQUEST_LOCATION: 56 | return WP.locations().id(action.id).get() 57 | case ActionTypes.REQUEST_LOCATIONS: 58 | return WP.locations().get() 59 | default: 60 | throw new Error(`Unknown request type "${action.request}".`) 61 | } 62 | } 63 | 64 | /** 65 | * Produce the plugin's own sagas array. 66 | * A single saga that deals with requests for wp-api-menus data. 67 | * @param {Object} WP Instance of `wpapi` 68 | * @returns {Array} Array of sagas 69 | */ 70 | function makeSagas (WP) { 71 | return [function * fetchSaga () { 72 | while (true) { 73 | const action = yield take((action) => requestTypes.indexOf(action.type) !== -1) 74 | yield fetchResource(WP, action) 75 | } 76 | }] 77 | } 78 | 79 | /** 80 | * Orchestrate a request for wp-api-menus data. 81 | * @param {Object} WP Instance of `wpapi` 82 | * @param {Object} action Action object 83 | */ 84 | function * fetchResource (WP, action) { 85 | const { id, type } = action 86 | const data = yield call(fetch, WP, action) 87 | yield put({ type: ActionTypes.RECEIVE_DATA, request: type, data, id }) 88 | } 89 | 90 | /** 91 | * Initialise the plugin, returning the plugins own reducer and sagas. 92 | * @param {Object} WP Instance of `wpapi` 93 | * @param {Object} config User's plugin configuration 94 | * @returns {Object} Plugin reducer and sagas 95 | */ 96 | function kasiaPluginWpApiMenus (WP, config) { 97 | config.route = config.route || defaultRoute 98 | 99 | WP.menus = WP.registerRoute(config.route, '/menus/(?PMolestiae aliquam eligendi facere officiis quae impedit eos. Sapiente quas non eum aut. Alias quam similique odio in cupiditate. Ut aut aut delectus officia iusto error maxime neque.
\nConsequatur eius ut aut vero culpa. Beatae delectus qui culpa occaecati maiores. Tempora voluptas quo inventore temporibus consectetur vitae. Voluptatem sit expedita et harum dolores. Dolorum magni sequi officiis temporibus.
\nPerferendis dolor sit rem. Omnis repudiandae quia minima animi sequi. Aspernatur recusandae quod ea tempora.
\n' 12 | }, 13 | 'link': 'http://demo.wp-api.org/2015/05/17/voluptates-quis-ut-qui/#comment-16', 14 | 'status': 'approved', 15 | 'type': 'comment', 16 | 'author_avatar_urls': { 17 | '24': 'http://0.gravatar.com/avatar/fe6e007015afc17a401d8ea853a3e05c?s=24&d=mm&r=g', 18 | '48': 'http://0.gravatar.com/avatar/fe6e007015afc17a401d8ea853a3e05c?s=48&d=mm&r=g', 19 | '96': 'http://0.gravatar.com/avatar/fe6e007015afc17a401d8ea853a3e05c?s=96&d=mm&r=g' 20 | }, 21 | '_links': { 22 | 'self': [{ 23 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/comments/16' 24 | }], 25 | 'collection': [{ 26 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/comments' 27 | }], 28 | 'up': [{ 29 | 'embeddable': true, 30 | 'post_type': 'post', 31 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/posts/43' 32 | }] 33 | }, 34 | '_embedded': { 35 | 'up': [{ 36 | 'id': 43, 37 | 'date': '2015-05-17T12:30:17', 38 | 'slug': 'voluptates-quis-ut-qui', 39 | 'type': 'post', 40 | 'link': 'http://demo.wp-api.org/2015/05/17/voluptates-quis-ut-qui/', 41 | 'title': { 42 | 'rendered': 'Voluptates quis ut qui' 43 | }, 44 | 'excerpt': { 45 | 'rendered': 'Omnis quia quam aliquid fugit. Saepe voluptas excepturi ratione corrupti cum. Animi asperiores qui nulla ut mollitia. Et neque eos aut magni et id vel Modi consequatur et qui perferendis. Dolor adipisci quo. Sequi autem illo deserunt excepturi enim ut. Vel dolores aperiam et ullam facilis. Maiores illo quis dolorem iure fugit non Magnam et […]
\n' 46 | }, 47 | 'author': 44, 48 | '_links': { 49 | 'self': [{ 50 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/posts/43' 51 | }], 52 | 'collection': [{ 53 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/posts' 54 | }], 55 | 'about': [{ 56 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/types/post' 57 | }], 58 | 'author': [{ 59 | 'embeddable': true, 60 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/users/44' 61 | }], 62 | 'replies': [{ 63 | 'embeddable': true, 64 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/comments?post=43' 65 | }], 66 | 'version-history': [{ 67 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/posts/43/revisions' 68 | }], 69 | 'wp:featuredmedia': [{ 70 | 'embeddable': true, 71 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/media/42' 72 | }], 73 | 'wp:attachment': [{ 74 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/media?parent=43' 75 | }], 76 | 'wp:term': [{ 77 | 'taxonomy': 'category', 78 | 'embeddable': true, 79 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/categories?post=43' 80 | }, 81 | { 82 | 'taxonomy': 'post_tag', 83 | 'embeddable': true, 84 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/tags?post=43' 85 | }], 86 | 'curies': [{ 87 | 'name': 'wp', 88 | 'href': 'https://api.w.org/{rel}', 89 | 'templated': true 90 | }] 91 | } 92 | }] 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /test/util/normalise.js: -------------------------------------------------------------------------------- 1 | /* global jest:false, expect:false */ 2 | 3 | jest.disableAutomock() 4 | 5 | import '../__mocks__/WP' 6 | import normalise from '../../src/util/normalise' 7 | import contentTypesManager from '../../src/util/contentTypesManager' 8 | import schemasManager from '../../src/util/schemasManager' 9 | import { ContentTypes } from '../../src/constants' 10 | 11 | function setup () { 12 | const testKeyById = true 13 | const testKeyBySlug = true 14 | 15 | contentTypesManager.register({ 16 | name: 'book', 17 | plural: 'books', 18 | slug: 'books' 19 | }) 20 | 21 | return { 22 | [ContentTypes.Category]: { 23 | // The expected entity collections on the store 24 | collections: ['categories'], 25 | // Whether to test normalisation by 'id' attr. 26 | testKeyById, 27 | // Whether to test normalisation by 'slug' attr. 28 | testKeyBySlug 29 | }, 30 | [ContentTypes.Comment]: { 31 | collections: ['comments'], 32 | testKeyById 33 | }, 34 | [ContentTypes.Media]: { 35 | collections: ['media'], 36 | testKeyById 37 | }, 38 | [ContentTypes.Page]: { 39 | collections: ['pages'], 40 | testKeyById, 41 | testKeyBySlug 42 | }, 43 | [ContentTypes.Post]: { 44 | collections: ['posts'], 45 | testKeyById, 46 | testKeyBySlug 47 | }, 48 | [ContentTypes.PostStatus]: { 49 | collections: ['statuses'], 50 | testKeyBySlug 51 | }, 52 | [ContentTypes.PostType]: { 53 | collections: ['types'], 54 | testKeyBySlug 55 | }, 56 | [ContentTypes.Tag]: { 57 | collections: ['tags'], 58 | testKeyById, 59 | testKeyBySlug 60 | }, 61 | [ContentTypes.Taxonomy]: { 62 | collections: ['taxonomies'], 63 | testKeyBySlug 64 | }, 65 | [ContentTypes.User]: { 66 | collections: ['users'], 67 | testKeyById, 68 | testKeyBySlug 69 | }, 70 | book: { 71 | collections: ['books'], 72 | testKeyById, 73 | testKeyBySlug 74 | } 75 | } 76 | } 77 | 78 | function fixtures (contentType) { 79 | const first = require('../__fixtures__/wp-api-responses/' + contentType).default 80 | 81 | // Imitate another entity by modifying identifiers 82 | const second = Object.assign({}, first, { 83 | id: first.id + 1, 84 | slug: first.slug + '1' 85 | }) 86 | 87 | return { 88 | first, 89 | second, 90 | multiple: [first, second] 91 | } 92 | } 93 | 94 | describe('util/normalise', () => { 95 | const tests = setup() 96 | 97 | Object.keys(tests).forEach((contentType) => { 98 | describe('Normalise ' + contentType, () => { 99 | const { plural } = contentTypesManager.get(contentType) 100 | const { first, second, multiple } = fixtures(contentType) 101 | const { collections, testKeyBySlug, testKeyById } = tests[contentType] 102 | 103 | afterEach(() => schemasManager.__flush__()) 104 | 105 | if (testKeyById) { 106 | it(`should normalise single "${contentType}" by id`, () => { 107 | const result = normalise(first, 'id') 108 | const actual = Object.keys(result) 109 | expect(actual).toEqual(collections) 110 | }) 111 | 112 | it(`should normalise multiple "${contentType}" by id`, () => { 113 | const result = normalise(multiple, 'id') 114 | const actual = Object.keys(result[plural]) 115 | const expected = [first.id, second.id].map(String) 116 | expect(actual).toEqual(expected) 117 | }) 118 | } 119 | 120 | if (testKeyBySlug) { 121 | it(`should normalise single "${contentType}" by slug`, () => { 122 | const result = normalise(first, 'slug') 123 | const actual = Object.keys(result) 124 | expect(actual).toEqual(collections) 125 | }) 126 | 127 | it(`should normalise multiple "${contentType}" by slug`, () => { 128 | const result = normalise(multiple, 'slug') 129 | const actual = Object.keys(result[plural]) 130 | const expected = [first.slug, second.slug] 131 | expect(actual).toEqual(expected) 132 | }) 133 | } 134 | }) 135 | }) 136 | }) 137 | -------------------------------------------------------------------------------- /src/redux/reducer.js: -------------------------------------------------------------------------------- 1 | import merge from 'lodash.merge' 2 | import isNode from 'is-node-fn' 3 | 4 | import pickEntityIds from '../util/pickEntityIds' 5 | import normalise from '../util/normalise' 6 | import { ActionTypes } from '../constants' 7 | 8 | export const INITIAL_STATE = { 9 | // WP-API request/response metadata are stored here 10 | queries: {}, 11 | // Entities are normalised and stored here 12 | entities: {} 13 | } 14 | 15 | /** 16 | * Merge all native and plugin reducers such that a single function reduces for a single action type. 17 | * @param {Object} reducers Plugin reducers 18 | * @param {Function} normaliser Function to normalise response data 19 | * @returns {Object} Reducer object 20 | */ 21 | function mergeNativeAndThirdPartyReducers (reducers, normaliser) { 22 | const baseReducer = { 23 | [ActionTypes.AckRequest]: [acknowledgeReducer], 24 | [ActionTypes.RequestComplete]: [completeReducer(normaliser)], 25 | [ActionTypes.RequestFail]: [failReducer] 26 | } 27 | 28 | // Group reducers by their action type 29 | const reducersByActionType = Object.keys(reducers) 30 | .reduce(function groupByActionType (reducer, actionType) { 31 | reducer[actionType] = [].concat( 32 | reducer[actionType] || [], 33 | reducers[actionType] || [] 34 | ) 35 | return reducer 36 | }, baseReducer) 37 | 38 | const reducer = {} 39 | 40 | // Produce a single function for each action type 41 | for (const actionType in reducersByActionType) { 42 | if (reducersByActionType[actionType].length > 1) { 43 | // Call each reducer function in succession, passing the state returned from each to the next 44 | reducer[actionType] = (state, action) => { 45 | return reducersByActionType[actionType].reduce((state, fn) => fn(state, action), state) 46 | } 47 | } else { 48 | // Take the first and only function as the whole reducer 49 | reducer[actionType] = reducersByActionType[actionType][0] 50 | } 51 | } 52 | 53 | return reducer 54 | } 55 | 56 | // ACKNOWLEDGE 57 | // Place record of request o 58 | export function acknowledgeReducer (state, action) { 59 | return merge({}, state, { 60 | queries: { 61 | [action.id]: { 62 | id: action.id, 63 | prepared: isNode(), 64 | complete: false, 65 | OK: null 66 | } 67 | } 68 | }) 69 | } 70 | 71 | // COMPLETE 72 | // Place entity on the store; update query record if for component (has an id) 73 | export function completeReducer (normalise) { 74 | return (state_, action) => { 75 | const state = merge({}, state_) 76 | 77 | state.entities = merge( 78 | state.entities, 79 | normalise(action.data) 80 | ) 81 | 82 | // The action id would be null if the preloadQuery method has initiated 83 | // the completeRequest action as they do not need a query in the store 84 | // (there is no component to pick it up). 85 | if (typeof action.id === 'number') { 86 | state.queries[action.id] = { 87 | id: action.id, 88 | entities: pickEntityIds(action.data), 89 | paging: action.data._paging || {}, 90 | prepared: isNode(), 91 | complete: true, 92 | OK: true 93 | } 94 | } 95 | 96 | return state 97 | } 98 | } 99 | 100 | // FAIL 101 | // Update query record only 102 | export function failReducer (state, action) { 103 | return merge({}, state, { 104 | queries: { 105 | [action.id]: { 106 | id: action.id, 107 | error: action.error, 108 | prepared: isNode(), 109 | complete: true, 110 | OK: false 111 | } 112 | } 113 | }) 114 | } 115 | 116 | /** 117 | * Create the aggregate reducer for an instance of Kasia. 118 | * @param {Object} keyEntitiesBy Entity property used as key in store 119 | * @param {Object} reducers Plugin reducers 120 | * @returns {Object} Kasia reducer 121 | */ 122 | export default function createReducer ({ keyEntitiesBy, reducers }) { 123 | const normaliser = (data) => normalise(data, keyEntitiesBy) 124 | const reducer = mergeNativeAndThirdPartyReducers(reducers, normaliser) 125 | const initialState = Object.assign({}, INITIAL_STATE, { keyEntitiesBy }) 126 | 127 | return { 128 | wordpress: function kasiaReducer (state = initialState, action) { 129 | const [ actionNamespace ] = action.type.split('/') 130 | 131 | if (actionNamespace === 'kasia' && action.type in reducer) { 132 | return reducer[action.type](state, action) 133 | } 134 | 135 | return state 136 | } 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Kasia Changelog 2 | 3 | - __v4.0.0__ 4 | 5 | - [BREAKING] WP API responses no longer modified by `wp-api-response-modify` by default. Functionality moved into [`kasia-plugin-wp-api-response-modify`](https://github.com/outlandishideas/kasia/tree/master/packages/kasia-plugin-wp-api-response-modify) plugin. 6 | - [BREAKING] Structure of `props.kasia` object changed: `entities` key is now `data`. This is to ready the library for [#30](https://github.com/outlandishideas/kasia/issues/30), where query result may not be a normalised collection of entities. 7 | - [BREAKING] `shouldUpdate` function is mandatory for `connectWpQuery` decorator. 8 | - [BREAKING] `WP` config option is now `wpapi`. 9 | - [BREAKING] Preloaders renamed and fn signatures changes (see docs). `makePostPreloaderSaga` removed, use `preloadQuery` instead. 10 | - Provide stack trace for captured query errors. ([#37](https://github.com/outlandishideas/kasia/issues/37)) 11 | - Plugins can intercept native reducers, e.g. `kasia-plugin-wp-api-response-modify`. ([#40](https://github.com/outlandishideas/kasia/issues/40)) 12 | - `prepublish` scripts not run on `npm install`. ([#28](https://github.com/outlandishideas/kasia/issues/28)) 13 | - Added `debug` config option, if true lib logs useful lifecycle information to the console. 14 | - Big refactor of library to make codebase more maintainable, manageable. 15 | 16 | --- 17 | 18 | - __v3.2.0__ - _23/09/16_ 19 | 20 | - Implemented safer internal query reconciliation logic such that prepared queries 21 | target their components via their `displayName`. 22 | - Added `options` object parameter to connect decorators, where you can specify explicitly the `displayName` 23 | of the component if it is wrapped by other decorators. 24 | - Fix bug where preloader saga creator utilities in `kasia/util` disrupt prepared query reconciliation 25 | by incrementing prepared query count. (They do not have a corresponding component and so should not be 26 | considered "prepared" queries.) 27 | - Fixed query errors not being added to query object (`error: "undefined"`). 28 | - Log warning about erroneous queries. 29 | 30 | - __v3.1.5__ - _22/09/16_ 31 | 32 | - Replace use of redux's `connect` decorator with access to the store via `context`. 33 | - Quick fix for failed queries sneaking through to data reconciliation stage in decorators. 34 | TODO: implement more complete query error-handling solution. 35 | ([#29](https://github.com/outlandishideas/kasia/issues/29)) 36 | 37 | - __v3.1.2__ - _20/09/16_ 38 | 39 | - Pass state as third argument to `connectWpQuery` query function. 40 | 41 | - __v3.1.1__ - _19/09/16_ 42 | 43 | - Fix bug where `wordpress` object removed from props during comparison to determine if 44 | a request for new data should be made in `connectWpQuery`. 45 | 46 | - __v3.1.0__ - _09/09/16_ 47 | 48 | - Additional preloader saga creators for loading WP data into the store when server-side rendering: 49 | `makeQueryPreloaderSaga` and `makePostPreloaderSaga`. 50 | 51 | - __v3.0.0__ - _31/08/16_ 52 | 53 | - [BREAKING] Fix bug in Universal Application solution that prevented components picking 54 | up prepared query data on the client. Also involves change in API that means `ConnectComponent.makePreloader` returns array 55 | immediately instead of a function. ([#24](https://github.com/outlandishideas/kasia/issues/24)) 56 | - Improved test coverage of universal application solution. ([#26](https://github.com/outlandishideas/kasia/issues/26)) 57 | - Additional utility export `kasia/util`, currently only exporting `makePreloaderSaga()` for use with server-side rendering. 58 | - Improved developer feedback. ([#4](https://github.com/outlandishideas/kasia/issues/4), [#24](https://github.com/outlandishideas/kasia/issues/23)) 59 | - Updates to README: better documentation of Universal Application solution. ([#25](https://github.com/outlandishideas/kasia/issues/25)) 60 | - Update to latest version of Jest. 61 | 62 | --- 63 | 64 | - __v2.4.0__ - _10/08/16_ 65 | 66 | - Mixin `node-wpapi`'s available mixins to internal calls to `registerRoute` by default in order 67 | that filtering can be performed on custom content types, e.g. `news.filter(Loading...
')
58 | })
59 |
60 | it('should dispatch RequestCreatePost', () => {
61 | const action = store.dispatch.mock.calls[0][0]
62 | expect(action.type).toEqual(ActionTypes.RequestCreatePost)
63 | expect(action.contentType).toEqual('post')
64 | expect(action.identifier).toEqual(postJson.id)
65 | expect(action.id).toEqual(0)
66 | })
67 |
68 | it('should render post title', () => {
69 | const query = { complete: true, OK: true, entities: [postJson.id] }
70 | state = merge({}, stateMultipleEntities, { wordpress: { queries: { 0: query } } })
71 | rendered.update() // Fake store update from completed request
72 | expect(rendered.html()).toEqual('Architecto enim omnis repellendus
')
73 | })
74 |
75 | it('should update to new entity that exists in store straight away', () => {
76 | const nextProps = { params: { id: postJson.id + 1 } }
77 | rendered.setProps(nextProps)
78 | expect(rendered.html()).toEqual('new title
')
79 | })
80 |
81 | it('should dispatch RequestCreatePost for entity that is not in store', () => {
82 | const nextProps = { params: { id: 100 } }
83 | rendered.setProps(nextProps)
84 | expect(rendered.html()).toEqual('Loading...
')
85 |
86 | const action = store.dispatch.mock.calls[1][0]
87 | expect(action.type).toEqual(ActionTypes.RequestCreatePost)
88 | expect(action.contentType).toEqual('post')
89 | expect(action.identifier).toEqual(100)
90 | expect(action.id).toEqual(1)
91 | })
92 | })
93 |
94 | describe('with custom content type', () => {
95 | let store
96 | let rendered
97 |
98 | beforeAll(() => {
99 | queryCounter.reset()
100 | const props = { params: { id: bookJson.id } }
101 | state = stateMultipleEntities
102 | store = setup()
103 | rendered = CustomType(props, store)
104 | })
105 |
106 | it('should dispatch RequestCreatePost', () => {
107 | const action = store.dispatch.mock.calls[0][0]
108 | expect(action.type).toEqual(ActionTypes.RequestCreatePost)
109 | expect(action.contentType).toEqual('book')
110 | expect(action.identifier).toEqual(bookJson.id)
111 | expect(action.id).toEqual(0)
112 | })
113 |
114 | it('should render book title', () => {
115 | const query = { complete: true, OK: true, entities: [bookJson.id] }
116 | state = merge({}, stateMultipleEntities, { wordpress: { queries: { 0: query } } })
117 | rendered.update() // Fake store update from completed request
118 | expect(rendered.html()).toEqual('Hello
')
119 | })
120 | })
121 |
122 | // Test that a store keyed by numeric ID can still resolve an
123 | // entity that is fetched using explicit slug identifier
124 | describe('with explicit slug identifier', () => {
125 | let store
126 | let rendered
127 |
128 | beforeAll(() => {
129 | queryCounter.reset()
130 | const props = { params: { id: postJson.id } }
131 | state = stateMultipleEntities
132 | store = setup()
133 | rendered = ExplicitIdentifier(props, store)
134 | })
135 |
136 | it('should dispatch RequestCreatePost', () => {
137 | const action = store.dispatch.mock.calls[0][0]
138 | expect(action.type).toEqual(ActionTypes.RequestCreatePost)
139 | expect(action.contentType).toEqual('post')
140 | expect(action.identifier).toEqual(postJson.slug)
141 | expect(action.id).toEqual(0)
142 | })
143 |
144 | it('should render post title', () => {
145 | const query = { complete: true, OK: true, entities: [postJson.id] }
146 | state = merge({}, stateMultipleEntities, { wordpress: { queries: { 0: query } } })
147 | rendered.update() // Fake store update from completed request
148 | expect(rendered.html()).toEqual('Architecto enim omnis repellendus
')
149 | })
150 | })
151 |
152 | describe('with bad content type', () => {
153 | it('should throw "content type is not recognised" error', () => {
154 | const store = setup(stateMultipleEntities)
155 | const props = { params: { id: postJson.id } }
156 | expect(() => BadContentType(props, store)).toThrowError(/is not recognised/)
157 | })
158 | })
159 | })
160 |
--------------------------------------------------------------------------------
/test/__fixtures__/wp-api-responses/book.js:
--------------------------------------------------------------------------------
1 | // Custom content type
2 | export default {
3 | 'id': 4,
4 | 'date': '2016-07-26T10:45:11',
5 | 'date_gmt': '2016-07-26T09:45:11',
6 | 'guid': {
7 | 'rendered': 'http://localhost/wp/?post_type=books&p=4'
8 | },
9 | 'modified': '2016-07-26T10:45:11',
10 | 'modified_gmt': '2016-07-26T09:45:11',
11 | 'slug': 'hello',
12 | 'type': 'books',
13 | 'link': 'http://localhost/wp/books/hello/',
14 | 'title': {
15 | 'rendered': 'Hello'
16 | },
17 | 'content': {
18 | 'rendered': ''
19 | },
20 | 'featured_media': 0,
21 | '_embedded': {
22 | 'author': [{
23 | 'id': 42,
24 | 'name': 'Sophia',
25 | 'url': 'http://Little.com/fugit-rem-in-consequuntur-perspiciatis-ex',
26 | 'description': 'Cumque esse consequatur facere minus. In tenetur culpa illo sint labore nostrum quis. Explicabo animi explicabo perferendis nesciunt omnis quo sunt nihil. Quod magnam necessitatibus dicta amet omnis aliquid.\r\n\r\nEt dolor consequuntur necessitatibus sequi incidunt est ratione. Unde sint iusto possimus officiis cum molestiae. Nostrum ad illo pariatur et.\r\n\r\nDoloremque neque doloremque voluptas vel voluptas placeat est. Consectetur qui et accusamus.\r\n\r\nCorrupti qui accusamus voluptatum ab architecto sapiente fugit quis. Ut et sit quod ea voluptates nobis. Enim qui eos magnam at.\r\n\r\nQuia error tempora ullam nulla illo sint. Velit perferendis amet facere quia dignissimos. Rerum nihil pariatur eum velit rerum.\r\n\r\nVelit laudantium voluptate nesciunt et cupiditate asperiores. Voluptatem recusandae numquam et neque unde molestiae voluptate. Rerum et harum occaecati quis occaecati voluptas. Sequi qui dolores cumque nostrum ab nostrum.\r\n\r\nExplicabo cum voluptates odit asperiores ut. Ipsam exercitationem eum nostrum qui dolorum sint nulla. Aut perferendis dolorem ab itaque architecto ad enim.\r\n\r\nMinima aut nobis qui enim beatae. Quis quo modi nemo est quam ea inventore. Odit consequatur vitae perferendis mollitia pariatur voluptas ea sit.\r\n\r\nIn qui saepe ducimus labore. Perferendis ducimus quia corporis perspiciatis. Autem nobis explicabo debitis laboriosam tempora aut.',
27 | 'link': 'http://demo.wp-api.org/author/meaghan-willms/',
28 | 'slug': 'meaghan-willms',
29 | 'avatar_urls': {
30 | '24': 'http://2.gravatar.com/avatar/bf432d6e226ae2f791a59ddd2b3f8462?s=24&d=mm&r=g',
31 | '48': 'http://2.gravatar.com/avatar/bf432d6e226ae2f791a59ddd2b3f8462?s=48&d=mm&r=g',
32 | '96': 'http://2.gravatar.com/avatar/bf432d6e226ae2f791a59ddd2b3f8462?s=96&d=mm&r=g'
33 | },
34 | '_links': {
35 | 'self': [{
36 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/users/42'
37 | }],
38 | 'collection': [{
39 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/users'
40 | }]
41 | }
42 | }],
43 | 'wp:featuredmedia': [{
44 | 'id': 15,
45 | 'date': '2015-06-03T22:18:52',
46 | 'slug': 'vero-amet-id-commodi-harum',
47 | 'type': 'attachment',
48 | 'link': 'http://demo.wp-api.org/vero-amet-id-commodi-harum/',
49 | 'title': {
50 | 'rendered': 'Vero amet id commodi harum'
51 | },
52 | 'author': 100,
53 | 'alt_text': '',
54 | 'media_type': 'image',
55 | 'mime_type': 'image/jpeg',
56 | 'media_details': {
57 | 'width': 1080,
58 | 'height': 631,
59 | 'file': '2015/06/0845fa5d-4c5e-3c93-a054-63a976339952.jpg',
60 | 'sizes': {
61 | 'thumbnail': {
62 | 'file': '0845fa5d-4c5e-3c93-a054-63a976339952-150x150.jpg',
63 | 'width': 150,
64 | 'height': 150,
65 | 'mime_type': 'image/jpeg',
66 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/0845fa5d-4c5e-3c93-a054-63a976339952-150x150.jpg'
67 | },
68 | 'medium': {
69 | 'file': '0845fa5d-4c5e-3c93-a054-63a976339952-300x175.jpg',
70 | 'width': 300,
71 | 'height': 175,
72 | 'mime_type': 'image/jpeg',
73 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/0845fa5d-4c5e-3c93-a054-63a976339952-300x175.jpg'
74 | },
75 | 'large': {
76 | 'file': '0845fa5d-4c5e-3c93-a054-63a976339952-1024x598.jpg',
77 | 'width': 1024,
78 | 'height': 598,
79 | 'mime_type': 'image/jpeg',
80 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/0845fa5d-4c5e-3c93-a054-63a976339952-1024x598.jpg'
81 | },
82 | 'full': {
83 | 'file': '0845fa5d-4c5e-3c93-a054-63a976339952.jpg',
84 | 'width': 1080,
85 | 'height': 631,
86 | 'mime_type': 'image/jpeg',
87 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/0845fa5d-4c5e-3c93-a054-63a976339952.jpg'
88 | }
89 | },
90 | 'image_meta': {
91 | 'aperture': 0,
92 | 'credit': 'JOKINROM',
93 | 'camera': '',
94 | 'caption': '',
95 | 'created_timestamp': 1430341682,
96 | 'copyright': '',
97 | 'focal_length': 0,
98 | 'iso': 0,
99 | 'shutter_speed': 0,
100 | 'title': '',
101 | 'orientation': 0
102 | }
103 | },
104 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/0845fa5d-4c5e-3c93-a054-63a976339952.jpg',
105 | '_links': {
106 | 'self': [{
107 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/media/15'
108 | }],
109 | 'collection': [{
110 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/media'
111 | }],
112 | 'about': [{
113 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/types/attachment'
114 | }],
115 | 'author': [{
116 | 'embeddable': true,
117 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/users/100'
118 | }],
119 | 'replies': [{
120 | 'embeddable': true,
121 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/comments?post=15'
122 | }]
123 | }
124 | }],
125 | 'wp:term': [[{
126 | 'id': 1,
127 | 'link': 'http://demo.wp-api.org/category/uncategorized/',
128 | 'name': 'Uncategorized',
129 | 'slug': 'uncategorized',
130 | 'taxonomy': 'category',
131 | '_links': {
132 | 'self': [{
133 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/categories/1'
134 | }],
135 | 'collection': [{
136 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/categories'
137 | }],
138 | 'about': [{
139 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/taxonomies/category'
140 | }],
141 | 'wp:post_type': [{
142 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/posts?categories=1'
143 | }],
144 | 'curies': [{
145 | 'name': 'wp',
146 | 'href': 'https://api.w.org/{rel}',
147 | 'templated': true
148 | }]
149 | }
150 | }],
151 | []]
152 | }
153 | }
154 |
--------------------------------------------------------------------------------
/test/universal-journey.js:
--------------------------------------------------------------------------------
1 | /* global jest:false, expect:false */
2 |
3 | jest.disableAutomock()
4 |
5 | // we mock queryBuilder after imports
6 | // we need to mock client and server environments
7 | jest.mock('is-node-fn')
8 |
9 | import React from 'react'
10 | import createSagaMiddleware from 'redux-saga'
11 | import isNode from 'is-node-fn'
12 | import Wpapi from 'wpapi'
13 | import { put } from 'redux-saga/effects'
14 | import { createStore as _createStore, applyMiddleware, compose, combineReducers } from 'redux'
15 | import { mount } from 'enzyme'
16 |
17 | import './__mocks__/WP'
18 | import kasia from '../src'
19 | import queryCounter from '../src/util/queryCounter'
20 | import schemasManager from '../src/util/schemasManager'
21 | import { ActionTypes } from '../src/constants'
22 | import { fetch } from '../src/redux/sagas'
23 |
24 | import BuiltInContentType from './__mocks__/components/BuiltInContentType'
25 | import initialState from './__mocks__/states/initial'
26 | import post from './__fixtures__/wp-api-responses/post'
27 |
28 | const post1 = post
29 | const post2 = Object.assign({}, post, { id: 17, slug: 'post-2', title: { rendered: 'Post 2' } })
30 | const post3 = Object.assign({}, post, { id: 18, slug: 'post-3', title: { rendered: 'Post 3' } })
31 |
32 | // post to return from queryFn
33 | let returnPost
34 |
35 | // we need to mock responses from WP-API
36 | jest.mock('../src/util/queryBuilder', () => ({
37 | buildQueryFunction: () => () => new Promise((resolve) => {
38 | setTimeout(() => resolve(returnPost))
39 | })
40 | }))
41 |
42 | function setup (keyEntitiesBy) {
43 | const { kasiaReducer, kasiaSagas } = kasia({
44 | wpapi: new Wpapi({ endpoint: '123' }),
45 | keyEntitiesBy
46 | })
47 |
48 | const sagaMiddleware = createSagaMiddleware()
49 | const createStore = compose(applyMiddleware(sagaMiddleware))(_createStore)
50 | const store = createStore(combineReducers(kasiaReducer), initialState(keyEntitiesBy))
51 | const runSaga = sagaMiddleware.run
52 |
53 | sagaMiddleware.run(function * () {
54 | yield kasiaSagas
55 | })
56 |
57 | return { store, runSaga }
58 | }
59 |
60 | describe('Universal journey', function () {
61 | ['id', 'slug'].forEach((keyEntitiesBy) => {
62 | describe('keyEntitiesBy = ' + keyEntitiesBy, () => {
63 | let rendered
64 | let preloader
65 | let action
66 | let iter
67 | let store
68 | let runSaga
69 |
70 | function newStore () {
71 | const s = setup(keyEntitiesBy)
72 | store = s.store
73 | runSaga = s.runSaga
74 | }
75 |
76 | it('SERVER', () => {
77 | schemasManager.__flush__()
78 | newStore() // we would create new store for each request
79 | queryCounter.reset()
80 | isNode.mockReturnValue(true)
81 | returnPost = post1
82 | })
83 |
84 | it(' should have a preload static method', () => {
85 | expect(typeof BuiltInContentType.preload).toEqual('function')
86 | })
87 |
88 | it(' ...that returns a preloader operation array', () => {
89 | const renderProps = { params: { [keyEntitiesBy]: post1[keyEntitiesBy] } }
90 | preloader = BuiltInContentType.preload(renderProps)
91 | expect(Array.isArray(preloader)).toEqual(true)
92 | })
93 |
94 | it(' ...that contains a saga function and action object', () => {
95 | action = {
96 | id: 0,
97 | type: ActionTypes.RequestCreatePost,
98 | identifier: post1[keyEntitiesBy],
99 | contentType: 'post'
100 | }
101 | expect(preloader[0]).toEqual(fetch)
102 | expect(preloader[1]).toEqual(action)
103 | iter = fetch(action)
104 | })
105 |
106 | it(' should run preloader', () => {
107 | // acknowledge request
108 | const ackAction = {
109 | id: 0,
110 | type: ActionTypes.AckRequest,
111 | identifier: post1[keyEntitiesBy],
112 | contentType: 'post'
113 | }
114 | const actual1 = iter.next().value
115 | const expected1 = put(ackAction)
116 | expect(actual1).toEqual(expected1)
117 | return runSaga(fetch, action).done
118 | })
119 |
120 | it(` should have entity keyed by ${keyEntitiesBy} on store`, () => {
121 | const actual = store.getState().wordpress.entities.posts[post1[keyEntitiesBy]]
122 | expect(actual).toEqual(post1)
123 | })
124 |
125 | it(' should render the prepared data on server', () => {
126 | kasia.rewind()
127 | const params = { [keyEntitiesBy]: post1[keyEntitiesBy] }
128 | rendered = mount(Architecto enim omnis repellendus
')
130 | })
131 |
132 | it('CLIENT', () => {
133 | // imitate client
134 | queryCounter.reset()
135 | isNode.mockReturnValue(false)
136 | returnPost = post2
137 | })
138 |
139 | it(' should render the prepared query data on client', () => {
140 | const params = { [keyEntitiesBy]: post1[keyEntitiesBy] }
141 | rendered = mount(Architecto enim omnis repellendus
')
143 | })
144 |
145 | it(' should render loading text when props change', () => {
146 | const props = { params: { [keyEntitiesBy]: post2[keyEntitiesBy] } }
147 | rendered.setProps(props) // implicit update
148 | expect(rendered.html()).toEqual('Loading...
')
149 | })
150 |
151 | it(' should make a non-prepared query on props change', () => {
152 | const query = store.getState().wordpress.queries[1]
153 | expect(typeof query).toEqual('object')
154 | expect(query.prepared).toEqual(false)
155 | expect(query.complete).toEqual(false)
156 | })
157 |
158 | it(' should display new post title', (done) => {
159 | // allow fetch saga to complete
160 | // todo surely a better way to do this?
161 | setTimeout(() => {
162 | try {
163 | const query = store.getState().wordpress.queries[1]
164 | expect(query.complete).toEqual(true)
165 | expect(rendered.update().html()).toEqual('Post 2
')
166 | done()
167 | } catch (err) {
168 | done(err)
169 | }
170 | }, 100)
171 | })
172 |
173 | it(' can make another non-prepared query', (done) => {
174 | returnPost = post3
175 |
176 | // change props
177 | const props = { params: { [keyEntitiesBy]: post3[keyEntitiesBy] } }
178 | rendered.setProps(props)
179 | expect(rendered.html()).toEqual('Loading...
')
180 |
181 | // check query is acknowledged
182 | const query = store.getState().wordpress.queries[2]
183 | expect(typeof query).toEqual('object')
184 | expect(query.prepared).toEqual(false)
185 | expect(query.complete).toEqual(false)
186 |
187 | // check renders new data
188 | setTimeout(() => {
189 | try {
190 | const query = store.getState().wordpress.queries[2]
191 | expect(query.complete).toEqual(true)
192 | expect(rendered.update().html()).toEqual('Post 3
')
193 | done()
194 | } catch (err) {
195 | done(err)
196 | }
197 | }, 100)
198 | })
199 | })
200 | })
201 | })
202 |
--------------------------------------------------------------------------------
/test/__fixtures__/wp-api-responses/media.js:
--------------------------------------------------------------------------------
1 | export default {
2 | 'id': 15,
3 | 'date': '2015-06-03T22:18:52',
4 | 'date_gmt': '2015-06-03T22:18:52',
5 | 'guid': {
6 | 'rendered': 'https://hmn-uploads-eu.s3.amazonaws.com/wp-api-demo-production/uploads/2015/06/0845fa5d-4c5e-3c93-a054-63a976339952.jpg'
7 | },
8 | 'modified': '2015-06-03T22:18:52',
9 | 'modified_gmt': '2015-06-03T22:18:52',
10 | 'slug': 'vero-amet-id-commodi-harum',
11 | 'type': 'attachment',
12 | 'link': 'http://demo.wp-api.org/vero-amet-id-commodi-harum/',
13 | 'title': {
14 | 'rendered': 'Vero amet id commodi harum'
15 | },
16 | 'author': 100,
17 | 'comment_status': 'closed',
18 | 'ping_status': 'closed',
19 | 'alt_text': '',
20 | 'caption': '',
21 | 'description': 'Dolorem labore sit eum ea velit rerum et quasi
\nSapiente tempore magnam molestias dolore. pariatur repellendus tempore. Illum nihil suscipit culpa. tempora facilis porro. Reiciendis inventore at sit ipsam nulla. Optio aut eum nulla harum Itaque et consequatur sint ut sed Eveniet asperiores enim dolor dolor et. Consectetur est eveniet quod voluptatem vel\n
Voluptas qui aut eum nihil rerum est vel. Et ad ipsam placeat accusantium aut magnam
\n- Laboriosam voluptas
- Sed neque aspernatur aspernatur sint ipsa
- Exercitationem fugit pariatur ea
- Optio dicta autem repellat nostrum
Possimus modi consequuntur sit Ab magnam reprehenderit et est Ducimus quis et fuga Dolorem illum odio magni Porro sunt repellendus harum et. dolorem velit occaecati. non nobis molestias sed accusamus temporibus. praesentium quia autem quam. Ullam saepe dolorem. tenetur ducimus architecto. Adipisci impedit culpa facilis voluptas necessitatibus est. Commodi expedita
\nMaxime optio iusto dolor. Hic ratione enim quos unde repellendus consequatur sed. Deleniti ut iste sit perferendis necessitatibus explicabo
\n- Neque quasi repellat cumque et dolorum vel atque
- Ut eveniet non minus
- Similique et id sunt voluptates libero ipsa
Quam aut eius non nulla. Asperiores omnis voluptas recusandae ea
\nAspernatur veritatis quo quo vel in. Quod mollitia corporis iusto illo perspiciatis. Odit consequuntur ex omnis repellat voluptatem mollitia distinctio eum. Consequuntur eius ipsa qui qui consequatur. Ab consequatur enim sint voluptas. Aliquid sint ut vitae consequatur. Voluptas magnam voluptatem omnis molestias.
\nEt id dignissimos nostrum autem. Facere eos eum quibusdam vel commodi. Aut distinctio excepturi nesciunt hic similique. Magnam sint omnis temporibus neque qui
\n- Optio voluptatem deleniti hic numquam cumque qui
- Ut nihil tempore veniam incidunt
- Et incidunt sapiente enim et
- Eum culpa voluptates labore earum
- Molestiae ab animi et
- Qui dolorem eos
- Quia
- Nulla sit eos adipisci aut
\nCulpa nam vero doloremque quis. Sed nam magni consequatur. Laboriosam maxime cupiditate et quis. Iusto omnis ratione doloremque eos animi. Voluptas impedit velit recusandae eius
Incidunt est itaque quo et labore. Maxime quis cum facilis debitis quia et laudantium
\n- \n
- At sequi et rerum enim \n
- Ex consectetur ullam amet \n
- Et quae consectetur itaque \n
- Mollitia est quis at quis \n
- Aut et id cum \n
- Labore unde at autem \n
\nNemo fugit aut quas et impedit. Optio et non in sapiente. Libero eum beatae maxime sed. Nulla cupiditate dolor sit excepturi sunt. Dolorum consectetur eaque consequatur enim. Et adipisci reprehenderit iure ea consequatur illo. Aperiam eum temporibus dolorem deleniti voluptatum. Eos et maxime qui iure ratione. Consequatur eaque sunt deserunt. Dolorem quia et illum dolorem aliquam quo Eos quo quaerat laborum delectus sed. Molestiae aperiam non numquam dicta. nesciunt et labore facere. Est et voluptatem architecto sapiente architecto. Minima consequatur eos rerum ut sit. accusantium et velit.
Quibusdam quis ut commodi. Qui aut laboriosam et quia quia
\n\nDucimus nostrum quod reprehenderit In asperiores amet ut consequatur Et consequatur distinctio facilis. Recusandae et beatae explicabo modi. Mollitia aut quia nemo impedit voluptatibus eum. Autem velit nam maiores architecto soluta. Animi itaque vel aut. Consectetur voluptatum necessitatibus assumenda autem corporis Magnam sed molestiae ut. Autem aut ipsam est Tenetur eius vel iste velit aut. Magni enim sequi nulla molestias. perferendis quae fugiat nam fugiat modi esse. In nostrum ut eveniet et. Aut voluptates sed assumenda. Voluptates ad ducimus totam et nihil. Dolorum optio ea. Perferendis non harum ipsa aliquid similique
- \n
- Est odio exercitationem rerum earum doloribus \n
- Quaerat fugit in quia \n
- Tenetur \n
Voluptas accusamus provident placeat corrupti
\nDoloremque temporibus omnis commodi dolor et
\nDoloribus eum et velit. Aut nemo voluptate maxime numquam autem. Veniam qui est nihil
\n\n
Delectus pariatur sunt omnis sed soluta. Animi ducimus consectetur aperiam et. Temporibus iste qui et itaque dolores. id non tempora fuga deserunt. Perferendis laboriosam ducimus nihil saepe rem. Odit in voluptatum aspernatur. Adipisci dolore aut minima. ratione dolores eaque saepe reiciendis Explicabo eum rerum et id qui voluptatum qui. id dolores saepe fugit modi. Laboriosam libero doloribus molestiae at asperiores ut. Assumenda aut repellendus fuga animi Aut consequatur ea officia enim.
\n\nDucimus consequatur autem occaecati soluta. Molestiae voluptatum et in veniam autem. Minus aut nihil vero illo eum harum. Eveniet maxime recusandae eos. Suscipit dicta iste qui ipsa quibusdam aspernatur est.
Culpa nam vero doloremque quis. Sed nam magni consequatur. Laboriosam maxime cupiditate et quis. Iusto omnis ratione doloremque eos animi. Voluptas impedit velit recusandae eius Incidunt est itaque quo et labore. Maxime quis cum facilis debitis quia et laudantium At sequi et rerum enim Ex consectetur ullam amet Et quae consectetur itaque Mollitia est quis […]
\n' 21 | }, 22 | 'author': 95, 23 | 'featured_media': 11, 24 | 'parent': 0, 25 | 'menu_order': 0, 26 | 'comment_status': 'closed', 27 | 'ping_status': 'open', 28 | 'template': '', 29 | '_links': { 30 | 'self': [{ 31 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/pages/12' 32 | }], 33 | 'collection': [{ 34 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/pages' 35 | }], 36 | 'about': [{ 37 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/types/page' 38 | }], 39 | 'author': [{ 40 | 'embeddable': true, 41 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/users/95' 42 | }], 43 | 'replies': [{ 44 | 'embeddable': true, 45 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/comments?post=12' 46 | }], 47 | 'version-history': [{ 48 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/pages/12/revisions' 49 | }], 50 | 'wp:featuredmedia': [{ 51 | 'embeddable': true, 52 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/media/11' 53 | }], 54 | 'wp:attachment': [{ 55 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/media?parent=12' 56 | }], 57 | 'curies': [{ 58 | 'name': 'wp', 59 | 'href': 'https://api.w.org/{rel}', 60 | 'templated': true 61 | }] 62 | }, 63 | '_embedded': { 64 | 'author': [{ 65 | 'id': 95, 66 | 'name': 'Sonya', 67 | 'url': 'http://Beatty.info/mollitia-qui-sed-est-beatae', 68 | 'description': 'Et ut est aut rerum quis qui magnam. Vero assumenda laudantium qui autem. Saepe reprehenderit consequatur perferendis libero nam consequatur. Eius voluptate atque illum dolorem repellendus. Reprehenderit assumenda est tempore nesciunt ea.\r\n\r\nUt quia magnam sit molestiae quos. Accusamus voluptate non animi nihil esse. Labore porro quod vitae consequuntur reprehenderit saepe.\r\n\r\nMolestiae porro dolorem nihil neque sint. Reiciendis ducimus rerum suscipit labore temporibus nisi nostrum. Natus amet eum eum excepturi tempore nisi fuga. Totam aut facilis sapiente voluptatem alias unde.\r\n\r\nEaque consequatur omnis adipisci voluptatem illo. Quia neque necessitatibus ut quaerat distinctio hic molestias. Ipsum nisi molestiae vitae.\r\n\r\nAperiam sint nobis quia ut qui sint veniam. Nam animi corporis et ratione numquam est perferendis. Et dolore sit quos earum eius soluta nemo iste.\r\n\r\nVeniam incidunt voluptas reiciendis aut culpa natus. Dolor est numquam consequatur commodi.', 69 | 'link': 'http://demo.wp-api.org/author/elmira-luettgen/', 70 | 'slug': 'elmira-luettgen', 71 | 'avatar_urls': { 72 | '24': 'http://0.gravatar.com/avatar/3eb34c383eaebf4c71409ba2a95fc34a?s=24&d=mm&r=g', 73 | '48': 'http://0.gravatar.com/avatar/3eb34c383eaebf4c71409ba2a95fc34a?s=48&d=mm&r=g', 74 | '96': 'http://0.gravatar.com/avatar/3eb34c383eaebf4c71409ba2a95fc34a?s=96&d=mm&r=g' 75 | }, 76 | '_links': { 77 | 'self': [{ 78 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/users/95' 79 | }], 80 | 'collection': [{ 81 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/users' 82 | }] 83 | } 84 | }], 85 | 'wp:featuredmedia': [{ 86 | 'id': 11, 87 | 'date': '2015-06-03T22:18:47', 88 | 'slug': 'qui-et-ipsa-maiores', 89 | 'type': 'attachment', 90 | 'link': 'http://demo.wp-api.org/qui-et-ipsa-maiores/', 91 | 'title': { 92 | 'rendered': 'Qui et ipsa maiores' 93 | }, 94 | 'author': 72, 95 | 'alt_text': '', 96 | 'media_type': 'image', 97 | 'mime_type': 'image/jpeg', 98 | 'media_details': { 99 | 'width': 1080, 100 | 'height': 677, 101 | 'file': '2015/06/e5247ed2-2a86-3a98-8f70-d5786b1318d4.jpg', 102 | 'sizes': { 103 | 'thumbnail': { 104 | 'file': 'e5247ed2-2a86-3a98-8f70-d5786b1318d4-150x150.jpg', 105 | 'width': 150, 106 | 'height': 150, 107 | 'mime_type': 'image/jpeg', 108 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/e5247ed2-2a86-3a98-8f70-d5786b1318d4-150x150.jpg' 109 | }, 110 | 'medium': { 111 | 'file': 'e5247ed2-2a86-3a98-8f70-d5786b1318d4-300x188.jpg', 112 | 'width': 300, 113 | 'height': 188, 114 | 'mime_type': 'image/jpeg', 115 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/e5247ed2-2a86-3a98-8f70-d5786b1318d4-300x188.jpg' 116 | }, 117 | 'large': { 118 | 'file': 'e5247ed2-2a86-3a98-8f70-d5786b1318d4-1024x642.jpg', 119 | 'width': 1024, 120 | 'height': 642, 121 | 'mime_type': 'image/jpeg', 122 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/e5247ed2-2a86-3a98-8f70-d5786b1318d4-1024x642.jpg' 123 | }, 124 | 'full': { 125 | 'file': 'e5247ed2-2a86-3a98-8f70-d5786b1318d4.jpg', 126 | 'width': 1080, 127 | 'height': 677, 128 | 'mime_type': 'image/jpeg', 129 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/e5247ed2-2a86-3a98-8f70-d5786b1318d4.jpg' 130 | } 131 | }, 132 | 'image_meta': { 133 | 'aperture': 0, 134 | 'credit': '', 135 | 'camera': '', 136 | 'caption': '', 137 | 'created_timestamp': 1430426977, 138 | 'copyright': '', 139 | 'focal_length': 0, 140 | 'iso': 0, 141 | 'shutter_speed': 0, 142 | 'title': '', 143 | 'orientation': 0 144 | } 145 | }, 146 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/e5247ed2-2a86-3a98-8f70-d5786b1318d4.jpg', 147 | '_links': { 148 | 'self': [{ 149 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/media/11' 150 | }], 151 | 'collection': [{ 152 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/media' 153 | }], 154 | 'about': [{ 155 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/types/attachment' 156 | }], 157 | 'author': [{ 158 | 'embeddable': true, 159 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/users/72' 160 | }], 161 | 'replies': [{ 162 | 'embeddable': true, 163 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/comments?post=11' 164 | }] 165 | } 166 | }] 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /test/__fixtures__/wp-api-responses/post.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'id': 16, 3 | 'date': '2015-12-31T14:51:26', 4 | 'date_gmt': '2015-12-31T14:51:26', 5 | 'guid': { 6 | 'rendered': 'http://wp-api-de-elbinsta-n5pu020s13lb-1748419096.eu-west-1.elb.amazonaws.com/?p=16' 7 | }, 8 | 'modified': '2015-12-31T14:51:26', 9 | 'modified_gmt': '2015-12-31T14:51:26', 10 | 'slug': 'architecto-enim-omnis-repellendus', 11 | 'type': 'post', 12 | 'link': 'http://demo.wp-api.org/2015/12/31/architecto-enim-omnis-repellendus/', 13 | 'title': { 14 | 'rendered': 'Architecto enim omnis repellendus' 15 | }, 16 | 'content': { 17 | 'rendered': 'Similique eaque voluptas cum voluptatem. Similique debitis quis sapiente veniam saepe. Architecto qui repellendus autem dolor autem est molestiae
\n- \n
- Libero ut \n
- Libero sunt nihil laboriosam rerum \n
- Rem modi \n
- Quod minus est nam alias velit \n
- Id consequatur doloribus sed et \n
- Maiores nulla eveniet \n
- Ut voluptates accusamus voluptas ea \n
- Quia esse id temporibus et et maiores \n
Voluptatem qui eveniet quidem quia rerum voluptatem. Vel ipsa provident nesciunt at. Sed velit et placeat et et
\n- \n
- Est ea ut quia et \n
- Maiores nesciunt quisquam et esse aut et \n
- Reprehenderit magni neque ad \n
- Natus ex culpa non vitae \n
Iste velit in modi. Officia rerum error et quo molestiae. Reiciendis est est libero recusandae quia earum
\n\n
\n
Earum harum non magni placeat rerum velit dolore. Et non facilis eum quidem vero beatae corrupti in. Repellendus ut et nobis
\n\nNobis est voluptatem ipsum sunt veniam. Iusto quia mollitia sed at non. Corrupti quibusdam et doloremque sed. similique sint Ut modi neque nostrum molestiae aut. officiis id dolores numquam. Error voluptate eum quasi cum. Rerum inventore cupiditate magni inventore magnam Magnam omnis necessitatibus veritatis modi. inventore accusamus sit sapiente expedita nam eos.
Qui blanditiis et dolorum veniam alias aperiam. Hic quisquam neque ea alias nostrum voluptas
\n- \n
- Omnis sed consectetur voluptatem molestiae est \n
- Iste ex magnam neque quia fugiat \n
- A qui \n
- Quibusdam omnis minima in quidem \n
- Officiis sint iure omnis \n
- Voluptas nisi \n
- Voluptates at eveniet aut \n
- Natus accusantium ducimus ut \n
\nCorporis quasi ut magnam omnis. Accusantium quasi doloremque quia quas quasi modi mollitia consequatur. Eligendi rerum repellendus mollitia iste. Architecto neque eveniet laborum iste suscipit quod aut. Nam vero rerum fugit delectus qui dolores consequatur. Porro molestiae unde voluptatum laudantium. Autem distinctio ducimus enim qui. Fugit possimus eos qui aliquid accusamus magnam. Consequatur iusto non quibusdam sapiente modi deserunt. Velit et dicta iusto est natus. Eligendi ut officiis et quasi. Nihil voluptatum facere dolores quae voluptatem. Sunt sed ex provident et quam. Molestiae aut et eveniet tempore. Voluptas est quia nobis temporibus natus sint. Autem animi et accusamus quidem occaecati dolorem impedit accusantium. Quibusdam quis omnis provident alias voluptatem. Quisquam impedit quos est tenetur animi ipsam. Recusandae aut incidunt ex minima quisquam ea quia. Quod blanditiis nulla qui maxime nemo corrupti. Itaque est voluptate voluptatem voluptates rerum quasi dolor. Autem illo cumque voluptatem pariatur repellendus commodi illum dolorem. Quidem totam ut neque praesentium. Debitis ut est eveniet itaque repellat. In labore et et quia qui aut dolor. Illum rerum magni quia porro quae et fugiat. Esse dolore sint minima possimus sed ut. Ut harum sequi corrupti. Velit distinctio eum ullam corrupti dolorem earum eum. Rerum impedit iure omnis nesciunt. Quisquam voluptatem consequatur quia. Est ab quae cum ut. Nihil quidem iste est reiciendis quisquam ut. Consequatur dolorum consequatur modi. Porro cupiditate nostrum quam recusandae unde. Autem dolorem nemo nesciunt id praesentium exercitationem aut. Eos magni natus sit dolores dolorum animi assumenda aliquid. Id cupiditate nobis officiis totam. Eveniet dolores cum voluptas quam. Ut vel est velit at et aut velit. Quod sed nam in ut sit hic.
Quibusdam consectetur illum quis id rerum. Ea est ut autem consequatur earum
\n- \n
- Consequatur qui qui est modi \n
- Ipsam quasi ex \n
- Necessitatibus quia sequi non saepe \n
- Eum dignissimos voluptas vel qui similique \n
- Quo laborum \n
- Quidem delectus autem aut sit voluptatem \n
- Voluptates qui reiciendis atque minus ipsam perferendis \n
- Enim hic quas explicabo \n
- Vel explicabo suscipit laudantium \n
- Ut ut sed eum culpa nesciunt quis quis \n
- Enim laborum voluptatem dolorem est inventore \n
Omnis quam in reprehenderit. Porro magni voluptatem aut adipisci quia aut ea optio. Rem qui esse dolorem porro eveniet qui
\n- \n
- Et molestiae velit facilis libero quo \n
- Et ad quidem id doloribus \n
- Aut ullam \n
- At velit doloribus qui iure \n
Voluptatibus aliquam expedita repudiandae rerum consequuntur fuga. Provident voluptatem autem vel sit
\nEst unde voluptatum illum Est similique maiores omnis facere est molestiae. Sunt ut itaque omnis non. Dolore perspiciatis iste et veniam eius. Ipsum est similique consequatur. Magnam ea ex saepe dolor corrupti. Quia fuga qui ex. beatae placeat non Omnis possimus voluptate ea quia enim. et suscipit magni est illo. Qui totam vitae tenetur quos reprehenderit.
\n' 18 | }, 19 | 'excerpt': { 20 | 'rendered': 'Similique eaque voluptas cum voluptatem. Similique debitis quis sapiente veniam saepe. Architecto qui repellendus autem dolor autem est molestiae Libero ut Libero sunt nihil laboriosam rerum Rem modi Quod minus est nam alias velit Id consequatur doloribus sed et Maiores nulla eveniet Ut voluptates accusamus voluptas ea Quia esse id temporibus et et maiores Voluptatem […]
\n' 21 | }, 22 | 'author': 42, 23 | 'featured_media': 15, 24 | 'comment_status': 'open', 25 | 'ping_status': 'open', 26 | 'sticky': false, 27 | 'format': 'standard', 28 | 'categories': [1], 29 | 'tags': [], 30 | '_links': { 31 | 'self': [{ 32 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/posts/16' 33 | }], 34 | 'collection': [{ 35 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/posts' 36 | }], 37 | 'about': [{ 38 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/types/post' 39 | }], 40 | 'author': [{ 41 | 'embeddable': true, 42 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/users/42' 43 | }], 44 | 'replies': [{ 45 | 'embeddable': true, 46 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/comments?post=16' 47 | }], 48 | 'version-history': [{ 49 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/posts/16/revisions' 50 | }], 51 | 'wp:featuredmedia': [{ 52 | 'embeddable': true, 53 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/media/15' 54 | }], 55 | 'wp:attachment': [{ 56 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/media?parent=16' 57 | }], 58 | 'wp:term': [{ 59 | 'taxonomy': 'category', 60 | 'embeddable': true, 61 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/categories?post=16' 62 | }, 63 | { 64 | 'taxonomy': 'post_tag', 65 | 'embeddable': true, 66 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/tags?post=16' 67 | }], 68 | 'curies': [{ 69 | 'name': 'wp', 70 | 'href': 'https://api.w.org/{rel}', 71 | 'templated': true 72 | }] 73 | }, 74 | '_embedded': { 75 | 'author': [{ 76 | 'id': 42, 77 | 'name': 'Sophia', 78 | 'url': 'http://Little.com/fugit-rem-in-consequuntur-perspiciatis-ex', 79 | 'description': 'Cumque esse consequatur facere minus. In tenetur culpa illo sint labore nostrum quis. Explicabo animi explicabo perferendis nesciunt omnis quo sunt nihil. Quod magnam necessitatibus dicta amet omnis aliquid.\r\n\r\nEt dolor consequuntur necessitatibus sequi incidunt est ratione. Unde sint iusto possimus officiis cum molestiae. Nostrum ad illo pariatur et.\r\n\r\nDoloremque neque doloremque voluptas vel voluptas placeat est. Consectetur qui et accusamus.\r\n\r\nCorrupti qui accusamus voluptatum ab architecto sapiente fugit quis. Ut et sit quod ea voluptates nobis. Enim qui eos magnam at.\r\n\r\nQuia error tempora ullam nulla illo sint. Velit perferendis amet facere quia dignissimos. Rerum nihil pariatur eum velit rerum.\r\n\r\nVelit laudantium voluptate nesciunt et cupiditate asperiores. Voluptatem recusandae numquam et neque unde molestiae voluptate. Rerum et harum occaecati quis occaecati voluptas. Sequi qui dolores cumque nostrum ab nostrum.\r\n\r\nExplicabo cum voluptates odit asperiores ut. Ipsam exercitationem eum nostrum qui dolorum sint nulla. Aut perferendis dolorem ab itaque architecto ad enim.\r\n\r\nMinima aut nobis qui enim beatae. Quis quo modi nemo est quam ea inventore. Odit consequatur vitae perferendis mollitia pariatur voluptas ea sit.\r\n\r\nIn qui saepe ducimus labore. Perferendis ducimus quia corporis perspiciatis. Autem nobis explicabo debitis laboriosam tempora aut.', 80 | 'link': 'http://demo.wp-api.org/author/meaghan-willms/', 81 | 'slug': 'meaghan-willms', 82 | 'avatar_urls': { 83 | '24': 'http://2.gravatar.com/avatar/bf432d6e226ae2f791a59ddd2b3f8462?s=24&d=mm&r=g', 84 | '48': 'http://2.gravatar.com/avatar/bf432d6e226ae2f791a59ddd2b3f8462?s=48&d=mm&r=g', 85 | '96': 'http://2.gravatar.com/avatar/bf432d6e226ae2f791a59ddd2b3f8462?s=96&d=mm&r=g' 86 | }, 87 | '_links': { 88 | 'self': [{ 89 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/users/42' 90 | }], 91 | 'collection': [{ 92 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/users' 93 | }] 94 | } 95 | }], 96 | 'wp:featuredmedia': [{ 97 | 'id': 15, 98 | 'date': '2015-06-03T22:18:52', 99 | 'slug': 'vero-amet-id-commodi-harum', 100 | 'type': 'attachment', 101 | 'link': 'http://demo.wp-api.org/vero-amet-id-commodi-harum/', 102 | 'title': { 103 | 'rendered': 'Vero amet id commodi harum' 104 | }, 105 | 'author': 100, 106 | 'alt_text': '', 107 | 'media_type': 'image', 108 | 'mime_type': 'image/jpeg', 109 | 'media_details': { 110 | 'width': 1080, 111 | 'height': 631, 112 | 'file': '2015/06/0845fa5d-4c5e-3c93-a054-63a976339952.jpg', 113 | 'sizes': { 114 | 'thumbnail': { 115 | 'file': '0845fa5d-4c5e-3c93-a054-63a976339952-150x150.jpg', 116 | 'width': 150, 117 | 'height': 150, 118 | 'mime_type': 'image/jpeg', 119 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/0845fa5d-4c5e-3c93-a054-63a976339952-150x150.jpg' 120 | }, 121 | 'medium': { 122 | 'file': '0845fa5d-4c5e-3c93-a054-63a976339952-300x175.jpg', 123 | 'width': 300, 124 | 'height': 175, 125 | 'mime_type': 'image/jpeg', 126 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/0845fa5d-4c5e-3c93-a054-63a976339952-300x175.jpg' 127 | }, 128 | 'large': { 129 | 'file': '0845fa5d-4c5e-3c93-a054-63a976339952-1024x598.jpg', 130 | 'width': 1024, 131 | 'height': 598, 132 | 'mime_type': 'image/jpeg', 133 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/0845fa5d-4c5e-3c93-a054-63a976339952-1024x598.jpg' 134 | }, 135 | 'full': { 136 | 'file': '0845fa5d-4c5e-3c93-a054-63a976339952.jpg', 137 | 'width': 1080, 138 | 'height': 631, 139 | 'mime_type': 'image/jpeg', 140 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/0845fa5d-4c5e-3c93-a054-63a976339952.jpg' 141 | } 142 | }, 143 | 'image_meta': { 144 | 'aperture': 0, 145 | 'credit': 'JOKINROM', 146 | 'camera': '', 147 | 'caption': '', 148 | 'created_timestamp': 1430341682, 149 | 'copyright': '', 150 | 'focal_length': 0, 151 | 'iso': 0, 152 | 'shutter_speed': 0, 153 | 'title': '', 154 | 'orientation': 0 155 | } 156 | }, 157 | 'source_url': 'http://demo.wp-api.org/content/uploads/2015/06/0845fa5d-4c5e-3c93-a054-63a976339952.jpg', 158 | '_links': { 159 | 'self': [{ 160 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/media/15' 161 | }], 162 | 'collection': [{ 163 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/media' 164 | }], 165 | 'about': [{ 166 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/types/attachment' 167 | }], 168 | 'author': [{ 169 | 'embeddable': true, 170 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/users/100' 171 | }], 172 | 'replies': [{ 173 | 'embeddable': true, 174 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/comments?post=15' 175 | }] 176 | } 177 | }], 178 | 'wp:term': [[{ 179 | 'id': 1, 180 | 'link': 'http://demo.wp-api.org/category/uncategorized/', 181 | 'name': 'Uncategorized', 182 | 'slug': 'uncategorized', 183 | 'taxonomy': 'category', 184 | '_links': { 185 | 'self': [{ 186 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/categories/1' 187 | }], 188 | 'collection': [{ 189 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/categories' 190 | }], 191 | 'about': [{ 192 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/taxonomies/category' 193 | }], 194 | 'wp:post_type': [{ 195 | 'href': 'http://demo.wp-api.org/wp-json/wp/v2/posts?categories=1' 196 | }], 197 | 'curies': [{ 198 | 'name': 'wp', 199 | 'href': 'https://api.w.org/{rel}', 200 | 'templated': true 201 | }] 202 | } 203 | }], 204 | []] 205 | } 206 | } 207 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 
3 |
kasia
6 | 7 |A React Redux toolset for the WordPress API
8 | 9 |Made with ❤ at @outlandish
10 | 11 |
12 | 
13 | 
14 | 
15 | 
16 |
19 | 
20 |
23 | 24 | :sparkles: We welcome contributors! 25 | 26 | :vertical_traffic_light: Issues are triaged using a traffic light system: 27 | 28 |  [small](https://github.com/outlandishideas/kasia/issues?q=is%3Aopen+is%3Aissue+label%3Asmall) - quick tasks, great for beginner contributors
29 |  [medium](https://github.com/outlandishideas/kasia/issues?q=is%3Aopen+is%3Aissue+label%3Amedium) - tasks with increased complexity, may take some time to implement
30 |  [large](https://github.com/outlandishideas/kasia/issues?q=is%3Aopen+is%3Aissue+label%3Alarge) - big tasks that touch many parts of the library, will require commitment 31 | 32 | [Get started contributing here.](https://github.com/outlandishideas/kasia/issues) 33 | 34 |
35 | 36 | Get data from WordPress and into components with ease... 37 | 38 | ```js 39 | // e.g. Get a post by its slug 40 | @connectWpPost('post', 'spongebob-squarepants') 41 | export default class extends React.Component () { 42 | render () { 43 | const { post: spongebob } = this.props.kasia 44 | 45 | if (!spongebob) { 46 | return
{'Who lives in a pineapple under the sea?'}
47 | } 48 | 49 | return{spongebob.title.rendered}!
50 | //=> Spongebob Squarepants! 51 | } 52 | } 53 | ``` 54 | 55 | 56 | ## Features 57 | 58 | - Declaratively connect React components to data from WordPress. 59 | - Uses [`node-wpapi`](https://github.com/WP-API/node-wpapi) in order to facilitate complex queries. 60 | - Register and consume Custom Content Types with ease. 61 | - All WP data is normalised at `store.wordpress`, e.g. `store.wordpress.pages`. 62 | - Support for universal applications. 63 | - Support for plugins, e.g. [`wp-api-menus`](https://github.com/outlandishideas/kasia/tree/master/packages/kasia-plugin-wp-api-menus). 64 | 65 | ## Glossary 66 | 67 | - [Requirements](#requirements) 68 | - [Install](#install) 69 | - [Import](#import) 70 | - [__Configure__](#configure) 71 | - [__Usage__](#usage) 72 | - [Exports](#exports) 73 | - [Plugins](#plugins) 74 | - [Universal Applications](#universal-applications) 75 | - [Contributing](#contributing) 76 | - [Author & License](#author-&-license) 77 | 78 | ## Requirements 79 | 80 | Kasia suits applications that are built using these technologies: 81 | 82 | - React 83 | - Redux 84 | - Redux Sagas (>= 0.10.0) 85 | - WordPress 86 | - [WP-API plugin](http://v2.wp-api.org/) 87 | - [`node-wpapi`](https://github.com/WP-API/node-wpapi) 88 | 89 | ## Install 90 | 91 | ```sh 92 | npm install kasia --save 93 | ``` 94 | 95 | ```sh 96 | yarn add kasia 97 | ``` 98 | 99 | ## Import 100 | 101 | ```js 102 | // ES2015 103 | import kasia from 'kasia' 104 | ``` 105 | 106 | ```js 107 | // CommonJS 108 | var kasia = require('kasia') 109 | ``` 110 | 111 | ## Configure 112 | 113 | Configure Kasia in three steps: 114 | 115 | 1. Initialise Kasia with an instance of `node-wpapi`. 116 | 117 | 2. Spread the Kasia reducer when creating the redux root reducer. 118 | 119 | 3. Run the Kasia sagas after creating the redux-saga middleware. 120 | 121 | A slimline example... 122 | 123 | ```js 124 | import { combineReducers, createStore, applyMiddleware } from 'redux' 125 | import createSagaMiddleware from 'redux-saga' 126 | import kasia from 'kasia' 127 | import wpapi from 'wpapi' 128 | 129 | const wpai = new wpapi({ endpoint: 'http://wordpress/wp-json' }) 130 | 131 | const { kasiaReducer, kasiaSagas } = kasia({ wpapi }) 132 | 133 | const rootSaga = function * () { 134 | yield [...kasiaSagas] 135 | } 136 | 137 | const rootReducer = combineReducers({ 138 | ...kasiaReducer 139 | }) 140 | 141 | const sagaMiddleware = createSagaMiddleware() 142 | 143 | export default function configureStore (initialState) { 144 | const store = createStore( 145 | rootReducer, 146 | initialState, 147 | applyMiddleware(sagaMiddleware) 148 | ) 149 | 150 | sagaMiddleware.run(rootSaga) 151 | 152 | return store 153 | } 154 | ``` 155 | 156 | ## Usage 157 | 158 | ### `kasia(options) : Object` 159 | 160 | Configure Kasia. 161 | 162 | - __options__ {Object} Options object 163 | 164 | Returns an object containing the Kasia reducer and sagas. 165 | 166 | ```js 167 | const { kasiaReducer, kasiaSagas } = kasia({ 168 | wpapi: new wpapi({ endpoint: 'http://wordpress/wp-json' }) 169 | }) 170 | ``` 171 | 172 | The `options` object accepts: 173 | 174 | - `wpapi` {wpapi} 175 | 176 | An instance of `node-wpapi`. 177 | 178 | - `keyEntitiesBy` {String} _(optional, default=`'id'`)_ 179 | 180 | Property of entities that is used to key them in the store. 181 | 182 | One of: `'slug'`, `'id'`. 183 | 184 | - `debug` {Boolean} _(optional, default=`false`)_ 185 | 186 | Log debug information to the console. 187 | 188 | - `contentTypes` {Array} _(optional)_ 189 | 190 | Array of custom content type definitions. 191 | 192 | ```js 193 | // Example custom content type definition 194 | contentTypes: [{ 195 | name: 'book', 196 | plural: 'books', 197 | slug: 'books', 198 | route, // optional, default="/{plural}/(?P{page.title}
260 | } 261 | } 262 | 263 | // Without decorator support 264 | export default connectWpPost(Page, (props) => props.params.slug)(Post) 265 | ``` 266 | 267 | #### `@connectWpQuery(queryFn, shouldUpdate) : Component` 268 | 269 | Connect a component to the result of an arbitrary WP-API query. Query is always made with `?embed` query parameter. 270 | 271 | - __queryFn__ {Function} Function that accepts args `wpapi`, `props`, `state` and should return a WP-API query 272 | - __shouldUpdate__ {Function} Called on `componentWillReceiveProps` with args `thisProps`, `nextProps`, `state` 273 | 274 | Returns a connected component. 275 | 276 | The component will request new data via `queryFn` if `shouldUpdate` returns true. 277 | 278 | Entities returned from the query will be placed on `this.props.kasia.entities` under the same 279 | normalised structure as described in [The Shape of Things](#the-shape-of-things). 280 | 281 | Example, fetching the most recent "News" entities: 282 | 283 | ```js 284 | import React, { Component } from 'react' 285 | import { Route } from 'react-router' 286 | import { connectWpPost } from 'kasia/connect' 287 | 288 | // Note the invocation of `embed` in the query chain 289 | @connectWpQuery((wpapi, props) => { 290 | return wpapi.news().month(props.month).embed().get() 291 | }, (thisProps, nextProps) => thisProps.month != nextProps.month) 292 | export default class RecentNews extends Component { 293 | render () { 294 | const { 295 | query, 296 | data: { news } 297 | } = this.props.kasia 298 | 299 | if (!query.complete) { 300 | return Loading... 301 | } 302 | 303 | return ( 304 |
305 |
309 | )
310 | }
311 | }
312 |
313 | // Without decorator support
314 | export default connectWpQuery((wpapi) => {
315 | return wpapi.news().embed().get()
316 | })(Post)
317 | ```
318 |
319 | ## Exports
320 |
321 | ### `kasia`
322 |
323 | The Kasia configurator and preload utilities.
324 |
325 | ```js
326 | import kasia, { preload, preloadQuery } from 'kasia'
327 | ```
328 |
329 | ### `kasia/connect`
330 |
331 | The connect decorators.
332 |
333 | ```js
334 | import { connectWpPost, connectWpQuery } from 'kasia/connect'
335 | ```
336 |
337 | ### `kasia/types`
338 |
339 | The built-in WordPress content types that can be passed to `connectWpPost` to define what content type
340 | a request should be made for.
341 |
342 | ```js
343 | import {
344 | Category, Comment, Media, Page,
345 | Post, PostStatus, PostType,
346 | PostRevision, Tag, Taxonomy, User
347 | } from 'kasia/types'
348 | ```
349 |
350 | See [Universal Application Utilities](#Utilities) for more details.
351 |
352 | ## Plugins
353 |
354 | Kasia exposes a simple API for third-party plugins.
355 |
356 | A plugin should:
357 |
358 | - be a function that accepts these arguments:
359 | - __wpapi__ {wpapi} An instance of `wpapi`
360 | - __pluginOptions__ {Object} The user's options for the plugin
361 | - __kasiaOptions__ {Object} The user's options for Kasia
362 |
363 | - return an object containing `reducers` (Object) and `sagas` (Array).
364 |
365 | - use the `'kasia/'` action type prefix.
366 |
367 | ```js
368 | // Example definition returned by a plugin
369 | {
370 | reducer: {
371 | 'kasia/SET_DATA': function setDataReducer () {}
372 | 'kasia/REMOVE_DATA': function removeDataReducer () {}
373 | },
374 | sagas: [function * fetchDataSaga () {}]
375 | }
376 | ```
377 |
378 | A plugin can hook into Kasia's native action types, available at `kasia/lib/constants/ActionTypes`.
379 | All reducers for an action type are merged into a single function that calls each reducer in succession
380 | with the state returned by the previous reducer. This means the order of plugins that touch the same
381 | action type is important.
382 |
383 | ### Available plugins:
384 |
385 | - [`kasia-plugin-wp-api-menus`](https://github.com/outlandishideas/kasia/tree/master/packages/kasia-plugin-wp-api-menus)
386 | - [`kasia-plugin-wp-api-all-terms`](https://github.com/outlandishideas/kasia/tree/master/packages/kasia-plugin-wp-api-all-terms)
387 | - [`kasia-plugin-wp-api-response-modify`](https://github.com/outlandishideas/kasia/tree/master/packages/kasia-plugin-wp-api-response-modify)
388 |
389 | Please create a pull request to get your own added to the list.
390 |
391 | ## Universal Applications
392 |
393 | __Important...__
394 |
395 | - __before calling the preloaders for SSR you must call `kasia.rewind()`__
396 | - __or if you call `runSagas()` from the utilities then this is done for you.__
397 |
398 | ### Utilities
399 |
400 | #### `runSagas(store, sagas) : Promise`
401 |
402 | Run a bunch of sagas against the store and wait on their completion.
403 |
404 | - __store__ {Object} Redux store enhanced with `runSaga` method
405 | - __sagas__ {Array} Array of functions that accept the store state and return a saga generator
406 |
407 | Returns a Promise resolving on completion of all the sagas.
408 |
409 | #### `preload(components[, renderProps][, state]) : Generator`
410 |
411 | Create a saga operation that will preload all data for any Kasia components in `components`.
412 |
413 | - __components__ {Array} Array of components
414 | - [__renderProps__] {Object} _(optional)_ Render props object derived from the matched route
415 | - [__state__] {Object} _(optional)_ Store state
416 |
417 | Returns a [saga operation](#saga-operation-signature).
418 |
419 | #### `preloadQuery(queryFn[, renderProps][, state]) : Generator`
420 |
421 | Create a saga operation that will preload data for an arbitrary query against the WP API.
422 |
423 | - __queryFn__ {Function} Query function that returns `node-wpapi` query
424 | - [__renderProps__] {Object} _(optional)_ Render props object
425 | - [__state__] {Object} _(optional)_ Store state
426 |
427 | Returns a [saga operation](#saga-operation-signature).
428 |
429 | #### `