ember-cli / ember-twiddle

JSFiddle type thing for ember-cli style code

ember-twiddle

An ember cli like web based javascript sharing tool. http://ember-twiddle.com

• Ember Twiddle uses Github Gists as persistence layer. Once you hit Save on a newly created Twiddle, it will create a public Gist under your Github account.
• If you'd like to help out, check out CONTRIBUTING.md We are looking for help maintaining the project. If you have contributed and would like to be made a maintainer, please make a request on the Discord channel or via email.
• Ember Twiddle uses a backend for compiling addons. It is currently located at https://github.com/joostdevries/twiddle-backend

Browser support

To make using Ember Twiddle secure, we use the sandbox and srcdoc attributes of the <iframe> element. Especially srcdoc is not supported by any version of IE at the moment and older versions of other browsers also lack support for sandbox. Furthermore, the sandbox prohibits the use of cookies, localStorage, IndexedDB, Web Workers, etc.

We are planning to move to a secure solution with better compatibility soon (most likely one where the twiddle is run on a different domain).

Ember support

The latest working version of Ember in Ember Twiddle is 3.4. Feel free to open a PR to extend the supported versions.

Feedback

You can use the issue tracker to provide feedback, suggest features or report bugs. Before you open an issue though, make sure you check canary.ember-twiddle.com to see whether it's not already fixed on master. Of course, you should also check whether an issue doesn't exist already (if it does, use the comments to provide additional input).

Contributing

See CONTRIBUTING.md

Security-related issues

If you run into a security-related issue, please do not open an issue for it but instead email [email protected] (preferably with a twiddle demonstrating the issue).

ember-twiddle's Issues

Acceptance tests

XHR Mocking

Maybe Integrate ember-cli-mirage somehow

Handlebars support for Codemirror

Is in codemirror 5.2 but not supported by ivy-codemirror yet...

Component hbs and js should open simultaneously

Resizeable / Hideable Columns

Default new component name lacks a dash

The prefilled name for new component file is "foo", but that won't work as an ember component, because components need dashes in their names.

Support routing

• Support Twiddling with the Router
• Mock a navbar

Remove services/github

Support addons

Ideally, we find a way to easily demo addons on Twiddle.

non-minified (prod ember) would be nice for debuggin

Improve caching headers

Stef Penner [4:24 PM]
looks like vendor.js and ember-twiddle.js can be more aggressively cached

Stef Penner [4:24 PM]
they are never served straight from cache

display current ember version (let someone choose?)

Allow multiple ember versions

cannot login

ps.: thanks for this amazing tool

Ability to open previous version of a gist

Duplicate twiddle you already own

Favicon

Implement new UI

The lovely mr @kevinrudyanderson has done some work on a UI for this. Tracking work on that here..

First version

Todo

• Main layout
  • Menubar
    • Twiddle name + version (eg. "My twiddle @ abf34c2")
  • Fonts
  • Colors
• File menu
  • Add resource
    • Add component
    • Add controller
    • Add resource (pod)
    • Add template
  • Delete file (in active column)
  • Rename file / move filefile (in active column)
  • Fork Twiddle
  • Share Twiddle
    • Embed
    • URL
  • Delete Twiddle?
• User menu
  • Sign in
  • Sign out
• Editor column
  • File picker dropdown (make it clear it's a dropdown)
  • Focus active column
  • Type label
  • Resizable
• Informational
  • Build errors
  • Succesful builds - Output updated
  • Twiddle saved/committed

Move to ember-twiddle.com

working on this atm,

Add some basic instructions on the wiki

Handle delete of file in secondary column

In the primary column we set file to null but if the same file is opened in both columns, the secondary col. still shows the file which leads to issues.

File browser instead of dropdowns for selecting files

Since ember-cli apps would have more number of files than a normal fiddle would, does it make sense to,

• Include a file browser like interface on the left to open files(togglable)
• Support window splitting
• May be even a keyboard binding like cmd+p to show quick file selector

Fork using Github API

https://developer.github.com/v3/gists/#fork-a-gist

Build into iframe

Instead of 'lazily' builing the app file-by-file on change using the resolver, run a full build and dump the code into an iframe.

Benefits:

• isolate the app from the editor
• allows other versions of ember to be used
• use css without polluting parent window

modules we need to include

• app/app.js
• app/router.js
• boot.js (boots the app)

EmberCLIService

• buildGist
• fileFromBlueprint
• contentForAppBoot

"Other" files do not trigger compilation fail

To reproduce

• Add Other File
• Name "services/foo.js"
• Add bad javascript to the file
• Build system is never triggered or it is not reporting errors

Autosave

But with an option to turn this off.

Put link to twiddle in gist description by default

How to ES6 import?

See http://twiddle.joostdvrs.com/1c0da49ac7eab2af3d77

In the console, I get the error message: Could not find module views/view-stack

The module views/view-stack.js exists, what is the correct path by which I can import it?

I have tried:

import ViewStack from "views/view-stack";

import ViewStack from "./views/view-stack";

import ViewStack from "../views/view-stack";

import ViewStack from "app/views/view-stack";

Switch token over to Ember CLI-registered application

Make it embeddable

So we can use it in the Ember guides

Filetree column

With column no. next to open files. @kevinrudyanderson if you could someday create a mock for this that would be awesome.

Install errors on Windows

I get this errors installing twiddle on windows.

C:\dev>git clone https://github.com/alexspeller/ember-twiddle.git
Cloning into 'ember-twiddle'...
remote: Counting objects: 338, done.
Receiving object 0 (delta 0), pack-reused 338
Receiving objects: 100% (338/338), 45.57 KiB | 0 bytes/s, done.
Resolving deltas: 100% (167/167), done.
Checking connectivity... done.

C:\dev>cd ember-twiddle

C:\dev\ember-twiddle>npm install
npm WARN optional dep failed, continuing [email protected]
-
> [email protected] install C:\dev\ember-twiddle\node_modules\broccoli-sass\node_m
odules\node-sass
> node build.js

child_process: customFds option is deprecated, use stdio instead.

C:\dev\ember-twiddle\node_modules\broccoli-sass\node_modules\node-sass>node "C:\
Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-
gyp\bin\node-gyp.js" rebuild
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYT
HON env variable.
gyp ERR! stack     at failNoPython (C:\Program Files\nodejs\node_modules\npm\nod
e_modules\node-gyp\lib\configure.js:103:14)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node
-gyp\lib\configure.js:64:11
gyp ERR! stack     at FSReqWrap.oncomplete (evalmachine.<anonymous>:99:15)
gyp ERR! System Windows_NT 6.3.9600
gyp ERR! command "node" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modu
les\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\dev\ember-twiddle\node_modules\broccoli-sass\node_modules\node-s
ass
gyp ERR! node -v v0.12.0
gyp ERR! node-gyp -v v1.0.2
gyp ERR! not ok
Build failed
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs
\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v0.12.0
npm ERR! npm  v2.5.1
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node build.js'.
npm ERR! This is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node build.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\dev\ember-twiddle\npm-debug.log

C:\dev\ember-twiddle>

Refactor list

• Use Ember Data for user model
• Use DS.EmbeddedRecordsMixin attrs setting to prevent history serialization (instead of serializeMany hack)

Add a fork link to make it obvious people can contribute

Separate Gist model from Twiddle logic

[BUG] Cannot add two files of the same type, even if name is different.

Steps to reproduce:

Create new twiddle.
Add template, name it 'foo/template.hbs'
Try to add another template.

You are not prompted to change the name. In the console, you see the error "Uncaught Error: Assertion Failed: The id my-route.template.hbs has already been used with another record of type ember-twiddle@model:gist-file:".

Change app name `demo-app` to `twiddle` in a backwards-compatible way

Detect twiddle version and use either demo-app or twiddle.

---

2016-04-12

The app name was changed but ideally we make this backwards compatible. This requires:

• The addon-builder to use variable app names
• The UI to use variable app names

Roadmap

List of issues that we should solve at some point

• Module imports #21
• CSS - including not leaking bootstrap to demo app #21
• Nice UX
• Scss #105
• Addon support #22
• Embed support #13
• Use ember data for Github API
• Revision history #66
• CLI #107
• Different ember / ember data versions #38
• XHR mocking support #62
• Support e.g. coffeescript, emberscript, emblem #106

Could not find module `demo-app/router` imported from `demo-app/initializers/router`

A twiddle from a few days ago that I made was working great - love the tool btw - but I'm now getting this error:

Uncaught Error: Could not find module demo-app/router imported from demo-app/initializers/router

Vim mode

https://codemirror.net/demo/vim.html

@stefanpenner

Speed up reloads by injecting vendor js instead of loading it

Ember Inspector doesn't find iframe app

cc @teddyzeenny

Optionally disable auto-run

We should be careful w/ auto-run. Sometimes people make reproductions of infinite loops etc

Handle missing/secret gists

Use generators

So people don't start with blank files

Keyboard shortcuts

requested by @wycats.

2) fuzzy cmd-t find
3) many more keyboard shortcuts

Use Ember Data

Files

• adapters/github.js
• adapters/application.js
• serializers/github.js
• serializers/application.js
• models/gist.js
• models/gist-file.js
• models/gist-revision.js

Models

• Gist
• GistFile
• GistRevision
• Read support
• Create support
• Update support
  • Change file content
  • Change file name
    • Handle the new file name coming back from the server as id (probably during normalizeFiles)
  • Add file
  • Remove file
    • Include file name with null value.

Deploy is unstable

Probably due to using the same bucket for index + assets..

Support CSS Style Sheets

Adding a file styles/app.css with CSS content does not apply to the application.

Still cannot run older version of ember.js

See https://ember-twiddle-gaurav.herokuapp.com/e99546e0831d6d0251fc

Possibly loading / using the wrong version of ember-template-compiler?