npm - create-sprinkles - Versions diffs - 0.2.3 - Mend

create-sprinkles 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/templates/react-router-rsc-content-layer/content-layer/store.ts ADDED Viewed

@@ -0,0 +1,59 @@
+import type { DataEntry, DataStore, MetaStore } from "./api.ts";
+export function createDataStore<
+    D extends Record<string, unknown> = Record<string, unknown>,
+>(): DataStore<D> {
+    const map = new Map<string, DataEntry>();
+    return {
+        clear() {
+            map.clear();
+        },
+        delete(key) {
+            map.delete(key);
+        },
+        entries() {
+            return [...map.entries()] as [string, DataEntry<D>][];
+        },
+        get(key) {
+            return map.get(key) as DataEntry<D> | undefined;
+        },
+        has(key) {
+            return map.has(key);
+        },
+        keys() {
+            return [...map.keys()];
+        },
+        set(entry) {
+            let existing = map.get(entry.id);
+            // Skip update if both entries have a digest and they match
+            if (existing?.digest && entry.digest && existing.digest === entry.digest) {
+                return false;
+            }
+            map.set(entry.id, entry);
+            return true;
+        },
+        values() {
+            return [...map.values()] as DataEntry<D>[];
+        },
+    };
+}
+export function createMetaStore(): MetaStore {
+    const map = new Map<string, string>();
+    return {
+        delete(key) {
+            map.delete(key);
+        },
+        get(key) {
+            return map.get(key);
+        },
+        has(key) {
+            return map.has(key);
+        },
+        set(key, value) {
+            map.set(key, value);
+        },
+    };
+}

package/templates/react-router-spa/app/home.tsx.hbs ADDED Viewed

@@ -0,0 +1,7 @@
+export default function Home() {
+    return (
+        <main>
+            <h1>Welcome to {{repository}}</h1>
+        </main>
+    );
+}

package/templates/react-router-spa/app/root.tsx.hbs ADDED Viewed

@@ -0,0 +1,60 @@
+import type { PropsWithChildren } from "react";
+{{#if hasConvex}}
+import { ConvexQueryClient } from "@convex-dev/react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+{{/if}}
+import { Outlet, Scripts } from "react-router";
+{{#if hasConvex}}
+const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);
+const convexQueryClient = new ConvexQueryClient(convex);
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            queryKeyHashFn: convexQueryClient.hashFn(),
+            queryFn: convexQueryClient.queryFn(),
+            experimental_prefetchInRender: true,
+        },
+    },
+});
+convexQueryClient.connect(queryClient);
+{{/if}}
+export function Layout({ children }: PropsWithChildren) {
+    return (
+        <html lang="en">
+            <head>
+                <meta charSet="utf-8" />
+                <meta content="width=device-width, initial-scale=1" name="viewport" />
+                <meta content="#000000" name="theme-color" />
+                <title>{{repository}}</title>
+            </head>
+            <body>
+                {children}
+                <Scripts />
+            </body>
+        </html>
+    );
+}
+export function HydrateFallback() {
+    return <div>Loading...</div>;
+}
+export default function App() {
+    return (
+{{#if hasConvex}}
+        <ConvexProvider client={convex}>
+            <QueryClientProvider client={queryClient}>
+                <Outlet />
+            </QueryClientProvider>
+        </ConvexProvider>
+{{else}}
+        <Outlet />
+{{/if}}
+    );
+}

package/templates/react-router-spa/tsconfig.json.hbs ADDED Viewed

@@ -0,0 +1,26 @@
+{
+    "include": [
+        "**/*.ts",
+        "**/*.tsx",
+        "./.react-router/types/**/*"
+    ],
+    "compilerOptions": {
+        "allowImportingTsExtensions": true,
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "skipLibCheck": true,
+        "verbatimModuleSyntax": true,
+        "noEmit": true,
+        "moduleResolution": "Bundler",
+        "module": "ESNext",
+        "target": "ESNext",
+        "lib": ["ESNext", "DOM", "DOM.Iterable"],
+        "types": ["vite/client"],
+        "jsx": "react-jsx",
+        "rootDirs": [".", "./.react-router/types"],
+        "paths": {
+            "~/*": ["./app/*"]
+        }
+    }
+}

package/templates/react-router-spa/wrangler.jsonc.hbs ADDED Viewed

@@ -0,0 +1,9 @@
+{
+    "name": "{{repository}}",
+    "compatibility_date": "2025-04-01",
+    "assets": {
+        "directory": "./build/client",
+        "not_found_handling": "single-page-application",
+        "binding": "ASSETS"
+    }
+}

package/templates/react-router-ssr/app/home.tsx.hbs ADDED Viewed

@@ -0,0 +1,21 @@
+{{#if hasConvex}}
+import { createPreloader } from "~/tanstack-query-integration/query-preloader.ts";
+import type { QueryLoaderArgs } from "~/tanstack-query-integration/query-preloader.ts";
+import type { Route } from "./+types/home.ts";
+// TODO: Remove @ts-expect-error once preload is used
+// @ts-expect-error TS6133 — preload is unused until you call it with your query options
+export const loader = createPreloader(async ({ preload }: QueryLoaderArgs<Route.LoaderArgs>) => {
+    // Pre-populate query cache before render
+    // await preload(yourQueryOptions);
+});
+{{/if}}
+export default function Home() {
+    return (
+        <main>
+            <h1>Welcome to {{repository}}</h1>
+        </main>
+    );
+}

package/templates/react-router-ssr/app/root.tsx.hbs ADDED Viewed

@@ -0,0 +1,105 @@
+{{#if hasConvex}}
+import { useState, type PropsWithChildren } from "react";
+import { ConvexQueryClient } from "@convex-dev/react-query";
+import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+{{else}}
+import type { PropsWithChildren } from "react";
+{{/if}}
+import {
+    isRouteErrorResponse,
+    Outlet,
+    Scripts,
+    ScrollRestoration,
+} from "react-router";
+{{#if hasConvex}}
+import { useDehydratedState } from "./tanstack-query-integration/query-preloader.ts";
+import { setQueryClient } from "~/tanstack-query-integration/middleware.ts";
+import { createQueryClient } from "~/lib/client.ts";
+import type { Route } from "./+types/root.ts";
+const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);
+const convexQueryClient = new ConvexQueryClient(convex);
+function createConvexQueryClient() {
+    const queryClient = createQueryClient({
+        queryKeyHashFn: convexQueryClient.hashFn(),
+        queryFn: convexQueryClient.queryFn(),
+    });
+    convexQueryClient.connect(queryClient);
+    return queryClient;
+}
+export const middleware = [setQueryClient(() => createConvexQueryClient())];
+{{/if}}
+export function Layout({ children }: PropsWithChildren) {
+    return (
+        <html lang="en">
+            <head>
+                <meta charSet="utf-8" />
+                <meta
+                    content="width=device-width, initial-scale=1"
+                    name="viewport"
+                />
+                <meta content="#000000" name="theme-color" />
+                <title>{{repository}}</title>
+            </head>
+            <body>
+                {children}
+                <ScrollRestoration />
+                <Scripts />
+            </body>
+        </html>
+    );
+}
+export default function App() {
+{{#if hasConvex}}
+    const [queryClient] = useState(() => createConvexQueryClient());
+    const state = useDehydratedState();
+    return (
+        <ConvexProvider client={convex}>
+            <QueryClientProvider client={queryClient}>
+                <HydrationBoundary state={state}>
+                    <Outlet />
+                </HydrationBoundary>
+            </QueryClientProvider>
+        </ConvexProvider>
+    );
+{{else}}
+    return <Outlet />;
+{{/if}}
+}
+export function ErrorBoundary({ error }: {{#if hasConvex}}Route.ErrorBoundaryProps{{else}}{ error: unknown }{{/if}}) {
+    let message = "Oops!";
+    let details = "An unexpected error occurred.";
+    let stack: string | undefined;
+    if (isRouteErrorResponse(error)) {
+        message = error.status === 404 ? "404" : "Error";
+        details =
+            error.status === 404
+                ? "The requested page could not be found."
+                : error.statusText || details;
+    } else if (import.meta.env.DEV && error && error instanceof Error) {
+        details = error.message;
+        stack = error.stack;
+    }
+    return (
+        <main className="pt-16 p-4 container mx-auto">
+            <h1>{message}</h1>
+            <p>{details}</p>
+            {stack && (
+                <pre className="w-full p-4 overflow-x-auto">
+                    <code>{stack}</code>
+                </pre>
+            )}
+        </main>
+    );
+}

package/templates/react-router-ssr/convex/schema.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { defineSchema, defineTable } from "convex/server";
+import { v } from "convex/values";
+export default defineSchema({
+    // Define your tables here
+    // Example: defineTable({ name: v.string() }),
+});

package/templates/react-router-ssr/tsconfig.json.hbs ADDED Viewed

@@ -0,0 +1,28 @@
+{
+    "include": [
+        "**/*.ts",
+        "**/*.tsx",
+        "**/.server/**/*",
+        "**/.client/**/*",
+        ".react-router/types/**/*"
+    ],
+    "compilerOptions": {
+        "allowImportingTsExtensions": true,
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "skipLibCheck": true,
+        "verbatimModuleSyntax": true,
+        "noEmit": true,
+        "moduleResolution": "Bundler",
+        "module": "ESNext",
+        "target": "ESNext",
+        "lib": ["ESNext", "DOM", "DOM.Iterable"],
+        "types": ["vite/client"],
+        "jsx": "react-jsx",
+        "rootDirs": [".", "./.react-router/types"],
+        "paths": {
+            "~/*": ["./app/*"]
+        }
+    }
+}

package/templates/react-router-ssr/wrangler.jsonc.hbs ADDED Viewed

@@ -0,0 +1,13 @@
+{
+    "$schema": "node_modules/wrangler/config-schema.json",
+    "name": "{{repository}}",
+    "compatibility_date": "2025-04-01",
+    "compatibility_flags": ["nodejs_compat"],
+    "assets": {
+        "directory": "./build/client",
+        "binding": "ASSETS"
+    },
+    "observability": {
+        "enabled": true
+    }
+}

package/templates/react-router-ssr-convex/app/lib/client.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import type { DefaultOptions } from "@tanstack/react-query";
+import { QueryClient } from "@tanstack/react-query";
+export function createQueryClient(overrides: DefaultOptions["queries"] = {}) {
+    return new QueryClient({
+        defaultOptions: {
+            queries: {
+                // With SSR, we usually want to set some default staleTime
+                // Above 0 to avoid refetching immediately on the client
+                staleTime: 60 * 1000,
+                // Allows us to use `const { promise } = useQuery(...)`
+                // Along with `React.use(promise)`
+                experimental_prefetchInRender: true,
+                ...overrides,
+            },
+        },
+    });
+}

package/templates/react-router-ssr-convex/app/tanstack-query-integration/middleware.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import type { QueryClient } from "@tanstack/react-query";
+import type { MiddlewareFunction } from "react-router";
+import assert from "node:assert";
+import { createContext, RouterContextProvider } from "react-router";
+const QUERY_CLIENT = createContext<QueryClient | null>(null);
+export function setQueryClient(createClient: () => QueryClient): MiddlewareFunction {
+    return ({ context }) => context.set(QUERY_CLIENT, createClient());
+}
+export function getQueryClient(context: Readonly<RouterContextProvider>): QueryClient {
+    const client = context.get(QUERY_CLIENT);
+    assert(client, "must use `setQueryClient` to set the query client for this application");
+    return client;
+}

package/templates/react-router-ssr-convex/app/tanstack-query-integration/query-preloader.ts ADDED Viewed

@@ -0,0 +1,125 @@
+import type {
+    DefaultError,
+    DehydratedState,
+    EnsureQueryDataOptions,
+    QueryKey,
+} from "@tanstack/react-query";
+import type { LoaderFunctionArgs } from "react-router";
+import { dehydrate } from "@tanstack/react-query";
+import { useMatches } from "react-router";
+import { getQueryClient } from "./middleware.ts";
+const DEHYDRATED_STATE_KEY = "@tanstack/react-query:dehydrated-state";
+type MaybePromise<T> = T | Promise<T>;
+function mergeDehydratedStates(states: DehydratedState[]): DehydratedState {
+    const allMutations = states.flatMap(s => s.mutations ?? []);
+    const allQueries = states.flatMap(s => s.queries ?? []);
+    // Last-write-wins de-dupe by queryHash
+    const byHash = new Map<string, (typeof allQueries)[number]>();
+    for (const query of allQueries) {
+        if (!query) {
+            continue;
+        }
+        byHash.set(query.queryHash, query);
+    }
+    return {
+        mutations: allMutations,
+        queries: Array.from(byHash.values()),
+    };
+}
+export function useDehydratedState() {
+    const matches = useMatches();
+    const states = matches
+        .map(m => (m.loaderData as any)?.[DEHYDRATED_STATE_KEY] as DehydratedState | undefined)
+        .filter((s): s is DehydratedState => Boolean(s));
+    return states.length ? mergeDehydratedStates(states) : undefined;
+}
+export function createPreloader<
+    TLoaderArgs extends LoaderFunctionArgs,
+    TData extends Record<string, unknown> | void,
+>(
+    fn: (args: QueryLoaderArgs<TLoaderArgs>) => MaybePromise<TData | Response>,
+): QueryLoader<TLoaderArgs, TData> {
+    return (async args => {
+        const prefetches: Promise<any>[] = [];
+        const query = getQueryClient(args.context);
+        // If the navigation is aborted, cancel any in-flight queries
+        if (args.request.signal) {
+            if (args.request.signal.aborted) {
+                query.cancelQueries();
+            } else {
+                args.request.signal.addEventListener("abort", () => query.cancelQueries(), {
+                    once: true,
+                });
+            }
+        }
+        function preload<
+            TQueryFnData,
+            TError = DefaultError,
+            TData = TQueryFnData,
+            TQueryKey extends QueryKey = QueryKey,
+        >(options: EnsureQueryDataOptions<TQueryFnData, TError, TData, TQueryKey>): Promise<TData> {
+            const result = query.ensureQueryData(options);
+            prefetches.push(result);
+            return result;
+        }
+        const result = await fn({ ...args, preload });
+        if (result instanceof Response) {
+            return result;
+        }
+        if (args.request.signal.aborted) {
+            throw args.request.signal.reason ?? new DOMException("Aborted", "AbortError");
+        }
+        await Promise.all(prefetches);
+        if (args.request.signal.aborted) {
+            throw args.request.signal.reason ?? new DOMException("Aborted", "AbortError");
+        }
+        const dehydratedState = { [DEHYDRATED_STATE_KEY]: dehydrate(query) };
+        return {
+            ...result,
+            ...dehydratedState,
+        };
+    }) as QueryLoader<TLoaderArgs, TData>;
+}
+type WithDehydratedState<TData extends object | void> = (TData extends void ? {} : TData) & {
+    [DEHYDRATED_STATE_KEY]: DehydratedState;
+};
+export type QueryLoaderReturn<TData extends object | void> = Promise<
+    WithDehydratedState<TData> | Response
+>;
+export type QueryLoader<LoaderArgs, TData extends object | void> = (
+    ctx: LoaderArgs,
+) => QueryLoaderReturn<TData>;
+export type QueryLoaderArgs<Args extends LoaderFunctionArgs = LoaderFunctionArgs> = Args & {
+    preload<
+        TQueryFnData,
+        TError = DefaultError,
+        TData = TQueryFnData,
+        TQueryKey extends QueryKey = QueryKey,
+    >(
+        options: EnsureQueryDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+    ): Promise<TData>;
+};

package/templates/react-shared/app/routes.ts.hbs ADDED Viewed

@@ -0,0 +1,3 @@
+import { index, type RouteConfig } from "@react-router/dev/routes";
+export default [index("home.tsx")] satisfies RouteConfig;

package/templates/react-shared/app/styles/tailwind.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ @import "tailwindcss";

package/templates/react-shared/react-compiler.plugin.ts.hbs ADDED Viewed

@@ -0,0 +1,10 @@
+import babel from "@rolldown/plugin-babel";
+import { reactCompilerPreset } from "@vitejs/plugin-react";
+export type ReactCompilerConfig = Partial<Parameters<typeof reactCompilerPreset>[0]>;
+export function reactCompiler(config: ReactCompilerConfig = {}) {
+    return babel({
+        presets: [reactCompilerPreset(config as Parameters<typeof reactCompilerPreset>[0])],
+    } as Parameters<typeof babel>[0]);
+}

package/templates/react-shared/react-router.config.ts.hbs ADDED Viewed

@@ -0,0 +1,9 @@
+import type { Config } from "@react-router/dev/config";
+export default {
+    future: {
+        v8_middleware: true,
+        v8_viteEnvironmentApi: true,
+    },
+    ssr: {{ssr}},
+} satisfies Config;

package/templates/shared/.gitignore.hbs ADDED Viewed

@@ -0,0 +1,23 @@
+.DS_Store
+.env
+.env.local
+/node_modules/
+{{#if isReactRouter}}
+# React Router
+/.react-router/
+/build/
+{{/if}}
+{{#if isRSC}}
+# Content Layer
+/.sprinkles/
+# Cloudflare
+.wrangler
+{{/if}}
+{{#if isPackage}}
+# Build
+/dist/
+{{/if}}

package/templates/shared/.node-version ADDED Viewed

	@@ -0,0 +1 @@
1	+ 24

package/templates/shared/.vscode/extensions.json.hbs ADDED Viewed

@@ -0,0 +1,8 @@
+{
+    "recommendations": [
+        "VoidZero.vite-plus-extension-pack",
+        "TypeScriptTeam.native-preview"{{#if isReactRouter}},
+        "bradlc.vscode-tailwindcss"{{/if}}{{#if hasContentLayer}},
+        "unifiedjs.vscode-mdx"{{/if}}
+    ]
+}

package/templates/shared/.vscode/settings.json.hbs ADDED Viewed

@@ -0,0 +1,72 @@
+{
+    "js/ts.preferences.importModuleSpecifierEnding": "js",
+    "js/ts.experimental.useTsgo": true,
+    "oxc.enable.oxlint": true,
+    "oxc.enable.oxfmt": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.oxc": "always",
+        "source.addMissingImports.ts": "explicit",
+        "source.removeUnused.ts": "never"
+    },
+    "editor.defaultFormatter": "oxc.oxc-vscode",
+    "editor.formatOnSave": true,
+    "editor.formatOnSaveMode": "file",
+    "[typescript]": {
+        "editor.defaultFormatter": "oxc.oxc-vscode"
+    },
+    "[tsx]": {
+        "editor.defaultFormatter": "oxc.oxc-vscode"
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "oxc.oxc-vscode"
+    },
+    "[jsx]": {
+        "editor.defaultFormatter": "oxc.oxc-vscode"
+    },
+    "[css]": {
+        "editor.defaultFormatter": "oxc.oxc-vscode"
+    },
+    "[json]": {
+        "editor.defaultFormatter": "oxc.oxc-vscode"
+    },
+    "[jsonc]": {
+        "editor.defaultFormatter": "oxc.oxc-vscode"
+    },
+    "[markdown]": {
+        "editor.defaultFormatter": "oxc.oxc-vscode"
+    },
+{{#if hasContentLayer}}
+    "[mdx]": {
+        "editor.defaultFormatter": "oxc.oxc-vscode"
+    },
+    "mdx.server.enable": true,
+{{/if}}
+    "explorer.fileNesting.enabled": true,
+    "explorer.fileNesting.expand": false,
+    "explorer.fileNesting.patterns": {
+        "package.json": ".github*, .npmrc, .prettierignore, .vscode*, biome.json*, bun.lock*, components.json, eslint.config.*, .node-version,.oxfmtrc.jsonc, .oxlintrc.jsonc, pnpm-*.yaml, prettier.config.*, tsconfig.*, wrangler.toml, wrangler.*.toml, wrangler.json*, wrangler.*.json, wrangler.*.jsonc, workspace.json",
+        "readme*": "agent*, authors, backers*, changelog*, citation*, claude*, code_of_conduct*, codeowners, contributing*, contributors, copying, credits, governance.md, history.md, license*, maintainers, readme*, security.md, sponsors*"{{#if isReactRouter}},
+        "vite.config.*": "react-router.config.*, vitest.config.*, *.plugin.ts"{{/if}}
+    },
+{{#if isReactRouter}}
+    "files.exclude": {
+        "**/.react-router": true,
+        "**/.wrangler": true{{#if hasContentLayer}},
+        "**/.sprinkles": true{{/if}}
+    },
+    "tailwindCSS.classFunctions": ["cva", "cx"],
+{{/if}}
+    "biome.enabled": false,
+    "prettier.enable": false,
+    "eslint.enable": false,
+    "dprint.experimentalLsp": false,
+    "deno.enable": false,
+    "unocss.disable": true,
+    "vitest.ignoreWorkspace": true
+}