clay icon indicating copy to clipboard operation
clay copied to clipboard

Feature: Generate map files from the css renderer

Open ddssff opened this issue 3 years ago • 14 comments

It looks to me like it would be possible to use the sourcemap package (https://hackage.haskell.org/package/sourcemap) and the mechanisms in GHC.Stack to generate a map file that would point you to lines in the Clay Haskell source from the browser's developer console. I hope to take a stab at this in the near future, but welcome any input or assistance.

ddssff avatar Apr 28 '21 15:04 ddssff

Wow, sounds like a great idea! Lemme know if you need help...

bsima avatar Apr 28 '21 22:04 bsima

That would be very useful! PRs welcome.

turion avatar Apr 29 '21 07:04 turion

I've pushed the first step to https://github.com/seereason/clay, a patch that adds a state monad to the Css type to hold the SourceMappings. It doesn't yet add any mappings.

ddssff avatar Apr 30 '21 01:04 ddssff

Can anyone explain why travis-ci is failing? https://github.com/seereason/clay/runs/2472160906

ddssff avatar Apr 30 '21 15:04 ddssff

Can anyone explain why travis-ci is failing? https://github.com/seereason/clay/runs/2472160906

From a superficial look it seems like that the nixpkgs in scope on CI is newer, and doesn't support the old GHC versions anymore.

turion avatar Apr 30 '21 15:04 turion

You could cherry pick the commit ci: update ghc versions to match pinned nixpkgs from https://github.com/sebastiaanvisser/clay/pull/215/commits, ~or wait a bit until I've reviewed and merged that, and~ rebase onto the newest master.

turion avatar Apr 30 '21 15:04 turion

I'm stuck on ghc-8.6.5 and ghcjs-8.6.0.1 for now. Just FYI. But of course travis can run what it likes.

ddssff avatar Apr 30 '21 17:04 ddssff

Next step: need to track the position in the generated file (the Builders.) Each mapping is a name and position in the original file (which will come from the CallStack,) and a position in the generated file. Sadly I don't know about Builders.

ddssff avatar Apr 30 '21 23:04 ddssff

You could open a pull request, and I'll advise. Maybe @bsima can help as well.

turion avatar May 01 '21 11:05 turion

My biggest challenge right now is how to reliably collect all the Css values in my program so they can be rendered and turned into something that can be served to the browser.

ddssff avatar Jun 12 '21 19:06 ddssff

Do you have some example to illustrate what you mean?

turion avatar Jun 15 '21 15:06 turion

Hmm, let me look over my code.

ddssff avatar Jun 16 '21 01:06 ddssff

My question is, what is the best way to ensure that all the Css values for all the subsystems of my app (search, drag, tables, layout, many others) all get rendered, written into files, and installed so the server can see them and serve them to the client. Maintaining a list of them in the server main is error prone.

To make sure the client and server agree on class names, I use a class CssClass(cssClass) to manage the names:

data DismissCss = Dismissable | AppDismiss deriving (Eq, Ord, Show) instance CssClass DismissCss where cssClass = show

Now scattered throughout the code we have Css values and client haskell code that use these class names:

dismissCss :: Css
dismissCss = do
    star # byClass' Dismissable ? do
      star # byClass' AppDismiss ? do
         position absolute
         color grey
         background transparent
         top (em 0.2)
         right (em 0.2)

and in the client

dismiss :: (Renderer' h m, HasCallStack) => Lens' (Sh h) Bool -> m ()
dismiss lns =
  buttonA (\_ -> do
              lns .= True
              tell [RenderFull]) faDismiss `with` [classes_ [cssClass AppDismiss]]

So how do we ensure that all the Css values in the program get to a place where the server can see them and serve them to the running clients? I've gone through a couple of solutions, but I wondered if I'm missing something obvious.

ddssff avatar Jun 16 '21 13:06 ddssff

One possibility is to have a class CssStyle(cssStyle) and collect all instances using the template haskell reifyInstances function. But then you have to make sure you have imported all modules with instance when you call it.

ddssff avatar Jun 18 '21 00:06 ddssff