From 3cf4cfe5554cd3a2dfbcb077038e2fbef9678c52 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 5 Sep 2025 14:01:35 +0200 Subject: [PATCH 1/6] docs(Templates & Examples): use subpath imports --- docs/ProjectTemplates.mdx | 5 +++- .../nextjs-app/app/components/AppShell.tsx | 2 +- .../nextjs-app/app/components/AppShellBar.tsx | 17 +++++------- .../nextjs-app/app/components/TodoList.tsx | 3 ++- examples/nextjs-app/app/layout.tsx | 2 +- examples/nextjs-app/app/loading.tsx | 2 +- examples/nextjs-app/app/page.tsx | 4 ++- examples/nextjs-app/app/todos/[id]/page.tsx | 24 ++++++++--------- .../components/AppShell/index.tsx | 3 ++- examples/nextjs-pages/pages/_app.tsx | 2 +- examples/nextjs-pages/pages/index.tsx | 6 ++++- examples/nextjs-pages/pages/todos/[id].tsx | 24 ++++++++--------- .../app/components/AppShell.tsx | 2 +- .../app/components/AppShellBar.tsx | 17 +++++------- .../app/components/TodoList.tsx | 3 ++- examples/react-router-ts/app/routes/index.tsx | 4 ++- examples/react-router-ts/app/routes/todo.tsx | 24 ++++++++--------- .../vite-ts/cypress/support/component.tsx | 2 +- examples/vite-ts/src/App.cy.tsx | 2 +- examples/vite-ts/src/AppShell.tsx | 27 ++++++++----------- examples/vite-ts/src/ToDos.tsx | 5 +++- examples/vite-ts/src/TodoDetails.tsx | 20 +++++++------- examples/vite-ts/src/main.tsx | 4 ++- .../src/UserSettingsDialog/AppearanceItem.tsx | 20 +++++++------- .../UserSettingsDialog/LanguageRegionItem.tsx | 20 +++++++------- .../src/UserSettingsDialog/MobileItem.tsx | 9 +++++-- .../NLUserSettingsDialog.tsx | 7 +++-- .../src/UserSettingsDialog/ResetItem.tsx | 7 +++-- .../UserSettingsDialog/UserAccountItem.tsx | 22 +++++++-------- templates/nextjs-app/app/layout.tsx | 2 +- templates/nextjs-app/app/page.tsx | 3 ++- templates/nextjs-pages/pages/_app.tsx | 2 +- templates/nextjs-pages/pages/index.tsx | 3 ++- .../vite-ts/cypress/support/component.tsx | 2 +- templates/vite-ts/src/App.tsx | 4 ++- templates/vite-ts/src/main.tsx | 2 +- 36 files changed, 156 insertions(+), 151 deletions(-) diff --git a/docs/ProjectTemplates.mdx b/docs/ProjectTemplates.mdx index 1f1704b9189..ea429bcb1e2 100644 --- a/docs/ProjectTemplates.mdx +++ b/docs/ProjectTemplates.mdx @@ -3,7 +3,7 @@ import NextLogo from '@sb/images/logo-nextjs.svg'; import ReactRouterLogo from '@sb/images/logo-react-router.svg'; import ViteLogo from '@sb/images/logo-vitejs.svg'; import { Meta } from '@storybook/addon-docs/blocks'; -import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label } from '@ui5/webcomponents-react'; +import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label, MessageStrip } from '@ui5/webcomponents-react'; @@ -50,6 +50,9 @@ A curated list of minimal project templates and examples to get started using UI ## Examples +The examples below are minimal applications built with various frameworks and libraries. They show how to integrate UI5 Web Components for React into your projects and are not intended as UX or accessibility patterns. + +

diff --git a/examples/nextjs-app/app/components/AppShell.tsx b/examples/nextjs-app/app/components/AppShell.tsx index 6ee26ad9174..82a280f4102 100644 --- a/examples/nextjs-app/app/components/AppShell.tsx +++ b/examples/nextjs-app/app/components/AppShell.tsx @@ -2,7 +2,7 @@ import '@ui5/webcomponents-react/dist/Assets.js'; import { AppShellBar } from '@/app/components/AppShellBar'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; import { ReactNode } from 'react'; interface AppShellProps { diff --git a/examples/nextjs-app/app/components/AppShellBar.tsx b/examples/nextjs-app/app/components/AppShellBar.tsx index 7606eeb5f3e..3c3094f1882 100644 --- a/examples/nextjs-app/app/components/AppShellBar.tsx +++ b/examples/nextjs-app/app/components/AppShellBar.tsx @@ -2,17 +2,12 @@ import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js'; import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js'; -import { - Button, - List, - ListPropTypes, - ResponsivePopover, - ShellBar, - ShellBarItem, - ShellBarItemPropTypes, - ListItemStandard, - ButtonDomRef, -} from '@ui5/webcomponents-react'; +import { Button, type ButtonDomRef } from '@ui5/webcomponents-react/Button'; +import { List, type ListPropTypes } from '@ui5/webcomponents-react/List'; +import { ResponsivePopover } from '@ui5/webcomponents-react/ResponsivePopover'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; +import { ShellBarItem, type ShellBarItemPropTypes } from '@ui5/webcomponents-react/ShellBarItem'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; import { usePathname, useRouter } from 'next/navigation'; import { useRef, useState } from 'react'; import classes from './AppShellBar.module.css'; diff --git a/examples/nextjs-app/app/components/TodoList.tsx b/examples/nextjs-app/app/components/TodoList.tsx index 9d81b4417f5..509c26099aa 100644 --- a/examples/nextjs-app/app/components/TodoList.tsx +++ b/examples/nextjs-app/app/components/TodoList.tsx @@ -1,6 +1,7 @@ 'use client'; import { Todo } from '@/app/mockData/todos'; -import { List, ListPropTypes, ListItemStandard } from '@ui5/webcomponents-react'; +import { List, type ListPropTypes } from '@ui5/webcomponents-react/List'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; import { useRouter } from 'next/navigation'; import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; diff --git a/examples/nextjs-app/app/layout.tsx b/examples/nextjs-app/app/layout.tsx index 701d5d292f1..2702b0a3558 100644 --- a/examples/nextjs-app/app/layout.tsx +++ b/examples/nextjs-app/app/layout.tsx @@ -1,7 +1,7 @@ import '@ui5/webcomponents-react/styles.css'; import './globals.css'; import { AppShell } from '@/app/components/AppShell'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( diff --git a/examples/nextjs-app/app/loading.tsx b/examples/nextjs-app/app/loading.tsx index 3883dc8c9c8..612ff67445b 100644 --- a/examples/nextjs-app/app/loading.tsx +++ b/examples/nextjs-app/app/loading.tsx @@ -1,4 +1,4 @@ -import { BusyIndicator } from '@ui5/webcomponents-react'; +import { BusyIndicator } from '@ui5/webcomponents-react/BusyIndicator'; import classes from './loading.module.css'; import BusyIndicatorSize from '@ui5/webcomponents/dist/types/BusyIndicatorSize.js'; diff --git a/examples/nextjs-app/app/page.tsx b/examples/nextjs-app/app/page.tsx index 54f253ba918..5303559996b 100644 --- a/examples/nextjs-app/app/page.tsx +++ b/examples/nextjs-app/app/page.tsx @@ -1,6 +1,8 @@ import { TodoList } from '@/app/components/TodoList'; import { Todo, todos } from '@/app/mockData/todos'; -import { Bar, Page, Title } from '@ui5/webcomponents-react'; +import { Bar } from '@ui5/webcomponents-react/Bar'; +import { Page } from '@ui5/webcomponents-react/Page'; +import { Title } from '@ui5/webcomponents-react/Title'; export default async function Home() { // this is a very simple mock which mimics data fetching diff --git a/examples/nextjs-app/app/todos/[id]/page.tsx b/examples/nextjs-app/app/todos/[id]/page.tsx index bfb5a047d16..924509bf855 100644 --- a/examples/nextjs-app/app/todos/[id]/page.tsx +++ b/examples/nextjs-app/app/todos/[id]/page.tsx @@ -1,17 +1,15 @@ import { Todo, todos } from '@/app/mockData/todos'; -import { - DatePicker, - DynamicPage, - DynamicPageTitle, - Form, - FormItem, - Input, - Label, - MessageStrip, - Switch, - TextArea, - Title, -} from '@ui5/webcomponents-react'; +import { DatePicker } from '@ui5/webcomponents-react/DatePicker'; +import { DynamicPage } from '@ui5/webcomponents-react/DynamicPage'; +import { DynamicPageTitle } from '@ui5/webcomponents-react/DynamicPageTitle'; +import { Form } from '@ui5/webcomponents-react/Form'; +import { FormItem } from '@ui5/webcomponents-react/FormItem'; +import { Input } from '@ui5/webcomponents-react/Input'; +import { Label } from '@ui5/webcomponents-react/Label'; +import { MessageStrip } from '@ui5/webcomponents-react/MessageStrip'; +import { Switch } from '@ui5/webcomponents-react/Switch'; +import { TextArea } from '@ui5/webcomponents-react/TextArea'; +import { Title } from '@ui5/webcomponents-react/Title'; import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js'; export default async function TodoDetails(props: { params: Promise<{ id: string }> }) { diff --git a/examples/nextjs-pages/components/AppShell/index.tsx b/examples/nextjs-pages/components/AppShell/index.tsx index b93a4b13853..ae84d9ef7b2 100644 --- a/examples/nextjs-pages/components/AppShell/index.tsx +++ b/examples/nextjs-pages/components/AppShell/index.tsx @@ -1,5 +1,6 @@ import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js'; -import { Button, ShellBar } from '@ui5/webcomponents-react'; +import { Button } from '@ui5/webcomponents-react/Button'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; import { useRouter } from 'next/router'; import { ReactNode } from 'react'; import classes from './AppShell.module.css'; diff --git a/examples/nextjs-pages/pages/_app.tsx b/examples/nextjs-pages/pages/_app.tsx index 4fd454fce6e..86775bccb1e 100644 --- a/examples/nextjs-pages/pages/_app.tsx +++ b/examples/nextjs-pages/pages/_app.tsx @@ -1,7 +1,7 @@ import '@ui5/webcomponents-react/dist/Assets.js'; import '@ui5/webcomponents-react/styles.css'; import '../styles/globals.css'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; import type { AppProps } from 'next/app'; import Head from 'next/head'; import { AppShell } from '../components/AppShell'; diff --git a/examples/nextjs-pages/pages/index.tsx b/examples/nextjs-pages/pages/index.tsx index d4b3871475a..5b22a56fc04 100644 --- a/examples/nextjs-pages/pages/index.tsx +++ b/examples/nextjs-pages/pages/index.tsx @@ -1,5 +1,9 @@ import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; -import { Bar, List, ListItemStandard, ListPropTypes, Page, Title } from '@ui5/webcomponents-react'; +import { Bar } from '@ui5/webcomponents-react/Bar'; +import { List, type ListPropTypes } from '@ui5/webcomponents-react/List'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; +import { Page } from '@ui5/webcomponents-react/Page'; +import { Title } from '@ui5/webcomponents-react/Title'; import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; import { GetServerSideProps } from 'next'; import { useRouter } from 'next/router'; diff --git a/examples/nextjs-pages/pages/todos/[id].tsx b/examples/nextjs-pages/pages/todos/[id].tsx index 7a7cb477809..cbce8f429e9 100644 --- a/examples/nextjs-pages/pages/todos/[id].tsx +++ b/examples/nextjs-pages/pages/todos/[id].tsx @@ -1,16 +1,14 @@ -import { - DatePicker, - DynamicPage, - DynamicPageTitle, - Form, - FormItem, - Input, - Label, - MessageStrip, - Switch, - TextArea, - Title, -} from '@ui5/webcomponents-react'; +import { DatePicker } from '@ui5/webcomponents-react/DatePicker'; +import { DynamicPage } from '@ui5/webcomponents-react/DynamicPage'; +import { DynamicPageTitle } from '@ui5/webcomponents-react/DynamicPageTitle'; +import { Form } from '@ui5/webcomponents-react/Form'; +import { FormItem } from '@ui5/webcomponents-react/FormItem'; +import { Input } from '@ui5/webcomponents-react/Input'; +import { Label } from '@ui5/webcomponents-react/Label'; +import { MessageStrip } from '@ui5/webcomponents-react/MessageStrip'; +import { Switch } from '@ui5/webcomponents-react/Switch'; +import { TextArea } from '@ui5/webcomponents-react/TextArea'; +import { Title } from '@ui5/webcomponents-react/Title'; import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js'; import { GetServerSideProps } from 'next'; import { Todo } from '../api/todos'; diff --git a/examples/react-router-ts/app/components/AppShell.tsx b/examples/react-router-ts/app/components/AppShell.tsx index 4c408e3d84f..b65e2902a9d 100644 --- a/examples/react-router-ts/app/components/AppShell.tsx +++ b/examples/react-router-ts/app/components/AppShell.tsx @@ -1,5 +1,5 @@ import '@ui5/webcomponents-react/dist/Assets.js'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; import { ReactNode } from 'react'; import { AppShellBar } from './AppShellBar'; diff --git a/examples/react-router-ts/app/components/AppShellBar.tsx b/examples/react-router-ts/app/components/AppShellBar.tsx index 380a7927fae..62a9a74b3e6 100644 --- a/examples/react-router-ts/app/components/AppShellBar.tsx +++ b/examples/react-router-ts/app/components/AppShellBar.tsx @@ -2,17 +2,12 @@ import { useLocation, useNavigate } from 'react-router'; import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js'; import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js'; import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js'; -import { - Button, - List, - ListItemStandard, - ListPropTypes, - ResponsivePopover, - ResponsivePopoverDomRef, - ShellBar, - ShellBarItem, - ShellBarItemPropTypes, -} from '@ui5/webcomponents-react'; +import { Button } from '@ui5/webcomponents-react/Button'; +import { List, type ListPropTypes } from '@ui5/webcomponents-react/List'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; +import { ResponsivePopover, type ResponsivePopoverDomRef } from '@ui5/webcomponents-react/ResponsivePopover'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; +import { ShellBarItem, type ShellBarItemPropTypes } from '@ui5/webcomponents-react/ShellBarItem'; import ListSelectionMode from '@ui5/webcomponents/dist/types/ListSelectionMode.js'; import { useRef, useState } from 'react'; import classes from './AppShellBar.module.css'; diff --git a/examples/react-router-ts/app/components/TodoList.tsx b/examples/react-router-ts/app/components/TodoList.tsx index ec648744a94..1f0f994f2d9 100644 --- a/examples/react-router-ts/app/components/TodoList.tsx +++ b/examples/react-router-ts/app/components/TodoList.tsx @@ -1,6 +1,7 @@ import { useNavigate } from 'react-router'; import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; -import { List, ListItemStandard, ListPropTypes } from '@ui5/webcomponents-react'; +import { List, type ListPropTypes } from '@ui5/webcomponents-react/List'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; import { Todo } from '~/mockData/todos'; diff --git a/examples/react-router-ts/app/routes/index.tsx b/examples/react-router-ts/app/routes/index.tsx index 5c043351082..cff633d7463 100644 --- a/examples/react-router-ts/app/routes/index.tsx +++ b/examples/react-router-ts/app/routes/index.tsx @@ -1,4 +1,6 @@ -import { Bar, Page, Title } from '@ui5/webcomponents-react'; +import { Bar } from '@ui5/webcomponents-react/Bar'; +import { Page } from '@ui5/webcomponents-react/Page'; +import { Title } from '@ui5/webcomponents-react/Title'; import type { MetaFunction } from 'react-router'; import { TodoList } from '~/components/TodoList'; import { Todo, todos } from '~/mockData/todos'; diff --git a/examples/react-router-ts/app/routes/todo.tsx b/examples/react-router-ts/app/routes/todo.tsx index 88337af6b47..8ff46a1778b 100644 --- a/examples/react-router-ts/app/routes/todo.tsx +++ b/examples/react-router-ts/app/routes/todo.tsx @@ -1,16 +1,14 @@ -import { - DatePicker, - DynamicPage, - DynamicPageTitle, - Form, - FormItem, - Input, - Label, - MessageStrip, - Switch, - TextArea, - Title, -} from '@ui5/webcomponents-react'; +import { DatePicker } from '@ui5/webcomponents-react/DatePicker'; +import { DynamicPage } from '@ui5/webcomponents-react/DynamicPage'; +import { DynamicPageTitle } from '@ui5/webcomponents-react/DynamicPageTitle'; +import { Form } from '@ui5/webcomponents-react/Form'; +import { FormItem } from '@ui5/webcomponents-react/FormItem'; +import { Input } from '@ui5/webcomponents-react/Input'; +import { Label } from '@ui5/webcomponents-react/Label'; +import { MessageStrip } from '@ui5/webcomponents-react/MessageStrip'; +import { Switch } from '@ui5/webcomponents-react/Switch'; +import { TextArea } from '@ui5/webcomponents-react/TextArea'; +import { Title } from '@ui5/webcomponents-react/Title'; import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js'; import { Todo, todos } from '~/mockData/todos'; import type { Route } from './+types/todo'; diff --git a/examples/vite-ts/cypress/support/component.tsx b/examples/vite-ts/cypress/support/component.tsx index 88657a079f8..423e7113901 100644 --- a/examples/vite-ts/cypress/support/component.tsx +++ b/examples/vite-ts/cypress/support/component.tsx @@ -13,7 +13,7 @@ // https://on.cypress.io/configuration // *********************************************************** import '@ui5/webcomponents-react/dist/Assets.js'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; // Alternatively you can use CommonJS syntax: // require('./commands') diff --git a/examples/vite-ts/src/App.cy.tsx b/examples/vite-ts/src/App.cy.tsx index 1203b0f1f05..221dd0e6e9e 100644 --- a/examples/vite-ts/src/App.cy.tsx +++ b/examples/vite-ts/src/App.cy.tsx @@ -1,4 +1,4 @@ -import { Button } from '@ui5/webcomponents-react'; +import { Button } from '@ui5/webcomponents-react/Button'; describe('Component tests', () => { // example for component test diff --git a/examples/vite-ts/src/AppShell.tsx b/examples/vite-ts/src/AppShell.tsx index ab505fbe738..151bdf4cd35 100644 --- a/examples/vite-ts/src/AppShell.tsx +++ b/examples/vite-ts/src/AppShell.tsx @@ -1,21 +1,16 @@ import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js'; import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js'; -import { - Avatar, - Breadcrumbs, - Button, - DynamicPage, - DynamicPageTitle, - List, - ListPropTypes, - ResponsivePopover, - ShellBar, - ShellBarItem, - ShellBarItemPropTypes, - ListItemStandard, - ButtonDomRef, - Title, -} from '@ui5/webcomponents-react'; +import { Avatar } from '@ui5/webcomponents-react/Avatar'; +import { Breadcrumbs } from '@ui5/webcomponents-react/Breadcrumbs'; +import { Button, type ButtonDomRef } from '@ui5/webcomponents-react/Button'; +import { DynamicPage } from '@ui5/webcomponents-react/DynamicPage'; +import { DynamicPageTitle } from '@ui5/webcomponents-react/DynamicPageTitle'; +import { List, type ListPropTypes } from '@ui5/webcomponents-react/List'; +import { ResponsivePopover } from '@ui5/webcomponents-react/ResponsivePopover'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; +import { ShellBarItem, type ShellBarItemPropTypes } from '@ui5/webcomponents-react/ShellBarItem'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; +import { Title } from '@ui5/webcomponents-react/Title'; import { useRef, useState } from 'react'; import { Outlet, useLocation, useMatches, useNavigate } from 'react-router'; import { SingleTodoHandle } from './main.tsx'; diff --git a/examples/vite-ts/src/ToDos.tsx b/examples/vite-ts/src/ToDos.tsx index f01db0d2b5a..7fee11ffe56 100644 --- a/examples/vite-ts/src/ToDos.tsx +++ b/examples/vite-ts/src/ToDos.tsx @@ -1,4 +1,7 @@ -import { BusyIndicator, Card, List, ListItemStandard } from '@ui5/webcomponents-react'; +import { BusyIndicator } from '@ui5/webcomponents-react/BusyIndicator'; +import { Card } from '@ui5/webcomponents-react/Card'; +import { List } from '@ui5/webcomponents-react/List'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; import { Suspense } from 'react'; import { Await, useLoaderData, useNavigate } from 'react-router'; import { Todo } from './mockImplementations/mockData.ts'; diff --git a/examples/vite-ts/src/TodoDetails.tsx b/examples/vite-ts/src/TodoDetails.tsx index 6c1f9e01fb8..dd84c318f59 100644 --- a/examples/vite-ts/src/TodoDetails.tsx +++ b/examples/vite-ts/src/TodoDetails.tsx @@ -1,14 +1,12 @@ -import { - Card, - DatePicker, - Form, - FormItem, - Input, - Label, - MessageStrip, - Switch, - TextArea, -} from '@ui5/webcomponents-react'; +import { Card } from '@ui5/webcomponents-react/Card'; +import { DatePicker } from '@ui5/webcomponents-react/DatePicker'; +import { Form } from '@ui5/webcomponents-react/Form'; +import { FormItem } from '@ui5/webcomponents-react/FormItem'; +import { Input } from '@ui5/webcomponents-react/Input'; +import { Label } from '@ui5/webcomponents-react/Label'; +import { MessageStrip } from '@ui5/webcomponents-react/MessageStrip'; +import { Switch } from '@ui5/webcomponents-react/Switch'; +import { TextArea } from '@ui5/webcomponents-react/TextArea'; import { useLoaderData } from 'react-router'; import { Todo } from './mockImplementations/mockData.ts'; import classes from './TodoDetails.module.css'; diff --git a/examples/vite-ts/src/main.tsx b/examples/vite-ts/src/main.tsx index 3ad82c47193..d15405a8b40 100644 --- a/examples/vite-ts/src/main.tsx +++ b/examples/vite-ts/src/main.tsx @@ -1,6 +1,8 @@ import '@ui5/webcomponents-react/dist/Assets.js'; import ErrorScreenIllustration from '@ui5/webcomponents-fiori/dist/illustrations/ErrorScreen.js'; -import { BreadcrumbsItem, IllustratedMessage, ThemeProvider } from '@ui5/webcomponents-react'; +import { BreadcrumbsItem } from '@ui5/webcomponents-react/BreadcrumbsItem'; +import { IllustratedMessage } from '@ui5/webcomponents-react/IllustratedMessage'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; import { ReactNode, StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { createBrowserRouter, LoaderFunctionArgs } from 'react-router'; diff --git a/patterns/navigation-layout/src/UserSettingsDialog/AppearanceItem.tsx b/patterns/navigation-layout/src/UserSettingsDialog/AppearanceItem.tsx index 0c238601c8b..a45288fd0d2 100644 --- a/patterns/navigation-layout/src/UserSettingsDialog/AppearanceItem.tsx +++ b/patterns/navigation-layout/src/UserSettingsDialog/AppearanceItem.tsx @@ -1,15 +1,13 @@ import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js'; -import { - Button, - CheckBox, - Label, - List, - ListItemStandard, - Panel, - Toast, - UserSettingsItem, - UserSettingsView, -} from '@ui5/webcomponents-react'; +import { Button } from '@ui5/webcomponents-react/Button'; +import { CheckBox } from '@ui5/webcomponents-react/CheckBox'; +import { Label } from '@ui5/webcomponents-react/Label'; +import { List } from '@ui5/webcomponents-react/List'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; +import { Panel } from '@ui5/webcomponents-react/Panel'; +import { Toast } from '@ui5/webcomponents-react/Toast'; +import { UserSettingsItem } from '@ui5/webcomponents-react/UserSettingsItem'; +import { UserSettingsView } from '@ui5/webcomponents-react/UserSettingsView'; export function AppearanceItem() { return ( diff --git a/patterns/navigation-layout/src/UserSettingsDialog/LanguageRegionItem.tsx b/patterns/navigation-layout/src/UserSettingsDialog/LanguageRegionItem.tsx index 75a9047f77f..2b961ff1e4d 100644 --- a/patterns/navigation-layout/src/UserSettingsDialog/LanguageRegionItem.tsx +++ b/patterns/navigation-layout/src/UserSettingsDialog/LanguageRegionItem.tsx @@ -1,14 +1,12 @@ -import type { UserSettingsItemPropTypes } from '@ui5/webcomponents-react'; -import { - ComboBox, - ComboBoxItem, - Label, - Panel, - RadioButton, - Text, - UserSettingsItem, - UserSettingsView, -} from '@ui5/webcomponents-react'; +import type { UserSettingsItemPropTypes } from '@ui5/webcomponents-react/UserSettingsItem'; +import { ComboBox } from '@ui5/webcomponents-react/ComboBox'; +import { ComboBoxItem } from '@ui5/webcomponents-react/ComboBoxItem'; +import { Label } from '@ui5/webcomponents-react/Label'; +import { Panel } from '@ui5/webcomponents-react/Panel'; +import { RadioButton } from '@ui5/webcomponents-react/RadioButton'; +import { Text } from '@ui5/webcomponents-react/Text'; +import { UserSettingsItem } from '@ui5/webcomponents-react/UserSettingsItem'; +import { UserSettingsView } from '@ui5/webcomponents-react/UserSettingsView'; export function LanguageRegionItem({ loading }: Pick) { return ( diff --git a/patterns/navigation-layout/src/UserSettingsDialog/MobileItem.tsx b/patterns/navigation-layout/src/UserSettingsDialog/MobileItem.tsx index 2a9e1007bc5..0cb0bcec8b2 100644 --- a/patterns/navigation-layout/src/UserSettingsDialog/MobileItem.tsx +++ b/patterns/navigation-layout/src/UserSettingsDialog/MobileItem.tsx @@ -1,7 +1,12 @@ import iphoneIcon from '@ui5/webcomponents-icons/dist/iphone.js'; import qrCodeIcon from '@ui5/webcomponents-icons/dist/qr-code.js'; -import type { ButtonPropTypes, UserSettingsItemPropTypes } from '@ui5/webcomponents-react'; -import { Button, Icon, Text, UserSettingsItem, UserSettingsView } from '@ui5/webcomponents-react'; +import type { ButtonPropTypes } from '@ui5/webcomponents-react/Button'; +import type { UserSettingsItemPropTypes } from '@ui5/webcomponents-react/UserSettingsItem'; +import { Button } from '@ui5/webcomponents-react/Button'; +import { Icon } from '@ui5/webcomponents-react/Icon'; +import { Text } from '@ui5/webcomponents-react/Text'; +import { UserSettingsItem } from '@ui5/webcomponents-react/UserSettingsItem'; +import { UserSettingsView } from '@ui5/webcomponents-react/UserSettingsView'; import { useState } from 'react'; export function MobileItem() { diff --git a/patterns/navigation-layout/src/UserSettingsDialog/NLUserSettingsDialog.tsx b/patterns/navigation-layout/src/UserSettingsDialog/NLUserSettingsDialog.tsx index fe44cef0fad..1e21ba9a454 100644 --- a/patterns/navigation-layout/src/UserSettingsDialog/NLUserSettingsDialog.tsx +++ b/patterns/navigation-layout/src/UserSettingsDialog/NLUserSettingsDialog.tsx @@ -1,6 +1,9 @@ import bellIcon from '@ui5/webcomponents-icons/dist/bell.js'; -import type { UserSettingsDialogPropTypes } from '@ui5/webcomponents-react'; -import { CheckBox, UserSettingsDialog, UserSettingsItem, UserSettingsView } from '@ui5/webcomponents-react'; +import type { UserSettingsDialogPropTypes } from '@ui5/webcomponents-react/UserSettingsDialog'; +import { CheckBox } from '@ui5/webcomponents-react/CheckBox'; +import { UserSettingsDialog } from '@ui5/webcomponents-react/UserSettingsDialog'; +import { UserSettingsItem } from '@ui5/webcomponents-react/UserSettingsItem'; +import { UserSettingsView } from '@ui5/webcomponents-react/UserSettingsView'; import type { Dispatch, SetStateAction } from 'react'; import { useState } from 'react'; import { AppearanceItem } from './AppearanceItem.tsx'; diff --git a/patterns/navigation-layout/src/UserSettingsDialog/ResetItem.tsx b/patterns/navigation-layout/src/UserSettingsDialog/ResetItem.tsx index e89842e2d97..d35949e87a7 100644 --- a/patterns/navigation-layout/src/UserSettingsDialog/ResetItem.tsx +++ b/patterns/navigation-layout/src/UserSettingsDialog/ResetItem.tsx @@ -1,6 +1,9 @@ import resetIcon from '@ui5/webcomponents-icons/dist/reset.js'; -import type { ButtonPropTypes } from '@ui5/webcomponents-react'; -import { Button, Toast, UserSettingsItem, UserSettingsView } from '@ui5/webcomponents-react'; +import type { ButtonPropTypes } from '@ui5/webcomponents-react/Button'; +import { Button } from '@ui5/webcomponents-react/Button'; +import { Toast } from '@ui5/webcomponents-react/Toast'; +import { UserSettingsItem } from '@ui5/webcomponents-react/UserSettingsItem'; +import { UserSettingsView } from '@ui5/webcomponents-react/UserSettingsView'; import type { Dispatch, SetStateAction } from 'react'; import { useState } from 'react'; import { createPortal } from 'react-dom'; diff --git a/patterns/navigation-layout/src/UserSettingsDialog/UserAccountItem.tsx b/patterns/navigation-layout/src/UserSettingsDialog/UserAccountItem.tsx index a2a0ef530e1..e7f7ed31681 100644 --- a/patterns/navigation-layout/src/UserSettingsDialog/UserAccountItem.tsx +++ b/patterns/navigation-layout/src/UserSettingsDialog/UserAccountItem.tsx @@ -1,16 +1,14 @@ import userSettingsIcon from '@ui5/webcomponents-icons/dist/user-settings.js'; -import type { MessageBoxPropTypes } from '@ui5/webcomponents-react'; -import { - Avatar, - Button, - Label, - MessageBox, - Panel, - Text, - Title, - UserSettingsItem, - UserSettingsView, -} from '@ui5/webcomponents-react'; +import type { MessageBoxPropTypes } from '@ui5/webcomponents-react/MessageBox'; +import { Avatar } from '@ui5/webcomponents-react/Avatar'; +import { Button } from '@ui5/webcomponents-react/Button'; +import { Label } from '@ui5/webcomponents-react/Label'; +import { MessageBox } from '@ui5/webcomponents-react/MessageBox'; +import { Panel } from '@ui5/webcomponents-react/Panel'; +import { Text } from '@ui5/webcomponents-react/Text'; +import { Title } from '@ui5/webcomponents-react/Title'; +import { UserSettingsItem } from '@ui5/webcomponents-react/UserSettingsItem'; +import { UserSettingsView } from '@ui5/webcomponents-react/UserSettingsView'; import { useState } from 'react'; import { createPortal } from 'react-dom'; diff --git a/templates/nextjs-app/app/layout.tsx b/templates/nextjs-app/app/layout.tsx index da941aadfc0..0916e49e3cf 100644 --- a/templates/nextjs-app/app/layout.tsx +++ b/templates/nextjs-app/app/layout.tsx @@ -1,7 +1,7 @@ import './clientAssetsImport.ts'; import '@ui5/webcomponents-react/styles.css'; import './globals.css'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( diff --git a/templates/nextjs-app/app/page.tsx b/templates/nextjs-app/app/page.tsx index c81e006ef37..260a55682de 100644 --- a/templates/nextjs-app/app/page.tsx +++ b/templates/nextjs-app/app/page.tsx @@ -1,5 +1,6 @@ import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js'; -import { Avatar, ShellBar } from '@ui5/webcomponents-react'; +import { Avatar } from '@ui5/webcomponents-react/Avatar'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; export default function Page() { return ( diff --git a/templates/nextjs-pages/pages/_app.tsx b/templates/nextjs-pages/pages/_app.tsx index 8133ed34173..5970e96c5ea 100644 --- a/templates/nextjs-pages/pages/_app.tsx +++ b/templates/nextjs-pages/pages/_app.tsx @@ -1,7 +1,7 @@ import '@ui5/webcomponents-react/styles.css'; import '../styles/globals.css'; import '@ui5/webcomponents-react/dist/Assets.js'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; import type { AppProps } from 'next/app'; import Head from 'next/head'; diff --git a/templates/nextjs-pages/pages/index.tsx b/templates/nextjs-pages/pages/index.tsx index b3b3c351161..9ab60c72d99 100644 --- a/templates/nextjs-pages/pages/index.tsx +++ b/templates/nextjs-pages/pages/index.tsx @@ -1,5 +1,6 @@ import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js'; -import { Avatar, ShellBar } from '@ui5/webcomponents-react'; +import { Avatar } from '@ui5/webcomponents-react/Avatar'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; export default function Home() { return ( diff --git a/templates/vite-ts/cypress/support/component.tsx b/templates/vite-ts/cypress/support/component.tsx index 88657a079f8..423e7113901 100644 --- a/templates/vite-ts/cypress/support/component.tsx +++ b/templates/vite-ts/cypress/support/component.tsx @@ -13,7 +13,7 @@ // https://on.cypress.io/configuration // *********************************************************** import '@ui5/webcomponents-react/dist/Assets.js'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; // Alternatively you can use CommonJS syntax: // require('./commands') diff --git a/templates/vite-ts/src/App.tsx b/templates/vite-ts/src/App.tsx index 72eee527a96..5c001641af9 100644 --- a/templates/vite-ts/src/App.tsx +++ b/templates/vite-ts/src/App.tsx @@ -1,5 +1,7 @@ import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js'; -import { Avatar, ShellBar } from '@ui5/webcomponents-react'; +import { Avatar } from '@ui5/webcomponents-react/Avatar'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; + function App() { return ( <> diff --git a/templates/vite-ts/src/main.tsx b/templates/vite-ts/src/main.tsx index debe19419d9..8d0485ff962 100644 --- a/templates/vite-ts/src/main.tsx +++ b/templates/vite-ts/src/main.tsx @@ -1,5 +1,5 @@ import '@ui5/webcomponents-react/dist/Assets.js'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App.tsx'; From 0f405626f2f459a19c70d68d607ae74054a57a85 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 5 Sep 2025 15:11:30 +0200 Subject: [PATCH 2/6] revert navigation-layout files --- .../src/UserSettingsDialog/AppearanceItem.tsx | 20 +++++++++-------- .../UserSettingsDialog/LanguageRegionItem.tsx | 20 +++++++++-------- .../src/UserSettingsDialog/MobileItem.tsx | 9 ++------ .../NLUserSettingsDialog.tsx | 7 ++---- .../src/UserSettingsDialog/ResetItem.tsx | 7 ++---- .../UserSettingsDialog/UserAccountItem.tsx | 22 ++++++++++--------- 6 files changed, 40 insertions(+), 45 deletions(-) diff --git a/patterns/navigation-layout/src/UserSettingsDialog/AppearanceItem.tsx b/patterns/navigation-layout/src/UserSettingsDialog/AppearanceItem.tsx index a45288fd0d2..0c238601c8b 100644 --- a/patterns/navigation-layout/src/UserSettingsDialog/AppearanceItem.tsx +++ b/patterns/navigation-layout/src/UserSettingsDialog/AppearanceItem.tsx @@ -1,13 +1,15 @@ import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js'; -import { Button } from '@ui5/webcomponents-react/Button'; -import { CheckBox } from '@ui5/webcomponents-react/CheckBox'; -import { Label } from '@ui5/webcomponents-react/Label'; -import { List } from '@ui5/webcomponents-react/List'; -import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; -import { Panel } from '@ui5/webcomponents-react/Panel'; -import { Toast } from '@ui5/webcomponents-react/Toast'; -import { UserSettingsItem } from '@ui5/webcomponents-react/UserSettingsItem'; -import { UserSettingsView } from '@ui5/webcomponents-react/UserSettingsView'; +import { + Button, + CheckBox, + Label, + List, + ListItemStandard, + Panel, + Toast, + UserSettingsItem, + UserSettingsView, +} from '@ui5/webcomponents-react'; export function AppearanceItem() { return ( diff --git a/patterns/navigation-layout/src/UserSettingsDialog/LanguageRegionItem.tsx b/patterns/navigation-layout/src/UserSettingsDialog/LanguageRegionItem.tsx index 2b961ff1e4d..75a9047f77f 100644 --- a/patterns/navigation-layout/src/UserSettingsDialog/LanguageRegionItem.tsx +++ b/patterns/navigation-layout/src/UserSettingsDialog/LanguageRegionItem.tsx @@ -1,12 +1,14 @@ -import type { UserSettingsItemPropTypes } from '@ui5/webcomponents-react/UserSettingsItem'; -import { ComboBox } from '@ui5/webcomponents-react/ComboBox'; -import { ComboBoxItem } from '@ui5/webcomponents-react/ComboBoxItem'; -import { Label } from '@ui5/webcomponents-react/Label'; -import { Panel } from '@ui5/webcomponents-react/Panel'; -import { RadioButton } from '@ui5/webcomponents-react/RadioButton'; -import { Text } from '@ui5/webcomponents-react/Text'; -import { UserSettingsItem } from '@ui5/webcomponents-react/UserSettingsItem'; -import { UserSettingsView } from '@ui5/webcomponents-react/UserSettingsView'; +import type { UserSettingsItemPropTypes } from '@ui5/webcomponents-react'; +import { + ComboBox, + ComboBoxItem, + Label, + Panel, + RadioButton, + Text, + UserSettingsItem, + UserSettingsView, +} from '@ui5/webcomponents-react'; export function LanguageRegionItem({ loading }: Pick) { return ( diff --git a/patterns/navigation-layout/src/UserSettingsDialog/MobileItem.tsx b/patterns/navigation-layout/src/UserSettingsDialog/MobileItem.tsx index 0cb0bcec8b2..2a9e1007bc5 100644 --- a/patterns/navigation-layout/src/UserSettingsDialog/MobileItem.tsx +++ b/patterns/navigation-layout/src/UserSettingsDialog/MobileItem.tsx @@ -1,12 +1,7 @@ import iphoneIcon from '@ui5/webcomponents-icons/dist/iphone.js'; import qrCodeIcon from '@ui5/webcomponents-icons/dist/qr-code.js'; -import type { ButtonPropTypes } from '@ui5/webcomponents-react/Button'; -import type { UserSettingsItemPropTypes } from '@ui5/webcomponents-react/UserSettingsItem'; -import { Button } from '@ui5/webcomponents-react/Button'; -import { Icon } from '@ui5/webcomponents-react/Icon'; -import { Text } from '@ui5/webcomponents-react/Text'; -import { UserSettingsItem } from '@ui5/webcomponents-react/UserSettingsItem'; -import { UserSettingsView } from '@ui5/webcomponents-react/UserSettingsView'; +import type { ButtonPropTypes, UserSettingsItemPropTypes } from '@ui5/webcomponents-react'; +import { Button, Icon, Text, UserSettingsItem, UserSettingsView } from '@ui5/webcomponents-react'; import { useState } from 'react'; export function MobileItem() { diff --git a/patterns/navigation-layout/src/UserSettingsDialog/NLUserSettingsDialog.tsx b/patterns/navigation-layout/src/UserSettingsDialog/NLUserSettingsDialog.tsx index 1e21ba9a454..fe44cef0fad 100644 --- a/patterns/navigation-layout/src/UserSettingsDialog/NLUserSettingsDialog.tsx +++ b/patterns/navigation-layout/src/UserSettingsDialog/NLUserSettingsDialog.tsx @@ -1,9 +1,6 @@ import bellIcon from '@ui5/webcomponents-icons/dist/bell.js'; -import type { UserSettingsDialogPropTypes } from '@ui5/webcomponents-react/UserSettingsDialog'; -import { CheckBox } from '@ui5/webcomponents-react/CheckBox'; -import { UserSettingsDialog } from '@ui5/webcomponents-react/UserSettingsDialog'; -import { UserSettingsItem } from '@ui5/webcomponents-react/UserSettingsItem'; -import { UserSettingsView } from '@ui5/webcomponents-react/UserSettingsView'; +import type { UserSettingsDialogPropTypes } from '@ui5/webcomponents-react'; +import { CheckBox, UserSettingsDialog, UserSettingsItem, UserSettingsView } from '@ui5/webcomponents-react'; import type { Dispatch, SetStateAction } from 'react'; import { useState } from 'react'; import { AppearanceItem } from './AppearanceItem.tsx'; diff --git a/patterns/navigation-layout/src/UserSettingsDialog/ResetItem.tsx b/patterns/navigation-layout/src/UserSettingsDialog/ResetItem.tsx index d35949e87a7..e89842e2d97 100644 --- a/patterns/navigation-layout/src/UserSettingsDialog/ResetItem.tsx +++ b/patterns/navigation-layout/src/UserSettingsDialog/ResetItem.tsx @@ -1,9 +1,6 @@ import resetIcon from '@ui5/webcomponents-icons/dist/reset.js'; -import type { ButtonPropTypes } from '@ui5/webcomponents-react/Button'; -import { Button } from '@ui5/webcomponents-react/Button'; -import { Toast } from '@ui5/webcomponents-react/Toast'; -import { UserSettingsItem } from '@ui5/webcomponents-react/UserSettingsItem'; -import { UserSettingsView } from '@ui5/webcomponents-react/UserSettingsView'; +import type { ButtonPropTypes } from '@ui5/webcomponents-react'; +import { Button, Toast, UserSettingsItem, UserSettingsView } from '@ui5/webcomponents-react'; import type { Dispatch, SetStateAction } from 'react'; import { useState } from 'react'; import { createPortal } from 'react-dom'; diff --git a/patterns/navigation-layout/src/UserSettingsDialog/UserAccountItem.tsx b/patterns/navigation-layout/src/UserSettingsDialog/UserAccountItem.tsx index e7f7ed31681..a2a0ef530e1 100644 --- a/patterns/navigation-layout/src/UserSettingsDialog/UserAccountItem.tsx +++ b/patterns/navigation-layout/src/UserSettingsDialog/UserAccountItem.tsx @@ -1,14 +1,16 @@ import userSettingsIcon from '@ui5/webcomponents-icons/dist/user-settings.js'; -import type { MessageBoxPropTypes } from '@ui5/webcomponents-react/MessageBox'; -import { Avatar } from '@ui5/webcomponents-react/Avatar'; -import { Button } from '@ui5/webcomponents-react/Button'; -import { Label } from '@ui5/webcomponents-react/Label'; -import { MessageBox } from '@ui5/webcomponents-react/MessageBox'; -import { Panel } from '@ui5/webcomponents-react/Panel'; -import { Text } from '@ui5/webcomponents-react/Text'; -import { Title } from '@ui5/webcomponents-react/Title'; -import { UserSettingsItem } from '@ui5/webcomponents-react/UserSettingsItem'; -import { UserSettingsView } from '@ui5/webcomponents-react/UserSettingsView'; +import type { MessageBoxPropTypes } from '@ui5/webcomponents-react'; +import { + Avatar, + Button, + Label, + MessageBox, + Panel, + Text, + Title, + UserSettingsItem, + UserSettingsView, +} from '@ui5/webcomponents-react'; import { useState } from 'react'; import { createPortal } from 'react-dom'; From f72363be8753dbb7738c496a5c62cc90bce966fb Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 8 Sep 2025 09:08:54 +0200 Subject: [PATCH 3/6] update tsconfigs --- examples/nextjs-app/tsconfig.json | 4 ++-- examples/nextjs-pages/tsconfig.json | 4 ++-- templates/nextjs-app/tsconfig.json | 4 ++-- templates/nextjs-pages/tsconfig.json | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/nextjs-app/tsconfig.json b/examples/nextjs-app/tsconfig.json index e06a4454ab0..fb0334088f4 100644 --- a/examples/nextjs-app/tsconfig.json +++ b/examples/nextjs-app/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "es5", + "target": "esnext", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "nodenext", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", diff --git a/examples/nextjs-pages/tsconfig.json b/examples/nextjs-pages/tsconfig.json index 61c19abd68d..02875b2c756 100644 --- a/examples/nextjs-pages/tsconfig.json +++ b/examples/nextjs-pages/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "es5", + "target": "esnext", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "nodenext", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", diff --git a/templates/nextjs-app/tsconfig.json b/templates/nextjs-app/tsconfig.json index e06a4454ab0..fb0334088f4 100644 --- a/templates/nextjs-app/tsconfig.json +++ b/templates/nextjs-app/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "es5", + "target": "esnext", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "nodenext", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", diff --git a/templates/nextjs-pages/tsconfig.json b/templates/nextjs-pages/tsconfig.json index 61c19abd68d..02875b2c756 100644 --- a/templates/nextjs-pages/tsconfig.json +++ b/templates/nextjs-pages/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "es5", + "target": "esnext", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "nodenext", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", From 0bf6ac15ff84be78498c09b0b7140e3ab91c9ef8 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 8 Sep 2025 09:37:58 +0200 Subject: [PATCH 4/6] update tsconfigs --- examples/nextjs-app/tsconfig.json | 2 +- examples/nextjs-pages/tsconfig.json | 2 +- templates/nextjs-app/tsconfig.json | 2 +- templates/nextjs-pages/tsconfig.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/nextjs-app/tsconfig.json b/examples/nextjs-app/tsconfig.json index fb0334088f4..1b65c62e688 100644 --- a/examples/nextjs-app/tsconfig.json +++ b/examples/nextjs-app/tsconfig.json @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "nodenext", + "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", diff --git a/examples/nextjs-pages/tsconfig.json b/examples/nextjs-pages/tsconfig.json index 02875b2c756..84020d50c2a 100644 --- a/examples/nextjs-pages/tsconfig.json +++ b/examples/nextjs-pages/tsconfig.json @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "nodenext", + "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", diff --git a/templates/nextjs-app/tsconfig.json b/templates/nextjs-app/tsconfig.json index fb0334088f4..1b65c62e688 100644 --- a/templates/nextjs-app/tsconfig.json +++ b/templates/nextjs-app/tsconfig.json @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "nodenext", + "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", diff --git a/templates/nextjs-pages/tsconfig.json b/templates/nextjs-pages/tsconfig.json index 02875b2c756..84020d50c2a 100644 --- a/templates/nextjs-pages/tsconfig.json +++ b/templates/nextjs-pages/tsconfig.json @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "nodenext", + "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", From 5e06901497ccfec4d6d2eb3add9b06197d334496 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 8 Sep 2025 09:58:39 +0200 Subject: [PATCH 5/6] moduleResolution: bundler --- examples/nextjs-app/tsconfig.json | 2 +- examples/nextjs-pages/tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/nextjs-app/tsconfig.json b/examples/nextjs-app/tsconfig.json index 1b65c62e688..f2fdfeb644d 100644 --- a/examples/nextjs-app/tsconfig.json +++ b/examples/nextjs-app/tsconfig.json @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", diff --git a/examples/nextjs-pages/tsconfig.json b/examples/nextjs-pages/tsconfig.json index 84020d50c2a..8ed00f69b26 100644 --- a/examples/nextjs-pages/tsconfig.json +++ b/examples/nextjs-pages/tsconfig.json @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", From f967c84479577f02df1c3e8a7a1e46de00ff835e Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 24 Sep 2025 08:49:55 +0200 Subject: [PATCH 6/6] update next tsconfigs --- examples/nextjs-app/tsconfig.json | 5 ++--- examples/nextjs-pages/tsconfig.json | 12 ++++++++---- templates/nextjs-app/tsconfig.json | 7 +++---- templates/nextjs-pages/tsconfig.json | 14 +++++++++----- 4 files changed, 22 insertions(+), 16 deletions(-) diff --git a/examples/nextjs-app/tsconfig.json b/examples/nextjs-app/tsconfig.json index f2fdfeb644d..d7c2cde34c6 100644 --- a/examples/nextjs-app/tsconfig.json +++ b/examples/nextjs-app/tsconfig.json @@ -1,11 +1,10 @@ { "compilerOptions": { - "target": "esnext", + "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", @@ -23,6 +22,6 @@ "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "**/*.mts"], "exclude": ["node_modules"] } diff --git a/examples/nextjs-pages/tsconfig.json b/examples/nextjs-pages/tsconfig.json index 8ed00f69b26..d7c2cde34c6 100644 --- a/examples/nextjs-pages/tsconfig.json +++ b/examples/nextjs-pages/tsconfig.json @@ -1,11 +1,10 @@ { "compilerOptions": { - "target": "esnext", + "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", @@ -14,10 +13,15 @@ "isolatedModules": true, "jsx": "preserve", "incremental": true, + "plugins": [ + { + "name": "next" + } + ], "paths": { - "@/*": ["./src/*"] + "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "**/*.mts"], "exclude": ["node_modules"] } diff --git a/templates/nextjs-app/tsconfig.json b/templates/nextjs-app/tsconfig.json index 1b65c62e688..d7c2cde34c6 100644 --- a/templates/nextjs-app/tsconfig.json +++ b/templates/nextjs-app/tsconfig.json @@ -1,15 +1,14 @@ { "compilerOptions": { - "target": "esnext", + "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", @@ -23,6 +22,6 @@ "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "**/*.mts"], "exclude": ["node_modules"] } diff --git a/templates/nextjs-pages/tsconfig.json b/templates/nextjs-pages/tsconfig.json index 84020d50c2a..d7c2cde34c6 100644 --- a/templates/nextjs-pages/tsconfig.json +++ b/templates/nextjs-pages/tsconfig.json @@ -1,23 +1,27 @@ { "compilerOptions": { - "target": "esnext", + "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, + "plugins": [ + { + "name": "next" + } + ], "paths": { - "@/*": ["./src/*"] + "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "**/*.mts"], "exclude": ["node_modules"] }