bright - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/index.d.ts

 import React from 'react';
-import { Lang, Theme } from '@code-hike/lighter';
+import { Theme, Lang } from '@code-hike/lighter';
 
-declare function Code({ children, lang, style, className, lineNumbers, unstyled, theme, }: {
+type DoubleTheme = {
+    dark: Theme;
+    light: Theme;
+    selector?: (scheme: "dark" | "light") => string;
+};
+type BrightTheme = Theme | DoubleTheme;
+type CodeProps = {
     lang: Lang;
@@ -11,5 +17,9 @@ children: string;
     unstyled?: boolean;
-    theme: Theme;
-}): Promise<JSX.Element>;
+    theme?: BrightTheme;
+};
+type CodeComponent = ((props: CodeProps) => Promise<JSX.Element>) & {
+    theme?: BrightTheme;
+};
+declare const Code: CodeComponent;
 
 export { Code };

dist/index.js

@@ -57,5 +57,7 @@ "use strict";
 __export(src_exports, {
-  Code: () => Code
+  Code: () => Code2
 });
 module.exports = __toCommonJS(src_exports);
+
+// src/code.tsx
 var import_lighter = require("@code-hike/lighter");
@@ -65,3 +67,3 @@ var import_jsx_runtime = require("react/jsx-runtime");
   return __async(this, arguments, function* ({
-    children,
+    code,
     lang,
@@ -72,3 +74,4 @@ style,
     unstyled,
-    theme
+    theme,
+    scheme
   }) {
@@ -82,3 +85,3 @@ const {
       lineNumberForeground
-    } = yield (0, import_lighter.highlight)(children, lang, theme);
+    } = yield (0, import_lighter.highlight)(code, lang, theme);
     const lineCount = lines.length;
@@ -93,2 +96,16 @@ const digits = lineCount.toString().length;
     });
+    const themeName = getThemeName(theme);
+    const codeSelector = `pre[data-bright-theme="${themeName}"]`;
+    const css = `
+  ${displayStyle(scheme, codeSelector)}
+  ${codeSelector} ::selection {
+    background-color: ${selectionBackground};
+  }
+  ${codeSelector} .bright-ln { 
+    color: ${lineNumberForeground}; 
+    padding-right: 2ch; 
+    display: inline-block;
+    text-align: right;
+    user-select: none;
+  }`;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -98,2 +115,3 @@ "pre",
         className,
+        "data-bright-theme": themeName,
         style: __spreadValues({
@@ -107,13 +125,3 @@ color: foreground,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
-      code ::selection {
-        background-color: ${selectionBackground}
-      }
-      .bright-ln { 
-        color: ${lineNumberForeground}; 
-        padding-right: 2ch; 
-        display: inline-block;
-        text-align: right;
-        user-select: none;
-      }` }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: css } }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: kids })
@@ -125,2 +133,87 @@ ]
 }
+function displayStyle(scheme, codeSelector) {
+  if (scheme === "dark") {
+    return `${codeSelector} {
+      display: block;
+    }
+    [data-theme="light"] ${codeSelector}  {
+      display: none;
+    }`;
+  }
+  if (scheme === "light") {
+    return `${codeSelector} {
+      display: none;
+    }
+    [data-theme="light"] ${codeSelector} {
+      display: block;
+    }`;
+  }
+  return "";
+}
+function getThemeName(theme) {
+  if (!theme)
+    return "default";
+  if (typeof theme === "string")
+    return theme;
+  return theme.name;
+}
+
+// src/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Code2 = (_0) => __async(void 0, [_0], function* ({
+  children,
+  lang,
+  style,
+  className,
+  lineNumbers,
+  unstyled,
+  theme
+}) {
+  const finalTheme = theme || Code2.theme;
+  if (finalTheme && finalTheme.dark && finalTheme.light) {
+    const doubleTheme = finalTheme;
+    const darkTheme = doubleTheme.dark;
+    const lightTheme = doubleTheme.light;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Code,
+        {
+          code: children,
+          lang: lang || "js",
+          style,
+          className,
+          lineNumbers,
+          unstyled,
+          theme: darkTheme,
+          scheme: "dark"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Code,
+        {
+          code: children,
+          lang: lang || "js",
+          style,
+          className,
+          lineNumbers,
+          unstyled,
+          theme: lightTheme,
+          scheme: "light"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Code,
+    {
+      code: children,
+      lang: lang || "js",
+      style,
+      className,
+      lineNumbers,
+      unstyled,
+      theme: finalTheme
+    }
+  );
+});
 // Annotate the CommonJS export names for ESM import in node:
@@ -127,0 +220,0 @@ 0 && (module.exports = {

package.json

 {
   "name": "bright",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "main": "./dist/index.js",
@@ -16,3 +16,3 @@ "module": "./dist/index.mjs",
     "build": "tsup src/index.tsx --format esm,cjs --dts",
-    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts"
+    "watch": "tsup src/index.tsx --format esm,cjs --watch --dts"
   },
@@ -19,0 +19,0 @@ "dependencies": {

readme.md

 **work in progress**
 
 > the future is bright
+
+## Credits
+
+- Thanks [LEI Zongmin](https://github.com/leizongmin) for providing the bright npm package name

Fixed 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

Improved metrics

Total package byte prevSize

12436

increased by55.22%

Lines of code

421

increased by83.04%

Number of lines in readme file

8

increased by100%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes