@vortexlabs/kirari-react 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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
+
+- 3ee99c0: Update the package homepage and documentation links to https://kirari.sh.
+
 ## 1.0.0
 
 ### Major Changes

package/README.md

@@ -1,8 +1,11 @@
 # @vortexlabs/kirari-react
 
-Kirari highlighting as React elements. `<Code>` renders tokens as `<span>`
-elements, with no `dangerouslySetInnerHTML` and no hooks, so it works as a
-Server Component.
+Syntax highlighting for React 19, built on
+[`@vortexlabs/kirari`](https://github.com/vortexkit/kirari/blob/main/packages/kirari/README.md).
+`<Code>` renders code as React elements and works in Server Components. Use the
+optional streaming hook for code that arrives in chunks.
+
+[Documentation](https://kirari.sh/docs/) · [Playground](https://kirari.sh/playground/)
 
 ## Install
 
@@ -19,19 +22,30 @@ import { Code } from '@vortexlabs/kirari-react'
 import { typescript } from '@vortexlabs/kirari/languages/typescript'
 import '@vortexlabs/kirari/theme.css'
 
-<Code language={typescript} highlightLines={[1, [3, 4]]}>{source}</Code>
+export const CodeExample = () => (
+  <Code language={typescript}>
+    {'const greeting: string = "Hello"'}
+  </Code>
+)
 ```
 
 Output is `<pre class="kirari"><code>…</code></pre>` with the standard
-`kirari-*` classes, so every Kirari theme works. `language` defaults to
-JavaScript. Other props go to the `<pre>`.
+`kirari-*` classes, so every Kirari theme works. Code text is escaped by React;
+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
+
+Use `highlightLines={[1, [3, 4]]}` to mark line 1 and lines 3–4. Style
+`.kirari-line-highlighted` to choose the highlight's appearance.
 
 | Prop | Effect |
 | --- | --- |
 | `lines` | Wrap each line in `<span class="kirari-line" data-line="n">`. |
 | `highlightLines` | Lines or `[first, last]` ranges get `kirari-line-highlighted`. Implies `lines`. |
 | `lineClassName` | `(line) => class` for a line wrapper. `line` is `{ number, start, end }`. |
-| `decorations` | `{ start, end, className }` source ranges, as in [decorations](../../docs/decorations.md). |
+| `decorations` | `{ start, end, className }` source ranges, as in [decorations](https://github.com/vortexkit/kirari/blob/main/docs/decorations.md). |
 | `classes` | Extra classes per token type, e.g. `{ keyword: 'kw' }`. |
 | `tokenClassName` | `(token) => class` per token. |
 | `tokens` | Pre-scanned tokens instead of `children`. |
@@ -46,15 +60,36 @@ Line numbers are CSS:
 
 ```tsx
 'use client'
+
+import { Code } from '@vortexlabs/kirari-react'
 import { useTokenStream } from '@vortexlabs/kirari-react/stream'
+import { javascript } from '@vortexlabs/kirari/languages/javascript'
+import '@vortexlabs/kirari/theme.css'
+
+export const StreamExample = () => {
+  const { tokens, write, reset } = useTokenStream(javascript)
 
-const { tokens, write, end, reset } = useTokenStream(javascript)
-// write(chunk) as text arrives, then end()
-return <Code tokens={tokens} />
+  return (
+    <>
+      <button type="button" onClick={() => write('const count = 42\n')}>
+        Append a line
+      </button>
+      <button type="button" onClick={reset}>Reset</button>
+      <Code tokens={tokens} />
+    </>
+  )
+}
 ```
 
-- Rescans only the unfinished tail. See [token streaming](../../docs/streaming.md).
+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, 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.
 - Managing tokens yourself? Use `createTokenStream` from `@vortexlabs/kirari/stream` with `applyPatch(tokens, patch)`.
+
+## License
+
+[MIT](https://github.com/vortexkit/kirari/blob/main/packages/react/LICENSE) © 2026 [Ugi](https://ugi.dev)

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.0",
+  "version": "1.1.0",
   "description": "Kirari syntax highlighting as React elements.",
   "keywords": [
     "react",
@@ -10,7 +10,7 @@
   ],
   "author": "Ugi (https://ugi.dev)",
   "license": "MIT",
-  "homepage": "https://kirari.vortex.design",
+  "homepage": "https://kirari.sh",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vortexkit/kirari.git",
@@ -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.0",
+    "@vortexlabs/kirari": "1.0.5",
     "react": "^19.3.1",
     "react-dom": "^19.3.1"
   },