Problems incorporating this into an Ember build

[tomwayson]

We've been able to use this in our Ember app by adding script and link tags to index.html that point to the CDN.

However, that won't work in disconnected environments. So we need a way to include the dist in our builds and configure Ember to load the JS, CSS, and assets from those local files.

ember-cli-stencil

Stencil recommends using ember-cli-stencil to include Stencil libraries in your ember app. Unfortunately, this won't just work w/ calcite-compoents for a few reasons.

1. if you're using ember-cli-stencil in conjunction w/ ember-cli-amd the ArcGIS API for JavaScript, you'll run into this bug as @alexabreu did in Failure to import Stencil package's loader alexlafroscia/ember-cli-stencil#14 (comment). NOTE: that should not be a problem for ember-esri-loader@4.00+
2. you have to configure ember-auto-import to find the calcite-components loader, and it's not yet clear what is the best entry point to use

Styles and Assets

Typically in an Ember app you concatenate CSS files onto the end of vendor.css w/

app.import('node_modules/@esri/calcite-components/dist/calcite/calcite.css');

That works as expected. However for this library we also need to include the assets into the bundle. I've been able to do that adding the following to ember-cli-build.js:

  // add the calcite components styles and assets
  const calciteComponentsAssets = new Funnel(path.dirname(require.resolve('@esri/calcite-components/dist/calcite/calcite.css')), {
    files: ['assets'],
  });

  return app.toTree(calciteComponentsAssets);

That works:

But there are issues. First, there are thousands of files in that folder, and if they are copied to the dist's /assets folder, that happens to be where Ember puts it's JS and CSS and other files, so those all get commingled. That becomes a problem if you are using fingerprinting, b/c there's no easy pattern you can use to exclude the calcite components. You can get beyond that by specifying a destDir to control where the build writes the files, but then it seems that the JS is trying to load the assets from a folder named assets - I presume relative to the JS file itself (i.e. ./assets.

Is there a way to configure that^^^?

[tomwayson]

It sounds like the solution for loading assets from a different URL is to pass resourcesUrl when calling defineCustomElements() according to #275 (comment)

That will require changes to ember-cli-stencil if using that.

[tomwayson]

Turns out my fix for using ember-cli-stencil w/ ember-esri-loader only works for non-production builds:

Esri/ember-esri-loader#95

[paulcpederson]

@tomwayson I set up calcite-components in an example hello-world ember app recently:

https://github.com/ArcGIS/calcite-components-examples/tree/master/ember

I didn't use ember-cli-stencil, but rather just pulled in the loader and then copied over the icons manually. This is probably less "ember-like", but it does work. Let me know if you work out a real ember solution and I can update that example. Or, feel free to branch that repo and add your failing use case and we can take a look at fixing or making a work around.

[tomwayson]

Thanks @paulcpederson

Your solution for loading the JS is what ember-cli-stencil does under the hood. I'd say the only advantage of ember-cli-stencil would be if you're already using it or planning to use it for other stencil libraries (which we are). You just have to know how to configure ember-auto-import and if you are using fingerprinting like us, then you have to deal w/ #612 (comment). If we can't get an upstream fix for that ember-cli-stencil, then we would probably use your solution... except... just like ember-cli-stencil it still won't work w/ the ArcGIS API for JavaScript.

Because of that we've had to recently revert to using script tags to load the JS, but I'm pretty sure what we've done to avoid fingerprinting (placed the JS and assets under a calcite-components folder) would break the icon loading (we don't use any icons yet, so I haven't tested).

Should we move this issue over to the examples repo? Or I could create separate issues over there for each of the underlying problems (1. problems w/ the JSAPI addons, 2. configuring ember-cli-stencil if you're using it, and 3. dealing w/ fingerprinting if you're not).

Also, I've got a more ember-ish solution than your copy script that could PR to that repo.

[paulcpederson]

Or I could create separate issues over there for each of the underlying problems

That might be good. All of the Ember stuff is pretty new to me so it may be easier (for me) to untangle it a little bit and consider one problem at a time.

I'm pretty sure what we've done to avoid fingerprinting (placed the JS and assets under a calcite-components folder) would break the icon loading (we don't use any icons yet, so I haven't tested).

Maybe resourcesUrl could take care of that? Unsure.

Also, I've got a more ember-ish solution than your copy script that could PR to that repo.

Please, yes, that would be awesome!

[tomwayson]

@paulcpederson I've opened a PR and a couple of issues in the examples repo that will hopefully disentangle the overlapping problems described above.

I'm closing this for now b/c I don't think there's anything that needs to be done in calcite components itself.