working using new API to call a named SmartBlock

package.json

@@ -5,7 +5,8 @@
   "main": "./build/main.js",
   "scripts": {
     "build": "roamjs-scripts build",
-    "dev": "roamjs-scripts dev"
+    "dev": "roamjs-scripts dev",
+    "publish": "roamjs-scripts publish"
   },
   "license": "MIT",
   "devDependencies": {
@@ -20,7 +21,7 @@
     "eslint": "^7.32.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "roam-client": "^1.90.0",
+    "roam-client": "^1.91.0",
     "roamjs-components": "^0.25.1"
   }
 }

src/StarRating.tsx

@@ -12,7 +12,7 @@ function StarIcon({
     className: string;
   }) {
     return (
-      <svg width="100%" height="100%" className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
+      <svg width="100%" height="100%" className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
     );
   }
 
@@ -55,10 +55,14 @@ function StarIcon({
   // This one also has an explicit return
   const StarRating = ({
     initialValue,
-    blockUid
+    maximumStars,
+    blockUid,
+    smartBlockTemplate
   }: {
     initialValue: number;
-    blockUid: string
+    maximumStars: number;
+    blockUid: string;
+    smartBlockTemplate: string;
   }) : JSX.Element => {
     const [rating, setRating] = useState(initialValue);
     const [hoverRating, setHoverRating] = useState(initialValue);
@@ -73,14 +77,30 @@ function StarIcon({
       window.roamAlphaAPI.updateBlock({
         block: { uid: blockUid, string: index.toString() },
       });
-
+      console.log(`StarRating: blockUid ${blockUid} smartBlockTemplate ${smartBlockTemplate}`)
+      if( smartBlockTemplate ) { 
+        const valueBlockUid: string = window.roamAlphaAPI.util.generateUID();
+        window.roamAlphaAPI.createBlock({
+          location: { "parent-uid": blockUid, order: 1000 /* at end */ },
+          block: { string: '' , uid: valueBlockUid},
+        });
+        window.roamjs.extension.smartblocks.triggerSmartblock({
+          srcName: smartBlockTemplate,
+          targetUid: valueBlockUid,
+          variables: {
+            'rating': index.toString(),
+            'wow': 'Wee'
+          }
+        })
+      };
     };
     return(
       <div className="roam-star-rating">
-        {[1, 2, 3, 4, 5].map((index) => {
+        {Array.from(Array(maximumStars).keys()).map((index) => {
           return (
             <RatingIcon 
-              index={index} 
+              key={index+1} 
+              index={index+1} 
               rating={rating} 
               hoverRating={hoverRating} 
               onMouseEnter={onMouseEnter} 
@@ -93,14 +113,16 @@ function StarIcon({
   }
 
 export const DemoTallyCounter = (): JSX.Element => (
-  <StarRating blockUid={''} initialValue={0} />
+  <StarRating maximumStars={5} blockUid={''} initialValue={0} smartBlockTemplate={null}/>
 );
 export const renderStartRating = (
   initialValue: number,
+  maximumStars: number,
   blockUid: string,
+  smartBlockTemplate: string,
   p: HTMLElement
 ): void => {
-    ReactDOM.render(<StarRating blockUid={blockUid} initialValue={initialValue} />, p);
+    ReactDOM.render(<StarRating maximumStars={maximumStars} blockUid={blockUid} initialValue={initialValue} smartBlockTemplate={smartBlockTemplate}/>, p);
 }
 
 export default StarRating;

src/index.ts

@@ -1,4 +1,4 @@
-import { addStyle, toConfig, runExtension, createButtonObserver, getUidsFromButton, getTreeByBlockUid } from "roam-client";
+import { addStyle, toConfig, runExtension, createButtonObserver, getUidsFromButton, getTreeByBlockUid, getTreeByPageName } from "roam-client";
 import { createConfigObserver } from "roamjs-components";
 import { renderStartRating } from "./StarRating";
 
@@ -30,32 +30,20 @@ runExtension(ID, () => {
     config: {
       tabs: [
         {
-          id: "import",
+          id: "rating",
           fields: [
             {
-              type: "multitext",
-              title: "calendars",
+              type: "number",
+              title: "maximum",
               description:
-                'The calendar ids to import events from. To find your calendar id, go to your calendar settings and scroll down to "Integrate Calendar".',
-              defaultValue: ["dvargas92495@gmail.com"],
-            },
-            {
-              type: "flag",
-              title: "include event link",
-              description:
-                "Whether or not to hyperlink the summary with the event link. Ignored if 'format' is specified.",
-            },
-            {
-              type: "flag",
-              title: "skip free",
-              description:
-                "Whether or not to filter out events marked as 'free'",
+                "The maximum stars in a rating",
+              defaultValue: 5,
             },
             {
               type: "text",
-              title: "format",
+              title: "template",
               description:
-                "The format events should output in when imported into Roam",
+                "The template to run after a rating",
             },
           ],
         },
@@ -68,14 +56,38 @@ runExtension(ID, () => {
     attribute: "rating-button",
     render: (b: HTMLButtonElement) => {
       const { blockUid } = getUidsFromButton(b);
-      const tree = getTreeByBlockUid(blockUid);
-      const initialValueNode = tree.children.find(
+      let tree = getTreeByBlockUid(blockUid);
+      let valueBlockUid = null;
+      let initialValue = 1;
+      let initialValueNode = tree.children.find(
         (c) => !isNaN(parseInt(c.text))
       );
-      const initialValue = initialValueNode
+      if (!initialValueNode) {
+        valueBlockUid = window.roamAlphaAPI.util.generateUID();
+        window.roamAlphaAPI.createBlock({
+          location: { "parent-uid": blockUid, order: 0 },
+          block: { string: initialValue.toString() , uid: valueBlockUid},
+        });
+      }
+      else {
+        valueBlockUid = initialValueNode.uid;
+        initialValue = initialValueNode
         ? parseInt(initialValueNode.text)
         : 0;
-        renderStartRating(initialValue, initialValueNode.uid, b.parentElement);
+      }
+
+      const configTree = getTreeByPageName(CONFIG);
+      const ratingTree = configTree.find((t) => /rating/i.test(t.text));
+
+      const maxSetting = ratingTree?.children
+        ?.find?.((t) => /maximum/i.test(t.text))
+        ?.children?.[0]?.text?.trim?.();
+
+      const template = ratingTree?.children
+      ?.find?.((t) => /template/i.test(t.text))
+      ?.children?.[0]?.text?.trim?.();
+
+      renderStartRating(initialValue, Number.parseInt(maxSetting), valueBlockUid, template, b.parentElement);
     },
   });