From ff6078d3d9dac9a1d5310a027d41e7d6a75ce959 Mon Sep 17 00:00:00 2001 From: ling1726 Date: Thu, 24 Feb 2022 10:51:32 +0000 Subject: [PATCH] docs: Convert docs to typescript (#48) * docs: Convert docs to typescript * TS improvements * Change files --- ...-theme-common-npm-2.0.0-beta.15-aaa76f45ef | 117 +++++++++++ apps/website/project.json | 8 + .../OutputTitle/{index.js => index.tsx} | 8 +- .../Playground/{index.js => index.tsx} | 6 +- .../src/components/Playground/template/App.js | 9 +- .../components/Playground/template/Styles.js | 5 +- .../src/components/{icons.js => icons.tsx} | 0 .../src/theme/Toggle/{index.js => index.tsx} | 8 +- apps/website/tsconfig.json | 17 +- ...-1550fea4-75fd-4e1d-91be-6f6e354c48f9.json | 7 + ...-f4f7d8d2-fbb4-4c0d-8015-01fcd065b460.json | 7 + ...-7f3bf76b-121c-44f2-92c9-bf38d52a4202.json | 7 + ...-392971f5-c184-48b0-82b9-d33deadbcf1c.json | 7 + ...-e5e40d4f-97fb-457c-b2cc-121c898ad1ea.json | 7 + package.json | 7 +- packages/babel-preset/project.json | 3 +- packages/core/project.json | 3 +- packages/jest-serializer/project.json | 3 +- packages/react/project.json | 3 +- packages/webpack-loader/project.json | 3 +- typings/static-assets/README.md | 37 ++++ typings/static-assets/index.d.ts | 38 ++++ typings/static-assets/tsconfig.json | 5 + typings/tsconfig.json | 3 + yarn.lock | 194 +++++++++++++++++- 25 files changed, 485 insertions(+), 27 deletions(-) create mode 100644 .yarn/patches/@docusaurus-theme-common-npm-2.0.0-beta.15-aaa76f45ef rename apps/website/src/components/OutputTitle/{index.js => index.tsx} (62%) rename apps/website/src/components/Playground/{index.js => index.tsx} (77%) rename apps/website/src/components/{icons.js => icons.tsx} (100%) rename apps/website/src/theme/Toggle/{index.js => index.tsx} (92%) create mode 100644 change/@griffel-babel-preset-1550fea4-75fd-4e1d-91be-6f6e354c48f9.json create mode 100644 change/@griffel-core-f4f7d8d2-fbb4-4c0d-8015-01fcd065b460.json create mode 100644 change/@griffel-jest-serializer-7f3bf76b-121c-44f2-92c9-bf38d52a4202.json create mode 100644 change/@griffel-react-392971f5-c184-48b0-82b9-d33deadbcf1c.json create mode 100644 change/@griffel-webpack-loader-e5e40d4f-97fb-457c-b2cc-121c898ad1ea.json create mode 100644 typings/static-assets/README.md create mode 100644 typings/static-assets/index.d.ts create mode 100644 typings/static-assets/tsconfig.json diff --git a/.yarn/patches/@docusaurus-theme-common-npm-2.0.0-beta.15-aaa76f45ef b/.yarn/patches/@docusaurus-theme-common-npm-2.0.0-beta.15-aaa76f45ef new file mode 100644 index 000000000..58b5a1dbb --- /dev/null +++ b/.yarn/patches/@docusaurus-theme-common-npm-2.0.0-beta.15-aaa76f45ef @@ -0,0 +1,117 @@ +diff --git a/lib/components/Collapsible/index.d.ts b/lib/components/Collapsible/index.d.ts +index 048360eabdca9e50289ee886c7debc21ba05949a..1df99e04a6ce5c7dec39e0b198d82e9612e5388d 100644 +--- a/lib/components/Collapsible/index.d.ts ++++ b/lib/components/Collapsible/index.d.ts +@@ -4,7 +4,7 @@ + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +-import React, { type Dispatch, type SetStateAction, type ReactNode } from 'react'; ++import React, { Dispatch, SetStateAction, ReactNode } from 'react'; + export declare type UseCollapsibleConfig = { + initialState: boolean | (() => boolean); + }; +diff --git a/lib/components/Details/index.d.ts b/lib/components/Details/index.d.ts +index 36a1a482ccd3dd311e02eedb0656ac19e3957bdf..944a3c453bf51aa79b3e6c5cf06d8009680d12f3 100644 +--- a/lib/components/Details/index.d.ts ++++ b/lib/components/Details/index.d.ts +@@ -4,7 +4,7 @@ + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +-import { type ComponentProps, type ReactElement } from 'react'; ++import { ComponentProps, ReactElement } from 'react'; + export declare type DetailsProps = { + summary?: ReactElement; + } & ComponentProps<'details'>; +diff --git a/lib/utils/announcementBarUtils.d.ts b/lib/utils/announcementBarUtils.d.ts +index eece3b5f6bc71d0e96fb040f0264677e38e5d916..d24b6fc301644820cd471e308917d8ebca109687 100644 +--- a/lib/utils/announcementBarUtils.d.ts ++++ b/lib/utils/announcementBarUtils.d.ts +@@ -4,7 +4,7 @@ + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +-import { type ReactNode } from 'react'; ++import { ReactNode } from 'react'; + export declare const AnnouncementBarDismissStorageKey = "docusaurus.announcement.dismiss"; + declare type AnnouncementBarAPI = { + readonly isActive: boolean; +diff --git a/lib/utils/docSidebarItemsExpandedState.d.ts b/lib/utils/docSidebarItemsExpandedState.d.ts +index c159b3c5a462dd3abc19d06a6d4cfe20dbb93b84..271174b4bb8d9908fcef6b4d94cf13e833bc7664 100644 +--- a/lib/utils/docSidebarItemsExpandedState.d.ts ++++ b/lib/utils/docSidebarItemsExpandedState.d.ts +@@ -4,7 +4,7 @@ + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +-import { type ReactNode } from 'react'; ++import { ReactNode } from 'react'; + declare type DocSidebarItemsExpandedState = { + expandedItem: number | null; + setExpandedItem: (a: number | null) => void; +diff --git a/lib/utils/docsPreferredVersion/useDocsPreferredVersion.d.ts b/lib/utils/docsPreferredVersion/useDocsPreferredVersion.d.ts +index e8dd2309f014ddd57a1ddb4c8e9d55a4354ae725..7cf7282de02630a4a69f39359aa671c9ffb78417 100644 +--- a/lib/utils/docsPreferredVersion/useDocsPreferredVersion.d.ts ++++ b/lib/utils/docsPreferredVersion/useDocsPreferredVersion.d.ts +@@ -5,7 +5,7 @@ + * LICENSE file in the root directory of this source tree. + */ + /// +-import { type GlobalVersion } from '@docusaurus/plugin-content-docs/client'; ++import { GlobalVersion } from '@docusaurus/plugin-content-docs/client'; + export declare function useDocsPreferredVersion(pluginId?: string | undefined): { + preferredVersion: GlobalVersion | null | undefined; + savePreferredVersionName: (versionName: string) => void; +diff --git a/lib/utils/docsUtils.d.ts b/lib/utils/docsUtils.d.ts +index c495b505d4cbac92e63e7bbf4b05d121370a7ffb..7a39a31a8c06de9af804e6d49f868da9e2ce1aeb 100644 +--- a/lib/utils/docsUtils.d.ts ++++ b/lib/utils/docsUtils.d.ts +@@ -4,7 +4,7 @@ + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +-import { type ReactNode } from 'react'; ++import { ReactNode } from 'react'; + import type { PropSidebar, PropSidebarItem, PropSidebarItemCategory, PropVersionDoc, PropVersionMetadata } from '@docusaurus/plugin-content-docs'; + export declare const isDocsPluginEnabled: boolean; + declare const EmptyContextValue: unique symbol; +diff --git a/lib/utils/mobileSecondaryMenu.d.ts b/lib/utils/mobileSecondaryMenu.d.ts +index a2b62f353a1b5db60109ddc8de72ebd46bbd09d6..8bb9677c51181239dbb9c4fee63da4c7510aef2c 100644 +--- a/lib/utils/mobileSecondaryMenu.d.ts ++++ b/lib/utils/mobileSecondaryMenu.d.ts +@@ -4,7 +4,7 @@ + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +-import { type ReactNode, type ComponentType } from 'react'; ++import { ReactNode, ComponentType } from 'react'; + declare type ExtraProps = { + toggleSidebar: () => void; + }; +diff --git a/lib/utils/scrollUtils.d.ts b/lib/utils/scrollUtils.d.ts +index 09f34f928666b813e863c08150b31105d988c55a..e081b4c8b8f340aab3a554807a6675876de90ba7 100644 +--- a/lib/utils/scrollUtils.d.ts ++++ b/lib/utils/scrollUtils.d.ts +@@ -4,7 +4,7 @@ + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +-import React, { type ReactNode } from 'react'; ++import React, { ReactNode } from 'react'; + /** + * We need a way to update the scroll position while ignoring scroll events + * without affecting Navbar/BackToTop visibility +diff --git a/lib/utils/tabGroupChoiceUtils.d.ts b/lib/utils/tabGroupChoiceUtils.d.ts +index 31046d523f4a759749d97c4fbc422f61d4ea9336..9271b79b8e748531bc6ff87a37d5e89643270da7 100644 +--- a/lib/utils/tabGroupChoiceUtils.d.ts ++++ b/lib/utils/tabGroupChoiceUtils.d.ts +@@ -4,7 +4,7 @@ + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +-import { type ReactNode } from 'react'; ++import { ReactNode } from 'react'; + declare type TabGroupChoiceContextValue = { + readonly tabGroupChoices: { + readonly [groupId: string]: string; diff --git a/apps/website/project.json b/apps/website/project.json index f710b0dac..29981f09f 100644 --- a/apps/website/project.json +++ b/apps/website/project.json @@ -17,6 +17,14 @@ "cwd": "apps/website", "commands": [{ "command": "docusaurus start" }] } + }, + "type-check": { + "executor": "@nrwl/workspace:run-commands", + "options": { + "cwd": "apps/website", + "commands": [{ "command": "tsc -b --pretty" }], + "outputPath": [] + } } }, "tags": [] diff --git a/apps/website/src/components/OutputTitle/index.js b/apps/website/src/components/OutputTitle/index.tsx similarity index 62% rename from apps/website/src/components/OutputTitle/index.js rename to apps/website/src/components/OutputTitle/index.tsx index 67a37e03e..7b3d69066 100644 --- a/apps/website/src/components/OutputTitle/index.js +++ b/apps/website/src/components/OutputTitle/index.tsx @@ -3,11 +3,13 @@ import React from 'react'; import { CogsIcon } from '../icons'; import styles from './styles.module.css'; -export default function OutputTitle(props) { +const OutpuTitle: React.FC = props => { return ( -
+
{props.children}
); -} +}; + +export default OutpuTitle; diff --git a/apps/website/src/components/Playground/index.js b/apps/website/src/components/Playground/index.tsx similarity index 77% rename from apps/website/src/components/Playground/index.js rename to apps/website/src/components/Playground/index.tsx index ab7742489..138340c4b 100644 --- a/apps/website/src/components/Playground/index.js +++ b/apps/website/src/components/Playground/index.tsx @@ -14,7 +14,11 @@ export default function Playground() { template="react" customSetup={{ dependencies: { '@griffel/core': 'latest', 'highlight.js': 'latest', 'js-beautify': 'latest' }, - files: { '/App.js': { code: AppCode, hidden: true }, '/Styles.js': { code: StylesCode, active: true } }, + files: { + '/App.js': { code: AppCode, hidden: true }, + // Template files are in JS but type checked, don't want unnecessary comments leaking into docs + '/Styles.js': { code: StylesCode.replace('//@ts-check\n', ''), active: true }, + }, }} > diff --git a/apps/website/src/components/Playground/template/App.js b/apps/website/src/components/Playground/template/App.js index cb9468370..ff4767fc4 100644 --- a/apps/website/src/components/Playground/template/App.js +++ b/apps/website/src/components/Playground/template/App.js @@ -1,3 +1,5 @@ +//@ts-check + import hljs from 'highlight.js/lib/core'; import 'highlight.js/styles/vs.css'; import beautify from 'js-beautify'; @@ -10,13 +12,18 @@ export default function App() { const [rules, setRules] = React.useState(''); const ref = React.useRef(null); React.useEffect(() => { + /** @type import('@griffel/core').GriffelRenderer */ const playgroundRenderer = { id: 'playground', insertCSSRules(cssRules) { - const raw = Object.values(cssRules).flat().join('\n'); + const raw = Object.values(cssRules) + .reduce((acc, val) => acc.concat(val), []) + .join('\n'); const prettified = beautify.css_beautify(raw, { indent_size: 2 }); setRules(prettified); }, + insertionCache: {}, + styleElements: {}, }; styles({ diff --git a/apps/website/src/components/Playground/template/Styles.js b/apps/website/src/components/Playground/template/Styles.js index 27f7ba025..0a0cb1992 100644 --- a/apps/website/src/components/Playground/template/Styles.js +++ b/apps/website/src/components/Playground/template/Styles.js @@ -1,11 +1,12 @@ -import { makeStyles } from '@griffel/core'; +//@ts-check +import { makeStyles, shorthands } from '@griffel/core'; export default makeStyles({ root: { backgroundColor: 'red', paddingLeft: '10px', '@media(forced-colors: active):': { - borderColor: 'transparent', + ...shorthands.borderColor('transparent'), }, }, }); diff --git a/apps/website/src/components/icons.js b/apps/website/src/components/icons.tsx similarity index 100% rename from apps/website/src/components/icons.js rename to apps/website/src/components/icons.tsx diff --git a/apps/website/src/theme/Toggle/index.js b/apps/website/src/theme/Toggle/index.tsx similarity index 92% rename from apps/website/src/theme/Toggle/index.js rename to apps/website/src/theme/Toggle/index.tsx index 6a9310186..46bf92235 100644 --- a/apps/website/src/theme/Toggle/index.js +++ b/apps/website/src/theme/Toggle/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useColorMode } from '@docusaurus/theme-common'; -import useIsBrowser from '@docusaurus/useIsBrowser'; +import useIsBrowser from '@docusaurus/useIsBrowser'; import { GithubIcon, MoonIcon, SunIcon } from '../../components/icons'; import styles from './styles.module.css'; @@ -23,7 +23,7 @@ function ThemeToggle() { return (