feat: 🎸 Rendering improvements and fixes

Author: prc5

.yarn/releases/yarn-1.18.0.cjs

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.18.0.cjs"

.yarnrc

@@ -16,7 +16,16 @@ export const getJestConfig = (): Config.InitialOptions => ({
   coverageProvider: "v8",
   coverageReporters: [["lcov", { projectRoot: "../.." }], "clover", "json", "text"],
   collectCoverageFrom: ["./src/**/*.ts", "./src/**/*.tsx"],
-  coveragePathIgnorePatterns: [".spec", "__tests__", "test", "tests", "types", "constants", "index.ts", "__snapshots__"],
+  coveragePathIgnorePatterns: [
+    ".spec",
+    "__tests__",
+    "test",
+    "tests",
+    "types",
+    "constants",
+    "index.ts",
+    "__snapshots__",
+  ],
   moduleDirectories: ["node_modules", "src"],
   transform: {
     "^.+\\.(j|t)sx?$": [

jest.config.ts

@@ -4,7 +4,14 @@
 // learn more: https://github.com/testing-library/jest-dom
 import "@testing-library/jest-dom";
 import "jest-extended";
+import { TextDecoder, TextEncoder } from "util";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 global.IS_REACT_ACT_ENVIRONMENT = true;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+global.TextEncoder = TextEncoder;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+global.TextDecoder = TextDecoder;

packages/core/jest.setup.ts

@@ -5,7 +5,7 @@
   "description": "Docusaurus plugin for documentation generation based on your .ts files",
   "author": "Maciej Pyrc <[email protected]>",
   "homepage": "",
-  "license": "Apache 2.0",
+  "license": "Apache-2.0",
   "platform": "node",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -24,23 +24,21 @@
     "tests": "yarn lint-staged",
     "release": "yarn semantic-release --extends ./release.config.cjs  -t 'docsgen-v${version}'"
   },
-  "peerDependencies": {
-    "react": ">= 16.8.0",
-    "react-dom": ">= 16.8.0"
-  },
   "dependencies": {
     "@reins/query-params": "^0.1.1",
     "fs-extra": "^11.2.0",
+    "js-beautify": "^1.15.1",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-mdx": "^3.0.0",
     "mdx-mermaid": "^2.0.0",
     "mermaid": ">=8.11.0",
     "micromark-extension-mdxjs": "2.0.0",
     "node-html-markdown": "^1.3.0",
     "node-html-parser": "^6.1.12",
-    "pretty": "^2.0.0",
     "pretty-format": "^29.7.0",
     "prism-react-renderer": "^2.3.1",
+    "react": ">= 16.8.0",
+    "react-dom": ">= 16.8.0",
     "react-live": "^4.1.5",
     "react-simple-code-editor": "^0.13.1",
     "remark-admonitions": "^1.2.1",
@@ -54,6 +52,7 @@
     "@docusaurus/plugin-content-docs": ">= 2.0.0",
     "@docusaurus/types": ">= 2.0.0",
     "@types/fs-extra": "^11.0.4",
+    "@types/js-beautify": "^1.14.3",
     "@types/pretty": "^2.0.3",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",

packages/core/package.json

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { JSONOutput } from "typedoc";
+import { render } from "@testing-library/react";
+
+import { HF_TREE_REFLECTION } from "../../snapshots/hf-core-reflection";
+import { ClassPage } from "pages/class.page";
+
+describe("It should render correct type", () => {
+  it("should render correct page element", () => {
+    const RequestClass = HF_TREE_REFLECTION.children!.find(
+      (reflection) => reflection.name === "Request",
+    ) as JSONOutput.DeclarationReflection;
+
+    const { container } = render(
+      <ClassPage
+        reflection={RequestClass}
+        reflectionsTree={[HF_TREE_REFLECTION]}
+        packageName="@hyper-fetch/core"
+        packageOptions={{} as any}
+        npmName="@hyper-fetch/core"
+        pluginOptions={{} as any}
+      />,
+    );
+
+    // Methods
+    const setPayloadSection = container.querySelector(`[method-data="setPayloadMapper"]`);
+    const setPayloadPreview = setPayloadSection?.querySelector(`[method-data="setPayloadMapper"] .api-docs__preview`);
+    const setPayloadParams = setPayloadSection?.querySelector(".api-docs__parameters");
+
+    expect(setPayloadSection).toBeInTheDocument();
+    expect(setPayloadSection?.innerHTML).toInclude("setPayloadMapper()");
+    expect(setPayloadSection?.innerHTML).toInclude("Map data before it gets send to the server");
+
+    expect(setPayloadPreview).toBeInTheDocument();
+    expect(setPayloadPreview?.innerHTML).toInclude("setPayloadMapper");
+    expect(setPayloadPreview?.innerHTML).toInclude("MappedPayload");
+    expect(setPayloadPreview?.innerHTML).toInclude("payloadMapper");
+    expect(setPayloadParams).toBeInTheDocument();
+    expect(setPayloadParams?.innerHTML).toInclude("Parameters");
+    expect(setPayloadParams?.innerHTML).toInclude("payloadMapper");
+  });
+});

packages/core/src/pages/__tests__/class-page.spec.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { JSONOutput } from "typedoc";
+import { render } from "@testing-library/react";
+
+import { Parameters } from "../parameters";
+import { HF_TREE_REFLECTION } from "snapshots/hf-core-reflection";
+
+describe("It should render correct parameters", () => {
+  it("should render correct parameters", () => {
+    const requestReflection = HF_TREE_REFLECTION.children!.find(
+      (reflection) => reflection.name === "Request",
+    ) as JSONOutput.DeclarationReflection;
+
+    const { container } = render(
+      <Parameters
+        reflection={requestReflection}
+        reflectionsTree={[HF_TREE_REFLECTION]}
+        packageName="@hyper-fetch/core"
+        packageOptions={{} as any}
+        npmName="@hyper-fetch/core"
+        pluginOptions={{} as any}
+      />,
+    );
+
+    expect(container.innerHTML).toInclude("client");
+    expect(container.innerHTML).toInclude("requestOptions");
+    expect(container.innerHTML).toInclude("initialRequestConfiguration");
+  });
+});

packages/core/src/pages/components/__tests__/__snapshots__/type.spec.tsx.snap

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { JSONOutput } from "typedoc";
+import { render } from "@testing-library/react";
+
+import { Returns } from "../returns";
+import { HF_TREE_REFLECTION } from "snapshots/hf-core-reflection";
+
+describe("It should render correct returns", () => {
+  it("should render correct returns", () => {
+    const requestReflection = HF_TREE_REFLECTION.children!.find(
+      (reflection) => reflection.name === "Request",
+    ) as JSONOutput.DeclarationReflection;
+    const setPayloadMapperReflection = requestReflection.children!.find(
+      (reflection) => reflection.name === "setPayloadMapper",
+    ) as JSONOutput.SomeReflection;
+
+    const { container } = render(
+      <Returns
+        reflection={setPayloadMapperReflection}
+        reflectionsTree={[HF_TREE_REFLECTION]}
+        packageName="@hyper-fetch/core"
+        packageOptions={{} as any}
+        npmName="@hyper-fetch/core"
+        pluginOptions={{} as any}
+      />,
+    );
+
+    [
+      "Request",
+      "Response",
+      "Payload",
+      "QueryParams",
+      "LocalError",
+      "Endpoint",
+      "Client",
+      "HasPayload",
+      "HasParams",
+      "HasQuery",
+    ].forEach((name) => expect(container.innerHTML).toInclude(name));
+  });
+});

packages/core/src/pages/components/__tests__/parameters.spec.tsx

@@ -78,11 +78,10 @@ describe("It should render correct type", () => {
       />,
     );
 
-    expect(container).toMatchSnapshot();
-    // expect(container.innerHTML).toInclude("xs");
-    // expect(container.innerHTML).toInclude("sm");
-    // expect(container.innerHTML).toInclude("md");
-    // expect(container.innerHTML).toInclude("lg");
-    // expect(container.innerHTML).toInclude("xl");
+    expect(container.innerHTML).toInclude("xs");
+    expect(container.innerHTML).toInclude("sm");
+    expect(container.innerHTML).toInclude("md");
+    expect(container.innerHTML).toInclude("lg");
+    expect(container.innerHTML).toInclude("xl");
   });
 });