Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Packages: Move data module to the package maintained by Lerna #6828

Merged
merged 10 commits into from
May 30, 2018
2 changes: 1 addition & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ module.exports = {
message: 'Use @wordpress/date as import path instead.',
},
{
selector: 'ImportDeclaration[source.value=/^deprecated/]',
selector: 'ImportDeclaration[source.value=/^deprecated$/]',
message: 'Use @wordpress/deprecated as import path instead.',
},
{
Expand Down
24 changes: 2 additions & 22 deletions bin/packages/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const mkdirp = require( 'mkdirp' );
* Internal dependencies
*/
const getPackages = require( './get-packages' );
const getBabelConfig = require( './get-babel-config' );

/**
* Module Constants
Expand All @@ -31,27 +32,6 @@ const BUILD_DIR = {
};
const DONE = chalk.reset.inverse.bold.green( ' DONE ' );

/**
* Babel Configuration
*/
const babelDefaultConfig = require( '@wordpress/babel-preset-default' );
babelDefaultConfig.babelrc = false;
const presetEnvConfig = babelDefaultConfig.presets[ 0 ][ 1 ];
const babelConfigs = {
main: Object.assign(
{},
babelDefaultConfig,
{ presets: [
[ 'env', Object.assign(
{},
presetEnvConfig,
{ modules: 'commonjs' },
) ],
] }
),
module: babelDefaultConfig,
};

/**
* Get the package name for a specified file
*
Expand Down Expand Up @@ -98,7 +78,7 @@ function buildFile( file, silent ) {
function buildFileFor( file, silent, environment ) {
const buildDir = BUILD_DIR[ environment ];
const destPath = getBuildPath( file, buildDir );
const babelOptions = babelConfigs[ environment ];
const babelOptions = getBabelConfig( environment );

mkdirp.sync( path.dirname( destPath ) );
const transformed = babel.transformFileSync( file, babelOptions ).code;
Expand Down
49 changes: 49 additions & 0 deletions bin/packages/get-babel-config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* External dependencies
*/
const { isArray, map } = require( 'lodash' );
const babelPluginTransformReactJSX = require( 'babel-plugin-transform-react-jsx' );
const babelPresetEnv = require( 'babel-preset-env' );

/**
* WordPress dependencies
*/
const babelDefaultConfig = require( '@wordpress/babel-preset-default' );

const plugins = map( babelDefaultConfig.plugins, ( plugin ) => {
if ( isArray( plugin ) && plugin[ 0 ] === babelPluginTransformReactJSX ) {
// TODO: It should become the default value when all modules are moved to packages.
return [ babelPluginTransformReactJSX, { pragma: 'createElement' } ];
}

return plugin;
} );

const babelConfigs = {
main: {
...babelDefaultConfig,
babelrc: false,
plugins,
presets: map( babelDefaultConfig.presets, ( preset ) => {
if ( isArray( preset ) && preset[ 0 ] === babelPresetEnv ) {
return [ babelPresetEnv, Object.assign(
{},
preset[ 1 ],
{ modules: 'commonjs' }
) ];
}
return preset;
} ),
},
module: {
...babelDefaultConfig,
babelrc: false,
plugins,
},
};

function getBabelConfig( environment ) {
return babelConfigs[ environment ];
}

module.exports = getBabelConfig;
10 changes: 10 additions & 0 deletions eslint/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -160,4 +160,14 @@ module.exports = {
'valid-typeof': 'error',
yoda: 'off',
},
overrides: [
{
files: 'packages/**/*.js',
settings: {
react: {
pragma: 'createElement',
},
},
},
],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe we still need a similar config for babel to generate the Right JS (instead of using the global)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed, I will look into it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be fixed with f7afc46.

};
2 changes: 1 addition & 1 deletion packages/blob/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Blob utils for WordPress.
Install the module

```bash
npm install @wordpress/blob@next --save
npm install @wordpress/blob --save
```

<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
1 change: 1 addition & 0 deletions packages/data/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
package-lock=false
10 changes: 9 additions & 1 deletion data/README.md → packages/data/README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
# Data
# @wordpress/data

WordPress' data module serves as a hub to manage application state for both plugins and WordPress itself, providing tools to manage data within and between distinct modules. It is designed as a modular pattern for organizing and sharing data: simple enough to satisfy the needs of a small plugin, while scalable to serve the requirements of a complex single-page application.

The data module is built upon and shares many of the same core principles of [Redux](https://redux.js.org/), but shouldn't be mistaken as merely _Redux for WordPress_, as it includes a few of its own [distinguishing characteristics](#comparison-with-redux). As you read through this guide, you may find it useful to reference the Redux documentation — particularly [its glossary](https://redux.js.org/glossary) — for more detail on core concepts.

## Installation

Install the module

```bash
npm install @wordpress/data --save
```

## Registering a Store

Use the `registerStore` function to add your own store to the centralized data registry. This function accepts two arguments: a name to identify the module, and an object with values describing how your state is represented, modified, and accessed. At a minimum, you must provide a reducer function describing the shape of your state and how it changes in response to actions dispatched to the store.
Expand Down
36 changes: 36 additions & 0 deletions packages/data/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
{
"name": "@wordpress/data",
"version": "0.0.1",
"description": "Data module for WordPress",
"author": "WordPress",
"license": "GPL-2.0-or-later",
"keywords": [
"wordpress",
"data",
"redux"
],
"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/data/README.md",
"repository": {
"type": "git",
"url": "https://github.com/WordPress/gutenberg.git"
},
"bugs": {
"url": "https://github.com/WordPress/gutenberg/issues"
},
"main": "src/index.js",
"dependencies": {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests use deep-freeze and enzyme. Do we need to reflect that anywhere in this file as a dependency?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that we are going to move those packages elsewhere one day, let's keep all dependencies listed. I will add them.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot that enzyme is already included in @wordpress/scripts by design.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should be explicit :) If we use enzyme directly here in our tests, it should be a direct dependency

"@wordpress/deprecated": "0.0.1",
"@wordpress/element": "0.0.1",
"@wordpress/is-shallow-equal": "1.0.2",
"equivalent-key-map": "0.2.0",
"lodash": "4.17.5",
"redux": "3.7.2"
},
"devDependencies": {
"deep-freeze": "0.0.1",
"enzyme": "3.3.0"
},
"publishConfig": {
"access": "public"
}
}
8 changes: 7 additions & 1 deletion data/index.js → packages/data/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ import { flowRight, without, mapValues, overEvery } from 'lodash';
/**
* WordPress dependencies
*/
import { Component, createHigherOrderComponent, pure, compose } from '@wordpress/element';
import {
Component,
compose,
createElement,
createHigherOrderComponent,
pure,
} from '@wordpress/element';
import isShallowEqual from '@wordpress/is-shallow-equal';

/**
Expand Down
16 changes: 14 additions & 2 deletions data/persist.js → packages/data/src/persist.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,18 @@ import deprecated from '@wordpress/deprecated';
*/
import { get } from 'lodash';

// Defaults to the local storage.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we default to a broken (error-throwing) state for Node environments where this package is used?

It's probably a larger dependency than we'd want, but something like Store.js is a good abstraction for this sort of thing.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really, you can make it work by using setter method introduced in this PR:

import store from 'store';

setPersistenceStorage( store );

It isn't ideal, needs to be documented but should allow us to move forward. I will add the following example in the README file.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's tackle it seperately as we don't have any docs for loadAndPersist anyways.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opened #7015 to solve it.

let persistenceStorage = window.localStorage;

/**
* Sets a different persistence storage.
*
* @param {Object} storage Persistence storage.
*/
export function setPersistenceStorage( storage ) {
persistenceStorage = storage;
}

/**
* Adds the rehydration behavior to redux reducers.
*
Expand Down Expand Up @@ -66,7 +78,7 @@ export function withRehydratation( reducer, reducerKey, storageKey ) {
*/
export function loadAndPersist( store, reducer, reducerKey, storageKey ) {
// Load initially persisted value
const persistedString = window.localStorage.getItem( storageKey );
const persistedString = persistenceStorage.getItem( storageKey );
if ( persistedString ) {
const persistedState = {
...get( reducer( undefined, { type: '@@gutenberg/init' } ), reducerKey ),
Expand All @@ -87,7 +99,7 @@ export function loadAndPersist( store, reducer, reducerKey, storageKey ) {
if ( newStateValue !== currentStateValue ) {
currentStateValue = newStateValue;
const stateToSave = get( reducer( store.getState(), { type: 'SERIALIZE' } ), reducerKey );
window.localStorage.setItem( storageKey, JSON.stringify( stateToSave ) );
persistenceStorage.setItem( storageKey, JSON.stringify( stateToSave ) );
}
} );
}
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion data/test/index.js → packages/data/src/test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { castArray } from 'lodash';
/**
* WordPress dependencies
*/
import { compose } from '@wordpress/element';
import { compose, createElement } from '@wordpress/element';

/**
* Internal dependencies
Expand Down
16 changes: 9 additions & 7 deletions data/test/persist.js → packages/data/src/test/persist.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@ import { createStore } from 'redux';
import { loadAndPersist, withRehydration } from '../persist';

describe( 'loadAndPersist', () => {
const persistenceStorage = window.localStorage;

it( 'should load the initial value from the local storage integrating it into reducer default value.', () => {
const storageKey = 'dumbStorageKey';
window.localStorage.setItem( storageKey, JSON.stringify( { chicken: true } ) );
persistenceStorage.setItem( storageKey, JSON.stringify( { chicken: true } ) );
const reducer = () => {
return {
preferences: { ribs: true },
Expand All @@ -29,7 +31,7 @@ describe( 'loadAndPersist', () => {

it( 'should not load the initial value from the local storage if the storage key is different.', () => {
const storageKey = 'dumbStorageKey';
window.localStorage.setItem( storageKey, JSON.stringify( { chicken: true } ) );
persistenceStorage.setItem( storageKey, JSON.stringify( { chicken: true } ) );
const reducer = () => {
return {
preferences: { ribs: true },
Expand Down Expand Up @@ -70,7 +72,7 @@ describe( 'loadAndPersist', () => {
storageKey,
);
store.dispatch( { type: 'UPDATE' } );
expect( JSON.parse( window.localStorage.getItem( storageKey ) ) ).toEqual( { chicken: true } );
expect( JSON.parse( persistenceStorage.getItem( storageKey ) ) ).toEqual( { chicken: true } );
} );

it( 'should apply defaults to any missing properties on previously stored objects', () => {
Expand All @@ -88,7 +90,7 @@ describe( 'loadAndPersist', () => {
};

// store preferences without the `counter` default
window.localStorage.setItem( storageKey, JSON.stringify( {} ) );
persistenceStorage.setItem( storageKey, JSON.stringify( {} ) );

const store = createStore( withRehydration( reducer, 'preferences', storageKey ) );
loadAndPersist(
Expand All @@ -101,7 +103,7 @@ describe( 'loadAndPersist', () => {

// the default should have been applied, as the `counter` was missing from the
// saved preferences, then the INCREMENT action should have taken effect to give us 42
expect( JSON.parse( window.localStorage.getItem( storageKey ) ) ).toEqual( { counter: 42 } );
expect( JSON.parse( persistenceStorage.getItem( storageKey ) ) ).toEqual( { counter: 42 } );
} );

it( 'should not override stored values with defaults', () => {
Expand All @@ -118,7 +120,7 @@ describe( 'loadAndPersist', () => {
return state;
};

window.localStorage.setItem( storageKey, JSON.stringify( { counter: 1 } ) );
persistenceStorage.setItem( storageKey, JSON.stringify( { counter: 1 } ) );

const store = createStore( withRehydration( reducer, 'preferences', storageKey ) );

Expand All @@ -130,6 +132,6 @@ describe( 'loadAndPersist', () => {
);
store.dispatch( { type: 'INCREMENT' } );

expect( JSON.parse( window.localStorage.getItem( storageKey ) ) ).toEqual( { counter: 2 } );
expect( JSON.parse( persistenceStorage.getItem( storageKey ) ) ).toEqual( { counter: 2 } );
} );
} );
2 changes: 1 addition & 1 deletion packages/date/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Date module for WordPress.
Install the module

```bash
npm install @wordpress/date@next --save
npm install @wordpress/date --save
```

<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
2 changes: 1 addition & 1 deletion packages/deprecated/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Logs a message to notify developers about a deprecated feature.
Install the module

```bash
npm install @wordpress/deprecated@next --save
npm install @wordpress/deprecated --save
```

## Usage
Expand Down
1 change: 1 addition & 0 deletions packages/dom/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
package-lock=false
2 changes: 1 addition & 1 deletion packages/dom/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ DOM utils module for WordPress.
Install the module

```bash
npm install @wordpress/dom@next --save
npm install @wordpress/dom --save
```

<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
1 change: 1 addition & 0 deletions packages/element/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
package-lock=false
2 changes: 1 addition & 1 deletion packages/element/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ On the `wp.element` global object, you will find the following, ordered roughly
Install the module

```bash
npm install @wordpress/element@next --save
npm install @wordpress/element --save
```

## Usage
Expand Down
3 changes: 3 additions & 0 deletions packages/element/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@
"react": "16.3.2",
"react-dom": "16.3.2"
},
"devDependencies": {
"enzyme": "3.3.0"
},
"publishConfig": {
"access": "public"
}
Expand Down
7 changes: 6 additions & 1 deletion packages/element/src/test/serialize.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,12 @@ import { noop } from 'lodash';
/**
* Internal dependencies
*/
import { Component, Fragment, RawHTML } from '../';
import {
Component,
createElement,
Fragment,
RawHTML,
} from '../';
import serialize, {
hasPrefix,
renderElement,
Expand Down
2 changes: 1 addition & 1 deletion packages/library-export-default-webpack-plugin/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Webpack plugin for exporting default property for selected libraries. Implementa
Install the module

```bash
npm install @wordpress/library-export-default-webpack-plugin@next --save
npm install @wordpress/library-export-default-webpack-plugin --save
```

## Usage
Expand Down
2 changes: 1 addition & 1 deletion packages/postcss-themes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ PostCSS Plugin to generate theme colors
Install the module

```bash
npm install @wordpress/postcss-themes@next --save
npm install @wordpress/postcss-themes --save
```

<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
Loading