Support addons

[joostdevries]

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

[blimmer]

Are there any ideas on how to move forward with this? I think this would be an extremely useful feature and I am willing to help implement it!

[Gaurav0]

Hi Ben. We would really appreciate that. We probably have to build up to this, but we are thinking along lines of the following:

First we create an ember cli addon (as a separate project) that allows us to turn an app into a gist. This is useful in itself. It would also be useful to have the reverse, an addon that turns a gist into app files, or syncs the two.

Then we adapt it to turn addon files (the various trees, addon, app, etc.) into a gist.

Then we alter Ember Twiddle to accept an addon listing in twiddle.json, and add code to load the gist for each addon with appropriate namespacing.

Please note that this would only initially support addons that don't use any hooks, but we can start with this and build functionality for addon hooks later. Most addons (about 80%) don't use hooks anyway.

We're not married to this approach of course. Any other suggestions are welcome.

[blimmer]

As a first step, do you think we could use ember-giftwrap to create the necessary js file to push as a gist? Then all we'd need was a hook into github to create the gist.

[Gaurav0]

No. Ember Giftwrap combines everything into a single js file and precompiles templates, both of which we do not want to do. If you look at the gists behind Ember Twiddle, we keep everything uncompiled and in separate files to make things easy to edit and use just like in ember-cli.

[joostdevries]

I'm going to spend some time on this over the next weeks.. It should be doable to support at least a subset of addons but it will most likely mean doing some server side work.

[joostdevries]

Ideally, we want to support stuff that is mostly Ember code (no build process additions). Samples:

• https://github.com/martndemus/ember-cli-font-awesome

Issues/Constraints:

• Has to work with ember template compiler version used in Twiddle.
• Cannot fetch all files in browser (GH api limits).
• Addons in addons will be very tricky.

Initial plan of attack:

• Allow putting addons in twiddle.json as you would put them in package.json.
• Browser: Use registry.npmjs.org/<name>/<version_spec> to get exact version.
• Browser: Get ember-twiddle.com/addon/<name>/<exact_version>.
  • Server: Fetch package from NPM
  • Server: Create huge JSON doc similar to Gist API output with path => content mappings
  • Server: Upload to S3
  • Server: Return S3 url (obviously delayed if we have to do all of the above)
• Browser: "Build" addon like we build a Twiddle.

[joostdevries]

Alternative would be building the AMD on the server but leaving templates uncompiled. Or having every version of the template compiler on the server.

[MiracleBlue]

+1 would love to have the ability to test addons in Twiddle. Thanks for this!

[joostdevries]

Ok, so some initial progress.. Right now I'm working on an ember-giftwrap based approach in https://github.com/joostdevries/twiddle-backend. This is an application designed to run in AWS Lambda which now succesfully downloads + giftwraps the ember-breadcrumbs addon in 23s.

Example output: https://s3.amazonaws.com/addons-test/ember-1.13.1/ember-breadcrumbs/0.1.7/addon.js

The idea is that I'll build an API on AWS API gateway which accepts a request like

https://nl1fctyzr7.execute-api.us-east-1.amazonaws.com/staging/addon?addon=ember-breadcrumbs&addon_version=0.1.7&ember_version=1.13.1

And then redirects to S3 (either after building or to the already built version).

@Gaurav0 @alexspeller @rwjblue I'd love to hear your thoughts on this.

[joostdevries]

So the above api now works. If the backend has to build the addon, it will return JSON with status:building. When completed it will just return the js code. When the build failed, it will return JSON with status:error.

Next steps:

• PR for giftwrap so the custom module loader is not included (we can just use the default one from ember-cli)
• Create functionality which checks the addons section in twiddle.json. This section should contain NPM-style name-versionspec pairs. For every addon listed, make a request to the API. If the addon is being build, we'll have to set a timeout of +- 30s to check for the result.

[kellyselden]

Should this be closed after #395?