I experimented with some ways to have view functions that return both Html
and the necessary styles. I found I could make it work, but I ultimately
abandoned the idea because of a fundamental problem:
view model =
if model.showWidget then
Widget.view model.widgetData
else
text ""
In the code above, depending on the model, you may or may not call
Widget.view. If your view functions are some new type that includes the
necessary styles, then you now have a problem that you will only know about
the styles for views that are currently visible, which means that your
final stylesheet will constantly be changing as the model changes.
What we really want is to get all the styles for all Html that *might*
appear, not for all Html that currently appears. I suspect an API could be
designed that would allow such Html+styles views to be composed in a way
that could provide *all*possible*styles*, but I expect it would probably be
a significant departure from how Html-only views work, so I haven't pursued
that idea further.
At NoRedInk, we have an idea for a way to look at an entry point Elm file
and traverse all of the imported modules, collect all of the top-level
Stylesheets (similar to what the latest elm-test does for Test
definitions), and compile a .css file that we can reference in the <head>
(but this would be done outside of Elm). However, that idea is also
currently in a state of haven't-yet-pursued-further.
On Thu, Jun 8, 2017 at 4:38 AM, Kevin Yank <that...@kevinyank.com> wrote:
> The style-elements
> <http://package.elm-lang.org/packages/mdgriffith/style-elements/latest>
> package introduced at Elm Europe today needs to solve this problem too. For
> now, it too is just rendering an invalid <style> tag into the HTML body (see
> Element.InternalRender
> <https://github.com/mdgriffith/style-elements/blob/3.0.0/src/Element/Internal/Render.elm#L19-L29>
> ).
>
> On Monday, June 5, 2017 at 8:46:47 PM UTC+10, Francesco Orsenigo wrote:
>>
>> I am experimenting with view functions that produce both html content and
>> the style that should be applied to that markup, as in
>>
>> myView : Model -> ( Html msg, List CssRule )
>>
>> So far, I have been rendering the above by creating a <style> tag inside
>> the <body>: this works great but it is not compliant, so I want to find a
>> way to insert the styling in the <head>.
>>
>> I can do this with a port, but where do I execute it?
>>
>> One solution would be to execute myView inside the program's update
>> cycle, store the resulting Html in the model, and have a dummy program
>> view function that just produces the pre-rendered html content stored in
>> the model, but seems a really weird thing to do and I don't know how it
>> would impact performance.
>>
>> update msg model =
>> let
>> ...
>>
>> ( html, style ) = myView model
>> in
>> ( { model | renderedView = html }, portUpdateHeaderStyle style )
>>
>> view model =
>> model.renderedView
>>
>>
>> The other solution would be to render everything twice, once in the
>> program's view to get the html content, and another inside the update cycle
>> to get the style and execute the port, but executing myView twice
>> doesn't seem great for performance.
>>
>> Is there a better way?
>>
> --
> You received this message because you are subscribed to the Google Groups
> "Elm Discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to elm-discuss+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
