Update dependency of @lit-labs/react to official stable package @lit/react

docs/pages/resources/changelog.md

@@ -21,6 +21,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-menu>` that caused it not to fire the `sl-select` event if you clicked an element inside of a `<sl-menu-item>` [#1599]
 - Improved submenu selection by implementing the [safe triangle](https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/) method [#1550]
 - Updated `@shoelace-style/localize` to 3.1.0
+- Updated `@lib-labs/react` to stable `@lit/react`
 - Updated Bootstrap Icons to 1.11.1
 - Updated Lit to 3.0.0
 - Updated TypeScript to 5.2.2

package.json

@@ -62,7 +62,7 @@
   "dependencies": {
     "@ctrl/tinycolor": "^4.0.2",
     "@floating-ui/dom": "^1.5.3",
-    "@lit-labs/react": "^2.1.1",
+    "@lit/react": "^1.0.0",
     "@shoelace-style/animations": "^1.1.0",
     "@shoelace-style/localize": "^3.1.2",
     "composed-offset-position": "^0.0.4",

scripts/build.js

@@ -87,7 +87,7 @@ async function buildTheDocs(watch = false) {
 // Builds the source with esbuild.
 //
 async function buildTheSource() {
-  const alwaysExternal = ['@lit-labs/react', 'react'];
+  const alwaysExternal = ['@lit/react', 'react'];
 
   const cdnConfig = {
     format: 'esm',
@@ -122,7 +122,7 @@ async function buildTheSource() {
     // We don't bundle certain dependencies in the unbundled build. This ensures we ship bare module specifiers,
     // allowing end users to better optimize when using a bundler. (Only packages that ship ESM can be external.)
     //
-    // We never bundle React or @lit-labs/react though!
+    // We never bundle React or @lit/react though!
     //
     external: alwaysExternal,
     splitting: true,

scripts/make-react.js

@@ -31,8 +31,7 @@ components.forEach(async component => {
   const eventExports = (component.events || [])
     .map(event => `export type { ${event.eventName} } from '../../../src/events/events';`)
     .join('\n');
-  const eventNameImport =
-    (component.events || []).length > 0 ? `import { type EventName  } from '@lit-labs/react';` : ``;
+  const eventNameImport = (component.events || []).length > 0 ? `import { type EventName  } from '@lit/react';` : ``;
   const events = (component.events || [])
     .map(event => `${event.reactName}: '${event.name}' as EventName<${event.eventName}>`)
     .join(',\n');
@@ -44,7 +43,7 @@ components.forEach(async component => {
   const source = await prettier.format(
     `
       import * as React from 'react';
-      import { createComponent } from '@lit-labs/react';
+      import { createComponent } from '@lit/react';
       import Component from '../../${importPath}';
 
       ${eventNameImport}