From d8aa87d33c0066f7f3f73348288222c30a2a8cbf Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Tue, 12 Mar 2024 11:42:47 -0500 Subject: [PATCH] Fix transform source bug (#1918) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale Fixes #1913 by using `js-beautify` instead of `prettier: ^3` in `transformSource.js`. ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation 1. Leverage a popular code formatting tool - https://www.npmjs.com/package/js-beautify 2. Used the default formatting settings, as they looked correct to me. ## ๐Ÿงช Testing Manual review of Storybook docs pages. ## โœ… Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Co-authored-by: rajsite --- ...-fd0f6918-b425-44fe-b644-17e155870de3.json | 7 + package-lock.json | 135 +++++++++++++++++- .../.storybook/transformSource.js | 18 ++- packages/nimble-components/package.json | 2 +- 4 files changed, 150 insertions(+), 12 deletions(-) create mode 100644 change/@ni-nimble-components-fd0f6918-b425-44fe-b644-17e155870de3.json diff --git a/change/@ni-nimble-components-fd0f6918-b425-44fe-b644-17e155870de3.json b/change/@ni-nimble-components-fd0f6918-b425-44fe-b644-17e155870de3.json new file mode 100644 index 0000000000..11fcffa1ff --- /dev/null +++ b/change/@ni-nimble-components-fd0f6918-b425-44fe-b644-17e155870de3.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Fix Storybook source preview", + "packageName": "@ni/nimble-components", + "email": "1458528+fredvisser@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/package-lock.json b/package-lock.json index 9824d0ca80..025d9315d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6830,6 +6830,12 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, + "node_modules/@one-ini/wasm": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz", + "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==", + "dev": true + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -15379,6 +15385,22 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/config-chain": { + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz", + "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==", + "dev": true, + "dependencies": { + "ini": "^1.3.4", + "proto-list": "~1.2.1" + } + }, + "node_modules/config-chain/node_modules/ini": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", + "dev": true + }, "node_modules/configstore": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz", @@ -17013,6 +17035,57 @@ "safer-buffer": "^2.1.0" } }, + "node_modules/editorconfig": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz", + "integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==", + "dev": true, + "dependencies": { + "@one-ini/wasm": "0.1.1", + "commander": "^10.0.0", + "minimatch": "9.0.1", + "semver": "^7.5.3" + }, + "bin": { + "editorconfig": "bin/editorconfig" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/editorconfig/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/editorconfig/node_modules/commander": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz", + "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==", + "dev": true, + "engines": { + "node": ">=14" + } + }, + "node_modules/editorconfig/node_modules/minimatch": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz", + "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -21932,6 +22005,60 @@ "integrity": "sha512-CiRVjMKBUp6VYtGwzRjrdnro41yMwKGOWdP9ATXqmixdz2n7KHNwdqthTYSSbOKj/Ha79Gct1sA8ZQpse55TYA==", "dev": true }, + "node_modules/js-beautify": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.1.tgz", + "integrity": "sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==", + "dev": true, + "dependencies": { + "config-chain": "^1.1.13", + "editorconfig": "^1.0.4", + "glob": "^10.3.3", + "js-cookie": "^3.0.5", + "nopt": "^7.2.0" + }, + "bin": { + "css-beautify": "js/bin/css-beautify.js", + "html-beautify": "js/bin/html-beautify.js", + "js-beautify": "js/bin/js-beautify.js" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/js-beautify/node_modules/abbrev": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz", + "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==", + "dev": true, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, + "node_modules/js-beautify/node_modules/nopt": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.0.tgz", + "integrity": "sha512-CVDtwCdhYIvnAzFoJ6NJ6dX3oga9/HyciQDnG1vQDjSLMeKLJ4A93ZqYKDrgYSr1FBY5/hMYC+2VCi24pgpkGA==", + "dev": true, + "dependencies": { + "abbrev": "^2.0.0" + }, + "bin": { + "nopt": "bin/nopt.js" + }, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "dev": true, + "engines": { + "node": ">=14" + } + }, "node_modules/js-library-detector": { "version": "6.7.0", "resolved": "https://registry.npmjs.org/js-library-detector/-/js-library-detector-6.7.0.tgz", @@ -27387,6 +27514,12 @@ "prosemirror-transform": "^1.1.0" } }, + "node_modules/proto-list": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", + "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==", + "dev": true + }, "node_modules/protocols": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz", @@ -33930,6 +34063,7 @@ "eslint-plugin-storybook": "^0.8.0", "html-webpack-plugin": "^5.3.1", "jasmine-core": "^5.1.2", + "js-beautify": "^1.15.1", "karma": "^6.3.0", "karma-chrome-launcher": "^3.1.0", "karma-firefox-launcher": "^2.1.0", @@ -33942,7 +34076,6 @@ "karma-webkit-launcher": "^2.1.0", "karma-webpack": "^5.0.0", "playwright": "1.40.0", - "prettier": "^3.2.5", "prettier-eslint": "^16.3.0", "prettier-eslint-cli": "^8.0.1", "remark-gfm": "^3.0.1", diff --git a/packages/nimble-components/.storybook/transformSource.js b/packages/nimble-components/.storybook/transformSource.js index d5ac03dec0..19c8c685f1 100644 --- a/packages/nimble-components/.storybook/transformSource.js +++ b/packages/nimble-components/.storybook/transformSource.js @@ -1,5 +1,4 @@ -import prettier from 'prettier/standalone'; -import parserHTML from 'prettier/plugins/html'; +const beautifyHTML = require('js-beautify').html; const createFragmentFromHTML = html => { const template = document.createElement('template'); @@ -51,7 +50,10 @@ const removeClassAttributes = node => { } // Assume that all class attributes added to nimble elements were added by FAST // and are not part of the control api - if (node instanceof HTMLElement && node.tagName.toLowerCase().startsWith('nimble-')) { + if ( + node instanceof HTMLElement + && node.tagName.toLowerCase().startsWith('nimble-') + ) { node.removeAttribute('class'); } }; @@ -61,8 +63,7 @@ const removeBlankLines = html => html .filter(line => line.trim() !== '') .join('\n'); -const removeEmptyAttributes = html => html - .replaceAll('=""', ''); +const removeEmptyAttributes = html => html.replaceAll('=""', ''); // A custom source transformer. See: // https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#customizing-source-snippets @@ -78,11 +79,8 @@ export const transformSource = source => { const trimmedHTML = removeBlankLines(html); const emptyAttributesRemovedHTML = removeEmptyAttributes(trimmedHTML); - const formmattedHTML = prettier.format(emptyAttributesRemovedHTML, { - parser: 'html', - plugins: [parserHTML], - htmlWhitespaceSensitivity: 'ignore', - tabWidth: 4 + const formmattedHTML = beautifyHTML(emptyAttributesRemovedHTML, { + wrap_attributes: 'force-expand-multiline' }); return formmattedHTML; }; diff --git a/packages/nimble-components/package.json b/packages/nimble-components/package.json index 381faa6616..5d4cc94cbe 100644 --- a/packages/nimble-components/package.json +++ b/packages/nimble-components/package.json @@ -139,6 +139,7 @@ "eslint-plugin-storybook": "^0.8.0", "html-webpack-plugin": "^5.3.1", "jasmine-core": "^5.1.2", + "js-beautify": "^1.15.1", "karma": "^6.3.0", "karma-chrome-launcher": "^3.1.0", "karma-firefox-launcher": "^2.1.0", @@ -151,7 +152,6 @@ "karma-webkit-launcher": "^2.1.0", "karma-webpack": "^5.0.0", "playwright": "1.40.0", - "prettier": "^3.2.5", "prettier-eslint": "^16.3.0", "prettier-eslint-cli": "^8.0.1", "remark-gfm": "^3.0.1",