portfolio icon indicating copy to clipboard operation
portfolio copied to clipboard

feat: implement global decorator config

Open taehee-sp opened this issue 6 months ago • 3 comments

issue https://github.com/cjohansen/portfolio/issues/28

I implemented global decorator support for portfolio.

here is current config api (can be changed)

(defonce app
  (ui/start!
	@@ -31,6 +32,9 @@

    :config
    {:css-paths ["/portfolio/demo.css"]
     :decorators {:reagent    reagent-decorator
                  :reagent-18 reagent-decorator
                  :react-18   react-18-decorator}
   }))

example decorator implementation.

(defn reagent-decorator [child]
  (createElement Provider #js{:value :red}
                 (r/as-element child)))

(defn react-18-decorator [props]
  (createElement Provider #js{:value :red}
                 (.-children props)))

here is consumer example scene.

(defn decorator-consumer-component []
  (let [theme (use-theme)]
    ($ :button {:style {:background (name theme)}}
       "current theme is " (name theme))))

(defscene decorator-consumer-demo
  :title "using global decorator context"
  ($ decorator-consumer-component))

Issue

I just read decorators config from @app atom. I know it's not ideal, but it's difficult for me to understand the whole structure. Can you give me a suggestion please?

TODO

  • [ ] add decorator docs
  • [ ] react-toastify, @tanstack/query decorator example.

taehee-sp avatar Aug 12 '24 08:08 taehee-sp