⚡ Remove duplicated operations from tokens sidebar

frontend/src/app/main/ui/workspace/tokens/changes.cljs

@@ -38,7 +38,7 @@
   Optionally remove attributes from `attributes-to-remove`,
   this is useful for applying a single attribute from an attributes set
   while removing other applied tokens from this set."
-  [{:keys [attributes attributes-to-remove token shape-ids on-update-shape] :as _props}]
+  [{:keys [attributes attributes-to-remove token shape-ids on-update-shape]}]
   (ptk/reify ::apply-token
     ptk/WatchEvent
     (watch [_ state _]

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -285,7 +285,7 @@
        [:> theme-sets-list* props]]]]))
 
 (mf/defc tokens-tab*
-  []
+  [{:keys [tokens-lib]}]
   (let [objects         (mf/deref refs/workspace-page-objects)
         selected        (mf/deref refs/selected-shapes)
         open-status     (mf/deref ref:token-type-open-status)
@@ -295,16 +295,36 @@
           (into [] (keep (d/getf objects)) selected))
 
         active-theme-tokens
-        (sd/use-active-theme-tokens)
+        (mf/with-memo [tokens-lib]
+          (if tokens-lib
+            (ctob/get-active-themes-set-tokens tokens-lib)
+            {}))
+
+        ;; Resolve tokens as second step
+        active-theme-tokens
+        (sd/use-resolved-tokens* active-theme-tokens)
+
+        ;; This only checks for the currently explicitly selected set
+        ;; name, it is ephimeral and can be nil
+        selected-token-set-name
+        (mf/deref refs/selected-token-set-name)
+
+        ;; If we have not selected any set explicitly we just
+        ;; select the first one from the list of sets
+        selected-token-set-tokens
+        (if selected-token-set-name
+          (-> (ctob/get-set tokens-lib selected-token-set-name)
+              (get :tokens))
+          (-> (ctob/get-sets tokens-lib)
+              (first)
+              (get :tokens)))
 
         tokens
-        (sd/use-resolved-workspace-tokens)
+        (mf/with-memo [active-theme-tokens selected-token-set-tokens]
+          (merge active-theme-tokens selected-token-set-tokens))
 
-        selected-token-set-tokens
+        tokens
-        (mf/deref refs/workspace-selected-token-set-tokens)
+        (sd/use-resolved-tokens* tokens)
-
-        selected-token-set-name
-        (mf/deref refs/workspace-selected-token-set-name)
 
         tokens-by-type
         (mf/with-memo [tokens selected-token-set-tokens]

frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs

@@ -166,10 +166,10 @@
   ([tokens-tree get-token]
    (resolve-tokens-tree+ tokens-tree get-token (StyleDictionary. default-config)))
   ([tokens-tree get-token style-dictionary]
-   (-> style-dictionary
+   (let [sdict (-> style-dictionary
-       (add-tokens tokens-tree)
+                   (add-tokens tokens-tree)
-       (build-dictionary)
+                   (build-dictionary))]
-       (p/then #(process-sd-tokens % get-token)))))
+     (p/fmap #(process-sd-tokens % get-token) sdict))))
 
 (defn sd-token-name [^js sd-token]
   (.. sd-token -original -name))
@@ -177,8 +177,10 @@
 (defn sd-token-uuid [^js sd-token]
   (uuid (.-uuid (.-id ^js sd-token))))
 
-(defn resolve-tokens+ [tokens]
+(defn resolve-tokens+
-  (resolve-tokens-tree+ (ctob/tokens-tree tokens) #(get tokens (sd-token-name %))))
+  [tokens]
+  (let [tokens-tree (ctob/tokens-tree tokens)]
+    (resolve-tokens-tree+ tokens-tree #(get tokens (sd-token-name %)))))
 
 (defn resolve-tokens-interactive+
   "Interactive check of resolving tokens.
@@ -267,36 +269,45 @@
              :or {cache-atom !tokens-cache}
              :as config}]
   (let [tokens-state (mf/use-state (get @cache-atom tokens))]
-    (mf/use-effect
+
-     (mf/deps tokens config)
+    ;; FIXME: this with effect with trigger all the time because
-     (fn []
+    ;; `config` will be always a different instance
-       (let [cached (get @cache-atom tokens)]
+
-         (cond
+    (mf/with-effect [tokens config]
-           (nil? tokens) nil
+      (let [cached (get @cache-atom tokens)]
-           ;; The tokens are already processing somewhere
+        (cond
-           (p/promise? cached) (-> cached
+          (nil? tokens) nil
-                                   (p/then #(reset! tokens-state %))
+          ;; The tokens are already processing somewhere
-                                   #_(p/catch js/console.error))
+          (p/promise? cached) (-> cached
-           ;; Get the cached entry
+                                  (p/then #(reset! tokens-state %))
-           (some? cached) (reset! tokens-state cached)
+                                  #_(p/catch js/console.error))
-           ;; No cached entry, start processing
+          ;; Get the cached entry
-           :else (let [promise+ (if interactive?
+          (some? cached) (reset! tokens-state cached)
-                                  (resolve-tokens-interactive+ tokens)
+          ;; No cached entry, start processing
-                                  (resolve-tokens+ tokens))]
+          :else (let [promise+ (if interactive?
-                   (swap! cache-atom assoc tokens promise+)
+                                 (resolve-tokens-interactive+ tokens)
-                   (p/then promise+ (fn [resolved-tokens]
+                                 (resolve-tokens+ tokens))]
-                                      (swap! cache-atom assoc tokens resolved-tokens)
+                  (swap! cache-atom assoc tokens promise+)
-                                      (reset! tokens-state resolved-tokens))))))))
+                  (p/then promise+ (fn [resolved-tokens]
+                                     (swap! cache-atom assoc tokens resolved-tokens)
+                                     (reset! tokens-state resolved-tokens)))))))
     @tokens-state))
 
-(defn use-resolved-workspace-tokens []
+(defn use-resolved-tokens*
-  (let [active-theme-tokens (mf/deref refs/workspace-active-theme-sets-tokens)
+  "This hook will return the unresolved tokens as state until they are
-        selected-token-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
+  processed, then the state will be updated with the resolved tokens.
-        prefer-selected-token-set-tokens (merge active-theme-tokens selected-token-set-tokens)]
-    (use-resolved-tokens prefer-selected-token-set-tokens)))
 
-(defn use-active-theme-tokens
+  This is a cache-less, simplified version of use-resolved-tokens
-  "A hook that returns active tokens for the current active theme"
+  hook."
-  []
+  [tokens & {:keys [interactive?]}]
-  (-> (mf/deref refs/workspace-active-theme-sets-tokens)
+  (let [state* (mf/use-state tokens)]
-      (use-resolved-tokens {:cache-atom !theme-tokens-cache})))
+    (mf/with-effect [tokens interactive?]
+      (when (seq tokens)
+        (let [promise (if interactive?
+                        (resolve-tokens-interactive+ tokens)
+                        (resolve-tokens+ tokens))]
+
+          (->> promise
+               (p/fmap (fn [resolved-tokens]
+                         (reset! state* resolved-tokens)))))))
+    @state*))