docs: change npm package name

Author: justin-schroeder

README.md

@@ -2,11 +2,11 @@
 
 [![Tests](https://github.com/formkit/jsonreader/actions/workflows/tests.yml/badge.svg)](https://github.com/formkit/jsonreader/actions/workflows/tests.yml)
 
-This is a monorepo for the `jsonreader` package and its documentation site.
+This is a monorepo for the `@formkit/jsonreader` package and its documentation site.
 
 ## About jsonreader
 
-`jsonreader` is a specialized utility for processing JSON data from streams in real-time. Unlike traditional JSON parsers that require the entire payload before processing, `jsonreader` allows you to:
+`@formkit/jsonreader` is a specialized utility for processing JSON data from streams in real-time. Unlike traditional JSON parsers that require the entire payload before processing, `@formkit/jsonreader` allows you to:
 
 - Process JSON progressively as it arrives from a stream
 - Extract specific properties as soon as they become available
@@ -37,7 +37,7 @@ Each commercial project requires a separate license. See the [documentation](htt
 ## Quick Start
 
 ```typescript
-import { jsonReader, jsonPathReader } from 'jsonreader';
+import { jsonReader, jsonPathReader } from '@formkit/jsonreader';
 
 // Get a stream reader (e.g. from fetch API)
 const response = await fetch('https://api.example.com/large-data.json');

package.json

@@ -2,11 +2,11 @@
   "name": "jsonreader-monorepo",
   "version": "1.0.1",
   "private": true,
-  "description": "A monorepo for the jsonreader package and its documentation",
+  "description": "A monorepo for the @formkit/jsonreader package and its documentation",
   "scripts": {
     "build": "pnpm -r build",
     "dev:docs": "pnpm --filter docs dev",
-    "dev:jsonreader": "pnpm --filter jsonreader dev",
+    "dev:jsonreader": "pnpm --filter @formkit/jsonreader dev",
     "test": "pnpm -r test",
     "lint": "pnpm -r lint",
     "release": "pnpm build && bumpp -r && cd packages/jsonreader && pnpm publish"

packages/docs/components/DocFooter.vue

@@ -49,7 +49,7 @@
             </li>
             <li>
               <a
-                href="https://www.npmjs.com/package/jsonreader"
+                href="https://www.npmjs.com/package/@formkit/jsonreader"
                 target="_blank"
                 class="text-gray-600 hover:text-accent-1 transition-colors"
                 >npm Package</a
@@ -60,7 +60,7 @@
         <div class="fade-in">
           <h3 class="text-xl font-bold text-black mb-6">About</h3>
           <p class="text-gray-600 mb-6">
-            jsonreader is a utility for processing JSON data from streams in
+            @formkit/jsonreader is a utility for processing JSON data from streams in
             real-time, optimized for AI tool calls and large API responses.
           </p>
           <div class="flex items-center space-x-4">

packages/docs/package.json

@@ -24,6 +24,6 @@
     "vue-router": "^4.2.5"
   },
   "dependencies": {
-    "jsonreader": "workspace:*"
+    "@formkit/jsonreader": "workspace:*"
   }
 }

packages/docs/pages/docs/api-reference.vue

@@ -28,7 +28,7 @@
             <pre
               class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
             >
-<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-accent">for</span> <span class="text-accent">await</span> (<span class="text-accent">const</span> partialData <span class="text-accent">of</span> jsonReader(reader)) {
   <span class="text-gray-400">// Process the partial data</span>
@@ -184,7 +184,7 @@
             <pre
               class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
             >
-<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-accent">for</span> <span class="text-accent">await</span> (<span class="text-accent">const</span> partialData <span class="text-accent">of</span> jsonReader(reader, {
   <span class="text-gray-400">// Only yield when these properties are present</span>
@@ -231,7 +231,7 @@
             <pre
               class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
             >
-<span class="text-accent">import</span> { jsonPathReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonPathReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-accent">const</span> reader = response.body.getReader();
 <span class="text-accent">const</span> paths = [
@@ -404,7 +404,7 @@
             <pre
               class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
             >
-<span class="text-accent">import</span> { jsonPathReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonPathReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-accent">async</span> <span class="text-accent">function</span> <span class="text-white">searchWithRealtimeResults</span>() {
   <span class="text-accent">const</span> response = <span class="text-accent">await</span> fetch(<span class="text-white">'https://api.search-service.com/search?q=jsonreader'</span>);

packages/docs/pages/docs/examples.vue

@@ -26,7 +26,7 @@
           </div>
           <div>
             <p class="text-black">
-              Practical examples showing how to use jsonreader in real-world
+              Practical examples showing how to use @formkit/jsonreader in real-world
               scenarios.
             </p>
           </div>
@@ -37,9 +37,9 @@
         <h2 class="doc-heading-2 fade-in-delayed">Processing AI Tool Calls</h2>
 
         <p class="doc-text fade-in-delayed">
-          One of the most powerful use cases for jsonreader is processing JSON
+          One of the most powerful use cases for @formkit/jsonreader is processing JSON
           responses from AI services. These responses can be large and take time
-          to generate, but with jsonreader, you can start processing the data as
+          to generate, but with @formkit/jsonreader, you can start processing the data as
           it arrives.
         </p>
 
@@ -65,7 +65,7 @@
             <pre
               class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
             >
-<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-accent">async</span> <span class="text-accent">function</span> <span class="text-white">processAIFunctionCall</span>() {
   <span class="text-gray-400">// Call an AI model with function calling enabled</span>
@@ -158,7 +158,7 @@
             <pre
               class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
             >
-<span class="text-accent">import</span> { jsonPathReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonPathReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-accent">async</span> <span class="text-accent">function</span> <span class="text-white">progressiveProfileLoader</span>() {
   <span class="text-accent">const</span> response = <span class="text-accent">await</span> fetch(<span class="text-white">'/api/user/profile'</span>);
@@ -218,7 +218,7 @@
         <h2 class="doc-heading-2">Processing Large Files</h2>
 
         <p class="doc-text">
-          jsonreader is great for processing large JSON files without loading
+          @formkit/jsonreader is great for processing large JSON files without loading
           them entirely into memory:
         </p>
 
@@ -238,7 +238,7 @@
               class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
             >
 <span class="text-accent">import</span> { createReadStream } <span class="text-accent">from</span> <span class="text-white">'fs'</span>;
-<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-accent">async</span> <span class="text-accent">function</span> <span class="text-white">processLargeJsonFile</span>(filePath) {
   <span class="text-gray-400">// Create a file stream</span>

packages/docs/pages/docs/getting-started.vue

@@ -3,7 +3,7 @@
     <div class="absolute inset-0 noise-bg opacity-40"></div>
     <div class="relative z-10">
       <h1 class="doc-heading-1 shimmer-effect">
-        Getting Started with jsonreader
+        Getting Started with @formkit/jsonreader
       </h1>
 
       <div
@@ -28,7 +28,7 @@
           </div>
           <div>
             <p class="text-black">
-              jsonreader is a specialized utility for processing JSON data from
+              @formkit/jsonreader is a specialized utility for processing JSON data from
               streams in real-time, with a particular focus on handling
               responses from AI tool calls efficiently.
             </p>
@@ -39,7 +39,7 @@
       <h2 class="doc-heading-2 fade-in">Installation</h2>
 
       <p class="doc-text fade-in-delayed">
-        Add jsonreader to your project using your preferred package manager:
+        Add @formkit/jsonreader to your project using your preferred package manager:
       </p>
 
       <div
@@ -59,22 +59,22 @@
             class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
           >
 <span class="text-gray-400"># Using npm</span>
-npm install jsonreader
+npm install @formkit/jsonreader
 
 <span class="text-gray-400"># Using yarn</span>
-yarn add jsonreader
+yarn add @formkit/jsonreader
 
 <span class="text-gray-400"># Using pnpm</span>
-pnpm add jsonreader</pre>
+pnpm add @formkit/jsonreader</pre>
         </div>
       </div>
 
       <h2 class="doc-heading-2 fade-in-delayed" style="animation-delay: 0.3s">
-        Why Use jsonreader?
+        Why Use @formkit/jsonreader?
       </h2>
 
       <p class="doc-text fade-in-delayed" style="animation-delay: 0.4s">
-        When working with AI tool calls or any large JSON responses, jsonreader
+        When working with AI tool calls or any large JSON responses, @formkit/jsonreader
         provides several key advantages:
       </p>
 
@@ -107,7 +107,7 @@ pnpm add jsonreader</pre>
       </h3>
 
       <p class="doc-text fade-in-delayed" style="animation-delay: 0.8s">
-        The simplest way to use jsonreader is to process JSON data as it streams
+        The simplest way to use @formkit/jsonreader is to process JSON data as it streams
         in:
       </p>
 
@@ -127,7 +127,7 @@ pnpm add jsonreader</pre>
           <pre
             class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
           >
-<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-accent">async</span> <span class="text-accent">function</span> <span class="text-white">processStreamingData</span>() {
   <span class="text-gray-400">// Get a stream from somewhere (e.g., fetch API)</span>
@@ -172,7 +172,7 @@ pnpm add jsonreader</pre>
           <pre
             class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
           >
-<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-accent">async</span> <span class="text-accent">function</span> <span class="text-white">processToolResults</span>() {
   <span class="text-accent">const</span> response = <span class="text-accent">await</span> fetch(<span class="text-white">'https://api.ai-service.com/v1/generate'</span>);
@@ -219,7 +219,7 @@ pnpm add jsonreader</pre>
           <pre
             class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
           >
-<span class="text-accent">import</span> { jsonPathReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonPathReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-gray-400">// Define paths to extract</span>
 <span class="text-accent">const</span> paths = [
@@ -253,7 +253,7 @@ pnpm add jsonreader</pre>
 
       <h2 class="doc-heading-2">Error Handling</h2>
 
-      <p class="doc-text">JSONReader will throw an error when parsing fails:</p>
+      <p class="doc-text">@formkit/jsonreader will throw an error when parsing fails:</p>
 
       <div class="code-block card-noise">
         <div class="code-window-header flex justify-between items-center">

packages/docs/pages/index.vue

@@ -77,7 +77,7 @@
               <pre
                 class="text-white overflow-x-auto font-mono text-sm leading-relaxed"
               >
-<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-gray-400">// Get a reader from a streaming response</span>
 <span class="text-accent">const</span> reader = response.body.getReader();
@@ -345,7 +345,7 @@
                 </h4>
               </div>
               <p class="text-gray-600 mb-8 flex-grow">
-                Use jsonreader in your personal projects, open source
+                Use @formkit/jsonreader in your personal projects, open source
                 contributions, and learning experiences at no cost.
               </p>
               <div class="flex items-end justify-between mt-auto">
@@ -446,13 +446,13 @@
               class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
             >
 <span class="text-gray-400"># Using npm</span>
-npm install jsonreader
+npm install @formkit/jsonreader
 
 <span class="text-gray-400"># Using yarn</span>
-yarn add jsonreader
+yarn add @formkit/jsonreader
 
 <span class="text-gray-400"># Using pnpm</span>
-pnpm add jsonreader</pre>
+pnpm add @formkit/jsonreader</pre>
           </div>
         </div>
 
@@ -468,7 +468,7 @@ pnpm add jsonreader</pre>
         <div class="navigation-card fade-in-delayed mb-16">
           <div class="card-content">
             <p class="text-black mb-6">
-              The <code class="inline-code">jsonreader</code> utility parses
+              The <code class="inline-code">@formkit/jsonreader</code> utility parses
               JSON data character by character as it arrives from a stream. It
               builds up a syntactically valid JSON structure as data comes in,
               closing any unclosed objects or arrays to create valid partial
@@ -541,7 +541,7 @@ pnpm add jsonreader</pre>
         </h3>
 
         <p class="doc-text mb-6">
-          The simplest way to use jsonreader is to process JSON data as it
+          The simplest way to use @formkit/jsonreader is to process JSON data as it
           streams in:
         </p>
 
@@ -558,7 +558,7 @@ pnpm add jsonreader</pre>
             <pre
               class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
             >
-<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-accent">async</span> <span class="text-accent">function</span> <span class="text-white">processStreamingData</span>() {
   <span class="text-gray-400">// Get a stream from somewhere (e.g., fetch API)</span>
@@ -595,7 +595,7 @@ pnpm add jsonreader</pre>
           class="bg-gray-50 p-6 mb-8 rounded-lg border border-gray-200 card-noise"
         >
           <p class="text-black mb-6">
-            jsonreader provides three powerful configuration options to control
+            @formkit/jsonreader provides three powerful configuration options to control
             how streaming data is processed:
           </p>
 
@@ -651,7 +651,7 @@ pnpm add jsonreader</pre>
             <pre
               class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
             >
-<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-accent">for</span> <span class="text-accent">await</span> (<span class="text-accent">const</span> data <span class="text-accent">of</span> jsonReader(reader, {
   <span class="text-gray-400">// Won't yield anything until 'metadata' is complete</span>
@@ -703,7 +703,7 @@ pnpm add jsonreader</pre>
             <pre
               class="text-white overflow-x-auto font-mono text-sm leading-relaxed text-left"
             >
-<span class="text-accent">import</span> { jsonPathReader } <span class="text-accent">from</span> <span class="text-white">'jsonreader'</span>;
+<span class="text-accent">import</span> { jsonPathReader } <span class="text-accent">from</span> <span class="text-white">'@formkit/jsonreader'</span>;
 
 <span class="text-accent">for</span> <span class="text-accent">await</span> (<span class="text-accent">const</span> [value, path] <span class="text-accent">of</span> jsonPathReader(reader, [
   <span class="text-white">'results'</span>,