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

* Packages: Move data module to the package maintained by Lerna * Data: Add a way to override the persistence storage * Data: Enforce JSX pragma for packages * Devtools: Introduce new module with depreacted util * Packages: Update Babel config to use createElement as pragma for JSX * Packages: Remove @next from README files * Packages: Make Babel config less fragile * Data: Add deep-freeze as dev dependency * Data: Update depscription in package.json * Packages: Add enzyme as dev dependency
WordPress · May 30, 2018 · c1fffb1 · c1fffb1
1 parent 86a4b22
commit c1fffb1
Show file tree

Hide file tree

Showing 32 changed files with 161 additions and 47 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -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.',
 			},
 			{

diff --git a/bin/packages/build.js b/bin/packages/build.js
@@ -19,6 +19,7 @@ const mkdirp = require( 'mkdirp' );
  * Internal dependencies
  */
 const getPackages = require( './get-packages' );
+const getBabelConfig = require( './get-babel-config' );
 
 /**
  * Module Constants
@@ -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
  *
@@ -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;

diff --git a/bin/packages/get-babel-config.js b/bin/packages/get-babel-config.js
@@ -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;
diff --git a/eslint/config.js b/eslint/config.js
@@ -160,4 +160,14 @@ module.exports = {
 		'valid-typeof': 'error',
 		yoda: 'off',
 	},
+	overrides: [
+		{
+			files: 'packages/**/*.js',
+			settings: {
+				react: {
+					pragma: 'createElement',
+				},
+			},
+		},
+	],
 };
diff --git a/packages/blob/README.md b/packages/blob/README.md
@@ -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>
diff --git a/packages/data/.npmrc b/packages/data/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/data/README.md → packages/data/README.md b/data/README.md → packages/data/README.md
@@ -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.

diff --git a/packages/data/package.json b/packages/data/package.json
@@ -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": {
+		"@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"
+	}
+}
diff --git a/data/index.js → packages/data/src/index.js b/data/index.js → packages/data/src/index.js
@@ -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';
 
 /**

diff --git a/data/persist.js → packages/data/src/persist.js b/data/persist.js → packages/data/src/persist.js
@@ -8,6 +8,18 @@ import deprecated from '@wordpress/deprecated';
  */
 import { get } from 'lodash';
 
+// Defaults to the local storage.
+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.
  *
@@ -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 ),
@@ -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 ) );
 		}
 	} );
 }
diff --git a/data/store/actions.js → packages/data/src/store/actions.js b/data/store/actions.js → packages/data/src/store/actions.js
diff --git a/data/store/index.js → packages/data/src/store/index.js b/data/store/index.js → packages/data/src/store/index.js
diff --git a/data/store/reducer.js → packages/data/src/store/reducer.js b/data/store/reducer.js → packages/data/src/store/reducer.js
diff --git a/data/store/selectors.js → packages/data/src/store/selectors.js b/data/store/selectors.js → packages/data/src/store/selectors.js
diff --git a/data/store/test/reducer.js → packages/data/src/store/test/reducer.js b/data/store/test/reducer.js → packages/data/src/store/test/reducer.js
diff --git a/data/store/test/selectors.js → packages/data/src/store/test/selectors.js b/data/store/test/selectors.js → packages/data/src/store/test/selectors.js
diff --git a/data/store/test/utils.js → packages/data/src/store/test/utils.js b/data/store/test/utils.js → packages/data/src/store/test/utils.js
diff --git a/data/store/utils.js → packages/data/src/store/utils.js b/data/store/utils.js → packages/data/src/store/utils.js
diff --git a/data/test/index.js → packages/data/src/test/index.js b/data/test/index.js → packages/data/src/test/index.js
@@ -7,7 +7,7 @@ import { castArray } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/element';
+import { compose, createElement } from '@wordpress/element';
 
 /**
  * Internal dependencies

diff --git a/data/test/persist.js → packages/data/src/test/persist.js b/data/test/persist.js → packages/data/src/test/persist.js
@@ -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 },
@@ -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 },
@@ -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', () => {
@@ -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(
@@ -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', () => {
@@ -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 ) );
 
@@ -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 } );
 	} );
 } );
diff --git a/packages/date/README.md b/packages/date/README.md
@@ -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>
diff --git a/packages/deprecated/README.md b/packages/deprecated/README.md
@@ -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

diff --git a/packages/dom/.npmrc b/packages/dom/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/packages/dom/README.md b/packages/dom/README.md
@@ -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>
diff --git a/packages/element/.npmrc b/packages/element/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/packages/element/README.md b/packages/element/README.md
@@ -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

diff --git a/packages/element/package.json b/packages/element/package.json
@@ -25,6 +25,9 @@
 		"react": "16.3.2",
 		"react-dom": "16.3.2"
 	},
+	"devDependencies": {
+		"enzyme": "3.3.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	}

diff --git a/packages/element/src/test/serialize.js b/packages/element/src/test/serialize.js
@@ -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,

diff --git a/packages/library-export-default-webpack-plugin/README.md b/packages/library-export-default-webpack-plugin/README.md
@@ -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

diff --git a/packages/postcss-themes/README.md b/packages/postcss-themes/README.md
@@ -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>