@automattic/interpolate-components 1.2.1 → 1.2.2

package/CHANGELOG.md

@@ -7,9 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.2]
+
+- Declare React 19 compatibility for package consumers (#111721).
+
 ## [1.2.1]
 
 ### Changed
+
 - @types/react peer dependency increased from >=16.2.0 to >=16.14.23
 
 ## [1.2.0]

package/dist/cjs/index.js

@@ -1,137 +1,107 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = interpolate;
-
 var _react = require("react");
-
 var _tokenize = _interopRequireDefault(require("./tokenize"));
-
 function getCloseIndex(openIndex, tokens) {
   const openToken = tokens[openIndex];
   let nestLevel = 0;
-
   for (let i = openIndex + 1; i < tokens.length; i++) {
     const token = tokens[i];
-
     if (token.value === openToken.value) {
       if (token.type === 'componentOpen') {
         nestLevel++;
         continue;
       }
-
       if (token.type === 'componentClose') {
         if (nestLevel === 0) {
           return i;
         }
-
         nestLevel--;
       }
     }
-  } // if we get this far, there was no matching close token
-
-
+  }
+  // if we get this far, there was no matching close token
   throw new Error('Missing closing component token `' + openToken.value + '`');
 }
-
 function buildChildren(tokens, components) {
   let children = [];
   let openComponent;
   let openIndex;
-
   for (let i = 0; i < tokens.length; i++) {
     const token = tokens[i];
-
     if (token.type === 'string') {
       children.push(token.value);
       continue;
-    } // component node should at least be set
-
-
+    }
+    // component node should at least be set
     if (components[token.value] === undefined) {
       throw new Error(`Invalid interpolation, missing component node: \`${token.value}\``);
-    } // should be either ReactElement or null (both type "object"), all other types deprecated
-
-
+    }
+    // should be either ReactElement or null (both type "object"), all other types deprecated
     if (typeof components[token.value] !== 'object') {
       throw new Error(`Invalid interpolation, component node must be a ReactElement or null: \`${token.value}\``);
-    } // we should never see a componentClose token in this loop
-
-
+    }
+    // we should never see a componentClose token in this loop
     if (token.type === 'componentClose') {
       throw new Error(`Missing opening component token: \`${token.value}\``);
     }
-
     if (token.type === 'componentOpen') {
       openComponent = components[token.value];
       openIndex = i;
       break;
-    } // componentSelfClosing token
-
-
+    }
+    // componentSelfClosing token
     children.push(components[token.value]);
     continue;
   }
-
   if (openComponent) {
     const closeIndex = getCloseIndex(openIndex, tokens);
     const grandChildTokens = tokens.slice(openIndex + 1, closeIndex);
     const grandChildren = buildChildren(grandChildTokens, components);
     const clonedOpenComponent = /*#__PURE__*/(0, _react.cloneElement)(openComponent, {}, grandChildren);
     children.push(clonedOpenComponent);
-
     if (closeIndex < tokens.length - 1) {
       const siblingTokens = tokens.slice(closeIndex + 1);
       const siblings = buildChildren(siblingTokens, components);
       children = children.concat(siblings);
     }
   }
-
   children = children.filter(Boolean);
-
   if (children.length === 0) {
     return null;
   }
-
   if (children.length === 1) {
     return children[0];
   }
-
   return /*#__PURE__*/(0, _react.createElement)(_react.Fragment, null, ...children);
 }
-
 function interpolate(options) {
   const {
     mixedString,
     components,
     throwErrors
   } = options;
-
   if (!components) {
     return mixedString;
   }
-
   if (typeof components !== 'object') {
     if (throwErrors) {
       throw new Error(`Interpolation Error: unable to process \`${mixedString}\` because components is not an object`);
     }
-
     return mixedString;
   }
-
   const tokens = (0, _tokenize.default)(mixedString);
-
   try {
     return buildChildren(tokens, components);
   } catch (error) {
     if (throwErrors) {
       throw new Error(`Interpolation Error: unable to process \`${mixedString}\` because of error \`${error.message}\``);
     }
-
     return mixedString;
   }
 }

package/dist/cjs/tokenize.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = tokenize;
-
 function identifyToken(item) {
   // {{/example}}
   if (item.startsWith('{{/')) {
@@ -12,32 +11,27 @@ function identifyToken(item) {
       type: 'componentClose',
       value: item.replace(/\W/g, '')
     };
-  } // {{example /}}
-
-
+  }
+  // {{example /}}
   if (item.endsWith('/}}')) {
     return {
       type: 'componentSelfClosing',
       value: item.replace(/\W/g, '')
     };
-  } // {{example}}
-
-
+  }
+  // {{example}}
   if (item.startsWith('{{')) {
     return {
       type: 'componentOpen',
       value: item.replace(/\W/g, '')
     };
   }
-
   return {
     type: 'string',
     value: item
   };
 }
-
 function tokenize(mixedString) {
   const tokenStrings = mixedString.split(/(\{\{\/?\s*\w+\s*\/?\}\})/g); // split to components and strings
-
   return tokenStrings.map(identifyToken);
 }

package/dist/esm/index.js

@@ -1,127 +1,100 @@
 import { cloneElement, createElement, Fragment } from 'react';
 import tokenize from './tokenize';
-
 function getCloseIndex(openIndex, tokens) {
   const openToken = tokens[openIndex];
   let nestLevel = 0;
-
   for (let i = openIndex + 1; i < tokens.length; i++) {
     const token = tokens[i];
-
     if (token.value === openToken.value) {
       if (token.type === 'componentOpen') {
         nestLevel++;
         continue;
       }
-
       if (token.type === 'componentClose') {
         if (nestLevel === 0) {
           return i;
         }
-
         nestLevel--;
       }
     }
-  } // if we get this far, there was no matching close token
-
-
+  }
+  // if we get this far, there was no matching close token
   throw new Error('Missing closing component token `' + openToken.value + '`');
 }
-
 function buildChildren(tokens, components) {
   let children = [];
   let openComponent;
   let openIndex;
-
   for (let i = 0; i < tokens.length; i++) {
     const token = tokens[i];
-
     if (token.type === 'string') {
       children.push(token.value);
       continue;
-    } // component node should at least be set
-
-
+    }
+    // component node should at least be set
     if (components[token.value] === undefined) {
       throw new Error(`Invalid interpolation, missing component node: \`${token.value}\``);
-    } // should be either ReactElement or null (both type "object"), all other types deprecated
-
-
+    }
+    // should be either ReactElement or null (both type "object"), all other types deprecated
     if (typeof components[token.value] !== 'object') {
       throw new Error(`Invalid interpolation, component node must be a ReactElement or null: \`${token.value}\``);
-    } // we should never see a componentClose token in this loop
-
-
+    }
+    // we should never see a componentClose token in this loop
     if (token.type === 'componentClose') {
       throw new Error(`Missing opening component token: \`${token.value}\``);
     }
-
     if (token.type === 'componentOpen') {
       openComponent = components[token.value];
       openIndex = i;
       break;
-    } // componentSelfClosing token
-
-
+    }
+    // componentSelfClosing token
     children.push(components[token.value]);
     continue;
   }
-
   if (openComponent) {
     const closeIndex = getCloseIndex(openIndex, tokens);
     const grandChildTokens = tokens.slice(openIndex + 1, closeIndex);
     const grandChildren = buildChildren(grandChildTokens, components);
     const clonedOpenComponent = /*#__PURE__*/cloneElement(openComponent, {}, grandChildren);
     children.push(clonedOpenComponent);
-
     if (closeIndex < tokens.length - 1) {
       const siblingTokens = tokens.slice(closeIndex + 1);
       const siblings = buildChildren(siblingTokens, components);
       children = children.concat(siblings);
     }
   }
-
   children = children.filter(Boolean);
-
   if (children.length === 0) {
     return null;
   }
-
   if (children.length === 1) {
     return children[0];
   }
-
   return /*#__PURE__*/createElement(Fragment, null, ...children);
 }
-
 export default function interpolate(options) {
   const {
     mixedString,
     components,
     throwErrors
   } = options;
-
   if (!components) {
     return mixedString;
   }
-
   if (typeof components !== 'object') {
     if (throwErrors) {
       throw new Error(`Interpolation Error: unable to process \`${mixedString}\` because components is not an object`);
     }
-
     return mixedString;
   }
-
   const tokens = tokenize(mixedString);
-
   try {
     return buildChildren(tokens, components);
   } catch (error) {
     if (throwErrors) {
       throw new Error(`Interpolation Error: unable to process \`${mixedString}\` because of error \`${error.message}\``);
     }
-
     return mixedString;
   }
 }

package/dist/esm/tokenize.js

@@ -5,32 +5,27 @@ function identifyToken(item) {
       type: 'componentClose',
       value: item.replace(/\W/g, '')
     };
-  } // {{example /}}
-
-
+  }
+  // {{example /}}
   if (item.endsWith('/}}')) {
     return {
       type: 'componentSelfClosing',
       value: item.replace(/\W/g, '')
     };
-  } // {{example}}
-
-
+  }
+  // {{example}}
   if (item.startsWith('{{')) {
     return {
       type: 'componentOpen',
       value: item.replace(/\W/g, '')
     };
   }
-
   return {
     type: 'string',
     value: item
   };
 }
-
 export default function tokenize(mixedString) {
   const tokenStrings = mixedString.split(/(\{\{\/?\s*\w+\s*\/?\}\})/g); // split to components and strings
-
   return tokenStrings.map(identifyToken);
 }

package/package.json

@@ -1,10 +1,18 @@
 {
   "name": "@automattic/interpolate-components",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Convert strings into structured React components.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "calypso:src": "src/index.js",
+  "exports": {
+    ".": {
+      "calypso:src": "./src/index.js",
+      "types": "./types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -20,10 +28,10 @@
   "homepage": "https://github.com/Automattic/wp-calypso/tree/HEAD/packages/interpolate-components#readme",
   "devDependencies": {
     "@automattic/calypso-typescript-config": "^1.0.0",
-    "react-dom": "^17.0.2"
+    "react-dom": "^18.3.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.14.23",
+    "@types/react": ">=16.14.65",
     "react": ">=16.2.0"
   },
   "peerDependenciesMeta": {
@@ -33,7 +41,7 @@
   },
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "run -T transpile",
+    "build": "transpile",
     "prepack": "yarn run clean && yarn run build"
   },
   "types": "types"

package/types/index.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 interface InterpolateOptions {
 	mixedString: string;
 	components?: Record< string, JSX.Element >;