fix: revert prettier@3

.github/workflows/pull_request.yml

@@ -27,7 +27,7 @@ jobs:
           version: latest
           run_install: true
       - name: Test
-        run: pnpm test && node scripts/esm-tests.mjs
+        run: pnpm test
   next:
     if: github.ref != 'refs/heads/master'
     runs-on: ubuntu-latest

.npmrc

@@ -4,7 +4,7 @@ fund=false
 loglevel=error
 package-lock=false
 prefer-dedupe=true
-prefer-offline=true
+prefer-offline=false
 resolution-mode=highest
 save-prefix=~
 save=false

package.json

@@ -137,7 +137,7 @@
     "postcss": "~8.4.29",
     "postcss-focus": "~7.0.0",
     "prepend-http": "~4.0.0",
-    "prettier": "~3.0.3",
+    "prettier": "2",
     "react": "18",
     "react-codecopy": "~5.0.2",
     "react-confetti": "~6.1.0",
@@ -181,8 +181,7 @@
     "simple-git-hooks": "latest",
     "standard": "latest",
     "standard-markdown": "latest",
-    "standard-version": "latest",
-    "zx": "latest"
+    "standard-version": "latest"
   },
   "engines": {
     "node": ">= 18"

src/components/elements/CodeEditor/CodeEditor.js

@@ -1,10 +1,12 @@
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { hash, prettier, getLines, template } from 'helpers'
 import { hideScrollbar, wordBreak } from 'helpers/style'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
+import identity from 'lodash/identity'
 import styled from 'styled-components'
 import { cx, radii } from 'theme'
 import range from 'lodash/range'
+import get from 'dlv'
 
 import codeTheme from './theme'
 import Runkit from '../Runkit/Runkit'
@@ -84,33 +86,21 @@ const CodeEditor = ({
   const className = getClassName(props)
   const highlightLines = getLines(className)
   const language = toAlias(getLanguage(className, props))
+  const pretty = get(prettier, language, identity)
+  const text = pretty(template(children)).trim()
   const id = `codeditor-${hash(children)}-${theme}`
 
-  const [content, setContent] = useState({
-    text: template(children).trim(),
-    isPretty: false
-  })
-
   const isInteractive =
-    runkitProps !== false &&
-    Runkit.isSupported({ language, text: content.text })
+    runkitProps !== false && Runkit.isSupported({ language, text })
 
   const [isLoaded, setIsLoaded] = useState(!isInteractive)
 
-  useEffect(() => {
-    async function asyncPretty () {
-      const prettyText = await prettier[language](content.text)
-      setContent({ text: prettyText.trim(), isPretty: true })
-    }
-    asyncPretty()
-  }, [content.text, language])
-
   const TerminalComponent = (
     <Terminal
       title={title}
       theme={theme}
       id={id}
-      text={content.text}
+      text={text}
       loading={!isLoaded}
       {...props}
     >
@@ -124,21 +114,21 @@ const CodeEditor = ({
           style={{}}
           wrapLines
         >
-          {content.text}
+          {text}
         </CustomSyntaxHighlighter>
       </TerminalTextWrapper>
     </Terminal>
   )
 
-  if (!isInteractive || !content.isPretty) return TerminalComponent
+  if (!isInteractive) return TerminalComponent
 
   return (
     <Runkit
       {...runkitProps}
       theme={theme}
       title={title}
       placeholderComponent={TerminalComponent}
-      source={content.text}
+      source={text}
       onLoad={element => {
         setIsLoaded(true)
         element.style['padding-top'] = '4px'

src/helpers/prettier.js

@@ -1,6 +1,5 @@
 import { format } from 'prettier/standalone'
-import estree from 'prettier/plugins/estree'
-import babel from 'prettier/plugins/babel'
+import babel from 'prettier/parser-babel'
 
 /**
  * https://prettier.io/docs/en/options.html
@@ -17,12 +16,12 @@ const PRETTIER_CONFIG = {
 
 const JS_OPTS = {
   parser: 'babel',
-  plugins: [babel, estree]
+  plugins: [babel]
 }
 
 const JSON_OPTS = {
   parser: 'json',
-  plugins: [babel, estree]
+  plugins: [babel]
 }
 
 /**
@@ -70,9 +69,9 @@ const serializeObject = (props, { quotes = true } = {}) => {
   }, '')
 }
 
-const prettier = async (code, opts) => {
+const prettier = (code, opts) => {
   try {
-    const pretty = await format(code, { ...PRETTIER_CONFIG, ...opts })
+    const pretty = format(code, { ...PRETTIER_CONFIG, ...opts })
     return pretty.replace(';<', '<')
   } catch (error) {
     if (error.name !== 'SyntaxError') console.error('[prettier]', error)

test/helpers/prettier.mjs → test/helpers/prettier.js

@@ -1,22 +1,22 @@
 import test from 'ava'
 
-import prettier, { serializeFmt } from '../../src/helpers/prettier.js'
+import prettier, { serializeFmt } from '../../src/helpers/prettier'
 
-test('js', async t => {
+test('js', t => {
   const code = `const mql = require('@microlink/mql')
   const { status, data } = await mql('https://geolocation.microlink.io', { apiKey: MyApiToken, proxy: 'https://myproxy:603f60f5@superproxy.cool:8001' })
   console.log(data)`
 
-  const output = await prettier.js(code)
+  const output = prettier.js(code)
 
   t.snapshot(output)
 })
 
-test('json', async t => {
+test('json', t => {
   const code =
     '{"title":"Wormholes Explained – Breaking Spacetime","description":"To support Kurzgesagt and learn more about Brilliant, go to https://www.brilliant.org/nutshell and sign up for free. The first 688 people that go to that lin...","lang":"en","author":"Kurzgesagt – In a Nutshell","publisher":"YouTube","image":{"url":"https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/img.youtube.com!vi!9P6rdqiybaw!maxresdefault.jpg.jpg","type":"jpg","size":120116,"height":720,"width":1280,"size_pretty":"120 kB","palette":["#C004F9","#EEEEA7","#25047C","#740296","#808018","#2C0494"],"background_color":"#EEEEA7","color":"#AC04DF","alternative_color":"#2C0494"},"audio":{"url":"https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/r3---sn-ab5sznly.googlevideo.com!videoplayback!c=WEB&clen=8935291&dur=552.054&ei=6gpAXv-3POHM8gTqtrm","type":"mp4","duration":552.054422,"size":8935291,"duration_pretty":"9m","size_pretty":"8.94 MB"},"url":"https://www.youtube.com/watch?v=9P6rdqiybaw","iframe":{"html":"<iframe width=\\"480\\" height=\\"270\\" src=\\"https://www.youtube.com/embed/9P6rdqiybaw?feature=oembed\\" frameborder=\\"0\\" allow=\\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\\" allowfullscreen></iframe>","scripts":[]},"date":"2020-02-09T13:36:39.000Z","logo":{"url":"https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/logo.clearbit.com!youtube.com.png","type":"png","size":2421,"height":128,"width":128,"size_pretty":"2.42 kB","palette":["#FC0404","#FC8484","#830101","#970101","#950303","#970101"],"background_color":"#FC0404","color":"#320000","alternative_color":"#320101"},"video":{"url":"https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/r3---sn-ab5sznly.googlevideo.com!videoplayback!c=WEB&dur=552.054&ei=6gpAXv-3POHM8gTqtrmwBA&expire=15","type":"mp4","duration":552.007943,"size":54633895,"height":720,"width":1280,"duration_pretty":"9m","size_pretty":"54.6 MB"}}'
 
-  const output = await prettier.json(code)
+  const output = prettier.json(code)
 
   t.snapshot(output)
 })

test/helpers/snapshots/prettier.js.md

@@ -0,0 +1,98 @@
+# Snapshot report for `test/helpers/prettier.js`
+
+The actual snapshot is saved in `prettier.js.snap`.
+
+Generated by [AVA](https://avajs.dev).
+
+## js
+
+> Snapshot 1
+
+    `const mql = require('@microlink/mql')␊
+    const { status, data } = await mql('https://geolocation.microlink.io', {␊
+      apiKey: MyApiToken,␊
+      proxy: 'https://myproxy:603f60f5@superproxy.cool:8001'␊
+    })␊
+    console.log(data)␊
+    `
+
+## json
+
+> Snapshot 1
+
+    `{␊
+      "title": "Wormholes Explained – Breaking Spacetime",␊
+      "description": "To support Kurzgesagt and learn more about Brilliant, go to https://www.brilliant.org/nutshell and sign up for free. The first 688 people that go to that lin...",␊
+      "lang": "en",␊
+      "author": "Kurzgesagt – In a Nutshell",␊
+      "publisher": "YouTube",␊
+      "image": {␊
+        "url": "https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/img.youtube.com!vi!9P6rdqiybaw!maxresdefault.jpg.jpg",␊
+        "type": "jpg",␊
+        "size": 120116,␊
+        "height": 720,␊
+        "width": 1280,␊
+        "size_pretty": "120 kB",␊
+        "palette": [␊
+          "#C004F9",␊
+          "#EEEEA7",␊
+          "#25047C",␊
+          "#740296",␊
+          "#808018",␊
+          "#2C0494"␊
+        ],␊
+        "background_color": "#EEEEA7",␊
+        "color": "#AC04DF",␊
+        "alternative_color": "#2C0494"␊
+      },␊
+      "audio": {␊
+        "url": "https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/r3---sn-ab5sznly.googlevideo.com!videoplayback!c=WEB&clen=8935291&dur=552.054&ei=6gpAXv-3POHM8gTqtrm",␊
+        "type": "mp4",␊
+        "duration": 552.054422,␊
+        "size": 8935291,␊
+        "duration_pretty": "9m",␊
+        "size_pretty": "8.94 MB"␊
+      },␊
+      "url": "https://www.youtube.com/watch?v=9P6rdqiybaw",␊
+      "iframe": {␊
+        "html": "<iframe width=\\"480\\" height=\\"270\\" src=\\"https://www.youtube.com/embed/9P6rdqiybaw?feature=oembed\\" frameborder=\\"0\\" allow=\\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\\" allowfullscreen></iframe>",␊
+        "scripts": []␊
+      },␊
+      "date": "2020-02-09T13:36:39.000Z",␊
+      "logo": {␊
+        "url": "https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/logo.clearbit.com!youtube.com.png",␊
+        "type": "png",␊
+        "size": 2421,␊
+        "height": 128,␊
+        "width": 128,␊
+        "size_pretty": "2.42 kB",␊
+        "palette": [␊
+          "#FC0404",␊
+          "#FC8484",␊
+          "#830101",␊
+          "#970101",␊
+          "#950303",␊
+          "#970101"␊
+        ],␊
+        "background_color": "#FC0404",␊
+        "color": "#320000",␊
+        "alternative_color": "#320101"␊
+      },␊
+      "video": {␊
+        "url": "https://cdn.microlink.io/data/assets/youtube.com!watch!v=9P6rdqiybaw/r3---sn-ab5sznly.googlevideo.com!videoplayback!c=WEB&dur=552.054&ei=6gpAXv-3POHM8gTqtrmwBA&expire=15",␊
+        "type": "mp4",␊
+        "duration": 552.007943,␊
+        "size": 54633895,␊
+        "height": 720,␊
+        "width": 1280,␊
+        "duration_pretty": "9m",␊
+        "size_pretty": "54.6 MB"␊
+      }␊
+    }␊
+    `
+
+## serializeFmt
+
+> Snapshot 1
+
+    'type=\'email\' id=\'input\' placeholder=\'you@domain.com\' suggestions={[{ value: \'you@gmail.com\' }, { value: \'you@hotmail.com\' }]} width=\'9rem\' fontSize={1} required '