react-lib-tools 0.0.1

package/scripts/utils/getFilesWithExtensions.ts

@@ -0,0 +1,31 @@
+import { readdir } from "node:fs/promises";
+import { extname, join } from "node:path";
+
+export async function getFilesWithExtensions(
+  directory: string,
+  extensions: string[],
+  filter?: ((path: string) => boolean) | undefined
+) {
+  const files: string[] = [];
+
+  const entries = await readdir(directory, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = join(directory, entry.name);
+
+    if (entry.isDirectory()) {
+      files.push(
+        ...(await getFilesWithExtensions(fullPath, extensions, filter))
+      );
+    } else if (entry.isFile()) {
+      const fileExtension = extname(entry.name);
+      if (extensions.includes(fileExtension)) {
+        if (typeof filter !== "function" || filter(fullPath)) {
+          files.push(fullPath);
+        }
+      }
+    }
+  }
+
+  return files;
+}

package/scripts/utils/initialize.ts

@@ -0,0 +1,34 @@
+import { mkdir } from "node:fs/promises";
+import { join } from "node:path";
+import { cwd } from "node:process";
+import { getFilesWithExtensions } from "./getFilesWithExtensions.ts";
+import { rmFilesWithExtensions } from "./rmFilesWithExtensions.ts";
+
+export async function initialize({
+  fileExtensions,
+  fileFilter,
+  inputPath,
+  outputDirName
+}: {
+  fileExtensions: string[];
+  fileFilter?: ((path: string) => boolean) | undefined;
+  inputPath: string[];
+  outputDirName: string;
+}) {
+  const inputDir = join(cwd(), ...inputPath);
+  const outputDir = join(cwd(), "public", "generated", outputDirName);
+  await mkdir(outputDir, { recursive: true });
+  await rmFilesWithExtensions(outputDir, [".json"]);
+
+  const files = await getFilesWithExtensions(
+    inputDir,
+    fileExtensions,
+    fileFilter
+  );
+
+  return {
+    files,
+    inputDir,
+    outputDir
+  };
+}

package/scripts/utils/rmFilesWithExtensions.ts

@@ -0,0 +1,13 @@
+import { rm } from "node:fs/promises";
+import { getFilesWithExtensions } from "./getFilesWithExtensions.ts";
+
+export async function rmFilesWithExtensions(
+  directory: string,
+  extensions: string[]
+) {
+  const files = await getFilesWithExtensions(directory, extensions);
+
+  for (const file of files) {
+    await rm(file);
+  }
+}

package/scripts/utils/syntax-highlight.ts

@@ -0,0 +1,255 @@
+import { htmlLanguage } from "@codemirror/lang-html";
+import {
+  jsxLanguage,
+  tsxLanguage,
+  typescriptLanguage
+} from "@codemirror/lang-javascript";
+import { ensureSyntaxTree, LRLanguage } from "@codemirror/language";
+import { EditorState } from "@codemirror/state";
+import { classHighlighter, highlightTree } from "@lezer/highlight";
+import { type BuiltInParserName } from "prettier";
+
+type TokenType = string;
+type Token = {
+  columnIndex: number;
+  type: TokenType | null;
+  value: string;
+};
+
+export type Language = "HTML" | "JS" | "JSX" | "TS" | "TSX";
+
+type State = {
+  parsedTokens: Token[];
+  rawString: string;
+};
+
+export const DEFAULT_MAX_CHARACTERS = 500000;
+export const DEFAULT_MAX_TIME = 5000;
+
+export async function syntaxHighlight(code: string, language: Language) {
+  let extension: LRLanguage;
+  let prettierParser: BuiltInParserName;
+  switch (language) {
+    case "HTML": {
+      extension = htmlLanguage.configure({ dialect: "selfClosing" });
+      prettierParser = "html";
+      break;
+    }
+    case "JS":
+    case "JSX": {
+      extension = jsxLanguage;
+      prettierParser = "babel";
+      break;
+    }
+    case "TS": {
+      extension = typescriptLanguage;
+      prettierParser = "typescript";
+      break;
+    }
+    case "TSX": {
+      extension = tsxLanguage;
+      prettierParser = "typescript";
+      break;
+    }
+  }
+  if (!extension) {
+    console.error("Unsupported language %o", language);
+  }
+
+  const tokens = await parser(code, extension, prettierParser);
+
+  return tokens.map(parsedTokensToHtml).join("\n");
+}
+
+async function parser(
+  code: string,
+  languageExtension: LRLanguage,
+
+  // @ts-expect-error TS6133
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  prettierParser: BuiltInParserName
+) {
+  const parsedTokens: Token[][] = [];
+  const currentLineState: State = {
+    parsedTokens: [],
+    rawString: ""
+  };
+
+  // The logic below to trim code sections only works with "\n"
+  code = code.replace(/\r\n?|\n|\u2028|\u2029/g, "\n");
+  if (code.length > DEFAULT_MAX_CHARACTERS) {
+    let index = DEFAULT_MAX_CHARACTERS - 1;
+    while (index > 0 && code.charAt(index) !== "\n") {
+      index--;
+    }
+    if (index === 0) {
+      while (index < code.length && code.charAt(index) !== "\n") {
+        index++;
+      }
+    }
+    code = code.slice(0, index + 1);
+  }
+
+  // In the future I may want to (re)format code examples for different screen widths
+  // code = await format(code, {
+  //   parser: prettierParser,
+  //   plugins: ["prettier-plugin-tailwindcss"],
+  //   printWidth: 100,
+  //   proseWrap: "always",
+  //   semi: true
+  // });
+
+  const state = EditorState.create({
+    doc: code,
+    extensions: [languageExtension]
+  });
+
+  const tree = ensureSyntaxTree(
+    state,
+    DEFAULT_MAX_CHARACTERS,
+    DEFAULT_MAX_TIME
+  );
+
+  if (tree === null) {
+    return [];
+  }
+
+  let characterIndex = 0;
+  let parsedCharacterIndex = 0;
+  highlightTree(
+    tree,
+    classHighlighter,
+    (from: number, to: number, className: string) => {
+      if (from > characterIndex) {
+        // No style applied to the token between position and from.
+        // This typically indicates white space or newline characters.
+        processSection(
+          currentLineState,
+          parsedTokens,
+          code.slice(characterIndex, from),
+          ""
+        );
+      }
+      processSection(
+        currentLineState,
+        parsedTokens,
+        code.slice(from, to),
+        className
+      );
+      characterIndex = to;
+    }
+  );
+
+  const maxPosition = code.length;
+
+  if (characterIndex < maxPosition) {
+    // No style applied on the trailing text.
+    // This typically indicates white space or newline characters.
+    processSection(
+      currentLineState,
+      parsedTokens,
+      code.slice(characterIndex, maxPosition),
+      ""
+    );
+  }
+  if (currentLineState.parsedTokens.length) {
+    parsedTokens.push(currentLineState.parsedTokens);
+  }
+
+  parsedCharacterIndex += characterIndex + 1;
+
+  // Anything that's left should de-opt to plain text.
+  if (parsedCharacterIndex < code.length) {
+    let nextIndex = code.indexOf("\n", parsedCharacterIndex);
+    let parsedLineTokens = [];
+    while (true) {
+      const line =
+        nextIndex >= 0
+          ? code.substring(parsedCharacterIndex, nextIndex)
+          : code.substring(parsedCharacterIndex);
+      parsedLineTokens.push({
+        columnIndex: 0,
+        type: null,
+        value: line
+      });
+      if (nextIndex >= 0) {
+        parsedTokens.push(parsedLineTokens);
+        parsedLineTokens = [];
+      } else if (nextIndex === -1) {
+        break;
+      }
+      parsedCharacterIndex = nextIndex + 1;
+      nextIndex = code.indexOf("\n", parsedCharacterIndex);
+    }
+    if (parsedLineTokens.length) {
+      parsedTokens.push(parsedLineTokens);
+    }
+  }
+
+  return parsedTokens;
+}
+
+function processSection(
+  currentLineState: State,
+  parsedTokens: Token[][],
+  section: string,
+  className: string
+) {
+  // Remove "tok-" prefix;
+  const tokenType =
+    className === null || className === void 0
+      ? null
+      : className.substring(4) || null;
+
+  let index = 0;
+  let nextIndex = section.indexOf("\n");
+  while (true) {
+    const substring =
+      nextIndex >= 0
+        ? section.substring(index, nextIndex)
+        : section.substring(index);
+    const token: Token = {
+      columnIndex: currentLineState.rawString.length,
+      type: tokenType,
+      value: substring
+    };
+    currentLineState.parsedTokens.push(token);
+    currentLineState.rawString += substring;
+    if (nextIndex === -1) {
+      break;
+    }
+    if (nextIndex >= 0) {
+      parsedTokens.push(currentLineState.parsedTokens);
+      currentLineState.parsedTokens = [];
+      currentLineState.rawString = "";
+    }
+    index = nextIndex + 1;
+    nextIndex = section.indexOf("\n", index);
+  }
+}
+
+function parsedTokensToHtml(tokens: Token[]) {
+  const htmlStrings = tokens.map((token) => {
+    const className = token.type ? `tok-${token.type}` : "";
+    const escapedValue = escapeHtmlEntities(token.value);
+
+    return `<span class="${className}">${escapedValue}</span>`;
+  });
+
+  // Edge case to avoid empty line
+  let htmlString = htmlStrings.join("");
+  if (tokens.length <= 1) {
+    if (!tokens[0].value) {
+      htmlString = "&nbsp;";
+    }
+  }
+
+  return `<div>${htmlString}</div>`;
+}
+
+function escapeHtmlEntities(rawString: string) {
+  return rawString.replace(
+    /[\u00A0-\u9999<>&]/g,
+    (substring) => "&#" + substring.charCodeAt(0) + ";"
+  );
+}

package/styles.css

@@ -0,0 +1,127 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  font-size: 12px;
+
+  @media only screen and (max-width: 600px) {
+    font-size: 16px;
+  }
+
+  color-scheme: dark;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@keyframes background-gradient-animation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+#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)
+  );
+  background-size: 400% 400%;
+  animation: background-gradient-animation 20s ease infinite;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-slate-600) transparent;
+  outline: none;
+  transition:
+    color 0.25s ease,
+    background-color 0.25s ease,
+    border-color 0.25s ease,
+    opacity 0.25s ease,
+    outline-color 0.25s ease;
+}
+
+main {
+  [data-link],
+  a {
+    cursor: pointer;
+    color: var(--template-focus-color-400);
+    &:hover {
+      color: var(--template-focus-color-300);
+    }
+  }
+}
+
+*[data-focus] {
+  border: 2px solid transparent;
+  &:focus {
+    border: 2px solid var(--template-focus-color-300);
+  }
+}
+
+*[data-focus-within] {
+  border: 2px solid transparent;
+  &:focus-within {
+    border: 2px solid var(--template-focus-color-300);
+  }
+
+  &[data-focus-within="bold"] {
+    border-color: var(--template-focus-color-600);
+    &:focus-within {
+      border: 2px solid var(--template-focus-color-300);
+    }
+  }
+}
+
+code {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.tok-comment {
+  color: var(--color-slate-500);
+}
+.tok-definition {
+}
+.tok-local {
+}
+.tok-keyword {
+  color: var(--color-pink-400);
+}
+.tok-meta {
+}
+.tok-number {
+}
+.tok-operator {
+  color: var(--color-slate-400);
+}
+.tok-propertyName {
+  color: var(--color-sky-300);
+}
+.tok-punctuation {
+  color: var(--color-slate-400);
+}
+.tok-string {
+  color: var(--color-teal-300);
+}
+.tok-string2 {
+  color: var(--color-sky-300);
+}
+.tok-typeName {
+  color: var(--color-pink-400);
+}
+.tok-variableName:not(.tok-definition) {
+}
+.tok-variableName2 {
+}