diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml index aeffcbad6..550228d9e 100644 --- a/.github/workflows/pull_request.yml +++ b/.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 diff --git a/.npmrc b/.npmrc index 1c72c3df2..448376a8c 100644 --- a/.npmrc +++ b/.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 diff --git a/package.json b/package.json index 0d0eb96ff..81d461c2a 100644 --- a/package.json +++ b/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" diff --git a/scripts/esm-tests.mjs b/scripts/esm-tests.mjs deleted file mode 100644 index 0642c2fb9..000000000 --- a/scripts/esm-tests.mjs +++ /dev/null @@ -1,21 +0,0 @@ -import { $ } from 'zx' -import { dirname, resolve } from 'path' -import { fileURLToPath } from 'url' -import { readFile, writeFile } from 'fs/promises' - -const __dirname = dirname(fileURLToPath(import.meta.url)) - -const pkgPath = resolve(__dirname, '../package.json') - -const pkg = JSON.parse(await readFile(pkgPath)) -pkg.type = 'module' - -await writeFile(pkgPath, JSON.stringify(pkg, null, 2)) - -try { - await $`pnpm install ava@latest` - await $`./node_modules/.bin/ava test/**/*.mjs` -} finally { - delete pkg.type - await writeFile(pkgPath, JSON.stringify(pkg, null, 2)) -} diff --git a/src/components/elements/CodeEditor/CodeEditor.js b/src/components/elements/CodeEditor/CodeEditor.js index 0543f9316..ebba9f0b8 100644 --- a/src/components/elements/CodeEditor/CodeEditor.js +++ b/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 = ( @@ -124,13 +114,13 @@ const CodeEditor = ({ style={{}} wrapLines > - {content.text} + {text} ) - if (!isInteractive || !content.isPretty) return TerminalComponent + if (!isInteractive) return TerminalComponent return ( { setIsLoaded(true) element.style['padding-top'] = '4px' diff --git a/src/helpers/prettier.js b/src/helpers/prettier.js index e95c51a97..56e6cd631 100644 --- a/src/helpers/prettier.js +++ b/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) diff --git a/test/helpers/prettier.mjs b/test/helpers/prettier.js similarity index 94% rename from test/helpers/prettier.mjs rename to test/helpers/prettier.js index c44656e76..fe554272b 100644 --- a/test/helpers/prettier.mjs +++ b/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":"","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) }) diff --git a/test/helpers/snapshots/prettier.js.md b/test/helpers/snapshots/prettier.js.md new file mode 100644 index 000000000..f2fe829e7 --- /dev/null +++ b/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": "",␊ + "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 ' diff --git a/test/helpers/snapshots/prettier.js.snap b/test/helpers/snapshots/prettier.js.snap new file mode 100644 index 000000000..1d4f3043c Binary files /dev/null and b/test/helpers/snapshots/prettier.js.snap differ