Update dependencies (except heroicons)

.gitignore

@@ -3,7 +3,8 @@ node_modules
 /.cache
 /build
 /public/build
-.env
+/.wrangler
+.dev.vars
 /app/tailwind.css
 /jsonDocs
 .DS_Store

DEVELOPMENT.md

@@ -56,19 +56,13 @@ First, install npm dependencies:
 npm install
 ```
 
-Run the following command to create the `.env` file with a new `SESSION_SECRET` environment variable:
+Run the following command to create the `.dev.vars` file with a new `SESSION_SECRET` environment variable:
 
 ```bash
-echo "SESSION_SECRET=$(openssl rand -hex 32)" > .env
+echo "SESSION_SECRET=$(openssl rand -hex 32)" > .dev.vars
 ```
 
-Then, run `npm run build` or `npm run dev` to build.
-
-Start the development server:
-
-```bash
-npm start
-```
+Then, run `npm run dev` to build and run.
 
 You should now be able to access your local JSON Hero server on [localhost:8787](http://localhost:8787)
 

app/bindings.d.ts

@@ -1,9 +1,11 @@
-export {};
+// Generated by Wrangler on Fri Jun 21 2024 12:24:47 GMT+0200 (Central European Summer Time)
+// by running `wrangler types app/bindings.d.ts`
 
+export {};
 declare global {
-  const DOCUMENTS: KVNamespace;
-  const SESSION_SECRET: string;
-  const GRAPH_JSON_API_KEY: string;
-  const GRAPH_JSON_COLLECTION: string;
-  const APIHERO_PROJECT_KEY: string;
+	const DOCUMENTS: KVNamespace;
+	const SESSION_SECRET: "";
+	const SESSION_STORAGE: "";
+	const GRAPH_JSON_API_KEY: "";
+	const APIHERO_PROJECT_KEY: "";
 }

app/components/DocumentTitle.tsx

@@ -1,6 +1,6 @@
 import { PencilAltIcon } from "@heroicons/react/outline";
 import { useEffect, useRef, useState } from "react";
-import { useFetcher } from "remix";
+import { useFetcher } from "@remix-run/react";
 import { match } from "ts-pattern";
 import { useJsonDoc } from "~/hooks/useJsonDoc";
 

app/components/DragAndDropForm.tsx

@@ -1,7 +1,7 @@
 import { ArrowCircleDownIcon } from "@heroicons/react/outline";
 import { useCallback, useRef } from "react";
-import { useDropzone } from "react-dropzone";
-import { Form, useSubmit } from "remix";
+import { useDropzone } from "react-dropzone-esm";
+import { Form, useSubmit } from "@remix-run/react";
 import invariant from "tiny-invariant";
 
 export function DragAndDropForm() {
@@ -59,7 +59,7 @@ export function DragAndDropForm() {
     maxFiles: 1,
     maxSize: 1024 * 1024 * 1,
     multiple: false,
-    accept: "application/json",
+    accept: { "application/json": [".json"] },
   });
 
   return (

app/components/ExampleDoc.tsx

@@ -1,4 +1,4 @@
-import { Link } from "remix";
+import { Link } from "@remix-run/react";
 
 export function ExampleDoc({
   id,

app/components/ExampleUrl.tsx

@@ -1,4 +1,4 @@
-import { Form } from "remix";
+import { Form } from "@remix-run/react";
 
 export function ExampleUrl({
   url,

app/components/FileSelector/FileDropzone.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useCallback } from "react";
-import { useDropzone } from "react-dropzone";
+import { useDropzone } from "react-dropzone-esm";
 import { DocumentDownloadIcon } from "@heroicons/react/outline";
 
 export const FileDropzone: FunctionComponent = ({ children }) => {

app/components/Header.tsx

@@ -1,7 +1,6 @@
 import { ShareIcon, PlusIcon, TrashIcon } from "@heroicons/react/outline";
 import { DocumentTitle } from "./DocumentTitle";
 import { DiscordIconTransparent } from "./Icons/DiscordIconTransparent";
-import { EmailIconTransparent } from "./Icons/EmailIconTransparent";
 import { GithubStar } from "./UI/GithubStar";
 import { Logo } from "./Icons/Logo";
 import { Share } from "./Share";
@@ -12,7 +11,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "./UI/Popover";
-import { Form } from "remix";
+import { Form } from "@remix-run/react";
 import { useJsonDoc } from "~/hooks/useJsonDoc";
 import { LogoTriggerdotdev } from "./Icons/LogoTriggerdotdev";
 

app/components/Home/HomeFooter.tsx

@@ -1,4 +1,4 @@
-import { Link } from "remix";
+import { Link } from "@remix-run/react";
 import { DiscordIcon } from "../Icons/DiscordIcon";
 import { EmailIcon } from "../Icons/EmailIcon";
 import { GithubIcon } from "../Icons/GithubIcon";

app/components/Icons/Logo.tsx

@@ -1,4 +1,4 @@
-import { Link } from "remix";
+import { Link } from "@remix-run/react";
 
 export function Logo({
   className,

app/components/Icons/LogoTriggerdotdev.tsx

@@ -59,8 +59,8 @@ export function LogoTriggerdotdev({
           fill="#E2E8F0"
         />
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M8.32238 9.89169L13.6403 0.682007L26.8195 23.5069H0.461029L5.77893 14.2969L9.54072 16.4686L7.9849 19.1632H19.2957L13.6403 9.3691L12.0845 12.0637L8.32238 9.89169Z"
           fill="#E2E8F0"
         />

app/components/JsonPreview.tsx

@@ -1,4 +1,4 @@
-import { RangeSetBuilder } from "@codemirror/rangeset";
+import { RangeSetBuilder } from "@codemirror/state";
 import { JSONHeroPath } from "@jsonhero/path";
 import {
   useCodeMirror,

app/components/PathPreview.tsx

@@ -1,4 +1,4 @@
-import { ChevronRightIcon, EyeIcon } from "@heroicons/react/outline";
+import { ChevronRightIcon } from "@heroicons/react/outline";
 import { useMemo } from "react";
 import { useJsonColumnViewAPI } from "~/hooks/useJsonColumnView";
 import { ColumnViewNode, IconComponent } from "~/useColumnView";

app/components/Preview/Types/PreviewHtml.tsx

@@ -1,7 +1,7 @@
 import { Body } from "~/components/Primitives/Body";
 import { Title } from "~/components/Primitives/Title";
 import { PreviewBox } from "../PreviewBox";
-import { PreviewHtml } from "./preview.types";
+import type { PreviewHtml } from "./preview.types";
 
 export type PreviewHtmlProps = {
   info: PreviewHtml;

app/components/Preview/Types/PreviewImage.tsx

@@ -1,7 +1,7 @@
 import { formatBytes } from "~/utilities/formatter";
 import { PreviewBox } from "../PreviewBox";
 import { PreviewProperties, PreviewProperty } from "../PreviewProperties";
-import { PreviewImage } from "./preview.types";
+import type { PreviewImage } from "./preview.types";
 
 export type PreviewImageProps = {
   info: PreviewImage;

app/components/Preview/Types/PreviewJson.tsx

@@ -4,7 +4,7 @@ import { CopyTextButton } from "~/components/CopyTextButton";
 import { OpenInNewWindow } from "~/components/OpenInWindow";
 import { Body } from "~/components/Primitives/Body";
 import { PreviewBox } from "../PreviewBox";
-import { PreviewJson } from "./preview.types";
+import type { PreviewJson } from "./preview.types";
 
 export function PreviewJson({ preview }: { preview: PreviewJson }) {
   const [hovering, setHovering] = useState(false);

app/components/Preview/Types/PreviewUri.tsx

@@ -1,6 +1,5 @@
 import { JSONStringType } from "@jsonhero/json-infer-types/lib/@types";
-import { useEffect } from "react";
-import { useFetcher } from "remix";
+import { useFetcher } from "@remix-run/react";
 import { Body } from "~/components/Primitives/Body";
 import { useLoadWhenOnline } from "~/hooks/useLoadWhenOnline";
 import { PreviewBox } from "../PreviewBox";

app/components/Primitives/Body.tsx

@@ -1,6 +1,6 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, ReactNode } from "react";
 
-export const Body: FunctionComponent<{ className?: string }> = ({
+export const Body: FunctionComponent<{ className?: string, children?: ReactNode }> = ({
   className,
   children,
 }) => {

app/components/Primitives/LargeTitle.tsx

@@ -1,6 +1,6 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, ReactNode } from "react";
 
-export const LargeTitle: FunctionComponent<{ className?: string }> = ({
+export const LargeTitle: FunctionComponent<{ className?: string, children?: ReactNode }> = ({
   className,
   children,
 }) => {

app/components/Properties/PropertiesString.tsx

@@ -33,7 +33,7 @@ export function PropertiesString({ type }: { type: JSONStringType }) {
   }
 }
 
-import jwtDecode from "jwt-decode";
+import { jwtDecode } from "jwt-decode";
 import { inferTemporal } from "~/utilities/inferredTemporal";
 
 function PropertiesJwt({

app/components/SearchPalette.tsx

@@ -19,7 +19,7 @@ import { getComponentSlices, getStringSlices } from "~/utilities/search";
 import classnames from "~/utilities/classnames";
 import { iconForValue } from "~/utilities/icons";
 import { useRef, useCallback } from "react";
-import { useVirtual } from "react-virtual";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { truncate } from "lodash-es";
 import { JSONHeroPath } from "@jsonhero/path";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -49,11 +49,12 @@ export function SearchPalette({
 
   const listRef = useRef<HTMLElement>(null);
 
-  const rowVirtualizer = useVirtual({
-    size: (searchState.results ?? []).length,
-    parentRef: listRef,
+  const rowVirtualizer = useVirtualizer({
+    count: (searchState.results ?? []).length,
     estimateSize: useCallback(() => 70, []),
-    overscan: 6,
+    getScrollElement: () => {
+      return listRef.current
+    }
   });
 
   function comboboxReducer(
@@ -79,7 +80,6 @@ export function SearchPalette({
   const cb = useCombobox({
     items: searchState.results ?? [],
     stateReducer: comboboxReducer,
-    circularNavigation: false,
     scrollIntoView: () => {},
     onSelectedItemChange: ({ selectedItem }) => {
       if (selectedItem) {
@@ -106,7 +106,7 @@ export function SearchPalette({
   return (
     <>
       <div
-        {...cb.getComboboxProps()}
+        {...cb.getMenuProps()}
         className="max-h-[60vh] px-4 pt-4 overflow-hidden"
       >
         <label
@@ -159,10 +159,10 @@ export function SearchPalette({
         >
           <li
             key="total-size"
-            style={{ height: rowVirtualizer.totalSize }}
+            style={{ height: rowVirtualizer.getTotalSize() }}
             className="mb-[1rem]"
           />
-          {rowVirtualizer.virtualItems.map((virtualRow) => {
+          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
             const result = (searchState.results ?? [])[virtualRow.index];
 
             return (

app/components/SideBar.tsx

@@ -1,7 +1,7 @@
 import { TemplateIcon, CodeIcon, DownloadIcon } from "@heroicons/react/outline";
 import { TreeIcon } from "~/components/Icons/TreeIcon";
 import { useHotkeys } from "react-hotkeys-hook";
-import { Link, useLocation, useNavigate } from "remix";
+import { Link, useLocation, useNavigate } from "@remix-run/react";
 import { useJsonDoc } from "~/hooks/useJsonDoc";
 import { ToolTip } from "./ToolTip";
 import { Body } from "./Primitives/Body";

app/components/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import type { Dispatch, ReactNode, SetStateAction } from "react";
-import { useFetcher } from "remix";
+import { useFetcher } from "@remix-run/react";
 
 export type Theme = "dark" | "light";
 

app/components/UrlForm.tsx

@@ -1,15 +1,15 @@
 import { useState } from "react";
-import { Form, useTransition } from "remix";
+import { Form, useNavigation } from "@remix-run/react";
 
 export type UrlFormProps = {
   className?: string;
 };
 
 export function UrlForm({ className }: UrlFormProps) {
-  const transition = useTransition();
+  const navigation = useNavigation();
   const [inputValue, setInputValue] = useState("");
 
-  const isNotIdle = transition.state !== "idle";
+  const isNotIdle = navigation.state !== "idle";
   const isButtonDisabled = !inputValue.length || isNotIdle;
 
   return (

app/entry.client.tsx

@@ -1,8 +1,9 @@
-import { hydrate } from "react-dom";
-import { RemixBrowser } from "remix";
+import { RemixBrowser } from "@remix-run/react";
 import { load } from "fathom-client";
+import { hydrateRoot } from "react-dom/client";
 
-hydrate(<RemixBrowser />, document);
+
+hydrateRoot(document, <RemixBrowser/>)
 
 load("ROBFNTET", {
   spa: "history",

app/entry.server.tsx

@@ -1,20 +1,21 @@
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
 import { renderToString } from "react-dom/server";
-import { RemixServer } from "remix";
-import type { EntryContext } from "remix";
 
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
-  const markup = renderToString(
+  let html = renderToString(
     <RemixServer context={remixContext} url={request.url} />
   );
-
   responseHeaders.set("Content-Type", "text/html");
 
-  return new Response("<!DOCTYPE html>" + markup, {
+  html = "<!DOCTYPE html>\n" + html;
+
+  return new Response(html, {
     status: responseStatusCode,
     headers: responseHeaders
   });

app/hooks/useJsonTree.tsx

@@ -58,7 +58,8 @@ export function useJsonTree(options: JsonTreeOptions): UseJsonTreeInstance {
   const tree = useVirtualTree({
     id: doc.id,
     nodes: jsonNodes,
-    parentRef,
+    count: 0,
+    getScrollElement: () => parentRef.current,
     estimateSize: useCallback((index) => 32, []),
     initialRect,
     overscan: options.overscan,