react-lib-tools 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lib-tools",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [

package/scripts/compile-docs.ts

@@ -1,3 +1,4 @@
+import type { AnalyserOptions } from "@ts-ast-parser/core";
 import { compileComponents } from "./utils/docs/compileComponents.ts";
 import { compileImperativeHandles } from "./utils/docs/compileImperativeHandles.ts";
 import type { CompilerOptions } from "typescript";
@@ -10,19 +11,25 @@ import {
 } from "typescript";
 
 export async function compileDocs({
-  compilerOptions: compilerOptionsParam,
-  componentNames,
-  imperativeHandleNames,
+  analyserOptions: analyserOptionsParam,
+  componentNames = [],
+  imperativeHandleNames = [],
   outputDirName = "docs"
 }: {
-  compilerOptions?: Partial<CompilerOptions>;
-  componentNames: string[];
-  imperativeHandleNames: string[];
+  analyserOptions?: Partial<AnalyserOptions>;
+  componentNames?: string[] | undefined;
+  imperativeHandleNames?: string[] | undefined;
   outputDirName?: string | undefined;
 }) {
-  const compilerOptions = {
+  const compilerOptions: Partial<CompilerOptions> = {
     ...defaultCompilerOptions,
-    ...compilerOptionsParam
+    ...(analyserOptionsParam?.compilerOptions as CompilerOptions)
+  };
+
+  const analyserOptions: Partial<AnalyserOptions> = {
+    ...analyserOptionsParam,
+    compilerOptions,
+    include: ["lib"]
   };
 
   await compileComponents({
@@ -32,7 +39,7 @@ export async function compileDocs({
   });
 
   await compileImperativeHandles({
-    compilerOptions,
+    analyserOptions,
     names: imperativeHandleNames,
     outputDirName
   });

package/scripts/utils/docs/compileComponents.ts

@@ -26,7 +26,9 @@ export async function compileComponents({
   const { files, outputDir } = await initialize({
     fileExtensions: [".ts", ".tsx"],
     fileFilter: (file) =>
-      componentNames.some((componentName) => file.endsWith(componentName)),
+      componentNames.some((componentName) =>
+        file.includes(`${componentName}.ts`)
+      ),
     inputPath: ["lib", "components"],
     outputDirName
   });

package/scripts/utils/docs/compileImperativeHandles.ts

@@ -1,21 +1,24 @@
-import { parseFromProject, type InterfaceNode } from "@ts-ast-parser/core";
+import {
+  parseFromProject,
+  type AnalyserOptions,
+  type InterfaceNode
+} from "@ts-ast-parser/core";
 import { join } from "node:path";
 import { cwd } from "node:process";
-import type { CompilerOptions } from "typescript";
 import { compileImperativeHandle } from "./compileImperativeHandle.ts";
 
 export async function compileImperativeHandles({
-  compilerOptions,
+  analyserOptions,
   names,
   outputDirName
 }: {
-  compilerOptions: Partial<CompilerOptions>;
+  analyserOptions: Partial<AnalyserOptions>;
   names: string[];
   outputDirName: string;
 }) {
   const outputDir = join(cwd(), "public", "generated", outputDirName);
 
-  const result = await parseFromProject({ compilerOptions });
+  const result = await parseFromProject(analyserOptions);
   const reflectedModules = result.project?.getModules() ?? [];
 
   const nodes: {

package/styles.css

@@ -27,15 +27,28 @@
   }
 }
 
+@theme {
+  --color-background-gradient-1: var(--color-fuchsia-500);
+  --color-background-gradient-2: var(--color-violet-500);
+  --color-background-gradient-3: var(--color-fuchsia-700);
+
+  --color-focus-1: var(--color-sky-300);
+  --color-focus-2: var(--color-sky-400);
+  --color-focus-3: var(--color-sky-600);
+
+  --color-nav-active: var(--color-fuchsia-400);
+  --color-nav-hover: var(--color-fuchsia-200);
+}
+
 #root {
   width: 100dvw;
   height: 100dvh;
   overflow: auto;
   background: linear-gradient(
     -45deg,
-    var(--template-gradient-color-1),
-    var(--template-gradient-color-2),
-    var(--template-gradient-color-3)
+    var(--color-background-gradient-1),
+    var(--color-background-gradient-2),
+    var(--color-background-gradient-3)
   );
   background-size: 400% 400%;
   animation: background-gradient-animation 20s ease infinite;
@@ -57,9 +70,9 @@ main {
   [data-link],
   a {
     cursor: pointer;
-    color: var(--template-focus-color-400);
+    color: var(--color-focus-2);
     &:hover {
-      color: var(--template-focus-color-300);
+      color: var(--color-focus-1);
     }
   }
 }
@@ -67,20 +80,20 @@ main {
 *[data-focus] {
   border: 2px solid transparent;
   &:focus {
-    border: 2px solid var(--template-focus-color-300);
+    border: 2px solid var(--color-focus-1);
   }
 }
 
 *[data-focus-within] {
   border: 2px solid transparent;
   &:focus-within {
-    border: 2px solid var(--template-focus-color-300);
+    border: 2px solid var(--color-focus-1);
   }
 
   &[data-focus-within="bold"] {
-    border-color: var(--template-focus-color-600);
+    border-color: var(--color-focus-3);
     &:focus-within {
-      border: 2px solid var(--template-focus-color-300);
+      border: 2px solid var(--color-focus-1);
     }
   }
 }
@@ -106,6 +119,7 @@ code {
 .tok-operator {
   color: var(--color-slate-400);
 }
+.tok-labelName,
 .tok-propertyName {
   color: var(--color-sky-300);
 }