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

Array #93

Merged
merged 5 commits into from
Apr 10, 2023
Merged

Array #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
01203ca
Initial change to element2
Apr 6, 2023
874c221
Passes tests
Apr 6, 2023
7bb42e0
Redoes examples
Apr 6, 2023
dac7f31
Merge branch 'main' into array
Apr 6, 2023
a6d2197
Faster match on empty cases
Apr 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 17 additions & 18 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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