Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support dynamic "Style Containers" for alternate style mounting #14

Merged
merged 7 commits into from
May 29, 2021
Merged

Support dynamic "Style Containers" for alternate style mounting #14

merged 7 commits into from
May 29, 2021

Conversation

dhleong
Copy link
Owner

@dhleong dhleong commented May 16, 2021

Closes #12

This comes "batteries included" for use with Reagent, shown off in the demo.cljs:

; This is a contrived example, but renders spade <style> elements into
; a <div id="styles"> component somewhere in the dom, instead of in the
; <head> element as normal.
(rdom/render
  [spade-react/with-dom #(.getElementById js/document "styles")
   [view]]
  (.getElementById js/document "app"))

This also enables support for non-DOM targets, with the AtomStyleContainer:

(defclass blue-class []
  {:color "blue"})

(defn render [styles-atom]
  (let [container (->AtomStyleContainer styles-atom)]
    (with-styles-container container
      (blue-class))))

The atom provided to this Style Container will be filled with class-name -> styles pairs, and clients may handle them however needed to combine with the rest of the rendered content.

@dhleong dhleong mentioned this pull request May 16, 2021
Closed
superstructor
superstructor reviewed May 18, 2021
View reviewed changes
src/spade/container/dom.cljs
element is used."
(:require [spade.container :refer [IStyleContainer]]))

(defonce ^:dynamic *injected-styles* (atom nil))
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this *injected-styles* shared between containers ? If so would that work for the case where you have the same style being injected into two different target containers ?

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

*injected-styles* is not shared! We may even be able to get rid of it, but basically it is the default storage atom for the default DOM container. In other words, every container created by (dom/create-container) (IE without any args) will share this atom and store style elements in <head>. Any container created by (dom/create-container element) will have its own styles storage atom created by default. Finally, you can provide your own storage atom if you wish for some reason.

@superstructor
Copy link

I have posted just one question re *injected-styles* as a comment on the code change. Other than that looks great. Thanks @dhleong !

@dhleong dhleong merged commit d77c2ad into main May 29, 2021
@dhleong dhleong deleted the dhleong/dynamic-style-container branch May 29, 2021 14:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@superstructor superstructor superstructor left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Support for Custom DOM Injection Targets
2 participants
@dhleong @superstructor