@vortexlabs/kirari-react 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @vortexlabs/kirari-react
 
+## 1.1.0
+
+### Minor Changes
+
+- 52ad674: Accept text children in `<Code>` the way React renders text. `<Code>let x = {count}</Code>` now highlights the joined source instead of misaligned tokens. Numbers and bigints are kept instead of dropped, and `null`, `undefined`, and booleans render nothing instead of throwing. Element children throw a `TypeError`. The `children` prop type widens from `string` to the new exported `CodeText` type.
+  
+  Stop `lines` and `highlightLines` from adding an empty last line wrapper after a trailing newline. The newline still follows the last wrapper, so the source text is unchanged, and blank lines before it keep their wrappers.
+
 ## 1.0.1
 
 ### Patch Changes

package/README.md

@@ -31,8 +31,9 @@ export const CodeExample = () => (
 
 Output is `<pre class="kirari"><code>…</code></pre>` with the standard
 `kirari-*` classes, so every Kirari theme works. Code text is escaped by React;
-the component does not use `dangerouslySetInnerHTML`. `language` defaults to
-JavaScript. Other props go to the `<pre>`.
+the component does not use `dangerouslySetInnerHTML`. Text children are joined
+as React joins text, so `{value}` interpolation works; elements throw. `language`
+defaults to JavaScript. Other props go to the `<pre>`.
 
 ## Lines and customization
 
@@ -83,7 +84,7 @@ export const StreamExample = () => {
 This example adds one chunk per click. In your app, call `write(chunk)` as text
 arrives. The hook also returns `end()`, which closes the stream when it is complete.
 
-- Built-in JavaScript, TypeScript, and JSON reuse completed scanning work. Other languages rescan the full source. Long unfinished tokens can still be expensive; see [token streaming](https://github.com/vortexkit/kirari/blob/main/docs/streaming.md).
+- Built-in JavaScript, TypeScript, JSX, TSX, JSON, JSONC, and Python reuse completed scanning work. Other languages rescan the full source. Long unfinished tokens can still be expensive; see [token streaming](https://github.com/vortexkit/kirari/blob/main/docs/streaming.md).
 - Changing `language` starts a new, empty stream.
 - After `end()`, call `reset()` before writing again.
 - `/stream` is a client module; `<Code>` is not.

package/dist/index.d.ts

@@ -7,9 +7,11 @@ export interface Line {
     readonly start: number;
     readonly end: number;
 }
+/** Text children, joined like React text: `null`, `undefined`, and booleans render nothing. */
+export type CodeText = string | number | bigint | boolean | null | undefined | readonly CodeText[];
 export interface CodeProps extends Omit<ComponentPropsWithoutRef<'pre'>, 'children'> {
     /** Source to highlight. Ignored when `tokens` is set. */
-    readonly children?: string;
+    readonly children?: CodeText;
     /** Pre-scanned tokens, such as the output of `useTokenStream`. */
     readonly tokens?: readonly Token[];
     readonly language?: Language;

package/dist/index.js

@@ -4,6 +4,15 @@ import { javascript } from '@vortexlabs/kirari/languages/javascript';
 const join = (...names) => {
     return names.filter(Boolean).join(' ');
 };
+const sourceText = (children) => {
+    if (children == null || typeof children === 'boolean')
+        return '';
+    if (typeof children === 'string' || typeof children === 'number' || typeof children === 'bigint')
+        return String(children);
+    if (Array.isArray(children))
+        return children.map(sourceText).join('');
+    throw new TypeError('Kirari: <Code> children must be text');
+};
 const splitsSurrogate = (source, offset) => {
     const before = source.charCodeAt(offset - 1);
     const after = source.charCodeAt(offset);
@@ -13,7 +22,7 @@ const highlighted = (ranges) => {
     const pairs = ranges.map(range => typeof range === 'number' ? [range, range] : range);
     return line => pairs.some(([first, last]) => first <= line && line <= last);
 };
-const codeNodes = (tokens, options = {}) => {
+const assertContiguous = (tokens) => {
     let offset = 0;
     for (const token of tokens) {
         if (token.start !== offset || token.end !== offset + token.value.length) {
@@ -21,8 +30,9 @@ const codeNodes = (tokens, options = {}) => {
         }
         offset = token.end;
     }
-    const source = tokens.map(token => token.value).join('');
-    const decorations = options.decorations ?? [];
+};
+/** Validated enter/leave points for each decoration, in source order. */
+const decorationEvents = (decorations, source) => {
     const events = [];
     for (const [index, decoration] of decorations.entries()) {
         if (!Number.isInteger(decoration.start) || !Number.isInteger(decoration.end)
@@ -34,7 +44,13 @@ const codeNodes = (tokens, options = {}) => {
         }
         events.push({ offset: decoration.start, index, entering: true }, { offset: decoration.end, index, entering: false });
     }
-    events.sort((a, b) => a.offset - b.offset);
+    return events.sort((a, b) => a.offset - b.offset);
+};
+const codeNodes = (tokens, options = {}) => {
+    assertContiguous(tokens);
+    const source = tokens.map(token => token.value).join('');
+    const decorations = options.decorations ?? [];
+    const events = decorationEvents(decorations, source);
     // Resolve callbacks once so tokens split by lines or decorations see them a single time.
     const tokenClasses = tokens.map(token => join(options.classes && Object.hasOwn(options.classes, token.type) ? options.classes[token.type] : undefined, options.tokenClassName?.(token)));
     const active = new Set();
@@ -85,13 +101,15 @@ const codeNodes = (tokens, options = {}) => {
             break;
         nodes.push(match[0]);
         start = end + match[0].length;
+        if (start === source.length)
+            break;
         number++;
     } while (true);
     return nodes;
 };
 /** Highlighted code as React elements. Uses no hooks, so it also renders as a Server Component. */
-export const Code = ({ children = '', tokens, language = javascript, classes, tokenClassName, decorations, lines, lineClassName, highlightLines, className, ...props }) => {
-    const nodes = codeNodes(tokens ?? tokenize(children, language), {
+export const Code = ({ children, tokens, language = javascript, classes, tokenClassName, decorations, lines, lineClassName, highlightLines, className, ...props }) => {
+    const nodes = codeNodes(tokens ?? tokenize(sourceText(children), language), {
         ...(classes && { classes }),
         ...(tokenClassName && { tokenClassName }),
         ...(decorations && { decorations }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vortexlabs/kirari-react",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Kirari syntax highlighting as React elements.",
   "keywords": [
     "react",
@@ -55,7 +55,7 @@
     "@happy-dom/global-registrator": "^20.14.6",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "@vortexlabs/kirari": "1.0.1",
+    "@vortexlabs/kirari": "1.0.5",
     "react": "^19.3.1",
     "react-dom": "^19.3.1"
   },