@hackersheet/next-document-content-components 0.1.0-alpha.10 → 0.1.0-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/cjs/components/code-block/directory-tree.js +11 -2
  2. package/dist/esm/components/code-block/directory-tree.mjs +11 -2
  3. package/package.json +3 -3
package/dist/cjs/components/code-block/directory-tree.js CHANGED
@@ -31,6 +31,7 @@ __export(directory_tree_exports, {
31
31
  default: () => DirectoryTree
32
32
  });
33
33
  module.exports = __toCommonJS(directory_tree_exports);
34
+ var import_crypto = require("crypto");
34
35
  var import_react = __toESM(require("react"));
35
36
  var import_lu = require("react-icons/lu");
36
37
  var import_code_block_copy_button = __toESM(require("./code-block-copy-button"));
@@ -38,13 +39,20 @@ async function DirectoryTree({ code, ...props }) {
38
39
  const [, filename] = props.language.split(":");
39
40
  const treeNode = parseTreeOutput(code);
40
41
  const renderTree = (node) => {
41
- return /* @__PURE__ */ import_react.default.createElement("li", { className: `${node.type === "directory" ? "directory-tree-directory" : "directory-tree-file"}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "directory-tree-node-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "directory-tree-icon" }, node.type === "directory" && /* @__PURE__ */ import_react.default.createElement(import_lu.LuFolder, null), node.type === "file" && /* @__PURE__ */ import_react.default.createElement(import_lu.LuFile, null)), /* @__PURE__ */ import_react.default.createElement("div", null, node.name)), node.children && /* @__PURE__ */ import_react.default.createElement("ul", null, node.children.map((child) => renderTree(child))));
42
+ return /* @__PURE__ */ import_react.default.createElement("li", { key: node.id, className: `${node.type === "directory" ? "directory-tree-directory" : "directory-tree-file"}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "directory-tree-node-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "directory-tree-icon" }, node.type === "directory" && /* @__PURE__ */ import_react.default.createElement(import_lu.LuFolder, null), node.type === "file" && /* @__PURE__ */ import_react.default.createElement(import_lu.LuFile, null)), /* @__PURE__ */ import_react.default.createElement("div", null, node.name)), node.children && /* @__PURE__ */ import_react.default.createElement("ul", null, node.children.map((child) => renderTree(child))));
42
43
  };
43
44
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "code-block" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "code-block-header" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_lu.LuFolderTree, null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "code-block-filename" }, filename), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_code_block_copy_button.default, { code }))), /* @__PURE__ */ import_react.default.createElement("div", null, treeNode ? /* @__PURE__ */ import_react.default.createElement("ul", { className: "directory-tree" }, renderTree(treeNode)) : /* @__PURE__ */ import_react.default.createElement("pre", null, code)));
44
45
  }
46
+ function encryptSha256(str) {
47
+ const hash = (0, import_crypto.createHash)("sha256");
48
+ hash.update(str);
49
+ return hash.digest("hex");
50
+ }
45
51
  function parseTreeOutput(treeOutput) {
46
52
  const lines = treeOutput.trim().split("\n");
53
+ const idPrefix = "tree-" + encryptSha256(treeOutput.trim()) + "-";
47
54
  const rootNode = {
55
+ id: idPrefix + "root",
48
56
  name: "",
49
57
  type: "directory",
50
58
  level: 0,
@@ -55,7 +63,7 @@ function parseTreeOutput(treeOutput) {
55
63
  const getExtension = (filename) => filename.match(/\.(\w+)$/)?.[1];
56
64
  const cleanNodeName = (name) => name.replace(/^[\s│├└─]+/, "").trim();
57
65
  try {
58
- lines.forEach((line) => {
66
+ lines.forEach((line, index) => {
59
67
  const trimmedLine = line.trimStart();
60
68
  const indent = (trimmedLine.match(/^[\s│├└─]+/) || [""])[0];
61
69
  const level = indent.length / 4;
@@ -67,6 +75,7 @@ function parseTreeOutput(treeOutput) {
67
75
  }
68
76
  const isDirectory = !cleanedLine.includes(".");
69
77
  const newNode = {
78
+ id: idPrefix + "node-" + index,
70
79
  name: cleanedLine,
71
80
  type: isDirectory ? "directory" : "file",
72
81
  extension: isDirectory ? void 0 : getExtension(cleanedLine),
package/dist/esm/components/code-block/directory-tree.mjs CHANGED
@@ -1,3 +1,4 @@
1
+ import { createHash } from "crypto";
1
2
  import React from "react";
2
3
  import { LuFolder, LuFile, LuFolderTree } from "react-icons/lu";
3
4
  import CodeBlockCopyButton from "./code-block-copy-button";
@@ -5,13 +6,20 @@ async function DirectoryTree({ code, ...props }) {
5
6
  const [, filename] = props.language.split(":");
6
7
  const treeNode = parseTreeOutput(code);
7
8
  const renderTree = (node) => {
8
- return /* @__PURE__ */ React.createElement("li", { className: `${node.type === "directory" ? "directory-tree-directory" : "directory-tree-file"}` }, /* @__PURE__ */ React.createElement("div", { className: "directory-tree-node-content" }, /* @__PURE__ */ React.createElement("div", { className: "directory-tree-icon" }, node.type === "directory" && /* @__PURE__ */ React.createElement(LuFolder, null), node.type === "file" && /* @__PURE__ */ React.createElement(LuFile, null)), /* @__PURE__ */ React.createElement("div", null, node.name)), node.children && /* @__PURE__ */ React.createElement("ul", null, node.children.map((child) => renderTree(child))));
9
+ return /* @__PURE__ */ React.createElement("li", { key: node.id, className: `${node.type === "directory" ? "directory-tree-directory" : "directory-tree-file"}` }, /* @__PURE__ */ React.createElement("div", { className: "directory-tree-node-content" }, /* @__PURE__ */ React.createElement("div", { className: "directory-tree-icon" }, node.type === "directory" && /* @__PURE__ */ React.createElement(LuFolder, null), node.type === "file" && /* @__PURE__ */ React.createElement(LuFile, null)), /* @__PURE__ */ React.createElement("div", null, node.name)), node.children && /* @__PURE__ */ React.createElement("ul", null, node.children.map((child) => renderTree(child))));
9
10
  };
10
11
  return /* @__PURE__ */ React.createElement("div", { className: "code-block" }, /* @__PURE__ */ React.createElement("div", { className: "code-block-header" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(LuFolderTree, null)), /* @__PURE__ */ React.createElement("div", { className: "code-block-filename" }, filename), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(CodeBlockCopyButton, { code }))), /* @__PURE__ */ React.createElement("div", null, treeNode ? /* @__PURE__ */ React.createElement("ul", { className: "directory-tree" }, renderTree(treeNode)) : /* @__PURE__ */ React.createElement("pre", null, code)));
11
12
  }
13
+ function encryptSha256(str) {
14
+ const hash = createHash("sha256");
15
+ hash.update(str);
16
+ return hash.digest("hex");
17
+ }
12
18
  function parseTreeOutput(treeOutput) {
13
19
  const lines = treeOutput.trim().split("\n");
20
+ const idPrefix = "tree-" + encryptSha256(treeOutput.trim()) + "-";
14
21
  const rootNode = {
22
+ id: idPrefix + "root",
15
23
  name: "",
16
24
  type: "directory",
17
25
  level: 0,
@@ -22,7 +30,7 @@ function parseTreeOutput(treeOutput) {
22
30
  const getExtension = (filename) => filename.match(/\.(\w+)$/)?.[1];
23
31
  const cleanNodeName = (name) => name.replace(/^[\s│├└─]+/, "").trim();
24
32
  try {
25
- lines.forEach((line) => {
33
+ lines.forEach((line, index) => {
26
34
  const trimmedLine = line.trimStart();
27
35
  const indent = (trimmedLine.match(/^[\s│├└─]+/) || [""])[0];
28
36
  const level = indent.length / 4;
@@ -34,6 +42,7 @@ function parseTreeOutput(treeOutput) {
34
42
  }
35
43
  const isDirectory = !cleanedLine.includes(".");
36
44
  const newNode = {
45
+ id: idPrefix + "node-" + index,
37
46
  name: cleanedLine,
38
47
  type: isDirectory ? "directory" : "file",
39
48
  extension: isDirectory ? void 0 : getExtension(cleanedLine),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hackersheet/next-document-content-components",
3
- "version": "0.1.0-alpha.10",
3
+ "version": "0.1.0-alpha.11",
4
4
  "description": "Hacker Sheet document content components for Next.js",
5
5
  "keywords": [],
6
6
  "repository": {
@@ -31,8 +31,8 @@
31
31
  "react-icons": "^5.2.1",
32
32
  "react-tweet": "^3.2.1",
33
33
  "shiki": "^1.10.3",
34
- "@hackersheet/react-document-content": "0.1.0-alpha.11",
35
- "@hackersheet/core": "0.1.0-alpha.9"
34
+ "@hackersheet/core": "0.1.0-alpha.9",
35
+ "@hackersheet/react-document-content": "0.1.0-alpha.11"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@types/react": "^18.0.0",