docs/issue 188 built in TypeScript support (#198)

Author: thescientist13

netlify.toml

@@ -11,4 +11,9 @@
 [[redirects]]
   status = 302
   from = "/discord/"
-  to = "https://discord.gg/dmDmjFCKuH"
+  to = "https://discord.gg/dmDmjFCKuH"
+
+[[redirects]]
+  status = 301
+  from = "/docs/plugins/typescript/"
+  to = "/docs/resources/typescript/"

src/pages/docs/content-as-data/collections.md

@@ -6,9 +6,9 @@ tocHeading: 2
 
 # Collections
 
-Collections are a feature in Greenwood by which you can use [frontmatter](/docs/resources/markdown/#frontmatter) to group pages that can then be referenced through [JavaScript](/docs/content-as-data/data-client/) or [active frontmatter](/docs/content-as-data/active-frontmatter/).
+Collections are a feature in Greenwood by which you can use [frontmatter](/docs/resources/markdown/#frontmatter) to group pages that can then be referenced through [JavaScript](/docs/content-as-data/data-client/) or [active frontmatter](/docs/content-as-data/active-frontmatter/). This can be a useful way to group pages for things like navigation menus based on the content in your pages directory.
 
-This can be a useful way to group pages for things like navigation menus based on the content in your pages directory.
+See our [reference docs on Greenwood's available types](/docs/reference/appendix/#types) for more information on authoring with TypeScript.
 
 ## Usage
 

src/pages/docs/content-as-data/data-client.md

@@ -6,7 +6,9 @@ tocHeading: 2
 
 # Data Client
 
-To access your content as data with Greenwood, there are three pre-made APIs you can use, based on your use case. These are isomorphic in that they will consume live data during development, and statically build out each query at build time to its own JSON file that will be fetched client side without needing a. This way, you can serialize and / or hydrate from this data as needed based on your needs.
+To access your content as data with Greenwood, there are three pre-made APIs you can use, based on your use case. These are isomorphic in that they will consume live data during development, and statically build out each query at build time to its own JSON file that will be fetched client side without needing a server. This way, you can serialize and / or hydrate from this data as needed based on your needs.
+
+See our [reference docs on Greenwood's available types](/docs/reference/appendix/#types) for more information on authoring with TypeScript.
 
 > This feature works best when used for build time templating when combined with the [**static** optimization](/docs/reference/configuration/#optimization) setting.
 

src/pages/docs/plugins/css-modules.md

@@ -2,7 +2,7 @@
 title: CSS Modules
 label: CSS Modules
 layout: docs
-order: 3
+order: 2
 tocHeading: 2
 ---
 
@@ -123,3 +123,46 @@ And reference that in your (Light DOM) HTML based Web Component:
 <!-- prettier-ignore-end -->
 
 From there, Greenwood will scope your CSS class names by prefixing them with the filename and a hash of the contents, inline that into a `<style>` tag in the HTML, and then strip the reference to the _module.css_ file from your JavaScript file.
+
+## Types
+
+Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  /** @type {import('@greenwood/plugin-css-modules').CssModulesPlugin} */
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```ts
+  import type { CssModulesPlugin } from '@greenwood/plugin-css-modules';
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+To support typing of `.module.css` imports, you can add this type definition to your project:
+
+<app-ctc-block variant="snippet" heading="src/types.d.ts">
+
+```ts
+declare module "*.module.css" {
+  const styles: { [className: string]: string };
+  export default styles;
+}
+```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->

src/pages/docs/plugins/index.md

@@ -13,7 +13,6 @@ tocHeading: 2
 ## Featured
 
 - [Lit SSR](/docs/plugins/lit-ssr/) - For Lit users, a custom renderer plugin to support Lit+SSR
-- [TypeScript](/docs/plugins/typescript/) - A plugin for transforming files written in TypeScript
 - [PostCSS](/docs/plugins/postcss/) - Leverage PostCSS plugins, like [Tailwind](/guides/ecosystem/tailwind/)
 - [CSS Modules](/docs/plugins/css-modules/) - Support for [CSS Modules](https://github.com/css-modules/css-modules) ™️ syntax
 - [Raw Loader](/docs/plugins/raw/) - Import arbitrary text files as ESM
@@ -25,7 +24,7 @@ Below is the official list of supported first-party plugins available by the Gre
 <br>
 
 | Name                                                                                                      | Description                                                                                                   |
-| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --- |
 | [Babel](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-babel)                  | Use [**Babel**](https://babeljs.io/) plugins, presets, and configuration in your project.                     |
 | [HTML Include](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-include-html)    | Inspired by the original [HTML Imports spec](https://www.html5rocks.com/en/tutorials/webcomponents/imports/). |
 | [Import Raw](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-import-raw)        | Enables usage of ESM syntax for loading arbitrary file contents as a string.                                  |
@@ -34,6 +33,5 @@ Below is the official list of supported first-party plugins available by the Gre
 | [Netlify](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-adapter-netlify)      | Deploy serverless and edge functions to [**Netlify**](https://www.netlify.com/).                              |
 | [Polyfills](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-polyfills)          | Web Component related polyfills for older browsers.                                                           |
 | [PostCSS](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-postcss)              | Allows usage of [**PostCSS**](https://postcss.org/) plugins and configuration in your project.                |
-| [Puppeteer](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-puppeteer) | A rendering plugin to support prerendering a Greenwood project using Puppeteer.                               |
-| [TypeScript](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-typescript)        | Allows usage of [**TypeScript**](https://www.typescriptlang.org/) syntax.                                     |
+| [Puppeteer](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-puppeteer) | A rendering plugin to support prerendering a Greenwood project using Puppeteer.                               |     |
 | [Vercel](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-adapter-vercel)        | Deploy serverless and edge functions with [**Vercel**](https://vercel.com/).                                  |

src/pages/docs/plugins/lit-ssr.md

@@ -2,7 +2,7 @@
 title: Lit SSR
 label: Lit SSR
 layout: docs
-order: 2
+order: 1
 tocHeading: 2
 ---
 
@@ -123,3 +123,33 @@ Below is an example of generating a page of LitElement based Web Components:
 <!-- prettier-ignore-end -->
 
 > Keep in mind you will need to make sure your Lit Web Components are isomorphic and [properly leveraging `LitElement`'s lifecycles](https://github.com/lit/lit/tree/main/packages/labs/ssr#notes-and-limitations) and browser / Node APIs accordingly for maximum compatibility and portability.
+
+## Types
+
+Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  /** @type {import('@greenwood/plugin-renderer-lit').LitRendererPlugin} */
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```ts
+  import type { LitRendererPlugin } from '@greenwood/plugin-renderer-lit';
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+> If you're using Lit with TypeScript, you'll most likely be using [their decorators](https://lit.dev/docs/components/decorators/#compiler-output-considerations), If so, make sure to enable the [`useTsc` option](/docs/reference/configuration/#use-typescript-compiler) in your Greenwood configuration file.

src/pages/docs/plugins/postcss.md

@@ -2,7 +2,7 @@
 title: PostCSS
 label: PostCSS
 layout: docs
-order: 5
+order: 4
 tocHeading: 2
 ---
 
@@ -118,3 +118,31 @@ and see the results of the plugin in the generated styles
   }
 }
 ```
+
+## Types
+
+Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  /** @type {import('@greenwood/plugin-postcss').PostCssPlugin} */
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```ts
+  import type { PostCssPlugin } from '@greenwood/plugin-postcss';
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->

src/pages/docs/plugins/raw.md

@@ -1,6 +1,6 @@
 ---
 layout: docs
-order: 4
+order: 3
 tocHeading: 2
 ---
 
@@ -111,3 +111,46 @@ Or perfect for statically embedding SVGs into HTML:
 </app-ctc-block>
 
 <!-- prettier-ignore-end -->
+
+## Types
+
+Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  /** @type {import('@greenwood/plugin-import-raw').ImportRawPlugin} */
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```ts
+  import type { ImportRawPlugin } from '@greenwood/plugin-import-raw';
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+To support typing of raw file imports, you can add this type definition to your project:
+
+<app-ctc-block variant="snippet" heading="src/types.d.ts">
+
+```ts
+declare module "*?type=raw" {
+  const content: string;
+  export default content;
+}
+```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->