From 5e8486c0d544516cef855ef9c2fc4038bec3d108 Mon Sep 17 00:00:00 2001
From: Dylan Piercey <dpiercey@ebay.com>
Date: Fri, 21 Apr 2023 11:33:43 -0700
Subject: [PATCH] chore: improve typescript docs, link to type-check cli

---
 packages/marko/docs/typescript.md | 91 ++++++++++++++++---------------
 1 file changed, 48 insertions(+), 43 deletions(-)

diff --git a/packages/marko/docs/typescript.md b/packages/marko/docs/typescript.md
index e32fac866..3816c2015 100644
--- a/packages/marko/docs/typescript.md
+++ b/packages/marko/docs/typescript.md
@@ -200,9 +200,9 @@ _index.marko_
 </for-by-two>
 ```
 
-### Extending a native tag type
+### Extending native tag types within a Marko tag
 
-The types for native tags are accessed via the global `Marko.NativeTags` type. Here's an example of a component that adds a feature to the `button` element:
+The types for native tags are accessed via the global `Marko.Input` type. Here's an example of a component that extends the `button` html tag:
 
 _color-button.marko_
 
@@ -219,6 +219,49 @@ $ const { color, renderBody, ...restOfInput } = input;
 </button>
 ```
 
+### Registering a new native tag (eg for custom elements).
+
+```ts
+interface MyCustomElementAttributes {
+  // ...
+}
+
+declare global {
+  namespace Marko {
+    namespace NativeTags {
+      // By adding this entry, you can now use `my-custom-element` as a native html tag.
+      "my-custom-element": MyCustomElementAttributes
+    }
+  }
+}
+```
+
+### Registering new "global" HTML Attributes
+
+```ts
+declare global {
+  namespace Marko {
+    interface HTMLAttributes {
+      "my-non-standard-attribute"?: string; // Adds this attribute as available on all HTML tags.
+    }
+  }
+}
+```
+
+### Registering CSS Properties (eg for custom properties)
+
+```ts
+declare global {
+  namespace Marko {
+    namespace CSS {
+      interface Properties {
+        "--foo"?: string; // adds a support for a custom `--foo` css property.
+      }
+    }
+  }
+}
+```
+
 ## TypeScript Syntax in `.marko`
 
 Any [JavaScript expression in Marko](./syntax.md#inline-javascript) can also be written as a TypeScript expression.
@@ -358,45 +401,7 @@ _components/color-rotate-button/index.marko_
 </button>
 ```
 
-## Extend Native Tags (for custom elements)
+# CI Type Checking
 
-```ts
-interface MyCustomElementAttributes {
-  // ...
-}
-
-declare global {
-  namespace Marko {
-    namespace NativeTags {
-      // By adding this entry, you can now use `my-custom-element` as a native html tag.
-      "my-custom-element": MyCustomElementAttributes
-    }
-  }
-}
-```
-
-## Extending the "global" HTML Attributes
-
-```ts
-declare global {
-  namespace Marko {
-    interface HTMLAttributes {
-      "my-non-standard-attribute"?: string; // Adds this attribute as available on all HTML tags.
-    }
-  }
-}
-```
-
-## Extending CSS Properties (for custom properties)
-
-```ts
-declare global {
-  namespace Marko {
-    namespace CSS {
-      interface Properties {
-        "--foo"?: string; // adds a support for a custom `--foo` css property.
-      }
-    }
-  }
-}
-```
+For type checking Marko files outside of your editor there is the ["@marko/type-check" cli](https://github.com/marko-js/language-server/tree/main/packages/type-check).
+Check out the CLI documentation for more information.