feat: apis,dom-apis,components (#3)

.gitignore

@@ -3,4 +3,5 @@ dist
 node_modules
 .vscode-test/
 *.vsix
-examples/**/*
+examples/**/*
+.DS_Store

package.json

@@ -12,7 +12,7 @@
     "React dev docs in VS Code",
     "React"
   ],
-  "version": "0.0.3",
+  "version": "0.1.0",
   "engines": {
     "vscode": "^1.77.0"
   },
@@ -63,6 +63,7 @@
     "jsdom": "^22.0.0",
     "mocha": "^10.2.0",
     "node-fetch": "^2.6.7",
+    "prettier": "^2.8.8",
     "typescript": "^4.9.5",
     "vsce": "^2.15.0"
   }

src/providers/hover.ts

@@ -20,13 +20,11 @@ export class HoverProvider implements vscode.HoverProvider {
       if (resource) {
         const { example, usage, description, name, link } = resource;
         const mdString = new vscode.MarkdownString(
-          `**React Dev Docs** - \`hooks/${name}\`\n\n`
+          `**React Dev Docs** - \`${resource.type}/${name}\`\n\n`
         );
         mdString.isTrusted = true;
         mdString.supportHtml = true;
-        mdString.appendMarkdown(
-          `**${name}**\n\n${description}\n\n**Example**\n`
-        );
+        mdString.appendMarkdown(`\`${description}\`\n\n`);
 
         mdString.appendCodeblock(example.code, "typescript");
 

src/resources/apis/createContext.ts

@@ -0,0 +1,24 @@
+import { IResource } from "../types";
+export interface IcreateContext extends IResource {
+  name: "createContext";
+}
+
+export const createContext: IcreateContext = {
+  name: "createContext",
+  description:
+    "createContext lets you create a context that components can provide or read.",
+  example: {
+    code: "const SomeContext = createContext(defaultValue)",
+  },
+  usage: [
+    {
+      title: "Creating context ",
+      href: "https://react.dev/reference/react/createContext#creating-context",
+    },
+    {
+      title: "Importing and exporting context from a file ",
+      href: "https://react.dev/reference/react/createContext#importing-and-exporting-context-from-a-file",
+    },
+  ],
+  link: "https://react.dev/reference/react/createContext",
+};

src/resources/apis/forwardRef.ts

@@ -0,0 +1,28 @@
+import { IResource } from "../types";
+export interface IforwardRef extends IResource {
+  name: "forwardRef";
+}
+
+export const forwardRef: IforwardRef = {
+  name: "forwardRef",
+  description:
+    "forwardRef lets your component expose a DOM node to parent component with a ref.",
+  example: {
+    code: "const SomeComponent = forwardRef(render)",
+  },
+  usage: [
+    {
+      title: "Exposing a DOM node to the parent component ",
+      href: "https://react.dev/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component",
+    },
+    {
+      title: "Forwarding a ref through multiple components ",
+      href: "https://react.dev/reference/react/forwardRef#forwarding-a-ref-through-multiple-components",
+    },
+    {
+      title: "Exposing an imperative handle instead of a DOM node ",
+      href: "https://react.dev/reference/react/forwardRef#exposing-an-imperative-handle-instead-of-a-dom-node",
+    },
+  ],
+  link: "https://react.dev/reference/react/forwardRef",
+};

src/resources/apis/index.ts

@@ -0,0 +1,7 @@
+import { createContext } from "./createContext";
+import { forwardRef } from "./forwardRef";
+import { lazy } from "./lazy";
+import { memo } from "./memo";
+import { startTransition } from "./startTransition";
+
+export default [createContext, lazy, forwardRef, memo, startTransition];

src/resources/apis/lazy.ts

@@ -0,0 +1,20 @@
+import { IResource } from "../types";
+export interface Ilazy extends IResource {
+  name: "lazy";
+}
+
+export const lazy: Ilazy = {
+  name: "lazy",
+  description:
+    "lazy lets you defer loading component’s code until it is rendered for the first time.",
+  example: {
+    code: "const SomeComponent = lazy(load)",
+  },
+  usage: [
+    {
+      title: "Lazy-loading components with Suspense ",
+      href: "https://react.dev/reference/react/lazy#suspense-for-code-splitting",
+    },
+  ],
+  link: "https://react.dev/reference/react/lazy",
+};

src/resources/apis/memo.ts

@@ -0,0 +1,36 @@
+import { IResource } from "../types";
+export interface Imemo extends IResource {
+  name: "memo";
+}
+
+export const memo: Imemo = {
+  name: "memo",
+  description:
+    "memo lets you skip re-rendering a component when its props are unchanged.",
+  example: {
+    code: "const MemoizedComponent = memo(SomeComponent, arePropsEqual?)",
+  },
+  usage: [
+    {
+      title: "Skipping re-rendering when props are unchanged ",
+      href: "https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged",
+    },
+    {
+      title: "Updating a memoized component using state ",
+      href: "https://react.dev/reference/react/memo#updating-a-memoized-component-using-state",
+    },
+    {
+      title: "Updating a memoized component using a context ",
+      href: "https://react.dev/reference/react/memo#updating-a-memoized-component-using-a-context",
+    },
+    {
+      title: "Minimizing props changes ",
+      href: "https://react.dev/reference/react/memo#minimizing-props-changes",
+    },
+    {
+      title: "Specifying a custom comparison function ",
+      href: "https://react.dev/reference/react/memo#specifying-a-custom-comparison-function",
+    },
+  ],
+  link: "https://react.dev/reference/react/memo",
+};

src/resources/apis/startTransition.ts

@@ -0,0 +1,20 @@
+import { IResource } from "../types";
+export interface IstartTransition extends IResource {
+  name: "startTransition";
+}
+
+export const startTransition: IstartTransition = {
+  name: "startTransition",
+  description:
+    "startTransition lets you update the state without blocking the UI.",
+  example: {
+    code: "startTransition(scope)",
+  },
+  usage: [
+    {
+      title: "Marking a state update as a non-blocking transition ",
+      href: "https://react.dev/reference/react/startTransition#marking-a-state-update-as-a-non-blocking-transition",
+    },
+  ],
+  link: "https://react.dev/reference/react/startTransition",
+};

src/resources/components/Fragment.ts

@@ -0,0 +1,32 @@
+import { IResource } from "../types";
+export interface IFragment extends IResource {
+  name: "Fragment";
+}
+
+export const Fragment: IFragment = {
+  name: "Fragment",
+  description:
+    "<Fragment>, often used via <>...</> syntax, lets you group elements without a wrapper node.",
+  example: {
+    code: "<>  <OneChild />  <AnotherChild /></>",
+  },
+  usage: [
+    {
+      title: "Returning multiple elements ",
+      href: "https://react.dev/reference/react/Fragment#returning-multiple-elements",
+    },
+    {
+      title: "Assigning multiple elements to a variable ",
+      href: "https://react.dev/reference/react/Fragment#assigning-multiple-elements-to-a-variable",
+    },
+    {
+      title: "Grouping elements with text ",
+      href: "https://react.dev/reference/react/Fragment#grouping-elements-with-text",
+    },
+    {
+      title: "Rendering a list of Fragments ",
+      href: "https://react.dev/reference/react/Fragment#rendering-a-list-of-fragments",
+    },
+  ],
+  link: "https://react.dev/reference/react/Fragment",
+};

src/resources/components/Profiler.ts

@@ -0,0 +1,24 @@
+import { IResource } from "../types";
+export interface IProfiler extends IResource {
+  name: "Profiler";
+}
+
+export const Profiler: IProfiler = {
+  name: "Profiler",
+  description:
+    "<Profiler> lets you measure rendering performance of a React tree programmatically.",
+  example: {
+    code: "<Profiler id='App' onRender={onRender}>  <App /></Profiler>",
+  },
+  usage: [
+    {
+      title: "Measuring rendering performance programmatically ",
+      href: "https://react.dev/reference/react/Profiler#measuring-rendering-performance-programmatically",
+    },
+    {
+      title: "Measuring different parts of the application ",
+      href: "https://react.dev/reference/react/Profiler#measuring-different-parts-of-the-application",
+    },
+  ],
+  link: "https://react.dev/reference/react/Profiler",
+};

src/resources/components/StrictMode.ts

@@ -0,0 +1,36 @@
+import { IResource } from "../types";
+export interface IStrictMode extends IResource {
+  name: "StrictMode";
+}
+
+export const StrictMode: IStrictMode = {
+  name: "StrictMode",
+  description:
+    "<StrictMode> lets you find common bugs in your components early during development.",
+  example: {
+    code: "<StrictMode>  <App /></StrictMode>",
+  },
+  usage: [
+    {
+      title: "Enabling Strict Mode for entire app ",
+      href: "https://react.dev/reference/react/StrictMode#enabling-strict-mode-for-entire-app",
+    },
+    {
+      title: "Enabling strict mode for a part of the app ",
+      href: "https://react.dev/reference/react/StrictMode#enabling-strict-mode-for-a-part-of-the-app",
+    },
+    {
+      title: "Fixing bugs found by double rendering in development ",
+      href: "https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-double-rendering-in-development",
+    },
+    {
+      title: "Fixing bugs found by re-running Effects in development ",
+      href: "https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development",
+    },
+    {
+      title: "Fixing deprecation warnings enabled by Strict Mode ",
+      href: "https://react.dev/reference/react/StrictMode#fixing-deprecation-warnings-enabled-by-strict-mode",
+    },
+  ],
+  link: "https://react.dev/reference/react/StrictMode",
+};

src/resources/components/Suspense.ts

@@ -0,0 +1,48 @@
+import { IResource } from "../types";
+export interface ISuspense extends IResource {
+  name: "Suspense";
+}
+
+export const Suspense: ISuspense = {
+  name: "Suspense",
+  description:
+    "<Suspense> lets you display a fallback until its children have finished loading.",
+  example: {
+    code: "<Suspense fallback={<Loading />}>  <SomeComponent /></Suspense>",
+  },
+  usage: [
+    {
+      title: "Displaying a fallback while content is loading ",
+      href: "https://react.dev/reference/react/Suspense#displaying-a-fallback-while-content-is-loading",
+    },
+    {
+      title: "Revealing content together at once ",
+      href: "https://react.dev/reference/react/Suspense#revealing-content-together-at-once",
+    },
+    {
+      title: "Revealing nested content as it loads ",
+      href: "https://react.dev/reference/react/Suspense#revealing-nested-content-as-it-loads",
+    },
+    {
+      title: "Showing stale content while fresh content is loading ",
+      href: "https://react.dev/reference/react/Suspense#showing-stale-content-while-fresh-content-is-loading",
+    },
+    {
+      title: "Preventing already revealed content from hiding ",
+      href: "https://react.dev/reference/react/Suspense#preventing-already-revealed-content-from-hiding",
+    },
+    {
+      title: "Indicating that a transition is happening ",
+      href: "https://react.dev/reference/react/Suspense#indicating-that-a-transition-is-happening",
+    },
+    {
+      title: "Resetting Suspense boundaries on navigation ",
+      href: "https://react.dev/reference/react/Suspense#resetting-suspense-boundaries-on-navigation",
+    },
+    {
+      title: "Providing a fallback for server errors and server-only content ",
+      href: "https://react.dev/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content",
+    },
+  ],
+  link: "https://react.dev/reference/react/Suspense",
+};

src/resources/components/index.ts

@@ -0,0 +1,6 @@
+import { Fragment } from "./Fragment";
+import { Profiler } from "./Profiler";
+import { StrictMode } from "./StrictMode";
+import { Suspense } from "./Suspense";
+
+export default [Fragment, Profiler, Suspense, StrictMode];

src/resources/dom-apis/createPortal.ts

@@ -0,0 +1,32 @@
+import { IResource } from "../types";
+export interface IcreatePortal extends IResource {
+  name: "createPortal";
+}
+
+export const createPortal: IcreatePortal = {
+  name: "createPortal",
+  description:
+    "createPortal lets you render some children into a different part of the DOM.",
+  example: {
+    code: "<div>  <SomeComponent />  {createPortal(children, domNode, key?)}</div>",
+  },
+  usage: [
+    {
+      title: "Rendering to a different part of the DOM ",
+      href: "https://react.dev/reference/react-dom/createPortal#rendering-to-a-different-part-of-the-dom",
+    },
+    {
+      title: "Rendering a modal dialog with a portal ",
+      href: "https://react.dev/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal",
+    },
+    {
+      title: "Rendering React components into non-React server markup ",
+      href: "https://react.dev/reference/react-dom/createPortal#rendering-react-components-into-non-react-server-markup",
+    },
+    {
+      title: "Rendering React components into non-React DOM nodes ",
+      href: "https://react.dev/reference/react-dom/createPortal#rendering-react-components-into-non-react-dom-nodes",
+    },
+  ],
+  link: "https://react.dev/reference/react-dom/createPortal",
+};