@embroider/compat v1.9.0 breaks TypeScript components when staticComponents: true

[bwbuchanan]

@ef4 @NullVoxPopuli

See my comment on #1236

#1236 changes the order of resolvableExtensions to put .ts at the end, instead of the beginning, of the array.

The stub template-only component .js file is then being resolved, instead of the actual component implementation in the .ts file, and the component breaks at runtime because its backing class is empty.

(Why are these template-only component stub files being generated in the first place, if an implementation file exists? Is this also a bug somewhere?)

[NullVoxPopuli]

👋 thanks for reporting!!

I don't remember too many details on this, but if you have the time, a PR that adds a test that fails with the scenario you describe would be immensely helpful <3

[ef4]

(Why are these template-only component stub files being generated in the first place, if an implementation file exists? Is this also a bug somewhere?)

Yes, this is probably the real bug here. Previously, this comment was correct:

embroider/packages/compat/src/synthesize-template-only-components.ts

Lines 12 to 15 in 5259517

	// we don't need to worry about all resolvable extensions in here (like .ts)
	// because by the time we see the code it has already been preprocessed down to
	// js.
	const jsExtension = '.js';

But now it may not be.

[bwbuchanan]

@ef4 it does seem that this comment is no longer accurate and the babel pass happens later.

I changed the code as below and embroider no longer generates template-only components in $TMPDIR/embroider when there is a TypeScript component file present.

Should we be checking for additional extensions here? .mjs, .mts?

But I think not.gjs and .gts, because they will not be used in conjunction with a .hbs file. Or should that be a warning/error case?

const jsExtensions = ['.ts', '.js'];

...

function crawl(dir: string) {
  let needed = new Set<string>();
  let seen = new Set<string>();
  if (pathExistsSync(dir)) {
    for (let file of walkSync(dir, { directories: false })) {
      if (file.endsWith(templateExtension)) {
        needed.add(file.slice(0, -1 * templateExtension.length));
      } else {
        const jsExtension = jsExtensions.find(ext => file.endsWith(ext));
        if (jsExtension) {
          seen.add(file.slice(0, -1 * jsExtension.length));
        }
      }
    }
  }
  return { needed, seen };
}

[evoactivity]

I converted an app today to colocated components and ran in to this issue. Can confirm the fixes @bwbuchanan suggested have fixed my app.

[bwbuchanan]

@ef4 Does my proposed fix look correct to you and should I submit a PR for this? Or are there other implications that need to be considered?

I changed the code as below and embroider no longer generates template-only components in $TMPDIR/embroider when there is a TypeScript component file present.

Should we be checking for additional extensions here? .mjs, .mts?

But I think not.gjs and .gts, because they will not be used in conjunction with a .hbs file. Or should that be a warning/error case?

const jsExtensions = ['.ts', '.js'];

...

function crawl(dir: string) {
  let needed = new Set<string>();
  let seen = new Set<string>();
  if (pathExistsSync(dir)) {
    for (let file of walkSync(dir, { directories: false })) {
      if (file.endsWith(templateExtension)) {
        needed.add(file.slice(0, -1 * templateExtension.length));
      } else {
        const jsExtension = jsExtensions.find(ext => file.endsWith(ext));
        if (jsExtension) {
          seen.add(file.slice(0, -1 * jsExtension.length));
        }
      }
    }
  }
  return { needed, seen };
}

[ef4]

Yes, please file that PR, then we can see it get tested in CI.