diff --git a/.babelrc b/.babelrc index 2f920cb08f..64993c5ecd 100644 --- a/.babelrc +++ b/.babelrc @@ -12,7 +12,6 @@ "react-native-aztec": "./react-native-aztec", "@wordpress/blocks": "./blocks", "@wordpress/editor": "./editor", - "@wordpress/element": "./element", "@gutenberg": "./gutenberg" }, "extensions": [ diff --git a/.flowconfig b/.flowconfig index ea45b479d7..f0033200c8 100644 --- a/.flowconfig +++ b/.flowconfig @@ -59,6 +59,9 @@ /node_modules/metro/.* /node_modules/react-native/.* +; Ignore the node_modules folders in GB packages +/gutenberg/packages/element/node_modules/.* + [include] [libs] @@ -82,7 +85,9 @@ munge_underscores=true module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' module.name_mapper='@gutenberg' -> '/gutenberg' -module.name_mapper='@wordpress/element' -> '/gutenberg/element' +module.name_mapper='@wordpress/data' -> '/gutenberg/packages/data' +module.name_mapper='@wordpress/element' -> '/gutenberg/packages/element' +module.name_mapper='@wordpress/deprecated' -> '/gutenberg/packages/deprecated' ; mock/ignore style files module.name_mapper='.*\(.scss\)' -> 'empty/object' diff --git a/.travis/travis-checks-js.sh b/.travis/travis-checks-js.sh index 37672602f4..99ddcb42e5 100755 --- a/.travis/travis-checks-js.sh +++ b/.travis/travis-checks-js.sh @@ -19,6 +19,11 @@ if [ "$CHECK_CORRECTNESS" = true ] ; then fi if [ "$CHECK_TESTS" = true ] ; then + # build the Gutenberg packages + pushd gutenberg + npm i || pFail + popd + # we'll run the tests twich (once for each platform) if the platform env var is not set if [[ -z "${TEST_RN_PLATFORM}" ]] ; then TEST_RN_PLATFORM=android npm test || pFail diff --git a/README.md b/README.md index 803042c235..8c60ec36dc 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,14 @@ Before running the demo app, you need to download and install the project depend npm install ``` +The Gutenberg packages need to be installed and built. This is done via the following commands: + +``` +pushd gutenberg +npm install +popd +``` + ## Run Note: the most recent and complete version of this guide is available [here](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md). diff --git a/gutenberg b/gutenberg index 8e4c2f9c4c..87252f2628 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 8e4c2f9c4c41512fc70934481b9f612ac79c3ccb +Subproject commit 87252f2628f565b114d71de699cda9e8b8cf0f3c diff --git a/jest.config.js b/jest.config.js index 042fd6ee06..b6720a072b 100644 --- a/jest.config.js +++ b/jest.config.js @@ -30,7 +30,8 @@ module.exports = { 'node', ], moduleNameMapper: { - '@wordpress\\/(blocks|editor|element)$': '/gutenberg/$1', + '@wordpress\\/(blocks|editor)$': '/gutenberg/$1', + '@wordpress\\/(data|element|deprecated)$': '/gutenberg/packages/$1', '@gutenberg': '/gutenberg', // Mock the CSS modules. See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets diff --git a/package.json b/package.json index af2bd122c3..90ca5544a8 100644 --- a/package.json +++ b/package.json @@ -36,18 +36,23 @@ "sprintf-js": "^1.1.1" }, "scripts": { - "check-gb-unused-babelrc": "cd gutenberg/; git ls-files --error-unmatch .babelrc 2>/dev/null; ss=$?; cd ..; (if [[ $ss -gt 0 ]]; then (exit 0); else (echo \"'.babelrc' is tracked in Gutenberg, cannot overwrite!\"; exit 1); fi)", + "check-gb-unused-babelrc": "cd gutenberg/; git ls-files --error-unmatch .babelrc 2>/dev/null; tracked=$?; cd ..; (if [ \"$tracked\" -gt 0 ]; then (exit 0); else (echo \"'.babelrc' is tracked in Gutenberg, cannot overwrite!\"; exit 1); fi)", "bypass-gb-babel": "echo '{}' > gutenberg/.babelrc", + "test:bypass-gb-babel": "echo '{\"presets\": [\"@wordpress/default\"]}' > gutenberg/.babelrc", "pre-build": "yarn check-gb-unused-babelrc && yarn bypass-gb-babel", + "test:pre-build": "yarn check-gb-unused-babelrc && yarn test:bypass-gb-babel", "start": "yarn pre-build && yarn react-native start", + "start:reset": "yarn clean:runtime && yarn start --reset-cache", "start:debug": "yarn pre-build && node --inspect-brk node_modules/.bin/react-native start", "android": "react-native run-android", "ios": "react-native run-ios", - "test": "cross-env NODE_ENV=test node node_modules/jest/bin/jest.js --verbose --config jest.config.js", - "test:debug": "cross-env NODE_ENV=test node --inspect-brk node_modules/jest/bin/jest.js --runInBand --verbose --config jest.config.js", + "test": "yarn test:pre-build && cross-env NODE_ENV=test node node_modules/jest/bin/jest.js --verbose --config jest.config.js", + "test:debug": "yarn pre-build && cross-env NODE_ENV=test node --inspect-brk node_modules/jest/bin/jest.js --runInBand --verbose --config jest.config.js", "flow": "flow", "prettier": "prettier-eslint --write $npm_package_config_jsfiles $npm_package_config_scssfiles", - "clean": "yarn cache clean; yarn test --clearCache; watchman watch-del-all; rm -rf node_modules; rm -f yarn.lock; rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/metro-cache-*; rm -rf $TMPDIR/jest_*", + "clean": "yarn clean:setup; yarn clean:runtime", + "clean:runtime": "yarn cache clean; yarn test --clearCache; watchman watch-del-all; rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/metro-cache-*; rm -rf $TMPDIR/jest_*", + "clean:setup": "rm -rf node_modules; rm -f yarn.lock", "clean:install": "yarn clean; yarn", "lint": "eslint $npm_package_config_jsfiles", "lint:fix": "eslint $npm_package_config_jsfiles --fix" @@ -76,7 +81,9 @@ "react-native-recyclerview-list": "git+https://github.com/wordpress-mobile/react-native-recyclerview-list.git#bfccbaab6b5954e18f8b0ed441ba38275853b79c", "react-redux": "^5.0.7", "redux": "^3.7.2", + "rememo": "^3.0.0", "shallowequal": "^1.0.2", - "simple-html-tokenizer": "^0.5.1" + "simple-html-tokenizer": "^0.5.1", + "tinycolor2": "^1.4.1" } } diff --git a/sass-transformer.js b/sass-transformer.js index ed6438694c..234a86ce3b 100644 --- a/sass-transformer.js +++ b/sass-transformer.js @@ -60,10 +60,11 @@ if ( reactNativeMinorVersion >= 52 ) { } // TODO: need to find a way to pass the include paths and the default asset files via some config -const autoImportIncludePaths = [ path.join( path.dirname( __filename ), 'gutenberg/edit-post/assets/stylesheets' ) ]; +const autoImportIncludePaths = [ + path.join( path.dirname( __filename ), 'gutenberg/edit-post/assets/stylesheets' ), +]; const autoImportAssets = [ '_colors.scss', - '_admin-schemes.scss', '_breakpoints.scss', '_variables.scss', '_mixins.scss', diff --git a/src/globals.js b/src/globals.js index 32b337ce55..991ad555a2 100644 --- a/src/globals.js +++ b/src/globals.js @@ -1,6 +1,6 @@ /** @format */ -import { createElement } from '@gutenberg/element'; +import { createElement } from '@wordpress/element'; import jsdom from 'jsdom-jscore'; global.wp = { diff --git a/yarn.lock b/yarn.lock index 0e6f22bdf4..a7c5bbdce6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6547,6 +6547,10 @@ remark-parse@4.0.0: vfile-location "^2.0.0" xtend "^4.0.1" +rememo@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/rememo/-/rememo-3.0.0.tgz#06e8e76e108865cc1e9b73329db49f844eaf8392" + remote-redux-devtools@^0.5.12: version "0.5.12" resolved "https://registry.yarnpkg.com/remote-redux-devtools/-/remote-redux-devtools-0.5.12.tgz#42cb95dfa9e54c1d9671317c5e7bba41e68caec2" @@ -7409,6 +7413,10 @@ timers-browserify@^2.0.2: dependencies: setimmediate "^1.0.4" +tinycolor2@^1.4.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8" + tmp@^0.0.33: version "0.0.33" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"