Skip to content

Commit

Permalink
chore(docs): write out the TypeScript + Glint docs
Browse files Browse the repository at this point in the history
  • Loading branch information
NullVoxPopuli committed Oct 14, 2022
1 parent 5b1c887 commit cab0217
Show file tree
Hide file tree
Showing 6 changed files with 93 additions and 7 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
.DS_Store

# compiled output
dist/
Expand Down
Binary file added docs-app/public/glint-example-intellisense.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs-app/public/glint-example-jsdoc.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
91 changes: 90 additions & 1 deletion docs/typescript-and-glint.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,93 @@ title: TypeScript/Glint
---
# Using with TypeScript/Glint

todo
This library is written in TypeScript, but it is still new and the shape of the types may only improve with time as we add type tests using [expect-type][gh-expect-type].

While this library adheres and strives for [SemVer][docs-semver], TypeScript does not.
Type changes during minor upgrades may be considered breaking changes to some.
Today, the type-tests in this library are few, so we cannot guarantee SemVer with our types _yet_.
The goal, is to follow the advice of [Semantic Versioning for TypeScript Types][rfc-730] -- but to do so,
requires more type tests. Until noted in the Changelog that our TypeScript types fall under SemVer,
consider type changes to "bugfixes" for patch releases.

If any bugs (or confusion) are encountered with the type inference, whether in JS, TS, or templates, please [open an issue][self-issue].

[rfc-730]: https://github.com/emberjs/rfcs/pull/730
[gh-expect-type]: https://github.com/mmkal/expect-type
[docs-semver]: https://semver.org/
[docs-glint]: https://typed-ember.gitbook.io/glint/
[self-issue]: https://github.com/CrowdStrike/ember-headless-table/issues

## In JavaScript and TypeScript

When defining all parameters within the `headlessTable` function, all type inference should "just work",
but all relavant types are available manual usage for creating reactive data within your config.

For example

```ts
import {
headlessTable,
type ColumnConfig,
} from 'ember-headless-table';

class Demo {
table = headlessTable(this, {
columns: () => [ /* ... */ ], // ColumnConfig<DataType>[]
data: () => [ /* ... */ ], // DataType[] - generic, inferred from whatever is passed here
});
}
```
could be written as (for swapping out both columns and data)

```ts
import { tracked } from '@glimmer/tracking';

import {
headlessTable,
type ColumnConfig,
} from 'ember-headless-table';

interface MyData {
foo: string;
bar: number;
}

class Demo {
@tracked columns: ColumnConfig<MyData>[] = [ /* ... */ ]

@tracked data: MyData[] = [ /* ... */ ];

table = headlessTable(this, {
columns: () => this.columns,
data: () => this.data,
});
}
```


## In Templates

[Glint][docs-glint] is still young, and pre-release, but it's proved it's worth -- and for new projects,
it can be a great choice to help ensure that your code is as bug-free as possible.
Glint was the missing for TypeScript to truely shine in Ember, and this library strives to make sure that
inference of all public APIs (properties, plugin-configs, etc) _works by default_.

Here are a couple screenshots from our own tests showing that Glint provides intellisense and JSDoc documentation in VSCode:

![Glint in VSCode providing intillesense](/glint-example-intellisense.png)
![Glint in VSCode providing inline API documentation](/glint-example-jsdoc.png)

### Editor integration

The Glint [getting started docs][docs-glint-start] cover some of this, but for quick access, you may be interested in these links:

- Glint [VS Code Extension][glint-ext-vscode]
- Glint [Language Server][glint-ls]
- Example usage with native LSP w/ [neovim][example-neovim-lsp]


[example-neovim-lsp]: https://github.com/NullVoxPopuli/dotfiles/blob/0df85d633f978cf67c7df9d36d21ce6820d4b419/home/.config/nvim/lua/plugin-config/lsp.lua#L25
[glint-ls]: https://typed-ember.gitbook.io/glint/getting-started
[glint-ext-vscode]: https://marketplace.visualstudio.com/items?itemName=typed-ember.glint-vscode
[docs-glint-start]: https://typed-ember.gitbook.io/glint/getting-started
4 changes: 1 addition & 3 deletions test-app/tests/plugins/column-visibility/rendering-test.gts
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,7 @@ module('Plugins | columnVisibility', function (hooks) {
{{#each this.table.rows as |row|}}
<tr>
{{#each this.columns as |column|}}
<td>
{{! @glint-ignore }}
{{column.getValueForRow row}}</td>
<td>{{column.getValueForRow row}}</td>
{{/each}}
</tr>
{{/each}}
Expand Down
4 changes: 1 addition & 3 deletions test-app/tests/plugins/data-sorting/rendering-test.gts
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,7 @@ module('Plugins | dataSorting', function (hooks) {
{{#each this.table.rows as |row|}}
<tr>
{{#each this.table.columns as |column|}}
<td>
{{! @glint-ignore }}
{{column.getValueForRow row}}</td>
<td>{{column.getValueForRow row}}</td>
{{/each}}
</tr>
{{/each}}
Expand Down

0 comments on commit cab0217

Please sign in to comment.