chore: bump scaffolders (#1019)

* bump scaffolders

* update vue router

* fix React lint and interactivity

* next.js app changes

* roll back vue

* middleware BC in Next.js 16

* Node.js deprecation of spawn args + shell: true

* try manual args join

* revert trying to fix Node.js deprecation

* update puppeteer to use the latest headless mode for Chrome

* fix lockfiles

* bump next.js again

* suppress tests

* .

Author: VasilyStrelyaev

package-lock.json

@@ -16,7 +16,7 @@
     "@angular-eslint/schematics": "^0.2.0-beta.1",
     "lerna": "^5.6.2",
     "pre-commit": "^1.2.2",
-    "puppeteer": "^21.11.0"
+    "puppeteer": "^24.32.1"
   },
   "pre-commit": "lint",
   "overrides": {

package.json

@@ -79,6 +79,7 @@ const create = async(appName, options) => {
         '--src-dir',
         '--app',
         '--no-turbopack',
+        '--no-react-compiler',
         '--import-alias "@/*"',
     ];
 

packages/devextreme-cli/package-lock.json

@@ -82,7 +82,7 @@ const create = async(appName, options) => {
 
     const commandArguments = [`-p=create-vite@${depsVersionTag || latestVersions['create-vite']}`, 'create-vite', appName];
 
-    commandArguments.push(`--template react${transpiler === 'swc' ? '-swc' : ''}${templateOptions.isTypeScript ? '-ts' : ''}`);
+    commandArguments.push(`--template react${transpiler === 'swc' ? '-swc' : ''}${templateOptions.isTypeScript ? '-ts' : ''} --no-rolldown --no-interactive`);
 
     await runCommand('npx', commandArguments);
 

packages/devextreme-cli/src/applications/application.nextjs.js

@@ -17,15 +17,10 @@ const defaultStyles = [
 const preparePackageJsonForTemplate = (appPath, appName) => {
     const dependencies = [
         { name: 'sass-embedded', version: '^1.85.1' },
-        { name: 'vue-router', version: '^3.0.1' },
+        { name: 'vue-router', version: '^4.0.1' },
         { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true }
     ];
 
-    const nameDepends = dependencies.map(d => d.name);
-    const indexVueRouter = nameDepends.indexOf('vue-router');
-
-    dependencies[indexVueRouter].version = '^4.0.1';
-
     const scripts = [
         { name: 'build-themes', value: 'devextreme build' },
         { name: 'postinstall', value: 'npm run build-themes' }

packages/devextreme-cli/src/applications/application.react.js

@@ -1,13 +1,14 @@
 'use client'
-import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import Form, {
   Item,
   Label,
   ButtonItem,
   ButtonOptions,
   RequiredRule,
-  CustomRule,
+  CustomRule,<%=#isTypeScript%>
+  type FormTypes,<%=/isTypeScript%>
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
@@ -17,11 +18,22 @@ import { changePassword } from '@/app/actions/auth';
 export default function ChangePasswordForm() {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({ password: '' });
+  const [formData, setFormData] = useState({ password: '' });
+
+  const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
+    const { dataField, value } = e;
+
+    if (dataField) {
+      setFormData(formData => ({
+        ...formData,
+        [dataField]: value,
+      }));
+    }
+  }, []);
 
   const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
   e.preventDefault();
-  const { password } = formData.current;
+  const { password } = formData;
   setLoading(true);
 
   const result = await changePassword(password);
@@ -32,16 +44,16 @@ export default function ChangePasswordForm() {
   } else {
     notify(result.message, 'error', 2000);
   }
-}, [router]);
+}, [router, formData]);
 
 const confirmPassword = useCallback(
-  ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
-  []
+  ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.password,
+  [formData]
 );
 
 return (
   <form onSubmit={onSubmit}>
-    <Form formData={formData.current} disabled={loading}>
+    <Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
       <Item
         dataField={'password'}
         editorType={'dxTextBox'}

packages/devextreme-cli/src/applications/application.vue.js

@@ -1,5 +1,5 @@
 'use client'
-import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Form, {
@@ -9,7 +9,8 @@ import Form, {
   ButtonOptions,
   RequiredRule,
   CustomRule,
-  EmailRule
+  EmailRule,<%=#isTypeScript%>
+  type FormTypes,<%=/isTypeScript%>
 } from 'devextreme-react/form';
 import notify from 'devextreme/ui/notify';
 import LoadIndicator from 'devextreme-react/load-indicator';
@@ -20,11 +21,22 @@ import './CreateAccountForm.scss';
 export default function CreateAccountForm() {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({ email: '', password: '' });
+  const [formData, setFormData] = useState({ email: '', password: '' });
+
+  const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
+    const { dataField, value } = e;
+
+    if (dataField) {
+      setFormData(formData => ({
+        ...formData,
+        [dataField]: value,
+      }));
+    }
+  }, []);
 
   const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
-    const { email, password } = formData.current;
+    const { email, password } = formData;
     setLoading(true);
 
     const result = await signUp(email, password);
@@ -35,16 +47,16 @@ export default function CreateAccountForm() {
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [router]);
+  }, [router, formData]);
 
   const confirmPassword = useCallback(
-    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
-    []
+    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.password,
+    [formData]
   );
 
   return (
     <form className={'create-account-form'} onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
+      <Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
         <Item
           dataField={'email'}
           editorType={'dxTextBox'}

packages/devextreme-cli/src/templates/nextjs/application/src/components/change-password-form/ChangePasswordForm.tsx

@@ -1,5 +1,5 @@
 'use client'
-import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Form, {
@@ -8,7 +8,8 @@ import Form, {
   ButtonItem,
   ButtonOptions,
   RequiredRule,
-  EmailRule
+  EmailRule,<%=#isTypeScript%>
+  type FormTypes,<%=/isTypeScript%>
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import Button from 'devextreme-react/button';
@@ -20,11 +21,22 @@ import './LoginForm.scss';
 export default function LoginForm() {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({ email: '', password: '' });
+  const [formData, setFormData] = useState({ email: '', password: '' });
+
+  const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
+    const { dataField, value } = e;
+
+    if (dataField) {
+      setFormData(formData => ({
+        ...formData,
+        [dataField]: value,
+      }));
+    }
+  }, []);
 
   const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
-    const { email, password } = formData.current;
+    const { email, password } = formData;
     setLoading(true);
 
     const result = await signIn(email, password);
@@ -34,15 +46,15 @@ export default function LoginForm() {
     } else {
       router.push('/');
     }
-  }, [router]);
+  }, [router, formData]);
 
   const onCreateAccountClick = useCallback(() => {
     router.push('/auth/create-account');
   }, [router]);
 
   return (
     <form className={'login-form'} onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
+      <Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
         <Item
           dataField={'email'}
           editorType={'dxTextBox'}

packages/devextreme-cli/src/templates/nextjs/application/src/components/create-account-form/CreateAccountForm.tsx

@@ -1,5 +1,5 @@
 'use client'
-import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Form, {
@@ -8,7 +8,8 @@ import Form, {
   ButtonItem,
   ButtonOptions,
   RequiredRule,
-  EmailRule
+  EmailRule,<%=#isTypeScript%>
+  type FormTypes,<%=/isTypeScript%>
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
@@ -20,11 +21,22 @@ const notificationText = 'We\'ve sent a link to reset your password. Check your
 export default function ResetPasswordForm() {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({ email: '', password: '' });
+  const [formData, setFormData] = useState({ email: '', password: '' });
+
+  const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
+    const { dataField, value } = e;
+
+    if (dataField) {
+      setFormData(formData => ({
+        ...formData,
+        [dataField]: value,
+      }));
+    }
+  }, []);
 
   const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
-    const { email } = formData.current;
+    const { email } = formData;
     setLoading(true);
 
     const result = await resetPassword(email);
@@ -36,11 +48,11 @@ export default function ResetPasswordForm() {
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [router]);
+  }, [router, formData]);
 
   return (
     <form className={'reset-password-form'} onSubmit={onSubmit}>
-      <Form formData={formData.current} disabled={loading}>
+      <Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
         <Item
           dataField={'email'}
           editorType={'dxTextBox'}