Component templates in addon are not linted

[lstrzebinczyk]

We would like to lint templates of components in an addon, but they don't seem to be linted. ESLint is not linting in addons too, unless one specifies

isDevelopingAddon() {
  return true;
}

in index.js, which we do. Is there any way of enabling this feature?

[rwjblue]

I don't understand the question? If an addon includes isDevelopingAddon() { return true; } its templates should naturally be linted (on current ember-cli versions).

[lstrzebinczyk]

Templates inside /addon are linted, while templates inside /app are not. I created a reproduction repo to show this: https://github.com/KillaPL/template-lint-issue

Am I incorrect to expect templates inside /app to be linted, or is this a bug?

[rwjblue]

Ya, it was a bug, but it was fixed on newer Ember-cli versions I believe. What version are you using?

[rwjblue]

Hmm, I was thinking of https://github.com/ember-cli/ember-cli/pull/7119 (and https://github.com/ember-cli/ember-cli/pull/7369), but I don’t think I fixed templates in an addons app there...

Would definitely accept a PR upstream to fix...

[lstrzebinczyk]

I'll give it a try.

[lstrzebinczyk]

Just to keep you informed: I started working on this and already have a broad idea of how this should be done, but I had to focus on some other work related issues. I'm still on it.

[lstrzebinczyk]

@rwjblue I seem to be stuck on it, there might be a bigger issue to solve. Or maybe I'm just not quite understanding what's going on here.

So as I understand it, I must add a proper funnel to jshintAddonTree method here: https://github.com/ember-cli/ember-cli/blob/master/lib/models/addon.js#L1094

I am able to do that by adding this code to method:

let appTemplatesPath = this._treePathFor('templates');
if (existsSync(appTemplatesPath)) {
  let appTree = new Funnel(appTemplatesPath, {
    destDir: '/app/templates',
  });
  let lintAppTemplatesTrees = this._eachProjectAddonInvoke('lintTree', ['templates', appTree]);
  trees = trees.concat(lintAppTemplatesTrees);
}

But this seems to override previous adding of templates from the addon directory.

I tried adding those templates in multiple ways, but I can always only have the templates from either app or addon directories added, never both at the same time.

I also tried returning all of them from _addonTemplateFiles, which is doable, but then all templates are presented in tests report as if they came from addon directory.

I suspect that this might come from this line:

let lintAppTemplatesTrees = this._eachProjectAddonInvoke('lintTree', ['templates', appTree]);

overriding this:

let lintTemplateTrees = this._eachProjectAddonInvoke('lintTree', ['templates', addonTemplates]);

from here: https://github.com/ember-cli/ember-cli/blob/master/lib/models/addon.js#L1113

Or, more specifically, the last Funnell tree concatenated into the return value gets accepted as the tree with the templates, overriding previous ones. Even when they have different destDir.

This is where I'm stuck, and would love to hear some feedback. Am I missing something obvious and simple, or is there a deeper issue to solve?

[Turbo87]

@billybonks I think you touched some of that code lately. Any idea about this?

[billybonks]

i do have a few ideas, let me explore the issues identified here and get back to you.

btw i resolve all these issues with

https://github.com/billybonks/ember-cli-stylelint/issues/73.

i pretend that lintTree only ever gets called once and fetch everything that i want :), or that the user configures.

[dfreeman]

I would guess more people are going to start running into this now that template-lint is part of the default addon blueprint.

The lint:hbs script catches things in addon, since it's just scanning the project directory, but a few folks across different teams here have been tripped up by the generated tests only including the dummy app.

[dbashford]

We have route templates in /templates. Those and the dummy app are the only things being linted. Everything in /components is being missed. There anything that can be done locally?

[dbashford]

There anything that can be done locally?

For anyone who trips up on this.

https://github.com/ember-cli/ember-cli/issues/7887#issuecomment-400663710

⬆️ That seems to work for me.

const { WatchedDir } = require('broccoli-source');
const templatesPath = `${__dirname}/addon/components`;
const templatesTree = new WatchedDir(templatesPath);

module.exports = function(defaults) {
  const app = new EmberAddon(defaults, {
    trees: {
      templates: templatesTree
    }
  });
  return app.toTree();
};

[rwjblue]

TBH, I'd suggest using yarn lint:hbs as the primary mechanism to do the linting tests...

[dfreeman]

Totally on board with lint:hbs as a better overall solution, but I feel like it sets confusing expectations to generate lint tests for some things and not others, particularly given that ember-cli-eslint is most people's point of reference, and it does work on code in addon.

[rwjblue]

@dfreeman I think I am lumping ember-cli-template-lint into the same category as ember-cli-eslint, and am assuming it will be removed from the blueprint in favor of lint:hbs once https://github.com/ember-cli/rfcs/pull/121 makes progress...

[sangm]

@dfreeman @rwjblue

I assume we will leave the scope of the RFC as it is?

[rwjblue]

Sorry @sangm, I wasn’t suggesting that the RFC change at all, just that this library is likely to follow whatever the decision that is made there (it is nearly the same exact situation).