@nx/react 19.6.0-canary.20240809-d3747e0 → 19.6.0-canary.20240813-c72ba9b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -65,7 +65,7 @@ export function NxWelcome({ title }: { title: string }) {
65
65
  color: rgba(229, 231, 235, 1);
66
66
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
67
67
  'Liberation Mono', 'Courier New', monospace;
68
- overflow: scroll;
68
+ overflow: auto;
69
69
  padding: 0.5rem 0.75rem;
70
70
  }
71
71
 
@@ -157,10 +157,15 @@ export function NxWelcome({ title }: { title: string }) {
157
157
  #middle-content {
158
158
  align-items: flex-start;
159
159
  display: grid;
160
- gap: 4rem;
161
160
  grid-template-columns: 1fr;
162
161
  margin-top: 3.5rem;
163
162
  }
163
+
164
+ #middle-content #middle-content-container {
165
+ display: flex;
166
+ flex-direction: column;
167
+ gap: 2rem;
168
+ }
164
169
  #learning-materials {
165
170
  padding: 2.5rem 2rem;
166
171
  }
@@ -202,7 +207,6 @@ export function NxWelcome({ title }: { title: string }) {
202
207
  opacity, box-shadow, transform, filter, backdrop-filter,
203
208
  -webkit-backdrop-filter;
204
209
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
205
- transition-duration: 150ms;
206
210
  }
207
211
  .list-item-link > span > span {
208
212
  color: rgba(107, 114, 128, 1);
@@ -215,7 +219,6 @@ export function NxWelcome({ title }: { title: string }) {
215
219
  opacity, box-shadow, transform, filter, backdrop-filter,
216
220
  -webkit-backdrop-filter;
217
221
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
218
- transition-duration: 150ms;
219
222
  }
220
223
  .list-item-link svg:last-child {
221
224
  height: 1rem;
@@ -226,7 +229,7 @@ export function NxWelcome({ title }: { title: string }) {
226
229
  }
227
230
  .list-item-link:hover {
228
231
  color: rgba(255, 255, 255, 1);
229
- background-color: hsla(162, 47%, 50%, 1);
232
+ background-color: hsla(162, 55%, 33%, 1);
230
233
  }
231
234
  .list-item-link:hover > span {}
232
235
  .list-item-link:hover > span > span {
@@ -418,6 +421,7 @@ export function NxWelcome({ title }: { title: string }) {
418
421
  }
419
422
  #middle-content {
420
423
  grid-template-columns: repeat(2, minmax(0, 1fr));
424
+ gap: 4rem;
421
425
  }
422
426
  }
423
427
  `,
@@ -465,190 +469,173 @@ export function NxWelcome({ title }: { title: string }) {
465
469
  </div>
466
470
 
467
471
  <div id="middle-content">
468
- <div id="learning-materials" className="rounded shadow">
469
- <h2>Learning materials</h2>
470
- <a
471
- href="https://nx.dev/getting-started/intro?utm_source=nx-project"
472
- target="_blank"
473
- rel="noreferrer"
474
- className="list-item-link"
475
- >
476
- <svg
477
- fill="none"
478
- stroke="currentColor"
479
- viewBox="0 0 24 24"
480
- xmlns="http://www.w3.org/2000/svg"
472
+ <div id="middle-content-container">
473
+ <div id="learning-materials" className="rounded shadow">
474
+ <h2>Learning materials</h2>
475
+ <a
476
+ href="https://nx.dev/getting-started/intro?utm_source=nx-project"
477
+ target="_blank"
478
+ rel="noreferrer"
479
+ className="list-item-link"
481
480
  >
482
- <path
483
- strokeLinecap="round"
484
- strokeLinejoin="round"
485
- strokeWidth="2"
486
- d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
487
- />
488
- </svg>
489
- <span>
490
- Documentation
491
- <span> Everything is in there </span>
492
- </span>
493
- <svg
494
- fill="none"
495
- stroke="currentColor"
496
- viewBox="0 0 24 24"
497
- xmlns="http://www.w3.org/2000/svg"
481
+ <svg
482
+ fill="none"
483
+ stroke="currentColor"
484
+ viewBox="0 0 24 24"
485
+ xmlns="http://www.w3.org/2000/svg"
486
+ >
487
+ <path
488
+ strokeLinecap="round"
489
+ strokeLinejoin="round"
490
+ strokeWidth="2"
491
+ d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
492
+ />
493
+ </svg>
494
+ <span>
495
+ Documentation
496
+ <span> Everything is in there </span>
497
+ </span>
498
+ <svg
499
+ fill="none"
500
+ stroke="currentColor"
501
+ viewBox="0 0 24 24"
502
+ xmlns="http://www.w3.org/2000/svg"
503
+ >
504
+ <path
505
+ strokeLinecap="round"
506
+ strokeLinejoin="round"
507
+ strokeWidth="2"
508
+ d="M9 5l7 7-7 7"
509
+ />
510
+ </svg>
511
+ </a>
512
+ <a
513
+ href="https://nx.dev/blog/?utm_source=nx-project"
514
+ target="_blank"
515
+ rel="noreferrer"
516
+ className="list-item-link"
498
517
  >
499
- <path
500
- strokeLinecap="round"
501
- strokeLinejoin="round"
502
- strokeWidth="2"
503
- d="M9 5l7 7-7 7"
504
- />
505
- </svg>
506
- </a>
507
- <a
508
- href="https://nx.dev/blog/?utm_source=nx-project"
509
- target="_blank"
510
- rel="noreferrer"
511
- className="list-item-link"
512
- >
513
- <svg
514
- fill="none"
515
- stroke="currentColor"
516
- viewBox="0 0 24 24"
517
- xmlns="http://www.w3.org/2000/svg"
518
+ <svg
519
+ fill="none"
520
+ stroke="currentColor"
521
+ viewBox="0 0 24 24"
522
+ xmlns="http://www.w3.org/2000/svg"
523
+ >
524
+ <path
525
+ strokeLinecap="round"
526
+ strokeLinejoin="round"
527
+ strokeWidth="2"
528
+ d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
529
+ />
530
+ </svg>
531
+ <span>
532
+ Blog
533
+ <span> Changelog, features & events </span>
534
+ </span>
535
+ <svg
536
+ fill="none"
537
+ stroke="currentColor"
538
+ viewBox="0 0 24 24"
539
+ xmlns="http://www.w3.org/2000/svg"
540
+ >
541
+ <path
542
+ strokeLinecap="round"
543
+ strokeLinejoin="round"
544
+ strokeWidth="2"
545
+ d="M9 5l7 7-7 7"
546
+ />
547
+ </svg>
548
+ </a>
549
+ <a
550
+ href="https://www.youtube.com/@NxDevtools/videos?utm_source=nx-project&sub_confirmation=1"
551
+ target="_blank"
552
+ rel="noreferrer"
553
+ className="list-item-link"
518
554
  >
519
- <path
520
- strokeLinecap="round"
521
- strokeLinejoin="round"
522
- strokeWidth="2"
523
- d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
524
- />
525
- </svg>
526
- <span>
527
- Blog
528
- <span> Changelog, features & events </span>
529
- </span>
530
- <svg
531
- fill="none"
532
- stroke="currentColor"
533
- viewBox="0 0 24 24"
534
- xmlns="http://www.w3.org/2000/svg"
555
+ <svg
556
+ role="img"
557
+ viewBox="0 0 24 24"
558
+ fill="currentColor"
559
+ xmlns="http://www.w3.org/2000/svg"
560
+ >
561
+ <title>YouTube</title>
562
+ <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
563
+ </svg>
564
+ <span>
565
+ YouTube channel
566
+ <span> Nx Show, talks & tutorials </span>
567
+ </span>
568
+ <svg
569
+ fill="none"
570
+ stroke="currentColor"
571
+ viewBox="0 0 24 24"
572
+ xmlns="http://www.w3.org/2000/svg"
573
+ >
574
+ <path
575
+ strokeLinecap="round"
576
+ strokeLinejoin="round"
577
+ strokeWidth="2"
578
+ d="M9 5l7 7-7 7"
579
+ />
580
+ </svg>
581
+ </a>
582
+ <a
583
+ href="<%= tutorialUrl %>"
584
+ target="_blank"
585
+ rel="noreferrer"
586
+ className="list-item-link"
535
587
  >
536
- <path
537
- strokeLinecap="round"
538
- strokeLinejoin="round"
539
- strokeWidth="2"
540
- d="M9 5l7 7-7 7"
541
- />
542
- </svg>
543
- </a>
588
+ <svg
589
+ fill="none"
590
+ stroke="currentColor"
591
+ viewBox="0 0 24 24"
592
+ xmlns="http://www.w3.org/2000/svg"
593
+ >
594
+ <path
595
+ strokeLinecap="round"
596
+ strokeLinejoin="round"
597
+ strokeWidth="2"
598
+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
599
+ />
600
+ </svg>
601
+ <span>
602
+ Interactive tutorials
603
+ <span> Create an app, step-by-step </span>
604
+ </span>
605
+ <svg
606
+ fill="none"
607
+ stroke="currentColor"
608
+ viewBox="0 0 24 24"
609
+ xmlns="http://www.w3.org/2000/svg"
610
+ >
611
+ <path
612
+ strokeLinecap="round"
613
+ strokeLinejoin="round"
614
+ strokeWidth="2"
615
+ d="M9 5l7 7-7 7"
616
+ />
617
+ </svg>
618
+ </a>
619
+ </div>
544
620
  <a
545
- href="https://www.youtube.com/@NxDevtools/videos?utm_source=nx-project&sub_confirmation=1"
621
+ id="nx-repo"
622
+ className="button-pill rounded shadow"
623
+ href="https://github.com/nrwl/nx?utm_source=nx-project"
546
624
  target="_blank"
547
625
  rel="noreferrer"
548
- className="list-item-link"
549
626
  >
550
627
  <svg
551
- role="img"
552
- viewBox="0 0 24 24"
553
628
  fill="currentColor"
554
- xmlns="http://www.w3.org/2000/svg"
555
- >
556
- <title>YouTube</title>
557
- <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
558
- </svg>
559
- <span>
560
- YouTube channel
561
- <span> Nx Show, talks & tutorials </span>
562
- </span>
563
- <svg
564
- fill="none"
565
- stroke="currentColor"
566
- viewBox="0 0 24 24"
567
- xmlns="http://www.w3.org/2000/svg"
568
- >
569
- <path
570
- strokeLinecap="round"
571
- strokeLinejoin="round"
572
- strokeWidth="2"
573
- d="M9 5l7 7-7 7"
574
- />
575
- </svg>
576
- </a>
577
- <a
578
- href="https://nx.dev/react-tutorial/1-code-generation?utm_source=nx-project"
579
- target="_blank"
580
- rel="noreferrer"
581
- className="list-item-link"
582
- >
583
- <svg
584
- fill="none"
585
- stroke="currentColor"
586
- viewBox="0 0 24 24"
587
- xmlns="http://www.w3.org/2000/svg"
588
- >
589
- <path
590
- strokeLinecap="round"
591
- strokeLinejoin="round"
592
- strokeWidth="2"
593
- d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
594
- />
595
- </svg>
596
- <span>
597
- Interactive tutorials
598
- <span> Create an app, step-by-step </span>
599
- </span>
600
- <svg
601
- fill="none"
602
- stroke="currentColor"
603
- viewBox="0 0 24 24"
604
- xmlns="http://www.w3.org/2000/svg"
605
- >
606
- <path
607
- strokeLinecap="round"
608
- strokeLinejoin="round"
609
- strokeWidth="2"
610
- d="M9 5l7 7-7 7"
611
- />
612
- </svg>
613
- </a>
614
- <a
615
- href="https://nxplaybook.com/?utm_source=nx-project"
616
- target="_blank"
617
- rel="noreferrer"
618
- className="list-item-link"
619
- >
620
- <svg
621
- fill="none"
622
- stroke="currentColor"
629
+ role="img"
623
630
  viewBox="0 0 24 24"
624
631
  xmlns="http://www.w3.org/2000/svg"
625
632
  >
626
- <path d="M12 14l9-5-9-5-9 5 9 5z" />
627
- <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
628
- <path
629
- strokeLinecap="round"
630
- strokeLinejoin="round"
631
- strokeWidth="2"
632
- d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
633
- />
633
+ <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
634
634
  </svg>
635
635
  <span>
636
- Video courses
637
- <span> Nx custom courses </span>
636
+ Nx is open source
637
+ <span> Love Nx? Give us a star! </span>
638
638
  </span>
639
- <svg
640
- fill="none"
641
- stroke="currentColor"
642
- viewBox="0 0 24 24"
643
- xmlns="http://www.w3.org/2000/svg"
644
- >
645
- <path
646
- strokeLinecap="round"
647
- strokeLinejoin="round"
648
- strokeWidth="2"
649
- d="M9 5l7 7-7 7"
650
- />
651
- </svg>
652
639
  </a>
653
640
  </div>
654
641
  <div id="other-links">
@@ -737,7 +724,7 @@ export function NxWelcome({ title }: { title: string }) {
737
724
  </p>
738
725
  <pre>nx connect</pre>
739
726
  <a
740
- href="https://nx.app/?utm_source=nx-project"
727
+ href="https://nx.dev/nx-cloud?utm_source=nx-project"
741
728
  target="_blank"
742
729
  rel="noreferrer"
743
730
  >
@@ -745,26 +732,6 @@ export function NxWelcome({ title }: { title: string }) {
745
732
  What is Nx Cloud?{' '}
746
733
  </a>
747
734
  </div>
748
- <a
749
- id="nx-repo"
750
- className="button-pill rounded shadow"
751
- href="https://github.com/nrwl/nx?utm_source=nx-project"
752
- target="_blank"
753
- rel="noreferrer"
754
- >
755
- <svg
756
- fill="currentColor"
757
- role="img"
758
- viewBox="0 0 24 24"
759
- xmlns="http://www.w3.org/2000/svg"
760
- >
761
- <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
762
- </svg>
763
- <span>
764
- Nx is open source
765
- <span> Love Nx? Give us a star! </span>
766
- </span>
767
- </a>
768
735
  </div>
769
736
  </div>
770
737
 
@@ -786,15 +753,30 @@ export function NxWelcome({ title }: { title: string }) {
786
753
  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
787
754
  />
788
755
  </svg>
789
- Add UI library
790
- </summary>
791
- <pre>
792
- <span># Generate UI lib</span>
793
- nx g @nx/react:lib ui
794
- <span># Add a component</span>
795
- nx g @nx/react:component ui/src/lib/button
796
- </pre>
797
- </details>
756
+ Build, test and lint your app
757
+ </summary>
758
+ <pre><% if ( rootProject ) { %>
759
+ <span># Build</span>
760
+ nx build
761
+ <span># Test</span>
762
+ nx test
763
+ <span># Lint</span>
764
+ nx lint
765
+ <span># Run them together!</span>
766
+ nx run-many -t build test lint
767
+ <% } else { %>
768
+ <span># Build</span>
769
+ nx build {title}
770
+ <span># Test</span>
771
+ nx test {title}
772
+ <span># Lint</span>
773
+ nx lint {title}
774
+ <span># Run them together!</span>
775
+ nx run-many -p {title} -t build test lint
776
+ <% } %>
777
+ </pre>
778
+ </details>
779
+
798
780
  <details>
799
781
  <summary>
800
782
  <svg
@@ -812,7 +794,7 @@ export function NxWelcome({ title }: { title: string }) {
812
794
  </svg>
813
795
  View project details
814
796
  </summary>
815
- <pre>nx show project {title} --web</pre>
797
+ <pre>nx show project {title}</pre>
816
798
  </details>
817
799
  <details>
818
800
  <summary>
@@ -848,15 +830,13 @@ export function NxWelcome({ title }: { title: string }) {
848
830
  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
849
831
  />
850
832
  </svg>
851
- Run affected commands
833
+ Add UI library
852
834
  </summary>
853
835
  <pre>
854
- <span># see what&apos;s been affected by changes</span>
855
- nx affected:graph
856
- <span># run tests for current changes</span>
857
- nx affected:test
858
- <span># run e2e tests for current changes</span>
859
- nx affected:e2e
836
+ <span># Generate UI lib</span>
837
+ nx g @nx/react:lib ui
838
+ <span># Add a component</span>
839
+ nx g @nx/react:component ui/src/lib/button
860
840
  </pre>
861
841
  </details>
862
842
  </div>