Expose the grammar parser to the mobile app #7691
Conversation
Warning is: "Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined."
hypest
added
[Feature] Parsing
|
Any ideas on how to improve the testcov on this one? Not sure how to add tests for the native mobile code here. |
packages/element/src/index.native.js
Outdated
| * | ||
| * @return {WPElement} Dangerously-rendering element. | ||
| */ | ||
| export function RawHTML( { children, ...props } ) { |
There was a problem hiding this comment.
Can we move this component to its own file (raw-hatml.js?) and reference it from both index files to avoid code duplication and possible sync issues in the future?
There was a problem hiding this comment.
We need to decide what to do about #7664, where I proposed moving the parser and grammar to their own package and skip Webpack loader altogether. This will solve the issue with the code coverage, but more importantly, it will make this module to work independently to Webpack config when its published to npm. |
Right. I think that ideally, we want to have a simple and robust way to expose the parser to both the web and the native mobile app. So, #7664 in on the right path, for many reasons. That said, it's not clear to me yet how soon we'll get there so, this PR with its pre-generated parser is a solution that helps unblock work on the native mobile side. I've already added tests for the pre-generated parser so, if it's OK with you and provided #7664 doesn't get merged this week, I'd prefer if we merge this PR and optimize on top of it. Let me know what you think @gziolo . |
blocks/api/test/parser.js
Outdated
| * | ||
| * @return {Array} Block list. | ||
| */ | ||
| export function parsePreGenerated( content ) { |
There was a problem hiding this comment.
We can use the following code to avoid duplication in the blocks/api/parsers.js:
/**
* Creates a parse implementation for the post content which returns a list of blocks.
*
* @param {Function} parseImplementation Parse implementation.
*
* @return {Function} An implementation which parses the post content.
*/
export const createParse = ( parseImplementation ) =>
( content ) => parseImplementation( content ).reduce( ( memo, blockNode ) => {
const block = createBlockWithFallback( blockNode );
if ( block ) {
memo.push( block );
}
return memo;
}, [] );
/**
* Parses the post content with a PegJS grammar and returns a list of blocks.
*
* @param {string} content The post content.
*
* @return {Array} Block list.
*/
export const parseWithGrammar = createParse( grammarParse );
blocks/api/test/parser.js
Outdated
| type: 'string', | ||
| source: 'text', | ||
| // run the test cases using the PegJS defined parser | ||
| testCases( parsePegjs ); |
There was a problem hiding this comment.
Can we put those test cases in their own describe blocks to make it easier to debug which version of the parser failed?
There was a problem hiding this comment.
Separated the 2 run in different describe() blocks with 2a012ff.
| @@ -0,0 +1,20 @@ | |||
| import { createElement } from 'react'; | |||
There was a problem hiding this comment.
As a convention, we add dependencies blocks for import statements, in this case it will be:
/**
* External dependencies
*/There was a problem hiding this comment.
Ah, missed that, sorry :(. Fixed with 9ace658.
H/T to @gziolo for providing the createParse() function.
|
Addressed the new review @gziolo , ready for another pass, thanks! |
Description
Expose the
parsefunction from theparsermodule to the native mobile app variant of the Block Api.How has this been tested?
Besides successfully running
npm testandnpm run dev, tested this using this PR from the native app repo.Types of changes
pegjsparser (sourced and transformed via webpack) to be loaded for the web while a pre-generated parser is loaded on the native mobile since the transformation machinery is not yet available thereRawHTMLfunction to theelementpackage for the native mobileChecklist: