chore: added eslint and prettier (#196)

.eslintrc.json

@@ -0,0 +1,45 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "overrides": [
+    {
+      "files": ["src/**/*.js", "src/**/*.ts"],
+      "rules": {
+        "prefer-const": "off"
+      }
+    },
+    {
+      "files": ["test/**/*.ts`", "test/**/*.tsx"],
+      "rules": {
+        "react/jsx-key": "off"
+      }
+    }
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "@typescript-eslint"],
+  "rules": {
+    "no-inner-declarations": 0,
+    "no-useless-escape": 1,
+    "@typescript-eslint/ban-ts-comment": 1,
+    "@typescript-eslint/no-extra-semi": 0,
+    "@typescript-eslint/no-shadow": 2,
+    "@typescript-eslint/ban-types": 0,
+    "@typescript-eslint/no-namespace": 0,
+    "react-hooks/rules-of-hooks": 2,
+    "react-hooks/exhaustive-deps": 1,
+    "react/prop-types": 0
+  },
+  "ignorePatterns": ["dist/", "node_modules", "vendor"]
+}

.prettierignore

@@ -0,0 +1,8 @@
+.github/
+node_modules
+**/.next/**
+**/_next/**
+**/dist/**
+src/vendor/
+pnpm-lock.yaml
+*.md

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false
+}

package.json

@@ -30,7 +30,11 @@
     "build:default": "tsup",
     "build:wasm": "WASM=1 tsup",
     "test": "NODE_ENV=test vitest run --outputTruncateLength=9999999",
-    "dev:test": "NODE_ENV=test vitest --update --outputTruncateLength=9999999"
+    "dev:test": "NODE_ENV=test vitest --update --outputTruncateLength=9999999",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet",
+    "lint:fix": "pnpm lint --fix",
+    "prettier-check": "prettier --check .",
+    "prettier-fix": "prettier --write ."
   },
   "repository": {
     "type": "git",
@@ -54,10 +58,16 @@
     "@types/opentype.js": "^1.3.3",
     "@types/react": "^17.0.38",
     "@types/yoga-layout": "^1.9.4",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
     "@vitest/ui": "^0.7.6",
     "concurrently": "^7.3.0",
     "esbuild-plugin-replace": "^1.2.0",
+    "eslint": "^8.25.0",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest-image-snapshot": "^5.2.0",
+    "prettier": "^2.7.1",
     "react": "^17.0.2",
     "tsup": "^5.11.13",
     "twrnc": "^3.4.0",

playground/components/introduction.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import styles from './introduction.module.css'
 
 export default function Introduction({ onClose }) {
@@ -11,13 +12,15 @@ export default function Introduction({ onClose }) {
         <a
           href='https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation'
           target='_blank'
+          rel='noreferrer'
         >
           our documentation
         </a>{' '}
         or the{' '}
         <a
           href='https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images'
           target='_blank'
+          rel='noreferrer'
         >
           announcement post
         </a>

playground/pages/_app.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import Head from 'next/head'
 
 import '../styles.css'

playground/pages/_document.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {

playground/pages/index.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import satori from 'satori'
 import { LiveProvider, LiveContext, withLive } from 'react-live'
 import { useEffect, useState, useRef, useContext } from 'react'
@@ -308,17 +309,19 @@ function LiveEditor({ id }) {
         editedCards[id] = newCode
         onChange(newCode)
       }}
-      onMount={async (editor, monaco) => {
-        const modelUri = monaco.Uri.file('satori.tsx')
-        const codeModel = monaco.editor.createModel(
+      onMount={async (editor, _monaco) => {
+        const modelUri = _monaco.Uri.file('satori.tsx')
+        const codeModel = _monaco.editor.createModel(
           editedCards[id],
           'typescript',
           modelUri // Pass the file name to the model here.
         )
-        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+        _monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
           jsx: 'react',
         })
-        monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({})
+        _monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions(
+          {}
+        )
         editor.setModel(codeModel)
       }}
       options={{
@@ -452,16 +455,16 @@ const LiveSatori = withLive(function ({ live }) {
               // the playground only to make it look less blurry.
               setTimeout(() => {
                 if (cancelled) return
-                const renderer = new resvg.Resvg(_result, {
+                const _renderer = new resvg.Resvg(_result, {
                   fitTo: {
                     mode: 'width',
                     value: width * 2,
                   },
                 })
-                const pngData = renderer.render()
+                const _pngData = _renderer.render()
                 setObjectURL(
                   URL.createObjectURL(
-                    new Blob([pngData], { type: 'image/png' })
+                    new Blob([_pngData], { type: 'image/png' })
                   )
                 )
               }, 20)
@@ -532,9 +535,9 @@ const LiveSatori = withLive(function ({ live }) {
           'HTML (Native)',
         ]}
         onChange={(text) => {
-          const renderType = text.split(' ')[0].toLowerCase()
+          const _renderType = text.split(' ')[0].toLowerCase()
           // 'svg' | 'png' | 'html' | 'pdf'
-          setRenderType(renderType)
+          setRenderType(_renderType)
         }}
       >
         <div className='preview-card'>
@@ -619,7 +622,7 @@ const LiveSatori = withLive(function ({ live }) {
               {renderType === 'pdf' || renderType === 'png' ? (
                 <>
                   {' '}
-                  <a href={objectURL} target='_blank'>
+                  <a href={objectURL} target='_blank' rel='noreferrer'>
                     (View in New Tab ↗)
                   </a>
                 </>
@@ -738,6 +741,7 @@ const LiveSatori = withLive(function ({ live }) {
               }
               target={result ? '_blank' : ''}
               download={result ? 'image.svg' : false}
+              rel='noreferrer'
             >
               Export SVG
             </a>
@@ -755,7 +759,11 @@ const LiveSatori = withLive(function ({ live }) {
           </div>
           <div className='control'>
             <label>Satori Version</label>
-            <a href='https://github.com/vercel/satori' target='_blank'>
+            <a
+              href='https://github.com/vercel/satori'
+              target='_blank'
+              rel='noreferrer'
+            >
               {packageJson.version}
             </a>
           </div>
@@ -816,7 +824,9 @@ export default function Playground() {
     try {
       const hasVisited = localStorage.getItem('_vercel_og_playground_visited')
       if (hasVisited) return
-    } catch (e) {}
+    } catch (e) {
+      console.error(e)
+    }
 
     setShowIntroduction(true)
   }, [])