@daren/code-block - npm Package Compare versions

Comparing version 2.2.7 to 2.2.8

dist/esm/index.js

@@ -1,2 +0,145 @@
-export * from './code-block';
-//# sourceMappingURL=index.js.map
+// lib/code-block.tsx
+import { cx as cx2 } from "@daren/utils";
+import Highlight, {
+  defaultProps
+} from "prism-react-renderer";
+import nightOwl from "prism-react-renderer/themes/nightOwl";
+
+// lib/clipboard-copy-button.tsx
+import { cx } from "@daren/utils";
+import { CheckCircleIcon, DuplicateIcon } from "@heroicons/react/solid";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+async function copyToClipboard(value) {
+  try {
+    if ("clipboard" in navigator) {
+      await navigator.clipboard.writeText(value);
+      return true;
+    }
+    const element = document.createElement("textarea");
+    element.value = value;
+    document.body.append(element);
+    element.select();
+    document.execCommand("copy");
+    element.remove();
+    return true;
+  } catch {
+    return false;
+  }
+}
+function ClipboardCopyButton({ value, className }) {
+  const [state, setState] = React.useState("idle" /* Idle */);
+  React.useEffect(() => {
+    async function transition() {
+      switch (state) {
+        case "copy" /* Copy */: {
+          const res = await copyToClipboard(value);
+          console.info("copied", res);
+          setState("copied" /* Copied */);
+          break;
+        }
+        case "copied" /* Copied */: {
+          setTimeout(() => {
+            setState("idle" /* Idle */);
+          }, 2e3);
+          break;
+        }
+        default:
+          break;
+      }
+    }
+    void transition();
+  }, [state, value]);
+  return /* @__PURE__ */ jsx("button", {
+    onClick: () => setState("copy" /* Copy */),
+    className: cx(
+      "p-2 text-lg font-medium whitespace-nowrap bg-transparent rounded-lg focus:outline-none group-hover:ring-2 focus:ring-2 shadow group-hover:shadow-md group-group-hover:opacity-100 group-hover:opacity-100 peer-group-hover:opacity-100 focus:opacity-100 peer-focus:opacity-100 transition lg:opacity-0",
+      className,
+      state === "copied" /* Copied */ ? "text-green-400 ring-green-400" : "text-white ring-slate-500 hover:ring-slate-100"
+    ),
+    children: /* @__PURE__ */ jsx("span", {
+      className: "inline",
+      children: state === "copied" /* Copied */ ? /* @__PURE__ */ jsx(CheckCircleIcon, {
+        className: "w-5 h-5"
+      }) : /* @__PURE__ */ jsx(DuplicateIcon, {
+        className: "w-5 h-5"
+      })
+    })
+  });
+}
+
+// lib/code-block.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function pad(num, size = 2) {
+  num = num.toString();
+  while (num.length < size)
+    num = `0${num}`;
+  return num;
+}
+function CodeBlock({
+  code = ``,
+  language = "typescript",
+  showLineNumbers,
+  showLanguage,
+  theme,
+  className: classNameProp
+}) {
+  return /* @__PURE__ */ jsx2("div", {
+    className: "group relative",
+    children: /* @__PURE__ */ jsx2(Highlight, {
+      ...defaultProps,
+      code,
+      language,
+      theme: theme ?? nightOwl,
+      children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx2(ClipboardCopyButton, {
+            value: code,
+            className: "absolute top-3 right-3 z-10"
+          }),
+          /* @__PURE__ */ jsxs("pre", {
+            className: cx2(
+              classNameProp,
+              className,
+              "pr-8 py-5 relative my-5 overflow-x-auto text-sm leading-relaxed rounded-xl",
+              {
+                "pl-4": !showLineNumbers,
+                "pl-16": showLineNumbers
+              }
+            ),
+            style,
+            children: [
+              tokens.map((line, i) => {
+                if (i === tokens.length - 1 && line.length === 0)
+                  return null;
+                return /* @__PURE__ */ jsxs("div", {
+                  ...getLineProps({ line, key: i }),
+                  children: [
+                    showLineNumbers && /* @__PURE__ */ jsx2("span", {
+                      className: "grid absolute left-0 shrink-0 place-items-center mr-[16px] w-[40px] text-primary-300",
+                      children: pad(i + 1)
+                    }),
+                    line.length === 0 && /* @__PURE__ */ jsx2("span", {
+                      children: "\u200B"
+                    }),
+                    line.map((token, key) => /* @__PURE__ */ jsx2("span", {
+                      ...getTokenProps({ token, key })
+                    }))
+                  ]
+                });
+              }),
+              showLanguage && /* @__PURE__ */ jsx2("span", {
+                className: "block sticky right-0 w-full text-xs text-right",
+                children: language
+              })
+            ]
+          })
+        ]
+      })
+    })
+  });
+}
+export {
+  ClipboardCopyButton,
+  CodeBlock
+};

package.json

 {
   "name": "@daren/code-block",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "repository": {
@@ -13,3 +13,3 @@ "type": "git",
     ".": {
-      "require": "./dist/cjs/index.js",
+      "require": "./dist/index.js",
       "default": "./dist/esm/index.js"
@@ -19,6 +19,6 @@ },
   },
-  "main": "dist/cjs/index.js",
+  "main": "dist/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
-  "typings": "dist/types/index.d.ts",
+  "types": "dist/index.d.ts",
+  "typings": "dist/index.d.ts",
   "files": [
@@ -28,6 +28,4 @@ "dist"
   "scripts": {
-    "build": "run-p build:*",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel lib --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
-    "build:esm": "cross-env BABEL_ENV=esm babel lib --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "build": "run-s build:*",
+    "build:source": "tsup ./index.ts --format esm,cjs --legacy-output --dts ./index.ts",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
@@ -43,3 +41,3 @@ "lint": "run-p lint:*",
   "dependencies": {
-    "@daren/utils": "^1.5.0",
+    "@daren/utils": "^1.5.1",
     "@heroicons/react": "^1.0.6",
@@ -57,3 +55,3 @@ "prism-react-renderer": "^1.2.1"
   },
-  "gitHead": "2461fb467f1d7ab15ab1c4288f548592bf63b1ba"
+  "gitHead": "0cb696ce495fec15dafa4b2b174a840eabbcaa2c"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

13443

decreased by-65.83%

Number of package files

5

decreased by-75%

Lines of code

334

decreased by-13.92%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@daren/utils@^1.5.1