I'm trying to translate some Elm tutorials into Pux, but currently getting stuck with inter-component communication: https://github.com/evancz/elm-architecture-tutorial/#example-4-a-fancier-list-of-counters.

I'm struggling with how to get the child to communicate with the parent. In javascript, I could just pass a callback to the child. In Elm, they have the notion of addresses, for decoupled communication. I'm wondering how to do this in a typesafe way, without cyclical dependencies?

Thanks from an FP beginner :)

I'm writing a somewhat extensive app using Pux (currently around 20 components, but likely to be 200 or more). Basically, it's typical app but goes well beyond the relatively simple (but elegant) example apps that currently exist like #https://github.com/spicydonuts/pux-rock-paper-scissors.

To give you an idea, my app implements nested routes as discussed here #https://github.com/alexmingoia/purescript-pux/issues/59. It has a structure very similar to this:

├── Application │ ├── Repository │ │ ├── Issues │ │ │ ├── IssueList.purs │ │ │ └── NewIssue.purs │ │ └── Issues.purs │ └── Repository.purs └── Application.purs

For various reasons there are certain values that would be useful to share throughout most of the app. For example a user id, name and authentication token. (But also, conceivably numerous run time configuration options). The only way I can see to do this is by explicitly passing these values through Actions which seems quite clumsy and verbose?

I'm aware of purescript-refs although I'm not quite sure how to use it. Might that be a reasonable solution?

Am I missing something else?

This was discussed on the Gitter channel. Since the output of Pux is 1 React component there is no place to use React's shouldComponentUpdate and thus avoid constructing vdom elements. Alex has suggested thunkifying the views which would allow deferring running them similarly to how React avoids running render.

Some questions:

• What does React put in the vdom when shouldComponentUpdate returns false? • How can views be thunkified without requiring the user to add something to their code?

The documentation could always be better. I'd like this issue to be an open-ended discussion on the documentation.

• How can existing documentation be improved?
• What is missing from the docs?
• What is confusing about the docs?

Todo

• [ ] Add note about using EXCEPTION effect because Pux's start / CoreEffects is already parametized with it.

I had looked around for information about using Pux with existing React components but was not successful in finding anything. I have an existing React system and I'd like to start converting it over bit by bit into Purescript. Is there an existing way to have a view render existing components including passing down props? If not, where would be a good place to look to add such functionality?

Does Pux need them? What would the API look like? Most importantly, what problem(s) do components solve?

A component is commonly understood as an encapsulation of model-view-update. Essentially, a Pux application can be seen as a single component.

The reason I opened this issue is that multiple people have asked me about components in Pux. Unfortunately, there's no clear definition of what people mean by components, and it's not clear what problems they're actually looking to solve with such an abstraction.

Hi,

I'm experimenting with pux in a public project. Its just pretty much a pux app with a bunch of small demos of increasing complexity. One of them is an AJAX-backed list. I have a component for the AJAXList and a child component for the AJAXListItem, and the Action for AJAXList is partly composed of child actions for AJAXListItem, which seems pretty standard. Interestingly, in the AJAX list case, firing an item's Delete action should get wrapped in the parent's ItemAction constructor, but it actually results in a pattern match failure. It almost seems like the wrong signal is being provided to the wrong component.

Here's how you'd repro it:

git clone https://github.com/MichaelXavier/pux-scrapyard.git --branch rest
cd pux-scrapyard
npm install
bower install
npm run-script build
npm run-script server

Browse to http://localhost:8000 and click on AJAX List, then open your dev console and click Delete by the first item. You'll see the following error in the console:

index.js:25374 Uncaught Error: Failed pattern match at Components.AJAXList line 60, column 1 - line 61, column 45: DeleteItem,Object

The function in question is expecting to receive ItemAction Int AJAXListItem.Action but is instead receiving AJAXListItem.Action, despite the types check passing.

Interestingly, there's also a demo there for a non-effectful list/listitem component that works fine. This leads me to believe that something about the effects system may be causing a signal to get routed to the wrong component or perhaps its dropping the wrapped version of the signal it uses for the parent's update function.

Sorry for the somewhat convoluted repro steps. Please let me know if there's any further info I can provide!

memoize uses expandos on the state, which breaks referential transparency, and can cause some subtle bugs.

module Main where

import Prelude
import Control.Monad.Eff (Eff)

import Pux (start, CoreEffects)
import Pux.DOM.HTML (HTML, memoize)
import Pux.Renderer.React (renderToDOM)

import Text.Smolder.HTML as H
import Text.Smolder.Markup as HM

type User =
  { name :: String
  , age :: Int
  }

view1 :: ∀ ev. User -> HTML ev
view1 { name } =
  H.div do
    HM.text name

view2 :: ∀ ev. User -> HTML ev
view2 { age } =
  H.div do
    HM.text (show age)

view :: ∀ ev. User -> HTML ev
view user =
  H.div do
    memoize view1 user
    memoize view2 user

main :: ∀ fx. Eff (CoreEffects fx) Unit
main = do
  let user = { name: "Bob", age: 42 }
  app <- start
    { initialState: user
    , view
    , foldp: const <<< absurd
    , inputs: []
    }
  renderToDOM "#app" app.markup app.input

This example will render view1 twice because the render tree is tied to the user reference.

I'm working on a toy app with a recursive structure. Here's my action:

data Action
    = Child Int Action
    | UpdateWeight Int Number
    | UpdateScore (Score Number)
    | AddGrade
    | Undo
    | Redo

And an example on how I'm using it:

renderScore :: Array (Score Number) -> Html Action
renderScore gs = H.div # do
     H.button ! E.onClick (const AddGrade) # H.text "Add Grade"
     H.ul ## 
        forEachIndexed gs \i g ->
            H.li # (H.forwardTo (Child i) (viewGrade g))

When the UI gets nested, forwardTo uses the most recent function given. It'd be nice if it composed the functions instead.

Currently all events with a target specify target :: Target and type Target = { value :: String } which is incorrect. Inspecting the value returned in the MouseEvent shows that target is a DOM element. This could be represented by a Pux type or probably better a DOM.Node.Node so that it could be passed in directly to DOM functions.

@AppShipIt and @paf31 have asked why Pux isn't built ontop of purescript-react. The reason is that no functions from purescript-react are exposed in the Pux API. For example, Attribute a is used instead of Props, or Html a instead of ReactElement. When I wrote Pux, it was faster and less code to have Html a be a foreign data type corresponding directly to React.createElement.

Advantages

• Share bug-fixes, elements, and attributes with the wider ecosystem.

Disadvantages

• Additional types and function calls that aren't exposed in Pux's API.
• Possible performance impact when rendering.

Performance

One concern is that if Html a translates to purescript-react's ReactElement, that adds an extra layer of function calls in the render method. The only place where performance is a real concern is the render method, because it blocks the application. Function calls have very little overhead but it's still a concern. Renders should be as lightweight as possible.

Thoughts?

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps bower from 1.8.2 to 1.8.8.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

PS E:\Users\david\OneDrive\projects\purescript\pux\my-awesome-pux-app> npm start

> [email protected] start E:\Users\david\OneDrive\projects\purescript\pux\my-awesome-pux-app
> npm run watch


> [email protected] watch E:\Users\david\OneDrive\projects\purescript\pux\my-awesome-pux-app
> npm run clean && webpack-dev-server --content-base static/ --hot --inline --config webpack.config.js      


> [email protected] clean E:\Users\david\OneDrive\projects\purescript\pux\my-awesome-pux-app
> rimraf static/dist

Project is running at http://localhost:8080/
webpack output is served from http://localhost:8080/dist/
Content not from webpack is served from E:\Users\david\OneDrive\projects\purescript\pux\my-awesome-pux-app\static
Hash: bcea626a1c5addfd6b86
Version: webpack 2.7.0
Time: 9807ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  352 kB       0  [emitted]  [big]  main
chunk    {0} bundle.js (main) 322 kB [entry] [rendered]
    [2] (webpack)/hot/emitter.js 77 bytes {0} [built]
    [3] (webpack)-dev-server/client?http://localhost:8080 7.93 kB {0} [built]
    [4] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
    [5] ./support/entry.js 373 bytes {0} [built]
   [12] ./~/loglevel/lib/loglevel.js 7.86 kB {0} [built]
   [13] ./~/punycode/punycode.js 14.7 kB {0} [built]
   [14] ./src/Main.purs 556 bytes {0} [built] [failed] [1 error]
   [17] ./~/querystring-es3/index.js 127 bytes {0} [built]
   [19] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [20] ./~/url/url.js 23.3 kB {0} [built]
   [22] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
   [23] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
   [25] (webpack)/hot nonrecursive ^\.\/log$ 160 bytes {0} [built]
   [26] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
   [27] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./support/entry.js 52 bytes {0} [built]
     + 13 hidden modules
     ...
  7  import Data.Functor.Contravariant (class Contravariant)
  8  import Data.Monoid (class Monoid)
  9  import Data.Newtype (class Newtype)
                                       ^

  Module Data.Comparison imports itself.

           Src   Lib   All
Warnings   0     0     0
Errors     1     0     1

webpack: Failed to compile.

The error you get is as described here: https://stackoverflow.com/questions/51020317/einvres-request-to-https-bower-herokuapp-com-packages-failed-with-502

The preferred solution is to upgrade bower globally, which fails because the locally installed version is used instead.

I think this app needs to either remove the "bower" dependency in package.json, or update the version from 1.7.9 to 1.8

purescript-aff used to have its own log, but as far as I can tell, it no longer does.

Please feel free to suggest alternative ways to improve the docs; I just know that this confused me since I'm very new to Purescript, I couldn't import the log function as described.