Remove nested package imports (#168)

Fixes: #169 `@llm-ui/react/{core,examples,throttle}` -> `@llm-ui/react` `@llm-ui/code/shikiBundles/{allLangs,allThemes}` -> `@llm-ui/code` Removes exports more than one level deep (e.g. `@llm-ui/react/core`) since they don't work with older moduleResolution settings in TypeScript (which react-script uses by default).
richardgill · May 12, 2024 · 999004c · 999004c
1 parent 9f452fb
commit 999004c
Show file tree

Hide file tree

Showing 35 changed files with 98 additions and 119 deletions.
diff --git a/.changeset/sweet-bats-own.md b/.changeset/sweet-bats-own.md
@@ -0,0 +1,9 @@
+---
+"@llm-ui/code": minor
+"@llm-ui/react": minor
+---
+
+@llm-ui/react/{core,examples,throttle} -> @llm-ui/react
+@llm-ui/code/shikiBundles/{allLangs,allThemes} -> @llm-ui/code
+
+Removes exports more than one level deep (e.g. @llm-ui/react/core) since they don't work with older moduleResolution settings in TypeScript (which react-script uses by default).
diff --git a/apps/www/src/components/examples/Buttons.tsx b/apps/www/src/components/examples/Buttons.tsx
@@ -4,7 +4,7 @@ import {
   findPartialButtons,
   parseCompleteButtons,
 } from "@llm-ui/buttons";
-import type { LLMOutputBlock, LLMOutputComponent } from "@llm-ui/react/core";
+import type { LLMOutputBlock, LLMOutputComponent } from "@llm-ui/react";
 import { Button } from "../ui/Button";
 
 type OnClick = (buttonText: string) => void;

diff --git a/apps/www/src/components/examples/CodeBlock.tsx b/apps/www/src/components/examples/CodeBlock.tsx
@@ -5,10 +5,7 @@ import {
   findPartialCodeBlock,
   parseCompleteMarkdownCodeBlock,
 } from "@llm-ui/code";
-import {
-  type LLMOutputBlock,
-  type LLMOutputComponent,
-} from "@llm-ui/react/core";
+import { type LLMOutputBlock, type LLMOutputComponent } from "@llm-ui/react";
 import { CodeBlock } from "../ui/custom/CodeBlock";
 
 const ShikiBlockComponent: LLMOutputComponent = ({ blockMatch }) => {

diff --git a/apps/www/src/components/examples/Example.tsx b/apps/www/src/components/examples/Example.tsx
@@ -3,18 +3,16 @@ import { multipleStars } from "@/animations/stars";
 import { cn, delay } from "@/lib/utils";
 import { markdownLookBack } from "@llm-ui/markdown";
 import {
+  stringToTokenArray,
   useLLMOutput,
+  useStreamTokenArray,
   type BlockMatch,
   type LLMOutputBlock,
-  type UseLLMOutputReturn,
-} from "@llm-ui/react/core";
-import {
-  stringToTokenArray,
-  useStreamTokenArray,
   type TokenWithDelay,
+  type UseLLMOutputReturn,
   type UseStreamTokenArrayOptions,
   type UseStreamWithProbabilitiesOptions,
-} from "@llm-ui/react/examples";
+} from "@llm-ui/react";
 import React, {
   Fragment,
   useCallback,

diff --git a/apps/www/src/components/examples/ExampleMdx.tsx b/apps/www/src/components/examples/ExampleMdx.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import type { UseStreamWithProbabilitiesOptions } from "@llm-ui/react/examples";
+import type { UseStreamWithProbabilitiesOptions } from "@llm-ui/react";
 import {
   ExampleSideBySide as ExampleSideBySideOriginal,
   ExampleTabs as ExampleTabsOriginal,

diff --git a/apps/www/src/components/examples/Markdown.tsx b/apps/www/src/components/examples/Markdown.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import { type LLMOutputComponent } from "@llm-ui/react/core";
+import { type LLMOutputComponent } from "@llm-ui/react";
 import ReactMarkdown, { type Options } from "react-markdown";
 import remarkGfm from "remark-gfm";
 

diff --git a/apps/www/src/components/examples/contants.ts b/apps/www/src/components/examples/contants.ts
@@ -1,4 +1,4 @@
-import type { ProbabilityOptions } from "@llm-ui/react/examples";
+import type { ProbabilityOptions } from "@llm-ui/react";
 
 export const defaultExampleProbs: ProbabilityOptions = {
   delayMsProbabilities: [{ delayMs: 90, prob: 1 }],

diff --git a/apps/www/src/components/examples/examples.ts b/apps/www/src/components/examples/examples.ts
@@ -1,8 +1,5 @@
 import { HIDDEN_CHAR } from "@/constants/constants";
-import {
-  stringToTokenArray,
-  type TokenWithDelay,
-} from "@llm-ui/react/examples";
+import { stringToTokenArray, type TokenWithDelay } from "@llm-ui/react";
 import { defaultExampleProbs } from "./contants";
 
 const ctaBeforePause = `# llm-ui

diff --git a/apps/www/src/components/examples/throttle.ts b/apps/www/src/components/examples/throttle.ts
@@ -1,4 +1,4 @@
-import { throttleBasic } from "@llm-ui/react/throttle";
+import { throttleBasic } from "@llm-ui/react";
 
 export type ThrottleType = "buffered" | "low-lag";
 

diff --git a/apps/www/src/components/shikiConfig.ts b/apps/www/src/components/shikiConfig.ts
@@ -1,6 +1,5 @@
 import type { ShikiProps } from "@llm-ui/code";
-import { loadHighlighter } from "@llm-ui/code";
-import { allLangs, allLangsAlias } from "@llm-ui/code/shikiBundles/allLangs";
+import { allLangs, allLangsAlias, loadHighlighter } from "@llm-ui/code";
 import { getHighlighterCore } from "shiki/core";
 import githubDark from "shiki/themes/github-dark.mjs";
 import githubLight from "shiki/themes/github-light.mjs";

diff --git a/apps/www/src/content/docs/advanced/example-hooks.mdx b/apps/www/src/content/docs/advanced/example-hooks.mdx
@@ -10,7 +10,7 @@ Example:
 <CodeBlockInline>
 
 ```ts
-import { useStreamExample } from "@llm-ui/react/examples";
+import { useStreamExample } from "@llm-ui/react";
 
 const Example = () => {
   const example = "# Hello llm-ui!";

diff --git a/apps/www/src/content/docs/advanced/throttle-functions.mdx b/apps/www/src/content/docs/advanced/throttle-functions.mdx
@@ -36,7 +36,7 @@ llm-ui comes with a built-in throttle function:
 `throttleBasic` is the default throttle function for llm-ui.
 
 ```ts
-import { throttleBasic } from "@llm-ui/react/throttle";
+import { throttleBasic } from "@llm-ui/react";
 
 const throttle = throttleBasic({
   readAheadChars: 10,

diff --git a/apps/www/src/content/docs/blocks/code.mdx b/apps/www/src/content/docs/blocks/code.mdx
@@ -158,7 +158,7 @@ Change the import:
 
 ```tsx
 // Before:
-import { allThemes } from "@llm-ui/code/shikiBundles/allThemes";
+import { allThemes } from "@llm-ui/code";
 
 // After:
 import githubDark from "shiki/themes/github-dark.mjs";

diff --git a/apps/www/src/content/docs/llm-output-hook.mdx b/apps/www/src/content/docs/llm-output-hook.mdx
@@ -16,7 +16,7 @@ Example:
 <CodeBlockInline>
 
 ```typescript
-import { useLLMOutput } from "@llm-ui/react/core";
+import { useLLMOutput } from "@llm-ui/react";
 
 const { blockMatches } = useLLMOutput({
   llmOutput: "llm output",

diff --git a/apps/www/src/snippets/markdownBlock.ts b/apps/www/src/snippets/markdownBlock.ts
@@ -37,9 +37,9 @@ export default Example`.replaceAll("STEP1", step1Replace);
 
 const step2Imports = `import {
   useLLMOutput,
-} from "@llm-ui/react/core";
+} from "@llm-ui/react";
 import { markdownLookBack } from "@llm-ui/markdown";
-import { useStreamExample } from "@llm-ui/react/examples";
+import { useStreamExample } from "@llm-ui/react";
 `;
 
 export const markdownStep1 = markdownQuickStart;
@@ -48,12 +48,12 @@ export const markdownStep2 = `${step2Imports}\n\n${getLlmUiOutputUsage("// from
 
 export const fullImports = `import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { type LLMOutputComponent } from "@llm-ui/react/core";
 import {
   useLLMOutput,
-} from "@llm-ui/react/core";
-import { markdownLookBack } from "@llm-ui/markdown";
-import { useStreamExample } from "@llm-ui/react/examples";`;
+  useStreamExample,
+  type LLMOutputComponent
+} from "@llm-ui/react";
+import { markdownLookBack } from "@llm-ui/markdown";`;
 
 const step1Comment = "// -------Step 1: Create a markdown component-------";
 const step2Comment = "// -------Step 2: Render markdown with llm-ui-------";

diff --git a/apps/www/src/snippets/quickStart.ts b/apps/www/src/snippets/quickStart.ts
@@ -1,6 +1,6 @@
 export const markdownImports = `import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { type LLMOutputComponent } from "@llm-ui/react/core";
+import { type LLMOutputComponent } from "@llm-ui/react";
 `;
 
 export const markdownComponent = `// Customize this component with your own styling
@@ -12,12 +12,16 @@ const MarkdownComponent: LLMOutputComponent = ({ blockMatch }) => {
 export const markdownQuickStart = `${markdownImports}\n\n${markdownComponent}`;
 
 export const codeblockImports = `import type { CodeToHtmlOptions } from "@llm-ui/code";
-import { loadHighlighter, useCodeBlockToHtml } from "@llm-ui/code";
-import { allLangs, allLangsAlias } from "@llm-ui/code/shikiBundles/allLangs";
-// WARNING: Importing allThemes increases your bundle size
-// see: https://llm-ui.com/docs/blocks/code#bundle-size
-import { allThemes } from "@llm-ui/code/shikiBundles/allThemes";
-import { type LLMOutputComponent } from "@llm-ui/react/core";
+import {
+  loadHighlighter,
+  useCodeBlockToHtml,
+  allLangs,
+  allLangsAlias,
+  // WARNING: Importing allThemes increases your bundle size
+  // see: https://llm-ui.com/docs/blocks/code#bundle-size
+  allThemes
+} from "@llm-ui/code";
+import { type LLMOutputComponent } from "@llm-ui/react";
 import parseHtml from "html-react-parser";
 import { getHighlighterCore } from "shiki/core";
 import getWasm from "shiki/wasm";`;
@@ -61,8 +65,7 @@ export const llmUiOutputImports = `import {
   findPartialCodeBlock,
 } from "@llm-ui/code";
 import { markdownLookBack } from "@llm-ui/markdown";
-import { useLLMOutput } from "@llm-ui/react/core";
-import { useStreamExample } from "@llm-ui/react/examples";`;
+import { useLLMOutput, useStreamExample } from "@llm-ui/react";`;
 
 export const introExampleHidden = `## Python
 
@@ -148,12 +151,14 @@ import {
   findPartialCodeBlock,
   loadHighlighter,
   useCodeBlockToHtml,
+  allLangs,
+  allLangsAlias,
+  // WARNING: Importing allThemes will increase your bundle size
+  // See: https://llm-ui.com/docs/blocks/code#bundle-size
+  allThemes,
 } from "@llm-ui/code";
-import { allLangs, allLangsAlias } from "@llm-ui/code/shikiBundles/allLangs";
-import { allThemes } from "@llm-ui/code/shikiBundles/allThemes"; // WARNING: This import will increase your bundle size, see: https://llm-ui.com/docs/blocks/code#bundle-size
 import { markdownLookBack } from "@llm-ui/markdown";
-import { useLLMOutput, type LLMOutputComponent } from "@llm-ui/react/core";
-import { useStreamExample } from "@llm-ui/react/examples";
+import { useLLMOutput, type LLMOutputComponent, useStreamExample } from "@llm-ui/react";
 import parseHtml from "html-react-parser";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";

diff --git a/examples/nextjs/src/app/examples/buttons/page.tsx b/examples/nextjs/src/app/examples/buttons/page.tsx
@@ -6,8 +6,11 @@ import {
   parseCompleteButtons,
 } from "@llm-ui/buttons";
 import { markdownLookBack } from "@llm-ui/markdown";
-import { useLLMOutput, type LLMOutputComponent } from "@llm-ui/react/core";
-import { useStreamExample } from "@llm-ui/react/examples";
+import {
+  useLLMOutput,
+  useStreamExample,
+  type LLMOutputComponent,
+} from "@llm-ui/react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 

diff --git a/examples/nextjs/src/app/examples/code-block/example.tsx b/examples/nextjs/src/app/examples/code-block/example.tsx
@@ -1,17 +1,23 @@
 "use client";
 import type { CodeToHtmlOptions } from "@llm-ui/code";
 import {
+  allLangs,
+  allLangsAlias,
+  // WARNING: Importing allThemes will increase your bundle size
+  // see: https://llm-ui.com/docs/blocks/code#bundle-size
+  allThemes,
   codeBlockLookBack,
   findCompleteCodeBlock,
   findPartialCodeBlock,
   loadHighlighter,
   useCodeBlockToHtml,
 } from "@llm-ui/code";
-import { allLangs, allLangsAlias } from "@llm-ui/code/shikiBundles/allLangs";
-import { allThemes } from "@llm-ui/code/shikiBundles/allThemes"; // WARNING: This import will increase your bundle size, see: https://llm-ui.com/docs/blocks/code#bundle-size
 import { markdownLookBack } from "@llm-ui/markdown";
-import { useLLMOutput, type LLMOutputComponent } from "@llm-ui/react/core";
-import { useStreamExample } from "@llm-ui/react/examples";
+import {
+  useLLMOutput,
+  useStreamExample,
+  type LLMOutputComponent,
+} from "@llm-ui/react";
 import parseHtml from "html-react-parser";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";

diff --git a/examples/nextjs/src/app/examples/markdown/page.tsx b/examples/nextjs/src/app/examples/markdown/page.tsx
@@ -1,7 +1,10 @@
 "use client";
 import { markdownLookBack } from "@llm-ui/markdown";
-import { useLLMOutput, type LLMOutputComponent } from "@llm-ui/react/core";
-import { useStreamExample } from "@llm-ui/react/examples";
+import {
+  useLLMOutput,
+  useStreamExample,
+  type LLMOutputComponent,
+} from "@llm-ui/react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 

diff --git a/examples/nextjs/src/app/examples/openai/example.tsx b/examples/nextjs/src/app/examples/openai/example.tsx
@@ -2,16 +2,19 @@
 import { MARKDOWN_PROMPT, NEWLINE } from "@/constants";
 import type { CodeToHtmlOptions } from "@llm-ui/code";
 import {
+  allLangs,
+  allLangsAlias,
+  // WARNING: Importing allThemes will increase your bundle size
+  // see: https://llm-ui.com/docs/blocks/code#bundle-size
+  allThemes,
   codeBlockLookBack,
   findCompleteCodeBlock,
   findPartialCodeBlock,
   loadHighlighter,
   useCodeBlockToHtml,
 } from "@llm-ui/code";
-import { allLangs, allLangsAlias } from "@llm-ui/code/shikiBundles/allLangs";
-import { allThemes } from "@llm-ui/code/shikiBundles/allThemes"; // WARNING: This import will increase your bundle size, see: https://llm-ui.com/docs/blocks/code#bundle-size
 import { markdownLookBack } from "@llm-ui/markdown";
-import { useLLMOutput, type LLMOutputComponent } from "@llm-ui/react/core";
+import { useLLMOutput, type LLMOutputComponent } from "@llm-ui/react";
 import parseHtml from "html-react-parser";
 import { useCallback, useState } from "react";
 import ReactMarkdown from "react-markdown";

diff --git a/packages/buttons/src/lookBack.test.ts b/packages/buttons/src/lookBack.test.ts
@@ -1,4 +1,4 @@
-import { LookBack } from "@llm-ui/react/core";
+import { LookBack } from "@llm-ui/react";
 import { describe, expect, it } from "vitest";
 import { buttonsLookBack } from "./lookBack";
 

diff --git a/packages/buttons/src/lookBack.ts b/packages/buttons/src/lookBack.ts
@@ -1,4 +1,4 @@
-import { LookBackFunction } from "@llm-ui/react/core";
+import { LookBackFunction } from "@llm-ui/react";
 import { Button, parseCompleteButtons } from "./parse";
 
 const buttonsToVisibleText = (buttons: string[] | undefined): string =>

diff --git a/packages/buttons/src/matchers.ts b/packages/buttons/src/matchers.ts
@@ -1,4 +1,4 @@
-import { LLMOutputMatcher } from "@llm-ui/react/core";
+import { LLMOutputMatcher } from "@llm-ui/react";
 import { regexMatcher } from "@llm-ui/shared";
 
 export const findCompleteButtons = (): LLMOutputMatcher => {

diff --git a/packages/code/package.json b/packages/code/package.json
@@ -16,26 +16,6 @@
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
-    },
-    "./shikiBundles/allLangs": {
-      "import": {
-        "types": "./dist/shikiBundles/allLangs.d.ts",
-        "default": "./dist/shikiBundles/allLangs.js"
-      },
-      "require": {
-        "types": "./dist/shikiBundles/allLangs.d.cts",
-        "default": "./dist/shikiBundles/allLangs.cjs"
-      }
-    },
-    "./shikiBundles/allThemes": {
-      "import": {
-        "types": "./dist/shikiBundles/allThemes.d.ts",
-        "default": "./dist/shikiBundles/allThemes.js"
-      },
-      "require": {
-        "types": "./dist/shikiBundles/allThemes.d.cts",
-        "default": "./dist/shikiBundles/allThemes.cjs"
-      }
     }
   },
   "files": [

diff --git a/packages/code/src/index.ts b/packages/code/src/index.ts
@@ -23,3 +23,7 @@ export type { UseCodeToHtmlParams } from "./hooks/useCodeToHtml";
 export { loadHighlighter } from "./hooks/useLoadHighlighter";
 
 export type { CodeToHtmlOptions, LLMUIHighlighter, ShikiProps } from "./types";
+
+export { allLangs, allLangsAlias } from "./shikiBundles/allLangs";
+
+export { allThemes } from "./shikiBundles/allThemes";
diff --git a/packages/code/src/lookBack.test.ts b/packages/code/src/lookBack.test.ts
@@ -1,4 +1,4 @@
-import { LookBack } from "@llm-ui/react/core";
+import { LookBack } from "@llm-ui/react";
 import { describe, expect, it } from "vitest";
 import { codeBlockLookBack } from "./lookBack";
 import { CodeBlockOptions } from "./options";

diff --git a/packages/code/src/lookBack.ts b/packages/code/src/lookBack.ts
@@ -1,4 +1,4 @@
-import { LookBackFunction } from "@llm-ui/react/core";
+import { LookBackFunction } from "@llm-ui/react";
 import { CodeBlockOptions, getOptions } from "./options";
 import {
   parseCompleteMarkdownCodeBlock,

diff --git a/packages/code/src/matchers.test.ts b/packages/code/src/matchers.test.ts
@@ -1,4 +1,4 @@
-import { MaybeLLMOutputMatch } from "@llm-ui/react/core";
+import { MaybeLLMOutputMatch } from "@llm-ui/react";
 import { describe, expect, it } from "vitest";
 import { findCompleteCodeBlock, findPartialCodeBlock } from "./matchers";
 import { CodeBlockOptions } from "./options";

diff --git a/packages/code/src/matchers.ts b/packages/code/src/matchers.ts
@@ -1,4 +1,4 @@
-import { LLMOutputMatcher } from "@llm-ui/react/core";
+import { LLMOutputMatcher } from "@llm-ui/react";
 import { CodeBlockOptions, getOptions } from "./options";
 
 import { regexMatcher } from "@llm-ui/shared";

diff --git a/packages/code/tsup.config.ts b/packages/code/tsup.config.ts
@@ -1,11 +1,7 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: [
-    "src/index.ts",
-    "src/shikiBundles/allLangs.ts",
-    "src/shikiBundles/allThemes.ts",
-  ],
+  entry: ["src/index.ts"],
   splitting: false,
   sourcemap: true,
   clean: true,

diff --git a/packages/markdown/src/lookBack.ts b/packages/markdown/src/lookBack.ts
@@ -1,4 +1,4 @@
-import { LookBackFunction } from "@llm-ui/react/core";
+import { LookBackFunction } from "@llm-ui/react";
 import {
   markdownToVisibleText,
   markdownWithVisibleChars,