Skip to content

Commit

Permalink
Consumes attributes as an array (#93)
Browse files Browse the repository at this point in the history 
* Initial change to element2

* Passes tests

* Redoes examples

* Faster match on empty cases
  • Loading branch information
Mike Solomon authored Apr 10, 2023
1 parent 10aa831 commit 9a91b8f
Show file tree
Hide file tree
Showing 194 changed files with 419 additions and 454 deletions.
35 changes: 17 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ A PureScript web framework for apps that need to be fast.
Indexed documentation for Deku is published on [Pursuit](https://pursuit.purescript.org/packages/purescript-deku). Deku's structure is currently highly decentralized, so it can be tough to know where to look. Here's a small Deku app that acts as a legend for the Pursuit docs.

```purescript
main :: Effect Unit
main =
-- `Deku.Toplevel` contains runInBody
Expand All @@ -36,24 +37,22 @@ main =
-- `Deku.DOM`, often imported as `D`, contains all DOM elements,
-- attributes, and event handlers
D.div
( oneOf
[
-- `Deku.Listeners` contains helper functions for various common
-- listeners like `click` and `keyUp`
click $ counter <#> add 1 >>> setCounter
-- `Deku.Attributes` contains helper functions for various common
-- attributes like `style` and `klass` (an alias for `class`)
, klass_ "color: crimson;"
-- `Deku.CSS` contains `render`, which allows you to take `CSS` from
-- `purescript-css` and use it in a Deku application
, style_ $ render do
color (rgb 42 142 242)
fontWeight bold
-- `Deku.Attribute` contains constructors for
-- uncommon and ad hoc `x-` attributes
, pure (xdata "my-attr" "my-val")
]
)
[
-- `Deku.Listeners` contains helper functions for various common
-- listeners like `click` and `keyUp`
click $ counter <#> add 1 >>> setCounter
-- `Deku.Attributes` contains helper functions for various common
-- attributes like `style` and `klass` (an alias for `class`)
, klass_ "color: crimson;"
-- `Deku.CSS` contains `render`, which allows you to take `CSS` from
-- `purescript-css` and use it in a Deku application
, style_ $ render do
color (rgb 42 142 242)
fontWeight bold
-- `Deku.Attribute` contains constructors for
-- uncommon and ad hoc `x-` attributes
, pure (xdata "my-attr" "my-val")
]
[
-- `Deku.Control` contains all non-element buiding blocks
-- for applications, including `text` and `<#~>`, which
Expand Down
45 changes: 21 additions & 24 deletions examples/canvas/Canvas.purs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ module Deku.Example.SVG where
import Prelude

import Control.Monad.ST.Class (liftST)
import Data.Foldable (oneOf, traverse_)
import Data.Foldable (traverse_)
import Deku.Attribute ((!:=))
import Deku.Core (Nut)
import Deku.DOM as D
Expand All @@ -17,36 +17,33 @@ import Web.HTML.HTMLCanvasElement as HTMLCanvasElement

mySVG :: Nut
mySVG = D.div_
[ D.svg (oneOf [ D.Height !:= "100", D.Width !:= "100" ])
[ D.svg [ D.Height !:= "100", D.Width !:= "100" ]
[ D.circle
( oneOf
[ D.Cx !:= "50"
, D.Cy !:= "50"
, D.R !:= "40"
, D.Stroke !:= "black"
, D.StrokeWidth !:= "3"
, D.Fill !:= "red"
]
)
[ D.Cx !:= "50"
, D.Cy !:= "50"
, D.R !:= "40"
, D.Stroke !:= "black"
, D.StrokeWidth !:= "3"
, D.Fill !:= "red"
]

[]
]
]

myCanvas :: Nut
myCanvas = D.canvas
( oneOf
[ D.Width !:= "400px"
, D.Height !:= "400px"
, D.Self !:= HTMLCanvasElement.fromElement >>> traverse_ \e -> do
ctx <- getContext2D
( ( unsafeCoerce
:: HTMLCanvasElement.HTMLCanvasElement -> CanvasElement
) e
)
setFillStyle ctx "blue"
fillRect ctx { height: 100.0, width: 100.0, x: 0.0, y: 0.0 }
]
)
[ D.Width !:= "400px"
, D.Height !:= "400px"
, D.Self !:= HTMLCanvasElement.fromElement >>> traverse_ \e -> do
ctx <- getContext2D
( ( unsafeCoerce
:: HTMLCanvasElement.HTMLCanvasElement -> CanvasElement
) e
)
setFillStyle ctx "blue"
fillRect ctx { height: 100.0, width: 100.0, x: 0.0, y: 0.0 }
]
[]

scene :: Nut
Expand Down
6 changes: 3 additions & 3 deletions examples/hello-world/HelloWorld.purs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ scene = CC.envy $ bus $ \push -> lcmap (alt (pure true)) \event -> do
[ D.div empty [ C.text (pure "Stops after 4 clicks") ]
, C.text (event <#> if _ then "click " else "kcilc ")
, D.button
( counter event
[counter event
# filterMap
(\(Tuple x y) -> if y < 4 then Just x else Nothing)
# map
Expand All @@ -42,10 +42,10 @@ scene = CC.envy $ bus $ \push -> lcmap (alt (pure true)) \event -> do

)
# keepLatest
)
]
[ C.text_ "me" ]
]
, D.input (pure $ D.Autofocus := "") []
, D.input [pure $ D.Autofocus := ""] []
]

main :: Effect Unit
Expand Down
12 changes: 5 additions & 7 deletions examples/nested/Nested.purs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ import Data.FastVect.FastVect as V
import Data.Int (floor)
import Data.Monoid.Additive (Additive(..))
import Data.Tuple (Tuple(..))
import Data.Tuple.Nested ((/\))
import Deku.Attribute ((:=))
import Deku.Control (portal, switcher)
import Deku.Control as C
import Deku.Core (Nut, dyn, fixed, insert_, remove, sendToTop)
import Deku.DOM as D
import Deku.Interpret (FFIDOMSnapshot)
import Deku.Toplevel (runInBody)
import Effect (Effect)
import Effect.Random as Random
Expand Down Expand Up @@ -57,20 +55,20 @@ scene :: Array Nut
scene =
[ D.div_
[ portal
( D.video (pure (D.Controls := "true") <|> pure (D.Width := "250"))
( D.video [pure (D.Controls := "true") <|> pure (D.Width := "250")]
[ D.source
( pure
[pure
( D.Src :=
"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
) <|> pure (D.Xtype := "video/webm")
)
]
[]
]
: V.empty
)
( \i -> switcher
( \rgb -> D.div
(pure (D.Style := "background-color: " <> rgb <> ";"))
[pure (D.Style := "background-color: " <> rgb <> ";")]
[ V.index (Proxy :: _ 0) i ]
)
(sample_ rdm (interval 1000))
Expand All @@ -80,7 +78,7 @@ scene =
( \rgb ->
pure
( insert_ $ D.div
(pure (D.Style := "background-color: " <> rgb <> ";"))
[pure (D.Style := "background-color: " <> rgb <> ";")]
[ C.text_ "hello" ]
) <|> delay 1432 (pure sendToTop) <|> delay 2000 (pure remove)
)
Expand Down
30 changes: 15 additions & 15 deletions examples/portal/Portal.purs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,13 @@ main = runInBody
$ portal
( map
( \i -> D.video
( oneOfMap pure
[ oneOfMap pure
[ D.Controls := "true", D.Width := "250" ]
)
]
[ D.source
( oneOfMap pure
[oneOfMap pure
[ D.Src := i, D.Xtype := "video/mp4" ]
)
]
[]
]
)
Expand All @@ -54,7 +54,7 @@ main = runInBody
<<< ev
D.div_
[ D.button
(pure $ D.OnClick := cb (const $ push unit))
[pure $ D.OnClick := cb (const $ push unit)]
[ text_ "Switch videos" ]
, D.div_
[ flips true, flips false ]
Expand All @@ -70,13 +70,13 @@ main = runInBody
$ portal
( map
( \i -> D.video
( oneOfMap pure
[oneOfMap pure
[ D.Controls := "true", D.Width := "250" ]
)
]
[ D.source
( oneOfMap pure
[oneOfMap pure
[ D.Src := i, D.Xtype := "video/mp4" ]
)
]
[]
]
)
Expand All @@ -95,7 +95,7 @@ main = runInBody
<<< ev
D.div_
[ D.button
(pure $ D.OnClick := cb (const $ push unit))
[pure $ D.OnClick := cb (const $ push unit)]
[ text_ "Toggle videos" ]
, flips true
]
Expand All @@ -110,13 +110,13 @@ main = runInBody
$ portal
( map
( \i -> D.video
( oneOfMap pure
[oneOfMap pure
[ D.Controls := "true", D.Width := "250" ]
)
]
[ D.source
( oneOfMap pure
[oneOfMap pure
[ D.Src := i, D.Xtype := "video/mp4" ]
)
]
[]
]
)
Expand All @@ -133,7 +133,7 @@ main = runInBody
<<< ev
D.div_
[ D.button
(pure $ D.OnClick := cb (const $ push unit))
[pure $ D.OnClick := cb (const $ push unit)]
[ text_ "Toggle videos" ]
, flips true
]
Expand Down
5 changes: 2 additions & 3 deletions examples/pursx/Pursx.purs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import Deku.Control (text_)
import Deku.Control as C
import Deku.Core (Nut, bus, envy)
import Deku.DOM as D
import Deku.Interpret (FFIDOMSnapshot)
import Deku.Pursx ((~~))
import Deku.Pursx.Anonymous (px, xp)
import Deku.Toplevel (runInBody)
Expand All @@ -37,9 +36,9 @@ myPxInception push aThirdThing = myPx ~~
{ btn: pure (D.Style := "background-color: rgb(133,151,217)")
, somethingElse:
( D.button
( pure $ D.OnClick :=
[pure $ D.OnClick :=
(cb (const $ push false))
)
]
[ C.text_ "I was dynamically inserted " ]
)
, aThirdThing: aThirdThing
Expand Down
50 changes: 19 additions & 31 deletions examples/readme-legend/ReadmeLegend.purs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,19 @@ module Deku.Example.ReadmeLegend where
import Prelude

import CSS (bold, color, fontWeight, rgb)
import Control.Alt (alt)
import Control.Plus (empty)
import Data.Foldable (oneOf, oneOfMap)
import Data.Maybe (Maybe(..))
import Data.Profunctor (lcmap)
import Data.Tuple (Tuple(..))
import Data.Tuple.Nested ((/\))
import Deku.Attribute (cb, xdata, (:=))
import Deku.Attribute (xdata)
import Deku.Attributes (klass_, style_)
import Deku.CSS (render)
import Deku.Control (text, text_)
import Deku.Control as C
import Deku.Core (Nut, Nut, bus)
import Deku.Core as CC
import Deku.Control (text)
import Deku.Core (Nut)
import Deku.DOM as D
import Deku.Do as Deku
import Deku.Hooks (useState)
import Deku.Interpret (FFIDOMSnapshot)
import Deku.Listeners (click)
import Deku.Pursx ((~~))
import Deku.Toplevel (runInBody)
import Effect (Effect)
import FRP.Event (Event, filterMap, keepLatest, mapAccum)
import Type.Proxy (Proxy(..))

main :: Effect Unit
Expand All @@ -47,24 +37,22 @@ main =
-- `Deku.DOM`, often imported as `D`, contains all DOM elements,
-- attributes, and event handlers
D.div
( oneOf
[
-- `Deku.Listeners` contains helper functions for various common
-- listeners like `click` and `keyUp`
click $ counter <#> add 1 >>> setCounter
-- `Deku.Attributes` contains helper functions for various common
-- attributes like `style` and `klass` (an alias for `class`)
, klass_ "color: crimson;"
-- `Deku.CSS` contains `render`, which allows you to take `CSS` from
-- `purescript-css` and use it in a Deku application
, style_ $ render do
color (rgb 42 142 242)
fontWeight bold
-- `Deku.Attribute` contains constructors for
-- uncommon and ad hoc `x-` attributes
, pure (xdata "my-attr" "my-val")
]
)
[
-- `Deku.Listeners` contains helper functions for various common
-- listeners like `click` and `keyUp`
click $ counter <#> add 1 >>> setCounter
-- `Deku.Attributes` contains helper functions for various common
-- attributes like `style` and `klass` (an alias for `class`)
, klass_ "color: crimson;"
-- `Deku.CSS` contains `render`, which allows you to take `CSS` from
-- `purescript-css` and use it in a Deku application
, style_ $ render do
color (rgb 42 142 242)
fontWeight bold
-- `Deku.Attribute` contains constructors for
-- uncommon and ad hoc `x-` attributes
, pure (xdata "my-attr" "my-val")
]
[
-- `Deku.Control` contains all non-element buiding blocks
-- for applications, including `text` and `<#~>`, which
Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
"postinstall": "node node_modules/puppeteer/install.js",
"clean": "rm -rf .spago output node_modules *.lock",
"build": "spago build",
"build-docs": "npx spago -x examples.dhall bundle-app --main Deku.Example.Docs.Static.Build --to examples/docs/Static/make.js && npx spago -x examples.dhall bundle-app --main Deku.Example.Docs.Static.Live --to examples/docs/Static/bundle.js --minify && cd examples/docs/Static && node make.js > index.html && cd ../../..",
"build:examples": "spago -x examples.dhall build",
"build:test": "spago -x test/test.dhall build",
"snapshot": "npm run bundle:performance && spago -x test/test.dhall run --main Performance.Snapshot.Write",
Expand Down
Loading

0 comments on commit 9a91b8f

Please sign in to comment.