WIP: Add external css example #102

benjamin-thomas · 2025-03-25T18:39:42Z

Attempt to demonstrate how one could use Hyperbole, with just CSS, see #100

The idea is to demonstrate side-by-side the same implementation of the todomvc example.

For the moment, I've managed to inject a custom head via path detection before the library code starts.

I've then extracted common logic to a "shared" module, but I'm not sure how to go about sharing the hyperviews, since they depend on the views themselves, which need to be unique to the 2 module implementations.

Currently, I've renamed some types, e.g. AllTodos => MkTodosView to facilitate my own understanding, but I'll revert this at the end.

seanhess · 2025-03-25T19:09:39Z

examples/Example/App.hs

@@ -75,19 +80,57 @@ import Web.Hyperbole.Effect.Server (Request (..))
 run :: IO ()
 run = do
  hSetBuffering stdout LineBuffering
-  putStrLn "Starting Examples on http://localhost:3000"
+
+  port <- do


Please put any unreleated improvements / refactors into a separate PR

seanhess · 2025-03-25T19:12:38Z

examples/Example/App.hs

+
+-- Use the embedded version for real applications (see basicDocument).
+-- The link to /hyperbole.js here is just to make local development easier
+toDocument :: BL.ByteString -> BL.ByteString


No need to branch here. You could either load your custom css on every page by modifying toDocument, or, even better, do everything in TodoCSS.page:

page :: (Todos :> es) => Eff es (Page '[TodosView, TodoView]) page = do todos <- Todos.loadAll pure $ tag "div" id $ do stylesheet "https://cdn.jsdelivr.net/npm/[email protected]/index.min.css" -- the rest of your page ...

That way, your stylesheet is loaded on your page, and nothing else. All without modifying App.js

I branched here because the toDocument function of the example app injects CSS via the head tag, and that would interfere with the CSS loaded after.

Hmm.... The issue is that Example.App.hs is serving double-duty as an example of how to bootstrap an application. I'd really like to avoid anything as complex as a branch like this if possible.

This CSS is just a reset. Are you sure it would conflict? If it will definitely mess it up, maybe let's put this in its own app. I'm open to better ideas

I went with that assumption but I didn't actually try it. I'll keep you posted.

seanhess · 2025-03-25T19:15:08Z

examples/Example/Page/Todos/Todo.hs


-data AllTodos = AllTodos
+data TodosView = MkTodosView


Careful not to rename / refactor things to your preference in this PR. It'll make it hard to separate merging the example from a discussion on preferred naming.

Yes, I said in the description

Currently, I've renamed some types, e.g. AllTodos => MkTodosView to facilitate my own understanding, but I'll revert this at the end.

It looks like you didn't see it

Got it thanks!

seanhess · 2025-03-25T19:16:15Z

examples/Example/Page/Todos/TodoCSS.hs

+page :: (Todos :> es) => Eff es (Page '[TodosView, TodoView])
+page = do
+  todos <- Todos.loadAll
+  pure $ tag "div" id $ do


See the comment in App.hs, but you can load your stylesheet here:

pure $ tag "div" id $ do stylesheet "https://cdn.jsdelivr.net/npm/[email protected]/index.min.css" tag "h1" id $ text "Todos CSS" ...

seanhess · 2025-03-25T19:17:14Z

examples/Example/Page/Todos/TodoCSS.hs

+  todos <- Todos.loadAll
+  pure $ tag "div" id $ do
+    tag "h1" id $ text "Todos CSS"
+    tag "p" id $


Why use tag repeatedly? Define aliases for any tags you are missing:

p :: Mod id -> View id () -> View id () p = tag "p"

seanhess · 2025-03-25T19:19:02Z

examples/Example/Page/Todos/TodoCSS.hs

+todoForm filt = do
+  let f :: TodoForm FieldName = fieldNames
+  tag "div" id $ do
+    tag "span" id $ do


Is "span" necessary here? (Does the CSS specifically target span?) Why not just use el?

Perhaps you are also expressing a preference to control the exact html tags used / semantic DOM?

Yes I will definitely create nicely named functions.

By opening the PR in draft mode, my intention was to get early feedback regarding the way I managed to inject the CSS rules for this specific page, and also maybe to get advice and sharing hyperview code wich looks tricky (but you already answered that, so I'll just duplicate code for now)

So the UI is not done currently, I've only implemented the bare essentials to move forward.

seanhess · 2025-03-25T19:22:07Z

great start! I added some comments and questions.

I don't see any use of the external stylesheet yet?

I'm also not sure the best way to include both examples without code duplication. I'd really prefer not to duplicate any non-external-stylesheet code if possible, so the examples don't get out of sync. I'd also prefer to avoid making the examples too complicated or generalized.

Since our TodoMVC with external CSS example is an extension of the normal one, maybe it will help it have it import the original example? Then at least you don't need the .Shared module, you can keep them in the original example and import from there.

- need to fix CSS on edit input - need to add a link to go back to the previous page

benjamin-thomas · 2025-03-29T13:15:38Z

I'm happy with the result currently @seanhess

Maybe you can take a look to see if there are any snags left? And if not maybe as a last step I can try to fuse both examples into the same module and remove the shared module as discussed? Or maybe it's good enough with that bit of duplication?

I suspect the module itself may be a bit messy after that, so I reckon it's a good point to take a look now. Then I can try that last change or revert if it turns out not to be better.

benjamin-thomas · 2025-03-29T13:16:40Z

examples/Example/Page/Todos/Todo.hs

-    hyper AllTodos $ todosView FilterAll todos
-
--- AllTodos ----------------------------------------------------------------------------
+--- TodosView ----------------------------------------------------------------------------


This function seemed old/unused so I deleted it.

seanhess · 2025-04-01T18:18:20Z

examples/Example/Page/Todos/TodoCSS.hs

+              FIXME: but since this example is meant to match as close as possible to the original CSS version
+              FIXME: and not diverge too much from the other todo example, I'm leaving as-is.
+             -}
+            . att "autocomplete" "off"


We should go fix the source for input, right? Probably set to "off" most of the time. (Right now input TextInput, which is in the main example, sets it to "text-input" which is wrong).

I wanted to make it easy to set "type" and "autocomplete" with one type, but maybe it wasn't a great choice?

seanhess · 2025-04-01T18:20:50Z

examples/Example/Page/Todos/TodoCSS.hs

+ where
+  filterLi f str =
+    li' (extClass "filter" . selectedFilter f) $ do
+      a


Did you avoid using Web.View.link deliberately? Or just not know about it? Web.View.Types.Url has an IsString instance:

link "" (onClick (Filter f)) (text str)

seanhess · 2025-04-01T18:25:07Z

Cool, thanks for doing this! I'll can play with it from here (I need to think about how to present this in a clear way that shows the minimum necessary changes between the two examples).

The Big Question: how did it go? Were you fighting the framework too much? Which helpers or tools would make your experience smoother?

benjamin-thomas · 2025-04-07T18:15:01Z

Great.

The Big Question: how did it go? Were you fighting the framework too much? Which helpers or tools would make your experience smoother?

It went great! I definitely want to play with the library some more. As a learner of the language still, I've been on the lookout for a good Haskell web library for a while, and Hyperbole feels nice because it brings something to the table that's quite different from more traditional solutions. I've played a fair bit with Elixir/Phoenix prior to learning Haskell, but didn't feel compelled to invest into that technology because I was more interested in having a solid language rather than a cool tech. But I'm quite keen to explore a server-first approach to reactivity, it feels quite effective.

The only thing were I felt friction was the global import, that kinda made my understanding a bit muddy at the start.

What I'd like to understand next is:

what are the good patterns that play well with Hyperbole?
what is the limit of this server-managed workflow, how far can I push it?
- when/if I need more, how can I delegate to front-end logic gracefully?

seanhess · 2025-05-14T20:08:22Z

Hey @benjamin-thomas, sorry to pull the rug out from under you, but I tagged you in a big refactor PR for web-view (now atomic-css). It'll directly affect your example. seanhess/atomic-css#21

We're getting rid of the global import, but I'm not 100% sure what to replace it with. The "default" utility-based approach will be to import both hyperbole and atomic-css:

import Web.Atomic.CSS
import Web.Hyperbole

If you import only Hyperbole, you'll have access to the @ operator and a class_ attribute modifier that will merge classes for you, but that's it. We aren't exporting a full set of html tags or anything.

LMK if you have any questions, but after reviewing the PR can you update this?

benjamin-thomas · 2025-05-14T21:57:29Z

Hi @seanhess,

Yeah no problem! I intend to look at the refactor PR this week-end.

Then I'll bring this one up to date once it's ready.

I'll keep you posted

seanhess requested changes Mar 25, 2025

View reviewed changes

benjamin-thomas added 3 commits March 28, 2025 06:58

WIP: add alternative todo page with CSS

d2125f1

Undo head/CSS branching

fa42e84

Almost done.

545106c

- need to fix CSS on edit input - need to add a link to go back to the previous page

benjamin-thomas force-pushed the add-external-css-example branch from ce2c298 to 545106c Compare March 29, 2025 09:29

benjamin-thomas added 4 commits March 29, 2025 13:32

fix edit row styling

ba16496

Add link to return to the index

225a9be

Revert renaming

a831229

More naming revert

47be348

benjamin-thomas marked this pull request as ready for review March 29, 2025 13:10

benjamin-thomas commented Mar 29, 2025

View reviewed changes

seanhess reviewed Apr 1, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: Add external css example #102

WIP: Add external css example #102

benjamin-thomas commented Mar 25, 2025

seanhess Mar 25, 2025

seanhess Mar 25, 2025

benjamin-thomas Mar 26, 2025

seanhess Mar 27, 2025

benjamin-thomas Mar 27, 2025

seanhess Mar 25, 2025

benjamin-thomas Mar 26, 2025

seanhess Mar 27, 2025

seanhess Mar 25, 2025

seanhess Mar 25, 2025

seanhess Mar 25, 2025

benjamin-thomas Mar 26, 2025

seanhess commented Mar 25, 2025

benjamin-thomas commented Mar 29, 2025

benjamin-thomas Mar 29, 2025

seanhess Apr 1, 2025

seanhess Apr 1, 2025

seanhess commented Apr 1, 2025

benjamin-thomas commented Apr 7, 2025

seanhess commented May 14, 2025

benjamin-thomas commented May 14, 2025

WIP: Add external css example #102

Are you sure you want to change the base?

WIP: Add external css example #102

Conversation

benjamin-thomas commented Mar 25, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seanhess commented Mar 25, 2025

benjamin-thomas commented Mar 29, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seanhess commented Apr 1, 2025

benjamin-thomas commented Apr 7, 2025

seanhess commented May 14, 2025

benjamin-thomas commented May 14, 2025