Merge pull request #11010 from fabienpuissant/rework-react-core

rework react core like vue core
jhipster · Sep 30, 2024 · 050d101 · 050d101
2 parents 1e16587 + 28bde5b
commit 050d101
Show file tree

Hide file tree

Showing 22 changed files with 73 additions and 71 deletions.
diff --git a/...n/java/tech/jhipster/lite/generator/client/react/core/domain/ReactCoreModulesFactory.java b/...n/java/tech/jhipster/lite/generator/client/react/core/domain/ReactCoreModulesFactory.java
@@ -36,13 +36,15 @@ public class ReactCoreModulesFactory {
   private static final JHipsterSource APP_SOURCE = WEBAPP_SOURCE.append("app");
   private static final JHipsterDestination APP_DESTINATION = WEBAPP_DESTINATION.append("app");
 
-  private static final String PRIMARY_APP = "common/primary/app";
+  private static final JHipsterSource PIQURE_SOURCE = from("client/common/piqure");
+
+  private static final String PRIMARY_APP = "home/infrastructure/primary";
   private static final String ASSETS = "assets";
 
   private static final JHipsterSource PRIMARY_APP_SOURCE = APP_SOURCE.append(PRIMARY_APP);
   private static final JHipsterDestination PRIMARY_APP_DESTINATION = APP_DESTINATION.append(PRIMARY_APP);
 
-  private static final String TEST_PRIMARY = "src/test/webapp/unit/common/primary/app";
+  private static final String TEST_PRIMARY = "src/test/webapp/unit/home/infrastructure/primary";
   private static final String DEFAULT_TSCONFIG_PATH = "\"@/*\": [\"src/main/webapp/app/*\"]";
 
   public JHipsterModule buildModule(JHipsterModuleProperties properties) {
@@ -64,6 +66,7 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
         .addDevDependency(packageName("vite"), COMMON)
         .addDependency(packageName("react"), REACT)
         .addDependency(packageName("react-dom"), REACT)
+        .addDependency(packageName("piqure"), COMMON)
         .addScript(scriptKey("dev"), scriptCommand("npm-run-all --parallel dev:*"))
         .addScript(scriptKey("dev:vite"), scriptCommand("vite"))
         .addScript(scriptKey("build"), scriptCommand("npm-run-all build:*"))
@@ -81,10 +84,13 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
           .addTemplate("index.tsx")
           .addTemplate("vite-env.d.ts")
           .and()
+        .batch(PIQURE_SOURCE, APP_DESTINATION)
+          .addTemplate("injections.ts")
+        .and()
         .add(WEBAPP_SOURCE.template("index.html"), WEBAPP_DESTINATION.append("index.html"))
-        .add(SOURCE.append(TEST_PRIMARY).template("App.spec.tsx"), to(TEST_PRIMARY).append("App.spec.tsx"))
-        .add(PRIMARY_APP_SOURCE.template("App.tsx"), PRIMARY_APP_DESTINATION.append("App.tsx"))
-        .add(PRIMARY_APP_SOURCE.template("App.css"), PRIMARY_APP_DESTINATION.append("App.css"))
+        .add(SOURCE.append(TEST_PRIMARY).template("HomePage.spec.tsx"), to(TEST_PRIMARY).append("HomePage.spec.tsx"))
+        .add(PRIMARY_APP_SOURCE.template("HomePage.tsx"), PRIMARY_APP_DESTINATION.append("HomePage.tsx"))
+        .add(PRIMARY_APP_SOURCE.template("HomePage.css"), PRIMARY_APP_DESTINATION.append("HomePage.css"))
         .batch(WEBAPP_SOURCE.append(ASSETS), WEBAPP_DESTINATION.append(ASSETS))
           .addFile("JHipster-Lite-neon-blue.png")
           .addFile("ReactLogo.png")
@@ -171,6 +177,7 @@ private Consumer<JHipsterModuleBuilder> patchVitestConfig(JHipsterModuleProperti
           .add(text("plugins: ["), "plugins: [react(), ")
           .add(text("environment: 'node',"), "environment: 'jsdom',")
           .add(vitestCoverageExclusion(properties,"src/main/webapp/app/index.tsx"))
+          .add(vitestCoverageExclusion(properties,"src/main/webapp/app/injections.ts"))
           .and();
     //@formatter:on
   }

diff --git a/...in/java/tech/jhipster/lite/generator/client/react/i18n/domain/ReactI18nModuleFactory.java b/...in/java/tech/jhipster/lite/generator/client/react/i18n/domain/ReactI18nModuleFactory.java
@@ -24,7 +24,7 @@ public class ReactI18nModuleFactory {
   private static final JHipsterSource ASSETS_EN_SOURCE = from("client/react/i18n/src/main/webapp/assets/locales/en");
 
   private static final String INDEX = "src/main/webapp/";
-  private static final String INDEX_TEST = "src/test/webapp/unit/common/primary/app/";
+  private static final String INDEX_TEST = "src/test/webapp/unit/home/infrastructure/primary/";
 
   public JHipsterModule buildModule(JHipsterModuleProperties properties) {
     Assert.notNull("properties", properties);
@@ -49,7 +49,7 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
         .and()
       .and()
       .mandatoryReplacements()
-        .in(path(INDEX + "app/common/primary/app/App.tsx"))
+        .in(path(INDEX + "app/home/infrastructure/primary/HomePage.tsx"))
           .add(lineAfterText("import ReactLogo from '@assets/ReactLogo.png';"), "import { useTranslation } from 'react-i18next';")
           .add(lineBeforeText("return ("), properties.indentation().times(1) + "const { t } = useTranslation();" + LINE_BREAK)
           .add(lineAfterText("</h1>"), LINE_BREAK +
@@ -58,9 +58,9 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
         .in(path(INDEX + "app/index.tsx"))
           .add(lineAfterText("import './index.css';"), "import './i18n';" + LINE_BREAK)
           .and()
-        .in(path(INDEX_TEST + "App.spec.tsx"))
+        .in(path(INDEX_TEST + "HomePage.spec.tsx"))
           .add(append(), LINE_BREAK + """
-            describe('App I18next', () => {
+            describe('Home I18next', () => {
              it('renders with translation', () => {
                vi.mock('react-i18next', () => ({
                  useTranslation: () => {
@@ -72,8 +72,7 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
                    };
                  },
                }));
-               render(<App />);
-               const { getAllByText } = render(<App />);
+               const { getAllByText } = render(<HomePage />);
                const title = getAllByText('Internationalization enabled');
                expect(title).toBeTruthy();
              });

diff --git a/.../tech/jhipster/lite/generator/client/react/security/jwt/domain/ReactJwtModuleFactory.java b/.../tech/jhipster/lite/generator/client/react/security/jwt/domain/ReactJwtModuleFactory.java
@@ -35,7 +35,7 @@ public class ReactJwtModuleFactory {
   private static final JHipsterDestination TEST_DESTINATION = to("src/test/webapp/unit/");
 
   private static final RegexNeedleBeforeReplacer LOGIN_FORM_MATCHER = lineBeforeRegex(
-    "[  ]{0,10}[<\\/div>]{0,1}\n{0,5}[  ]{0,10}<\\/div>\n{0,5}[  ]{0,10}[);]{0,2}\n{0,5}\\}\n{0,5}[  ]{0,10}export default App;"
+    "[  ]{0,10}[<\\/div>]{0,1}\n{0,5}[  ]{0,10}<\\/div>\n{0,5}[  ]{0,10}[);]{0,2}\n{0,5}\\}\n{0,5}[  ]{0,10}export default HomePage;"
   );
   private static final String AUTHENTICATION_STYLE =
     """
@@ -87,17 +87,17 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
         .add(TEST_JAVASCRIPT_SOURCE.template("common/services/storage.test.ts"), TEST_DESTINATION.append("common/services/storage.test.ts"))
         .and()
       .mandatoryReplacements()
-        .in(path("src/main/webapp/app/common/primary/app/App.tsx"))
-          .add(lineBeforeText("function App() {"), "import LoginForm from '@/login/primary/loginForm';" + LINE_BREAK)
+        .in(path("src/main/webapp/app/home/infrastructure/primary/HomePage.tsx"))
+          .add(lineBeforeText("function HomePage() {"), "import LoginForm from '@/login/primary/loginForm';" + LINE_BREAK)
           .add(LOGIN_FORM_MATCHER, properties.indentation().times(4) + "<LoginForm />")
           .and()
         .in(path("src/main/webapp/app/index.tsx"))
           .add(lineBeforeText("import React from 'react';"), "import { NextUIProvider } from '@nextui-org/react';")
-          .add(regex("\\s+<App />"),
+          .add(regex("\\s+<HomePage />"),
                 """
 
               \t\t<NextUIProvider>
-              \t\t\t<App />
+              \t\t\t<HomePage />
               \t\t</NextUIProvider>\
               """.replace("\t", properties.indentation().spaces())
           )
@@ -107,7 +107,7 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
         .and()
       .and()
       .optionalReplacements()
-        .in(path("src/main/webapp/app/common/primary/app/App.css"))
+        .in(path("src/main/webapp/app/home/infrastructure/primary/HomePage.css"))
           .add(text("  -moz-osx-font-smoothing: grayscale;"), AUTHENTICATION_STYLE)
           .and()
         .and()

diff --git a/src/main/java/tech/jhipster/lite/generator/client/vue/core/domain/VueModulesFactory.java b/src/main/java/tech/jhipster/lite/generator/client/vue/core/domain/VueModulesFactory.java
@@ -30,6 +30,7 @@ public class VueModulesFactory {
 
   private static final JHipsterSource SOURCE = from("client/vue");
   private static final JHipsterSource APP_SOURCE = from("client/vue/webapp/app");
+  private static final JHipsterSource PIQURE_SOURCE = from("client/common/piqure");
   private static final JHipsterSource DOCUMENTATION_SOURCE = SOURCE.append("documentation");
   private static final JHipsterSource IMAGE_SOURCE = SOURCE.append("webapp/content/images");
 
@@ -60,7 +61,7 @@ public JHipsterModule buildVueModule(JHipsterModuleProperties properties) {
         .addDependency(packageName("vue"), VUE)
         .addDependency(packageName("axios"), VUE)
         .addDependency(packageName("vue-router"), VUE)
-        .addDependency(packageName("piqure"), VUE)
+        .addDependency(packageName("piqure"), COMMON)
         .addDevDependency(packageName("@vitejs/plugin-vue"), VUE)
         .addDevDependency(packageName("@vue/test-utils"), VUE)
         .addDevDependency(packageName("@vue/tsconfig"), VUE)
@@ -89,9 +90,11 @@ public JHipsterModule buildVueModule(JHipsterModuleProperties properties) {
           .addTemplate("env.d.ts")
           .addTemplate("main.ts")
           .addTemplate("AppVue.vue")
-          .addTemplate("injections.ts")
           .addTemplate("router.ts")
           .and()
+        .batch(PIQURE_SOURCE, MAIN_DESTINATION)
+          .addTemplate("injections.ts")
+        .and()
         .batch(APP_SOURCE.append("home"), MAIN_DESTINATION.append("home"))
           .addTemplate("application/HomeRouter.ts")
           .addTemplate("infrastructure/primary/HomepageVue.vue")

diff --git a/...ent/vue/webapp/app/injections.ts.mustache → ...ient/common/piqure/injections.ts.mustache b/...ent/vue/webapp/app/injections.ts.mustache → ...ient/common/piqure/injections.ts.mustache
diff --git a/...p/app/common/primary/app/App.css.mustache → ...rastructure/primary/HomePage.css.mustache b/...p/app/common/primary/app/App.css.mustache → ...rastructure/primary/HomePage.css.mustache
diff --git a/...p/app/common/primary/app/App.tsx.mustache → ...rastructure/primary/HomePage.tsx.mustache b/...p/app/common/primary/app/App.tsx.mustache → ...rastructure/primary/HomePage.tsx.mustache
@@ -1,9 +1,9 @@
-import './App.css';
+import './HomePage.css';
 
 import JHipsterLiteNeonBlue from '@assets/JHipster-Lite-neon-blue.png';
 import ReactLogo from '@assets/ReactLogo.png';
 
-function App() {
+function HomePage() {
   return (
     <div>
       <div id="app">
@@ -33,4 +33,4 @@ function App() {
   );
 }
 
-export default App;
+export default HomePage;
diff --git a/src/main/resources/generator/client/react/core/src/main/webapp/app/index.tsx.mustache b/src/main/resources/generator/client/react/core/src/main/webapp/app/index.tsx.mustache
@@ -1,4 +1,4 @@
-import App from '@/common/primary/app/App';
+import HomePage from '@/home/infrastructure/primary/HomePage';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
@@ -7,6 +7,6 @@ const container = document.getElementById('root');
 const root = createRoot(container!);
 root.render(
   <React.StrictMode>
-    <App />
+    <HomePage />
   </React.StrictMode>,
 );
diff --git a/.../common/primary/app/App.spec.tsx.mustache → ...ucture/primary/HomePage.spec.tsx.mustache b/.../common/primary/app/App.spec.tsx.mustache → ...ucture/primary/HomePage.spec.tsx.mustache
@@ -1,11 +1,11 @@
 import { render } from '@testing-library/react';
 import { describe, it } from 'vitest';
 
-import App from '@/common/primary/app/App';
+import HomePage from '@/home/infrastructure/primary/HomePage';
 
-describe('App tests', () => {
+describe('Home tests', () => {
   it('renders without crashing', () => {
-    const { getByText } = render(<App />);
+    const { getByText } = render(<HomePage />);
     const title = getByText('React + TypeScript + Vite');
     expect(title).toBeTruthy();
   });

diff --git a/...or/client/react/security/jwt/src/main/webapp/app/common/primary/app/LoginApp.tsx.mustache b/...or/client/react/security/jwt/src/main/webapp/app/common/primary/app/LoginApp.tsx.mustache
@@ -1,13 +1,13 @@
 import LoginForm from '@/login/primary/loginForm';
 
-import './App.css';
+import './HomePage.css';
 
 import JHipsterLiteNeonBlue from '@assets/JHipster-Lite-neon-blue.png';
 import ReactLogo from '@assets/ReactLogo.png';
 
 import React from 'react';
 
-function App() {
+function HomePage() {
   return (
     <div>
       <div id="app">
@@ -39,4 +39,4 @@ function App() {
   );
 }
 
-export default App;
+export default HomePage;
diff --git a/src/main/resources/generator/dependencies/common/package.json b/src/main/resources/generator/dependencies/common/package.json
@@ -7,7 +7,8 @@
     "i18next": "23.15.1",
     "i18next-browser-languagedetector": "8.0.0",
     "i18next-http-backend": "2.6.1",
-    "keycloak-js": "25.0.6"
+    "keycloak-js": "25.0.6",
+    "piqure": "2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "7.25.6",

diff --git a/src/main/resources/generator/dependencies/vue/package.json b/src/main/resources/generator/dependencies/vue/package.json
@@ -8,7 +8,6 @@
     "i18next-vue": "5.0.0",
     "pinia": "2.2.2",
     "pinia-plugin-persistedstate": "4.0.2",
-    "piqure": "2.0.0",
     "vue": "3.5.9",
     "vue-router": "4.4.5"
   },

diff --git a/src/test/features/client/react.feature b/src/test/features/client/react.feature
@@ -6,5 +6,5 @@ Feature: React modules
       | prettier   |
       | typescript |
       | react-core |
-    Then I should have files in "src/main/webapp/app/common/primary/app"
-      | App.tsx |
+    Then I should have files in "src/main/webapp/app/home/infrastructure/primary"
+      | HomePage.tsx |
diff --git a/...va/tech/jhipster/lite/generator/client/react/core/domain/ReactCoreModulesFactoryTest.java b/...va/tech/jhipster/lite/generator/client/react/core/domain/ReactCoreModulesFactoryTest.java
@@ -35,6 +35,7 @@ void shouldBuildModuleWithStyle() {
       .containing(nodeDependency("vite"))
       .containing(nodeDependency("react"))
       .containing(nodeDependency("react-dom"))
+      .containing(nodeDependency("piqure"))
       .containing(nodeScript("dev", "npm-run-all --parallel dev:*"))
       .containing(nodeScript("dev:vite", "vite"))
       .containing(nodeScript("build", "npm-run-all build:*"))
@@ -64,12 +65,12 @@ void shouldBuildModuleWithStyle() {
       .and()
       .hasFiles("vite.config.ts")
       .hasFiles("src/main/webapp/index.html")
-      .hasPrefixedFiles("src/main/webapp/app", "index.css", "index.tsx", "vite-env.d.ts")
-      .hasFiles("src/test/webapp/unit/common/primary/app/App.spec.tsx")
-      .hasFile("src/main/webapp/app/common/primary/app/App.tsx")
-      .containing("import './App.css';")
+      .hasPrefixedFiles("src/main/webapp/app", "index.css", "index.tsx", "vite-env.d.ts", "injections.ts")
+      .hasFiles("src/test/webapp/unit/home/infrastructure/primary/HomePage.spec.tsx")
+      .hasFile("src/main/webapp/app/home/infrastructure/primary/HomePage.tsx")
+      .containing("import './HomePage.css';")
       .and()
-      .hasFiles("src/main/webapp/app/common/primary/app/App.css")
+      .hasFiles("src/main/webapp/app/home/infrastructure/primary/HomePage.css")
       .hasPrefixedFiles("src/main/webapp/assets", "ReactLogo.png", "JHipster-Lite-neon-blue.png");
   }
 

diff --git a/...ava/tech/jhipster/lite/generator/client/react/i18n/domain/ReactI18nModuleFactoryTest.java b/...ava/tech/jhipster/lite/generator/client/react/i18n/domain/ReactI18nModuleFactoryTest.java
@@ -11,7 +11,7 @@
 @UnitTest
 class ReactI18nModuleFactoryTest {
 
-  private static final String APP_TSX = "src/main/webapp/app/common/primary/app/App.tsx";
+  private static final String HomePage_TSX = "src/main/webapp/app/home/infrastructure/primary/HomePage.tsx";
 
   private final ReactI18nModuleFactory factory = new ReactI18nModuleFactory();
 
@@ -34,22 +34,25 @@ void shouldBuildI18nModule() {
       .hasFile("src/main/webapp/app/index.tsx")
       .containing("import './i18n'")
       .and()
-      .hasFile("src/main/webapp/app/common/primary/app/App.tsx")
+      .hasFile("src/main/webapp/app/home/infrastructure/primary/HomePage.tsx")
       .containing("import { useTranslation } from 'react-i18next")
       .containing("const { t } = useTranslation();")
       .containing("{t('translationEnabled')}")
       .and()
       .hasPrefixedFiles("src/main/webapp/assets/locales/", "en/translation.json", "fr/translation.json")
-      .hasFile("src/test/webapp/unit/common/primary/app/App.spec.tsx")
-      .containing("describe('App I18next', () => {");
+      .hasFile("src/test/webapp/unit/home/infrastructure/primary/HomePage.spec.tsx")
+      .containing("describe('Home I18next', () => {");
   }
 
   private ModuleFile app() {
-    return file("src/test/resources/projects/react-app/App.tsx", APP_TSX);
+    return file("src/test/resources/projects/react-app/HomePage.tsx", HomePage_TSX);
   }
 
   private ModuleFile appTest() {
-    return file("src/test/resources/projects/react-app/App.spec.tsx", "src/test/webapp/unit/common/primary/app/App.spec.tsx");
+    return file(
+      "src/test/resources/projects/react-app/HomePage.spec.tsx",
+      "src/test/webapp/unit/home/infrastructure/primary/HomePage.spec.tsx"
+    );
   }
 
   private ModuleFile index() {

diff --git a/...h/jhipster/lite/generator/client/react/security/jwt/domain/ReactJwtModuleFactoryTest.java b/...h/jhipster/lite/generator/client/react/security/jwt/domain/ReactJwtModuleFactoryTest.java
@@ -12,7 +12,7 @@
 @UnitTest
 class ReactJwtModuleFactoryTest {
 
-  private static final String APP_TSX = "src/main/webapp/app/common/primary/app/App.tsx";
+  private static final String APP_TSX = "src/main/webapp/app/home/infrastructure/primary/HomePage.tsx";
 
   private static final ReactJwtModuleFactory factory = new ReactJwtModuleFactory();
 
@@ -24,7 +24,7 @@ void shouldBuildModule() {
 
     assertReactApp(asserter);
     asserter
-      .hasFile("src/main/webapp/app/common/primary/app/App.css")
+      .hasFile("src/main/webapp/app/home/infrastructure/primary/HomePage.css")
       .containing(
         """
           -moz-osx-font-smoothing: grayscale;
@@ -40,19 +40,19 @@ void shouldBuildModule() {
         """
           <React.StrictMode>
             <NextUIProvider>
-              <App />
+              <HomePage />
             </NextUIProvider>
           </React.StrictMode>,
         """
       );
   }
 
   private ModuleFile app() {
-    return file("src/test/resources/projects/react-app/App.tsx", APP_TSX);
+    return file("src/test/resources/projects/react-app/HomePage.tsx", APP_TSX);
   }
 
   private ModuleFile appCss() {
-    return file("src/test/resources/projects/react-app/App.css", "src/main/webapp/app/common/primary/app/App.css");
+    return file("src/test/resources/projects/react-app/HomePage.css", "src/main/webapp/app/home/infrastructure/primary/HomePage.css");
   }
 
   private ModuleFile indexTsx() {
@@ -100,7 +100,7 @@ private void assertReactApp(JHipsterModuleAsserter asserter) {
         "login/primary/loginModal/index.test.tsx",
         "common/services/storage.test.ts"
       )
-      .hasFile("src/main/webapp/app/common/primary/app/App.tsx")
+      .hasFile("src/main/webapp/app/home/infrastructure/primary/HomePage.tsx")
       .containing("import LoginForm from '@/login/primary/loginForm';")
       .containing("<LoginForm />");
   }

diff --git a/src/test/resources/projects/react-app/App.spec.tsx b/src/test/resources/projects/react-app/App.spec.tsx
diff --git a/...test/resources/projects/react-app/App.css → ...resources/projects/react-app/HomePage.css b/...test/resources/projects/react-app/App.css → ...resources/projects/react-app/HomePage.css
diff --git a/.../common/primary/app/App.test.tsx.mustache → ...rces/projects/react-app/HomePage.spec.tsx b/.../common/primary/app/App.test.tsx.mustache → ...rces/projects/react-app/HomePage.spec.tsx
@@ -1,11 +1,11 @@
 import { render } from '@testing-library/react';
 import { describe, it } from 'vitest';
 
-import App from '@/common/primary/app/App';
+import HomePage from '@/home/infrastructure/primary/HomePage';
 
-describe('App tests', () => {
+describe('Home tests', () => {
   it('renders without crashing', () => {
-    const { getByText } = render(<App />);
+    const { getByText } = render(<HomePage />);
     const title = getByText('React + TypeScript + Vite');
     expect(title).toBeTruthy();
   });