chore: add import sorting

.prettierrc

@@ -1,10 +1,22 @@
 {
-	"trailingComma": "all",
-	"tabWidth": 2,
-	"printWidth": 100,
-	"semi": false,
-	"singleQuote": true,
-	"useTabs": false,
-	"arrowParens": "avoid",
-	"bracketSpacing": true
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": true,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "^solid-js(.*)$",
+    "^solid-(.*)$",
+    "^shiki(.*)$",
+    "^~/components/ui/(.*)$",
+    "^~/(.*)$",
+    "^[./]"
+  ],
+  "importOrderGroupNamespaceSpecifiers": true,
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }

playgrounds/app/package.json

@@ -59,6 +59,7 @@
     "node": ">=18"
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/jsonwebtoken": "^9.0.7",
     "drizzle-kit": "^0.26.2",
     "tsx": "^4.19.1"

playgrounds/app/src/app.css

@@ -102,9 +102,7 @@
 
   body {
     @apply bg-background text-foreground;
-    font-feature-settings:
-      'rlig' 1,
-      'calt' 1;
+    font-feature-settings: 'rlig' 1, 'calt' 1;
   }
 }
 

playgrounds/app/src/app.tsx

@@ -1,11 +1,14 @@
-import { Suspense } from 'solid-js'
+import '@fontsource/bungee-inline'
+import '@fontsource/roboto'
 import { Router } from '@solidjs/router'
 import { FileRoutes } from '@solidjs/start/router'
+
+import { Suspense } from 'solid-js'
+
 import { Toaster } from 'solid-sonner'
+
 import Header from '~/components/Header'
-import Footer from './components/Footer'
-import '@fontsource/bungee-inline'
-import '@fontsource/roboto'
+
 import './app.css'
 
 export default function App() {

playgrounds/app/src/components/Editor.tsx

@@ -1,21 +1,57 @@
-import { interpolate, interpolateColors, Easing } from 'remotion'
+import wasmURL from '@ffmpeg/core/wasm?url'
+import coreURL from '@ffmpeg/core?url'
+import { FFmpeg } from '@ffmpeg/ffmpeg'
+import { fetchFile, toBlobURL } from '@ffmpeg/util'
+import { useNavigate } from '@solidjs/router'
+import clsx from 'clsx'
+import { openDB } from 'idb'
 import { encode } from 'modern-gif'
 import workerUrl from 'modern-gif/worker?url'
+import { Easing, interpolate, interpolateColors } from 'remotion'
+
+import { Show, createEffect, createMemo, createSignal, onCleanup, onMount } from 'solid-js'
+import { SetStoreFunction } from 'solid-js/store'
+
+import { FaSolidCaretDown, FaSolidCaretUp } from 'solid-icons/fa'
+import { HiOutlineCog } from 'solid-icons/hi'
+import { toast } from 'solid-sonner'
+
+import type { HighlighterGeneric } from 'shiki'
+import { bundledLanguages, bundledThemes, createHighlighter } from 'shiki'
 import 'shiki-magic-move/dist/style.css'
+import { ShikiMagicMove } from 'shiki-magic-move/solid'
+import { MagicMoveElement } from 'shiki-magic-move/types'
+
 import {
-  ComboboxItem,
-  ComboboxItemLabel,
-  ComboboxItemIndicator,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '~/components/ui/accordion'
+import { Button } from '~/components/ui/button'
+import { Checkbox } from '~/components/ui/checkbox'
+import { Collapsible, CollapsibleContent } from '~/components/ui/collapsible'
+import {
+  Combobox,
+  ComboboxContent,
   ComboboxControl,
   ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxItemLabel,
   ComboboxTrigger,
-  ComboboxContent,
-  Combobox,
 } from '~/components/ui/combobox'
-import { Button } from '~/components/ui/button'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs'
-import { TextField, TextFieldInput } from '~/components/ui/text-field'
-import { MagicMoveElement } from 'shiki-magic-move/types'
+import { Dialog, DialogContent, DialogFooter } from '~/components/ui/dialog'
+import { Label } from '~/components/ui/label'
+import { ProgressCircle } from '~/components/ui/progress-circle'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '~/components/ui/select'
+import { Separator } from '~/components/ui/separator'
 import {
   Slider,
   SliderFill,
@@ -24,55 +60,14 @@ import {
   SliderTrack,
   SliderValueLabel,
 } from '~/components/ui/slider'
-import clsx from 'clsx'
-import { Checkbox } from '~/components/ui/checkbox'
-import { Label } from '~/components/ui/label'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '~/components/ui/dialog'
-import {
-  createEffect,
-  createMemo,
-  createResource,
-  createSignal,
-  onCleanup,
-  Setter,
-  Show,
-  onMount,
-} from 'solid-js'
-import type { HighlighterGeneric } from 'shiki'
-import { createHighlighter, bundledThemes, bundledLanguages } from 'shiki'
-import { ShikiMagicMove } from 'shiki-magic-move/solid'
-import { AnimationFrameConfig, SnippetSettings } from '~/types'
-import { authFetch } from '~/lib/utils'
-import { useNavigate } from '@solidjs/router'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs'
+import { TextField, TextFieldInput } from '~/components/ui/text-field'
+
 import { authToken } from '~/lib/store'
-import { toast } from 'solid-sonner'
-import { Separator } from './ui/separator'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from './ui/dropdown-menu'
+import { authFetch } from '~/lib/utils'
+import { AnimationFrameConfig, SnippetSettings } from '~/types'
+
 import { ShikiCodeBlock } from './ShikiCodeBlock'
-import { SetStoreFunction } from 'solid-js/store'
-import { FFmpeg } from '@ffmpeg/ffmpeg'
-import { fetchFile, toBlobURL } from '@ffmpeg/util'
-import coreURL from '@ffmpeg/core?url'
-import wasmURL from '@ffmpeg/core/wasm?url'
-import { openDB } from 'idb'
-import { ProgressCircle } from './ui/progress-circle'
-import { Collapsible, CollapsibleContent } from './ui/collapsible'
-import { FaSolidCaretDown, FaSolidCaretUp } from 'solid-icons/fa'
-import { HiOutlineCog } from 'solid-icons/hi'
 
 const animationSeconds = 1
 const animationFPS = 30

playgrounds/app/src/components/Footer.tsx

@@ -1,4 +1,5 @@
 import { A } from '@solidjs/router'
+
 import { linkStyles } from '~/lib/styles'
 
 export default function Footer() {

playgrounds/app/src/components/Header.tsx

@@ -1,29 +1,31 @@
+import { makePersisted } from '@solid-primitives/storage'
 import { A } from '@solidjs/router'
-import { Button } from './ui/button'
+
+import { Show, createSignal } from 'solid-js'
+
+import { FaSolidMoon, FaSolidSun } from 'solid-icons/fa'
 import { OcMarkgithub2, OcQuestion2 } from 'solid-icons/oc'
-import { FaSolidSun, FaSolidMoon } from 'solid-icons/fa'
-import { createThemeSwitcher } from '~/components/theme-switcher'
-import { authToken } from '~/lib/store'
-import { createSignal, Show } from 'solid-js'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '~/components/ui/dropdown-menu'
-import { user } from '~/lib/store'
 import { TbCode, TbDoorExit, TbQuestionMark } from 'solid-icons/tb'
-import { linkStyles } from '~/lib/styles'
+
+import { Button } from '~/components/ui/button'
 import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from '~/components/ui/dialog'
-import { makePersisted } from '@solid-primitives/storage'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu'
+
+import { createThemeSwitcher } from '~/components/theme-switcher'
+import { authToken } from '~/lib/store'
+import { user } from '~/lib/store'
+import { linkStyles } from '~/lib/styles'
 
 export default function Header() {
   const [isShowingHelpDialog, setIsShowingHelpDialog] = makePersisted(createSignal(true), {

playgrounds/app/src/components/ShikiCodeBlock.tsx

@@ -1,7 +1,8 @@
-import { createSignal, onMount, createEffect } from 'solid-js'
+import { createEffect, createSignal, onMount } from 'solid-js'
+
 import { createHighlighter } from 'shiki'
-import { autoload, hookClosingPairs, hookTab, ShikiCode } from 'shikicode/plugins'
 import { shikiCode } from 'shikicode'
+import { ShikiCode, autoload, hookClosingPairs, hookTab } from 'shikicode/plugins'
 
 import { cn } from '~/lib/utils'
 

playgrounds/app/src/components/SnippetPreview.tsx

@@ -1,5 +1,6 @@
 import { Highlighter } from 'shiki'
 import { ShikiMagicMove } from 'shiki-magic-move/solid'
+
 import { Snippet } from '~/types'
 
 interface SnippetPreviewProps {

playgrounds/app/src/components/theme-switcher.tsx

@@ -1,6 +1,7 @@
-import { createSignal, createEffect } from 'solid-js'
 import { makePersisted } from '@solid-primitives/storage'
 
+import { createEffect, createSignal } from 'solid-js'
+
 export function createThemeSwitcher() {
   const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
   const [isDarkMode, setIsDarkMode] = makePersisted(createSignal(prefersDarkScheme.matches), {

playgrounds/app/src/db/client.ts

@@ -1,5 +1,6 @@
 import 'dotenv/config'
 import { drizzle } from 'drizzle-orm/libsql'
+
 import { schema } from './schema'
 
 export const db = drizzle({

playgrounds/app/src/db/schema.ts

@@ -1,4 +1,4 @@
-import { int, sqliteTable, text, real } from 'drizzle-orm/sqlite-core'
+import { int, real, sqliteTable, text } from 'drizzle-orm/sqlite-core'
 
 export const usersTable = sqliteTable('users_table', {
   id: text().primaryKey(),

playgrounds/app/src/entry-client.tsx

@@ -1,4 +1,4 @@
 // @refresh reload
-import { mount, StartClient } from '@solidjs/start/client'
+import { StartClient, mount } from '@solidjs/start/client'
 
 mount(() => <StartClient />, document.getElementById('app')!)

playgrounds/app/src/entry-server.tsx

@@ -1,5 +1,5 @@
 // @refresh reload
-import { createHandler, StartServer } from '@solidjs/start/server'
+import { StartServer, createHandler } from '@solidjs/start/server'
 
 export default createHandler(() => (
   <StartServer

playgrounds/app/src/lib/ids.ts

@@ -1,2 +1,3 @@
 import { customAlphabet } from 'nanoid'
+
 export const customNanoid = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 24)

playgrounds/app/src/lib/middleware.ts

@@ -1,8 +1,10 @@
+import type { APIEvent } from '@solidjs/start/server'
+import { eq } from 'drizzle-orm'
+
+import { db } from '~/db/client'
 import { usersTable } from '~/db/schema'
+
 import { decodeToken } from './jwt'
-import { db } from '~/db/client'
-import { eq } from 'drizzle-orm'
-import type { APIEvent } from '@solidjs/start/server'
 
 export async function getUser({ request }: APIEvent) {
   const token = request.headers.get('Authorization')?.replace('Bearer ', '')

playgrounds/app/src/lib/store.ts

@@ -1,5 +1,7 @@
 import { makePersisted } from '@solid-primitives/storage'
+
 import { createSignal } from 'solid-js'
+
 import { User } from '~/types'
 
 export const [authToken, setAuthToken] = makePersisted(createSignal(''), {

playgrounds/app/src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
+
 import { authToken } from './store'
 
 export function cn(...inputs: ClassValue[]) {

playgrounds/app/src/routes/about.tsx

@@ -1,5 +1,7 @@
 import { A } from '@solidjs/router'
+
 import { createResource } from 'solid-js'
+
 import { linkStyles } from '~/lib/styles'
 import { getGithubContributors } from '~/lib/utils'
 

playgrounds/app/src/routes/api/oauth.ts

@@ -1,6 +1,7 @@
 import type { APIEvent } from '@solidjs/start/server'
 import 'dotenv/config'
 import { eq } from 'drizzle-orm'
+
 import { db } from '~/db/client'
 import { usersTable } from '~/db/schema'
 import { customNanoid } from '~/lib/ids'

playgrounds/app/src/routes/api/snippets.ts

@@ -1,10 +1,11 @@
 import type { APIEvent } from '@solidjs/start/server'
 import { eq } from 'drizzle-orm'
+
 import { db } from '~/db/client'
 import { snippetsTable } from '~/db/schema'
+import { customNanoid } from '~/lib/ids'
 import { getUser } from '~/lib/middleware'
 import { snippetValidator } from '~/lib/validators'
-import { customNanoid } from '~/lib/ids'
 
 export async function GET(event: APIEvent): Promise<Response> {
   const user = await getUser(event)

playgrounds/app/src/routes/api/snippets/[snippetId].ts

@@ -1,5 +1,6 @@
 import type { APIEvent } from '@solidjs/start/server'
 import { and, eq } from 'drizzle-orm'
+
 import { db } from '~/db/client'
 import { snippetsTable } from '~/db/schema'
 import { getUser } from '~/lib/middleware'

playgrounds/app/src/routes/index.tsx

@@ -1,8 +1,9 @@
-import { createSignal } from 'solid-js'
 import { makePersisted } from '@solid-primitives/storage'
+
+import { createStore } from 'solid-js/store'
+
 import Editor from '~/components/Editor'
 import { SnippetSettings } from '~/types'
-import { createStore } from 'solid-js/store'
 
 const left = `
 import { render } from "solid-js/web";

playgrounds/app/src/routes/logged-out.tsx

@@ -1,6 +1,9 @@
-import { Button } from '~/components/ui/button'
-import { OcMarkgithub2 } from 'solid-icons/oc'
 import { onMount } from 'solid-js'
+
+import { OcMarkgithub2 } from 'solid-icons/oc'
+
+import { Button } from '~/components/ui/button'
+
 import { setAuthToken } from '~/lib/store'
 
 export default function LoggedOut() {