From c9e4bb27dc6b542300b5af35973a12e66e29bc8d Mon Sep 17 00:00:00 2001 From: Codexnever Date: Mon, 20 May 2024 13:25:50 +0530 Subject: [PATCH] Fix TypeScript compilation errors related to module imports --- apps/pink/src/helpers/code.ts | 74 ++++++++++++++------------ apps/pink/src/prettier-extensions.d.ts | 12 +++++ apps/pink/tsconfig.json | 16 ++++-- package-lock.json | 25 ++++++--- package.json | 1 + 5 files changed, 81 insertions(+), 47 deletions(-) create mode 100644 apps/pink/src/prettier-extensions.d.ts diff --git a/apps/pink/src/helpers/code.ts b/apps/pink/src/helpers/code.ts index a668c7807c..a77cdd144a 100644 --- a/apps/pink/src/helpers/code.ts +++ b/apps/pink/src/helpers/code.ts @@ -1,15 +1,14 @@ -import Prism from "prismjs"; +import * as Prism from "prismjs"; import prettier from "prettier/standalone"; import parserHtml from "prettier/parser-html"; import parserBabel from "prettier/parser-babel"; - /** * Receives a string and returns a wrapped string, with max * n characters per line, and a given indentation before each line. */ function wrapStr(str: string, n: number, indent: string): string { - // remove line breaks and tabs - str = str.replaceAll(/[\r\n\t]/g, ""); + // Remove line breaks and tabs + str = str.replace(/[\r\n\t]/g, ""); const words = str.split(/\s/); const lines = words.reduce((acc, word) => { const lastLine = acc[acc.length - 1]; @@ -32,14 +31,14 @@ export function customFormat(html: string, maxLength = 100) { // Decrease indent if line is a closing tag if (element.match(/^\/\w/)) indent = indent.substring(2); - // Match opening tag, e.g.
button text
should match
and - // should match + // Match opening tag const openingTagMatch = element.match(/^(\w+)(.*?)(\/?>)/s); - const openingTag = openingTagMatch ? openingTagMatch : null; + const openingTag = openingTagMatch ? openingTagMatch[0] : null; - // By default, we just add the element with the current indent before it + // By default, add the element with the current indent let toConcatenate = indent + "<" + element + ">\r"; + // Match content inside tags const contentMatch = element.match(/(.*?>)(.*?)(<.*)/s); if (contentMatch && toConcatenate.length > maxLength) { const [_, left, content, right] = contentMatch; @@ -74,42 +73,47 @@ export function formatHtml(html: string, maxLength = 100) { printWidth: maxLength, htmlWhitespaceSensitivity: "ignore", }); - } catch { - console.error("Failed to format HTML, using custom formatter"); + } catch (error) { + console.error("Failed to format HTML using Prettier, falling back to custom formatter:", error); return customFormat(html, maxLength); } } -function formatJs(js: string, maxLength = 100) { - return prettier.format(js, { - parser: "babel", - plugins: [parserBabel], - printWidth: maxLength, - }); +export function formatJs(js: string, maxLength = 100) { + try { + return prettier.format(js, { + parser: "babel", + plugins: [parserBabel], + printWidth: maxLength, + }); + } catch (error) { + console.error("Failed to format JavaScript using Prettier:", error); + return js; // Return the original JS code if formatting fails + } } -type highlightConfig = { - language?: string; - maxLength?: number; - format?: boolean; -}; - -const defaultConfig: Required = { +const defaultConfig = { language: "html", maxLength: 100, format: true, }; -export function highlight(code: string, config?: highlightConfig) { - const c = { ...defaultConfig, ...config }; - const formattedCode = - c.language === "html" - ? formatHtml(code, c.maxLength) - : formatJs(code, c.maxLength); - - return Prism.highlight( - formattedCode, - Prism.languages[c.language], - c.language - ); +export function highlight(code: string, config?: Partial) { + const { language, maxLength, format } = { ...defaultConfig, ...config }; + let formattedCode = code; + + try { + if (format) { + formattedCode = language === "html" ? formatHtml(code, maxLength) : formatJs(code, maxLength); + } + } catch (error) { + console.error("Formatting failed:", error); + } + + try { + return Prism.highlight(formattedCode, Prism.languages[language], language); + } catch (error) { + console.error("Highlighting failed:", error); + return formattedCode; // Return the formatted code even if highlighting fails + } } diff --git a/apps/pink/src/prettier-extensions.d.ts b/apps/pink/src/prettier-extensions.d.ts new file mode 100644 index 0000000000..936aa7b22b --- /dev/null +++ b/apps/pink/src/prettier-extensions.d.ts @@ -0,0 +1,12 @@ +// E:/Projects/PR/Pink/pink/apps/pink/src/prettier-extensions.d.ts + +declare module 'prettier/parser-html' { + const parserHtml: any; + export default parserHtml; + } + + declare module 'prettier/parser-babel' { + const parserBabel: any; + export default parserBabel; + } + \ No newline at end of file diff --git a/apps/pink/tsconfig.json b/apps/pink/tsconfig.json index d75ba134c2..44237307c3 100644 --- a/apps/pink/tsconfig.json +++ b/apps/pink/tsconfig.json @@ -1,10 +1,16 @@ { - "extends": "astro/tsconfigs/strict", "compilerOptions": { "baseUrl": ".", "paths": { "@components/*": ["src/components/*"], - "@layouts/*": ["src/layouts/*"], - } - } -} \ No newline at end of file + "@layouts/*": ["src/layouts/*"] + }, + "typeRoots": [ + "node_modules/@types" + ] + }, + "include": [ + "src", + "src/prettier-extensions.d.ts" + ] +} diff --git a/package-lock.json b/package-lock.json index fbb4797f4b..186d5d8bfa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ ], "devDependencies": { "@changesets/cli": "^2.26.1", + "@types/prettier": "^3.0.0", "prettier": "^2.8.2", "sass": "^1.53.0", "turbo": "^1.7.0", @@ -29,8 +30,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.16.0", - "@appwrite.io/pink-icons": "0.16.0", + "@appwrite.io/pink": "0.20.0", + "@appwrite.io/pink-icons": "0.20.0", "vite-plugin-handlebars": "^1.6.0" } }, @@ -55,8 +56,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.16.0", - "@appwrite.io/pink-icons": "0.16.0", + "@appwrite.io/pink": "0.20.0", + "@appwrite.io/pink-icons": "0.20.0", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" @@ -2823,6 +2824,16 @@ "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz", "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==" }, + "node_modules/@types/prettier": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-3.0.0.tgz", + "integrity": "sha512-mFMBfMOz8QxhYVbuINtswBp9VL2b4Y0QqYHwqLz3YbgtfAcat2Dl6Y1o4e22S/OVE6Ebl9m7wWiMT2lSbAs1wA==", + "deprecated": "This is a stub types definition. prettier provides its own type definitions, so you do not need this installed.", + "dev": true, + "dependencies": { + "prettier": "*" + } + }, "node_modules/@types/prismjs": { "version": "1.26.3", "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.3.tgz", @@ -16561,7 +16572,7 @@ }, "packages/icons": { "name": "@appwrite.io/pink-icons", - "version": "0.16.0", + "version": "0.20.0", "license": "ISC", "devDependencies": { "oslllo-svg-fixer": "^3.0.0", @@ -16570,10 +16581,10 @@ }, "packages/ui": { "name": "@appwrite.io/pink", - "version": "0.16.0", + "version": "0.20.0", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "0.16.0", + "@appwrite.io/pink-icons": "0.20.0", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.11.2" }, diff --git a/package.json b/package.json index b9fcd0d779..fbd2b55b83 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ }, "devDependencies": { "@changesets/cli": "^2.26.1", + "@types/prettier": "^3.0.0", "prettier": "^2.8.2", "sass": "^1.53.0", "turbo": "^1.7.0",