build taipy frontend package simply (#629)

* build taipy frontend package simply
rename TAIPY_GUI_DIR to TAIPY_DIR

* Fab's comments

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

doc/gui/extension/README.md

@@ -50,11 +50,11 @@ To complete the build of the extension library, we need the following tools:
 - [Node.js](https://nodejs.org/en/) 18.0 or higher: a JavaScript runtime.<br/>
   This embeds [npm](https://www.npmjs.com/), the Node Package Manager.
 
-The build process needs that you set the environment variable `TAIPY_GUI_DIR` to the location of
-the Taipy GUI installation:
+The build process needs that you set the environment variable `TAIPY_DIR` to the location of
+the Taipy installation:
 
 - If you build from a local copy (a clone, for example) of the
-  [`taipy-gui` repository](https://github.com/Avaiga/taipy-gui/),
+  [`taipy` repository](https://github.com/Avaiga/taipy/),
   this variable should be set to the path of the directory two levels above the directory where this
   README file is located, then down to the "taipy" directory (i.e., the result of the Unix command
   "``readlink -f `pwd`/../../taipy``").
@@ -62,11 +62,11 @@ the Taipy GUI installation:
   get that location issuing the command `pip show taipy-gui`.
 
 You can check that the setting is correct by verifying that the directory
-"$TAIPY_GUI_DIR/taipy/gui/webapp" exists.
+"$TAIPY_DIR/taipy/gui/webapp" exists.
 
 A way to set this variable once and for all for your environment is to add the line:
 ```
-TAIPY_GUI_DIR=<taipy_gui_installation_directory>
+TAIPY_DIR=<taipy_installation_directory>
 ```
 to the file `example_library/front-end/.env'. This file, if present, is read by the build process
 to initialize the environment variable.
@@ -143,7 +143,7 @@ changes is.
 ### Building the JavaScript bundle
 
 When all configuration files have been properly set (which is the case in this example) and
-the "TAIPY_GUI_DIR" variable is set, we can build the JavaScript module file:
+the "TAIPY_DIR" variable is set, we can build the JavaScript module file:
 
 - Set your directory to `example_library/front-end`
 - Install the Taipy GUI JavaScript bundle and the other dependencies:<br/>
@@ -152,7 +152,7 @@ the "TAIPY_GUI_DIR" variable is set, we can build the JavaScript module file:
   npm install
   ```
   This command will fail with a message indicating that the Taipy GUI 'webapp' directory
-  could not be found if the "TAIPY_GUI_DIR" environment variable was not set properly.
+  could not be found if the "TAIPY_DIR" environment variable was not set properly.
 - You can now build the custom element library JavaScript bundle file:
   ```
   npm run build

doc/gui/extension/example_library/front-end/scripts/install.js

@@ -1,33 +1,52 @@
 require("dotenv").config();
 const { exec, execSync } = require("child_process");
 const { existsSync, writeFileSync, appendFileSync } = require("fs");
-const { sep } = require("path");
+const { sep, resolve } = require("path");
 
-const getGuiEnv = () =>
-    execSync(
-        process.platform === "win32"
-            ? 'pipenv run pip show taipy-gui | findStr "Location:"'
-            : "pipenv run pip show taipy-gui | grep Location:"
-    )
-        .toString()
-        .trim()
-        .substring(9)
-        .trim();
+const getGuiEnv = (log = true) => {
+    try {
+        const pipGuiDir = execSync(
+            process.platform === "win32"
+                ? 'pip show taipy-gui | findStr "Location:"'
+                : "pip show taipy-gui | grep Location:",
+            {
+                stdio: ["pipe", "pipe", "pipe"],
+            }
+        )
+            .toString()
+            .trim();
+        return pipGuiDir.substring(9).trim();
+    } catch (e) {
+        log && console.info("taipy-gui pip package is not installed.");
+        const base = existsSync("package.json") ? `..${sep}..` : existsSync("frontend") ? "." : sep;
+        if (existsSync(resolve(base, "taipy", "gui", "webapp", "package.json"))) {
+            log && console.info(`Found npm package for taipy-gui in ${resolve(base, "taipy", "gui", "webapp")}`);
+            return base;
+        } else {
+            log && console.warn(`taipy-gui npm package should be built locally in ${resolve(base, "taipy", "gui", "webapp")} first.`);
+        }
+    }
+    return sep;
+};
 
-let TAIPY_GUI_DIR = process.env.TAIPY_GUI_DIR;
-if (!TAIPY_GUI_DIR) {
-    TAIPY_GUI_DIR = getGuiEnv();
-    if (existsSync(".env")) {
-        appendFileSync(".env", `\nTAIPY_GUI_DIR=${TAIPY_GUI_DIR}`);
-    } else {
-        writeFileSync(".env", `TAIPY_GUI_DIR=${TAIPY_GUI_DIR}`);
+let taipyEnvDir = process.env.TAIPY_DIR;
+if (!taipyEnvDir) {
+    taipyEnvDir = getGuiEnv();
+    if (taipyEnvDir != sep) {
+        if (existsSync(".env")) {
+            appendFileSync(".env", `\nTAIPY_DIR=${taipyEnvDir}`);
+        } else {
+            writeFileSync(".env", `TAIPY_DIR=${taipyEnvDir}`);
+        }
     }
 }
 
-const taipy_webapp_dir = `${TAIPY_GUI_DIR}${sep}taipy${sep}gui${sep}webapp`;
-if (!existsSync(taipy_webapp_dir)) {
+const taipyWebappDir = `${taipyEnvDir}${sep}taipy${sep}gui${sep}webapp`;
+if (!existsSync(taipyWebappDir)) {
     console.error(
-        `Cannot find the Taipy GUI (${taipy_webapp_dir}) webapp directory.\nMake sure TAIPY_GUI_DIR is set properly as (${getGuiEnv()}).`
+        `Cannot find the Taipy GUI (${taipyWebappDir}) webapp directory.\nMake sure TAIPY_DIR is set properly as (${getGuiEnv(
+            false
+        )}).`
     );
     process.exit(1);
 }
@@ -37,7 +56,7 @@ let i = 0;
 
 let spinnerTimer;
 
-exec(`npm i ${taipy_webapp_dir}`)
+exec(`npm i ${taipyWebappDir}`)
     .on("spawn", () => {
         spinnerTimer = setInterval(() => {
             process.stdout.write("Installing the Taipy GUI library... \r" + spinner[i++]);

doc/gui/extension/example_library/front-end/webpack.config.js

@@ -56,7 +56,7 @@ module.exports = (_env, options) => {
         // If this file is moved, this path must be updated
         manifest: path.resolve(
           __dirname,
-          `${process.env.TAIPY_GUI_DIR}/taipy/gui/webapp/taipy-gui-deps-manifest.json`
+          `${process.env.TAIPY_DIR}/taipy/gui/webapp/taipy-gui-deps-manifest.json`
         ),
         name: "TaipyGuiDependencies"
       }),

frontend/taipy-gui/extension-index.md

@@ -27,10 +27,10 @@ The Extension API is located by the 'taipy-gui' module.
 In order to import items from this module, you have to install it, using `npm`.
 The most simple way to install the Taipy GUI Extension module is:
 ```
-npm i <TAIPY_GUI_DIR>/webapp
+npm i <TAIPY_DIR>/taipy/gui/webapp
 ```
 
-Where *<TAIPY_GUI_DIR>* represents the directory where, in the development machine's
+Where *<TAIPY_DIR>* represents the directory where, in the development machine's
 filesystem, the Taipy GUI Python package has been installed.
 
 When the package is installed, your JavaScript code can import items from it:

frontend/taipy/dev.env

@@ -1 +1 @@
-TAIPY_GUI_DIR=<path the taipy package dir parent>
+TAIPY_DIR=<path the taipy package dir parent>

frontend/taipy/scripts/install.js

@@ -1,31 +1,54 @@
 require("dotenv").config();
 const { exec, execSync } = require("child_process");
 const { existsSync, writeFileSync, appendFileSync } = require("fs");
-const { sep } = require("path");
+const { sep, resolve } = require("path");
 
-const getGuiEnv = () =>
-  execSync(process.platform === "win32" ? 'pip show taipy-gui | findStr "Location:"' : "pip show taipy-gui | grep Location:", {
-    stdio: ["pipe", "pipe", "pipe"],
-  })
-    .toString()
-    .trim()
-    .substring(9)
-    .trim();
+const getGuiEnv = (log = true) => {
+    try {
+        const pipGuiDir = execSync(
+            process.platform === "win32"
+                ? 'pip show taipy-gui | findStr "Location:"'
+                : "pip show taipy-gui | grep Location:",
+            {
+                stdio: ["pipe", "pipe", "pipe"],
+            }
+        )
+            .toString()
+            .trim();
+        return pipGuiDir.substring(9).trim();
+    } catch (e) {
+        log && console.info("taipy-gui pip package is not installed.");
+        const base = existsSync("package.json") ? `..${sep}..` : existsSync("frontend") ? "." : sep;
+        if (existsSync(resolve(base, "taipy", "gui", "webapp", "package.json"))) {
+            log && console.info(`Found npm package for taipy-gui in ${resolve(base, "taipy", "gui", "webapp")}`);
+            return base;
+        } else {
+            log && console.warn(`taipy-gui npm package should be built locally in ${resolve(base, "taipy", "gui", "webapp")} first.`);
+        }
+    }
+    return sep;
+};
 
-let TAIPY_GUI_DIR = process.env.TAIPY_GUI_DIR;
-if (!TAIPY_GUI_DIR) {
-  TAIPY_GUI_DIR = getGuiEnv();
-  if (existsSync(".env")) {
-    appendFileSync(".env", `\nTAIPY_GUI_DIR=${TAIPY_GUI_DIR}`);
-  } else {
-    writeFileSync(".env", `TAIPY_GUI_DIR=${TAIPY_GUI_DIR}`);
-  }
+let taipyEnvDir = process.env.TAIPY_DIR;
+if (!taipyEnvDir) {
+    taipyEnvDir = getGuiEnv();
+    if (taipyEnvDir != sep) {
+        if (existsSync(".env")) {
+            appendFileSync(".env", `\nTAIPY_DIR=${taipyEnvDir}`);
+        } else {
+            writeFileSync(".env", `TAIPY_DIR=${taipyEnvDir}`);
+        }
+    }
 }
 
-const taipy_webapp_dir = `${TAIPY_GUI_DIR}${sep}taipy${sep}gui${sep}webapp`;
-if (!existsSync(taipy_webapp_dir)) {
-  console.error(`Cannot find the Taipy GUI (${taipy_webapp_dir}) webapp directory.\nMake sure TAIPY_GUI_DIR is set properly as (${getGuiEnv()}).`);
-  process.exit(1);
+const taipyWebappDir = `${taipyEnvDir}${sep}taipy${sep}gui${sep}webapp`;
+if (!existsSync(taipyWebappDir)) {
+    console.error(
+        `Cannot find the Taipy GUI (${taipyWebappDir}) webapp directory.\nMake sure TAIPY_DIR is set properly as (${getGuiEnv(
+            false
+        )}).`
+    );
+    process.exit(1);
 }
 
 const spinner = "|/-\\";
@@ -33,18 +56,18 @@ let i = 0;
 
 let spinnerTimer;
 
-exec(`npm i ${taipy_webapp_dir}`)
-  .on("spawn", () => {
-    spinnerTimer = setInterval(() => {
-      process.stdout.write("Installing the Taipy GUI library... \r" + spinner[i++]);
-      i = i % spinner.length;
-    }, 150);
-  })
-  .on("exit", (code, signal) => {
-    clearInterval(spinnerTimer);
-    if (code === 0) {
-      console.log("\nInstallation finished");
-    } else {
-      console.log(`\nInstallation failed (code ${code}, signal ${signal})`);
-    }
-  });
+exec(`npm i ${taipyWebappDir}`)
+    .on("spawn", () => {
+        spinnerTimer = setInterval(() => {
+            process.stdout.write("Installing the Taipy GUI library... \r" + spinner[i++]);
+            i = i % spinner.length;
+        }, 150);
+    })
+    .on("exit", (code, signal) => {
+        clearInterval(spinnerTimer);
+        if (code === 0) {
+            console.log("\nInstallation finished");
+        } else {
+            console.log(`\nInstallation failed (code ${code}, signal ${signal})`);
+        }
+    });

frontend/taipy/webpack.config.js

@@ -57,7 +57,7 @@ module.exports = (_env, options) => {
                 // If this file is moved, this path must be updated
                 manifest: path.resolve(
                     __dirname,
-                    `${process.env.TAIPY_GUI_DIR}/taipy/gui/webapp/taipy-gui-deps-manifest.json`
+                    `${process.env.TAIPY_DIR}/taipy/gui/webapp/taipy-gui-deps-manifest.json`
                 ),
                 name: "TaipyGuiDependencies",
             }),

tools/frontend/bundle_build.py

@@ -41,7 +41,7 @@ def build_taipy(root_path: Path):
         env_file_path = root_path / "frontend" / "taipy" / ".env"
         if not env_file_path.exists():
             with open(env_file_path, "w") as env_file:
-                env_file.write(f"TAIPY_GUI_DIR={root_path}\n")
+                env_file.write(f"TAIPY_DIR={root_path}\n")
         subprocess.run(["npm", "ci"], cwd=root_path / "frontend" / "taipy", check=True, shell=with_shell)
         subprocess.run(["npm", "run", "build"], cwd=root_path / "frontend" / "taipy", check=True, shell=with_shell)
 

tools/packages/taipy/setup.py

@@ -58,7 +58,7 @@ class NPMInstall(build_py):
             env_file_path = root_folder / "frontend" / "taipy" / ".env"
             if not env_file_path.exists():
                 with open(env_file_path, "w") as env_file:
-                    env_file.write(f"TAIPY_GUI_DIR={root_folder}\n")
+                    env_file.write(f"TAIPY_DIR={root_folder}\n")
             subprocess.run(["npm", "ci"], cwd=root_folder / "frontend" / "taipy", check=True, shell=with_shell)
             subprocess.run(
                 ["npm", "run", "build"], cwd=root_folder / "frontend" / "taipy", check=True, shell=with_shell