diff --git a/code_quality.js b/code_quality.js index 843e357a81..2e753c17c8 100644 --- a/code_quality.js +++ b/code_quality.js @@ -1,5 +1,5 @@ const gitChangedFiles = require('git-changed-files'); -const prettier = require('prettier'); +const prettier = require('@prettier/sync'); const prettierConfig = require('./prettier_config.json'); const codeQualityConfig = require('./package.json').codeQuality || {}; const path = require('path'); @@ -23,21 +23,21 @@ const getAllFiles = () => { } const sourcePaths = getSourcePaths(options.sourcePaths); let results = []; - sourcePaths.forEach(sourcePath => { + sourcePaths.forEach((sourcePath) => { const files = getAllFilesRecoursive(sourcePath); results = results.concat(files); }); return results; }; -const getSourcePaths = sourcePaths => { - return sourcePaths.split(',').map(sourcePath => path.resolve(__dirname, ...sourcePath.split('/'))); +const getSourcePaths = (sourcePaths) => { + return sourcePaths.split(',').map((sourcePath) => path.resolve(__dirname, ...sourcePath.split('/'))); }; -const getAllFilesRecoursive = dir => { +const getAllFilesRecoursive = (dir) => { let results = []; const list = fs.readdirSync(dir); - list.forEach(function(file) { + list.forEach(function (file) { file = dir + '/' + file; const stat = fs.statSync(file); if (fileToExclude(file, stat)) { @@ -73,7 +73,9 @@ const fileToExclude = (file, stat) => { */ const getChangedFiles = async () => { const committedGitFiles = await gitChangedFiles({ baseBranch: 'main' }); - return committedGitFiles.unCommittedFiles.filter(file => fs.existsSync(file) && !file.endsWith('package-lock.json')); + return committedGitFiles.unCommittedFiles.filter( + (file) => fs.existsSync(file) && !file.endsWith('package-lock.json') + ); }; /** @@ -81,7 +83,7 @@ const getChangedFiles = async () => { * @param files: array of file absolute paths * @returns {key: 'File extension:, value: Array of file absolute paths} */ -const groupFilesByExtension = files => { +const groupFilesByExtension = (files) => { return files.reduce((map, file) => { try { if (file.startsWith('./') || file.indexOf('.') === -1) { @@ -124,12 +126,12 @@ const prettifyFile = (file, config) => { * Applying prettier on several files. We have a specific configuration for file extension on file prettier_config.json. * @param filesByExtension: we pass a Map json object where the key is the extension, value is an Array with absolute file paths */ -const prettifyFiles = filesByExtension => { +const prettifyFiles = (filesByExtension) => { let filesChanged = 0; if (!codeQualityConfig.usePrettier) { return; // no need to use pretty; } - Object.keys(filesByExtension).forEach(extension => { + Object.keys(filesByExtension).forEach((extension) => { const files = filesByExtension[extension]; const config = prettierConfig[extension]; if (!config) { @@ -138,7 +140,7 @@ const prettifyFiles = filesByExtension => { ); return; } - files.forEach(file => { + files.forEach((file) => { if (prettifyFile(file, config)) { filesChanged++; } @@ -152,7 +154,7 @@ const prettifyFiles = filesByExtension => { * @param files: array with absolute file paths * @returns {Promise<{}|{report: string, error: boolean}>} */ -const eslintFiles = async files => { +const eslintFiles = async (files) => { if (!codeQualityConfig.useEslint) { return {}; } @@ -163,7 +165,7 @@ const eslintFiles = async files => { for (const file of files) { try { const result = await eslint.lintFiles(file); - error = error || result.some(res => res.errorCount > 0); + error = error || result.some((res) => res.errorCount > 0); await ESLint.outputFixes(result); const resultText = formatter.format(result); if (!!resultText && resultText.trim().length > 0) { @@ -182,7 +184,7 @@ const eslintFiles = async files => { * Run `prettier` on changed files before commit; * You can also call this function using: npm run code-quality-prettier */ -const preCommitPrettier = async filesByExtension => { +const preCommitPrettier = async (filesByExtension) => { if (!filesByExtension) { const files = await getChangedFiles(); if (!files) { @@ -200,7 +202,7 @@ const preCommitPrettier = async filesByExtension => { * Run `eslint` on changed files before commit; * You can also call this function using: npm run code-quality-eslint */ -const preCommitEslint = async filesByExtension => { +const preCommitEslint = async (filesByExtension) => { if (!filesByExtension) { const files = await getChangedFiles(); if (!files) { @@ -265,12 +267,12 @@ const preCommit = async () => { * @param filesByExtension: we pass a Map json object where the key is the extension, value is an Array with absolute file paths * @returns {Promise<{report: string, numberFiles: number, error: boolean}>} */ -const eslintFilesByExtension = async filesByExtension => { +const eslintFilesByExtension = async (filesByExtension) => { let error = false; let report = ''; let numberFiles = 0; const extensions = Object.keys(filesByExtension); - for (const extension of extensions.filter(extension => extension === 'ts' || extension === 'js')) { + for (const extension of extensions.filter((extension) => extension === 'ts' || extension === 'js')) { const esLintFiles = filesByExtension[extension]; numberFiles += esLintFiles.length; const eslintResult = await eslintFiles(esLintFiles); @@ -299,7 +301,7 @@ const full = async () => { * Run `prettier` on all project files; * You can also call this function using: npm run full-code-quality */ -const fullPrettier = async filesByExtension => { +const fullPrettier = async (filesByExtension) => { if (!filesByExtension) { const files = getAllFiles(); filesByExtension = groupFilesByExtension(files); @@ -311,7 +313,7 @@ const fullPrettier = async filesByExtension => { * Run `eslint` on all project files; * You can also call this function using: npm run full-code-quality */ -const fullEslint = async filesByExtension => { +const fullEslint = async (filesByExtension) => { if (!filesByExtension) { const files = getAllFiles(); filesByExtension = groupFilesByExtension(files); @@ -376,7 +378,7 @@ const getOptions = () => { console.error( 'You need to pass application parameter -- mode=pre_commit|pre_commit-prettier|pre_commit-eslint|full|full-prettier|full-eslint' ); -})().catch(err => { +})().catch((err) => { console.log(err); process.exit(1); }); diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index 197694f6cb..24b7ba787f 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -22,7 +22,7 @@

Below is a compound container example for testing functionality -
+
>
- - - -
+
- +
+ - -
+
const compoundContainer = document.getElementById('dashboard'); - compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, e => { + compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, (e) => { console.log('CUSTOM_MESSAGE Listener picked up: ', e.detail); }); @@ -90,94 +90,94 @@

minWidth: 0, maxWidth: 600, columns: '1fr', - gap: 0 + gap: 0, }, { minWidth: 600, maxWidth: 1024, columns: '1fr 1fr', - gap: '30px' - } - ] - } + gap: '30px', + }, + ], + }, }, children: [ { viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js', context: { title: 'My Awesome Grid 000', - description: 'Really awesome' + description: 'Really awesome', }, layoutConfig: { row: '1', - column: '1 / -1' + column: '1 / -1', }, eventListeners: [ { source: 'input1', name: 'sendInput', action: 'update', - dataConverter: data => { + dataConverter: (data) => { console.log( - 'dataConverter(): Received Custom Message from "input1" MF ' + data + 'dataConverter(): Received Custom Message from "input1" MF ' + data, ); return 'new text: ' + data; - } - } - ] + }, + }, + ], }, { id: 'input1', viewUrl: './compound/helloWorldWC.js', context: { title: 'Some input', - instant: true - } + instant: true, + }, }, { viewUrl: 'https://luigiwebcomponents.gitlab.io/luigi-wc-mfe/main.js', context: { - label: 'Another web component' - } + label: 'Another web component', + }, }, { id: 'timerMFE', viewUrl: 'https://luigiwebcomponents.gitlab.io/util/timer.js', context: { min: 2, - fontScale: '0.5' - } + fontScale: '0.5', + }, }, { viewUrl: 'https://luigiwebcomponents.gitlab.io/luigi-wc-mfe/main.js', context: { - label: 'My Label' - } + label: 'My Label', + }, }, { viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelFooter.js', context: { - footer: 'This is the end of awesomeness' + footer: 'This is the end of awesomeness', }, layoutConfig: { - column: '1 / -1' - } - } - ] + column: '1 / -1', + }, + }, + ], }; compoundContainer.init(); - compoundContainer.addEventListener(MFEventID.NAVIGATION_REQUEST, event => { + compoundContainer.addEventListener(MFEventID.NAVIGATION_REQUEST, (event) => { console.log(event.detail); window.location.hash = event.detail.link; }); - compoundContainer.addEventListener(MFEventID.ALERT_REQUEST, event => { + compoundContainer.addEventListener(MFEventID.ALERT_REQUEST, (event) => { console.log(event.detail); alert(event.detail.text); }); compoundContainer.addEventListener( MFEventID.SHOW_CONFIRMATION_MODAL_REQUEST, - event => { + (event) => { const data = event.detail; console.log(data); const val = confirm(data.body); @@ -186,9 +186,9 @@

if (event.callback) { event.callback(val); } - } + }, ); - compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, event => { + compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, (event) => { if (event.detail.id !== 'timer') { alert(event.detail.id); } @@ -196,48 +196,57 @@

compoundContainer.addEventListener( MFEventID.RUNTIME_ERROR_HANDLING_REQUEST, - event => { + (event) => { console.log(event.detail); - } + }, ); - compoundContainer.addEventListener(MFEventID.ADD_NODE_PARAMS_REQUEST, event => { + compoundContainer.addEventListener(MFEventID.ADD_NODE_PARAMS_REQUEST, (event) => { const params = event.detail.params; console.log('params', params); }); - compoundContainer.addEventListener(MFEventID.SET_ANCHOR_LINK_REQUEST, event => { + compoundContainer.addEventListener(MFEventID.SET_ANCHOR_LINK_REQUEST, (event) => { console.log('anchor', event.detail); }); - compoundContainer.addEventListener(MFEventID.OPEN_USER_SETTINGS_REQUEST, event => { - console.log('Open User Settings Request received', event.detail); - alert('LuigiClient.uxManager().openUserSettings()'); - }); - compoundContainer.addEventListener(MFEventID.CLOSE_USER_SETTINGS_REQUEST, event => { - console.log('Close User Settings Request received', event.detail); - alert('LuigiClient.uxManager().closeUserSettings()'); - }); - compoundContainer.addEventListener(MFEventID.REMOVE_BACKDROP_REQUEST, event => { + compoundContainer.addEventListener( + MFEventID.OPEN_USER_SETTINGS_REQUEST, + (event) => { + console.log('Open User Settings Request received', event.detail); + alert('LuigiClient.uxManager().openUserSettings()'); + }, + ); + compoundContainer.addEventListener( + MFEventID.CLOSE_USER_SETTINGS_REQUEST, + (event) => { + console.log('Close User Settings Request received', event.detail); + alert('LuigiClient.uxManager().closeUserSettings()'); + }, + ); + compoundContainer.addEventListener(MFEventID.REMOVE_BACKDROP_REQUEST, (event) => { console.log('Remove Backdrop Request received', event.detail); alert('LuigiClient.uxManager().removeBackdrop()'); }); - compoundContainer.addEventListener(MFEventID.COLLAPSE_LEFT_NAV_REQUEST, event => { + compoundContainer.addEventListener(MFEventID.COLLAPSE_LEFT_NAV_REQUEST, (event) => { console.log('Collapse Left Side Nav Request received', event.detail); alert('LuigiClient.uxManager().collapseLeftSideNav()'); }); - compoundContainer.addEventListener(MFEventID.SET_DOCUMENT_TITLE_REQUEST, event => { - console.log('Set Document Title Request received', event.detail); - compoundContainer.documentTitle = event.detail; - }); + compoundContainer.addEventListener( + MFEventID.SET_DOCUMENT_TITLE_REQUEST, + (event) => { + console.log('Set Document Title Request received', event.detail); + compoundContainer.documentTitle = event.detail; + }, + ); compoundContainer.addEventListener( MFEventID.HIDE_LOADING_INDICATOR_REQUEST, - event => { + (event) => { console.log('Hide Loading Indicator Request received', event.detail); alert('LuigiClient.uxManager().hideAppLoadingIndicator()'); - } + }, ); // linkManager listeners: // path exists - compoundContainer.addEventListener(MFEventID.PATH_EXISTS_REQUEST, event => { + compoundContainer.addEventListener(MFEventID.PATH_EXISTS_REQUEST, (event) => { console.log('Path Exists Request received', event.detail, event); // send back result with defined 'callback' // event: MFEventID.PathExistsEvent can be used as an event type to get the callback function @@ -245,14 +254,17 @@

}); // setViewGroup Data listener - compoundContainer.addEventListener(MFEventID.SET_VIEW_GROUP_DATA_REQUEST, event => { - console.log('Set View Group Data Request received', event.detail, event); - alert(JSON.stringify(event.detail)); - }); + compoundContainer.addEventListener( + MFEventID.SET_VIEW_GROUP_DATA_REQUEST, + (event) => { + console.log('Set View Group Data Request received', event.detail, event); + alert(JSON.stringify(event.detail)); + }, + ); const deferInitContainer = document.getElementById('defer-init-test'); const deferInitButton = document.getElementById('defer-init-button'); - deferInitButton.addEventListener('click', function() { + deferInitButton.addEventListener('click', function () { deferInitContainer.init(); }); deferInitContainer.compoundConfig = { @@ -260,22 +272,22 @@

use: 'grid', config: { columns: '1fr 1fr', - gap: '20px' - } + gap: '20px', + }, }, children: [ { - viewUrl: './compound/defer-init-wc/compoundWCDeferInit1.js' + viewUrl: './compound/defer-init-wc/compoundWCDeferInit1.js', }, { - viewUrl: './compound/defer-init-wc/compoundWCDeferInit2.js' - } - ] + viewUrl: './compound/defer-init-wc/compoundWCDeferInit2.js', + }, + ], }; const luigiClientInitContainer = document.getElementById('luigi-client-init-test'); const luigiClientInitButton = document.getElementById('luigi-client-init-button'); - luigiClientInitButton.addEventListener('click', function() { + luigiClientInitButton.addEventListener('click', function () { console.log('luigi-client-init'); luigiClientInitContainer.init(); }); @@ -285,20 +297,19 @@

use: 'grid', config: { columns: '1fr 1fr', - gap: '20px' - } + gap: '20px', + }, }, children: [ { - viewUrl: './compound/luigi-client-init-wc/luigi-client-init-wc.js' - } - ] + viewUrl: './compound/luigi-client-init-wc/luigi-client-init-wc.js', + }, + ], }; document.querySelector('#luigi-update-context').addEventListener('click', () => { compoundContainer.updateContext({ newContextData: 'some data' }); }); - diff --git a/package-lock.json b/package-lock.json index 58f69c19d1..5fd87625d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,6 +6,7 @@ "": { "name": "luigi", "devDependencies": { + "@prettier/sync": "^0.5.2", "@typescript-eslint/eslint-plugin": "^4.9.0", "@typescript-eslint/parser": "^4.9.0", "ansi_up": "^5.0.0", @@ -19,8 +20,8 @@ "git-changed-files": "^1.0.0", "husky": "^4.3.5", "lerna-changelog": "^2.2.0", - "prettier": "^1.19.1", - "prettier-plugin-svelte": "^1.4.2", + "prettier": "^3.3.3", + "prettier-plugin-svelte": "^3.2.7", "sirv-cli": "^2.0.0", "trim": ">=0.0.3" }, @@ -254,6 +255,22 @@ "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==", "dev": true }, + "node_modules/@prettier/sync": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@prettier/sync/-/sync-0.5.2.tgz", + "integrity": "sha512-Yb569su456XNx5BsH/Vyem7xD6g/y9iLmLUzRKM1a/dhU/D7HqqvkAG72znulXlMXztbV0iiu9O5AL8K98TzZQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "make-synchronized": "^0.2.8" + }, + "funding": { + "url": "https://github.com/prettier/prettier-synchronized?sponsor=1" + }, + "peerDependencies": { + "prettier": "*" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -3056,6 +3073,16 @@ "node": ">= 10" } }, + "node_modules/make-synchronized": { + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/make-synchronized/-/make-synchronized-0.2.9.tgz", + "integrity": "sha512-4wczOs8SLuEdpEvp3vGo83wh8rjJ78UsIk7DIX5fxdfmfMJGog4bQzxfvOwq7Q3yCHLC4jp1urPHIxRS/A93gA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/fisker/make-synchronized?sponsor=1" + } + }, "node_modules/matcher": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/matcher/-/matcher-1.1.1.tgz", @@ -3639,25 +3666,30 @@ } }, "node_modules/prettier": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", - "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", "dev": true, + "license": "MIT", "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=4" + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" } }, "node_modules/prettier-plugin-svelte": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.2.tgz", - "integrity": "sha512-O9VsNwII+raTG8QPoQWouk5ABQy/hmLm4dZ2eqJ7DPnbO35A+BxMSjlfqkw0cNP+UcbykHFYU8zNXm93ytWP9g==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.7.tgz", + "integrity": "sha512-/Dswx/ea0lV34If1eDcG3nulQ63YNr5KPDfMsjbdtpSWOxKKJ7nAc2qlVuYwEvCr4raIuredNoR7K4JCkmTGaQ==", "dev": true, + "license": "MIT", "peerDependencies": { - "prettier": "^1.16.4 || ^2.0.0", - "svelte": "^3.2.0" + "prettier": "^3.0.0", + "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0" } }, "node_modules/progress": { diff --git a/package.json b/package.json index 1a73f64bd2..12dbaa73f7 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "full-code-quality-eslint-e2e-tests": "node code_quality.js -- mode=full_eslint sourcePaths=test/e2e-test-application/cypress/e2e/tests report=e2e-test_full_eslint_report.html" }, "devDependencies": { + "@prettier/sync": "^0.5.2", "@typescript-eslint/eslint-plugin": "^4.9.0", "@typescript-eslint/parser": "^4.9.0", "ansi_up": "^5.0.0", @@ -31,8 +32,8 @@ "git-changed-files": "^1.0.0", "husky": "^4.3.5", "lerna-changelog": "^2.2.0", - "prettier": "^1.19.1", - "prettier-plugin-svelte": "^1.4.2", + "prettier": "^3.3.3", + "prettier-plugin-svelte": "^3.2.7", "sirv-cli": "^2.0.0", "trim": ">=0.0.3" }, diff --git a/prettier_config.json b/prettier_config.json index b725e9ed09..1dcebfaca9 100644 --- a/prettier_config.json +++ b/prettier_config.json @@ -20,16 +20,14 @@ "printWidth": 90 }, "svelte": { - "excludedFiles": ["container/src/LuigiContainer.svelte" , "container/src/LuigiCompoundContainer.svelte"], + "filepath": "./node_modules/prettier-plugin-svelte/plugin.js", "parser": "svelte", "plugins": ["prettier-plugin-svelte"], - "pluginSearchDirs": ["."], "printWidth": 120, "singleQuote": true, "svelteAllowShorthand": true, - "svelteBracketNewLine": true, "svelteIndentScriptAndStyle": true, - "svelteSortOrder": "scripts-markup-styles", + "svelteSortOrder": "options-scripts-markup-styles", "svelteStrictMode": false, "tabWidth": 2, "trailingComma": "none"