WIP: debugging

shadow-cljs.edn

@@ -45,6 +45,9 @@
    ;; To match the folder created by Nix build of JSBundle.
    :output-dir "result"
    :init-fn status-im.core/init
+   :build-hooks [(status-im.setup.build-hooks.worklets/transform-output)
+                 (status-im.setup.build-hooks.worklets/optimize-start)
+                 (status-im.setup.build-hooks.worklets/optimize-output)]
    ;; When false, the Shadow-CLJS watcher won't automatically refresh
    ;; the target files (a.k.a hot reload). When false, you can manually
    ;; reload by calling `shadow.cljs.devtools.api/watch-compile-all!`.

src/react_native/reanimated.cljs

@@ -20,7 +20,8 @@
                      LinearTransition
                      enableLayoutAnimations
                      useAnimatedScrollHandler
-                     runOnJS)]
+                     runOnJS)
+     :as reanimated*]
     ["react-native-redash" :refer (withPause)]
     [oops.core :as oops]
     [react-native.flat-list :as rn-flat-list]
@@ -113,6 +114,8 @@
   (when (and anim (some? v))
     (set! (.-value anim) v)))
 
+(def interpolate* reanimated*/interpolate)
+
 (defn interpolate
   ([shared-value input-range output-range]
    (interpolate shared-value input-range output-range nil))

src/status_im/contexts/profile/settings/header/avatar.cljs

@@ -1,34 +1,36 @@
-(ns status-im.contexts.profile.settings.header.avatar
+(ns ^:workletize status-im.contexts.profile.settings.header.avatar
   (:require [quo.core :as quo]
             [quo.theme :as quo.theme]
             [react-native.reanimated :as reanimated]
             [status-im.contexts.profile.settings.header.style :as style]))
 
-(def scroll-animation-input-range [0 50])
-(def header-extrapolation-option
-  {:extrapolateLeft  "clamp"
-   :extrapolateRight "clamp"})
-
 (defn f-avatar
   [{:keys [scroll-y full-name online? profile-picture customization-color]}]
-  (let [image-scale-animation       (reanimated/interpolate scroll-y
-                                                            scroll-animation-input-range
-                                                            [1 0.4]
-                                                            header-extrapolation-option)
-        image-top-margin-animation  (reanimated/interpolate scroll-y
-                                                            scroll-animation-input-range
-                                                            [0 20]
-                                                            header-extrapolation-option)
-        image-side-margin-animation (reanimated/interpolate scroll-y
-                                                            scroll-animation-input-range
-                                                            [0 -20]
-                                                            header-extrapolation-option)
-        theme                       (quo.theme/get-theme)]
-    [reanimated/view
-     {:style (style/avatar-container theme
-                                     image-scale-animation
-                                     image-top-margin-animation
-                                     image-side-margin-animation)}
+  (let [avatar-total-size     88
+        border-height         4
+        translation-to-bottom (fn [scale inverse-scale]
+                                (js* "'worklet'")
+                                (let [current-avatar-size (* avatar-total-size (- 1 scale))
+                                      current-center      (/ current-avatar-size 2)]
+                                  (* current-center inverse-scale)))
+        transform             (reanimated/use-animated-style
+                               (fn []
+                                 (js* "'worklet'")
+                                 (let [scale         (reanimated/interpolate*
+                                                      (.-value scroll-y)
+                                                      #js [0 48]
+                                                      #js [1 0.4]
+                                                      "clamp")
+                                       inverse-scale (/ 1 scale)
+                                       translation   (translation-to-bottom scale inverse-scale)
+                                       bottom        (* border-height inverse-scale (- 1 scale))]
+                                   #js
+                                    {:transform #js
+                                                 [#js {:scale scale}
+                                                  #js {:translateX (- translation)}
+                                                  #js {:translateY (- translation bottom)}]})))
+        theme                 (quo.theme/get-theme)]
+    [reanimated/view {:style [transform (style/avatar-container theme)]}
      [quo/user-avatar
       {:full-name           full-name
        :online?             online?

src/status_im/contexts/profile/settings/header/header_shape.cljs

@@ -1,10 +1,11 @@
-(ns status-im.contexts.profile.settings.header.header-shape
+(ns ^:workletize status-im.contexts.profile.settings.header.header-shape
   (:require [quo.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.reanimated :as reanimated]
             [react-native.svg :as svg]
             [status-im.contexts.profile.settings.header.style :as style]))
 
+
 (defn left-radius
   [background-color]
   [svg/svg {:width "20" :height "20" :viewBox "0 0 20 20" :fill "none"}
@@ -21,13 +22,17 @@
 
 (defn f-view
   [{:keys [scroll-y customization-color theme]}]
-  (let [background-color  (colors/resolve-color customization-color theme 40)
-        opacity-animation (reanimated/interpolate scroll-y
-                                                  [0 45 50]
-                                                  [1 1 0])]
+  (let [background-color (colors/resolve-color customization-color theme 40)
+        opacity          (reanimated/use-animated-style
+                          (fn []
+                            (js* "'worklet'")
+                            #js
+                             {:opacity (reanimated/interpolate* (.-value scroll-y)
+                                                                #js [0 45 50]
+                                                                #js [1 1 0])}))]
     [:<>
      [rn/view {:style (style/header-middle-shape background-color)}]
-     [reanimated/view {:style (style/radius-container opacity-animation)}
+     [reanimated/view {:style [opacity style/radius-container]}
       [left-radius background-color]
       [right-radius background-color]]]))
 

src/status_im/contexts/profile/settings/header/style.cljs

@@ -27,19 +27,13 @@
    :height           48
    :flex-grow        1})
 
-(defn radius-container
-  [opacity-animation]
-  {:opacity         opacity-animation
-   :flex-direction  :row
+(def radius-container
+  {:flex-direction  :row
    :justify-content :space-between})
 
 (defn avatar-container
-  [theme scale-animation top-margin-animation side-margin-animation]
-  [{:transform     [{:scale scale-animation}]
-    :margin-top    top-margin-animation
-    :margin-left   side-margin-animation
-    :margin-bottom side-margin-animation}
-   {:align-items   :flex-start
-    :border-width  4
-    :border-color  (colors/theme-colors colors/border-avatar-light colors/neutral-80-opa-80 theme)
-    :border-radius 100}])
+  [theme]
+  {:align-items   :flex-start
+   :border-width  4
+   :border-color  (colors/theme-colors colors/border-avatar-light colors/neutral-80-opa-80 theme)
+   :border-radius 44})

src/status_im/setup/build_hooks/worklets.clj

@@ -0,0 +1,101 @@
+(ns status-im.setup.build-hooks.worklets
+  (:require [clojure.set])
+  (:import (java.io BufferedReader InputStreamReader PrintWriter)))
+
+(defn- update-js-output
+  [build-state code-processed]
+  (reduce-kv (fn [prev-build-state ns-key new-code]
+               (assoc-in prev-build-state [:output ns-key :js] new-code))
+             build-state
+             code-processed))
+
+(defn- get-workletized-code!
+  [code-seq store-atom]
+  (doall
+   (map (fn [[[_ filepath :as ns-key] js-code]]
+           (println "Workletizing:" filepath) ;; TODO: debug remove
+           (try
+             (let [command       "node workletize-code.js"
+                   process       (.exec (Runtime/getRuntime) command)
+                   output-stream (.getOutputStream process)
+                   writer        (PrintWriter. output-stream)
+                   reader        (BufferedReader. (InputStreamReader. (.getInputStream process)))]
+               (.println writer js-code)
+               (.flush writer)
+               (.close writer)
+
+               (let [output     (apply str (interleave (line-seq reader) (repeat "\n")))
+                     exit-code (.waitFor process)]
+                 (println ">>>>>>>>>>>>>>>>>>>>>>>>EXIT CODE:" exit-code)
+                 (println "RESULT for "filepath ":\n\n" output "\n\n")
+                 (swap! store-atom assoc ns-key output)))
+
+             (catch Exception e
+               (println (str "Exception while workletizing: " filepath "\n")
+                        (.getMessage e)))))
+         code-seq)))
+
+(defn- get-js-code-with-ns
+  [build-state-output file-path]
+  (let [ns-key  [:shadow.build.classpath/resource file-path]
+        js-code (get-in build-state-output [ns-key :js])]
+    [ns-key js-code]))
+
+(defn- get-files-to-workletize
+  [{:keys [shadow.build/build-info compiler-env] :as _build-state}]
+  (let [files-compiled      (->> build-info
+                                 :compiled
+                                 (map second)
+                                 (set))
+        namespaces-metadata (->> compiler-env
+                                 :cljs.analyzer/namespaces
+                                 vals
+                                 (map :meta))
+        files-marked        (->> namespaces-metadata
+                                 (filter :workletize)
+                                 (map :file)
+                                 (set))]
+    (clojure.set/intersection files-compiled files-marked)))
+
+(defn transform-output
+  {:shadow.build/stage :compile-finish}
+  [{:keys [output] :as build-state}]
+  (tap> [:start build-state])
+  (let [files-to-workletize  (get-files-to-workletize build-state)
+        js-code-with-ns      (map #(get-js-code-with-ns output %) files-to-workletize)
+        code-processed-store (atom {})]
+    (get-workletized-code! js-code-with-ns code-processed-store)
+    (tap> [:end (update-js-output build-state @code-processed-store)])
+    (update-js-output build-state @code-processed-store)
+    (println "\n\n>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> CODE PROCESSED <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<")
+    (prn @code-processed-store)
+    (println ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ______________ <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<\n\n")
+    )
+  build-state
+  )
+
+(defn optimize-start
+  {:shadow.build/stage :optimize-prepare}
+  [{:keys [output] :as build-state}]
+  (let [files-to-workletize (get-files-to-workletize build-state)
+        js-code-with-ns     (map #(get-js-code-with-ns output %) (conj files-to-workletize "status_im/contexts/profile/settings/header/style.cljs"))
+        ]
+    (println "START ---------------------------------------------------------" )
+    (prn js-code-with-ns)
+    (println "================================================================---------------------------------------------------------" )
+    #_(println "output: ---------------------------------------------------------------"
+               js-code-with-ns)
+    build-state))
+
+(defn optimize-output
+  {:shadow.build/stage :optimize-finish}
+  [{:keys [output] :as build-state}]
+  (let [files-to-workletize (get-files-to-workletize build-state)
+        js-code-with-ns     (map #(get-js-code-with-ns output %) (conj files-to-workletize "status_im/contexts/profile/settings/header/style.cljs"))
+        ]
+    (println "END ---------------------------------------------------------" )
+    (prn js-code-with-ns)
+    (println "================================================================---------------------------------------------------------" )
+    #_(println "output: ---------------------------------------------------------------"
+               js-code-with-ns)
+    build-state))

workletize-code.js

@@ -0,0 +1,22 @@
+const process = require('process');
+const babel = require('@babel/core');
+const plugin = require('./node_modules/react-native-reanimated/plugin');
+
+function transformString(inputString) {
+  return babel.transformSync(inputString, {
+    filename: '/dev/null',
+    compact: false,
+    plugins: [plugin],
+  }).code;
+}
+
+process.stdin.setEncoding('utf8');
+let input = '';
+process.stdin.on('data', (chunk) => {
+  input += chunk;
+});
+
+process.stdin.on('end', () => {
+  const result = transformString(input);
+  process.stdout.write(result);
+});