@frontkom/block-react-parser 1.1.0-beta.1 → 1.1.0-beta.2

package/.nvmrc

@@ -1 +1 @@
-16.16.0
+v20.10.0

package/changelogs/CHANGELOG-1.1.0-beta.2.md

@@ -0,0 +1,6 @@
+## [1.1.0-beta.2](https://github.com/frontkom/block-react-parser/compare/v1.1.0-beta.1...v1.1.0-beta.2) (2024-03-13)
+
+
+### Features
+
+* merge beta to develop ([1144e9e](https://github.com/frontkom/block-react-parser/commit/1144e9e79a7171c4524e4fdbaa0fa1cc90d77378))

package/dist/components/Block.js

@@ -10,6 +10,9 @@ var _innerNode = _interopRequireDefault(require("../utils/innerNode"));
 var _Context = require("./Context");
 var _htmlAttribs = _interopRequireDefault(require("../utils/htmlAttribs"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 /**
  * Block element.
  *
@@ -17,20 +20,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @returns {JSX.Element | null | undefined}
  */
 function Block(_ref) {
-  let {
-    block
-  } = _ref;
-  const {
-    blockName = null,
-    innerContent,
-    innerBlocks
-  } = block;
-  const CustomBlock = (0, _Context.useBlockComponent)(blockName);
-  const htmlAttrs = (0, _htmlAttribs.default)(innerContent[0]);
-  const blockExtended = {
-    ...block,
-    htmlAttrs
-  };
+  var block = _ref.block;
+  var _block$blockName = block.blockName,
+    blockName = _block$blockName === void 0 ? null : _block$blockName,
+    innerContent = block.innerContent,
+    innerBlocks = block.innerBlocks;
+  var CustomBlock = (0, _Context.useBlockComponent)(blockName);
+  var htmlAttrs = (0, _htmlAttribs.default)(innerContent[0]);
+  var blockExtended = _objectSpread(_objectSpread({}, block), {}, {
+    htmlAttrs: htmlAttrs
+  });
   if (CustomBlock) {
     return /*#__PURE__*/_react.default.createElement(CustomBlock, {
       block: blockExtended
@@ -45,7 +44,7 @@ function Block(_ref) {
   if (innerContent.length === 1 && (innerContent[0] === '\n' || innerContent[0].substring(0, 2) === '</')) {
     return null;
   }
-  const node = (0, _innerNode.default)(innerBlocks, innerContent);
+  var node = (0, _innerNode.default)(innerBlocks, innerContent);
   if (node) {
     return /*#__PURE__*/_react.default.createElement(_Tree.default, {
       node: node,

package/dist/components/Context.js

@@ -9,23 +9,21 @@ exports.useComponentContext = useComponentContext;
 exports.useTagComponent = useTagComponent;
 var _react = require("react");
 var _elements = require("../elements");
-const TxContext = /*#__PURE__*/(0, _react.createContext)();
-const {
-  Provider
-} = TxContext;
+var TxContext = /*#__PURE__*/(0, _react.createContext)();
+var Provider = TxContext.Provider;
 exports.Provider = Provider;
 function useComponentContext() {
   return (0, _react.useContext)(TxContext);
 }
 function useBlockComponent(name) {
-  const {
-    CustomBlocks = _elements.coreBlocks
-  } = (0, _react.useContext)(TxContext);
+  var _useContext = (0, _react.useContext)(TxContext),
+    _useContext$CustomBlo = _useContext.CustomBlocks,
+    CustomBlocks = _useContext$CustomBlo === void 0 ? _elements.coreBlocks : _useContext$CustomBlo;
   return name && CustomBlocks[name];
 }
 function useTagComponent(tag) {
-  const {
-    CustomTags = _elements.coreTags
-  } = (0, _react.useContext)(TxContext);
+  var _useContext2 = (0, _react.useContext)(TxContext),
+    _useContext2$CustomTa = _useContext2.CustomTags,
+    CustomTags = _useContext2$CustomTa === void 0 ? _elements.coreTags : _useContext2$CustomTa;
   return tag && CustomTags[tag];
 }

package/dist/components/Tree.js

@@ -11,20 +11,20 @@ var _attribsProps = _interopRequireDefault(require("../utils/attribsProps"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Tree(_ref) {
   var _node$children2;
-  let {
-    node,
-    block
-  } = _ref;
-  const CustomTag = (0, _Context.useTagComponent)(node.name);
+  var node = _ref.node,
+    block = _ref.block;
+  var CustomTag = (0, _Context.useTagComponent)(node.name);
   (0, _attribsProps.default)(node.attribs);
   if (node.type === 'text') {
     if (node.data === '[innerBlocks]') {
       var _block$innerBlocks;
       // eslint-disable-next-line react/no-array-index-key
-      return (_block$innerBlocks = block.innerBlocks) === null || _block$innerBlocks === void 0 ? void 0 : _block$innerBlocks.map((inner, index) => /*#__PURE__*/_react.default.createElement(_Block.default, {
-        block: inner,
-        key: index
-      }));
+      return (_block$innerBlocks = block.innerBlocks) === null || _block$innerBlocks === void 0 ? void 0 : _block$innerBlocks.map(function (inner, index) {
+        return /*#__PURE__*/_react.default.createElement(_Block.default, {
+          block: inner,
+          key: index
+        });
+      });
     }
     return node.data;
   }
@@ -32,27 +32,33 @@ function Tree(_ref) {
   // Handle selfclosed elements (???)
   if (CustomTag) {
     var _node$children;
-    const tagChildren = (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.map((child, index) =>
-    /*#__PURE__*/
-    // eslint-disable-next-line react/no-array-index-key
-    _react.default.createElement(Tree, {
-      node: child,
-      block: block,
-      key: index
-    }));
+    var tagChildren = (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.map(function (child, index) {
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        _react.default.createElement(Tree, {
+          node: child,
+          block: block,
+          key: index
+        })
+      );
+    });
     return /*#__PURE__*/_react.default.createElement(CustomTag, {
       node: tagChildren,
       attribs: node.attribs
     });
   }
-  const Component = node.name;
-  const attrs = (0, _attribsProps.default)(node.attribs);
-  return /*#__PURE__*/_react.default.createElement(Component, attrs, (_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.map((child, index) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  _react.default.createElement(Tree, {
-    node: child,
-    block: block,
-    key: index
-  })));
+  var Component = node.name;
+  var attrs = (0, _attribsProps.default)(node.attribs);
+  return /*#__PURE__*/_react.default.createElement(Component, attrs, (_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.map(function (child, index) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      _react.default.createElement(Tree, {
+        node: child,
+        block: block,
+        key: index
+      })
+    );
+  }));
 }

package/dist/elements/index.js

@@ -8,37 +8,32 @@ var _react = _interopRequireDefault(require("react"));
 var _img = _interopRequireDefault(require("./tags/img"));
 var _selfClosing = _interopRequireDefault(require("./tags/selfClosing"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const coreTags = exports.coreTags = {
-  img: _ref => {
-    let {
-      attribs
-    } = _ref;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var coreTags = {
+  img: function img(_ref) {
+    var attribs = _ref.attribs;
     return /*#__PURE__*/_react.default.createElement(_img.default, {
       attribs: attribs
     });
   },
-  br: _ref2 => {
-    let {
-      attribs
-    } = _ref2;
+  br: function br(_ref2) {
+    var attribs = _ref2.attribs;
     return /*#__PURE__*/_react.default.createElement(_selfClosing.default, {
       attribs: attribs,
       tag: "br"
     });
   },
-  hr: _ref3 => {
-    let {
-      attribs
-    } = _ref3;
+  hr: function hr(_ref3) {
+    var attribs = _ref3.attribs;
     return /*#__PURE__*/_react.default.createElement(_selfClosing.default, {
       attribs: attribs,
       tag: "hr"
     });
   },
-  meta: _ref4 => {
-    let {
-      attribs
-    } = _ref4;
+  meta: function meta(_ref4) {
+    var attribs = _ref4.attribs;
     return null;
   }
   // area: ({attribs}) => <SelfClosing attribs={attribs} tag="area" />,
@@ -53,7 +48,8 @@ const coreTags = exports.coreTags = {
   // track: ({attribs}) => <SelfClosing attribs={attribs} tag="track" />,
   // wbr: ({attribs}) => <SelfClosing attribs={attribs} tag="wbr" />,
 };
-const coreBlocks = exports.coreBlocks = {
+exports.coreTags = coreTags;
+var coreBlocks = {
   // 'core/archives': ({ block }) => doSomething(),
   // 'core/audio': ({ block }) => doSomething(),
   // 'core/avatar': ({ block }) => doSomething(),
@@ -155,12 +151,10 @@ const coreBlocks = exports.coreBlocks = {
  * @param {object} tags - Optional object with custom blocks definitions. Empty by default.
  * @returns {object} Object with blocks definitions
  */
-const customTags = function () {
-  let tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return {
-    ...coreTags,
-    ...tags
-  };
+exports.coreBlocks = coreBlocks;
+var customTags = function customTags() {
+  var tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _objectSpread(_objectSpread({}, coreTags), tags);
 };
 
 /**
@@ -171,11 +165,8 @@ const customTags = function () {
  * @returns {object} Object with blocks definitions
  */
 exports.customTags = customTags;
-const customBlocks = function () {
-  let blocks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return {
-    ...coreBlocks,
-    ...blocks
-  };
+var customBlocks = function customBlocks() {
+  var blocks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _objectSpread(_objectSpread({}, coreBlocks), blocks);
 };
 exports.customBlocks = customBlocks;

package/dist/elements/tags/img.js

@@ -5,16 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Image;
 function Image(_ref) {
-  let {
-    attribs
-  } = _ref;
-  const {
-    alt = '',
-    class: className = '',
-    src,
-    height,
-    width
-  } = attribs;
+  var attribs = _ref.attribs;
+  var _attribs$alt = attribs.alt,
+    alt = _attribs$alt === void 0 ? '' : _attribs$alt,
+    _attribs$class = attribs.class,
+    className = _attribs$class === void 0 ? '' : _attribs$class,
+    src = attribs.src,
+    height = attribs.height,
+    width = attribs.width;
   return /*#__PURE__*/React.createElement("img", {
     alt: alt,
     className: className,

package/dist/elements/tags/selfClosing.js

@@ -7,11 +7,9 @@ exports.default = SelfClosing;
 var _attribsProps = _interopRequireDefault(require("../../utils/attribsProps"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function SelfClosing(_ref) {
-  let {
-    attribs,
-    tag
-  } = _ref;
-  const Component = tag;
-  const attributes = (0, _attribsProps.default)(attribs);
+  var attribs = _ref.attribs,
+    tag = _ref.tag;
+  var Component = tag;
+  var attributes = (0, _attribsProps.default)(attribs);
   return /*#__PURE__*/React.createElement(Component, attributes);
 }

package/dist/index.js

@@ -5,49 +5,49 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Block", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _Block.default;
   }
 });
 Object.defineProperty(exports, "Provider", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _Context.Provider;
   }
 });
 Object.defineProperty(exports, "Tree", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _Tree.default;
   }
 });
 Object.defineProperty(exports, "attribsProps", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _attribsProps.default;
   }
 });
 Object.defineProperty(exports, "customBlocks", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _elements.customBlocks;
   }
 });
 Object.defineProperty(exports, "customTags", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _elements.customTags;
   }
 });
 Object.defineProperty(exports, "innerNode", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _innerNode.default;
   }
 });
 Object.defineProperty(exports, "parseBlocks", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _parseBlocks.default;
   }
 });

package/dist/utils/attribsProps.js

@@ -7,11 +7,11 @@ exports.default = void 0;
 var _reactAttrConverter = _interopRequireDefault(require("react-attr-converter"));
 var _styleToJs = _interopRequireDefault(require("style-to-js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const attribsProps = attribs => {
+var attribsProps = function attribsProps(attribs) {
   if (attribs === undefined) {
     return {};
   }
-  const props = Object.fromEntries(Object.entries(attribs).map(attribute => {
+  var props = Object.fromEntries(Object.entries(attribs).map(function (attribute) {
     if (attribute[0] === 'style') {
       return [(0, _reactAttrConverter.default)(attribute[0]), (0, _styleToJs.default)(attribute[1])];
     }
@@ -19,4 +19,5 @@ const attribsProps = attribs => {
   }));
   return props;
 };
-var _default = exports.default = attribsProps;
+var _default = attribsProps;
+exports.default = _default;

package/dist/utils/htmlAttribs.js

@@ -7,15 +7,15 @@ exports.default = void 0;
 var _htmlparser = require("htmlparser2");
 var _attribsProps2 = _interopRequireDefault(require("./attribsProps"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const htmlAttribs = html => {
-  const htmlFragment = html === null || html === void 0 ? void 0 : html.trim();
+var htmlAttribs = function htmlAttribs(html) {
+  var htmlFragment = html === null || html === void 0 ? void 0 : html.trim();
   if (htmlFragment && htmlFragment.length > 1) {
     var _parsedFragment$child;
-    const parsedFragment = (0, _htmlparser.parseDocument)(htmlFragment, {
+    var parsedFragment = (0, _htmlparser.parseDocument)(htmlFragment, {
       lowerCaseTags: true,
       recognizeSelfClosing: true
     });
-    const attribs = parsedFragment === null || parsedFragment === void 0 || (_parsedFragment$child = parsedFragment.children[0]) === null || _parsedFragment$child === void 0 ? void 0 : _parsedFragment$child.attribs;
+    var attribs = parsedFragment === null || parsedFragment === void 0 ? void 0 : (_parsedFragment$child = parsedFragment.children[0]) === null || _parsedFragment$child === void 0 ? void 0 : _parsedFragment$child.attribs;
     if (Object.keys(attribs).length !== 0) {
       var _attribsProps;
       return (_attribsProps = (0, _attribsProps2.default)(attribs)) !== null && _attribsProps !== void 0 ? _attribsProps : {};
@@ -23,4 +23,5 @@ const htmlAttribs = html => {
   }
   return {};
 };
-var _default = exports.default = htmlAttribs;
+var _default = htmlAttribs;
+exports.default = _default;

package/dist/utils/innerNode.js

@@ -5,16 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _htmlparser = require("htmlparser2");
-const innerNode = (innerBlocks, innerContent) => {
+var innerNode = function innerNode(innerBlocks, innerContent) {
   var _tree$children$;
   // If no inner blocks, return the block markup.
   // If inner blocks, return the wrapping markup.
-  const innerHtml = !innerBlocks.length ? innerContent[0] : "".concat(innerContent[0], "[innerBlocks]").concat(innerContent[innerContent.length - 1]);
-  const html = innerHtml ? innerHtml.trim() : '';
-  const tree = (0, _htmlparser.parseDocument)(html, {
+  var innerHtml = !innerBlocks.length ? innerContent[0] : "".concat(innerContent[0], "[innerBlocks]").concat(innerContent[innerContent.length - 1]);
+  var html = innerHtml ? innerHtml.trim() : '';
+  var tree = (0, _htmlparser.parseDocument)(html, {
     lowerCaseTags: true,
     recognizeSelfClosing: true
   });
   return (_tree$children$ = tree.children[0]) !== null && _tree$children$ !== void 0 ? _tree$children$ : null;
 };
-var _default = exports.default = innerNode;
+var _default = innerNode;
+exports.default = _default;

package/dist/utils/parseBlocks.js

@@ -13,8 +13,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {string} html - markup rendered by Gutenberg editor.
  * @returns {JSX.Element[]}
  */
-const parseBlocks = html => (0, _blockSerializationDefaultParser.parse)(html.trim()).map((block, key) => /*#__PURE__*/React.createElement(_Block.default, {
-  block: block,
-  key: key
-}));
-var _default = exports.default = parseBlocks;
+var parseBlocks = function parseBlocks(html) {
+  return (0, _blockSerializationDefaultParser.parse)(html.trim()).map(function (block, key) {
+    return /*#__PURE__*/React.createElement(_Block.default, {
+      block: block,
+      key: key
+    });
+  });
+};
+var _default = parseBlocks;
+exports.default = _default;

package/package.json

@@ -1,12 +1,13 @@
 {
-  "$schema": "https://json-schema.org/package.json",
   "name": "@frontkom/block-react-parser",
-  "version": "1.1.0-beta.1",
+  "version": "1.1.0-beta.2",
   "description": "Gutenberg-generated HTML to React parser.",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
-    "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files"
+    "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files",
+    "format": "prettier --write \"**/*.{js,jsx,md}\"",
+    "lint": "eslint --quiet src/"
   },
   "keywords": [
     "html",
@@ -15,12 +16,6 @@
     "gutenberg"
   ],
   "author": "Roberto Ornelas <rob@frontkom.com>",
-  "contributors": [
-    {
-      "name": "Krzysztof Branecki",
-      "email": "krzysztof.branecki@frontkom.com"
-    }
-  ],
   "license": "ISC",
   "dependencies": {
     "@wordpress/block-serialization-default-parser": "^4.21.0",
@@ -33,12 +28,21 @@
     "@babel/core": "^7.20.2",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
+    "eslint": "^8.31.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.4",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.8.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "babel": {
     "presets": [