@@ -6,36 +6,36 @@ import { Language } from "./codeEditorTypes";
66
77export async function cssFormatter ( text :string ) {
88const prettier = await import ( "prettier/standalone" ) ;
9- const parserPlugin = await import ( "prettier/parser-postcss" ) ;
10- return prettier . format ( text , { parser :"css" , plugins :[ parserPlugin ] , semi :false } ) . trim ( ) ;
9+ const parserPlugin = await require ( "prettier/parser-postcss" ) ;
10+ return ( await prettier . format ( text , { parser :"css" , plugins :[ parserPlugin ] , semi :false } ) ) . trim ( ) ;
1111}
1212
1313export async function htmlFormatter ( text :string ) {
1414const prettier = await import ( "prettier/standalone" ) ;
15- const parserPlugin = await import ( "prettier/parser-html" ) ;
16- return prettier . format ( text , { parser :"html" , plugins :[ parserPlugin ] , semi :false } ) . trim ( ) ;
15+ const parserPlugin = await require ( "prettier/parser-html" ) ;
16+ return ( await prettier . format ( text , { parser :"html" , plugins :[ parserPlugin ] , semi :false } ) ) . trim ( ) ;
1717}
1818
1919async function getJavascriptFormatter ( ) {
2020const prettier = await import ( "prettier/standalone" ) ;
21- const parserBabel = await import ( "prettier/parser-babel" ) ;
22- return ( text :string ) =>
23- prettier . format ( text , { parser :"babel" , plugins :[ parserBabel ] , semi :false } ) . trim ( ) ;
21+ const parserBabel = await require ( "prettier/parser-babel" ) ;
22+ return async ( text :string ) =>
23+ ( await prettier . format ( text , { parser :"babel" , plugins :[ parserBabel ] , semi :false } ) ) . trim ( ) ;
2424}
2525
2626export async function getJsonFormatter ( ) {
2727const prettier = await import ( "prettier/standalone" ) ;
28- const parserBabel = await import ( "prettier/parser-babel" ) ;
29- return ( text :string ) => prettier . format ( text , { parser :"json" , plugins :[ parserBabel ] } ) . trim ( ) ;
28+ const parserBabel = await require ( "prettier/parser-babel" ) ;
29+ return async ( text :string ) => ( await prettier . format ( text , { parser :"json" , plugins :[ parserBabel ] } ) ) . trim ( ) ;
3030}
3131
32- function formatJsSegment ( formatter :( text :string ) => string , script :string ) {
32+ async function formatJsSegment ( formatter :( text :string ) => Promise < string > , script :string ) : Promise < string > {
3333try {
34- const s = formatter ( script ) ;
34+ const s = await formatter ( script ) ;
3535return s . startsWith ( ";" ) ?s . slice ( 1 ) :s ;
3636} catch ( e1 ) {
3737try {
38- const s = formatter ( `return (${ script } ) ; // same as evalScript()
38+ const s = await formatter ( `return (${ script } ) ; // same as evalScript()
3939return s . startsWith ( "return " ) ?s . slice ( 7 ) :s ;
4040} catch ( e2 ) {
4141throw e1 ;
@@ -45,7 +45,9 @@ function formatJsSegment(formatter: (text: string) => string, script: string) {
4545
4646async function getJsSegmentFormatter ( ) {
4747const formatter = await getJavascriptFormatter ( ) ;
48- return ( segment :string ) => "{{" + formatJsSegment ( formatter , segment . slice ( 2 , - 2 ) ) + "}}" ;
48+ return async ( segment :string ) => {
49+ return "{{" + formatJsSegment ( formatter , segment . slice ( 2 , - 2 ) ) + "}}" ;
50+ } ;
4951}
5052
5153export async function formatStringWithJsSnippets ( text :string ) :Promise < string > {
@@ -75,15 +77,27 @@ export async function formatSqlWithJsSnippets(text: string) {
7577if ( jsSegments . length === 0 ) {
7678return newText ;
7779}
78- return newText . replace ( / { { \d + } } / g, ( s ) => {
80+ const replacements :Promise < string > [ ] = [ ] ;
81+ const replacedText = newText . replace ( / { { \d + } } / g, ( s ) => {
7982const index = parseInt ( s . slice ( 4 , - 4 ) ) ;
8083if ( index >= 0 && index < jsSegments . length ) {
81- return jsSegmentFormatter ( jsSegments [ index ] ) ;
84+ const replacement = jsSegmentFormatter ( jsSegments [ index ] ) ;
85+ replacements . push ( replacement ) ;
86+ return s ; // Return the original placeholder for now
8287}
8388return s ;
8489} ) ;
90+
91+ const formattedSegments = await Promise . all ( replacements ) ;
92+ let finalText = replacedText ;
93+ formattedSegments . forEach ( ( formattedSegment , index ) => {
94+ finalText = finalText . replace ( `{ {${ index } , formattedSegment ) ;
95+ } ) ;
96+
97+ return finalText ;
8598}
8699
100+
87101async function formatJsonWithJsSnippetsImpl ( text :string ) {
88102if ( ! text || text . trim ( ) . length === 0 ) {
89103return "" ;
@@ -108,15 +122,20 @@ async function formatJsonWithJsSnippetsImpl(text: string) {
108122// here are 3 cases.
109123// - when the original "{{}}" is not in quotes as the single key or value, the whole "{{ index }}" should be replaced.
110124// - when the original "{{}}" is for concatenating strings, "{{ index }}" or "\\{\\{ index \\}\\}" should be replaced.
111- return formattedJSON . replace ( / ( " { { \d + } } " ) | ( { { \d + } } ) | ( \\ \\ { \\ \\ { \d + \\ \\ } \\ \\ } ) / g, ( s ) => {
125+ const formattedSegments = await Promise . all ( segments . map ( async ( segment ) => {
126+ if ( isDynamicSegment ( segment ) ) {
127+ const formattedSegment = await jsSegmentFormatter ( segment ) ;
128+ return formattedSegment ;
129+ }
130+ return segment ;
131+ } ) ) ;
132+
133+ return ( await formattedJSON ) . replace ( / ( " { { \d + } } " ) | ( { { \d + } } ) | ( \\ \\ { \\ \\ { \d + \\ \\ } \\ \\ } ) / g, ( s ) => {
112134const index = parseInt (
113135s . startsWith ( '"{{' ) ?s . slice ( 3 , - 3 ) :s . startsWith ( "{{" ) ?s . slice ( 2 , - 2 ) :s . slice ( 6 , - 6 )
114136) ;
115- if ( index >= 0 && index < segments . length ) {
116- const segment = segments [ index ] ;
117- if ( isDynamicSegment ( segment ) ) {
118- return jsSegmentFormatter ( segment ) ;
119- }
137+ if ( index >= 0 && index < formattedSegments . length ) {
138+ return formattedSegments [ index ] ;
120139}
121140return s ;
122141} ) ;
