feat(core): replace js-yaml with yaml

nrwl · Nov 20, 2024 · e6b81c0 · e6b81c0
1 parent 09a01eb
commit e6b81c0
Show file tree

Hide file tree

Showing 18 changed files with 141 additions and 160 deletions.
diff --git a/e2e/utils/create-project-utils.ts b/e2e/utils/create-project-utils.ts
@@ -18,7 +18,7 @@ import {
 import * as isCI from 'is-ci';
 
 import { angularCliVersion as defaultAngularCliVersion } from '@nx/workspace/src/utils/versions';
-import { dump } from '@zkochan/js-yaml';
+import { stringify } from 'yaml';
 import { execSync, ExecSyncOptions } from 'child_process';
 
 import { performance, PerformanceMeasure } from 'perf_hooks';

diff --git a/graph/ui-project-details/src/lib/show-all-options/show-options-help.tsx b/graph/ui-project-details/src/lib/show-all-options/show-options-help.tsx
@@ -120,6 +120,7 @@ export function ShowOptionsHelp({
             className="text-blue-500 hover:underline"
             target="_blank"
             href="https://nx.dev/recipes/running-tasks/pass-args-to-commands#pass-args-to-commands"
+            rel="noreferrer"
           >
             passing them
           </a>{' '}

diff --git a/nx-dev/nx-dev/pages/shader.tsx b/nx-dev/nx-dev/pages/shader.tsx
@@ -2,10 +2,9 @@ import { ShaderGradient, ShaderGradientCanvas } from 'shadergradient';
 
 export default function Shader(): JSX.Element {
   return (
-    <>
-      <div className="absolute left-0 top-0 z-10 h-screen w-screen overflow-hidden bg-white text-gray-50">
-        {/*COTTON CANDY*/}
-        {/*<ShaderGradientCanvas
+    <div className="absolute left-0 top-0 z-10 h-screen w-screen overflow-hidden bg-white text-gray-50">
+      {/*COTTON CANDY*/}
+      {/*<ShaderGradientCanvas
           pointerEvents="none"
           eventPrefix="client"
           fov={45}
@@ -41,47 +40,46 @@ export default function Shader(): JSX.Element {
           />
         </ShaderGradientCanvas>*/}
 
-        {/*UNIVERSE*/}
-        <ShaderGradientCanvas
-          pointerEvents="none"
-          eventPrefix="client"
-          fov={45}
-          pixelDensity={1}
-          className="pointer-events-none"
-        >
-          <ShaderGradient
-            brightness={4}
-            cAzimuthAngle={180}
-            cameraZoom={1}
-            cDistance={4}
-            cPolarAngle={115}
-            color1="#5606FF"
-            color2="#FE8989"
-            color3="#000000"
-            frameRate={10}
-            grain="off"
-            lightType="3d"
-            positionX={-0.5}
-            positionY={0.1}
-            positionZ={0}
-            range="enabled"
-            rangeEnd={40}
-            rangeStart={0}
-            reflection={0.1}
-            rotationX={0}
-            rotationY={0}
-            rotationZ={235}
-            shader="defaults"
-            type="waterPlane"
-            uAmplitude={0}
-            uDensity={1.1}
-            uFrequency={5.5}
-            uSpeed={0.1}
-            uStrength={2.4}
-            uTime={0.2}
-          />
-        </ShaderGradientCanvas>
-      </div>
-    </>
+      {/*UNIVERSE*/}
+      <ShaderGradientCanvas
+        pointerEvents="none"
+        eventPrefix="client"
+        fov={45}
+        pixelDensity={1}
+        className="pointer-events-none"
+      >
+        <ShaderGradient
+          brightness={4}
+          cAzimuthAngle={180}
+          cameraZoom={1}
+          cDistance={4}
+          cPolarAngle={115}
+          color1="#5606FF"
+          color2="#FE8989"
+          color3="#000000"
+          frameRate={10}
+          grain="off"
+          lightType="3d"
+          positionX={-0.5}
+          positionY={0.1}
+          positionZ={0}
+          range="enabled"
+          rangeEnd={40}
+          rangeStart={0}
+          reflection={0.1}
+          rotationX={0}
+          rotationY={0}
+          rotationZ={235}
+          shader="defaults"
+          type="waterPlane"
+          uAmplitude={0}
+          uDensity={1.1}
+          uFrequency={5.5}
+          uSpeed={0.1}
+          uStrength={2.4}
+          uTime={0.2}
+        />
+      </ShaderGradientCanvas>
+    </div>
   );
 }
diff --git a/nx-dev/ui-fence/src/lib/selector.tsx b/nx-dev/ui-fence/src/lib/selector.tsx
@@ -18,62 +18,58 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
         onChange={(selection) => props.onChange(selection)}
       >
         {({ open }) => (
-          <>
-            <div className="relative">
-              <Listbox.Button
-                className={
-                  'relative w-full cursor-pointer border border-slate-200 py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm dark:border-slate-700' +
-                  (props.className ? ` ${props.className}` : '')
-                }
-              >
-                <span className="block truncate">
-                  <span className="inline-block align-bottom">
-                    {props.children}
-                  </span>
-                  {props.selected.label}
-                </span>
-                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                  <ChevronUpDownIcon
-                    className="h-5 w-5 text-slate-500"
-                    aria-hidden="true"
-                  />
+          <div className="relative">
+            <Listbox.Button
+              className={
+                'relative w-full cursor-pointer border border-slate-200 py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm dark:border-slate-700' +
+                (props.className ? ` ${props.className}` : '')
+              }
+            >
+              <span className="block truncate">
+                <span className="inline-block align-bottom">
+                  {props.children}
                 </span>
-              </Listbox.Button>
-              <Transition
-                show={open}
-                as={Fragment}
-                enter="transition duration-100 ease-out"
-                enterFrom="transform scale-95 opacity-0"
-                enterTo="transform scale-100 opacity-100"
-                leave="transition duration-75 ease-out"
-                leaveFrom="transform scale-100 opacity-100"
-                leaveTo="transform scale-95 opacity-0"
+                {props.selected.label}
+              </span>
+              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon
+                  className="h-5 w-5 text-slate-500"
+                  aria-hidden="true"
+                />
+              </span>
+            </Listbox.Button>
+            <Transition
+              show={open}
+              as={Fragment}
+              enter="transition duration-100 ease-out"
+              enterFrom="transform scale-95 opacity-0"
+              enterTo="transform scale-100 opacity-100"
+              leave="transition duration-75 ease-out"
+              leaveFrom="transform scale-100 opacity-100"
+              leaveTo="transform scale-95 opacity-0"
+            >
+              <Listbox.Options
+                static
+                className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-sm bg-white py-1 pl-0 text-base shadow-md focus:outline-none sm:text-sm dark:bg-slate-800/60 dark:focus-within:ring-sky-500"
               >
-                <Listbox.Options
-                  static
-                  className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-sm bg-white py-1 pl-0 text-base shadow-md focus:outline-none sm:text-sm dark:bg-slate-800/60 dark:focus-within:ring-sky-500"
-                >
-                  {props.items.map((item, personIdx) => (
-                    <Listbox.Option
-                      key={personIdx}
-                      className={({ active }) =>
-                        `relative cursor-pointer select-none list-none px-3 py-2 hover:bg-slate-50 dark:hover:bg-slate-800`
-                      }
-                      value={item}
-                    >
-                      {({ selected, active }) => (
-                        <>
-                          <span className={'block truncate font-medium'}>
-                            {item.label}
-                          </span>
-                        </>
-                      )}
-                    </Listbox.Option>
-                  ))}
-                </Listbox.Options>
-              </Transition>
-            </div>
-          </>
+                {props.items.map((item, personIdx) => (
+                  <Listbox.Option
+                    key={personIdx}
+                    className={({ active }) =>
+                      `relative cursor-pointer select-none list-none px-3 py-2 hover:bg-slate-50 dark:hover:bg-slate-800`
+                    }
+                    value={item}
+                  >
+                    {({ selected, active }) => (
+                      <span className={'block truncate font-medium'}>
+                        {item.label}
+                      </span>
+                    )}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </Transition>
+          </div>
         )}
       </Listbox>
     </div>

diff --git a/nx-dev/ui-home/src/lib/ci-for-monorepos.tsx b/nx-dev/ui-home/src/lib/ci-for-monorepos.tsx
@@ -160,7 +160,7 @@ export function ApplicationCard(): JSX.Element {
           <a
             href="https://staging.nx.app/orgs/62d013d4d26f260059f7765e/workspaces/62d013ea0852fe0a2df74438/overview??utm_source=homepage&utm_medium=website&utm_campaign=homepage_links&utm_content=cta_ci_for_monorepos_live_demo"
             target="_blank"
-            rel="noopener"
+            rel="noopener noreferrer"
             title="See Nx Cloud live demo"
             className="group font-semibold leading-6 text-slate-950 dark:text-white"
           >

diff --git a/nx-dev/ui-markdoc/src/index.ts b/nx-dev/ui-markdoc/src/index.ts
@@ -6,7 +6,6 @@ import {
   Tokenizer,
   transform,
 } from '@markdoc/markdoc';
-import { load as yamlLoad } from '@zkochan/js-yaml';
 import React, { ReactNode } from 'react';
 import { Heading } from './lib/nodes/heading.component';
 import { getHeadingSchema } from './lib/nodes/heading.schema';
@@ -144,8 +143,9 @@ export const extractFrontmatter = (
   documentContent: string
 ): Record<string, any> => {
   const ast = parseMarkdown(documentContent);
+  const { parse } = require('yaml');
   const frontmatter = ast.attributes['frontmatter']
-    ? (yamlLoad(ast.attributes['frontmatter']) as Record<string, any>)
+    ? (parse(ast.attributes['frontmatter']) as Record<string, any>)
     : {};
   return frontmatter;
 };
@@ -165,9 +165,10 @@ export const renderMarkdown: (
   );
   const treeNode = transform(ast, configuration.config);
 
+  const { parse } = require('yaml');
   return {
     metadata: ast.attributes['frontmatter']
-      ? (yamlLoad(ast.attributes['frontmatter']) as Record<string, any>)
+      ? (parse(ast.attributes['frontmatter']) as Record<string, any>)
       : {},
     node: renderers.react(transform(ast, configuration.config), React, {
       components: configuration.components,

diff --git a/package.json b/package.json
@@ -134,7 +134,6 @@
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
     "@types/jest": "29.5.12",
-    "@types/js-yaml": "^4.0.5",
     "@types/marked": "^2.0.0",
     "@types/node": "20.16.10",
     "@types/npm-package-arg": "6.1.1",
@@ -151,7 +150,6 @@
     "@xstate/immer": "0.3.1",
     "@xstate/inspect": "0.7.0",
     "@xstate/react": "3.0.1",
-    "@zkochan/js-yaml": "0.0.7",
     "ai": "^2.2.10",
     "ajv": "^8.12.0",
     "angular-eslint": "^18.3.0",
@@ -314,6 +312,7 @@
     "webpack-sources": "^3.2.3",
     "webpack-subresource-integrity": "^5.1.0",
     "xstate": "4.34.0",
+    "yaml": "^2.6.1",
     "yargs": "17.6.2",
     "yargs-parser": "21.1.1"
   },

diff --git a/packages/eslint/package.json b/packages/eslint/package.json
@@ -31,7 +31,6 @@
   "generators": "./generators.json",
   "executors": "./executors.json",
   "peerDependencies": {
-    "@zkochan/js-yaml": "0.0.7",
     "eslint": "^8.0.0 || ^9.0.0"
   },
   "dependencies": {
@@ -42,7 +41,7 @@
     "typescript": "~5.4.2"
   },
   "peerDependenciesMeta": {
-    "@zkochan/js-yaml": {
+    "yaml": {
       "optional": true
     }
   },

diff --git a/packages/eslint/src/generators/convert-to-flat-config/generator.spec.ts b/packages/eslint/src/generators/convert-to-flat-config/generator.spec.ts
@@ -15,7 +15,7 @@ import { ConvertToFlatConfigGeneratorSchema } from './schema';
 import { lintProjectGenerator } from '../lint-project/lint-project';
 import { Linter } from '../utils/linter';
 import { eslintrcVersion } from '../../utils/versions';
-import { dump } from '@zkochan/js-yaml';
+import { stringify } from 'yaml';
 
 describe('convert-to-flat-config generator', () => {
   let tree: Tree;
@@ -106,7 +106,9 @@ describe('convert-to-flat-config generator', () => {
       project: 'test-lib',
       setParserOptionsProject: false,
     });
-    const yamlContent = dump(readJson(tree, 'libs/test-lib/.eslintrc.json'));
+    const yamlContent = stringify(
+      readJson(tree, 'libs/test-lib/.eslintrc.json')
+    );
     tree.delete('libs/test-lib/.eslintrc.json');
     tree.write('libs/test-lib/.eslintrc.yaml', yamlContent);
 
@@ -136,7 +138,9 @@ describe('convert-to-flat-config generator', () => {
       project: 'test-lib',
       setParserOptionsProject: false,
     });
-    const yamlContent = dump(readJson(tree, 'libs/test-lib/.eslintrc.json'));
+    const yamlContent = stringify(
+      readJson(tree, 'libs/test-lib/.eslintrc.json')
+    );
     tree.delete('libs/test-lib/.eslintrc.json');
     tree.write('libs/test-lib/.eslintrc.yml', yamlContent);
 

diff --git a/packages/eslint/src/generators/convert-to-flat-config/generator.ts b/packages/eslint/src/generators/convert-to-flat-config/generator.ts
@@ -192,8 +192,8 @@ function convertConfigToFlatConfig(
   }
   if (source.endsWith('.yaml') || source.endsWith('.yml')) {
     const originalContent = tree.read(`${root}/${source}`, 'utf-8');
-    const { load } = require('@zkochan/js-yaml');
-    const config = load(originalContent, {
+    const { parse } = require('yaml');
+    const config = parse(originalContent, {
       json: true,
       filename: source,
     }) as ESLint.ConfigData;

diff --git a/packages/js/package.json b/packages/js/package.json
@@ -41,7 +41,6 @@
     "@babel/runtime": "^7.22.6",
     "@nx/devkit": "file:../devkit",
     "@nx/workspace": "file:../workspace",
-    "@zkochan/js-yaml": "0.0.7",
     "babel-plugin-const-enum": "^1.0.1",
     "babel-plugin-macros": "^2.8.0",
     "babel-plugin-transform-typescript-metadata": "^0.3.1",

diff --git a/packages/js/src/utils/prettier.ts b/packages/js/src/utils/prettier.ts
@@ -149,8 +149,8 @@ export async function resolvePrettierConfigPath(
 
   // check the package.yaml file
   if (tree.exists('package.yaml')) {
-    const { load } = await import('@zkochan/js-yaml');
-    const packageYaml = load(tree.read('package.yaml', 'utf-8'));
+    const { parse } = require('yaml');
+    const packageYaml = parse(tree.read('package.yaml', 'utf-8'));
     if (packageYaml.prettier) {
       return 'package.yaml';
     }

diff --git a/packages/nx/package.json b/packages/nx/package.json
@@ -40,7 +40,6 @@
     "@napi-rs/wasm-runtime": "0.2.4",
     "@yarnpkg/lockfile": "^1.1.0",
     "@yarnpkg/parsers": "3.0.2",
-    "@zkochan/js-yaml": "0.0.7",
     "axios": "^1.7.4",
     "chalk": "^4.1.0",
     "cli-cursor": "3.1.0",
@@ -65,6 +64,7 @@
     "tmp": "~0.2.1",
     "tsconfig-paths": "^4.1.2",
     "tslib": "^2.3.0",
+    "yaml": "^2.6.1",
     "yargs": "^17.6.2",
     "yargs-parser": "21.1.1",
     "node-machine-id": "1.1.12",