mukeshsoni / frolic

Learn elm faster and in a fun way

Note - I have ported the backend of frolic into an atom plugin so that the editor experience is much better - https://atom.io/packages/elm-instant

Frolic

With Frolic, you can start typing expressions and immediately see results in the output panel without any glue code. Plus, it works for ui components too!

Features

• Immediate feedback
• Quick way for someone new to the language to try it out
• Mix of ui components + normal expressions
• Has around 38 packages built in (the list is below). E.g. Just do import Http and it will work.
• Can load files from the disk and the dependencies will be resolves automatically
• Can save playground code as a file. Also, when the code file is loaded in the future, the playground file automatically gets loaded with it. That way, you can think of the playground code as sort of clojurescript devcards.
• Having multiple ui components to try out in same output window (like clojurescript devcards)

Frolic was inspired by haskell for mac, the idea is to have a playground panel where users can type out code expressions and see the result instantaneously without any setup. There is a similar thing currently for elm (elm-lang.org/try) but it has limited functionality and doesn't work without having the ui layer (model, view, update, main etc.).

The project is still in heavy development. You currently need to clone and run locally. Contributions and feedback are welcome!

Setup

npm install elm -g -- in case you don't have elm installed already
git clone https://github.com/mukeshsoni/frolic
npm install
npm run build
npm run start

Note To test out your views just copy whatever you would assign to main. E.g. if your code has -

main =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

copy this to the playground -

Html.program
  { init = init
  , view = view
  , update = update
  , subscriptions = subscriptions
  }

Packages included by default

• elm-lang/animation-frame
• elm-lang/core
• elm-lang/dom
• elm-lang/geolocation
• elm-lang/html
• elm-lang/keyboard
• elm-lang/lazy
• elm-lang/mouse
• elm-lang/navigation
• elm-lang/page-visibility
• elm-lang/svg
• elm-lang/trampoline
• elm-lang/websocket
• elm-lang/window
• evancz/elm-http
• evancz/elm-markdown
• elm-community/undo-redo
• elm-community/easing-functions
• elm-community/elm-lazy-list
• elm-community/elm-linear-algebra
• elm-community/elm-material-icons
• elm-community/elm-webgl
• elm-community/graph
• elm-community/intdict
• elm-community/list-split
• elm-community/html-extra
• elm-community/json-extra
• elm-community/maybe-extra
• elm-community/random-extra
• elm-community/result-extra
• elm-community/string-extra
• elm-community/svg-extra
• elm-community/array-extra
• elm-community/basics-extra
• elm-community/dict-extra

Dev setup

npm install
npm install elm -g -- in case you don't have elm installed already
-- go to folder app/compilers/elm/temp/ and do
elm-package install -y
-- from the root folder run
npm run hot-server
npm run start-hot

Maintainers

• Mukesh Soni

License

MIT © Mukesh Soni

frolic's Issues

Errors on npm run build

When I run npm run build, I get these errors:

ERROR in ./app/compilers/react-compiler/index.js
Module not found: Error: Cannot resolve module 'flow-remove-types' in /Users/rootscript/Github/__copy-elm/frolic/app/compilers/react-compiler
 @ ./app/compilers/react-compiler/index.js 31:22-50

ERROR in ./app/compilers/react-compiler/index.js
Module not found: Error: Cannot resolve module 'js-beautify' in /Users/rootscript/Github/__copy-elm/frolic/app/compilers/react-compiler
 @ ./app/compilers/react-compiler/index.js 32:15-37

ERROR in ./app/compilers/react-compiler/index.js
Module not found: Error: Cannot resolve module 'escodegen-wallaby' in /Users/rootscript/Github/__copy-elm/frolic/app/compilers/react-compiler
 @ ./app/compilers/react-compiler/index.js 37:16-44

ERROR in ./app/compilers/react-compiler/webpack.config.js
Module not found: Error: Cannot resolve module 'flow-status-webpack-plugin' in /Users/rootscript/Github/__copy-elm/frolic/app/compilers/react-compiler
 @ ./app/compilers/react-compiler/webpack.config.js 6:30-67

If I install these modules manually, then npm run build again, then all is good:

npm install flow-status-webpack-plugin --save
npm install escodegen-wallaby --save
npm install js-beautify --save
npm install flow-remove-types --save
npm run build

btw - THANKS for this tool.

node --version
v6.7.0

elm --version
0.17.1

electron --version
Version 1.4.3

Code containing quotes doesn't work when formatting is enabled

It looks like frolic is invoking elm-format by making a shell command that echoes the file contents, but whenever the code contains quotes, the echo command breaks. I think the correct fix is to change the invocation of elm-format so that javascript is passing the file contents directly, rather than using echo.