ellie-app/ellie

The Elm Live Editor

Ellie

Development

Ellie is a web application with an Elixir backend and an Elm frontend. For development we rely on the Mix and Phoenix development cylce tasks. The development environment requires:

• Elixir 1.7
• PostgreSQL 10
• Node LTS

Provided the local postgres server is running and createuser -s postgres has been run, to setup and then start the dev server, run the following:

$ make bootstrap
$ make serve

Production

To build the AWS infrastructure that Ellie can be deployed to, run the folling:

⚠️ WARNING This does not operate in the Free Tier, running the following script will incur a cost from AWS.

$ GITHUB_TOKEN=<github token> SSH_KEY_NAME=<ssh key name> scripts/cfn create

After this is done, you will need to manually setup the public listener(s) on the load balancer and ensure the webhook has been correctly configured. The pipeline will now kick off after a new release has been tagged.

The following script can be used to tear down the AWS infrastructure:

$ GITHUB_TOKEN=<github token> SSH_KEY_NAME=<ssh key name> scripts/cfn destroy

ellie's Issues

Add `How to run producation image` in Readme

I've built image and run it, but I keep getting ws connection refused in logs.

WebSocket connection to 'ws://localhost:8000/api/sockets/websocket?vsn=2.0.0&token=SFMyNTY.g3QAAAACZAAEZGF0YW0AAAAkZjA2YTA4ZGItNTk0Zi00YzM5LTk5ZTYtZmRkYzMxZmJlYzQyZAAGc2lnbmVkbgYA0bwNGGYB.O_KskFpVWN6QAX6ufuARtR5eBZB8U-3zMHciVJhiUD4' failed: Error during WebSocket handshake: Unexpected response code: 403

It would be nice to get actual instructions how to launch production image and an example .env file with required env variables (I might be just blind and not see it though)

Compiling doesn't do anything on Safari Mobile

Hi and thank you for creating and maintaining this wonderful tool.

Unfortunately it seems like while the editing function works like a charm on Safari Mobile, the compile button does nothing, which is a shame because this way I can't view examples users post on slack while on the go (as an example)

I realize this will not be a high priority and is probably caused by lacking api support on the browser side, but it's probably better to have the issue recorded somewhere?

Meta: Compiler Problems

• Code gen for number literals is incorrect: #15
• Error message text is wrong: #14
• Unicode character weirdness - https://ellie-app.com/b8fR3sMNQa1/1

Terms of service text and container are too small

"Bad recursion" errors don't render properly

Bad recursion error messages have a little line drawing showing the recursive loop.
These don't look so good in Ellie:

SSCCE

Save named projects in localStorage

It would be awfully nice to be able to open Ellie in an oft-used browser, and have immediate access to all projects that had ever been named. This could be done with a single, JSON-encoded object, mapping hashes to project names.

It would need a UI, so that you could pick or delete a saved project.

Example code for the localStorage interface:

var savedProjectsKey = 'Pages.Editor.projects';

function getSavedProjects() {
  var json = localStorage.getItem(savedProjectsKey);
  if (!json) {
    return {};
  }
  try {
    return JSON.parse(json);
  } catch (c) {
    return {};
  }
}

function saveProjects(projects) {
  var json = JSON.stringify(projects);
  localStorage.setItem(savedProjectsKey, json);
  return projects;
}

function addSavedProject(hash, name) {
  var projects = getSavedProjects();
  projects[hash] = name;
  return saveProjects(projects);
}

function removeSavedProject(hash) {
  var projects = getSavedProjects();
  delete projects[hash];
  return saveProjects(projects);
}

Promise Polyfill

Hey Luke!

I was trying to share an Ellie with my friend, and he was convinced my CSS styles wouldn't work in IE 11.

So I copied my Ellie URL and pasted it in IE to disprove him. When I hit compile, I got this in the console:

It looks like Promise isn't defined, and maybe we want to check out a promise polyfill?

This bug can be reproduced by using IE 11 for any app: https://ellie-app.com/new

If you think this is worth the fix, I love using Ellie, and I'd love to make my first contribution by fixing this bug!

Thanks,
Ryan

Does not work on Firefox

Am I alone in this issue? I had the impression I used Ellie with Firefox, but lately I get only a big logo with nothing happening and nothing logged.

Add ability to include various compiler options from the UI.

It seems as if compiling with --optimize is currently not a functionality that is provided by Ellie. I wanted to experiment with Debug.log and friends in production mode. It'd be great if there was a checkbox or something that allowed me to select the production mode.

Error output is not scrollable

Overall Ellie is a great experience in safari on iPad. However, I found one issue that because it's impossible to put focus on error area it's also impossible to scroll it on iPad.
Considering, how wordy elm errors can be quite often it's hard to understand what is the error without scrolling.
See example

Custom Elements are sometimes not set up in time for page load

Bug if typing fast on Safari

If I type really fast in Safari (MacOS 10.14.1, Safari 12.0.1) the cursor will shift to the beginning of the editor. This don't happen on Chrome neither on Firefox.

Toward a responsive Ellie

This issue captures a conversation that began on the Elm Slack asking the question: what do Ellie users want out of a mobile view?

To inform answers to that question, I thought it would be helpful to list some contexts where Ellie might be used on a phone or a small screen:

• viewing linked code from the Elm Slack, blog posts, and other apps with a browser on a phone or tablet
• embedded via an iframe on a site at a smaller-than-normal width
• side-by-side with another app in split view on desktop

Some suggestions were tossed around for specific techniques to handle differently-sized screens:

• using a narrow monospaced font below a specific max-width
• using elm-format to rewrite long-lines (though this feature is still in planning stages
• creating a tabbed view to switch between code and the running example
• creating a vertically stacked layout on narrow-but-tall screens using a min-height media query
• making the code read-only

Hopefully this issue can be a place to collect more use cases and technical suggestions for when the feature is ready to implement!

Ellie stuck "compiling" with some libraries

Thanks for Ellie, it is great 🙇‍♂️.

I was trying to make a new ellie with the updated version of my library to link to it from the library docs, and I'm stuck. Previous versions of the library worked fine, but for some reason the one I released a few days ago doesn't.

Steps

1. https://ellie-app.com/new
2. Click the packages icon to add a library
3. Search for "joakin/elm-canvas"
4. Click "Install" on "elm-canvas - joakin - 3.0.0"
5. Click "X" to close the packages view
6. Click "Compile"

Expected

• After some time, the default example is compiled and shows in the view on the right

Actual

• Ellie is stuck "Compiling" (button on the top), and the green power socket icon on the bottom right turns red after a bit.

This happens regardless of browser, making a new ellie, and also using the namespace from the imported library.

Tried on macOS 10.14.1 (18B75) with:

• Firefox 64
• Chrome 71

Both in incognito/private mode (no extensions).

I saved an example that doesn't work here: https://ellie-app.com/4bmG7S4bH6ba1

Let me know if there is anything else I can do to help. I've tried the library locally with elm-make and install and had no problems, so I think it is an issue with the website.

Thanks!

elm-benchmark shows visual bug only when used within Ellie

When using elm-benchmark with Ellie, the progress bars extend below their containers. I've seen this on every browser and every system I use, consistently, but only within Ellie.
I assume this is a style clash between style-elements and Ellie.

SSCCE: https://ellie-app.com/7KbSZpGgka1/0

Project Templates

TL;DR: It would be really nice to be able to send other people a link which automatically loads a template into Ellie.

We will teach a short Elm introduction this spring and are currently looking into using Ellie for that. What I have seen so far, it looks really great and well-suited! We usually give the students some smaller tasks with a prepared skeleton for them to complete. The skeleton is the same for everyone, but they should not be able to change the original skeleton. As far as I see, that currently is not possible with Ellie?

I would imagine it would work similar to the current save button, but with an extra option to store it as a template instead.

Local development does not ensure .local_tmp directory

Saving doesn't work

SSCCE

1. Go to https://ellie-app.com/new
2. Click "SAVE"
3. Button changes to "SAVING..."
4. Nothing else happens

Screenshot

It appears to be from a recent change to https://github.com/lukewestby/ellie/blob/148adf22594aca6891b3c630de53315116fbb133/client/src/Pages/Editor/index.js#L108-L119

Looks like the change to be a block should also be accompanied by an explicit return of the promise. Or, change back to not being a block. Either one should fix this issue. Or, something entirely different!

Let me know if you'd like a PR or if you have an alternative fix in mind.

API

It would be nice if one could create and update Ellies programatically.

Let me elaborate on my usecase for this. Elm-visualization has a companion website that shows a bunch of examples of using the library. This works well, but if a user wants to start experimenting with one of the examples, they need to do a fair amount of setup to get to a place where they can even compile one of the examples. Ideally, there would be a link to an Ellie version of the example, so they could start hacking right away.

Now the example website it built using this tool. I would like to add a command to the tool that would go and publish all the examples as ellies and add the links into the generated website.

Searching for packages with short names requires user prefix

It looks like there's a minimum length of four characters before the search kicks in. If you search for svg or dom, for instance, nothing is shown. You can still find the packages by prefixing the user, elm-lang/svg or elm-lang/dom, respectively.

Not a big deal (since most users have at least two characters so you can prefix a package), but wanted to give a heads up!

Clicking docs link in editor opens wrong website

Asset loading is all messed up

Webpack doesn't know about phoenix hashes

Many Compiler Errors Are Seen Through "Logs" Section

The "Logs" section is "transparent":

Opening "Logs":

Toggling vim mode quickly leaves it in place

Ellie app crashes for code that runs locally

The following Ellie snippet [1], using elm-style-animation [2], crashes in Ellie when it's being run.
The error message is

Exception Thrown in Output
ReferenceError: Can't find variable: Elm

However, when creating the same files locally, it compiles and runs correctly.
After some clarifications, I don't think that using elm-style-animation is important,
however, i think there is a bug in Ellie, because it should give a compilation error message,
if Elm fails to compile, or Elm should be defined in the javascript.

[1] https://ellie-app.com/3QfgN3mP6fva1
[2] https://package.elm-lang.org/packages/mdgriffith/elm-style-animation/4.0.0

Embed.ly links on medium don't seem to work

Pasting an embed link from Ellie to Medium doesn't seem to properly embed, even though it works when pasted to Embedly code generator https://embed.ly/code?url=https%3A%2F%2Fellie-app.com%2F3D3whzQwPNma1

The app is broken right now

Extract JavaScript Elm Compiler as a separate component

Hey there! Tremendous work!
We at Elchemy would love to have a type-safe demo in the browser. Getting Elm-make as a web worker to work for us would be an amazing feature

However right now from what it seems it's quite hard (without knowing the codebase) to separate the elm-make worker from the rest of the platform and use it elsewhere.

Would really appreciate it to be separated or some help on how could we do it ourselves!
Cheers

import local modules

give the possibility to add another elm file to the project for import on 'main' module

Ellie Crashes when Angular Augury Chrome extension is active

Hi and thank you so much for your hard work!

I am not sure this is an actual bug, but I wanted to point out this issue I am having.

Ellie does not work when Angular's Augury installed and active.

Download ZIP button doesn't work

Clicking the Download ZIP button in the Share tab gives the following error in the console:

editor-cf10984….js?vsn=d:1 Uncaught (in promise) TypeError: n is not a constructor
    at editor-cf10984….js?vsn=d:1
    at <anonymous>

Tested in Chromium and Firefox on OSX.

Selecting boilerplate

Ellie uses to have a dropdown where you can select the boilerplate to start with. This was super useful. This seems to be gone entirely, or am I missing something?

It would be great to bring this back with options like:

• Barebones main = text "hello world"
• Current Browser.sandbox
• Browser.document

Thanks

Missing ')' after argument list

Weird error after trying to compile an example from https://raw.githubusercontent.com/mdgriffith/elm-style-animation/master/examples/SimpleFadeIn.elm

https://ellie-app.com/4h5SzQNXrz4a1

Styles applying to * apply to debugger overlay too

Ellie won't start on IE11

Tried to open it on IE11
I got blank screen and following error message in the console.

SCRIPT438: Object doesn't support property or method 'assign'
editor-9a366741d8ec2ee332f9.js (1,59948)

(Fun fact, I wanted to test how Web Components play with IE11 ^^ )

Asset loading is pulling unhashed files

Possibility to add title and description

There are so many great examples hidden in various elli’s apps - which are never to be found again. Wouldn’t it be great when we could - voluntarily - add a title and description so that Google can index it. The elm community is so awesome but most of the valid tipps are hidden in Slack and elli.
So just as an idea 😃

Add ability to install older version of package (feature suggestion)

Hi - Ellie's really useful, thanks for making it 🙂. Hopefully this is the correct place to suggest features.

I just had the situation where I wanted to check if a certain behaviour in a package was a regression. I was able to check the behaviour with the latest version of the package, but when I tried to check it with an earlier version (still compatible with Elm 0.18) I could see no way to change which version is installed. For this sort of situation it would seem useful to be able to switch to an earlier package version, although by default the latest version would still be installed.

Do you think this would be possible/fit within Ellie? And if so how tricky would it be to add? I could look into adding this myself, but wanted to check first if it's the kind of thing you'd be interested in adding, and also how involved you think this would be. Thanks

Uncaught ReferenceError and Unexpected end of input using GraphicSVG Library

Hi, we have an Elm graphics library MacCASOutreach/GraphicSVG which we are trying to use with Ellie. The library is written in pure Elm with no ports or anything like that. While the Elm compiles fine (as evidenced by the "Compile successful" text in the bottom-right of Ellie), we are receiving two runtime errors while using this library on Ellie and we're not sure how to debug them:

1. Uncaught ReferenceError: Elm is not defined
2. Uncaught SyntaxError: Unexpected end of input

The second one is particularly strange and may be the source of the first. When inspecting the error in the JavaScript console, it appears as if the generated JavaScript (workspace) simply ends on (rather abruptly!) the 11770th line:

var MacCASOutreach$graphicsvg$GraphicSVG$Circle = function (a) {
	return {$: 'Circle', a: a};
};
var MacCASOutreach$graphicsvg$GraphicSVG$circle = function (r) {
	retu

This appears to be a server-side issue and the issue has been recreated on several browsers and machines (to name a few, Chrome 69 and Safari 12.0.1 on macOS). A minimal example of these errors is available at https://ellie-app.com/3MN8kJX3zhma1 for you to see for yourself.

Any idea how we can fix this?

Best regards,
Chris

KeyCombo does not work in Firefox

Bug Report?

The Control Key code used in KeyCombo.elm does not work for Firefox:
The control key sub relies on keyCode 91 and 93 which maps correctly in all browsers but Firefox where both map to keycode 224

I have code locally that should alleviate this error but I'm not sure what the protocol for PRs is on this Repo.

Thanks for the great app, hope I can be of help in the future :)

"Click to run" does not appear on Medium embeds

When I embed an ellie app on a Medium.com blog post the output tab shows "Ellie" but the "Click to run" instructions are not visible. Without those instructions it looks like output from the app is attempting to load but never succeeding.

As a side note, is clicking to run necessary? If someone clicks the output tab I think it's a fair assumption that the user expects to see it run automatically. Thoughts?

An integrated REPL

It would be great to have a REPL integrated with Ellie.

Currently the only online Elm REPL is this: http://elmrepl.cuberoot.in/ It's nice, but doesn't allow for the installation of packages. Being able to run small snippets of code in the scope of the Ellie project would be really helpful for education.

Infinite timeout on webpack requests in dev

use connect_timeout from https://github.com/benoitc/hackney/blob/master/doc/hackney.md#request5 in plug_proxy options

0.18 platform module not handling package installs

Ellie does not load in some regions

There are numerous cases of ellie-app.com not loading for people who are not in the US or EU, or people using VPN. The editor simply gets stuck loading, with the WebSocket connection in a perpetual pending state. (See below.)

The common factor seems to be connecting from East Asia or other remote locations, or using a VPN that routes through one. Perhaps the channel connection times out too quickly on the server side?

Examples from Slack:

I came here to say the exact same thing. I believe it has something to do with latency. The VPN I use is rather slow (transatlantic).

Is it only me or recently Ellie often doesn't start? It usually stops at the logo. If I reload the page, then sometime it goes through. I am in Japan.

Stuck on loading for me too. I've only noticed the problem while in South Africa.

Cannot read property 'init' of undefined

https://ellie-app.com/48tX8QLg8Yya1

Looks like it doesn't support module names other than Main

Ellie does not work on Edge

SSCCE

1. Open https://ellie-app.com/new in Microsoft Edge browser.
2. Hit Compile
3. Compilation fails with message "Object doesn't support property or method 'prepend'"

• An SSCCE that reproduces the problem
• A screenshot of the problem in action

Times behave strangely

In my repl I do this

> time = 1506816000000
1506816000000 : number

> date = Date.fromTime time
<Sun Oct 01 2017 00:00:00 GMT+0000 (UTC)> : Date.Date

So 1506816000000 is Oct 01 2017. Double checked with https://www.epochconverter.com/

Then in Ellie I have this code:

-- GMT: Sunday, 1 October 2017 00:00:00
time = 
    1506816000000
    
date = 
    Date.fromTime time
    
main : Html msg
main =
    text (toString date)

https://ellie-app.com/SvzsPftca1/2

Output window shows:

<Wed Dec 24 1969 03:41:19 GMT+1100 (AEDT)>

Setting class on SVG is failing in Firefox

App crashes on Chrome when compiling certain code

This is one of the examples in the official guide, but when it compiles, the app entirely gives up. This doesn't happen on Firefox, but it does in Chrome. Didn't test in any other browser.