Merge pull request #23 from NearSocial/dev

Release 1.1.0
NearSocial · Mar 30, 2023 · 7d434ab · 7d434ab
2 parents 2405564 + 13b3a31
commit 7d434ab
Show file tree

Hide file tree

Showing 6 changed files with 1,099 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,113 @@
 # Changelog
 
+## 1.1.0
+
+- Add `polygon` tag.
+- Allow specifying block height in the `src` string of `Widget` to lock a child component to a specific version i.e. `src="<path>@<block height>"`
+- Support custom React tags. Here is an example of how to use it:
+
+```jsx
+const BgDiv = ({ children, color }) => (
+  <div style={{ background: color }}>{children}</div>
+);
+
+return <BgDiv color="red">Hello World</BgDiv>;
+```
+
+- Add [nanoid](https://github.com/ai/nanoid#usage) support (available methods: `nanoid.nanoid()` and `nanoid.customAlphabet()`)
+- Add support for all [Radix](https://www.radix-ui.com/docs/primitives/overview/introduction) primitives (except for `Form`). Here is an example:
+
+```jsx
+const Wrapper = styled.div`
+  .SwitchRoot {
+    ...
+  }
+  .SwitchThumb {
+    ...
+  }
+`;
+
+return (
+  <Wrapper>
+    <Switch.Root className="SwitchRoot">
+      <Switch.Thumb className="SwitchThumb" />
+    </Switch.Root>
+  </Wrapper>
+);
+```
+
+- Use `styled-components` in combination with Radix primitives:
+
+```jsx
+const SwitchRoot = styled("Switch.Root")`
+  all: unset;
+  display: block;
+  width: 42px;
+  height: 25px;
+  background-color: var(--blackA9);
+  border-radius: 9999px;
+  position: relative;
+  box-shadow: 0 2px 10px var(--blackA7);
+
+  &[data-state="checked"] {
+    background-color: black;
+  }
+`;
+
+const SwitchThumb = styled("Switch.Thumb")`
+  all: unset;
+  display: block;
+  width: 21px;
+  height: 21px;
+  background-color: white;
+  border-radius: 9999px;
+  box-shadow: 0 2px 2px var(--blackA7);
+  transition: transform 100ms;
+  transform: translateX(2px);
+  will-change: transform;
+
+  &[data-state="checked"] {
+    transform: translateX(19px);
+  }
+`;
+
+return (
+  <SwitchRoot>
+    <SwitchThumb />
+  </SwitchRoot>
+);
+```
+
+- Use `ref="forwardedRef"` to forward refs through `<Widget />` to support Radix's `asChild` prop:
+
+```jsx
+// Dialog.jsx
+
+<AlertDialog.Trigger asChild>
+  <Widget
+    src="calebjacob.near/widget/TestButton"
+    props={{ label: "Click Me" }}
+  />
+</AlertDialog.Trigger>
+```
+
+```jsx
+// TestButton.jsx
+
+const Button = styled.button`
+  background: #f00;
+`;
+
+return (
+  <Button type="button" ref="forwardedRef">
+    {props.label}: Forwarded
+  </Button>
+);
+```
+
 ## 1.0.0
 
-- BREAKING: Removed Wallet Selector dependency. `selector` object is required to pass into `initNear` from `useInitNear` hook. 
+- BREAKING: Removed Wallet Selector dependency. `selector` object is required to pass into `initNear` from `useInitNear` hook.
 
 ## 0.3.0
 
@@ -18,4 +123,4 @@
 
 ## 0.2.0
 
-- Added `syntaxHighlighterProps` props to `Markdown` component. This allows to pass props to the syntax highlighter component for `code` sections of the markdown. Allowed properties are `wrapLines`, `lineProps`, `showLineNumbers` and `lineNumberStyle`. 
+- Added `syntaxHighlighterProps` props to `Markdown` component. This allows to pass props to the syntax highlighter component for `code` sections of the markdown. Allowed properties are `wrapLines`, `lineProps`, `showLineNumbers` and `lineNumberStyle`.
diff --git a/dist/index.js b/dist/index.js
diff --git a/package.json b/package.json
@@ -1,13 +1,40 @@
 {
   "name": "near-social-vm",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Near Social VM",
   "main": "dist/index.js",
   "files": [
     "dist"
   ],
   "dependencies": {
     "@braintree/sanitize-url": "6.0.0",
+    "@radix-ui/react-accordion": "^1.1.1",
+    "@radix-ui/react-alert-dialog": "^1.0.3",
+    "@radix-ui/react-aspect-ratio": "^1.0.2",
+    "@radix-ui/react-avatar": "^1.0.2",
+    "@radix-ui/react-checkbox": "^1.0.3",
+    "@radix-ui/react-collapsible": "^1.0.2",
+    "@radix-ui/react-context-menu": "^2.1.3",
+    "@radix-ui/react-dialog": "^1.0.3",
+    "@radix-ui/react-dropdown-menu": "^2.0.4",
+    "@radix-ui/react-hover-card": "^1.0.5",
+    "@radix-ui/react-label": "^2.0.1",
+    "@radix-ui/react-menubar": "^1.0.2",
+    "@radix-ui/react-navigation-menu": "^1.1.2",
+    "@radix-ui/react-popover": "^1.0.5",
+    "@radix-ui/react-progress": "^1.0.2",
+    "@radix-ui/react-radio-group": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.0.3",
+    "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-separator": "^1.0.2",
+    "@radix-ui/react-slider": "^1.1.1",
+    "@radix-ui/react-switch": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.3",
+    "@radix-ui/react-toast": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.0.2",
+    "@radix-ui/react-toggle-group": "^1.0.3",
+    "@radix-ui/react-toolbar": "^1.0.3",
+    "@radix-ui/react-tooltip": "^1.0.5",
     "acorn": "^8.8.0",
     "acorn-jsx": "^5.3.2",
     "big.js": "^6.1.1",
@@ -20,6 +47,7 @@
     "idb": "^7.1.1",
     "local-storage": "^2.0.0",
     "mdast-util-find-and-replace": "^2.0.0",
+    "nanoid": "^4.0.1",
     "near-api-js": "^0.45.1",
     "prettier": "^2.7.1",
     "react-bootstrap": "^2.5.0",

diff --git a/src/lib/components/Widget.js b/src/lib/components/Widget.js
@@ -62,12 +62,15 @@ const computeSrcOrCode = (src, code, configs) => {
   return srcOrCode;
 };
 
-export function Widget(props) {
-  const propsSrc = props.src;
-  const propsCode = props.code;
-  const propsProps = props.props;
-  const depth = props.depth || 0;
-  const propsConfig = props.config;
+export const Widget = React.forwardRef((props, forwardedRef) => {
+  const {
+    src: propsSrc,
+    code: propsCode,
+    depth,
+    config: propsConfig,
+    props: propsProps,
+    ...forwardedProps
+  } = props;
 
   const [nonce, setNonce] = useState(0);
   const [code, setCode] = useState(null);
@@ -112,11 +115,12 @@ export function Widget(props) {
     }
     if (srcOrCode?.src) {
       const src = srcOrCode.src;
+      const [srcPath, version] = src.split("@");
       const code = cache.socialGet(
         near,
-        src.toString(),
+        srcPath.toString(),
         false,
-        undefined,
+        version, // may be undefined, meaning `latest`
         undefined,
         () => {
           setNonce(nonce + 1);
@@ -229,6 +233,7 @@ export function Widget(props) {
       loading: false,
       accountId: accountId ?? null,
       widgetSrc: src,
+      networkId: near.config.networkId,
     });
   }, [near, accountId, src]);
 
@@ -242,6 +247,10 @@ export function Widget(props) {
       state,
       cacheNonce,
       version: vm.version,
+      forwardedProps: {
+        ...forwardedProps,
+        ref: forwardedRef,
+      },
     };
     if (deepEqual(vmInput, prevVmInput)) {
       return;
@@ -259,7 +268,16 @@ export function Widget(props) {
       );
       console.error(e);
     }
-  }, [vm, propsProps, context, state, cacheNonce, prevVmInput]);
+  }, [
+    vm,
+    propsProps,
+    context,
+    state,
+    cacheNonce,
+    prevVmInput,
+    forwardedRef,
+    forwardedProps,
+  ]);
 
   return element !== null && element !== undefined ? (
     <ErrorBoundary
@@ -293,4 +311,4 @@ export function Widget(props) {
   ) : (
     Loading
   );
-}
+});