get framework together

Author: neolefty

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.idea/.gitignore

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

.idea/codeStyles/Project.xml

@@ -0,0 +1,7 @@
+version: '3'
+
+tasks:
+  dev:
+    desc: "Run on localhost:3000"
+    cmds:
+      - pnpm dev

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,4 @@
+export const MergeReducer = <T extends {}>(
+    state: Readonly<T>,
+    action: Partial<Readonly<T>>,
+): T => ({ ...state, ...action })

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,40 @@
+"use client"
+
+import { PropsWithChildren, ReactNode } from "react"
+import { usePathname } from "next/navigation"
+
+export const PageBase = ({ children }: PropsWithChildren) => {
+    return (
+        <div className="flex flex-col min-h-screen">
+            <NavBar />
+            <main className="flex-grow flex flex-col">{children}</main>
+        </div>
+    )
+}
+
+export const NavBar = () => (
+    <header className="w-screen flex flex-row  justify-between text-xl border-b-2 border-black dark:border-white">
+        <h1 className="justify-self-start font-bold bg-amber-300  dark:bg-amber-900 px-2 py-1">
+            JS Collection Benchmarks
+        </h1>
+        <Nav route="bench">Benchmarks</Nav>
+        <Nav route="next">Next.js Guide</Nav>
+    </header>
+)
+
+const Nav = ({ route, children }: { route: string; children: ReactNode }) => {
+    const path = usePathname()
+    const isCurrent = path.toLowerCase().indexOf(route) >= 0
+    return isCurrent ? (
+        <nav className="flex-grow text-center bg-green-300 dark:bg-green-700 px-2 py-1">
+            {children}
+        </nav>
+    ) : (
+        <a
+            href={`/${route}`}
+            className="flex-grow text-center bg-green-300 dark:bg-green-900 px-2 py-1"
+        >
+            {children}
+        </a>
+    )
+}

.idea/js-collection-benchmarks.iml

@@ -0,0 +1,89 @@
+"use client"
+
+import {
+    Dispatch,
+    FormEvent,
+    Fragment,
+    useCallback,
+    useEffect,
+    useReducer,
+} from "react"
+import { MergeReducer } from "@/app/_util/MergeReducer"
+import { capitalCase, headerCase } from "change-case"
+
+interface BenchConfig {
+    collectionSize: number // how big is the collection we're operating on
+    iterations: number // how many times we loop through
+    mutationFraction: number // between 0 and 1 — the fraction of items changed on each loop
+}
+
+const BenchInputs: ReadonlyArray<keyof BenchConfig> = [
+    "collectionSize",
+    "iterations",
+    "mutationFraction",
+]
+
+interface BenchState extends BenchConfig {
+    running?: boolean
+}
+
+const INITIAL_BENCH_STATE: BenchState = {
+    collectionSize: 1000,
+    iterations: 1000,
+    mutationFraction: 0.1,
+}
+
+export const BenchMarks = () => {
+    const [state, dispatch] = useReducer<typeof MergeReducer<BenchState>>(
+        MergeReducer,
+        INITIAL_BENCH_STATE,
+    )
+    const handleReset = useCallback(() => dispatch(INITIAL_BENCH_STATE), [])
+    const handleStart = useCallback((e: FormEvent) => {
+        dispatch({ running: true })
+        e.preventDefault()
+    }, [])
+    const handleCancel = useCallback((e: FormEvent) => {
+        dispatch({ running: false })
+        e.preventDefault()
+    }, [])
+    const { running } = state
+    useEffect(() => {
+        if (state.running) console.log("start")
+    }, [state.running])
+    return (
+        <form
+            onSubmit={running ? handleCancel : handleStart}
+            action="#"
+            className="flex-grow grid content-center justify-items-center items-center gap-3 grid-cols-2"
+        >
+            {BenchInputs.map((name) => (
+                <Fragment key={name}>
+                    <label htmlFor={name} className="justify-self-end">
+                        {capitalCase(name)}
+                    </label>
+                    <input
+                        name={name}
+                        type="number"
+                        className="input justify-self-start"
+                        onChange={(e) =>
+                            dispatch({
+                                [name]: fix(Number(e.target.value), name),
+                            })
+                        }
+                        value={state[name]}
+                        disabled={state.running}
+                    />
+                </Fragment>
+            ))}
+            <button className="btn col-span-2">
+                {running ? "Cancel" : "Start"}
+            </button>
+        </form>
+    )
+}
+
+const fix = (n: number, name: keyof BenchConfig): number =>
+    name === "mutationFraction"
+        ? Math.min(Math.max(0, n), 1)
+        : Math.max(0, Math.floor(n))

.idea/jsLinters/eslint.xml

@@ -0,0 +1,12 @@
+import { NavBar, PageBase } from "@/app/_util/PageBase"
+import { BenchMarks } from "@/app/bench/BenchMarks"
+
+const Benchmarks = () => {
+    return (
+        <PageBase>
+            <BenchMarks />
+        </PageBase>
+    )
+}
+
+export default Benchmarks

.idea/modules.xml

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}