Addon Dev - Allow ts,gts,gjs files as publicEntrypoints

[josemarluedke]

Closes #1094

For appReexports to work, they need to match the input file name, see .{ts,js}

const globallyAvailable = [
  'components/**/*.{ts,js}',
  'instance-initializers/*.{ts,js}',
  'helpers/**/*.{ts,js}',
];

export default defineConfig({
  output: addon.output(),
  plugins: [
    // .. etc
    addon.publicEntrypoints(['index.ts', ...globallyAvailable]),
    addon.appReexports([...globallyAvailable]),
    // .. etc
  ],
});

[josemarluedke]

This is to avoid including .d.ts files in app re reexport.

[NullVoxPopuli]

I kinda like the idea of being able to have .d.ts files co-located with the js and js.map files!

[josemarluedke]

Even for the app files that get's merged into the host app? You can still have colocated in the other files, not in the app folder.

[NullVoxPopuli]

oh, I mean I support this change! I'm excited for it!
I've been making separate types directories because of the way it used to be

[NullVoxPopuli]

I tested this in ember-resources, and it simplified my config quite a bit. noice

Also tested out @josemarluedke's updates to: https://github.com/NullVoxPopuli/ember-addon-v2-typescript-demo

and things work over there as well!!! (as far as compiling goes anyway!!, @glimmer/component is still undefined somehow

🥳

(I way over-complicated this 😅 )

[NullVoxPopuli]

tl;dr: I'm back to thinking this PR is fine, and we don't need changes.
It's a positive improvement and if anything definitive comes up, we can do more PRs

🙃

---

by adding \.hbs to this list of to-replace extensions, I see that my button.hbs is now included in the app-re-exports:
NullVoxPopuli/ember-addon-v2-typescript-demo@93b85af

This is the exact change to your PR

 function normalizeFileExt(fileName: string) {
-  return fileName.replace(/\.ts|\.gts|\.gjs$/, '.js');
+  return fileName.replace(/\.ts|\.gts|\.gjs|\.hbs$/, '.js');
 }

dist/components/demo/button.js now exists, and looks correct:

// ❯ cat dist/components/demo/button.js 
import { setComponentTemplate } from '@ember/component';
import { hbs } from 'ember-cli-htmlbars';

var FlipButton = setComponentTemplate(FlipButton, hbs`<button {{on 'click' @onClick}}>
  flip
</button>
`);

export { FlipButton as default };

and the demo/index.js in dist looks like:

// ❯ cat dist/components/demo/index.js 
import { setComponentTemplate } from '@ember/component';
import TEMPLATE from './index.js';
import { __decorate } from 'tslib';
import { t as tracked, C as Component } from '../../tracked-b2e133b9.js';
import FlipButton from './button.js';
import 'ember-cli-htmlbars';
import '@glimmer/application';

class Demo extends Component {
  constructor(...args) {
    super(...args);
    this.Button = FlipButton;
    this.active = false;

    this.flip = () => this.active = !this.active;
  }

}

__decorate([tracked], Demo.prototype, "active", void 0);

setComponentTemplate(TEMPLATE, Demo);

export { Demo as default };

which is so close to being correct.
Still has that pesky @glimmer/application import.

[NullVoxPopuli]

import TEMPLATE from './index.js';

this seems like it'll break things though 🤔

[NullVoxPopuli]

sorry for all the noise on the PR -- having a hard time with formatting and nested <details>

For some reason I now have to supply externals, and I think that's breaking a bunch of stuff (lots of stuff to exclude) -- I think addon.dependencies() is supposed to do all this..

In this commit: NullVoxPopuli/ember-addon-v2-typescript-demo@7834ea2

I now get this (with no changes to this PR, #1106):

❯ cat dist/components/demo/index.js 
import { setComponentTemplate } from '@ember/component';
import { hbs } from 'ember-cli-htmlbars';
import { __decorate } from 'tslib';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

var TEMPLATE = setComponentTemplate(TEMPLATE, hbs`Hello there!

<out>{{this.active}}</out>

<this.Button @onClick={{this.flip}} />
`);

var FlipButton = setComponentTemplate(FlipButton, hbs`<button {{on 'click' @onClick}}>
  flip
</button>
`);

class Demo extends Component {
  constructor(...args) {
    super(...args);
    this.Button = FlipButton;
    this.active = false;

    this.flip = () => this.active = !this.active;
  }

}

__decorate([tracked], Demo.prototype, "active", void 0);

setComponentTemplate(TEMPLATE, Demo);

export { Demo as default };

[ef4]

Nic work, thanks.