@e-burgos/tucu-ui 2.7.1 → 2.7.2

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 (4) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/components/utils/code-block.mjs +99 -65
  3. package/index.js +9 -9
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [2.7.2] - 2026-07-15
9
+
10
+ ### Fixed
11
+
12
+ - lazy-load prismjs in CodeBlock to fix dev-mode crash for consumers
8
13
  ## [2.7.1] - 2026-07-15
9
14
 
10
15
  ### Fixed
package/components/utils/code-block.mjs CHANGED
@@ -1,99 +1,133 @@
1
- import { jsxs as n, jsx as r } from "react/jsx-runtime";
2
- import { useState as l, useEffect as x } from "react";
3
- import { Scrollbar as k } from "../common/scrollbar.mjs";
4
- import { Check as v, Copy as C, ChevronUp as w, ChevronDown as N } from "lucide-react";
5
- import d from "prismjs";
6
- import e from "classnames";
7
- import "prismjs/components/prism-javascript";
8
- import "prismjs/components/prism-typescript";
9
- import "prismjs/components/prism-jsx";
10
- import "prismjs/components/prism-tsx";
11
- import "prismjs/components/prism-css";
12
- import "prismjs/components/prism-bash";
13
- import "prismjs/components/prism-json";
14
- import "prismjs/components/prism-python";
15
- import "prismjs/components/prism-java";
16
- import "prismjs/components/prism-sql";
17
- import { useIsMobile as j } from "../../hooks/use-is-mobile.mjs";
18
- const G = ({
19
- code: t,
1
+ import { jsxs as d, jsx as e } from "react/jsx-runtime";
2
+ import { useState as c, useEffect as C } from "react";
3
+ import { Scrollbar as N } from "../common/scrollbar.mjs";
4
+ import { Check as j, Copy as M, ChevronUp as P, ChevronDown as E } from "lucide-react";
5
+ import a from "classnames";
6
+ import { useIsMobile as I } from "../../hooks/use-is-mobile.mjs";
7
+ const b = {
8
+ markup: { load: () => import("prismjs/components/prism-markup") },
9
+ clike: { load: () => import("prismjs/components/prism-clike") },
10
+ javascript: {
11
+ deps: ["clike"],
12
+ load: () => import("prismjs/components/prism-javascript")
13
+ },
14
+ typescript: {
15
+ deps: ["javascript"],
16
+ load: () => import("prismjs/components/prism-typescript")
17
+ },
18
+ jsx: {
19
+ deps: ["markup", "javascript"],
20
+ load: () => import("prismjs/components/prism-jsx")
21
+ },
22
+ tsx: {
23
+ deps: ["jsx", "typescript"],
24
+ load: () => import("prismjs/components/prism-tsx")
25
+ },
26
+ css: { load: () => import("prismjs/components/prism-css") },
27
+ bash: { load: () => import("prismjs/components/prism-bash") },
28
+ json: { load: () => import("prismjs/components/prism-json") },
29
+ python: { load: () => import("prismjs/components/prism-python") },
30
+ java: {
31
+ deps: ["clike"],
32
+ load: () => import("prismjs/components/prism-java")
33
+ },
34
+ sql: { load: () => import("prismjs/components/prism-sql") }
35
+ };
36
+ let p = null;
37
+ const m = /* @__PURE__ */ new Map();
38
+ function y(r) {
39
+ const o = b[r];
40
+ if (!o) return Promise.resolve();
41
+ let t = m.get(r);
42
+ return t || (t = Promise.all((o.deps ?? []).map(y)).then(
43
+ () => o.load()
44
+ ), m.set(r, t)), t;
45
+ }
46
+ async function L(r) {
47
+ p || (p = import("prismjs"));
48
+ const { default: o } = await p;
49
+ return r && b[r] && await y(r).catch(() => {
50
+ m.delete(r);
51
+ }), o;
52
+ }
53
+ const z = ({
54
+ code: r,
20
55
  language: o,
21
- expanded: f = !0,
22
- noExpand: c = !1,
23
- className: m
56
+ expanded: t = !0,
57
+ noExpand: f = !1,
58
+ className: x
24
59
  }) => {
25
- const { isMobile: a } = j(), [i, g] = l(!1), [s, h] = l(
26
- !!(!c && f)
27
- ), [b, p] = l("");
28
- x(() => {
29
- if (o && d.languages[o]) {
30
- const y = d.highlight(
31
- t,
32
- d.languages[o],
33
- o
34
- );
35
- p(y);
36
- } else
37
- p(t);
38
- }, [t, o]);
39
- const u = () => {
40
- navigator.clipboard.writeText(t).then(() => {
60
+ const { isMobile: s } = I(), [i, g] = c(!1), [l, k] = c(
61
+ !!(!f && t)
62
+ ), [v, h] = c("");
63
+ C(() => {
64
+ let u = !1;
65
+ return L(o).then((n) => {
66
+ u || (o && n.languages[o] ? h(
67
+ n.highlight(r, n.languages[o], o)
68
+ ) : h(r));
69
+ }), () => {
70
+ u = !0;
71
+ };
72
+ }, [r, o]);
73
+ const w = () => {
74
+ navigator.clipboard.writeText(r).then(() => {
41
75
  g(!0), setTimeout(() => g(!1), 2e3);
42
76
  });
43
77
  };
44
- return /* @__PURE__ */ n(
78
+ return /* @__PURE__ */ d(
45
79
  "div",
46
80
  {
47
81
  "data-tucu": "code-block",
48
- className: e(
82
+ className: a(
49
83
  "overflow-x-auto min-h-[150px] relative rounded-xl border mt-4",
50
84
  "bg-gray-100 dark:bg-gray-800 border-border hover:border-gray-400 dark:hover:border-gray-600",
51
- s ? "h-fit max-h-[300px] transition-all duration-300" : "h-full transition-all duration-300",
52
- m
85
+ l ? "h-fit max-h-[300px] transition-all duration-300" : "h-full transition-all duration-300",
86
+ x
53
87
  ),
54
88
  children: [
55
- /* @__PURE__ */ n(
89
+ /* @__PURE__ */ d(
56
90
  "div",
57
91
  {
58
- className: e(
92
+ className: a(
59
93
  "absolute z-10 top-1 right-1 p-2 flex justify-end items-center w-full gap-1",
60
- a && "flex-col items-end"
94
+ s && "flex-col items-end"
61
95
  ),
62
96
  children: [
63
- /* @__PURE__ */ n(
97
+ /* @__PURE__ */ d(
64
98
  "button",
65
99
  {
66
- onClick: u,
100
+ onClick: w,
67
101
  "aria-label": i ? "Copied to clipboard" : "Copy to clipboard",
68
- className: e(
102
+ className: a(
69
103
  "code-block-btn p-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 dark:focus:ring-offset-gray-800",
70
- a && "p-1 w-8 h-8"
104
+ s && "p-1 w-8 h-8"
71
105
  ),
72
106
  title: "Copy to clipboard",
73
107
  children: [
74
- i ? /* @__PURE__ */ r(v, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ r(C, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" }),
75
- /* @__PURE__ */ r("span", { className: "sr-only", children: i ? "Copied!" : "Copy code" })
108
+ i ? /* @__PURE__ */ e(j, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ e(M, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" }),
109
+ /* @__PURE__ */ e("span", { className: "sr-only", children: i ? "Copied!" : "Copy code" })
76
110
  ]
77
111
  }
78
112
  ),
79
- !c && /* @__PURE__ */ r(
113
+ !f && /* @__PURE__ */ e(
80
114
  "button",
81
115
  {
82
- onClick: () => h(!s),
83
- className: e(
116
+ onClick: () => k(!l),
117
+ className: a(
84
118
  "code-block-btn p-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 dark:focus:ring-offset-gray-800",
85
- a && "p-1 w-8 h-8"
119
+ s && "p-1 w-8 h-8"
86
120
  ),
87
121
  title: "Expand/Collapse",
88
- children: s ? /* @__PURE__ */ r(N, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ r(w, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" })
122
+ children: l ? /* @__PURE__ */ e(E, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ e(P, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" })
89
123
  }
90
124
  ),
91
- o && /* @__PURE__ */ r(
125
+ o && /* @__PURE__ */ e(
92
126
  "div",
93
127
  {
94
- className: e(
128
+ className: a(
95
129
  "code-block-btn p-2 text-sm font-mono bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 hover:pointer dark:hover:bg-gray-600 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 dark:focus:ring-offset-gray-800",
96
- a && "w-max max-w-11 h-8"
130
+ s && "w-max max-w-11 h-8"
97
131
  ),
98
132
  children: o
99
133
  }
@@ -101,15 +135,15 @@ const G = ({
101
135
  ]
102
136
  }
103
137
  ),
104
- /* @__PURE__ */ r(
105
- k,
138
+ /* @__PURE__ */ e(
139
+ N,
106
140
  {
107
141
  className: "overflow-x-auto h-full p-4 pr-16 pt-4 lg:pr-4 lg:pt-16 transition-all duration-300",
108
- children: /* @__PURE__ */ r("pre", { className: "text-xs whitespace-pre-wrap font-mono block", children: /* @__PURE__ */ r(
142
+ children: /* @__PURE__ */ e("pre", { className: "text-xs whitespace-pre-wrap font-mono block", children: /* @__PURE__ */ e(
109
143
  "code",
110
144
  {
111
145
  className: `language-${o || "text"}`,
112
- dangerouslySetInnerHTML: { __html: b }
146
+ dangerouslySetInnerHTML: { __html: v }
113
147
  }
114
148
  ) })
115
149
  }
@@ -119,6 +153,6 @@ const G = ({
119
153
  );
120
154
  };
121
155
  export {
122
- G as CodeBlock,
123
- G as default
156
+ z as CodeBlock,
157
+ z as default
124
158
  };