@samitouri / QOS-React-2 / commits / dca54c8932

[playground] Use standalone prettier

All of these warnings go away: ``` ➜ playground git:(remove-prettier) ✗ yarn dev yarn run v1.22.19 $ NODE_ENV=development && next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 warn - You have enabled experimental feature (appDir) in next.config.js. warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk. info - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback event - compiled client and server successfully in 964 ms (199 modules) wait - compiling /page (client and server)... warn - ../../node_modules/prettier/index.js Critical dependency: the request of a dependency is an expression ../../node_modules/prettier/index.js Critical dependency: require function is used in a way in which dependencies cannot be statically extracted ../../node_modules/prettier/index.js Critical dependency: the request of a dependency is an expression ../../node_modules/prettier/index.js Critical dependency: the request of a dependency is an expression ../../node_modules/prettier/third-party.js Critical dependency: the request of a dependency is an expression wait - compiling... warn - ../../node_modules/prettier/index.js Critical dependency: the request of a dependency is an expression ../../node_modules/prettier/index.js Critical dependency: require function is used in a way in which dependencies cannot be statically extracted ../../node_modules/prettier/index.js Critical dependency: the request of a dependency is an expression ../../node_modules/prettier/index.js Critical dependency: the request of a dependency is an expression ../../node_modules/prettier/third-party.js Critical dependency: the request of a dependency is an expression ``` Standalone prettier is meant to be used in the browser: https://prettier.io/docs/en/browser

Sathya Gunasekaran committed Nov 2, 2023 at 07:00 UTC dca54c8932cfad5905c8b079be551ba741e07268

3 files changed +32 -22

compiler/apps/playground/components/Editor/Output.tsx

+25 -20

@@ -14,13 +14,13 @@ import {

14 } from "@heroicons/react/outline";

15 import MonacoEditor, { DiffEditor } from "@monaco-editor/react";

16 import { type CompilerError } from "babel-plugin-react-forget";

17 -import prettier from "prettier";

18 -import prettierParserBabel from "prettier/parser-babel";

19 -import { memo, useCallback, useMemo, useState } from "react";

17 +import parserBabel from "prettier/plugins/babel";

18 +import * as prettierPluginEstree from "prettier/plugins/estree";

19 +import * as prettier from "prettier/standalone";

20 +import { memo, useCallback, useEffect, useState } from "react";

21 import { type Store } from "../../lib/stores";

22 import TabbedWindow from "../TabbedWindow";

23 import { monacoOptions } from "./monacoOptions";

23 -

24 const MemoizedOutput = memo(Output);

26 export default MemoizedOutput;

@@ -54,7 +54,7 @@ type Props = {

54 compilerOutput: CompilerOutput;

55 };

57 -function tabify(source: string, compilerOutput: CompilerOutput) {

57 +async function tabify(source: string, compilerOutput: CompilerOutput) {

58 const tabs = new Map<string, React.ReactNode>();

59 const reorderedTabs = new Map<string, React.ReactNode>();

60 const concattedResults = new Map<string, string>();

@@ -106,7 +106,7 @@ function tabify(source: string, compilerOutput: CompilerOutput) {

106 output={text}

107 diff={lastPassOutput ?? null}

108 showInfoPanel={true}

109 - ></TextTabContent>

109 + ></TextTabContent>,

110 );

111 lastPassOutput = text;

112 }

@@ -115,14 +115,14 @@ function tabify(source: string, compilerOutput: CompilerOutput) {

115 // Make a synthetic Program so we can have a single AST with all the top level

116 // FunctionDeclarations

117 const ast = t.program(topLevelFnDecls);

118 - const { code, sourceMapUrl } = codegen(ast, source);

118 + const { code, sourceMapUrl } = await codegen(ast, source);

119 reorderedTabs.set(

120 "JS",

121 <TextTabContent

122 output={code}

123 diff={null}

124 showInfoPanel={false}

125 - ></TextTabContent>

125 + ></TextTabContent>,

126 );

127 if (sourceMapUrl) {

128 reorderedTabs.set(

@@ -133,7 +133,7 @@ function tabify(source: string, compilerOutput: CompilerOutput) {

133 className="w-full h-96"

134 title="Generated Code"

135 />

136 - </>

136 + </>,

137 );

138 }

139 }

@@ -143,23 +143,23 @@ function tabify(source: string, compilerOutput: CompilerOutput) {

143 return reorderedTabs;

144 }

145

146 -function codegen(

146 +async function codegen(

147 ast: t.Program,

148 - source: string

149 -): { code: any; sourceMapUrl: string | null } {

148 + source: string,

149 +): Promise<{ code: any; sourceMapUrl: string | null }> {

150 const generated = generate(

151 ast,

152 { sourceMaps: true, sourceFileName: "input.js" },

153 - source

153 + source,

154 );

155 const sourceMapUrl = getSourceMapUrl(

156 generated.code,

157 - JSON.stringify(generated.map)

157 + JSON.stringify(generated.map),

158 );

159 - const codegenOutput = prettier.format(generated.code, {

159 + const codegenOutput = await prettier.format(generated.code, {

160 semi: true,

161 parser: "babel",

162 - plugins: [prettierParserBabel],

162 + plugins: [parserBabel, prettierPluginEstree],

163 });

164 return { code: codegenOutput, sourceMapUrl };

165 }

@@ -172,16 +172,21 @@ function getSourceMapUrl(code: string, map: string): string | null {

172 code = utf16ToUTF8(code);

173 map = utf16ToUTF8(map);

174 return `https://evanw.github.io/source-map-visualization/#${btoa(

175 - `${code.length}\0${code}${map.length}\0${map}`

175 + `${code.length}\0${code}${map.length}\0${map}`,

176 )}`;

177 }

178

179 function Output({ store, compilerOutput }: Props) {

180 const [tabsOpen, setTabsOpen] = useState<Set<string>>(() => new Set());

181 - const tabs = useMemo(

182 - () => tabify(store.source, compilerOutput),

183 - [store.source, compilerOutput]

181 + const [tabs, setTabs] = useState<Map<string, React.ReactNode>>(

182 + () => new Map(),

183 );

184 + useEffect(() => {

185 + tabify(store.source, compilerOutput).then((tabs) => {

186 + setTabs(tabs);

187 + });

188 + }, [store.source, compilerOutput]);

189 +

190 const consoleLogError = useCallback(() => {

191 if (compilerOutput.kind === "err") {

192 console.error(compilerOutput.error);

compiler/apps/playground/package.json

+1 -1

@@ -29,7 +29,7 @@

29 "monaco-editor": "^0.34.1",

30 "next": "^13.5.6",

31 "notistack": "^3.0.0-alpha.7",

32 - "prettier": "^2.8.8",

32 + "prettier": "3.0.3",

33 "pretty-format": "^29.3.1",

34 "react": "18.2.0",

35 "react-dom": "18.2.0"

compiler/yarn.lock

+6 -1

@@ -9958,11 +9958,16 @@ prelude-ls@~1.1.2:

9958 resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"

9959 integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==

9960

9961 -prettier@2.8.8, prettier@^2.8.8:

9961 +prettier@2.8.8:

9962 version "2.8.8"

9963 resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"

9964 integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==

9965

9966 +prettier@3.0.3:

9967 + version "3.0.3"

9968 + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"

9969 + integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==

9970 +

9971 pretty-format@^24:

9972 version "24.9.0"

9973 resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"