Make it easier to avoid errors with vanilla tsc

.eslintrc

@@ -32,6 +32,7 @@
         "@typescript-eslint/no-use-before-define": "off",
         "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/triple-slash-reference": "off",
         "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/no-unused-vars": ["warn", { "varsIgnorePattern": "^_" }],
         "@typescript-eslint/ban-ts-comment": ["error", { "ts-ignore": "allow-with-description" }],

README.md

@@ -81,6 +81,8 @@ The language server can also enable your editor to provide other richer help, su
 
 ### With GlimmerX
 
+To minimize spurious errors when typechecking with vanilla `tsc` or your editor's TypeScript integration, you should add `import '@glint/environment-glimmerx';` somewhere in your project's source or type declarations. You may also choose to disable TypeScript's "unused symbol" warnings in your editor, since `tsserver` won't understand that templates actually are using them.
+
 #### Import Paths
 
 In order for GlimmerX entities to be interpretable by Glint, you currently need to use Glint-specific import paths for `@glimmerx/modifier`, `@glimmerx/helper` and `@glimmerx/component`. Note that [this is not a long-term restriction](#environment-re-exports), but a temporary workaround for the current state of the ecosystem.
@@ -164,6 +166,8 @@ import type { TC } from '@glint/environment-glimmerx/component';
 
 ### With Ember.js
 
+To minimize spurious errors when typechecking with vanilla `tsc` or your editor's TypeScript integration, you should add `import '@glint/environment-ember-loose';` somewhere in your project's source or type declarations. You may also choose to disable TypeScript's "unused symbol" warnings in your editor, since `tsserver` won't understand that templates actually are using them.
+
 #### Import Paths
 
 In order for GlimmerX entities to be interpretable by Glint, you currently need to use Glint-specific import paths for `@glimmer/component`, `@ember/component` and `ember-modifier`. Note that [this is not a long-term restriction](#environment-re-exports), but a temporary workaround for the current state of the ecosystem.

packages/environment-ember-loose/-private/index.ts

@@ -1,7 +1,8 @@
-// Import the scaffolding for the template registry and our merged declarations
+// Reference the scaffolding for the template registry and our merged declarations
 // for third party modules so that vanilla TS will see those as long as authors
 // have `import '@glint/environment-ember-loose'` somewhere in their project.
-import type {} from '../registry';
-import type {} from './dsl/integration-declarations';
+
+/// <reference path="../registry/index.d.ts" />
+/// <reference path="./dsl/integration-declarations.d.ts" />
 
 export { ComponentSignature, ComponentLike, ComponentWithBoundArgs } from './utilities';

packages/environment-glimmerx/-private/dsl/integration-declarations.d.ts

@@ -0,0 +1,9 @@
+import '@glimmerx/component';
+import { TemplateComponent } from '../../component';
+
+// Declaring that `hbs` returns a `TemplateComponent` prevents vanilla `tsc` from freaking out when
+// it sees code like `const MyThing: TC<Sig> = hbs...`. Glint itself will never see `hbs` get used, as
+// it's transformed to the template DSL before typechecking.
+declare module '@glimmerx/component' {
+  export function hbs(source: TemplateStringsArray): TemplateComponent<any>;
+}

packages/environment-glimmerx/-private/index.ts

@@ -0,0 +1,5 @@
+// Reference the scaffolding for our merged declarations for third party modules so
+// that vanilla TS will see those as long as authors have
+// `import '@glint/environment-glimmerx'` somewhere in their project.
+
+/// <reference path="./dsl/integration-declarations.d.ts" />

packages/environment-glimmerx/package.json

@@ -5,6 +5,8 @@
   "description": "A Glint environment to support GlimmerX projects",
   "license": "MIT",
   "author": "Dan Freeman (https://github.com/dfreeman)",
+  "main": "-private/index.js",
+  "types": "-private/index.d.ts",
   "glint-environment": "-private/environment/index.js",
   "keywords": [
     "glint-environment"

test-packages/ts-ember-app/package.json

@@ -16,8 +16,9 @@
     "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint .",
     "start": "ember serve",
-    "test": "npm-run-all typecheck test:browsers",
+    "test": "npm-run-all typecheck test:tsc test:browsers",
     "typecheck": "glint",
+    "test:tsc": "tsc --noEmit",
     "test:browsers": "ember test"
   },
   "devDependencies": {

test-packages/ts-ember-app/types/demo-ember-app/index.d.ts

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import '@glint/environment-ember-loose/registry';
+import '@glint/environment-ember-loose';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface

test-packages/ts-glimmerx-app/package.json

@@ -11,7 +11,8 @@
     "lint": "eslint . --cache",
     "start": "webpack-dev-server",
     "typecheck": "glint",
-    "test": "npm-run-all typecheck test:browsers",
+    "test": "npm-run-all typecheck test:tsc test:browsers",
+    "test:tsc": "tsc --noEmit",
     "test:browsers": "testem ci",
     "test:watch": "testem"
   },

test-packages/ts-glimmerx-app/types/index.d.ts

@@ -0,0 +1 @@
+import '@glint/environment-glimmerx';