Ember-cli-typescript: Octane - template co-location

[csylaios]

With new ember octane you can have the js and hbs files co-located under the app/components directory. this however does not work when using ember-cli-typescript.

[dfreeman]

Thanks for the report, @csylaios!

It looks like this is a known limitation of the initial colocation implementation in ember-cli-htmlbars right now: https://github.com/ember-cli/ember-cli-htmlbars/pull/249/files#diff-fc695117845e9b76dfb1841d2221ac7cR44-R45

I don't think there's anything we can do from this end to make that work, but I'll keep this issue open for now in case others run into the same thing.

[csylaios]

Thanks a lot for your response, will wait for a fix for this

[fpauser]

Same problem here. Just created a fresh octane app with one co-located component. After adding ember-cli-typescript via ember install ember-cli-typescript without touching anything else I get a bunch of errors (see below). Unsure if this is related to this issue or if I should open a new one.

$ ember s
node_modules/@glimmer/interfaces/dist/types/lib/dom/bounds.d.ts:1:43 - error TS2307: Cannot find module '@simple-dom/interface'.

1 import { SimpleElement, SimpleNode } from '@simple-dom/interface';
                                            ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/runtime/dist/types/lib/vm/update.d.ts:4:28 - error TS2307: Cannot find module '@simple-dom/interface'.

4 import { SimpleNode } from '@simple-dom/interface';
                             ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/runtime/dist/types/lib/vm/update.d.ts:46:29 - error TS2307: Cannot find module '@simple-dom/interface'.

46     parentElement(): import("@simple-dom/interface").SimpleElement;
                               ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/runtime/dist/types/lib/vm/attributes/index.d.ts:2:46 - error TS2307: Cannot find module '@simple-dom/interface'.

2 import { AttrNamespace, SimpleElement } from '@simple-dom/interface';
                                               ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/runtime/dist/types/lib/vm/attributes/dynamic.d.ts:2:46 - error TS2307: Cannot find module '@simple-dom/interface'.

2 import { AttrNamespace, SimpleElement } from '@simple-dom/interface';
                                               ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/runtime/dist/types/lib/bounds.d.ts:3:43 - error TS2307: Cannot find module '@simple-dom/interface'.

3 import { SimpleElement, SimpleNode } from '@simple-dom/interface';
                                            ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/runtime/dist/types/lib/component/curried-component.d.ts:6:87 - error TS2677: A type predicate's type must be assignable to its parameter's type.
  Type 'CurriedComponentDefinition' is not assignable to type 'Maybe<Dict<unknown>>'.
    Type 'CurriedComponentDefinition' is not assignable to type 'Dict<unknown>'.
      Index signature is missing in type 'CurriedComponentDefinition'.

6 export declare function isComponentDefinition(definition: Maybe<Dict>): definition is CurriedComponentDefinition;
                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/runtime/dist/types/lib/dom/operations.d.ts:1:86 - error TS2307: Cannot find module '@simple-dom/interface'.

1 import { SimpleElement, SimpleDocument, SimpleNode, SimpleText, SimpleComment } from '@simple-dom/interface';
                                                                                       ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/runtime/dist/types/lib/dom/helper.d.ts:3:103 - error TS2307: Cannot find module '@simple-dom/interface'.

3 import { AttrNamespace, ElementNamespace, Namespace, SimpleDocument, SimpleElement, SimpleNode } from '@simple-dom/interface';
                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/runtime/dist/types/lib/dom/props.d.ts:1:31 - error TS2307: Cannot find module '@simple-dom/interface'.

1 import { SimpleElement } from '@simple-dom/interface';
                                ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/runtime/dist/types/lib/environment.d.ts:4:62 - error TS2307: Cannot find module '@simple-dom/interface'.

4 import { AttrNamespace, SimpleDocument, SimpleElement } from '@simple-dom/interface';
                                                               ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/runtime/dist/types/lib/vm/element-builder.d.ts:3:109 - error TS2307: Cannot find module '@simple-dom/interface'.

3 import { AttrNamespace, SimpleComment, SimpleDocumentFragment, SimpleElement, SimpleNode, SimpleText } from '@simple-dom/interface';
                                                                                                              ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/runtime/dist/types/lib/vm/rehydrate-builder.d.ts:3:85 - error TS2307: Cannot find module '@simple-dom/interface'.

3 import { AttrNamespace, SimpleComment, SimpleElement, SimpleNode, SimpleText } from '@simple-dom/interface';
                                                                                      ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/interfaces/dist/types/lib/dom/changes.d.ts:7:8 - error TS2307: Cannot find module '@simple-dom/interface'.

7 } from '@simple-dom/interface';
         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/interfaces/dist/types/lib/runtime/modifier.d.ts:6:31 - error TS2307: Cannot find module '@simple-dom/interface'.

6 import { SimpleElement } from '@simple-dom/interface';
                                ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/interfaces/dist/types/lib/runtime/environment.d.ts:3:46 - error TS2307: Cannot find module '@simple-dom/interface'.

3 import { AttrNamespace, SimpleElement } from '@simple-dom/interface';
                                               ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/interfaces/dist/types/lib/components/component-manager.d.ts:2:31 - error TS2307: Cannot find module '@simple-dom/interface'.

2 import { SimpleElement } from '@simple-dom/interface';
                                ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/interfaces/dist/types/lib/runtime/render.d.ts:1:43 - error TS2307: Cannot find module '@simple-dom/interface'.

1 import { SimpleElement, SimpleNode } from '@simple-dom/interface';
                                            ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/interfaces/dist/types/lib/dom/attributes.d.ts:8:8 - error TS2307: Cannot find module '@simple-dom/interface'.

8 } from '@simple-dom/interface';
         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/interfaces/dist/types/lib/dom/tree-construction.d.ts:7:8 - error TS2307: Cannot find module '@simple-dom/interface'.

7 } from '@simple-dom/interface';
         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/util/dist/types/lib/destroy.d.ts:3:69 - error TS2677: A type predicate's type must be assignable to its parameter's type.
  Type 'SymbolDestroyable' is not assignable to type 'Maybe<Dict<unknown>>'.
    Type 'SymbolDestroyable' is not assignable to type 'Dict<unknown>'.
      Index signature is missing in type 'SymbolDestroyable'.

3 export declare function isDestroyable(value: Maybe<Dict>): value is SymbolDestroyable;
                                                                      ~~~~~~~~~~~~~~~~~

node_modules/@glimmer/util/dist/types/lib/dom.d.ts:1:31 - error TS2307: Cannot find module '@simple-dom/interface'.

1 import { SimpleElement } from '@simple-dom/interface';
                                ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@glimmer/util/dist/types/lib/is-serialization-first-node.d.ts:1:28 - error TS2307: Cannot find module '@simple-dom/interface'.

1 import { SimpleNode } from '@simple-dom/interface';
                             ~~~~~~~~~~~~~~~~~~~~~~~

[dfreeman]

@fpauser that issue is separate from co-location, but also being tracked 🙂

https://github.com/glimmerjs/glimmer-vm/issues/946

[fpauser]

Ah, thanks for linking ;)
Should I remove my comment then?

[dfreeman]

It's all good—if you found your way to this issue because you were running into the type errors, there's a decent chance others will too, and seeing the conversation will point them in the right direction!

[dfreeman]

The issue with the typings for @glimmer/component is still outstanding, but I think as of [email protected], template colocation should be good to go in TypeScript projects. @csylaios can you confirm when you have the chance?

[csylaios]

yes @dfreeman tried it in an app and it's working. thanks

[csylaios]

@dfreeman found one issue, when the file is named template.ts and template.hbs it doesen't embed the template within the source. (so the result is empty).

[dfreeman]

@csylaios Is your component meant to be called <Template>? Does it work when the file is template.js? It wouldn't surprise me if that didn't work because of the ambiguity with a pod-layout template, but I don't _think_ that would be a TypeScript-specific problem.

[csylaios]

@dfreeman yes i have a nested component <App::Templates::Template> and it didnt work there. I don't think its a typescript issue. I will test with .js and let you know

[csylaios]

@dfreeman tested and it doesn't compile Error: EEXIST: file already exists, symlin... so its definitely not a typescript issue

[dfreeman]

Thanks for confirming, @csylaios! In that case I'd recommend opening an issue on the ember-cli-htmlbars repo to explain what you're trying to do and the error you're getting.

Since it looks like we have all the known TypeScript-specific blockers for colocated templates checked off, I'm going to go ahead and close this out 🎉

[TheLooseCannon]

$ ember generate component foo --gc --ns
The option '--gc' is not registered with the 'generate' command. Run `ember generate --help` for a list of supported options.
The option '--ns' is not registered with the 'generate' command. Run `ember generate --help` for a list of supported options.
installing component
  create addon/components/foo.ts
  create addon/templates/components/foo.hbs
installing component-test
  create tests/integration/components/foo-test.ts
installing component-addon
  create app/components/foo.js

why am i still getting this ?
my dependencies

"dependencies": {
"ember-cli-babel": "^7.13.0",
"ember-cli-htmlbars": "^4.2.0",
"ember-cli-typescript": "^3.1.2"
}

im i missing out something here?