From 9be13cac83320929a949201ca462015d5a446dbc Mon Sep 17 00:00:00 2001 From: IWANABETHATGUY Date: Fri, 27 May 2022 04:31:55 +0800 Subject: [PATCH] feat(playground): add a button to copy rome_ir to clipboard (#2604) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 🎸 add a button to copy rome_ir to clipboard * chore: 🤖 format align to ci * fix: 🐛 CR issue * fix: 🐛 remove unnecessary if * chore: 🤖 use icon instead * chore: 🤖 udpate foramt:rome * chore: 🤖 update lock * Update website/playground/src/DesktopPlayground.tsx Co-authored-by: Emanuele Stoppa * chore: 🤖 fix CR issue Co-authored-by: Emanuele Stoppa --- website/playground/assets/copy.svg | 1 + website/playground/assets/failed.svg | 1 + website/playground/assets/success.svg | 1 + website/playground/package.json | 5 +- website/playground/pnpm-lock.yaml | 198 ++++++++++++++++++- website/playground/src/DesktopPlayground.tsx | 43 +++- website/playground/vite.config.ts | 6 +- 7 files changed, 246 insertions(+), 9 deletions(-) create mode 100644 website/playground/assets/copy.svg create mode 100644 website/playground/assets/failed.svg create mode 100644 website/playground/assets/success.svg diff --git a/website/playground/assets/copy.svg b/website/playground/assets/copy.svg new file mode 100644 index 00000000000..cb476b5b03f --- /dev/null +++ b/website/playground/assets/copy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/playground/assets/failed.svg b/website/playground/assets/failed.svg new file mode 100644 index 00000000000..0f344ddf43a --- /dev/null +++ b/website/playground/assets/failed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/playground/assets/success.svg b/website/playground/assets/success.svg new file mode 100644 index 00000000000..9b39d0f659e --- /dev/null +++ b/website/playground/assets/success.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/playground/package.json b/website/playground/package.json index 637e84c89bb..cbbf72038ba 100644 --- a/website/playground/package.json +++ b/website/playground/package.json @@ -9,7 +9,8 @@ "build:js": "tsc && vite build", "build:wasm": "wasm-pack build --target web --release", "build:wasm-dev": "wasm-pack build --target web --dev", - "format": "cargo run -p rome_cli --release -- format --write ./src" + "format": "cargo run -p rome_cli --release -- format --write ./src", + "format:rome": "rome format src --write ." }, "dependencies": { "@uiw/react-textarea-code-editor": "^1.4.16", @@ -20,6 +21,7 @@ "react-tabs": "^3.2.3" }, "devDependencies": { + "@honkhonk/vite-plugin-svgr": "^1.1.0", "@tailwindcss/forms": "^0.4.0", "@types/prettier": "^2.4.3", "@types/react": "^17.0.33", @@ -28,6 +30,7 @@ "@vitejs/plugin-react": "^1.0.7", "autoprefixer": "^10.4.2", "postcss": "^8.4.6", + "rome": "0.5.0-next", "tailwindcss": "^3.0.19", "typescript": "^4.4.4", "vite": "^2.7.2" diff --git a/website/playground/pnpm-lock.yaml b/website/playground/pnpm-lock.yaml index 936a2191d9a..088418a59b7 100644 --- a/website/playground/pnpm-lock.yaml +++ b/website/playground/pnpm-lock.yaml @@ -1,6 +1,7 @@ lockfileVersion: 5.4 specifiers: + '@honkhonk/vite-plugin-svgr': ^1.1.0 '@tailwindcss/forms': ^0.4.0 '@types/prettier': ^2.4.3 '@types/react': ^17.0.33 @@ -15,6 +16,7 @@ specifiers: react-dom: ^17.0.2 react-json-view: ^1.21.3 react-tabs: ^3.2.3 + rome: 0.5.0-next tailwindcss: ^3.0.19 typescript: ^4.4.4 vite: ^2.7.2 @@ -28,6 +30,7 @@ dependencies: react-tabs: 3.2.3_react@17.0.2 devDependencies: + '@honkhonk/vite-plugin-svgr': 1.1.0_vite@2.7.13 '@tailwindcss/forms': 0.4.1_tailwindcss@3.0.19 '@types/prettier': 2.4.4 '@types/react': 17.0.39 @@ -36,6 +39,7 @@ devDependencies: '@vitejs/plugin-react': 1.1.4 autoprefixer: 10.4.2_postcss@8.4.6 postcss: 8.4.6 + rome: 0.5.0-next tailwindcss: 3.0.19_qm7bagfnbv4vjkuayu3hle4sne typescript: 4.5.5 vite: 2.7.13 @@ -219,6 +223,8 @@ packages: resolution: {integrity: sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==} engines: {node: '>=6.0.0'} hasBin: true + dependencies: + '@babel/types': 7.17.0 dev: true /@babel/plugin-syntax-jsx/7.16.7_@babel+core@7.17.0: @@ -317,6 +323,17 @@ packages: to-fast-properties: 2.0.0 dev: true + /@honkhonk/vite-plugin-svgr/1.1.0_vite@2.7.13: + resolution: {integrity: sha512-Z/KR54UolyaNRlbRWnrXb3C+2Xtl6ilHvD3ceoqTVV69OswtjSGZDefHHNK+SQUSBbYQo0lJO2jLgip0QBxL1A==} + peerDependencies: + vite: ^2.5.0 + dependencies: + '@svgr/core': 5.5.0 + vite: 2.7.13 + transitivePeerDependencies: + - supports-color + dev: true + /@jridgewell/resolve-uri/3.0.4: resolution: {integrity: sha512-cz8HFjOFfUBtvN+NXYSFMHYRdxZMaEl0XypVrhzxBgadKIXhIkRd8aMeHhmF56Sl7SuS8OnUpQ73/k9LE4VnLg==} engines: {node: '>=6.0.0'} @@ -372,11 +389,143 @@ packages: picomatch: 2.3.1 dev: true + /@rometools/cli-darwin-arm64/0.5.0-next: + resolution: {integrity: sha512-dzwIOxvSNPD70DJYzyrxs0DLqUd4p+wDJM/AmHKGTxYJSdQahEG5/scnqfwIGiaSpKP/qNIv4+7Hd0aSaQF0NQ==} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@rometools/cli-darwin-x64/0.5.0-next: + resolution: {integrity: sha512-DXb/5PxNvD4ENb0oKiWnV2Zfww+yyZ5Q/ADUQqF1TsQjy8l7+4uiY618Wxo7KfH4y2uJA8b7wnly16bSw44F5g==} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@rometools/cli-linux-arm64/0.5.0-next: + resolution: {integrity: sha512-1vWKrnQgBgTBeQZquphsmqdCudX4GuwugaQbQVmpCQa+WfKpAe8SAQIJz5G5G3m9uYQRUfwS2AXXEWuMCVHSZQ==} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@rometools/cli-linux-x64/0.5.0-next: + resolution: {integrity: sha512-rKLhodWhYdMmVtIN1mZFxEFTbTiceat6NJUBGbsLHrjQVZ9h9tw8LlK/Lx8dBpzH5j093xKModnxZDFeIYyHLQ==} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@rometools/cli-win32-arm64/0.5.0-next: + resolution: {integrity: sha512-XDVcPeTAvR9KgCqJQYLkhG2cb5XhsY1ZQUKSGsruxB257spkizb2M299VvLaSKVD7pDakG8Vk0JN3lPXdn0zdQ==} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@rometools/cli-win32-x64/0.5.0-next: + resolution: {integrity: sha512-kZeH17xLyQeAD+Y3vAPFuFnF7RxaCmtN/WSfB4mobje5HsAIqP6YPA7Gxpex/fJhv3rRWyNMTvrZEtDn5ogjHw==} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@sindresorhus/is/0.14.0: resolution: {integrity: sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==} engines: {node: '>=6'} dev: false + /@svgr/babel-plugin-add-jsx-attribute/5.4.0: + resolution: {integrity: sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==} + engines: {node: '>=10'} + dev: true + + /@svgr/babel-plugin-remove-jsx-attribute/5.4.0: + resolution: {integrity: sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==} + engines: {node: '>=10'} + dev: true + + /@svgr/babel-plugin-remove-jsx-empty-expression/5.0.1: + resolution: {integrity: sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==} + engines: {node: '>=10'} + dev: true + + /@svgr/babel-plugin-replace-jsx-attribute-value/5.0.1: + resolution: {integrity: sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==} + engines: {node: '>=10'} + dev: true + + /@svgr/babel-plugin-svg-dynamic-title/5.4.0: + resolution: {integrity: sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==} + engines: {node: '>=10'} + dev: true + + /@svgr/babel-plugin-svg-em-dimensions/5.4.0: + resolution: {integrity: sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==} + engines: {node: '>=10'} + dev: true + + /@svgr/babel-plugin-transform-react-native-svg/5.4.0: + resolution: {integrity: sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==} + engines: {node: '>=10'} + dev: true + + /@svgr/babel-plugin-transform-svg-component/5.5.0: + resolution: {integrity: sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==} + engines: {node: '>=10'} + dev: true + + /@svgr/babel-preset/5.5.0: + resolution: {integrity: sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==} + engines: {node: '>=10'} + dependencies: + '@svgr/babel-plugin-add-jsx-attribute': 5.4.0 + '@svgr/babel-plugin-remove-jsx-attribute': 5.4.0 + '@svgr/babel-plugin-remove-jsx-empty-expression': 5.0.1 + '@svgr/babel-plugin-replace-jsx-attribute-value': 5.0.1 + '@svgr/babel-plugin-svg-dynamic-title': 5.4.0 + '@svgr/babel-plugin-svg-em-dimensions': 5.4.0 + '@svgr/babel-plugin-transform-react-native-svg': 5.4.0 + '@svgr/babel-plugin-transform-svg-component': 5.5.0 + dev: true + + /@svgr/core/5.5.0: + resolution: {integrity: sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==} + engines: {node: '>=10'} + dependencies: + '@svgr/plugin-jsx': 5.5.0 + camelcase: 6.3.0 + cosmiconfig: 7.0.1 + transitivePeerDependencies: + - supports-color + dev: true + + /@svgr/hast-util-to-babel-ast/5.5.0: + resolution: {integrity: sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==} + engines: {node: '>=10'} + dependencies: + '@babel/types': 7.17.0 + dev: true + + /@svgr/plugin-jsx/5.5.0: + resolution: {integrity: sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==} + engines: {node: '>=10'} + dependencies: + '@babel/core': 7.17.0 + '@svgr/babel-preset': 5.5.0 + '@svgr/hast-util-to-babel-ast': 5.5.0 + svg-parser: 2.0.4 + transitivePeerDependencies: + - supports-color + dev: true + /@szmarczak/http-timer/1.1.2: resolution: {integrity: sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==} engines: {node: '>=6'} @@ -399,6 +548,16 @@ packages: '@types/unist': 2.0.6 dev: false + /@types/keyv/3.1.4: + resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==} + dependencies: + '@types/node': 17.0.35 + dev: false + + /@types/node/17.0.35: + resolution: {integrity: sha512-vu1SrqBjbbZ3J6vwY17jBs8Sr/BKA+/a/WtjRG+whKg1iuLFOosq872EXS0eXWILdO36DHQQeku/ZcL6hz2fpg==} + dev: false + /@types/parse-json/4.0.0: resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==} dev: true @@ -413,7 +572,6 @@ packages: /@types/prop-types/15.7.4: resolution: {integrity: sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==} - dev: true /@types/react-dom/17.0.11: resolution: {integrity: sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==} @@ -433,11 +591,15 @@ packages: '@types/prop-types': 15.7.4 '@types/scheduler': 0.16.2 csstype: 3.0.10 - dev: true + + /@types/responselike/1.0.0: + resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==} + dependencies: + '@types/node': 17.0.35 + dev: false /@types/scheduler/0.16.2: resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==} - dev: true /@types/unist/2.0.6: resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==} @@ -685,7 +847,7 @@ packages: dev: true /camelcase/4.1.0: - resolution: {integrity: sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=} + resolution: {integrity: sha512-FxAv7HpHrXbh3aPo4o2qxHay2lkLY3x5Mw3KeE4KQE8ysVfziWeRZDwcjauvwBSGEC/nXUPzZy8zeh4HokqOnw==} engines: {node: '>=4'} dev: false @@ -694,6 +856,11 @@ packages: engines: {node: '>=6'} dev: false + /camelcase/6.3.0: + resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==} + engines: {node: '>=10'} + dev: true + /caniuse-lite/1.0.30001309: resolution: {integrity: sha512-Pl8vfigmBXXq+/yUz1jUwULeq9xhMJznzdc/xwl4WclDAuebcTHVefpz8lE/bMI+UN7TOkSSe7B7RnZd6+dzjA==} dev: true @@ -958,7 +1125,6 @@ packages: /csstype/3.0.10: resolution: {integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==} - dev: true /debug/4.3.3: resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==} @@ -1511,6 +1677,8 @@ packages: resolution: {integrity: sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=} engines: {node: '>=4'} dependencies: + '@types/keyv': 3.1.4 + '@types/responselike': 1.0.0 create-error-class: 3.0.2 duplexer3: 0.1.4 get-stream: 3.0.0 @@ -1530,6 +1698,8 @@ packages: dependencies: '@sindresorhus/is': 0.14.0 '@szmarczak/http-timer': 1.1.2 + '@types/keyv': 3.1.4 + '@types/responselike': 1.0.0 cacheable-request: 6.1.0 decompress-response: 3.3.0 duplexer3: 0.1.4 @@ -2788,6 +2958,20 @@ packages: fsevents: 2.3.2 dev: true + /rome/0.5.0-next: + resolution: {integrity: sha512-Y5LmDdSeu35DrqJRQnNHSmZcL6yOyHUhJLKevZN5xXW4GnPwHMLF8rUahnhgAugD5wmyGYAgakwKWA64n6yxkg==} + engines: {node: '>=14.18.0'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@rometools/cli-darwin-arm64': 0.5.0-next + '@rometools/cli-darwin-x64': 0.5.0-next + '@rometools/cli-linux-arm64': 0.5.0-next + '@rometools/cli-linux-x64': 0.5.0-next + '@rometools/cli-win32-arm64': 0.5.0-next + '@rometools/cli-win32-x64': 0.5.0-next + dev: true + /run-async/2.4.1: resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==} engines: {node: '>=0.12.0'} @@ -3003,6 +3187,10 @@ packages: engines: {node: '>= 0.4'} dev: true + /svg-parser/2.0.4: + resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} + dev: true + /tailwindcss/3.0.19_qm7bagfnbv4vjkuayu3hle4sne: resolution: {integrity: sha512-rjsdfz/qZya5xQ0OVynEMETgWq1CacmftgMYeXXh6bRM5vxsNwRSbMJsCCIjq/w67om9VP/AFMolOwiE+5VKig==} engines: {node: '>=12.13.0'} diff --git a/website/playground/src/DesktopPlayground.tsx b/website/playground/src/DesktopPlayground.tsx index cce6f1ff97e..ab9c4bc7204 100644 --- a/website/playground/src/DesktopPlayground.tsx +++ b/website/playground/src/DesktopPlayground.tsx @@ -1,10 +1,16 @@ import { PlaygroundProps } from "./types"; import CodeEditor from "@uiw/react-textarea-code-editor"; -import { createSetter, getLanguage } from "./utils"; +import { getLanguage } from "./utils"; import { Tab, TabList, TabPanel, Tabs } from "react-tabs"; import { SettingsMenu } from "./SettingsMenu"; import TreeView from "./TreeView"; -import ReactJson from "react-json-view"; +//@ts-ignore +import SuccessIcon from "../assets/success.svg?component"; +//@ts-ignore +import FailedIcon from "../assets/failed.svg?component"; +//@ts-ignore +import CopyIcon from "../assets/copy.svg?component"; +import { useEffect, useState } from "react"; export default function DesktopPlayground( { @@ -15,7 +21,35 @@ export default function DesktopPlayground( }: PlaygroundProps, ) { const { isJsx, isTypeScript } = settings; + const [clipboardStatus, setClipboardStatus] = useState< + "success" | "failed" | "normal" + >("normal"); const language = getLanguage(isJsx, isTypeScript); + + useEffect( + () => { + if (clipboardStatus !== "normal") { + setClipboardStatus("normal"); + } + }, + [formatter_ir], + ); + + const copyToClipboard = async () => { + if (!navigator.clipboard) { + setClipboardStatus("failed"); + console.error( + "Your browser does not support clipboard, could not copy the text", + ); + } + try { + await navigator.clipboard.writeText(formatter_ir); + setClipboardStatus("success"); + } catch (err: any) { + setClipboardStatus("failed"); + console.error(err.toString()); + } + }; return (

Rome Playground

@@ -98,6 +132,11 @@ export default function DesktopPlayground( /> + 
{formatter_ir}
 diff --git a/website/playground/vite.config.ts b/website/playground/vite.config.ts index 9af9f60cb45..13a3c633704 100644 --- a/website/playground/vite.config.ts +++ b/website/playground/vite.config.ts @@ -1,5 +1,9 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; +import svgr from "@honkhonk/vite-plugin-svgr"; // https://vitejs.dev/config/ -export default defineConfig({ base: process.env.BASE_URL, plugins: [react()] }); +export default defineConfig({ + base: process.env.BASE_URL, + plugins: [react(), svgr()], +});