tinywidgets 1.0.12 → 1.0.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinywidgets",
   "description": "A collection of tiny, reusable, React components",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "scripts": {
     "prePublishPackage": "eslint . && cspell --quiet . && tsc"
   },
@@ -9,14 +9,14 @@
   "repository": "github:tinyplex/tinywidgets",
   "type": "module",
   "devDependencies": {
-    "@types/react": "^18.3.8",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.7.0",
-    "@typescript-eslint/parser": "^8.7.0",
+    "@typescript-eslint/eslint-plugin": "^8.8.0",
+    "@typescript-eslint/parser": "^8.8.0",
     "cspell": "^8.14.4",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.12",
     "prettier": "^3.3.3",
@@ -28,11 +28,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@types/prismjs": "^1.26.4",
-    "lucide-react": "^0.445.0",
-    "prismjs": "^1.29.0",
+    "@vanilla-extract/css": "^1.16.0",
+    "lucide-react": "^0.447.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tinybase": "^5.3.1"
+    "tinybase": "^5.3.2"
   }
 }

package/src/components/App/index.tsx

@@ -1,3 +1,4 @@
+import * as UiReact from 'tinybase/ui-react/with-schemas';
 import type {ComponentType, ReactNode} from 'react';
 import {
   LocalStore,
@@ -30,9 +31,11 @@ import {classNames, renderComponentOrNode} from '../../common/functions.tsx';
 import {codeDark, codeLight} from '../../css/code.css.ts';
 import {colorsDark, colorsLight} from '../../css/colors.css.ts';
 import {Button} from '../Button/index.tsx';
-import {Provider} from 'tinybase/ui-react';
+import {OptionalSchemas} from 'tinybase/with-schemas';
 import React from 'react';
 
+const {Provider} = UiReact as UiReact.WithSchemas<OptionalSchemas>;
+
 const darkIcons = [Sun, Moon, SunMoon];
 const darkChoices = ['Light always', 'Dark always', 'Auto'];
 

package/src/components/Code/index.tsx

@@ -1,24 +1,16 @@
 /* eslint-disable max-len */
-import 'prismjs';
-import 'prismjs/components/prism-jsx';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-tsx';
-import Prism from 'prismjs';
 import React from 'react';
 import {classNames} from '../../common/functions.tsx';
 import {pre} from './index.css.ts';
 
-const {highlight, languages} = Prism;
-
 /**
  * The `Code` component displays a block of pre-formatted code, and uses PrismJS
- * to parse its syntax. The coloring is based on the [prism-one-dark](https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-dark.css) and [prism-one-light](https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-light.css) themes.
+ * to parse its syntax if you have imported it globally. The coloring is based
+ * on the [prism-one-dark](https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-dark.css) and [prism-one-light](https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-light.css) themes.
  *
- * This component supports the default PrismJS languages (`markup`, `html`
- * , `xml`, `svg`, `mathml`, `ssml`, `atom`, `rss`, `css`, `clike`, `javascript`
- * , `js`), and specific additional languages (`jsx`, `typescript`, `ts`
- * , `tsx`).
- * Others can be added if there is demand! Please open an issue on GitHub.
+ * PrismJS is not included in the TinyWidgets bundle, so you need to include it
+ * in your project, and, if you want to highlight one of the non-default Prism
+ * languages, you will need to explicitly include that too.
  *
  * @param props The props for the component.
  * @returns The Code component.
@@ -26,14 +18,37 @@ const {highlight, languages} = Prism;
  * ```tsx
  * <Code
  *   code={`
+ * const a = 1;
+ *   `}
+ * />
+ * ```
+ * This example shows a simple block of code, defaulting to the `javascript`
+ * language.
+ * @example
+ * ```tsx
+ * <Code
+ *   code={`
+ * const a: number = 1;
+ *   `}
+ *   language="typescript"
+ * />
+ * ```
+ * This example shows the use of the `typescript` language, which has been
+ * explicitly imported in addition to the Prism default languages
+ * @example
+ * ```tsx
+ * <Code
+ *   code={`
  * import React from 'react';
  * const App = () => (
  *   <div>Hello, world!</div>
  * );
  *   `}
+ *   language="tsx"
  * />
  * ```
- * This example shows a simple block of code, defaulting to the `jsx` language.
+ * This example shows a simple block of code, defaulting to the `jsx` language,
+ * similarly imported explicitly.
  * @example
  * ```tsx
  * <Code
@@ -46,21 +61,11 @@ const {highlight, languages} = Prism;
  * />
  * ```
  * This example shows the use of the `css` language.
- * @example
- * ```tsx
- * <Code
- *   code={`
- * const a: number = 1;
- *   `}
- *   language="typescript"
- * />
- * ```
- * This example shows the use of the `tsx` language.
  * @icon Lucide.SquareCode
  */
 export const Code = ({
   code,
-  language = 'jsx',
+  language = 'javascript',
   className,
 }: {
   /**
@@ -68,7 +73,7 @@ export const Code = ({
    */
   readonly code: string;
   /**
-   * An optional indication of the language. Defaults to `jsx`.
+   * An optional indication of the language. Defaults to `javascript`.
    */
   readonly language?: string;
   /**
@@ -76,12 +81,19 @@ export const Code = ({
    */
   readonly className?: string;
 }) => {
+  const prism = globalThis.Prism;
   return (
     <pre className={classNames(pre, className)}>
       <code
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{
-          __html: highlight(code.trim(), languages['clike'], 'clike'),
+          __html: (prism
+            ? prism.highlight(code, prism.languages?.[language], language)
+            : code.replace(
+                /[\u00A0-\u9999<>&]/g,
+                (i) => `&#${i.charCodeAt(0)};`,
+              )
+          ).trim(),
         }}
       />
     </pre>