react-lib-tools 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lib-tools",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "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/compile-examples.ts

@@ -5,7 +5,7 @@ import { syntaxHighlight } from "./utils/syntax-highlight.ts";
 import { trimExcludedText } from "./utils/examples/trimExcludedText.ts";
 
 export async function compileExamples({
-  fileExtensions = [".html", ".ts", ".tsx"],
+  fileExtensions = [".css", ".html", ".ts", ".tsx"],
   inputPath = ["src", "routes"],
   outputDirName = "examples"
 }: {
@@ -45,7 +45,9 @@ export async function compileExamples({
     }
 
     let html;
-    if (file.endsWith(".html")) {
+    if (file.endsWith(".css")) {
+      html = await syntaxHighlight(rawText, "CSS");
+    } else if (file.endsWith(".html")) {
       html = await syntaxHighlight(rawText, "HTML");
     } else if (file.endsWith(".js") || file.endsWith(".jsx")) {
       html = await syntaxHighlight(

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/scripts/utils/syntax-highlight.ts

@@ -1,3 +1,4 @@
+import { cssLanguage } from "@codemirror/lang-css";
 import { htmlLanguage } from "@codemirror/lang-html";
 import {
   jsxLanguage,
@@ -16,7 +17,7 @@ type Token = {
   value: string;
 };
 
-export type Language = "HTML" | "JS" | "JSX" | "TS" | "TSX";
+export type Language = "CSS" | "HTML" | "JS" | "JSX" | "TS" | "TSX";
 
 type State = {
   parsedTokens: Token[];
@@ -30,6 +31,11 @@ export async function syntaxHighlight(code: string, language: Language) {
   let extension: LRLanguage;
   let prettierParser: BuiltInParserName;
   switch (language) {
+    case "CSS": {
+      extension = cssLanguage.configure({ dialect: "selfClosing" });
+      prettierParser = "css";
+      break;
+    }
     case "HTML": {
       extension = htmlLanguage.configure({ dialect: "selfClosing" });
       prettierParser = "html";

package/styles.css

@@ -106,6 +106,7 @@ code {
 .tok-operator {
   color: var(--color-slate-400);
 }
+.tok-labelName,
 .tok-propertyName {
   color: var(--color-sky-300);
 }