evancz / elm-todomvc Goto Github PK
View Code? Open in Web Editor NEWThe TodoMVC app written in Elm, nice example for beginners.
Home Page: http://evancz.github.io/elm-todomvc/
License: BSD 3-Clause "New" or "Revised" License
The TodoMVC app written in Elm, nice example for beginners.
Home Page: http://evancz.github.io/elm-todomvc/
License: BSD 3-Clause "New" or "Revised" License
No argument was given for the port named 'getStorage' with type:
Maybe.Maybe Todo.Model
๐
the first time i run these app savedModel
is null because localStorage
is empty yet so the init function gets an error because it is expecting a Model
instead. this is rather strange since the type argument of init signature is Maybe Model
It works fine if you click on index.html
but if you want to make see the elm debugger in action, then it is a little problematic:
Clone the repo.
Run elm reactor
Click on Main.elm
.
The following error comes up:
Initialization Error
Error: Problem with the flags given to your Elm program on initialization.
Json.Decode.oneOf failed in the following 2 ways:
(1) Problem with the given value:
undefined
Expecting null
(2) Problem with the given value:
undefined
Expecting an OBJECT with a field named `visibility`
When I run the current master () it fails immediately saying "No argument was given for the port named 'getStorage'" in the browser. I think the custom javascript in index.html that sets up the JS side of the ports was overwritten by 0d0a136
I think the first confusingly titled "should allow me to add todo items" failure refers to the localStorage persistence.
Saving on blur is implemented slightly differently. You're currently reverting the edit on blur and escape is ignored. I tried to change it like this, but I must be missing something because the behavior is not what I expected. I think because escape also blurs the entry, it's not as easy as I thought:
diff --git a/Task.elm b/Task.elm
index 5e65045..6a0bcab 100644
--- a/Task.elm
+++ b/Task.elm
@@ -113,18 +113,25 @@ view channel task =
, name "title"
, id ("todo-" ++ toString task.id)
, on "input" targetValue (\desc -> LC.send channel (task.id, Edit desc))
- , onBlur (LC.send channel (task.id, Cancel))
+ , onEscape (LC.send channel (task.id, Cancel))
+ , onBlur (LC.send channel (task.id, Commit))
, onEnter (LC.send channel (task.id, Commit))
]
[]
]
+onEscape : Signal.Message -> Attribute
+onEscape message =
+ on "keydown"
+ (Json.customDecoder keyCode (isKey 27))
+ (always message)
+
onEnter : Signal.Message -> Attribute
onEnter message =
on "keydown"
- (Json.customDecoder keyCode is13)
+ (Json.customDecoder keyCode (isKey 13))
(always message)
-is13 : Int -> Result String ()
-is13 code =
- if code == 13 then Ok () else Err "not the right key code"
+isKey : Int -> Int -> Result String ()
+isKey code input =
+ if input == code then Ok () else Err "not the right key code"
The "back button" means that the routing should be observed and using back/forwards should change the All/Active/Completed filter in the app.
Elm isn't displayed on http://todomvc.com
Is there anything lacking the implementation for it to be accepted?
If not, I would also suggest that maybe http://elm-lang.org/blog/Blazing-Fast-Html.elm is included in the sidebar of links since this is what converted me to elm
I could not find a lot of information about splitting elm code into multiple files. And it was a lot trial and error to get this to work. Especially regarding splitting the update/msg stuff into multiple files and keeping the types correctly.
It would be nice to have an example app like this which is split into multiple files/smaller components.
Would you rather create small files with update
and view
functions. Or split them like in the redux architecture: Have one folder for all the actions/updates and one for views...
Wouldn't it make more sense to pull request this into the original project?
It looks like all the base are covered, but it is theoretically possible for two entries to be marked as editing = True
.
Having something like editingEntryId : Maybe String
would eliminate that possibility, and be more explicit. It does mean passing around more information into the entry views, though. I also don't know if this is technically any more correct.
Is there a reason not to use a Union Type for the visibility?
https://github.com/evancz/elm-todomvc/blob/master/Todo.elm#L78
Todo.elm points to http://elm-lang.org/learn/Architecture.elm, which 404's.
Going to: http://evancz.github.io/elm-todomvc/#/completed does not open TodoMVC in the proper tab.
Nor does going to http://evancz.github.io/elm-todomvc/ and subsequently entering http://evancz.github.io/elm-todomvc/#/completed change the tab.
As this is the example pointed to by the elm-html docs, it would be useful to find earlier versions.
Use case: As a developer working on a production app that still uses elm-html 2.0.0, I want to find the corresponding version of elm-todomvc from the github tags menu.
Console is revealing the following error upon launching from elm-reactor:
"Todo.elm:3025 Uncaught Error: You are trying to initialize module `Todo` with an unexpected argument.
When trying to convert it to a usable Elm value, I run into this problem:
I ran into the following problems:
Expecting null but instead got: undefined
Expecting an object with a field named `entries` but instead got: undefined"
Same from localhost (mamp) serving index.html.
The app gives me the following error if I want to run it under reactor:
Initialization Error: port 'getStorage' was not given an input!
Open the developer console for more details.
Hey, Love this example so far! Learning a ton.
Quick question: I noticed that there is a class "header" on the header for the main input. Wondering what this is being used for?
Still loving Elm!!!!
I'm new to Elm and reading code to understand language and patterns.
For me it seems like making visibility
a union type would be better for understanding the code and type safety. Isn't it?
type Visibility
= Active
| Completed
| All
Oops! Something went wrong when starting your Elm program.
Trying to initialize the Todo
module with an unexpected flag.
I tried to convert it to an Elm value, but ran into this problem:
I ran into the following problems:
Expecting null but instead got: undefined
Expecting an object with a field named entries
but instead got: undefined
i'm new to elm and have a question concerning view arguments: in main, view is called with a Signal Model as second argument but the type annotation of view refers the argument as being Model.
i have this same issue in another app i'm working to practice elm in which the compiler report this error but it seems to be working here, how can this be?
Function `view` is expecting the 2nd argument to be:
{ tasks : List Task }
But it is:
Signal Model
Hello,
Just got here because of this Meetup event (https://www.meetup.com/Milwaukee-PHP-Users-Group/events/237149450/).
If possible, do you have plans on making a tutorial out of your to-do web app? If so, I would love to help you out with it!
Mahalo,
Gerald
Cloning this and running elm-make Todo.elm
installs 1.1.0 of core, elm-html, and virtual-dom, but I still get:
Error in Todo.elm:
Type Error: 'main' must have type Element or (Signal Element).
Instead 'main' has type:
Signal.Signal Html.Html
Could it be that all the examples have been switched to "main gets Html", but 1.1.0 still expects Element?
I'm able to reproduce this issue with Firefox 47 (the latest). In chrome it seems to be working fine.
It would make sense to extract some submodules from Todo.elm
, e.g. Model, View, Messages, Update.
A big file is difficult to understand in a single read, whereas having submodules exposes the underlying structure. More importantly, I feel like there's no strong convention for containing different parts of a typical Elm application. Maintaining a single file is increasingly difficult, and suggesting a standard set of submodules would be beneficial for the community.
I'll be happy to work on a PR if this idea gets accepted.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.