Merge pull request #45 from wordpress-mobile/feature/parser

Use the GB parser pipeline

__mocks__/nodejsMock.js

@@ -0,0 +1,3 @@
+/** @format */
+
+module.exports = {};

package.json

@@ -32,7 +32,8 @@
     "react-dom": "^16.2.0",
     "react-native-sass-transformer": "^1.1.1",
     "react-test-renderer": "16.2.0",
-    "remote-redux-devtools": "^0.5.12"
+    "remote-redux-devtools": "^0.5.12",
+    "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)",
@@ -52,22 +53,30 @@
     "lint:fix": "eslint $npm_package_config_jsfiles --fix"
   },
   "dependencies": {
+    "@wordpress/autop": "^1.0.6",
     "@wordpress/hooks": "^1.2.0",
     "@wordpress/i18n": "^1.1.0",
     "@wordpress/is-shallow-equal": "^1.0.1",
     "babel-plugin-module-resolver": "^3.1.0",
+    "babel-preset-es2015": "^6.24.1",
     "classnames": "^2.2.5",
+    "dom-react": "^2.2.1",
+    "domutils": "^1.7.0",
+    "hpq": "^1.2.0",
     "jed": "^1.1.1",
     "js-beautify": "^1.7.5",
+    "jsdom-jscore": "git+https://github.com/iamcco/jsdom-jscore-rn.git#6eac88dd5d5e7c21ce6382abde7dbc376d7f7f59",
     "jsx-to-string": "^1.3.1",
     "memize": "^1.0.5",
+    "node-libs-react-native": "^1.0.2",
     "node-sass": "^4.8.3",
     "prettier-eslint": "^8.8.1",
     "react": "16.3.1",
     "react-native": "0.55.4",
     "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",
-    "shallowequal": "^1.0.2"
+    "shallowequal": "^1.0.2",
+    "simple-html-tokenizer": "^0.5.1"
   }
 }

rn-cli.config.js

@@ -1,6 +1,12 @@
 /** @format */
 
+const enm = require( 'node-libs-react-native' );
+enm.fs = __dirname + '/__mocks__/nodejsMock.js';
+enm.net = __dirname + '/__mocks__/nodejsMock.js';
+enm.canvas = __dirname + '/__mocks__/nodejsMock.js';
+
 module.exports = {
+	extraNodeModules: enm,
 	getTransformModulePath() {
 		return require.resolve( './sass-transformer.js' );
 	},

src/app/App.js

@@ -1,5 +1,7 @@
 /** @format */
 
+import '../globals';
+
 import { Provider } from 'react-redux';
 import { setupStore } from '../store';
 import AppContainer from './AppContainer';

src/app/App.test.js

@@ -1,7 +1,5 @@
 /** @format */
 
-import './globals';
-
 import renderer from 'react-test-renderer';
 
 import App from './App';

src/globals.js

@@ -0,0 +1,20 @@
+/** @format */
+
+import { createElement } from '@gutenberg/element';
+import jsdom from 'jsdom-jscore';
+
+global.wp = {
+	element: {
+		createElement, // load the element creation function, needed by Gutenberg-web
+	},
+};
+
+const doc = jsdom.html( '', null, null );
+
+// inject a simple version of the missing createHTMLDocument method that `hpq` depends on
+doc.implementation.createHTMLDocument = function( html ) {
+	return jsdom.html( html, null, null );
+};
+
+// `hpq` depends on `document` be available globally
+global.document = doc;

src/parser/block-parser-code.test.js

@@ -0,0 +1,37 @@
+/** @format */
+
+import '../globals';
+
+import { registerCoreBlocks } from '@gutenberg/core-blocks';
+import { parse } from '@gutenberg/blocks';
+
+registerCoreBlocks();
+
+describe( 'Parser', () => {
+	const codeContent = `
+		if name == "World":
+			return "Hello World"
+		else:
+			return "Hello Pony"`;
+
+	const originalCodeBlockHtml = `<pre><code>${ codeContent }</code></pre>`;
+
+	const gbCodeBlockHtml = `
+		<!-- wp:code -->
+		${ originalCodeBlockHtml }
+		<!-- /wp:code -->`;
+
+	it( 'parses the code block ok', () => {
+		const codeBlockInstance = parse( gbCodeBlockHtml )[ 0 ];
+		expect( codeBlockInstance ).toBeTruthy();
+	} );
+
+	it( 'parses the code block content ok', () => {
+		const codeBlockInstance = parse( gbCodeBlockHtml )[ 0 ];
+
+		expect( codeBlockInstance.isValid ).toEqual( true );
+		expect( codeBlockInstance.name ).toEqual( 'core/code' );
+		expect( codeBlockInstance.innerBlocks ).toHaveLength( 0 );
+		expect( codeBlockInstance.originalContent ).toEqual( originalCodeBlockHtml );
+	} );
+} );

src/parser/block-parser-more.test.js

@@ -0,0 +1,31 @@
+/** @format */
+
+import '../globals';
+
+import { registerCoreBlocks } from '@gutenberg/core-blocks';
+import { parse } from '@gutenberg/blocks';
+
+registerCoreBlocks();
+
+describe( 'Parser', () => {
+	const originalMoreBlockHtml = '<!--more-->';
+
+	const gbMoreBlockHtml = `
+		<!-- wp:more -->
+		${ originalMoreBlockHtml }
+		<!-- /wp:more -->`;
+
+	it( 'parses the more block ok', () => {
+		const moreBlockInstance = parse( gbMoreBlockHtml )[ 0 ];
+		expect( moreBlockInstance ).toBeTruthy();
+	} );
+
+	it( 'parses the more block attributes ok', () => {
+		const moreBlockInstance = parse( gbMoreBlockHtml )[ 0 ];
+
+		expect( moreBlockInstance.isValid ).toEqual( true );
+		expect( moreBlockInstance.name ).toEqual( 'core/more' );
+		expect( moreBlockInstance.innerBlocks ).toHaveLength( 0 );
+		expect( moreBlockInstance.originalContent ).toEqual( originalMoreBlockHtml );
+	} );
+} );

src/store/index.js

@@ -5,7 +5,7 @@
 
 // Gutenberg imports
 import { registerCoreBlocks } from '@gutenberg/core-blocks';
-import { createBlock } from '@gutenberg/blocks';
+import { parse } from '@gutenberg/blocks';
 
 import { createStore } from 'redux';
 import { reducer } from './reducers';
@@ -26,13 +26,23 @@ export type StateType = {
 
 registerCoreBlocks();
 
-const codeBlockInstance = createBlock( 'core/code', {
-	content: 'if name == "World":\n    return "Hello World"\nelse:\n    return "Hello Pony"',
-} );
+const initialCodeBlockHtml = `
+<!-- wp:code -->
+<pre><code>if name == "World":
+    return "Hello World"
+else:
+    return "Hello Pony"</code></pre>
+<!-- /wp:code -->
+`;
 
-const moreBlockInstance = createBlock( 'core/more', {
-	customText: undefined,
-} );
+const initialMoreBlockHtml = `
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+`;
+
+const codeBlockInstance = parse( initialCodeBlockHtml )[ 0 ];
+const moreBlockInstance = parse( initialMoreBlockHtml )[ 0 ];
 
 const initialState: StateType = {
 	// TODO: get blocks list block state should be externalized (shared with Gutenberg at some point?).