Merge pull request #142 from NearSocial/release-2.5.0

## 2.5.0

- Fix `default` case for the switch statement in `VM`.
- Add a VM feature, `enableComponentSrcDataKey`, which adds the `data-component` attribute specifying the path of the comonent responsible for rendering the DOM element.
- Add support for VM.require when using redirectMap.
- Fixes an issue with VM.require not retaining context in migration to initGlobalFunctions.
- Add `onLink` and `onImage` to Markdown component. It allows to display links and images differently.
- Expose all VM functions into the state directly, it simplifies VM readability and implementation.
- Expose certain native objects directly into the state. It should improve access to the functions.
- Update the way events and errors are passed to the functions. 
  - For events, expose `preventDefault()` and `stopPropagation()` functions.
  NOTE: Previously, all React's `SyntheticEvent`s were getting `preventDefault()` called by default.
  - For errors, expose `message`, `name` and `type`.
- Fix `vm.depth` not being initialized.
- Introduce `useMemo` hook. Similar to the React hook, it calculates a value and memoizes it, only recalculating when one of its dependencies changes.

```jsx
const data = [
  //...some large array
];

const filteredData = useMemo(() => {
  console.log("Filtering data");
  return data.filter(/* some filtering criteria */);
}, [data]);

return (
  <div>
    {filteredData.map(item => (
      <div key={item.id}>{item.name}</div>
    ))}
  </div>
);
```

- Introduce `useCallback` hook. Similarly to the React hook, it memoizes a callback function and returns that memoized version unless one of its dependencies changes.
 ```jsx
 const incrementCounter = useCallback(() => {
  setCounter(counter + 1);
}, [counter]);

return (
  <div>
    Counter = {counter}
    <div>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  </div>
);
```

CHANGELOG.md

@@ -1,5 +1,56 @@
 # Changelog
 
+## 2.5.0
+
+- Fix `default` case for the switch statement in `VM`.
+- Add a VM feature, `enableComponentSrcDataKey`, which adds the `data-component` attribute specifying the path of the comonent responsible for rendering the DOM element.
+- Add support for VM.require when using redirectMap.
+- Fixes an issue with VM.require not retaining context in migration to initGlobalFunctions.
+- Add `onLink` and `onImage` to Markdown component. It allows to display links and images differently.
+- Expose all VM functions into the state directly, it simplifies VM readability and implementation.
+- Expose certain native objects directly into the state. It should improve access to the functions.
+- Update the way events and errors are passed to the functions. 
+  - For events, expose `preventDefault()` and `stopPropagation()` functions.
+  NOTE: Previously, all React's `SyntheticEvent`s were getting `preventDefault()` called by default.
+  - For errors, expose `message`, `name` and `type`.
+- Fix `vm.depth` not being initialized.
+- Introduce `useMemo` hook. Similar to the React hook, it calculates a value and memoizes it, only recalculating when one of its dependencies changes.
+
+```jsx
+const data = [
+  //...some large array
+];
+
+const filteredData = useMemo(() => {
+  console.log("Filtering data");
+  return data.filter(/* some filtering criteria */);
+}, [data]);
+
+return (
+  <div>
+    {filteredData.map(item => (
+      <div key={item.id}>{item.name}</div>
+    ))}
+  </div>
+);
+```
+
+- Introduce `useCallback` hook. Similarly to the React hook, it memoizes a callback function and returns that memoized version unless one of its dependencies changes.
+ ```jsx
+ const incrementCounter = useCallback(() => {
+  setCounter(counter + 1);
+}, [counter]);
+
+return (
+  <div>
+    Counter = {counter}
+    <div>
+      <button onClick={incrementCounter}>Increment</button>
+    </div>
+  </div>
+);
+```
+
 ## 2.4.2
 
 - Add missing code changes (`cacheOptions` and `lodash`) from 2.4.0.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "near-social-vm",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "description": "Near Social VM",
   "main": "dist/index.js",
   "files": [

src/lib/components/Markdown.js

@@ -7,8 +7,15 @@ import mentions from "./remark/mentions";
 import hashtags from "./remark/hashtags";
 
 export const Markdown = (props) => {
-  const { onLinkClick, text, onMention, onHashtag, syntaxHighlighterProps } =
-    props;
+  const {
+    onLink,
+    onLinkClick,
+    text,
+    onMention,
+    onHashtag,
+    onImage,
+    syntaxHighlighterProps,
+  } = props;
   return (
     <ReactMarkdown
       plugins={[]}
@@ -25,12 +32,19 @@ export const Markdown = (props) => {
           return <strong {...props}>{children}</strong>;
         },
         a: ({ node, ...props }) =>
-          onLinkClick ? (
+          onLink ? (
+            onLink({ ...props, href: node.properties?.href })
+          ) : onLinkClick ? (
             <a onClick={onLinkClick} {...props} />
           ) : (
             <a target="_blank" {...props} />
           ),
-        img: ({ node, ...props }) => <img className="img-fluid" {...props} />,
+        img: ({ node, ...props }) =>
+          onImage ? (
+            onImage({ ...props })
+          ) : (
+            <img className="img-fluid" {...props} />
+          ),
         blockquote: ({ node, ...props }) => (
           <blockquote className="blockquote" {...props} />
         ),

src/lib/components/Widget.js

@@ -17,6 +17,7 @@ import {
   isFunction,
   Loading,
   TGas,
+  computeSrcOrCode,
 } from "../data/utils";
 import { ErrorBoundary } from "react-error-boundary";
 import { useCache } from "../data/cache";
@@ -26,27 +27,6 @@ import Big from "big.js";
 import uuid from "react-uuid";
 import { EthersProviderContext } from "./ethers";
 
-const computeSrcOrCode = (src, code, configs) => {
-  let srcOrCode = src ? { src } : code ? { code } : null;
-  for (const config of configs || []) {
-    if (srcOrCode?.src) {
-      const src = srcOrCode.src;
-      let value = isObject(config?.redirectMap) && config.redirectMap[src];
-      if (!value) {
-        try {
-          value = isFunction(config?.redirect) && config.redirect(src);
-        } catch {}
-      }
-      if (isString(value)) {
-        srcOrCode = { src: value };
-      } else if (isString(value?.code)) {
-        return { code: value.code };
-      }
-    }
-  }
-  return srcOrCode;
-};
-
 export const Widget = React.forwardRef((props, forwardedRef) => {
   const {
     loading,

src/lib/data/near.js

@@ -211,13 +211,18 @@ async function web4ViewCall(contractId, methodName, args, fallback) {
   }
 }
 
+/**
+ * Current VM Features:
+ * - enableComponentSrcDataKey: Allows enabling the component source `data-component` attribute for rendered DOM elements. Disabled by default.
+**/
 async function _initNear({
   networkId,
   config,
   keyStore,
   selector,
   walletConnectCallback = () => {},
   customElements = {},
+  features = {},
 }) {
   if (!config) {
     config = {};
@@ -250,6 +255,7 @@ async function _initNear({
     selector,
     keyStore,
     nearConnection,
+    features
   };
 
   _near.nearArchivalConnection = nearAPI.Connection.fromConfig({

src/lib/data/utils.js

@@ -395,4 +395,33 @@ export const deepCopy = (o) => {
   }
 };
 
+export const filterValues = (o) => {
+  return isObject(o)
+    ? Object.fromEntries(
+        Object.entries(o).filter(([key, value]) => value !== undefined)
+      )
+    : o;
+};
+
 export const deepEqual = equal;
+
+export const computeSrcOrCode = (src, code, configs) => {
+  let srcOrCode = src ? { src } : code ? { code } : null;
+  for (const config of configs || []) {
+    if (srcOrCode?.src) {
+      const src = srcOrCode.src;
+      let value = isObject(config?.redirectMap) && config.redirectMap[src];
+      if (!value) {
+        try {
+          value = isFunction(config?.redirect) && config.redirect(src);
+        } catch {}
+      }
+      if (isString(value)) {
+        srcOrCode = { src: value };
+      } else if (isString(value?.code)) {
+        return { code: value.code };
+      }
+    }
+  }
+  return srcOrCode;
+};