@tanstack/router-vite-plugin 1.26.8 → 1.26.14

package/src/tests/snapshots/useStateDestructure?split.tsx

@@ -1,605 +0,0 @@
-import * as React from 'react';
-import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg';
-import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa';
-import { Await, Link, getRouteApi } from '@tanstack/react-router';
-import { Carbon } from '~/components/Carbon';
-import { Footer } from '~/components/Footer';
-import { TbHeartHandshake } from 'react-icons/tb';
-import SponsorPack from '~/components/SponsorPack';
-import { startProject } from '~/projects/start';
-const menu = [{
-  label: <div className="flex items-center gap-2">
-        <CgCornerUpLeft className="text-lg" /> TanStack
-      </div>,
-  to: '/'
-},
-// {
-//   label: (
-//     <div className="flex items-center gap-1">
-//       <VscPreview className="text-lg" /> Examples
-//     </div>
-//   ),
-//   to: './docs/react/examples/basic',
-// },
-// {
-//   label: (
-//     <div className="flex items-center gap-1">
-//       <FaBook className="text-lg" /> Docs
-//     </div>
-//   ),
-//   to: './docs/',
-// },
-// {
-//   label: (
-//     <div className="flex items-center gap-1">
-//       <FaGithub className="text-lg" /> GitHub
-//     </div>
-//   ),
-//   to: `https://github.com/${startProject.repo}`,
-// },
-{
-  label: <div className="flex items-center gap-1">
-        <FaDiscord className="text-lg" /> Discord
-      </div>,
-  to: 'https://tlinz.com/discord'
-}, {
-  label: <div className="flex items-center gap-1">
-        <FaTshirt className="text-lg" /> Merch
-      </div>,
-  to: `https://cottonbureau.com/people/tanstack`
-}];
-import { Route } from "useStateDestructure.tsx";
-const librariesRouteApi = getRouteApi('/_libraries');
-export default function VersionIndex() {
-  const {
-    sponsorsPromise
-  } = librariesRouteApi.useLoaderData();
-  const {
-    version
-  } = Route.useParams();
-  const [, setIsDark] = React.useState(true);
-  React.useEffect(() => {
-    setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches);
-  }, []);
-  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`;
-  return <div className="flex flex-col gap-20 md:gap-32 max-w-full">
-      <div className="flex flex-wrap py-2 px-4 items-center justify-center text-sm max-w-screen-xl mx-auto
-          md:text-base md:self-end">
-        {menu?.map((item, i) => {
-        const label = <div className="p-2 opacity-90 hover:opacity-100">{item.label}</div>;
-        return <div key={i} className="hover:underline">
-              {item.to.startsWith('http') ? <a href={item.to}>{label}</a> : <Link to={item.to} params>
-                  {label}
-                </Link>}
-            </div>;
-      })}
-      </div>
-      <div className="flex flex-col items-center gap-8 text-center px-4">
-        <div className="flex gap-2 lg:gap-4 items-center">
-          <h1 className={`inline-block
-            font-black text-4xl
-            md:text-6xl
-            lg:text-7xl relative`}>
-            <span className={gradientText}>TanStack Start</span>
-          </h1>
-        </div>
-        {/* <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-[150%]"> */}
-        <div className="text-sm
-            md:text-base font-black
-            lg:text-lg align-super text-white animate-bounce uppercase
-              dark:text-black bg-black dark:bg-white shadow-xl shadow-black/30 px-2 py-1 rounded-md
-              leading-none whitespace-nowrap">
-          Coming Soon!
-          {/* {version === 'latest' ? latestVersion : version} */}
-        </div>
-        {/* </div> */}
-        <h2 className="font-bold text-2xl max-w-md
-            md:text-3xl
-            lg:text-5xl lg:max-w-2xl">
-          Full-stack React framework{' '}
-          <span className="underline decoration-dashed decoration-yellow-500 decoration-3 underline-offset-2">
-            powered by TanStack Router
-          </span>{' '}
-        </h2>
-        <p className="text opacity-90 max-w-[500px]
-            lg:text-xl lg:max-w-[600px]">
-          Full-document SSR, Streaming, Server Functions, bundling and more,
-          powered by <strong>TanStack Router</strong>, <strong>Vinxi</strong>,{' '}
-          <strong>Nitro</strong> and <strong>Vite</strong>. Ready to deploy to
-          your favorite hosting provider.
-        </p>
-      </div>
-      <div className="space-y-8 px-4">
-        <div className="font-black text-3xl mr-1 text-center">
-          So when can I use it?
-        </div>
-        <div className="max-w-full p-8 w-[800px] mx-auto leading-loose space-y-4 bg-white dark:bg-gray-700 rounded-xl shadow-xl shadow-black/10">
-          <div>
-            <strong>TanStack Start </strong> is currently in development and is
-            not yet available for public use. We are working hard to bring you
-            the best possible experience and will be releasing more details
-            soon. In the meantime, you can follow along with the development
-            process by watching the commits on this very website!
-          </div>
-          <div>
-            Yes, you heard that right!{' '}
-            <strong>
-              TanStack.com is already being built and deployed using TanStack
-              Start
-            </strong>
-            ! We are eating our own dog food and are excited to share the
-            results with you soon!
-          </div>
-        </div>
-        <div className="flex items-center gap-2 flex-wrap justify-center">
-          <a href={`https://github.com/tanstack/tanstack.com`} className={`flex items-center gap-2 py-2 px-4 bg-cyan-700 rounded text-white uppercase font-extrabold`}>
-            <FaGithub /> View TanStack.com Source
-          </a>
-          <a href={`https://twitter.com/intent/post?text=${encodeURIComponent(`I'm excited for TanStack Start, new full-stack React framework coming soon from team @Tan_Stack!
-              
-Check it out at https://tanstack.com/start/`)}`} target="_blank" className={`flex items-center gap-2 py-2 px-4 bg-cyan-500 rounded text-white uppercase font-extrabold`}>
-            <FaTwitter /> Tweet about it!
-          </a>{' '}
-        </div>
-      </div>
-      {/* <div
-        className="text-lg flex flex-col gap-12 p-8 max-w-[1200px] mx-auto
-                        md:flex-row"
-       >
-        <div className="flex-1 flex flex-col gap-8 items-center">
-          <VscWand className="text-cyan-500 text-6xl" />
-          <div className="flex flex-col gap-4">
-            <h3 className="uppercase text-center text-xl font-black">
-              Built on TanStack Router
-            </h3>
-            <p className="text-sm text-gray-800 dark:text-gray-200 leading-6">
-              Writing your data fetching logic by hand is over. Tell TanStack
-              Query where to get your data and how fresh you need it to be and
-              the rest is automatic. It handles{' '}
-              <span className="font-semibold text-cyan-700 dark:text-cyan-400">
-                caching, background updates and stale data out of the box with
-                zero-configuration
-              </span>
-              .
-            </p>
-          </div>
-        </div>
-        <div className="flex-1 flex flex-col gap-8 items-center">
-          <div className="text-center">
-            <FaBolt className="text-sky-600 text-6xl" />
-          </div>
-          <div className="flex flex-col gap-4">
-            <h3 className="uppercase text-center text-xl font-black">
-              Simple & Familiar
-            </h3>
-            <p className="text-sm text-gray-800 dark:text-gray-200 leading-6">
-              If you know how to work with promises or async/await, then you
-              already know how to use TanStack Query. There's{' '}
-              <span className="font-semibold text-sky-700 dark:text-sky-400">
-                no global state to manage, reducers, normalization systems or
-                heavy configurations to understand
-              </span>
-              . Simply pass a function that resolves your data (or throws an
-              error) and the rest is history.
-            </p>
-          </div>
-        </div>
-        <div className="flex-1 flex flex-col gap-8 items-center">
-          <div className="text-center">
-            <FaCogs className="text-blue-500 text-6xl" />
-          </div>
-          <div className="flex flex-col gap-4">
-            <h3 className="uppercase text-center text-xl font-black">
-              Extensible
-            </h3>
-            <p className="text-sm text-gray-800 dark:text-gray-200 leading-6">
-              TanStack Query is configurable down to each observer instance of a
-              query with knobs and options to fit every use-case. It comes wired
-              up with{' '}
-              <span className="font-semibold text-blue-700 dark:text-blue-400">
-                dedicated devtools, infinite-loading APIs, and first class
-                mutation tools that make updating your data a breeze
-              </span>
-              . Don't worry though, everything is pre-configured for success!
-            </p>
-          </div>
-        </div>
-       </div> */}
-
-      {/* <div className="px-4 sm:px-6 lg:px-8 mx-auto">
-        <div className=" sm:text-center pb-16">
-          <h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
-            No dependencies. All the Features.
-          </h3>
-          <p className="mt-4 text-xl max-w-3xl mx-auto leading-7 opacity-60">
-            With zero dependencies, TanStack Query is extremely lean given the
-            dense feature set it provides. From weekend hobbies all the way to
-            enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉),
-            TanStack Query is the battle-hardened tool to help you succeed at
-            the speed of your creativity.
-          </p>
-        </div>
-        <div className="grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-4  mx-auto">
-          {[
-            'Backend agnostic',
-            'Dedicated Devtools',
-            'Auto Caching',
-            'Auto Refetching',
-            'Window Focus Refetching',
-            'Polling/Realtime Queries',
-            'Parallel Queries',
-            'Dependent Queries',
-            'Mutations API',
-            'Automatic Garbage Collection',
-            'Paginated/Cursor Queries',
-            'Load-More/Infinite Scroll Queries',
-            'Scroll Recovery',
-            'Request Cancellation',
-            'Suspense Ready!',
-            'Render-as-you-fetch',
-            'Prefetching',
-            'Variable-length Parallel Queries',
-            'Offline Support',
-            'SSR Support',
-            'Data Selectors',
-          ].map((d, i) => {
-            return (
-              <span key={i} className="flex items-center gap-2">
-                <FaCheckCircle className="text-green-500 " /> {d}
-              </span>
-            )
-          })}
-        </div>
-       </div> */}
-
-      {/* <div>
-        <div className="uppercase tracking-wider text-sm font-semibold text-center text-gray-400 mb-3">
-          Trusted in Production by
-        </div>
-        <marquee scrollamount="2">
-          <div className="flex gap-2 items-center text-3xl font-bold ml-[-100%]">
-            {(new Array(4) as string[])
-              .fill('')
-              .reduce(
-                (all) => [...all, ...all],
-                [
-                  'Google',
-                  'Walmart',
-                  'Facebook',
-                  'PayPal',
-                  'Amazon',
-                  'American Express',
-                  'Microsoft',
-                  'Target',
-                  'Ebay',
-                  'Autodesk',
-                  'CarFAX',
-                  'Docusign',
-                  'HP',
-                  'MLB',
-                  'Volvo',
-                  'Ocado',
-                  'UPC.ch',
-                  'EFI.com',
-                  'ReactBricks',
-                  'Nozzle.io',
-                  'Uber',
-                ]
-              )
-              .map((d, i) => (
-                <span key={i} className="opacity-70 even:opacity-40">
-                  {d}
-                </span>
-              ))}
-          </div>
-        </marquee>
-       </div> */}
-
-      <div className="px-4 w-[500px] max-w-full mx-auto">
-        <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
-          Partners
-        </h3>
-        <div className="h-8" />
-        <div className="flex-1 flex flex-col items-center text-sm text-center
-                      bg-white shadow-xl shadow-gray-500/20 rounded-lg
-                        divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden
-                        dark:bg-gray-800 dark:shadow-none">
-          <span className="flex items-center gap-2 p-12 text-4xl text-rose-500 font-black uppercase">
-            Start <TbHeartHandshake /> You?
-          </span>
-          <div className="flex flex-col p-4 gap-4">
-            <div>
-              We're looking for a TanStack Start OSS Partner to go above and
-              beyond the call of sponsorship. Are you as invested in TanStack
-              Start as we are? Let's push the boundaries of Start together!
-            </div>
-            <a href="mailto:partners@tanstack.com?subject=TanStack Start Partnership" className="text-blue-500 uppercase font-black text-sm">
-              Let's chat
-            </a>
-          </div>
-        </div>
-      </div>
-
-      <div className="relative text-lg overflow-hidden">
-        <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
-          Sponsors
-        </h3>
-        <div className="my-4 flex flex-wrap mx-auto max-w-screen-lg" style={{
-        aspectRatio: '1/1'
-      }}>
-          <Await promise={sponsorsPromise} fallback={<CgSpinner className="text-2xl animate-spin" />} children={sponsors => {
-          return <SponsorPack sponsors={sponsors} />;
-        }} />
-        </div>
-        <div className="text-center">
-          <a href="https://github.com/sponsors/tannerlinsley" className="inline-block bg-green-500 px-4 py-2 text-xl mx-auto leading-tight font-extrabold tracking-tight text-white rounded-full">
-            Become a Sponsor!
-          </a>
-        </div>
-      </div>
-
-      <div className="mx-auto max-w-[400px] flex flex-col gap-2 items-center">
-        <div className="shadow-lg rounded-lg overflow-hidden bg-white dark:bg-gray-800 dark:text-white">
-          <Carbon />
-        </div>
-        <span className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500
-                dark:bg-opacity-20">
-          This ad helps us be happy about our invested time and not burn out and
-          rage-quit OSS. Yay money! 😉
-        </span>
-      </div>
-
-      {/* <div className="flex flex-col gap-4">
-        <div className="px-4 sm:px-6 lg:px-8  mx-auto max-w-3xl sm:text-center">
-          <h3 className="text-3xl text-center leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-2">
-            Less code, fewer edge cases.
-          </h3>
-          <p className="my-4 text-xl leading-7  text-gray-600">
-            Instead of writing reducers, caching logic, timers, retry logic,
-            complex async/await scripting (I could keep going...), you literally
-            write a tiny fraction of the code you normally would. You will be
-            surprised at how little code you're writing or how much code you're
-            deleting when you use TanStack Query. Try it out with one of the
-            examples below!
-          </p>
-          <div className="flex flex-wrap gap-2 justify-center">
-            {(
-              [
-                { label: 'Angular', value: 'angular' },
-                { label: 'React', value: 'react' },
-                { label: 'Solid', value: 'solid' },
-                { label: 'Svelte', value: 'svelte' },
-                { label: 'Vue', value: 'vue' },
-              ] as const
-            ).map((item) => (
-              <button
-                key={item.value}
-                className={`inline-block py-2 px-4 rounded text-white uppercase font-extrabold ${
-                  item.value === framework
-                    ? 'bg-cyan-500'
-                    : 'bg-gray-300 dark:bg-gray-700 hover:bg-cyan-300'
-                }`}
-                onClick={() => setFramework(item.value)}
-              >
-                {item.label}
-              </button>
-            ))}
-          </div>
-        </div>
-       </div> */}
-
-      {/* {[''].includes(framework) ? (
-        <div className="px-2">
-          <div className="p-8 text-center text-lg w-full max-w-screen-lg mx-auto bg-black text-white rounded-xl">
-            Looking for the <strong>@tanstack/{framework}-query</strong>{' '}
-            example? We could use your help to build the{' '}
-            <strong>@tanstack/{framework}-query</strong> adapter! Join the{' '}
-            <a
-              href="https://tlinz.com/discord"
-              className="text-teal-500 font-bold"
-            >
-              TanStack Discord Server
-            </a>{' '}
-            and let's get to work!
-          </div>
-        </div>
-       ) : (
-        <div className="bg-white dark:bg-black">
-          <iframe
-            key={framework}
-            src={`https://stackblitz.com/github/${repo}/tree/${branch}/examples/${framework}/simple?embed=1&theme=${
-              isDark ? 'dark' : 'light'
-            }`}
-            title={`tannerlinsley/${framework}-query: basic`}
-            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-            className="shadow-2xl"
-            loading="lazy"
-            style={{
-              width: '100%',
-              height: '80vh',
-              border: '0',
-            }}
-          ></iframe>
-        </div>
-       )} */}
-
-      {/* <div className="flex flex-col gap-4 items-center">
-        <div className="font-extrabold text-xl lg:text-2xl">
-          Wow, you've come a long way!
-        </div>
-        <div className="italic font-sm opacity-70">
-          Only one thing left to do...
-        </div>
-        <div>
-          <Link
-            to="./docs/"
-            className={`inline-block py-2 px-4 bg-cyan-500 rounded text-white uppercase font-extrabold`}
-          >
-            Read the Docs!
-          </Link>
-        </div>
-       </div> */}
-      <Footer />
-    </div>;
-}
-const component = function VersionIndex() {
-  const {
-    sponsorsPromise
-  } = librariesRouteApi.useLoaderData();
-  const {
-    version
-  } = Route.useParams();
-  const [, setIsDark] = React.useState(true);
-  React.useEffect(() => {
-    setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches);
-  }, []);
-  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`;
-  return <div className="flex flex-col gap-20 md:gap-32 max-w-full">
-      <div className="flex flex-wrap py-2 px-4 items-center justify-center text-sm max-w-screen-xl mx-auto
-          md:text-base md:self-end">
-        {menu?.map((item, i) => {
-        const label = <div className="p-2 opacity-90 hover:opacity-100">{item.label}</div>;
-        return <div key={i} className="hover:underline">
-              {item.to.startsWith('http') ? <a href={item.to}>{label}</a> : <Link to={item.to} params>
-                  {label}
-                </Link>}
-            </div>;
-      })}
-      </div>
-      <div className="flex flex-col items-center gap-8 text-center px-4">
-        <div className="flex gap-2 lg:gap-4 items-center">
-          <h1 className={`inline-block
-            font-black text-4xl
-            md:text-6xl
-            lg:text-7xl relative`}>
-            <span className={gradientText}>TanStack Start</span>
-          </h1>
-        </div>
-        {}
-        <div className="text-sm
-            md:text-base font-black
-            lg:text-lg align-super text-white animate-bounce uppercase
-              dark:text-black bg-black dark:bg-white shadow-xl shadow-black/30 px-2 py-1 rounded-md
-              leading-none whitespace-nowrap">
-          Coming Soon!
-          {}
-        </div>
-        {}
-        <h2 className="font-bold text-2xl max-w-md
-            md:text-3xl
-            lg:text-5xl lg:max-w-2xl">
-          Full-stack React framework{' '}
-          <span className="underline decoration-dashed decoration-yellow-500 decoration-3 underline-offset-2">
-            powered by TanStack Router
-          </span>{' '}
-        </h2>
-        <p className="text opacity-90 max-w-[500px]
-            lg:text-xl lg:max-w-[600px]">
-          Full-document SSR, Streaming, Server Functions, bundling and more,
-          powered by <strong>TanStack Router</strong>, <strong>Vinxi</strong>,{' '}
-          <strong>Nitro</strong> and <strong>Vite</strong>. Ready to deploy to
-          your favorite hosting provider.
-        </p>
-      </div>
-      <div className="space-y-8 px-4">
-        <div className="font-black text-3xl mr-1 text-center">
-          So when can I use it?
-        </div>
-        <div className="max-w-full p-8 w-[800px] mx-auto leading-loose space-y-4 bg-white dark:bg-gray-700 rounded-xl shadow-xl shadow-black/10">
-          <div>
-            <strong>TanStack Start </strong> is currently in development and is
-            not yet available for public use. We are working hard to bring you
-            the best possible experience and will be releasing more details
-            soon. In the meantime, you can follow along with the development
-            process by watching the commits on this very website!
-          </div>
-          <div>
-            Yes, you heard that right!{' '}
-            <strong>
-              TanStack.com is already being built and deployed using TanStack
-              Start
-            </strong>
-            ! We are eating our own dog food and are excited to share the
-            results with you soon!
-          </div>
-        </div>
-        <div className="flex items-center gap-2 flex-wrap justify-center">
-          <a href={`https://github.com/tanstack/tanstack.com`} className={`flex items-center gap-2 py-2 px-4 bg-cyan-700 rounded text-white uppercase font-extrabold`}>
-            <FaGithub /> View TanStack.com Source
-          </a>
-          <a href={`https://twitter.com/intent/post?text=${encodeURIComponent(`I'm excited for TanStack Start, new full-stack React framework coming soon from team @Tan_Stack!
-              
-Check it out at https://tanstack.com/start/`)}`} target="_blank" className={`flex items-center gap-2 py-2 px-4 bg-cyan-500 rounded text-white uppercase font-extrabold`}>
-            <FaTwitter /> Tweet about it!
-          </a>{' '}
-        </div>
-      </div>
-      {}
-
-      {}
-
-      {}
-
-      <div className="px-4 w-[500px] max-w-full mx-auto">
-        <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
-          Partners
-        </h3>
-        <div className="h-8" />
-        <div className="flex-1 flex flex-col items-center text-sm text-center
-                      bg-white shadow-xl shadow-gray-500/20 rounded-lg
-                        divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden
-                        dark:bg-gray-800 dark:shadow-none">
-          <span className="flex items-center gap-2 p-12 text-4xl text-rose-500 font-black uppercase">
-            Start <TbHeartHandshake /> You?
-          </span>
-          <div className="flex flex-col p-4 gap-4">
-            <div>
-              We're looking for a TanStack Start OSS Partner to go above and
-              beyond the call of sponsorship. Are you as invested in TanStack
-              Start as we are? Let's push the boundaries of Start together!
-            </div>
-            <a href="mailto:partners@tanstack.com?subject=TanStack Start Partnership" className="text-blue-500 uppercase font-black text-sm">
-              Let's chat
-            </a>
-          </div>
-        </div>
-      </div>
-
-      <div className="relative text-lg overflow-hidden">
-        <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
-          Sponsors
-        </h3>
-        <div className="my-4 flex flex-wrap mx-auto max-w-screen-lg" style={{
-        aspectRatio: '1/1'
-      }}>
-          <Await promise={sponsorsPromise} fallback={<CgSpinner className="text-2xl animate-spin" />} children={sponsors => {
-          return <SponsorPack sponsors={sponsors} />;
-        }} />
-        </div>
-        <div className="text-center">
-          <a href="https://github.com/sponsors/tannerlinsley" className="inline-block bg-green-500 px-4 py-2 text-xl mx-auto leading-tight font-extrabold tracking-tight text-white rounded-full">
-            Become a Sponsor!
-          </a>
-        </div>
-      </div>
-
-      <div className="mx-auto max-w-[400px] flex flex-col gap-2 items-center">
-        <div className="shadow-lg rounded-lg overflow-hidden bg-white dark:bg-gray-800 dark:text-white">
-          <Carbon />
-        </div>
-        <span className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500
-                dark:bg-opacity-20">
-          This ad helps us be happy about our invested time and not burn out and
-          rage-quit OSS. Yay money! 😉
-        </span>
-      </div>
-
-      {}
-
-      {}
-
-      {}
-      <Footer />
-    </div>;
-};
-export { component };

package/src/tests/test-files/function-declaration.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react'
-import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
-import { fetchPosts } from '../posts'
-
-export const Route = createFileRoute('/posts')({
-  loader: fetchPosts,
-  component: PostsComponent,
-})
-
-function PostsComponent() {
-  const posts = Route.useLoaderData()
-
-  return (
-    <div className="p-2 flex gap-2">
-      <ul className="list-disc pl-4">
-        {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }]?.map(
-          (post) => {
-            return (
-              <li key={post.id} className="whitespace-nowrap">
-                <Link
-                  to="/posts/$postId"
-                  params={{
-                    postId: post.id,
-                  }}
-                  className="block py-1 text-blue-800 hover:text-blue-600"
-                  activeProps={{ className: 'text-black font-bold' }}
-                >
-                  <div>{post.title.substring(0, 20)}</div>
-                </Link>
-              </li>
-            )
-          },
-        )}
-      </ul>
-      <hr />
-      <Outlet />
-    </div>
-  )
-}

package/src/tests/test-files/imported.tsx

@@ -1,8 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-import { importedComponent, importedLoader } from '../shared/imported'
-
-export const Route = createFileRoute('/')({
-  component: importedComponent,
-  loader: importedLoader,
-})

package/src/tests/test-files/inline.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { createFileRoute } from '@tanstack/react-router'
-
-import * as styles from '../style.css'
-import { TEST_DATA } from '../test.const'
-
-const Button = (props: { children: any }) => {
-  return <button>{props.children}</button>
-}
-
-export const Route = createFileRoute('/')({
-  component: () => {
-    return (
-      <div className="p-2">
-        {test}
-        <h3 className={styles.indexPageTitle}>{TEST_DATA.welcome}</h3>
-        <Button>Click me</Button>
-      </div>
-    )
-  },
-})
-
-Route.addChildren([])
-
-export const test = 'test'