docs: add types check and hint in markdown (#508)

* docs: add types check in markdown

* fix: lint

* feat: use paths instead of nodenext moduleresolution

* fix: ts error in mdx

Author: luhc228

examples/plugin/tsconfig.json

@@ -1,9 +1,11 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "./",
-    "rootDir": "src",
-    "outDir": "lib"
+    "module": "ESNext",
+    "target": "ESNext",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "lib": ["ESNext"],
+    "skipLibCheck": true
   },
-  "include": ["src"]
+  "include": ["src"],
 }

examples/rax-component/docs/usage.md

@@ -4,14 +4,15 @@ sidebar_label: 用法
 
 本 Demo 演示一行文字的用法。
 
-```jsx preview
+```tsx preview
+import { createElement } from 'rax';
 import ExampleRaxComponent from 'example-rax-component';
 import styles from './usage.module.css';
 
 export default function App () {
   return (
     <div className={styles.usageContainer}>
-      <ExampleRaxComponent />
+      <ExampleRaxComponent title="XYZ" />
     </div>
   )
 }

examples/rax-component/tsconfig.json

@@ -5,14 +5,13 @@
     "jsx": "preserve",
     "jsxFactory": "createElement",
     "moduleResolution": "node",
-    "lib": ["ES2017", "DOM"],
-    "sourceMap": true,
-    "allowJs": true,
-    "noUnusedLocals": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
+    "lib": ["ES2017", "DOM", "DOM.Iterable"],
+    "strict": true,
     "skipLibCheck": true,
+    "paths": {
+      "example-rax-component": ["./src"],
+      "example-rax-component/*": ["./src/*"]
+    },
     "types": ["vitest/globals"]
   },
   "include": ["src", "tests"],

examples/react-component/docs/usage.md

@@ -4,12 +4,13 @@ sidebar_label: 用法
 
 本 Demo 演示一行文字的用法。
 
-```jsx preview
+```tsx preview
+import * as React from 'react';
 import Component from 'example-pkg-react-component';
 
 export default function App () {
   return (
     <Component />
   )
 }
-```
+```

examples/react-component/package.json

@@ -9,11 +9,16 @@
     "dist",
     "build"
   ],
-  "module": "esm/index.js",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "es2017": "./es2017/index.js"
+      "es2017": {
+        "types": "./es2017/index.d.ts",
+        "default": "./es2017/index.js"
+      },
+      "default": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
+      }
     },
     "./*": "./*"
   },

examples/react-component/tsconfig.json

@@ -1,22 +1,17 @@
 {
   "compilerOptions": {
-    "outDir": "build",
-    "module": "esnext",
-    "target": "esnext",
+    "module": "ESNext",
+    "target": "ESNext",
     "jsx": "react",
     "moduleResolution": "node",
-    "lib": ["es6", "dom"],
-    "sourceMap": true,
-    "allowJs": true,
-    "noUnusedLocals": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "strict": true,
     "skipLibCheck": true,
     "paths": {
       "@/*": ["./src/*"],
+      "example-pkg-react-component": ["./src"],
+      "example-pkg-react-component/*": ["./src/*"]
     }
   },
-  "include": ["src/*.ts", "src/*.tsx"],
-  "exclude": ["node_modules", "build", "public"]
+  "include": ["src"],
 }

examples/react-multi-components/docs/Avatar.md

@@ -2,8 +2,9 @@
 sidebar_label: Avatar
 ---
 
-```jsx preview
-import Avatar from 'pkg-react-multi-components-example/Avatar';
+```tsx preview
+import * as React from 'react';
+import Avatar from 'example-pkg-react-multi-components/Avatar';
 
 export default function App () {
   return (

examples/react-multi-components/docs/Button.md

@@ -2,8 +2,9 @@
 sidebar_label: Button
 ---
 
-```jsx preview
-import Button from 'pkg-react-multi-components-example/Button';
+```tsx preview
+import * as React from 'react';
+import Button from 'example-pkg-react-multi-components/Button';
 
 export default function App () {
   return (

examples/react-multi-components/package.json

@@ -9,17 +9,27 @@
     "dist",
     "build"
   ],
-  "module": "esm/Button/index.js",
   "exports": {
     "./Button": {
-      "import": "./esm/Button/index.js",
-      "es2017": "./es2017/Button/index.js"
+      "es2017": {
+        "types": "./es2017/Button/index.d.ts",
+        "default": "./es2017/Button/index.js"
+      },
+      "import": {
+        "types": "./esm/Button/index.d.ts",
+        "default": "./esm/Button/index.js"
+      }
     },
     "./Avatar": {
-      "import": "./esm/Avatar/index.js",
-      "es2017": "./es2017/Avatar/index.js"
-    },
-    "./*": "./*"
+      "es2017": {
+        "types": "./es2017/Avatar/index.d.ts",
+        "default": "./es2017/Avatar/index.js"
+      },
+      "import": {
+        "types": "./esm/Avatar/index.d.ts",
+        "default": "./esm/Avatar/index.js"
+      }
+    }
   },
   "sideEffects": [
     "dist/*",

examples/react-multi-components/tsconfig.json

@@ -1,24 +1,16 @@
 {
-  "compileOnSave": false,
-  "buildOnSave": false,
   "compilerOptions": {
-    "outDir": "build",
-    "module": "esnext",
-    "target": "esnext",
+    "module": "ESNext",
+    "target": "ESNext",
     "jsx": "react",
-    "moduleResolution": "node",
-    "lib": ["es6", "dom"],
-    "sourceMap": true,
-    "allowJs": true,
-    "noUnusedLocals": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
+    "moduleResolution": "nodenext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "strict": true,
     "skipLibCheck": true,
     "paths": {
-      "@/*": ["./src/*"],
+      "example-pkg-react-multi-components": ["./src"],
+      "example-pkg-react-multi-components/*": ["./src/*"]
     }
   },
-  "include": ["src/*.ts", "src/*.tsx"],
-  "exclude": ["node_modules", "build", "public"]
+  "include": ["src"],
 }