tree-sitter-ts-highlight-svelte 0.1.2

package/README.md

@@ -0,0 +1,76 @@
+# tree-sitter-ts-highlight-svelte
+
+Native Svelte components and utilities for `tree-sitter-ts-highlight`.
+Use this package when you want syntax-highlighted code/diffs rendered as native Svelte nodes.
+
+## Install
+
+```bash
+npm install tree-sitter-ts-highlight-svelte tree-sitter-ts-highlight tree-sitter-ts
+```
+
+Import a theme once in your app entry:
+
+```ts
+import "tree-sitter-ts-highlight/themes/github-dark.css";
+```
+
+## Quick start
+
+```svelte
+<script lang="ts">
+  import { Highlight, HighlightDiff } from "tree-sitter-ts-highlight-svelte";
+
+  const oldCode = `const n = 1;`;
+  const newCode = `const n = 2;`;
+</script>
+
+<Highlight
+  code={`const total: number = 42;`}
+  language="typescript"
+  options={{ lineNumbers: true }}
+/>
+
+<HighlightDiff
+  oldCode={oldCode}
+  newCode={newCode}
+  language="typescript"
+  options={{ view: "side-by-side" }}
+/>
+```
+
+## Exports
+
+### Components
+
+- `Highlight`
+  - Props: `code`, `language`, `options?`, `preClassName?`, `codeClassName?`
+  - Renders highlighted code inside `<pre><code>`.
+- `HighlightDiff`
+  - Props: `oldCode`, `newCode`, `language`, `options?`, `containerClassName?`
+  - Renders inline or side-by-side diffs.
+
+### Utilities
+
+- `getHighlightedHtml({ code, language, options? })`
+- `getHighlightedDiffHtml({ oldCode, newCode, language, options? })`
+- `createHighlightedHtmlStore({ code, language, options? })`
+- `createHighlightedDiffHtmlStore({ oldCode, newCode, language, options? })`
+
+All exports from `tree-sitter-ts-highlight` are also re-exported.
+Type exports from `tree-sitter-ts-highlight` and `Token` from `tree-sitter-ts` are re-exported for TypeScript consumers.
+
+## Notes
+
+- `language` is passed through to `tree-sitter-ts-highlight`.
+- `Highlight` always renders with `wrapInPre: false` internally to avoid nested `<pre>`.
+- For additional live demos and theme previews, use the upstream project page:
+  <https://github.com/hieutran512/tree-sitter-ts-highlight>
+
+## Package scripts
+
+```bash
+npm run build
+npm run typecheck
+npm test
+```

package/dist/components/Highlight.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import type { HighlightOptions } from "tree-sitter-ts-highlight";
+    import {
+        createHighlightRenderable,
+        styleObjectToCssText,
+        type RenderToken,
+    } from "../lib/svelte-renderer";
+
+    interface HighlightProps {
+        code: string;
+        language: string;
+        options?: Omit<HighlightOptions, "wrapInPre" | "language">;
+        preClassName?: string;
+        codeClassName?: string;
+    }
+
+    export let code: HighlightProps["code"];
+    export let language: HighlightProps["language"];
+    export let options: HighlightProps["options"] = undefined;
+    export let preClassName: HighlightProps["preClassName"] = "";
+    export let codeClassName: HighlightProps["codeClassName"] = "";
+
+    $: renderable = createHighlightRenderable(code, language, options);
+    $: preStyle = styleObjectToCssText(renderable.preStyle);
+    $: mergedPreClass = ["hlts", `hlts-lang-${language}`, preClassName]
+        .filter(Boolean)
+        .join(" ");
+    $: mergedCodeClass = [codeClassName].filter(Boolean).join(" ");
+
+    function tokenStyle(token: RenderToken): string {
+        return token.style ? styleObjectToCssText(token.style) : "";
+    }
+</script>
+
+<pre class={mergedPreClass} style={preStyle}>
+  <code class={mergedCodeClass}>
+    {#if renderable.lineNumbers}
+            <table class="hlts-table">
+        <tbody>
+          {#each renderable.lines as line}
+                        <tr
+                            data-line={renderable.dataLineAttributes
+                                ? line.lineNumber
+                                : undefined}>
+              <td class="hlts-line-number">{line.lineNumber}</td>
+              <td class="hlts-line-content">
+                {#each line.tokens as token}
+                                    {#if token.wrap}
+                                        <span
+                                            class={token.className}
+                                            style={tokenStyle(token)}
+                                            {...token.dataAttrs}
+                                            >{token.value}</span
+                                        >
+                                    {:else}
+                                        {token.value}
+                                    {/if}
+                                {/each}
+              </td>
+            </tr>
+                    {/each}
+        </tbody>
+      </table>
+        {:else}
+            {#each renderable.tokens as token}
+                {#if token.wrap}
+                    <span
+                        class={token.className}
+                        style={tokenStyle(token)}
+                        {...token.dataAttrs}>{token.value}</span
+                    >
+                {:else}
+                    {token.value}
+                {/if}
+            {/each}
+        {/if}
+  </code>
+</pre>

package/dist/components/Highlight.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { HighlightOptions } from "tree-sitter-ts-highlight";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Highlight: $$__sveltets_2_IsomorphicComponent<{
+    code: string;
+    language: string;
+    options?: Omit<HighlightOptions, "wrapInPre" | "language"> | undefined;
+    preClassName?: string | undefined;
+    codeClassName?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Highlight = InstanceType<typeof Highlight>;
+export default Highlight;
+//# sourceMappingURL=Highlight.svelte.d.ts.map

package/dist/components/Highlight.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Highlight.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AA0EjE,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,SAAS;;;;;;;;kBAA+E,CAAC;AAC7E,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/components/HighlightDiff.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+    import type { DiffOptions } from "tree-sitter-ts-highlight";
+    import {
+        createDiffRenderable,
+        styleObjectToCssText,
+        type RenderToken,
+    } from "../lib/svelte-renderer";
+
+    interface HighlightDiffProps {
+        oldCode: string;
+        newCode: string;
+        language: string;
+        options?: DiffOptions;
+        containerClassName?: string;
+    }
+
+    export let oldCode: HighlightDiffProps["oldCode"];
+    export let newCode: HighlightDiffProps["newCode"];
+    export let language: HighlightDiffProps["language"];
+    export let options: HighlightDiffProps["options"] = undefined;
+    export let containerClassName: HighlightDiffProps["containerClassName"] =
+        "";
+
+    $: renderable = createDiffRenderable(oldCode, newCode, language, options);
+
+    function tokenStyle(token: RenderToken): string {
+        return token.style ? styleObjectToCssText(token.style) : "";
+    }
+</script>
+
+<div class={containerClassName}>
+    {#if renderable.view === "inline"}
+        <table
+            class={`${renderable.classPrefix}diff ${renderable.classPrefix}diff-inline`}
+        >
+            <tbody>
+                {#each renderable.rows as row}
+                    {#if row.changeType === "context"}
+                        <tr
+                            class={`${renderable.classPrefix}diff-row ${renderable.classPrefix}diff-context`}
+                        >
+                            <td class={`${renderable.classPrefix}diff-gutter`}
+                                >{row.newLineNumber ?? ""}</td
+                            >
+                            <td class={`${renderable.classPrefix}diff-sign`}>
+                            </td>
+                            <td class={`${renderable.classPrefix}diff-content`}>
+                                {#if row.newTokens.length > 0}
+                                    {#each row.newTokens as token}
+                                        {#if token.wrap}
+                                            <span
+                                                class={token.className}
+                                                style={tokenStyle(token)}
+                                                {...token.dataAttrs}
+                                                >{token.value}</span
+                                            >
+                                        {:else}
+                                            {token.value}
+                                        {/if}
+                                    {/each}
+                                {:else}
+                                    {row.newText}
+                                {/if}
+                            </td>
+                        </tr>
+                    {:else}
+                        {#if row.oldLineNumber !== null}
+                            <tr
+                                class={`${renderable.classPrefix}diff-row ${renderable.classPrefix}diff-removed`}
+                            >
+                                <td
+                                    class={`${renderable.classPrefix}diff-gutter`}
+                                    >{row.oldLineNumber}</td
+                                >
+                                <td class={`${renderable.classPrefix}diff-sign`}
+                                    >-</td
+                                >
+                                <td
+                                    class={`${renderable.classPrefix}diff-content`}
+                                >
+                                    {#if row.oldTokens.length > 0}
+                                        {#each row.oldTokens as token}
+                                            {#if token.wrap}
+                                                <span
+                                                    class={token.className}
+                                                    style={tokenStyle(token)}
+                                                    {...token.dataAttrs}
+                                                    >{token.value}</span
+                                                >
+                                            {:else}
+                                                {token.value}
+                                            {/if}
+                                        {/each}
+                                    {:else}
+                                        {row.oldText}
+                                    {/if}
+                                </td>
+                            </tr>
+                        {/if}
+                        {#if row.newLineNumber !== null}
+                            <tr
+                                class={`${renderable.classPrefix}diff-row ${renderable.classPrefix}diff-added`}
+                            >
+                                <td
+                                    class={`${renderable.classPrefix}diff-gutter`}
+                                    >{row.newLineNumber}</td
+                                >
+                                <td class={`${renderable.classPrefix}diff-sign`}
+                                    >+</td
+                                >
+                                <td
+                                    class={`${renderable.classPrefix}diff-content`}
+                                >
+                                    {#if row.newTokens.length > 0}
+                                        {#each row.newTokens as token}
+                                            {#if token.wrap}
+                                                <span
+                                                    class={token.className}
+                                                    style={tokenStyle(token)}
+                                                    {...token.dataAttrs}
+                                                    >{token.value}</span
+                                                >
+                                            {:else}
+                                                {token.value}
+                                            {/if}
+                                        {/each}
+                                    {:else}
+                                        {row.newText}
+                                    {/if}
+                                </td>
+                            </tr>
+                        {/if}
+                    {/if}
+                {/each}
+            </tbody>
+        </table>
+    {:else}
+        <table
+            class={`${renderable.classPrefix}diff ${renderable.classPrefix}diff-side-by-side`}
+        >
+            <tbody>
+                {#if renderable.showHeader}
+                    <tr class={`${renderable.classPrefix}diff-header`}>
+                        <th
+                            class={`${renderable.classPrefix}diff-label`}
+                            colspan="2">{renderable.oldLabel}</th
+                        >
+                        <th
+                            class={`${renderable.classPrefix}diff-label`}
+                            colspan="2">{renderable.newLabel}</th
+                        >
+                    </tr>
+                {/if}
+
+                {#each renderable.rows as row}
+                    <tr
+                        class={`${renderable.classPrefix}diff-row ${renderable.classPrefix}diff-${row.changeType}`}
+                    >
+                        <td class={`${renderable.classPrefix}diff-gutter`}
+                            >{row.oldLineNumber ?? ""}</td
+                        >
+                        <td class={`${renderable.classPrefix}diff-content`}>
+                            {#if row.oldLineNumber !== null}
+                                {#if row.oldTokens.length > 0}
+                                    {#each row.oldTokens as token}
+                                        {#if token.wrap}
+                                            <span
+                                                class={token.className}
+                                                style={tokenStyle(token)}
+                                                {...token.dataAttrs}
+                                                >{token.value}</span
+                                            >
+                                        {:else}
+                                            {token.value}
+                                        {/if}
+                                    {/each}
+                                {:else}
+                                    {row.oldText}
+                                {/if}
+                            {/if}
+                        </td>
+                        <td class={`${renderable.classPrefix}diff-gutter`}
+                            >{row.newLineNumber ?? ""}</td
+                        >
+                        <td class={`${renderable.classPrefix}diff-content`}>
+                            {#if row.newLineNumber !== null}
+                                {#if row.newTokens.length > 0}
+                                    {#each row.newTokens as token}
+                                        {#if token.wrap}
+                                            <span
+                                                class={token.className}
+                                                style={tokenStyle(token)}
+                                                {...token.dataAttrs}
+                                                >{token.value}</span
+                                            >
+                                        {:else}
+                                            {token.value}
+                                        {/if}
+                                    {/each}
+                                {:else}
+                                    {row.newText}
+                                {/if}
+                            {/if}
+                        </td>
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    {/if}
+</div>

package/dist/components/HighlightDiff.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { DiffOptions } from "tree-sitter-ts-highlight";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const HighlightDiff: $$__sveltets_2_IsomorphicComponent<{
+    oldCode: string;
+    newCode: string;
+    language: string;
+    options?: DiffOptions | undefined;
+    containerClassName?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type HighlightDiff = InstanceType<typeof HighlightDiff>;
+export default HighlightDiff;
+//# sourceMappingURL=HighlightDiff.svelte.d.ts.map

package/dist/components/HighlightDiff.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightDiff.svelte.d.ts","sourceRoot":"","sources":["../../src/components/HighlightDiff.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAyJ5D,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,aAAa;;;;;;;;kBAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Highlight } from "./components/Highlight.svelte";
+export { default as HighlightDiff } from "./components/HighlightDiff.svelte";
+export { getHighlightedHtml, getHighlightedDiffHtml, createHighlightedHtmlStore, createHighlightedDiffHtmlStore, } from "./lib/highlight";
+export type { GetHighlightedHtmlParams, GetHighlightedDiffHtmlParams, HighlightedHtmlStoreParams, HighlightedDiffHtmlStoreParams, } from "./lib/highlight";
+export type { HighlightRenderable, DiffRenderable, DiffRenderableRow, RenderToken, } from "./lib/svelte-renderer";
+export { createHighlightRenderable, createDiffRenderable, cssTextToStyleObject, } from "./lib/svelte-renderer";
+export type { Token } from "tree-sitter-ts";
+export type * from "tree-sitter-ts-highlight";
+export * from "tree-sitter-ts-highlight";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAE7E,OAAO,EACH,kBAAkB,EAClB,sBAAsB,EACtB,0BAA0B,EAC1B,8BAA8B,GACjC,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACR,wBAAwB,EACxB,4BAA4B,EAC5B,0BAA0B,EAC1B,8BAA8B,GACjC,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EACR,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,WAAW,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACH,yBAAyB,EACzB,oBAAoB,EACpB,oBAAoB,GACvB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC5C,mBAAmB,0BAA0B,CAAC;AAC9C,cAAc,0BAA0B,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as Highlight } from "./components/Highlight.svelte";
+export { default as HighlightDiff } from "./components/HighlightDiff.svelte";
+export { getHighlightedHtml, getHighlightedDiffHtml, createHighlightedHtmlStore, createHighlightedDiffHtmlStore, } from "./lib/highlight";
+export { createHighlightRenderable, createDiffRenderable, cssTextToStyleObject, } from "./lib/svelte-renderer";
+export * from "tree-sitter-ts-highlight";

package/dist/lib/highlight.d.ts

@@ -0,0 +1,29 @@
+import type { DiffOptions, HighlightOptions } from "tree-sitter-ts-highlight";
+import { type Readable } from "svelte/store";
+export interface GetHighlightedHtmlParams {
+    code: string;
+    language: string;
+    options?: Omit<HighlightOptions, "wrapInPre" | "language">;
+}
+export declare function getHighlightedHtml({ code, language, options, }: GetHighlightedHtmlParams): string;
+export interface GetHighlightedDiffHtmlParams {
+    oldCode: string;
+    newCode: string;
+    language: string;
+    options?: DiffOptions;
+}
+export declare function getHighlightedDiffHtml({ oldCode, newCode, language, options, }: GetHighlightedDiffHtmlParams): string;
+export interface HighlightedHtmlStoreParams {
+    code: Readable<string>;
+    language: Readable<string>;
+    options?: Readable<Omit<HighlightOptions, "wrapInPre" | "language"> | undefined>;
+}
+export declare function createHighlightedHtmlStore({ code, language, options, }: HighlightedHtmlStoreParams): Readable<string>;
+export interface HighlightedDiffHtmlStoreParams {
+    oldCode: Readable<string>;
+    newCode: Readable<string>;
+    language: Readable<string>;
+    options?: Readable<DiffOptions | undefined>;
+}
+export declare function createHighlightedDiffHtmlStore({ oldCode, newCode, language, options, }: HighlightedDiffHtmlStoreParams): Readable<string>;
+//# sourceMappingURL=highlight.d.ts.map

package/dist/lib/highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../src/lib/highlight.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEtD,MAAM,WAAW,wBAAwB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,UAAU,CAAC,CAAC;CAC9D;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,OAAO,GACV,EAAE,wBAAwB,GAAG,MAAM,CAMnC;AAED,MAAM,WAAW,4BAA4B;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,wBAAgB,sBAAsB,CAAC,EACnC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,GACV,EAAE,4BAA4B,GAAG,MAAM,CAEvC;AAED,MAAM,WAAW,0BAA0B;IACvC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG,SAAS,CAAC,CAAC;CACpF;AAED,wBAAgB,0BAA0B,CAAC,EACvC,IAAI,EACJ,QAAQ,EACR,OAAO,GACV,EAAE,0BAA0B,GAAG,QAAQ,CAAC,MAAM,CAAC,CAU/C;AAED,MAAM,WAAW,8BAA8B;IAC3C,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC1B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC1B,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;CAC/C;AAED,wBAAgB,8BAA8B,CAAC,EAC3C,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,GACV,EAAE,8BAA8B,GAAG,QAAQ,CAAC,MAAM,CAAC,CAiBnD"}

package/dist/lib/highlight.js

@@ -0,0 +1,29 @@
+import { highlight, highlightDiff } from "tree-sitter-ts-highlight";
+import { derived } from "svelte/store";
+export function getHighlightedHtml({ code, language, options, }) {
+    return highlight(code, language, {
+        ...options,
+        wrapInPre: false,
+        language,
+    });
+}
+export function getHighlightedDiffHtml({ oldCode, newCode, language, options, }) {
+    return highlightDiff(oldCode, newCode, language, options);
+}
+export function createHighlightedHtmlStore({ code, language, options, }) {
+    if (!options) {
+        return derived([code, language], ([$code, $language]) => getHighlightedHtml({ code: $code, language: $language }));
+    }
+    return derived([code, language, options], ([$code, $language, $options]) => getHighlightedHtml({ code: $code, language: $language, options: $options }));
+}
+export function createHighlightedDiffHtmlStore({ oldCode, newCode, language, options, }) {
+    if (!options) {
+        return derived([oldCode, newCode, language], ([$oldCode, $newCode, $language]) => getHighlightedDiffHtml({ oldCode: $oldCode, newCode: $newCode, language: $language }));
+    }
+    return derived([oldCode, newCode, language, options], ([$oldCode, $newCode, $language, $options]) => getHighlightedDiffHtml({
+        oldCode: $oldCode,
+        newCode: $newCode,
+        language: $language,
+        options: $options,
+    }));
+}

package/dist/lib/svelte-renderer.d.ts

@@ -0,0 +1,43 @@
+import type { DiffChangeType, DiffOptions, HighlightOptions } from "tree-sitter-ts-highlight";
+import { type Token } from "tree-sitter-ts";
+export interface RenderToken {
+    value: string;
+    category: Token["category"];
+    className?: string;
+    style?: Record<string, string>;
+    dataAttrs?: Record<string, string>;
+    wrap: boolean;
+}
+export interface HighlightRenderableLine {
+    lineNumber: number;
+    tokens: RenderToken[];
+}
+export interface HighlightRenderable {
+    lineNumbers: boolean;
+    dataLineAttributes: boolean;
+    lines: HighlightRenderableLine[];
+    tokens: RenderToken[];
+    preStyle: Record<string, string>;
+}
+export interface DiffRenderableRow {
+    changeType: DiffChangeType;
+    oldLineNumber: number | null;
+    newLineNumber: number | null;
+    oldText: string;
+    newText: string;
+    oldTokens: RenderToken[];
+    newTokens: RenderToken[];
+}
+export interface DiffRenderable {
+    view: "side-by-side" | "inline";
+    showHeader: boolean;
+    oldLabel: string;
+    newLabel: string;
+    rows: DiffRenderableRow[];
+    classPrefix: string;
+}
+export declare function createHighlightRenderable(code: string, language: string, options?: Omit<HighlightOptions, "wrapInPre" | "language">): HighlightRenderable;
+export declare function createDiffRenderable(oldCode: string, newCode: string, language: string, options?: DiffOptions): DiffRenderable;
+export declare function cssTextToStyleObject(cssText: string): Record<string, string>;
+export declare function styleObjectToCssText(style: Record<string, string>): string;
+//# sourceMappingURL=svelte-renderer.d.ts.map

package/dist/lib/svelte-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte-renderer.d.ts","sourceRoot":"","sources":["../../src/lib/svelte-renderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAER,cAAc,EACd,WAAW,EAEX,gBAAgB,EAEnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,IAAI,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,WAAW,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,mBAAmB;IAChC,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,iBAAiB;IAC9B,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,SAAS,EAAE,WAAW,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,cAAc,GAAG,QAAQ,CAAC;IAChC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,yBAAyB,CACrC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,OAAO,GAAE,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,UAAU,CAAM,GAC/D,mBAAmB,CAsBrB;AAED,wBAAgB,oBAAoB,CAChC,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,OAAO,GAAE,WAAgB,GAC1B,cAAc,CAgBhB;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAwB5E;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAI1E"}

package/dist/lib/svelte-renderer.js

@@ -0,0 +1,109 @@
+import { applyDecorations, createDiffModelWithTokens, enhanceSemantics, groupTokensByLine } from "tree-sitter-ts-highlight";
+import { tokenize } from "tree-sitter-ts";
+export function createHighlightRenderable(code, language, options = {}) {
+    const rawTokens = tokenize(code, language);
+    const tokens = options.semanticHighlighting ? enhanceSemantics(rawTokens) : rawTokens;
+    const classPrefix = options.classPrefix ?? "hlts-";
+    const groups = groupTokensByLine(tokens);
+    const startLine = options.startLine ?? 1;
+    const lines = groups.map((group) => ({
+        lineNumber: group.lineNumber - groups[0].lineNumber + startLine,
+        tokens: toRenderTokens(group.tokens, classPrefix, options.theme, options.decorations),
+    }));
+    return {
+        lineNumbers: options.lineNumbers ?? false,
+        dataLineAttributes: options.dataLineAttributes ?? true,
+        lines,
+        tokens: toRenderTokens(tokens, classPrefix, options.theme, options.decorations),
+        preStyle: {
+            ...(options.theme?.background ? { background: options.theme.background } : {}),
+            ...(options.theme?.foreground ? { color: options.theme.foreground } : {}),
+        },
+    };
+}
+export function createDiffRenderable(oldCode, newCode, language, options = {}) {
+    const diff = createDiffModelWithTokens(oldCode, newCode, language, options);
+    const classPrefix = options.classPrefix ?? "hlts-";
+    const rows = diff.model.rows.map((row) => toDiffRow(row, diff.oldLineTokens, diff.newLineTokens, classPrefix, options.theme, options.decorations));
+    return {
+        view: options.view ?? "side-by-side",
+        showHeader: options.showHeader ?? true,
+        oldLabel: diff.model.oldLabel,
+        newLabel: diff.model.newLabel,
+        rows,
+        classPrefix,
+    };
+}
+export function cssTextToStyleObject(cssText) {
+    const style = {};
+    for (const declaration of cssText.split(";")) {
+        const trimmed = declaration.trim();
+        if (!trimmed) {
+            continue;
+        }
+        const separatorIndex = trimmed.indexOf(":");
+        if (separatorIndex === -1) {
+            continue;
+        }
+        const property = trimmed.slice(0, separatorIndex).trim();
+        const value = trimmed.slice(separatorIndex + 1).trim();
+        if (!property || !value) {
+            continue;
+        }
+        style[property] = value;
+    }
+    return style;
+}
+export function styleObjectToCssText(style) {
+    return Object.entries(style)
+        .map(([key, value]) => `${key}: ${value}`)
+        .join("; ");
+}
+function toRenderTokens(tokens, classPrefix, theme, decorations) {
+    const decorated = decorations && decorations.length > 0
+        ? applyDecorations(tokens, decorations)
+        : tokens.map((token) => ({
+            token,
+            extraClasses: [],
+            extraAttrs: {},
+            extraStyle: undefined,
+        }));
+    return decorated.map(({ token, extraClasses, extraAttrs, extraStyle }) => {
+        const wrap = token.category !== "whitespace" && token.category !== "newline";
+        if (theme) {
+            const baseStyle = theme.styles[token.category] ?? "";
+            const style = cssTextToStyleObject([baseStyle, extraStyle].filter(Boolean).join(";"));
+            return {
+                value: token.value,
+                category: token.category,
+                style,
+                dataAttrs: extraAttrs,
+                wrap,
+            };
+        }
+        return {
+            value: token.value,
+            category: token.category,
+            className: [classPrefix + token.category, ...extraClasses].join(" "),
+            dataAttrs: extraAttrs,
+            wrap,
+        };
+    });
+}
+function toDiffRow(row, oldTokenMap, newTokenMap, classPrefix, theme, decorations) {
+    const oldTokens = row.oldLineNumber === null
+        ? []
+        : toRenderTokens(oldTokenMap.get(row.oldLineNumber) ?? [], classPrefix, theme, decorations);
+    const newTokens = row.newLineNumber === null
+        ? []
+        : toRenderTokens(newTokenMap.get(row.newLineNumber) ?? [], classPrefix, theme, decorations);
+    return {
+        changeType: row.changeType,
+        oldLineNumber: row.oldLineNumber,
+        newLineNumber: row.newLineNumber,
+        oldText: row.oldText,
+        newText: row.newText,
+        oldTokens,
+        newTokens,
+    };
+}

package/dist/test/highlight.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=highlight.test.d.ts.map

package/dist/test/highlight.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.test.d.ts","sourceRoot":"","sources":["../../src/test/highlight.test.ts"],"names":[],"mappings":""}

package/dist/test/highlight.test.js

@@ -0,0 +1,63 @@
+import { get, writable } from "svelte/store";
+import { createHighlightedDiffHtmlStore, createHighlightedHtmlStore, getHighlightedDiffHtml, getHighlightedHtml, } from "../lib/highlight";
+const highlightMock = jest.fn();
+const highlightDiffMock = jest.fn();
+jest.mock("tree-sitter-ts-highlight", () => ({
+    highlight: (...args) => highlightMock(...args),
+    highlightDiff: (...args) => highlightDiffMock(...args),
+}));
+describe("highlight utilities", () => {
+    beforeEach(() => {
+        highlightMock.mockReset();
+        highlightDiffMock.mockReset();
+    });
+    test("getHighlightedHtml forwards args and enforces wrapInPre=false", () => {
+        highlightMock.mockReturnValue("<span>ok</span>");
+        const html = getHighlightedHtml({
+            code: "const n = 1;",
+            language: "typescript",
+            options: { lineNumbers: true },
+        });
+        expect(html).toBe("<span>ok</span>");
+        expect(highlightMock).toHaveBeenCalledWith("const n = 1;", "typescript", {
+            lineNumbers: true,
+            wrapInPre: false,
+            language: "typescript",
+        });
+    });
+    test("getHighlightedDiffHtml forwards args", () => {
+        highlightDiffMock.mockReturnValue("<div>diff</div>");
+        const html = getHighlightedDiffHtml({
+            oldCode: "a",
+            newCode: "b",
+            language: "typescript",
+            options: { view: "inline" },
+        });
+        expect(html).toBe("<div>diff</div>");
+        expect(highlightDiffMock).toHaveBeenCalledWith("a", "b", "typescript", { view: "inline" });
+    });
+    test("createHighlightedHtmlStore reacts to code/language changes", () => {
+        highlightMock.mockImplementation((code, language) => `${language}:${code}`);
+        const code = writable("const n = 1;");
+        const language = writable("typescript");
+        const store = createHighlightedHtmlStore({ code, language });
+        expect(get(store)).toBe("typescript:const n = 1;");
+        code.set("const n = 2;");
+        expect(get(store)).toBe("typescript:const n = 2;");
+        language.set("javascript");
+        expect(get(store)).toBe("javascript:const n = 2;");
+    });
+    test("createHighlightedDiffHtmlStore reacts with optional options store", () => {
+        highlightDiffMock.mockImplementation((oldCode, newCode, language, options) => `${language}:${oldCode}->${newCode}:${options?.view ?? "side-by-side"}`);
+        const oldCode = writable("a");
+        const newCode = writable("b");
+        const language = writable("typescript");
+        const options = writable({ view: "inline" });
+        const store = createHighlightedDiffHtmlStore({ oldCode, newCode, language, options });
+        expect(get(store)).toBe("typescript:a->b:inline");
+        newCode.set("c");
+        expect(get(store)).toBe("typescript:a->c:inline");
+        options.set(undefined);
+        expect(get(store)).toBe("typescript:a->c:side-by-side");
+    });
+});

package/dist/test/svelte-renderer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=svelte-renderer.test.d.ts.map

package/dist/test/svelte-renderer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte-renderer.test.d.ts","sourceRoot":"","sources":["../../src/test/svelte-renderer.test.ts"],"names":[],"mappings":""}

package/dist/test/svelte-renderer.test.js

@@ -0,0 +1,94 @@
+import { createDiffRenderable, createHighlightRenderable, cssTextToStyleObject, styleObjectToCssText, } from "../lib/svelte-renderer";
+const tokenizeMock = jest.fn();
+const enhanceSemanticsMock = jest.fn();
+const groupTokensByLineMock = jest.fn();
+const applyDecorationsMock = jest.fn();
+const createDiffModelWithTokensMock = jest.fn();
+jest.mock("tree-sitter-ts", () => ({
+    tokenize: (...args) => tokenizeMock(...args),
+}));
+jest.mock("tree-sitter-ts-highlight", () => ({
+    applyDecorations: (...args) => applyDecorationsMock(...args),
+    enhanceSemantics: (...args) => enhanceSemanticsMock(...args),
+    groupTokensByLine: (...args) => groupTokensByLineMock(...args),
+    createDiffModelWithTokens: (...args) => createDiffModelWithTokensMock(...args),
+}));
+describe("svelte renderer utilities", () => {
+    beforeEach(() => {
+        tokenizeMock.mockReset();
+        enhanceSemanticsMock.mockReset();
+        groupTokensByLineMock.mockReset();
+        applyDecorationsMock.mockReset();
+        createDiffModelWithTokensMock.mockReset();
+    });
+    test("cssTextToStyleObject parses valid declarations", () => {
+        expect(cssTextToStyleObject("color: red; background: #000; invalid; :missing; opacity: 0.8"))
+            .toEqual({ color: "red", background: "#000", opacity: "0.8" });
+    });
+    test("styleObjectToCssText serializes style object", () => {
+        expect(styleObjectToCssText({ color: "red", background: "#000" })).toBe("color: red; background: #000");
+    });
+    test("createHighlightRenderable supports semantic highlighting and themes", () => {
+        const rawTokens = [
+            { value: "const", category: "keyword" },
+            { value: " ", category: "whitespace" },
+        ];
+        const semanticTokens = [{ value: "const", category: "keyword" }];
+        tokenizeMock.mockReturnValue(rawTokens);
+        enhanceSemanticsMock.mockReturnValue(semanticTokens);
+        groupTokensByLineMock.mockReturnValue([
+            { lineNumber: 3, tokens: semanticTokens },
+            { lineNumber: 4, tokens: semanticTokens },
+        ]);
+        applyDecorationsMock.mockImplementation((tokens) => tokens.map((token) => ({
+            token,
+            extraClasses: ["extra"],
+            extraAttrs: { "data-test": "1" },
+            extraStyle: "font-weight: 700",
+        })));
+        const renderable = createHighlightRenderable("const a = 1;", "typescript", {
+            semanticHighlighting: true,
+            startLine: 10,
+            decorations: [{ line: 1 }],
+            theme: {
+                name: "test-theme",
+                background: "#111",
+                foreground: "#eee",
+                styles: { keyword: "color: #f00" },
+            },
+        });
+        expect(tokenizeMock).toHaveBeenCalledWith("const a = 1;", "typescript");
+        expect(enhanceSemanticsMock).toHaveBeenCalledWith(rawTokens);
+        expect(renderable.lines[0].lineNumber).toBe(10);
+        expect(renderable.lines[1].lineNumber).toBe(11);
+        expect(renderable.tokens[0].style).toEqual({ color: "#f00", "font-weight": "700" });
+        expect(renderable.tokens[0].dataAttrs).toEqual({ "data-test": "1" });
+        expect(renderable.preStyle).toEqual({ background: "#111", color: "#eee" });
+    });
+    test("createDiffRenderable builds rows and applies defaults", () => {
+        createDiffModelWithTokensMock.mockReturnValue({
+            model: {
+                oldLabel: "Old",
+                newLabel: "New",
+                rows: [
+                    {
+                        changeType: "modified",
+                        oldLineNumber: 1,
+                        newLineNumber: 2,
+                        oldText: "a",
+                        newText: "b",
+                    },
+                ],
+            },
+            oldLineTokens: new Map([[1, [{ value: "a", category: "identifier" }]]]),
+            newLineTokens: new Map([[2, [{ value: "b", category: "identifier" }]]]),
+        });
+        const diff = createDiffRenderable("a", "b", "typescript", {});
+        expect(createDiffModelWithTokensMock).toHaveBeenCalledWith("a", "b", "typescript", {});
+        expect(diff.view).toBe("side-by-side");
+        expect(diff.showHeader).toBe(true);
+        expect(diff.classPrefix).toBe("hlts-");
+        expect(diff.rows).toHaveLength(1);
+        expect(diff.rows[0].oldTokens[0].className).toBe("hlts-identifier");
+    });
+});

package/package.json

@@ -0,0 +1,61 @@
+{
+    "name": "tree-sitter-ts-highlight-svelte",
+    "version": "0.1.2",
+    "description": "Native Svelte wrapper components for tree-sitter-ts-highlight.",
+    "type": "module",
+    "svelte": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "svelte": "./dist/index.js",
+            "import": "./dist/index.js",
+            "default": "./dist/index.js"
+        }
+    },
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "svelte-package --input src --output dist",
+        "prepack": "npm run build",
+        "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+        "test": "jest",
+        "test:watch": "jest --watch"
+    },
+    "peerDependencies": {
+        "svelte": "^5.0.0",
+        "tree-sitter-ts": "^0.1.2",
+        "tree-sitter-ts-highlight": "^0.1.2"
+    },
+    "devDependencies": {
+        "@sveltejs/package": "^2.3.7",
+        "@swc/core": "^1.15.11",
+        "@swc/jest": "^0.2.39",
+        "@types/jest": "^30.0.0",
+        "jest": "^30.2.0",
+        "svelte": "^5.38.10",
+        "svelte-check": "^4.3.1",
+        "typescript": "^5.4.0"
+    },
+    "publishConfig": {
+        "access": "public",
+        "provenance": false
+    },
+    "keywords": [
+        "svelte",
+        "tree-sitter",
+        "syntax-highlighting",
+        "typescript",
+        "code-highlighting"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/hieutran512/tree-sitter-ts-highlight-svelte"
+    },
+    "license": "MIT",
+    "engines": {
+        "node": ">=18.0.0"
+    }
+}