create-spfx-tailwind-app 1.0.16 → 1.0.18

package/Template/package.json

@@ -1,9 +1,9 @@
 {
   "name": "template-spfx",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": true,
   "engines": {
-    "node": ">=22.14.0 < 23.0.0"
+    "node": ">=22.14.0"
   },
   "scripts": {
     "build": "heft test --clean --production && heft package-solution --production",
@@ -17,36 +17,36 @@
   },
   "dependencies": {
     "@fluentui/react": "^8.106.4",
-    "@microsoft/sp-component-base": "1.22.2",
-    "@microsoft/sp-core-library": "1.22.2",
-    "@microsoft/sp-lodash-subset": "1.22.2",
-    "@microsoft/sp-office-ui-fabric-core": "1.22.2",
-    "@microsoft/sp-property-pane": "1.22.2",
-    "@microsoft/sp-webpart-base": "1.22.2",
+    "@microsoft/sp-component-base": "1.24.0-beta.5",
+    "@microsoft/sp-core-library": "1.24.0-beta.5",
+    "@microsoft/sp-lodash-subset": "1.24.0-beta.5",
+    "@microsoft/sp-office-ui-fabric-core": "1.24.0-beta.5",
+    "@microsoft/sp-property-pane": "1.24.0-beta.5",
+    "@microsoft/sp-webpart-base": "1.24.0-beta.5",
     "jquery": "^4.0.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "tslib": "2.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tslib": "^2.6.2",
     "uuid": "^14.0.0"
   },
   "devDependencies": {
-    "@microsoft/eslint-config-spfx": "1.22.2",
-    "@microsoft/eslint-plugin-spfx": "1.22.2",
-    "@microsoft/sp-module-interfaces": "1.22.2",
-    "@microsoft/spfx-heft-plugins": "1.22.2",
-    "@microsoft/spfx-web-build-rig": "1.22.2",
+    "@microsoft/eslint-config-spfx": "1.24.0-beta.5",
+    "@microsoft/eslint-plugin-spfx": "1.24.0-beta.5",
+    "@microsoft/sp-module-interfaces": "1.24.0-beta.5",
+    "@microsoft/spfx-heft-plugins": "1.24.0-beta.5",
+    "@microsoft/spfx-web-build-rig": "1.24.0-beta.5",
     "@rushstack/eslint-config": "4.5.2",
     "@rushstack/heft": "1.1.2",
     "@types/heft-jest": "1.0.2",
     "@types/jquery": "^4.0.0",
-    "@types/react": "17.0.45",
-    "@types/react-dom": "17.0.17",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/webpack-env": "~1.15.2",
     "@typescript-eslint/parser": "8.46.2",
     "autoprefixer": "^10.4.27",
     "css-loader": "~7.1.2",
     "eslint": "8.57.1",
-    "eslint-plugin-react-hooks": "4.3.0",
+    "eslint-plugin-react-hooks": "5.0.0",
     "postcss": "^8.5.8",
     "spfx-fast-serve": "^4.0.2",
     "tailwindcss": "^3.4.19",
@@ -56,6 +56,7 @@
     "@rushstack/heft": "1.1.2"
   },
   "resolutions": {
-    "@types/react": "17.0.45"
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5"
   }
 }

package/Template/src/webparts/__PROJECT_NAME_LOWER__/__PROJECT_NAME__WebPart.ts

@@ -1,130 +1,176 @@
-import * as React from 'react';
-import * as ReactDom from 'react-dom';
-import { Version } from '@microsoft/sp-core-library';
+import * as React from "react";
+import * as ReactDom from "react-dom/client";
+import { Version } from "@microsoft/sp-core-library";
 import {
   type IPropertyPaneConfiguration,
-  PropertyPaneTextField
-} from '@microsoft/sp-property-pane';
-import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
-import { IReadonlyTheme } from '@microsoft/sp-component-base';
+  PropertyPaneTextField,
+} from "@microsoft/sp-property-pane";
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { IReadonlyTheme } from "@microsoft/sp-component-base";
 import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http";
 import "../../tailwind.generated.css";
-import * as strings from 'TemplateSpfxWebPartStrings';
+import * as strings from "TemplateSpfxWebPartStrings";
 import __PROJECT_NAME__ from "./components/__PROJECT_NAME__";
-import { I__PROJECT_NAME__Props } from './components/I__PROJECT_NAME__Props';
+import { I__PROJECT_NAME__Props } from "./components/I__PROJECT_NAME__Props";
 import $ from "jquery";
+
 export interface I__PROJECT_NAME__WebPartProps {
   description: string;
 }
 
+interface ISharePointUserGroup {
+  Id: number;
+  Title: string;
+}
+
+interface IUserData {
+  id: number;
+  title: string;
+  email: string;
+  groups: ISharePointUserGroup[];
+}
+
 export default class __PROJECT_NAME__WebPart extends BaseClientSideWebPart<I__PROJECT_NAME__WebPartProps> {
   private _isDarkTheme: boolean = false;
-  private _environmentMessage: string = "";
-  public getCurrentUserGroups(requester: SPHttpClient, siteUrl: string): any {
+  private _root: ReactDom.Root | null = null;
+  private _userData: IUserData = {
+    id: -1,
+    title: "",
+    email: "",
+    groups: [],
+  };
+  private _domObserver: MutationObserver | null = null;
+  private _injectedStyleElement: HTMLStyleElement | null = null;
+
+  public async getCurrentUserGroups(
+    requester: SPHttpClient,
+    siteUrl: string,
+  ): Promise<IUserData> {
     try {
-      return requester
-        .get(
-          `${siteUrl}/_api/web/currentuser/?$select=Title,Email,LoginName,Id&$expand=groups`,
-          SPHttpClient.configurations.v1,
-          {
-            headers: {
-              Accept: "application/json;odata=verbose",
-              "odata-version": "",
-            },
+      const response: SPHttpClientResponse = await requester.get(
+        `${siteUrl}/_api/web/currentuser/?$select=Title,Email,LoginName,Id&$expand=groups`,
+        SPHttpClient.configurations.v1,
+        {
+          headers: {
+            Accept: "application/json;odata=verbose",
+            "odata-version": "",
           },
-        )
-        .then((response: SPHttpClientResponse) => {
-          return response.json();
-        })
-        .then((json: any) => {
-          return json;
-        });
-    } catch (error: any) {
-      console.log(
-        `Error occured in getEntity method in factory.ts. Error message: ${error.message}`,
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status} - ${response.statusText}`);
+      }
+
+      const json = await response.json();
+      const user = json?.d;
+
+      return {
+        id: user?.Id ?? -1,
+        title: user?.Title ?? "",
+        email: this.context.pageContext.user.email || user?.Email || "",
+        groups: user?.Groups?.results ?? [],
+      };
+    } catch (error: unknown) {
+      console.error(
+        "[SPFx] Error fetching current user groups:",
+        error instanceof Error ? error.message : error,
       );
-      throw error;
+      return {
+        id: -1,
+        title: "",
+        email: this.context.pageContext.user.email || "",
+        groups: [],
+      };
     }
   }
 
-  public render(): void {
-    this.getCurrentUserGroups(
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+
+    // 1. Fetch user data before rendering component
+    this._userData = await this.getCurrentUserGroups(
       this.context.spHttpClient,
       this.context.pageContext.web.absoluteUrl,
-    ).then((currentUser: any) => {
-      const element: React.ReactElement<I__PROJECT_NAME__Props> =
-        React.createElement(__PROJECT_NAME__, {
-          newcontext: this.context,
-          newsiteUrl: this.context.pageContext.web.absoluteUrl,
-          newlistName: "",
-          newspHttpClient: this.context.spHttpClient,
-          newrelativeUrl: this.context.pageContext.web.serverRelativeUrl,
-          newcurrentUserId: currentUser?.d?.Id ? currentUser.d.Id : -1,
-          newcurrentUserName: currentUser?.d?.Title ? currentUser.d.Title : "",
-          newgroups: currentUser?.d?.Groups?.results || [],
-          newcurrentUserEmail: this.context.pageContext.user.email,
-        });
-
-      ReactDom.render(element, this.domElement);
-    });
+    );
+
+    document.title = "MIS Repository";
+    $("body").addClass("ms-backgroundImage");
+
+    // 2. Inject CSS rules once
+    this._injectHideStyles();
+
+    // 3. Setup dynamic chrome hiding using MutationObserver
+    this._setupDomObserver();
   }
 
-  protected onInit(): Promise<void> {
-    return super.onInit().then(() => {
-      document.title = "MIS Repository";
-
-      // Add body class safely
-      $("body").addClass("ms-backgroundImage");
-
-      // Inject CSS (FIXED - all rules together)
-      const style = document.createElement("style");
-      style.innerHTML = `
-      #spLeftNav,
-      #SuiteNavWrapper,
-      #CommentsWrapper,
-      #sp-appBar,
-      .headerRow-107,
-      .commandBarButtonHeightAndColor,
-      .fui-Toolbar,
-      .simpleFooterContainer-196,
-      .p_i-Dej_1x34n,
-      div[data-automation-id="pageHeader"],
-      div[data-automation-id="SiteHeader"],
-      div[data-automation-id="MegaFooter"],
-      div[data-automation-id="gradientBox"],
-      div[data-automation-id="LeftNavGroups"] {
+  public render(): void {
+    const element: React.ReactElement<I__PROJECT_NAME__Props> =
+      React.createElement(__PROJECT_NAME__, {
+        newcontext: this.context,
+        newsiteUrl: this.context.pageContext.web.absoluteUrl,
+        newlistName: "",
+        newspHttpClient: this.context.spHttpClient,
+        newrelativeUrl: this.context.pageContext.web.serverRelativeUrl,
+        newcurrentUserId: this._userData.id,
+        newcurrentUserName: this._userData.title,
+        newgroups: this._userData.groups,
+        newcurrentUserEmail: this._userData.email,
+      });
+
+    // React 18 createRoot
+    if (!this._root) {
+      this._root = ReactDom.createRoot(this.domElement);
+    }
+    this._root.render(element);
+  }
+
+  private _injectHideStyles(): void {
+    const selectors = [
+      "#spLeftNav",
+      "#SuiteNavWrapper",
+      "#CommentsWrapper",
+      "#sp-appBar",
+      ".headerRow-107",
+      ".commandBarButtonHeightAndColor",
+      ".fui-Toolbar",
+      ".simpleFooterContainer-196",
+      ".p_i-Dej_1x34n",
+      'div[data-automation-id="pageHeader"]',
+      'div[data-automation-id="SiteHeader"]',
+      'div[data-automation-id="MegaFooter"]',
+      'div[data-automation-id="gradientBox"]',
+      'div[data-automation-id="LeftNavGroups"]',
+    ];
+
+    this._injectedStyleElement = document.createElement("style");
+    this._injectedStyleElement.innerHTML = `
+      ${selectors.join(", ")} {
         display: none !important;
       }
     `;
-      document.head.appendChild(style);
-
-      // Delay + repeat (IMPORTANT for SPFx dynamic DOM)
-      const hideElements = () => {
-        $("div[data-automation-id='pageHeader']").hide();
-        $("div[data-automation-id='SiteHeader']").hide();
-        $("div[data-automation-id='SimpleFooter']").parent().hide();
-        $("div[data-automation-id='SiteHeaderOverlay']").parent().hide();
-        $("div[data-automation-id='MegaFooter']").hide();
-        $("div[data-automation-id='gradientBox']").parent().hide();
-        $("div[data-automation-id='LeftNavGroups']").parent().hide();
-
-        $("#spLeftNav").hide();
-        $("#SuiteNavWrapper").hide();
-        $("#CommentsWrapper").hide();
-        $("#sp-appBar").hide();
-
-        $(".headerRow-107").hide();
-        $(".commandBarButtonHeightAndColor").hide();
-        $(".fui-Toolbar").hide();
-      };
+    document.head.appendChild(this._injectedStyleElement);
+  }
 
-      // Run multiple times (handles re-render)
-      const interval = setInterval(hideElements, 1000);
+  private _setupDomObserver(): void {
+    const hideExtraNodes = (): void => {
+      $(
+        "div[data-automation-id='SimpleFooter'], div[data-automation-id='SiteHeaderOverlay'], div[data-automation-id='gradientBox'], div[data-automation-id='LeftNavGroups']",
+      )
+        .parent()
+        .hide();
+    };
+
+    hideExtraNodes();
 
-      // Stop after 10 seconds (optional cleanup)
-      setTimeout(() => clearInterval(interval), 10000);
+    // Observe changes instead of polling via setInterval
+    this._domObserver = new MutationObserver(() => {
+      hideExtraNodes();
+    });
 
-     
+    this._domObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
     });
   }
 
@@ -150,7 +196,25 @@ export default class __PROJECT_NAME__WebPart extends BaseClientSideWebPart<I__PR
   }
 
   protected onDispose(): void {
-    ReactDom.unmountComponentAtNode(this.domElement);
+    // 1. Disconnect DOM observer
+    if (this._domObserver) {
+      this._domObserver.disconnect();
+      this._domObserver = null;
+    }
+
+    // 2. Remove dynamically injected CSS tag
+    if (this._injectedStyleElement && this._injectedStyleElement.parentNode) {
+      this._injectedStyleElement.parentNode.removeChild(
+        this._injectedStyleElement,
+      );
+      this._injectedStyleElement = null;
+    }
+
+    // 3. Unmount React 18 component tree
+    if (this._root) {
+      this._root.unmount();
+      this._root = null;
+    }
   }
 
   protected get dataVersion(): Version {

package/index.js

@@ -8,11 +8,6 @@ const ora = require("ora");
 const inquirer = require("inquirer");
 const figlet = require("figlet");
 const gradient = require("gradient-string").default;
-const setupPath = path.join(targetDir, "setup.js");
-
-
-// 🎨 Banner
-
 
 console.log(
   gradient.instagram(figlet.textSync("SPFx CLI", { horizontalLayout: "full" })),
@@ -21,11 +16,8 @@ console.log(
 async function run() {
   try {
     const args = process.argv.slice(2);
-
-    // 🔹 detect flags
     const noInstallFlag = args.includes("--no-install");
 
-    // 🔹 get project name
     let projectName = args.find((arg) => !arg.startsWith("--"));
 
     if (!projectName) {
@@ -47,6 +39,7 @@ async function run() {
 
     const templateDir = path.join(__dirname, "Template");
     const targetDir = path.join(process.cwd(), projectName);
+    const setupPath = path.join(targetDir, "setup.js");
 
     console.log(chalk.cyan("\n🚀 Creating your SPFx project...\n"));
 
@@ -55,33 +48,39 @@ async function run() {
     // 📁 Copy template
     fs.cpSync(templateDir, targetDir, { recursive: true });
 
-    spinner.text = "Customizing project...";
+    spinner.text = "Running setup...";
 
-    // ⚙ Run setup script
-    execSync(`node setup.js "${projectName}"`, {
-      cwd: targetDir,
-      stdio: "inherit",
-    });
+    // ⚙ Run setup.js if exists
+    if (fs.existsSync(setupPath)) {
+      execSync(`node setup.js "${projectName}"`, {
+        cwd: targetDir,
+        stdio: "inherit",
+      });
+    }
 
-    spinner.succeed(chalk.green("✔ Project setup complete"));
+    spinner.text = "Cleaning up...";
 
-     try {
-       if (fs.existsSync(setupPath)) {
-         fs.unlinkSync(setupPath);
-         // console.log(chalk.gray("🧹 setup.js removed"));
-       }
-     } catch (err) {
-       console.log(chalk.yellow("⚠️ Could not remove setup.js"));
-     }
+    // 🧹 Remove setup.js after execution
+    try {
+      if (fs.existsSync(setupPath)) {
+        fs.unlinkSync(setupPath);
+        // optional log
+        // console.log(chalk.gray("🧹 setup.js removed"));
+      }
+    } catch (err) {
+      console.log(chalk.yellow("⚠️ Could not remove setup.js"));
+    }
 
-    // 🔍 detect Tailwind support
+    spinner.succeed(chalk.green("✔ Project setup complete"));
+
+    // 🔍 detect Tailwind
     let hasTailwind = false;
     try {
       const pkg = require(path.join(targetDir, "package.json"));
       hasTailwind = !!pkg.scripts?.["build:tailwind"];
     } catch {}
 
-    // ❓ Ask install (unless flag used)
+    // ❓ Ask install
     let install = true;
 
     if (noInstallFlag) {
@@ -114,7 +113,7 @@ async function run() {
       }
     }
 
-    // 🎉 Success message
+    // 🎉 Done
     console.log("\n" + chalk.bold.green("🎉 Project created successfully!\n"));
 
     console.log(chalk.yellow("👉 Next steps:"));
@@ -138,7 +137,6 @@ async function run() {
     }
 
     console.log("\n" + chalk.gray("Happy coding 🚀\n"));
-
   } catch (err) {
     console.log(chalk.red("\n❌ Something went wrong\n"));
     console.error(err);

package/package.json

@@ -3,7 +3,7 @@
   "engines": {
     "node": ">=22"
   },
-  "version": "1.0.16",
+  "version": "1.0.18",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"