Biome goes crazy. (#94)

Allow me to understate this PR: This formatter is faster.
anthonyshew · Sep 26, 2023 · 7ea2049 · 7ea2049 · vercel · Sep 26, 2023
1 parent 0fab4d3
commit 7ea2049
Show file tree

Hide file tree

Showing 29 changed files with 374 additions and 361 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -4,7 +4,7 @@ root = true
 charset = utf-8
 end_of_line = lf
 indent_size = 2
-indent_style = space
+indent_style = tab
 insert_final_newline = true
 trim_trailing_whitespace = true
 

diff --git a/.github/workflows/quality.yml b/.github/workflows/quality.yml
@@ -16,8 +16,8 @@ env:
   TURBO_TEAM: ${{ vars.TURBO_TEAM }}
 
 jobs:
-  prettier:
-    name: Prettier
+  format:
+    name: Formatter
     timeout-minutes: 10
     runs-on: ubuntu-latest
     steps:
@@ -26,8 +26,8 @@ jobs:
       - name: Setup
         uses: ./tooling/github-actions/setup
 
-      - name: Run Prettier
-        run: turbo format
+      - name: Run formatter
+        run: pnpm format
 
   eslint:
     name: ESLint

diff --git a/.prettierignore b/.prettierignore
diff --git a/.prettierrc.js b/.prettierrc.js
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["biomejs.biome"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
   "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
+  "editor.defaultFormatter": "biomejs.biome",
   "[prisma]": {
     "editor.defaultFormatter": "Prisma.prisma"
   },

diff --git a/apps/maestros/.prettierignore b/apps/maestros/.prettierignore
diff --git a/apps/maestros/app/(maestros)/contentHandlers.ts b/apps/maestros/app/(maestros)/contentHandlers.ts
@@ -21,7 +21,7 @@ export const sideBarItems = allDocuments
   });
 
 export const buildNavigationGroups = () => {
-  const buildMe: ((typeof sideBarItems)[number] & {
+  const buildMe: (typeof sideBarItems[number] & {
     children: typeof sideBarItems;
   })[] = [];
   const items = sideBarItems;

diff --git a/apps/maestros/app/(maestros)/monorepos/api/og/route.tsx b/apps/maestros/app/(maestros)/monorepos/api/og/route.tsx
@@ -19,71 +19,69 @@ export async function GET(req: Request) {
   const marginY = marginX + 40;
 
   return new ImageResponse(
-    (
+    <div
+      style={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        backgroundImage: 'url("https://shew.dev/images/maestros/og-bg.png")',
+        backgroundSize: '100% 100%',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div
+        style={{
+          marginLeft: marginX,
+          marginRight: marginX,
+          marginTop: marginY,
+          display: 'flex',
+          fontSize: 100,
+          fontFamily: 'Inter',
+          color: 'white',
+          whiteSpace: 'pre-wrap',
+        }}
+        tw="text-8xl"
+      >
+        {title}
+      </div>
       <div
         style={{
-          height: '100%',
-          width: '100%',
           display: 'flex',
           flexDirection: 'column',
-          alignItems: 'flex-start',
-          justifyContent: 'flex-start',
-          backgroundImage: 'url("https://shew.dev/images/maestros/og-bg.png")',
-          backgroundSize: '100% 100%',
-          backgroundPosition: 'center',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginLeft: marginX,
         }}
       >
-        <div
-          style={{
-            marginLeft: marginX,
-            marginRight: marginX,
-            marginTop: marginY,
-            display: 'flex',
-            fontSize: 100,
-            fontFamily: 'Inter',
-            color: 'white',
-            whiteSpace: 'pre-wrap',
-          }}
-          tw="text-8xl"
-        >
-          {title}
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            marginLeft: marginX,
-          }}
-        >
-          {subtitle ? (
-            <div
-              style={{ fontFamily: 'Inter' }}
-              tw="text-6xl text-slate-300 mt-8"
-            >
-              {subtitle}
-            </div>
-          ) : null}
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'flex-start',
-            marginLeft: marginX,
-          }}
-        >
-          {title !== 'Monorepo Maestros' ? (
-            <div tw="text-yellow-400 text-6xl mt-60">Monorepo Maestros</div>
-          ) : null}
-          <div tw="text-yellow-400 text-5xl mt-8">
-            The ultimate monorepo reference.
+        {subtitle ? (
+          <div
+            style={{ fontFamily: 'Inter' }}
+            tw="text-6xl text-slate-300 mt-8"
+          >
+            {subtitle}
           </div>
+        ) : null}
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+          marginLeft: marginX,
+        }}
+      >
+        {title !== 'Monorepo Maestros' ? (
+          <div tw="text-yellow-400 text-6xl mt-60">Monorepo Maestros</div>
+        ) : null}
+        <div tw="text-yellow-400 text-5xl mt-8">
+          The ultimate monorepo reference.
         </div>
       </div>
-    ),
+    </div>,
     {
       width: 1920,
       height: 1080,

diff --git a/apps/maestros/app/api/og/route.tsx b/apps/maestros/app/api/og/route.tsx
@@ -19,71 +19,69 @@ export async function GET(req: Request) {
   const titleIsMyName = title === 'Anthony Shew';
 
   return new ImageResponse(
-    (
+    <div
+      style={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundImage: 'url("https://shew.dev/images/og-bg.png")',
+        backgroundSize: '100% 100%',
+        backgroundPosition: 'center',
+      }}
+    >
       <div
         style={{
-          height: '100%',
-          width: '100%',
+          marginLeft: 190,
+          marginRight: 190,
+          marginBottom: 70,
           display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundImage: 'url("https://shew.dev/images/og-bg.png")',
-          backgroundSize: '100% 100%',
-          backgroundPosition: 'center',
+          fontSize: 140,
+          color: 'white',
+          fontFamily: 'Inter Bold',
+          whiteSpace: 'pre-wrap',
         }}
       >
+        {title}
+      </div>
+      {subtitle ? (
         <div
           style={{
             marginLeft: 190,
             marginRight: 190,
-            marginBottom: 70,
+            marginBottom: 120,
             display: 'flex',
-            fontSize: 140,
-            color: 'white',
-            fontFamily: 'Inter Bold',
+            fontSize: 50,
+            fontFamily: 'Inter',
             whiteSpace: 'pre-wrap',
           }}
+          tw="text-slate-300"
         >
-          {title}
+          {subtitle}
         </div>
-        {subtitle ? (
-          <div
-            style={{
-              marginLeft: 190,
-              marginRight: 190,
-              marginBottom: 120,
-              display: 'flex',
-              fontSize: 50,
-              fontFamily: 'Inter',
-              whiteSpace: 'pre-wrap',
-            }}
-            tw="text-slate-300"
-          >
-            {subtitle}
-          </div>
-        ) : null}
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <img
-            height={250}
-            src="https://shew.dev/images/me.jpg"
-            tw="rounded-full mb-10"
-            width={250}
-          />
-          <div style={{ fontFamily: 'Inter' }} tw="text-7xl text-white">
-            {titleIsMyName ? '' : 'Anthony Shew'}
-          </div>
-          <div tw="text-6xl text-slate-400 mt-8">{tagline}</div>
+      ) : null}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <img
+          height={250}
+          src="https://shew.dev/images/me.jpg"
+          tw="rounded-full mb-10"
+          width={250}
+        />
+        <div style={{ fontFamily: 'Inter' }} tw="text-7xl text-white">
+          {titleIsMyName ? '' : 'Anthony Shew'}
         </div>
+        <div tw="text-6xl text-slate-400 mt-8">{tagline}</div>
       </div>
-    ),
+    </div>,
     {
       width: 1920,
       height: 1080,

diff --git a/apps/maestros/components/Flow/data/ci.ts b/apps/maestros/components/Flow/data/ci.ts
@@ -55,13 +55,12 @@ export const rawCiNodes = [
 
 export const ciNodes = rawCiNodes.map((node) => handleNode(ciNodeId, node));
 
-const rawCiEdges: MinimumEdge<(typeof rawCiNodes)[number]['data']['label']>[] =
-  [
-    { source: 'Remote Cache', target: 'Jenkins' },
-    { source: 'Remote Cache', target: 'CircleCI' },
-    { source: 'Remote Cache', target: 'Docker' },
-    { source: 'Remote Cache', target: 'GitHub Actions' },
-    { source: 'Remote Cache', target: 'Vercel' },
-  ];
+const rawCiEdges: MinimumEdge<typeof rawCiNodes[number]['data']['label']>[] = [
+  { source: 'Remote Cache', target: 'Jenkins' },
+  { source: 'Remote Cache', target: 'CircleCI' },
+  { source: 'Remote Cache', target: 'Docker' },
+  { source: 'Remote Cache', target: 'GitHub Actions' },
+  { source: 'Remote Cache', target: 'Vercel' },
+];
 
 export const ciEdges = rawCiEdges.map((edge) => handleEdge(ciNodeId, edge));
diff --git a/apps/maestros/components/Flow/data/compilation.ts b/apps/maestros/components/Flow/data/compilation.ts
@@ -89,7 +89,7 @@ export const compilationNodes = rawCompilationNodes.map((node) =>
 );
 
 const rawCompilationEdges: MinimumEdge<
-  (typeof rawCompilationNodes)[number]['data']['label']
+  typeof rawCompilationNodes[number]['data']['label']
 >[] = [
   { source: 'Bundlers', target: 'tsc' },
   { source: 'Bundlers', target: 'tsup' },

diff --git a/apps/maestros/components/Flow/data/conformance.ts b/apps/maestros/components/Flow/data/conformance.ts
@@ -58,7 +58,7 @@ export const conformanceNodes = rawConformanceNodes.map((node) =>
 );
 
 const rawConformanceEdges: MinimumEdge<
-  (typeof rawConformanceNodes)[number]['data']['label']
+  typeof rawConformanceNodes[number]['data']['label']
 >[] = [
   { source: 'Guardrails', target: 'TypeScript' },
   { source: 'Guardrails', target: 'Prettier' },

diff --git a/apps/maestros/components/Flow/data/intergroupEdges.ts b/apps/maestros/components/Flow/data/intergroupEdges.ts
@@ -5,10 +5,10 @@ import { type rawStructureNodes, structureParentNode } from './structure';
 import { type MinimumEdge } from '#/components/Flow/utils';
 
 type AllNodes =
-  | (typeof rawCiNodes)[number]['data']['label']
-  | (typeof rawCompilationNodes)[number]['data']['label']
-  | (typeof rawConformanceNodes)[number]['data']['label']
-  | (typeof rawStructureNodes)[number]['data']['label'];
+  | typeof rawCiNodes[number]['data']['label']
+  | typeof rawCompilationNodes[number]['data']['label']
+  | typeof rawConformanceNodes[number]['data']['label']
+  | typeof rawStructureNodes[number]['data']['label'];
 
 type Groups = 'ci' | 'compilation' | 'conformance' | 'structure';
 

diff --git a/apps/maestros/components/Flow/data/structure.ts b/apps/maestros/components/Flow/data/structure.ts
@@ -95,7 +95,7 @@ export const structureNodes = rawStructureNodes.map((node) =>
 );
 
 const rawStructureEdges: MinimumEdge<
-  (typeof rawStructureNodes)[number]['data']['label']
+  typeof rawStructureNodes[number]['data']['label']
 >[] = [
   { source: 'Monorepo managers', target: 'Nx' },
   { source: 'Monorepo managers', target: 'Turborepo' },

diff --git a/apps/maestros/package.json b/apps/maestros/package.json
@@ -4,8 +4,6 @@
   "scripts": {
     "build": "next build",
     "dev": "next dev",
-    "format": "prettier . --check --cache --cache-location='node_modules/.cache/prettiercache'",
-    "format:fix": "prettier . --write --cache --cache-location='node_modules/.cache/prettiercache' --log-level=warn",
     "generate": "contentlayer build",
     "lint": "eslint . --cache --cache-location 'node_modules/.cache/.eslintcache' --max-warnings 0",
     "lint:fix": "eslint . --fix --cache --cache-location 'node_modules/.cache/.eslintcache' --max-warnings 0",

diff --git a/apps/starter-nextjs/.prettierignore b/apps/starter-nextjs/.prettierignore