create-prisma-php-app 1.11.22 → 1.11.23

package/dist/.dockerignore

@@ -0,0 +1,2 @@
+node_modules/
+vendor/

package/dist/Dockerfile

@@ -0,0 +1,40 @@
+# Use an official PHP image with the version you need
+FROM php:8.1-apache
+
+# Install system dependencies for Composer and PHP extensions
+RUN apt-get update && apt-get install -y \
+    git \
+    unzip \
+    libzip-dev \
+    zip \
+    && docker-php-ext-install pdo_mysql zip
+
+# Enable Apache mods
+RUN a2enmod rewrite headers
+
+# Install Composer globally
+COPY --from=composer:latest /usr/bin/composer /usr/local/bin/composer
+
+# Set the working directory in the container
+WORKDIR /var/www/html
+
+# Copy the application's composer.json and lock file
+COPY composer.json composer.lock ./
+
+# Install PHP dependencies
+RUN composer install --no-scripts --no-autoloader
+
+# Copy the rest of the application
+COPY . .
+
+# Finish composer
+RUN composer dump-autoload --optimize
+
+# Apache config
+COPY ./apache.conf /etc/apache2/sites-available/000-default.conf
+
+# Expose port 80 to access the container
+EXPOSE 80
+
+# Command to run when starting the container
+CMD ["apache2-foreground"]

package/dist/apache.conf

@@ -0,0 +1,12 @@
+<VirtualHost *:80>
+    ServerAdmin webmaster@localhost
+    DocumentRoot /var/www/html
+    ErrorLog ${APACHE_LOG_DIR}/error.log
+    CustomLog ${APACHE_LOG_DIR}/access.log combined
+
+    <Directory "/var/www/html">
+        Options Indexes FollowSymLinks
+        AllowOverride All
+        Require all granted
+    </Directory>
+</VirtualHost>

package/dist/bootstrap.php

@@ -25,9 +25,17 @@ function determineContentToInclude()
     writeRoutes();
     AuthMiddleware::handle($uri);
 
-    $isDirectAccessToPrivateRoute = preg_match('/^_/', $uri);
+    $isDirectAccessToPrivateRoute = preg_match('/\/_/', $uri);
     if ($isDirectAccessToPrivateRoute) {
-        return ['path' => $includePath, 'layouts' => $layoutsToInclude, 'uri' => $uri];
+        $sameSiteFetch = false;
+        $serverFetchSite = $_SERVER['HTTP_SEC_FETCH_SITE'] ?? '';
+        if (isset($serverFetchSite) && $serverFetchSite === 'same-origin') {
+            $sameSiteFetch = true;
+        }
+
+        if (!$sameSiteFetch) {
+            return ['path' => $includePath, 'layouts' => $layoutsToInclude, 'uri' => $uri];
+        }
     }
 
     if ($uri) {

package/dist/docker-compose.yml

@@ -0,0 +1,19 @@
+version: "3.8"
+services:
+  web:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "80:80"
+    volumes:
+      - .:/var/www/html
+    depends_on:
+      - db
+  db:
+    image: mysql:5.7
+    environment:
+      MYSQL_ROOT_PASSWORD: prisma_php
+      MYSQL_DATABASE: prisma_php
+    ports:
+      - "3306:3306"

package/dist/index.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import{execSync}from"child_process";import fs from"fs";import{fileURLToPath}from"url";import path from"path";import chalk from"chalk";import prompts from"prompts";import https from"https";const __filename=fileURLToPath(import.meta.url),__dirname=path.dirname(__filename);let updateAnswer=null;function bsConfigUrls(e){const s=e.indexOf("\\htdocs\\");if(-1===s)return{bsTarget:"",bsPathRewrite:{}};const t=e.substring(0,s+"\\htdocs\\".length).replace(/\\/g,"\\\\"),n=e.replace(new RegExp(`^${t}`),"").replace(/\\/g,"/");let i=`http://localhost/${n}`;i=i.endsWith("/")?i.slice(0,-1):i;const c=i.replace(/(?<!:)(\/\/+)/g,"/"),r=n.replace(/\/\/+/g,"/");return{bsTarget:`${c}/`,bsPathRewrite:{"^/":`/${r.startsWith("/")?r.substring(1):r}/`}}}function configureBrowserSyncCommand(e){const s=path.join(e,"settings","bs-config.cjs");return fs.writeFileSync(s,'const { createProxyMiddleware } = require("http-proxy-middleware");\nconst fs = require("fs");\n\nconst jsonData = fs.readFileSync("prisma-php.json", "utf8");\nconst config = JSON.parse(jsonData);\n\nmodule.exports = {\n  proxy: "http://localhost:3000",\n  middleware: [\n    (req, res, next) => {\n      res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");\n      res.setHeader("Pragma", "no-cache");\n      res.setHeader("Expires", "0");\n      next();\n    },\n    createProxyMiddleware({\n      target: config.bsTarget,\n      changeOrigin: true,\n      pathRewrite: config.bsPathRewrite,\n    }),\n  ],\n  files: "src/**/*.*",\n  notify: false,\n  open: false,\n  ghostMode: false,\n};',"utf8"),"browser-sync start --config settings/bs-config.cjs"}async function updatePackageJson(e,s){const t=path.join(e,"package.json");if(checkExcludeFiles(t))return;const n=JSON.parse(fs.readFileSync(t,"utf8")),i=configureBrowserSyncCommand(e);n.scripts=Object.assign(Object.assign({},n.scripts),{projectName:"node settings/project-name.cjs"});let c=[];s.tailwindcss&&(n.scripts=Object.assign(Object.assign({},n.scripts),{tailwind:"postcss ./src/app/css/tailwind.css -o ./src/app/css/styles.css --watch"}),c.push("tailwind")),s.websocket&&(n.scripts=Object.assign(Object.assign({},n.scripts),{websocket:"node ./settings/restart-websocket.cjs"}),c.push("websocket"));const r=Object.assign({},n.scripts);r["browser-sync"]=i,r.dev=c.length>0?`npm-run-all --parallel projectName browser-sync ${c.join(" ")}`:"npm-run-all --parallel projectName browser-sync",n.scripts=r,n.type="module",s.prisma&&(n.prisma={seed:"node prisma/seed.js"}),fs.writeFileSync(t,JSON.stringify(n,null,2))}async function updateComposerJson(e,s){const t=path.join(e,"composer.json");if(checkExcludeFiles(t))return;let n;if(fs.existsSync(t)){{const e=fs.readFileSync(t,"utf8");n=JSON.parse(e)}s.websocket&&(n.require=Object.assign(Object.assign({},n.require),{"cboden/ratchet":"^0.4.4"})),s.prisma&&(n.require=Object.assign(Object.assign({},n.require),{"ramsey/uuid":"5.x-dev","hidehalo/nanoid-php":"1.x-dev"})),fs.writeFileSync(t,JSON.stringify(n,null,2))}}async function updateIndexJsForWebSocket(e,s){if(!s.websocket)return;const t=path.join(e,"src","app","js","index.js");if(checkExcludeFiles(t))return;let n=fs.readFileSync(t,"utf8");n+='\n// WebSocket initialization\nconst ws = new WebSocket("ws://localhost:8080");\n',fs.writeFileSync(t,n,"utf8")}async function createUpdateGitignoreFile(e,s){const t=path.join(e,".gitignore");if(checkExcludeFiles(t))return;let n="";s.forEach((e=>{n.includes(e)||(n+=`\n${e}`)})),n=n.trimStart(),fs.writeFileSync(t,n)}function copyRecursiveSync(e,s,t){var n;const i=fs.existsSync(e),c=i&&fs.statSync(e);if(i&&c&&c.isDirectory()){const i=s.toLowerCase();if(!t.websocket&&i.includes("src\\lib\\websocket"))return;if(!t.prisma&&i.includes("src\\lib\\prisma"))return;const c=s.replace(/\\/g,"/");if(null===(n=null==updateAnswer?void 0:updateAnswer.excludeFilePath)||void 0===n?void 0:n.includes(c))return;fs.existsSync(s)||fs.mkdirSync(s,{recursive:!0}),fs.readdirSync(e).forEach((n=>{copyRecursiveSync(path.join(e,n),path.join(s,n),t)}))}else{if(checkExcludeFiles(s))return;if(!t.tailwindcss&&(s.includes("tailwind.css")||s.includes("styles.css")))return;if(!t.websocket&&(s.includes("restart-websocket.cjs")||s.includes("restart-websocket.bat")))return;fs.copyFileSync(e,s,0)}}async function executeCopy(e,s,t){s.forEach((({srcDir:s,destDir:n})=>{copyRecursiveSync(path.join(__dirname,s),path.join(e,n),t)}))}function createOrUpdateTailwindConfig(e){const s=path.join(e,"tailwind.config.js");if(checkExcludeFiles(s))return;let t=fs.readFileSync(s,"utf8");const n=["./src/app/**/*.{html,js,php}"].map((e=>`    "${e}"`)).join(",\n");t=t.replace(/content: \[\],/g,`content: [\n${n}\n],`),fs.writeFileSync(s,t,{flag:"w"})}function modifyPostcssConfig(e){const s=path.join(e,"postcss.config.js");if(checkExcludeFiles(s))return;fs.writeFileSync(s,"export default {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n    cssnano: {},\n  },\n};",{flag:"w"})}function modifyLayoutPHP(e,s){const t=path.join(e,"src","app","layout.php");if(!checkExcludeFiles(t))try{let e=fs.readFileSync(t,"utf8");const n='\n    <link href="<?php echo $baseUrl; ?>css/index.css" rel="stylesheet">\n    <script src="<?php echo $baseUrl; ?>js/index.js"><\/script>\n    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">',i=s?`    <link href="<?php echo $baseUrl; ?>css/styles.css" rel="stylesheet"> ${n}`:`    <script src="https://cdn.tailwindcss.com"><\/script> ${n}`;e=e.replace("</head>",`${i}\n</head>`),fs.writeFileSync(t,e,{flag:"w"})}catch(e){}}async function createOrUpdateEnvFile(e,s){const t=path.join(e,".env");checkExcludeFiles(t)||fs.writeFileSync(t,s,{flag:"w"})}function checkExcludeFiles(e){var s,t;return!!(null==updateAnswer?void 0:updateAnswer.isUpdate)&&(null!==(t=null===(s=null==updateAnswer?void 0:updateAnswer.excludeFilePath)||void 0===s?void 0:s.includes(e.replace(/\\/g,"/")))&&void 0!==t&&t)}async function createDirectoryStructure(e,s){const t=[{src:"/bootstrap.php",dest:"/bootstrap.php"},{src:"/.htaccess",dest:"/.htaccess"},{src:"/../composer.json",dest:"/composer.json"}];(null==updateAnswer?void 0:updateAnswer.isUpdate)&&(t.push({src:"/tsconfig.json",dest:"/tsconfig.json"}),updateAnswer.tailwindcss&&t.push({src:"/postcss.config.js",dest:"/postcss.config.js"},{src:"/tailwind.config.js",dest:"/tailwind.config.js"}));const n=[{srcDir:"/settings",destDir:"/settings"},{srcDir:"/src",destDir:"/src"}];s.prisma&&n.push({srcDir:"/prisma",destDir:"/prisma"}),t.forEach((({src:s,dest:t})=>{const n=path.join(__dirname,s),i=path.join(e,t);if(checkExcludeFiles(i))return;const c=fs.readFileSync(n,"utf8");fs.writeFileSync(i,c,{flag:"w"})})),await executeCopy(e,n,s),await updatePackageJson(e,s),await updateComposerJson(e,s),await updateIndexJsForWebSocket(e,s),s.tailwindcss?(createOrUpdateTailwindConfig(e),modifyLayoutPHP(e,!0),modifyPostcssConfig(e)):modifyLayoutPHP(e,!1);const i='# Prisma PHP Auth Secret Key For development only - Change this in production\nAUTH_SECRET=uxsjXVPHN038DEYls2Kw0QUgBcXKUyrjv416nIFWPY4=  \n  \n# PHPMailer\n# SMTP_HOST=smtp.gmail.com or your SMTP host\n# SMTP_USERNAME=john.doe@gmail.com or your SMTP username\n# SMTP_PASSWORD=123456\n# SMTP_PORT=587 for TLS, 465 for SSL or your SMTP port\n# SMTP_ENCRYPTION=ssl or tls\n# MAIL_FROM=john.doe@gmail.com\n# MAIL_FROM_NAME="John Doe"';if(s.prisma){const s=`${'# Environment variables declared in this file are automatically made available to Prisma.\n# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema\n\n# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.\n# See the documentation for all the connection string options: https://pris.ly/d/connection-strings\n\nDATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"'}\n\n${i}`;await createOrUpdateEnvFile(e,s)}else await createOrUpdateEnvFile(e,i);await createUpdateGitignoreFile(e,["vendor",".env","node_modules"])}async function getAnswer(e={}){var s,t,n,i;const c=[];e.projectName||c.push({type:"text",name:"projectName",message:"What is your project named?",initial:"my-app"}),e.tailwindcss||c.push({type:"toggle",name:"tailwindcss",message:`Would you like to use ${chalk.blue("Tailwind CSS")}?`,initial:!0,active:"Yes",inactive:"No"}),e.websocket||c.push({type:"toggle",name:"websocket",message:`Would you like to use ${chalk.blue("Websocket")}?`,initial:!0,active:"Yes",inactive:"No"}),e.prisma||c.push({type:"toggle",name:"prisma",message:`Would you like to use ${chalk.blue("Prisma PHP ORM")}?`,initial:!0,active:"Yes",inactive:"No"});const r=c;if(0===r.length&&e.projectName)return e;const a=()=>{process.exit(0)};try{const c=await prompts(r,{onCancel:a});return 0===Object.keys(c).length?null:{projectName:c.projectName?String(c.projectName).trim().replace(/ /g,"-"):null!==(s=e.projectName)&&void 0!==s?s:"my-app",tailwindcss:null!==(t=c.tailwindcss)&&void 0!==t?t:e.tailwindcss,websocket:null!==(n=c.websocket)&&void 0!==n?n:e.websocket,prisma:null!==(i=c.prisma)&&void 0!==i?i:e.prisma}}catch(e){return null}}async function installDependencies(e,s,t=!1){fs.existsSync(path.join(e,"package.json"))||execSync("npm init -y",{stdio:"inherit",cwd:e}),s.forEach((e=>{}));const n=`npm install ${t?"--save-dev":""} ${s.join(" ")}`;execSync(n,{stdio:"inherit",cwd:e})}async function uninstallDependencies(e,s,t=!1){s.forEach((e=>{}));const n=`npm uninstall ${t?"--save-dev":"--save"} ${s.join(" ")}`;execSync(n,{stdio:"inherit",cwd:e})}function fetchPackageVersion(e){return new Promise(((s,t)=>{https.get(`https://registry.npmjs.org/${e}`,(e=>{let n="";e.on("data",(e=>n+=e)),e.on("end",(()=>{try{const e=JSON.parse(n);s(e["dist-tags"].latest)}catch(e){t(new Error("Failed to parse JSON response"))}}))})).on("error",(e=>t(e)))}))}const readJsonFile=e=>{const s=fs.readFileSync(e,"utf8");return JSON.parse(s)};async function main(){var e,s,t,n,i,c;try{const r=process.argv.slice(2);let a=r[0],o=null;if(a){const c={projectName:a,tailwindcss:r.includes("--tailwindcss"),websocket:r.includes("--websocket"),prisma:r.includes("--prisma")};if(o=await getAnswer(c),null===o)return;const l=process.cwd(),p=path.join(l,"prisma-php.json"),d=readJsonFile(p);let u=[];null===(e=d.excludeFiles)||void 0===e||e.map((e=>{const s=path.join(l,e);fs.existsSync(s)&&u.push(s.replace(/\\/g,"/"))})),updateAnswer={projectName:a,tailwindcss:null!==(s=null==o?void 0:o.tailwindcss)&&void 0!==s&&s,websocket:null!==(t=null==o?void 0:o.websocket)&&void 0!==t&&t,prisma:null!==(n=null==o?void 0:o.prisma)&&void 0!==n&&n,isUpdate:!0,excludeFiles:null!==(i=d.excludeFiles)&&void 0!==i?i:[],excludeFilePath:null!=u?u:[],filePath:l}}else o=await getAnswer();if(null===o)return;execSync("npm uninstall -g create-prisma-php-app",{stdio:"inherit"}),execSync("npm install -g create-prisma-php-app",{stdio:"inherit"}),execSync("npm uninstall -g  browser-sync",{stdio:"inherit"}),execSync("npm install -g browser-sync",{stdio:"inherit"}),a||fs.mkdirSync(o.projectName);const l=process.cwd();let p=a?l:path.join(l,o.projectName);a||process.chdir(o.projectName);const d=["typescript","@types/node","ts-node","http-proxy-middleware@^3.0.0","npm-run-all"];o.tailwindcss&&d.push("tailwindcss","autoprefixer","postcss","postcss-cli","cssnano"),o.websocket&&d.push("chokidar-cli"),o.prisma&&d.push("prisma","@prisma/client"),await installDependencies(p,d,!0),a||execSync("npx tsc --init",{stdio:"inherit"}),o.tailwindcss&&execSync("npx tailwindcss init -p",{stdio:"inherit"}),o.prisma&&(fs.existsSync(path.join(p,"prisma"))||execSync("npx prisma init",{stdio:"inherit"})),await createDirectoryStructure(p,o);const u=path.join(p,"public");if(fs.existsSync(u)||fs.mkdirSync(u),null==updateAnswer?void 0:updateAnswer.isUpdate){const e=[];if(!updateAnswer.tailwindcss){["postcss.config.js","tailwind.config.js"].forEach((e=>{const s=path.join(p,e);fs.existsSync(s)&&fs.unlinkSync(s)})),e.push("tailwindcss","autoprefixer","postcss","postcss-cli","cssnano")}updateAnswer.websocket||e.push("chokidar-cli"),updateAnswer.prisma||e.push("prisma","@prisma/client"),e.length>0&&await uninstallDependencies(p,e,!0)}const h=await fetchPackageVersion("create-prisma-php-app"),m=p.replace(/\\/g,"\\"),f=bsConfigUrls(m),w=o.prisma?"src/Lib/Prisma/Classes":"",y={projectName:o.projectName,projectRootPath:m,phpEnvironment:"XAMPP",phpRootPathExe:"C:\\xampp\\php\\php.exe",phpGenerateClassPath:w,bsTarget:f.bsTarget,bsPathRewrite:f.bsPathRewrite,tailwindcss:o.tailwindcss,websocket:o.websocket,prisma:o.prisma,version:h,excludeFiles:null!==(c=null==updateAnswer?void 0:updateAnswer.excludeFiles)&&void 0!==c?c:[]};fs.writeFileSync(path.join(p,"prisma-php.json"),JSON.stringify(y,null,2),{flag:"w"}),(null==updateAnswer?void 0:updateAnswer.isUpdate)?execSync("C:\\xampp\\php\\php.exe C:\\ProgramData\\ComposerSetup\\bin\\composer.phar update",{stdio:"inherit"}):execSync("C:\\xampp\\php\\php.exe C:\\ProgramData\\ComposerSetup\\bin\\composer.phar install",{stdio:"inherit"})}catch(e){process.exit(1)}}main();
+import{execSync}from"child_process";import fs from"fs";import{fileURLToPath}from"url";import path from"path";import chalk from"chalk";import prompts from"prompts";import https from"https";const __filename=fileURLToPath(import.meta.url),__dirname=path.dirname(__filename);let updateAnswer=null;function bsConfigUrls(e){const s=e.indexOf("\\htdocs\\");if(-1===s)return{bsTarget:"",bsPathRewrite:{}};const t=e.substring(0,s+"\\htdocs\\".length).replace(/\\/g,"\\\\"),n=e.replace(new RegExp(`^${t}`),"").replace(/\\/g,"/");let i=`http://localhost/${n}`;i=i.endsWith("/")?i.slice(0,-1):i;const c=i.replace(/(?<!:)(\/\/+)/g,"/"),r=n.replace(/\/\/+/g,"/");return{bsTarget:`${c}/`,bsPathRewrite:{"^/":`/${r.startsWith("/")?r.substring(1):r}/`}}}function configureBrowserSyncCommand(e){const s=path.join(e,"settings","bs-config.cjs");return fs.writeFileSync(s,'const { createProxyMiddleware } = require("http-proxy-middleware");\nconst fs = require("fs");\n\nconst jsonData = fs.readFileSync("prisma-php.json", "utf8");\nconst config = JSON.parse(jsonData);\n\nmodule.exports = {\n  proxy: "http://localhost:3000",\n  middleware: [\n    (req, res, next) => {\n      res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");\n      res.setHeader("Pragma", "no-cache");\n      res.setHeader("Expires", "0");\n      next();\n    },\n    createProxyMiddleware({\n      target: config.bsTarget,\n      changeOrigin: true,\n      pathRewrite: config.bsPathRewrite,\n    }),\n  ],\n  files: "src/**/*.*",\n  notify: false,\n  open: false,\n  ghostMode: false,\n};',"utf8"),"browser-sync start --config settings/bs-config.cjs"}async function updatePackageJson(e,s){const t=path.join(e,"package.json");if(checkExcludeFiles(t))return;const n=JSON.parse(fs.readFileSync(t,"utf8")),i=configureBrowserSyncCommand(e);n.scripts=Object.assign(Object.assign({},n.scripts),{projectName:"node settings/project-name.cjs"});let c=[];s.tailwindcss&&(n.scripts=Object.assign(Object.assign({},n.scripts),{tailwind:"postcss ./src/app/css/tailwind.css -o ./src/app/css/styles.css --watch"}),c.push("tailwind")),s.websocket&&(n.scripts=Object.assign(Object.assign({},n.scripts),{websocket:"node ./settings/restart-websocket.cjs"}),c.push("websocket")),s.docker&&(n.scripts=Object.assign(Object.assign({},n.scripts),{docker:"docker-compose up"}),c.push("docker"));const r=Object.assign({},n.scripts);r["browser-sync"]=i,r.dev=c.length>0?`npm-run-all --parallel projectName browser-sync ${c.join(" ")}`:"npm-run-all --parallel projectName browser-sync",n.scripts=r,n.type="module",s.prisma&&(n.prisma={seed:"node prisma/seed.js"}),fs.writeFileSync(t,JSON.stringify(n,null,2))}async function updateComposerJson(e,s){const t=path.join(e,"composer.json");if(checkExcludeFiles(t))return;let n;if(fs.existsSync(t)){{const e=fs.readFileSync(t,"utf8");n=JSON.parse(e)}s.websocket&&(n.require=Object.assign(Object.assign({},n.require),{"cboden/ratchet":"^0.4.4"})),s.prisma&&(n.require=Object.assign(Object.assign({},n.require),{"ramsey/uuid":"5.x-dev","hidehalo/nanoid-php":"1.x-dev"})),fs.writeFileSync(t,JSON.stringify(n,null,2))}}async function updateIndexJsForWebSocket(e,s){if(!s.websocket)return;const t=path.join(e,"src","app","js","index.js");if(checkExcludeFiles(t))return;let n=fs.readFileSync(t,"utf8");n+='\n// WebSocket initialization\nconst ws = new WebSocket("ws://localhost:8080");\n',fs.writeFileSync(t,n,"utf8")}async function createUpdateGitignoreFile(e,s){const t=path.join(e,".gitignore");if(checkExcludeFiles(t))return;let n="";s.forEach((e=>{n.includes(e)||(n+=`\n${e}`)})),n=n.trimStart(),fs.writeFileSync(t,n)}function copyRecursiveSync(e,s,t){var n;const i=fs.existsSync(e),c=i&&fs.statSync(e);if(i&&c&&c.isDirectory()){const i=s.toLowerCase();if(!t.websocket&&i.includes("src\\lib\\websocket"))return;if(!t.prisma&&i.includes("src\\lib\\prisma"))return;const c=s.replace(/\\/g,"/");if(null===(n=null==updateAnswer?void 0:updateAnswer.excludeFilePath)||void 0===n?void 0:n.includes(c))return;fs.existsSync(s)||fs.mkdirSync(s,{recursive:!0}),fs.readdirSync(e).forEach((n=>{copyRecursiveSync(path.join(e,n),path.join(s,n),t)}))}else{if(checkExcludeFiles(s))return;if(!t.tailwindcss&&(s.includes("tailwind.css")||s.includes("styles.css")))return;if(!t.websocket&&(s.includes("restart-websocket.cjs")||s.includes("restart-websocket.bat")))return;if(!t.docker&&(s.includes(".dockerignore")||s.includes("docker-compose.yml")||s.includes("Dockerfile")||s.includes("apache.conf")))return;fs.copyFileSync(e,s,0)}}async function executeCopy(e,s,t){s.forEach((({srcDir:s,destDir:n})=>{copyRecursiveSync(path.join(__dirname,s),path.join(e,n),t)}))}function createOrUpdateTailwindConfig(e){const s=path.join(e,"tailwind.config.js");if(checkExcludeFiles(s))return;let t=fs.readFileSync(s,"utf8");const n=["./src/app/**/*.{html,js,php}"].map((e=>`    "${e}"`)).join(",\n");t=t.replace(/content: \[\],/g,`content: [\n${n}\n],`),fs.writeFileSync(s,t,{flag:"w"})}function modifyPostcssConfig(e){const s=path.join(e,"postcss.config.js");if(checkExcludeFiles(s))return;fs.writeFileSync(s,"export default {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n    cssnano: {},\n  },\n};",{flag:"w"})}function modifyLayoutPHP(e,s){const t=path.join(e,"src","app","layout.php");if(!checkExcludeFiles(t))try{let e=fs.readFileSync(t,"utf8");const n='\n    <link href="<?php echo $baseUrl; ?>css/index.css" rel="stylesheet">\n    <script src="<?php echo $baseUrl; ?>js/index.js"><\/script>\n    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">',i=s?`    <link href="<?php echo $baseUrl; ?>css/styles.css" rel="stylesheet"> ${n}`:`    <script src="https://cdn.tailwindcss.com"><\/script> ${n}`;e=e.replace("</head>",`${i}\n</head>`),fs.writeFileSync(t,e,{flag:"w"})}catch(e){}}async function createOrUpdateEnvFile(e,s){const t=path.join(e,".env");checkExcludeFiles(t)||fs.writeFileSync(t,s,{flag:"w"})}function checkExcludeFiles(e){var s,t;return!!(null==updateAnswer?void 0:updateAnswer.isUpdate)&&(null!==(t=null===(s=null==updateAnswer?void 0:updateAnswer.excludeFilePath)||void 0===s?void 0:s.includes(e.replace(/\\/g,"/")))&&void 0!==t&&t)}async function createDirectoryStructure(e,s){const t=[{src:"/bootstrap.php",dest:"/bootstrap.php"},{src:"/.htaccess",dest:"/.htaccess"},{src:"/../composer.json",dest:"/composer.json"}];(null==updateAnswer?void 0:updateAnswer.isUpdate)&&(t.push({src:"/tsconfig.json",dest:"/tsconfig.json"}),updateAnswer.tailwindcss&&t.push({src:"/postcss.config.js",dest:"/postcss.config.js"},{src:"/tailwind.config.js",dest:"/tailwind.config.js"}));const n=[{srcDir:"/settings",destDir:"/settings"},{srcDir:"/src",destDir:"/src"}];s.prisma&&n.push({srcDir:"/prisma",destDir:"/prisma"}),s.docker&&n.push({srcDir:"/.dockerignore",destDir:"/.dockerignore"},{srcDir:"/docker-compose.yml",destDir:"/docker-compose.yml"},{srcDir:"/Dockerfile",destDir:"/Dockerfile"},{srcDir:"/apache.conf",destDir:"/apache.conf"}),t.forEach((({src:s,dest:t})=>{const n=path.join(__dirname,s),i=path.join(e,t);if(checkExcludeFiles(i))return;const c=fs.readFileSync(n,"utf8");fs.writeFileSync(i,c,{flag:"w"})})),await executeCopy(e,n,s),await updatePackageJson(e,s),await updateComposerJson(e,s),await updateIndexJsForWebSocket(e,s),s.tailwindcss?(createOrUpdateTailwindConfig(e),modifyLayoutPHP(e,!0),modifyPostcssConfig(e)):modifyLayoutPHP(e,!1);const i='# Prisma PHP Auth Secret Key For development only - Change this in production\nAUTH_SECRET=uxsjXVPHN038DEYls2Kw0QUgBcXKUyrjv416nIFWPY4=  \n  \n# PHPMailer\n# SMTP_HOST=smtp.gmail.com or your SMTP host\n# SMTP_USERNAME=john.doe@gmail.com or your SMTP username\n# SMTP_PASSWORD=123456\n# SMTP_PORT=587 for TLS, 465 for SSL or your SMTP port\n# SMTP_ENCRYPTION=ssl or tls\n# MAIL_FROM=john.doe@gmail.com\n# MAIL_FROM_NAME="John Doe"';if(s.prisma){const s=`${'# Environment variables declared in this file are automatically made available to Prisma.\n# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema\n\n# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.\n# See the documentation for all the connection string options: https://pris.ly/d/connection-strings\n\nDATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"'}\n\n${i}`;await createOrUpdateEnvFile(e,s)}else await createOrUpdateEnvFile(e,i);await createUpdateGitignoreFile(e,["vendor",".env","node_modules"])}async function getAnswer(e={}){var s,t,n,i,c;const r=[];e.projectName||r.push({type:"text",name:"projectName",message:"What is your project named?",initial:"my-app"}),e.tailwindcss||r.push({type:"toggle",name:"tailwindcss",message:`Would you like to use ${chalk.blue("Tailwind CSS")}?`,initial:!0,active:"Yes",inactive:"No"}),e.websocket||r.push({type:"toggle",name:"websocket",message:`Would you like to use ${chalk.blue("Websocket")}?`,initial:!0,active:"Yes",inactive:"No"}),e.prisma||r.push({type:"toggle",name:"prisma",message:`Would you like to use ${chalk.blue("Prisma PHP ORM")}?`,initial:!0,active:"Yes",inactive:"No"}),e.docker||r.push({type:"toggle",name:"docker",message:`Would you like to use ${chalk.blue("Docker")}?`,initial:!1,active:"Yes",inactive:"No"});const o=r;if(0===o.length&&e.projectName)return e;const a=()=>{process.exit(0)};try{const r=await prompts(o,{onCancel:a});return 0===Object.keys(r).length?null:{projectName:r.projectName?String(r.projectName).trim().replace(/ /g,"-"):null!==(s=e.projectName)&&void 0!==s?s:"my-app",tailwindcss:null!==(t=r.tailwindcss)&&void 0!==t?t:e.tailwindcss,websocket:null!==(n=r.websocket)&&void 0!==n?n:e.websocket,prisma:null!==(i=r.prisma)&&void 0!==i?i:e.prisma,docker:null!==(c=r.docker)&&void 0!==c?c:e.docker}}catch(e){return null}}async function installDependencies(e,s,t=!1){fs.existsSync(path.join(e,"package.json"))||execSync("npm init -y",{stdio:"inherit",cwd:e}),s.forEach((e=>{}));const n=`npm install ${t?"--save-dev":""} ${s.join(" ")}`;execSync(n,{stdio:"inherit",cwd:e})}async function uninstallDependencies(e,s,t=!1){s.forEach((e=>{}));const n=`npm uninstall ${t?"--save-dev":"--save"} ${s.join(" ")}`;execSync(n,{stdio:"inherit",cwd:e})}function fetchPackageVersion(e){return new Promise(((s,t)=>{https.get(`https://registry.npmjs.org/${e}`,(e=>{let n="";e.on("data",(e=>n+=e)),e.on("end",(()=>{try{const e=JSON.parse(n);s(e["dist-tags"].latest)}catch(e){t(new Error("Failed to parse JSON response"))}}))})).on("error",(e=>t(e)))}))}const readJsonFile=e=>{const s=fs.readFileSync(e,"utf8");return JSON.parse(s)};async function main(){var e,s,t,n,i,c,r;try{const o=process.argv.slice(2);let a=o[0],l=null;if(a){const r={projectName:a,tailwindcss:o.includes("--tailwindcss"),websocket:o.includes("--websocket"),prisma:o.includes("--prisma"),docker:o.includes("--docker")};if(l=await getAnswer(r),null===l)return;const p=process.cwd(),d=path.join(p,"prisma-php.json"),u=readJsonFile(d);let h=[];null===(e=u.excludeFiles)||void 0===e||e.map((e=>{const s=path.join(p,e);fs.existsSync(s)&&h.push(s.replace(/\\/g,"/"))})),updateAnswer={projectName:a,tailwindcss:null!==(s=null==l?void 0:l.tailwindcss)&&void 0!==s&&s,websocket:null!==(t=null==l?void 0:l.websocket)&&void 0!==t&&t,prisma:null!==(n=null==l?void 0:l.prisma)&&void 0!==n&&n,docker:null!==(i=null==l?void 0:l.docker)&&void 0!==i&&i,isUpdate:!0,excludeFiles:null!==(c=u.excludeFiles)&&void 0!==c?c:[],excludeFilePath:null!=h?h:[],filePath:p}}else l=await getAnswer();if(null===l)return;execSync("npm uninstall -g create-prisma-php-app",{stdio:"inherit"}),execSync("npm install -g create-prisma-php-app",{stdio:"inherit"}),execSync("npm uninstall -g  browser-sync",{stdio:"inherit"}),execSync("npm install -g browser-sync",{stdio:"inherit"}),a||fs.mkdirSync(l.projectName);const p=process.cwd();let d=a?p:path.join(p,l.projectName);a||process.chdir(l.projectName);const u=["typescript","@types/node","ts-node","http-proxy-middleware@^3.0.0","npm-run-all"];l.tailwindcss&&u.push("tailwindcss","autoprefixer","postcss","postcss-cli","cssnano"),l.websocket&&u.push("chokidar-cli"),l.prisma&&u.push("prisma","@prisma/client"),await installDependencies(d,u,!0),a||execSync("npx tsc --init",{stdio:"inherit"}),l.tailwindcss&&execSync("npx tailwindcss init -p",{stdio:"inherit"}),l.prisma&&(fs.existsSync(path.join(d,"prisma"))||execSync("npx prisma init",{stdio:"inherit"})),await createDirectoryStructure(d,l);const h=path.join(d,"public");if(fs.existsSync(h)||fs.mkdirSync(h),null==updateAnswer?void 0:updateAnswer.isUpdate){const e=[];if(!updateAnswer.tailwindcss){["postcss.config.js","tailwind.config.js"].forEach((e=>{const s=path.join(d,e);fs.existsSync(s)&&fs.unlinkSync(s)})),e.push("tailwindcss","autoprefixer","postcss","postcss-cli","cssnano")}if(updateAnswer.websocket||e.push("chokidar-cli"),updateAnswer.prisma||e.push("prisma","@prisma/client"),!updateAnswer.docker){[".dockerignore","docker-compose.yml","Dockerfile","apache.conf"].forEach((e=>{const s=path.join(d,e);fs.existsSync(s)&&fs.unlinkSync(s)}))}e.length>0&&await uninstallDependencies(d,e,!0)}const m=await fetchPackageVersion("create-prisma-php-app"),f=d.replace(/\\/g,"\\"),w=bsConfigUrls(f),y=l.prisma?"src/Lib/Prisma/Classes":"",g={projectName:l.projectName,projectRootPath:f,phpEnvironment:"XAMPP",phpRootPathExe:"C:\\xampp\\php\\php.exe",phpGenerateClassPath:y,bsTarget:w.bsTarget,bsPathRewrite:w.bsPathRewrite,tailwindcss:l.tailwindcss,websocket:l.websocket,prisma:l.prisma,docker:l.docker,version:m,excludeFiles:null!==(r=null==updateAnswer?void 0:updateAnswer.excludeFiles)&&void 0!==r?r:[]};fs.writeFileSync(path.join(d,"prisma-php.json"),JSON.stringify(g,null,2),{flag:"w"}),(null==updateAnswer?void 0:updateAnswer.isUpdate)?execSync("C:\\xampp\\php\\php.exe C:\\ProgramData\\ComposerSetup\\bin\\composer.phar update",{stdio:"inherit"}):execSync("C:\\xampp\\php\\php.exe C:\\ProgramData\\ComposerSetup\\bin\\composer.phar install",{stdio:"inherit"})}catch(e){process.exit(1)}}main();

package/dist/prisma-php.js

@@ -35,6 +35,7 @@ const main = async () => {
       if (localSettings.tailwindcss) commandArgs.push("--tailwindcss");
       if (localSettings.websocket) commandArgs.push("--websocket");
       if (localSettings.prisma) commandArgs.push("--prisma");
+      if (localSettings.docker) commandArgs.push("--docker");
       console.log("Executing command...\n");
       await executeCommand("npx", [
         "create-prisma-php-app@latest",

package/dist/src/Lib/FormHandler.php

@@ -91,23 +91,77 @@ class FormHandler
     /**
      * Retrieves the validation errors from the form state.
      *
-     * @param string|null $field The name of the field to get errors for. If null, all errors are returned.
-     * @return mixed If a field name is provided, returns the error message for that field or an empty string if no error. 
+     * This function provides error messages for individual fields or returns all form errors if no specific field is requested.
+     * Error messages are wrapped in HTML `<span>` tags with unique IDs to facilitate identification and styling.
+     *
+     * - If a field name is provided:
+     *     - Returns the error message for the specific field as a span element with a unique `id` attribute.
+     *     - If no error message is available for the field, returns an empty span element.
+     * - If no field name is provided:
+     *     - Returns an associative array of all error messages, each wrapped in a span element with a unique `id` attribute.
+     *     - If no errors are found, returns an empty array.
+     * - If the form has not been validated yet:
+     *     - Returns an empty string if a specific field name is provided.
+     *     - Returns an empty array if no field name is provided.
+     *
+     * @param string|null $field The name of the field to retrieve errors for. If null, returns all errors.
+     * - Must be a valid string or `null`.
+     * - If provided, the resulting span element will have a unique `id` attribute prefixed with "fh-error-".
+     * 
+     * @param string $class (optional) Additional classes to assign to the error `<span>` element.
+     * - Defaults to an empty string.
+     * 
+     * @return mixed If a field name is provided, returns the error message wrapped in a span or an empty string if no error.
      *               If no field name is provided, returns an associative array of all errors or an empty array if no errors.
      *               If the form has not been validated yet, returns an empty string.
+     * 
+     * @example
+     * Example usage to get a specific field's error message with a custom class:
+     * echo $form->getErrors('email', 'form-error');
+     * This will generate: "<span class='form-error' id='fh-error-email'>Error message here</span>"
+     * 
+     * Example usage to get all error messages:
+     * print_r($form->getErrors());
+     * This will generate an associative array like:
+     * [
+     *   'email' => "<span class='form-error' id='fh-error-email'>Invalid email</span>",
+     *   'username' => "<span class='form-error' id='fh-error-username'>Username too short</span>"
+     * ]
      */
     public function getErrors(string $field = null): mixed
     {
+        $wrapError = function (string $field, string $message) {
+            return "id='fh-error-$field' data-error-message='$message'";
+        };
+
+        $field = Validator::validateString($field);
         $state = $this->stateManager->getState(self::FORM_INPUT_ERRORS);
 
         if ($this->validated && $state) {
             if ($field) {
-                return $state['errors'][$field] ?? '';
+                $errorState = $state['errors'] ?? [];
+                return $wrapError($field, $errorState[$field] ?? '');
             }
-            return $state['errors'] ?? [];
+
+            $errors = $state['errors'] ?? [];
+            foreach ($errors as $fieldName => $message) {
+                $errors[$fieldName] = $wrapError($fieldName, $message);
+            }
+
+            return $errors;
         }
 
-        return '';
+        if ($field) {
+            $fieldData = $this->data[$field] ?? '';
+            return $wrapError($field, $fieldData);
+        }
+
+        return [];
+    }
+
+    public function clearErrors()
+    {
+        $this->stateManager->resetState(self::FORM_INPUT_ERRORS, true);
     }
 
     /**
@@ -211,9 +265,16 @@ class FormHandler
     public function register($fieldName, $rules = []): string
     {
         $value = Validator::validateString($this->data[$fieldName] ?? '');
-        $attributes = "name=\"$fieldName\" value=\"$value\"";
 
-        if (!array_intersect(array_keys($rules), ['text', 'email', 'password', 'number', 'date', 'color', 'range', 'tel', 'url', 'search', 'time', 'datetime-local', 'month', 'week'])) {
+        $isTypeButton = array_key_exists('button', $rules);
+        $attributes = "";
+        if ($isTypeButton) {
+            $attributes = "id='fh-$fieldName' name='$fieldName' data-rules='" . json_encode($rules) . "'";
+        } else {
+            $attributes = "id='fh-$fieldName' name='$fieldName' value='$value' data-rules='" . json_encode($rules) . "'";
+        }
+
+        if (!array_intersect(array_keys($rules), ['text', 'email', 'password', 'number', 'date', 'color', 'range', 'tel', 'url', 'search', 'time', 'datetime-local', 'month', 'week', 'file', 'submit', 'checkbox', 'radio', 'hidden', 'button', 'reset'])) {
             $rules['text'] = ['value' => true];
         }
 
@@ -225,17 +286,38 @@ class FormHandler
         $inputField[$fieldName] = [
             'value' => $value,
             'attributes' => $attributes,
-            'rules' => $rules
+            'rules' => $rules,
         ];
         $this->stateManager->setState([self::FORM_INPUT_REGISTER => $inputField], true);
 
         return $attributes;
     }
 
+    /**
+     * Retrieves the registered form fields.
+     * 
+     * @return array An associative array of registered form fields.
+     * 
+     * @example
+     * $form->getRegisteredFields();
+     * This will return an array of registered form fields.
+     */
+    public function getRegisteredFields(): array
+    {
+        return $this->stateManager->getState(self::FORM_INPUT_REGISTER) ?? [];
+    }
+
     private function parseRule($rule, $ruleValue)
     {
         $attribute = '';
-        $ruleParam = is_array($ruleValue) ? $ruleValue['value'] : $ruleValue;
+        $ruleParam = $ruleValue;
+        $requestName = null;
+        // $ruleParam = is_array($ruleValue) ? $ruleValue['value'] : $ruleValue;
+
+        if (is_array($ruleValue)) {
+            $ruleParam = $ruleValue['value'];
+            $requestName = $ruleValue['name'] ?? null;
+        }
 
         switch ($rule) {
             case 'text':
@@ -253,24 +335,30 @@ class FormHandler
             case 'month':
             case 'week':
             case 'file':
-                $attribute .= " type=\"$rule\"";
+            case 'submit':
+            case "checkbox":
+            case "radio":
+            case "hidden":
+            case "button":
+            case "reset":
+                $attribute .= " type='$rule'";
                 break;
             case 'required':
                 $attribute .= " required";
                 break;
             case 'min':
             case 'max':
-                $attribute .= " $rule=\"$ruleParam\"";
+                $attribute .= " $rule='$ruleParam'";
                 break;
             case 'minLength':
             case 'maxLength':
-                $attribute .= " $rule=\"{$ruleParam}\"";
+                $attribute .= " $rule='$ruleParam'";
                 break;
             case 'pattern':
-                $attribute .= " pattern=\"$ruleParam\"";
+                $attribute .= " pattern='$ruleParam'";
                 break;
             case 'autocomplete':
-                $attribute .= " autocomplete=\"$ruleParam\"";
+                $attribute .= " autocomplete='$ruleParam'";
                 break;
             case 'readonly':
                 $attribute .= " readonly";
@@ -279,7 +367,7 @@ class FormHandler
                 $attribute .= " disabled";
                 break;
             case 'placeholder':
-                $attribute .= " placeholder=\"$ruleParam\"";
+                $attribute .= " placeholder='$ruleParam'";
                 break;
             case 'autofocus':
                 $attribute .= " autofocus";
@@ -288,16 +376,37 @@ class FormHandler
                 $attribute .= " multiple";
                 break;
             case 'accept':
-                $attribute .= " accept=\"$ruleParam\"";
+                $attribute .= " accept='$ruleParam'";
                 break;
             case 'size':
-                $attribute .= " size=\"$ruleParam\"";
+                $attribute .= " size='$ruleParam'";
                 break;
             case 'step':
-                $attribute .= " step=\"$ruleParam\"";
+                $attribute .= " step='$ruleParam'";
                 break;
             case 'list':
-                $attribute .= " list=\"$ruleParam\"";
+                $attribute .= " list='$ruleParam'";
+                break;
+            case 'create':
+                $attribute .= " data-url='$ruleParam' data-request-name='$requestName' data-request-type='create' data-type='register'";
+                break;
+            case 'read':
+                $attribute .= " data-url='$ruleParam' data-request-name='$requestName' data-request-type='read' data-type='register'";
+                break;
+            case 'update':
+                $attribute .= " data-url='$ruleParam' data-request-name='$requestName' data-request-type='update' data-type='register'";
+                break;
+            case 'delete':
+                $attribute .= " data-url='$ruleParam' data-request-name='$requestName' data-request-type='delete' data-type='register'";
+                break;
+            case 'event':
+                $attribute .= " data-event='$ruleParam' data-type='register'";
+                break;
+            case 'debounce':
+                $attribute .= " data-debounce='$ruleParam' data-type='register'";
+                break;
+            case 'templateConnect':
+                $attribute .= " data-template-connect='$ruleParam' data-type='register'";
                 break;
             default:
                 // Optionally handle unknown rules or log them
@@ -305,4 +414,730 @@ class FormHandler
         }
         return $attribute;
     }
+
+    /**
+     * Creates a watch element for a form field.
+     * 
+     * This function returns an HTML string for a watch element with a unique `id` attribute,
+     * useful for monitoring changes in the value of a form field.
+     * 
+     * @param string $field The name of the field to create a watch element for.
+     * 
+     * @return string An HTML string representing the watch element. The element will have a unique `id` attribute prefixed with "fh-watch-" and suffixed by the field name, and it will include `data-watch-value` and `data-type` attributes.
+     * 
+     * @example
+     * Example usage to create a watch element for a "username" field:
+     * 
+     * echo $form->watch('username');
+     * Output: "<div id='fh-watch-username' data-watch-value='{value}' data-type='watch'></div>"
+     */
+    public function watch(string $field)
+    {
+        $field = Validator::validateString($field);
+        $fieldData = $this->data[$field] ?? '';
+        return "id='fh-watch-$field' data-watch-value='$fieldData' data-type='watch'";
+    }
+
+    /**
+     * Creates a template element for a form field.
+     * 
+     * This function returns an HTML string for a template element with specified data attributes,
+     * useful for creating dynamic content that can be cloned and inserted into the DOM.
+     * 
+     * @param array $params An associative array of parameters.
+     *                      - 'field' (optional): The name of the field to create a template for. If not provided, a generic template is created.
+     *                      - 'readOnLoad' (optional): A flag indicating whether the template should include the `data-read-on-load` attribute. Defaults to `true`.
+     *                      - 'listen' (optional): A string specifying any event the template should listen to. Defaults to an empty string.
+     *                      - 'noCache' (optional): A flag indicating whether the template should include the `data-no-cache` attribute. Defaults to `false`.
+     * 
+     * @return string An HTML string with data attributes for the template. If a field name is provided, 
+     *                it includes the `data-template-field` attribute. Otherwise, it includes the `data-template-general` attribute.
+     * 
+     * @example
+     * Example usage to create a template element for a "user" field:
+     * 
+     * $params = [
+     *     'field' => 'user',
+     *     'readOnLoad' => true,
+     *     'listen' => 'exampleEvent',
+     *     'noCache' => true
+     * ];
+     * echo $form->template($params);
+     * Output: "data-template-field='user' data-read-on-load='1' data-type='template' data-listen='exampleEvent' data-no-cache='1'"
+     * 
+     * Example usage to create a generic template element:
+     * 
+     * $params = [
+     *     'readOnLoad' => true,
+     *     'listen' => 'exampleEvent',
+     *     'noCache' => false
+     * ];
+     * echo $form->template($params);
+     * Output: "data-template-general='true' data-read-on-load='1' data-type='template' data-listen='exampleEvent' data-no-cache='0'"
+     */
+    public function template(array $params = []): string
+    {
+        $field = isset($params['field']) ? Validator::validateString($params['field']) : null;
+        $readOnLoad = isset($params['readOnLoad']) ? Validator::validateBoolean($params['readOnLoad']) : true;
+        $listen = isset($params['listen']) ? Validator::validateString($params['listen']) : '';
+        $noCache = isset($params['noCache']) ? Validator::validateBoolean($params['noCache']) : false;
+        if ($field) {
+            $templateData = "data-template-field='$field' data-read-on-load='$readOnLoad' data-type='template' data-listen='$listen' data-no-cache='$noCache'";
+        } else {
+            $templateData = "data-template-general='true' data-read-on-load='$readOnLoad' data-type='template' data-listen='$listen' data-no-cache='$noCache'";
+        }
+
+        return $templateData;
+    }
+
+    /**
+     * Creates a template placeholder for a form field.
+     * 
+     * This function returns a `data-template-placeholder` attribute with the field name as the value,
+     * 
+     * useful for dynamically populating template elements with field data.
+     * 
+     * @param string $field The name of the field to create a placeholder for.
+     * 
+     * @return string A `data-template-placeholder` attribute with the field name as the value.
+     * 
+     * @example
+     * Example usage to create a placeholder for a "name" field:
+     * echo $form->templatePlaceholder('name');
+     * This will generate: "data-template-placeholder='name'"
+     */
+    public function templatePlaceholder(string $field)
+    {
+        $field = Validator::validateString($field);
+        return "data-template-placeholder='$field' data-type='template-placeholder'";
+    }
+
+    /**
+     * Generates a string containing data attributes for a button element based on input parameters.
+     *
+     * This function accepts an associative array where keys are attribute names (without the 'data-' prefix)
+     * and values are the attribute values. It will only add an attribute if the associated value is not empty.
+     * 
+     * @param array $attributes Associative array with the following keys and their corresponding values:
+     *                          - 'info': Information for the `data-info` attribute.
+     *                          - 'event': Event-handler pairs formatted as a string for the `data-event` attribute.
+     *                          - 'formAction': Actions or operations associated with a form for the `data-form` attribute.
+     *                          - 'connect': Additional connections related to the button for the `data-connect` attribute.
+     *
+     * @return string A string containing the concatenated `data-*` attributes, ready for inclusion in an HTML tag.
+     *
+     * @throws InvalidArgumentException If any value in the array does not pass validation.
+     */
+    public function event(array $attributes)
+    {
+        $dataAttributes = [];
+        $possibleAttributes = ['info', 'event', 'form', 'connect'];
+
+        foreach ($possibleAttributes as $attr) {
+            if (isset($attributes[$attr]) && $attributes[$attr] !== '') {
+                $validatedValue = Validator::validateString($attributes[$attr]);
+                $dataAttributes[] = "data-$attr='$validatedValue' data-type='event'";
+            }
+        }
+
+        return implode(' ', $dataAttributes);
+    }
+
+    public function templateConnect(string $field)
+    {
+        $field = Validator::validateString($field);
+        return "data-template-connect='$field' data-type='template-connect'";
+    }
+
+    public function form(string $field, ...$options)
+    {
+        $field = Validator::validateString($field);
+        $attributes = "id='fh-form-$field' method='post'";
+        $optionsAttributes = json_encode($options);
+        $attributes .= " data-options='$optionsAttributes' data-type='form'";
+        return $attributes;
+    }
 }
+
+?>
+
+<script>
+    class FormHandler {
+        constructor() {
+            this.errors = [];
+            this.requestCache = new Map();
+            this.dataRulesElements = document.querySelectorAll('[data-rules]');
+            this.dataFormElements = document.querySelectorAll('[data-type="form"]');
+            this.init();
+        }
+
+        init() {
+            this.dataRulesElements.forEach(fieldElement => {
+                this.initializeFieldFromDOM(fieldElement);
+            });
+
+            this.dataFormElements.forEach(formElement => {
+                this.initializeFormFromDOM(formElement);
+            });
+
+            this.event();
+        }
+
+        initializeFieldFromDOM(fieldElement) {
+            if (!fieldElement) {
+                // console.error('Element not found for field:', fieldElement);
+                return;
+            }
+
+            const fieldName = fieldElement.name;
+            const dataUrl = fieldElement.getAttribute('data-url');
+            const rules = JSON.parse(fieldElement.getAttribute('data-rules') || '{}');
+            const event = fieldElement.getAttribute('data-event');
+
+            let debounceTime = fieldElement.getAttribute('data-debounce');
+            if (!debounceTime || debounceTime.length < 1) {
+                debounceTime = 300;
+            }
+
+            const debouncedInputHandler = debounce(async () => {
+                if (dataUrl) {
+                    if (fieldElement.getAttribute('data-type') === 'register') {
+                        if (fieldElement.getAttribute('data-request-type') === 'read') {
+                            await this.read(dataUrl, fieldElement).catch(error => {
+                                console.error("Read failed for field", fieldName, error);
+                            });
+                        }
+                    }
+                }
+            }, debounceTime);
+
+            const immediateObserver = (e) => {
+                const target = e.target;
+                this.watch(target);
+
+                const errors = this.validateField(target, target.value, rules);
+                const errorContainer = document.getElementById(`fh-error-${target.name}`);
+                if (errorContainer) {
+                    errorContainer.textContent = errors.join(', ');
+                }
+            };
+
+            fieldElement.addEventListener('input', debouncedInputHandler);
+            fieldElement.addEventListener('input', immediateObserver);
+
+            if (dataUrl) {
+                if (this.isDataTypeExists(fieldElement, 'register')) {
+                    if (fieldElement.getAttribute('data-request-type') === 'read') {
+                        this.read(dataUrl, fieldElement).catch(error => {
+                            console.error("Initial read failed for field", fieldName, error);
+                        });
+                    }
+                }
+            }
+        }
+
+        initializeFormFromDOM(formElement) {
+            if (!formElement) return;
+
+            formElement.addEventListener('submit', async (e) => {
+                e.preventDefault();
+
+                const formData = new FormData(formElement);
+                const formFields = Object.fromEntries(formData.entries());
+
+                const optionsAttribute = formElement.getAttribute('data-options');
+                if (!optionsAttribute) {
+                    console.error("Missing 'data-options' attribute.");
+                    return;
+                }
+
+                let formOptions;
+                try {
+                    formOptions = JSON.parse(optionsAttribute);
+                } catch (parseError) {
+                    console.error("Failed to parse 'data-options'.", parseError);
+                    return;
+                }
+
+                const formAction = formElement.dataset.action;
+                const url = formOptions[0]?.[formAction];
+                const readFieldName = formOptions[0]?.['read'];
+                const field = document.getElementById(`fh-${readFieldName.name}`);
+                const finishFunctionName = formOptions[0]?.['finishFunction'];
+
+                if (!url) {
+                    console.error(`Invalid form action: ${formAction}`);
+                    return;
+                }
+
+                const handleAction = async (actionFunc, errorMsg) => {
+                    try {
+                        await actionFunc(url, formFields);
+                    } catch (error) {
+                        console.error(errorMsg, error);
+                    }
+                };
+
+                switch (formAction) {
+                    case 'create':
+                        await handleAction(this.create.bind(this), "Create failed");
+                        break;
+                    case 'update':
+                        await handleAction(this.update.bind(this), "Update failed");
+                        break;
+                    case 'delete':
+                        await handleAction(this.delete.bind(this), "Delete failed");
+                        break;
+                    default:
+                        console.error(`Unknown action: ${formAction}`);
+                        break;
+                }
+
+                if (field) {
+                    try {
+                        await this.read(field.dataset.url, field);
+                    } catch (error) {
+                        console.error("Read failed", error);
+                    }
+                } else {
+                    if (readFieldName) {
+                        try {
+                            await this.read(readFieldName.url, {
+                                name: readFieldName,
+                                value: ''
+                            });
+                        } catch (error) {
+                            console.error("Read failed", error);
+                        }
+                    }
+                }
+
+                if (finishFunctionName && typeof window[finishFunctionName] === 'function') {
+                    window[finishFunctionName]();
+                }
+            });
+        }
+
+        isDataTypeExists(element, dataType) {
+            return this.getDataTypes(element).includes(dataType);
+        }
+
+        getDataTypes(element) {
+            const dataTypes = element.getAttribute('data-type');
+            if (dataTypes) {
+                return dataTypes.split(',').map(val => val.trim());
+            } else {
+                return [];
+            }
+        }
+
+        updateElementDisplay(displayElement, field) {
+            const tagName = field.tagName.toUpperCase();
+            if (tagName === 'INPUT' || tagName === 'TEXTAREA') {
+                if (displayElement.tagName === 'INPUT' || displayElement.tagName === 'TEXTAREA') {
+                    displayElement.value = field.value;
+                } else {
+                    displayElement.dataset.watchValue = field.value;
+                    displayElement.textContent = field.value;
+                }
+            } else {
+                displayElement.textContent = field.textContent;
+            }
+        }
+
+        watch(field) {
+            if (!field) return;
+
+            const watchElement = document.getElementById(`fh-watch-${field.name}`);
+            if (watchElement) {
+                this.updateElementDisplay(watchElement, field);
+            }
+        }
+
+        clearErrors() {
+            const errorElements = document.querySelectorAll('[id^="fh-error-"]');
+            errorElements.forEach(element => {
+                element.textContent = '';
+            });
+
+            this.errors = [];
+        }
+
+        getErrors(field) {
+            if (field) {
+                return document.getElementById(`fh-error-${field}`).textContent;
+            } else {
+                return this.errors;
+            }
+        }
+
+        event() {
+            const eventElements = document.querySelectorAll('[data-event]');
+            eventElements.forEach(element => {
+                const eventAttr = element.getAttribute('data-event');
+                if (eventAttr) {
+                    const events = eventAttr.split(';');
+                    events.forEach(eventFunctionPair => {
+                        const [eventType, functionName] = eventFunctionPair.split(',').map(val => val.trim());
+
+                        if (eventType && functionName && typeof window[functionName] === 'function') {
+                            element.addEventListener(eventType, window[functionName]);
+
+                            element.addEventListener(eventType, (e) => {
+                                const eventForm = element.getAttribute('data-form');
+                                if (eventForm) {
+                                    const formAttributes = eventForm.split(',');
+                                    const formElement = document.getElementById(`fh-form-${formAttributes[0]}`);
+                                    const formAction = formAttributes[1];
+
+                                    if (!formElement) return;
+
+                                    if (['create', 'read', 'update', 'delete'].includes(formAction)) {
+                                        formElement.dataset.action = formAction;
+                                    }
+
+                                    if (formAction === 'create') {
+                                        const templateElements = document.querySelectorAll('[data-template-connect]');
+                                        templateElements.forEach(templateElement => {
+                                            if (templateElement) {
+                                                this.updateElementDisplay(templateElement, {
+                                                    tagName: templateElement.tagName,
+                                                    value: '',
+                                                    textContent: ''
+                                                });
+                                            }
+                                        });
+                                    }
+                                }
+                            });
+                        } else {
+                            console.error(`Invalid event or function: ${eventFunctionPair}`);
+                        }
+                    });
+                }
+            });
+        }
+
+        getTemplateForField(field) {
+            let templates = [];
+            const typeTemplate = document.querySelectorAll('[data-type="template"]');
+
+            if (typeTemplate.length > 0) {
+                templates = Array.from(typeTemplate).filter(template => {
+                    const templateField = template.getAttribute('data-template-field');
+                    const generalTemplate = template.getAttribute('data-template-general');
+                    const listen = template.getAttribute('data-listen');
+                    if (templateField === field.name) {
+                        return true;
+                    }
+
+                    const templateListener = document.querySelector(`[data-template-field="${listen}"]`);
+                    if (templateListener && templateListener.getAttribute('data-listen') !== '') {
+                        return true;
+                    }
+
+                    if (listen === 'read') {
+                        return true;
+                    }
+
+                    if (generalTemplate === 'true') {
+                        return true;
+                    }
+
+                    return false;
+                });
+            }
+            return templates;
+        }
+
+        processDataItems(items, template, tbody) {
+            items.forEach((item) => {
+                const clone = document.importNode(template.content, true);
+
+                Object.keys(item).forEach(key => {
+                    const placeholderElement = clone.querySelector(`[data-template-placeholder="${key}"]`);
+                    if (placeholderElement) {
+                        placeholderElement.textContent = item[key];
+                    }
+                });
+
+                const dataInfoElements = clone.querySelectorAll('[data-info], [data-event], [data-connect]');
+                dataInfoElements.forEach(element => {
+                    this.attachEventHandlers(element, item);
+                });
+
+                tbody.appendChild(clone);
+            });
+        }
+
+        attachEventHandlers(element, item) {
+            const infoKeys = element.getAttribute('data-info');
+            if (infoKeys) {
+                if (infoKeys === 'all') {
+                    const keys = Object.keys(item);
+                    keys.forEach(key => {
+                        if (item[key] !== undefined) {
+                            element.dataset[key] = item[key];
+                        }
+                    });
+                } else {
+                    const keys = infoKeys.split(',').map(key => key.trim());
+                    keys.forEach(key => {
+                        if (item[key] !== undefined) {
+                            element.dataset[key] = item[key];
+                        }
+                    });
+                }
+            }
+
+            const eventAttr = element.getAttribute('data-event');
+            if (eventAttr) {
+                const events = eventAttr.split(';');
+                events.forEach(eventFunctionPair => {
+                    const [eventType, functionName] = eventFunctionPair.split(',').map(val => val.trim());
+
+                    if (eventType && functionName && typeof window[functionName] === 'function') {
+                        element.addEventListener(eventType, window[functionName]);
+
+                        element.addEventListener(eventType, (e) => {
+                            this.handleDataConnectAndFormActions(element, item);
+                        });
+                    } else {
+                        console.error(`Invalid event or function: ${eventFunctionPair}`);
+                    }
+                });
+            }
+        }
+
+        handleDataConnectAndFormActions(element, item) {
+            const eventForm = element.getAttribute('data-form');
+            if (eventForm) {
+                const formAttributes = eventForm.split(',');
+                const formElement = document.getElementById(`fh-form-${formAttributes[0]}`);
+                const formAction = formAttributes[1];
+
+                if (!formElement) return;
+
+                if (['create', 'read', 'update', 'delete'].includes(formAction)) {
+                    formElement.dataset.action = formAction;
+                }
+            }
+
+            const templateConnectValues = element.getAttribute('data-connect');
+            if (templateConnectValues) {
+                const connectValues = templateConnectValues.split(',').map(value => value.trim());
+                connectValues.forEach(connectValue => {
+                    const templateElements = document.querySelectorAll(`[data-template-connect="${connectValue}"]`);
+                    templateElements.forEach(templateElement => {
+                        this.updateElementDisplay(templateElement, {
+                            tagName: templateElement.tagName,
+                            value: item[connectValue],
+                            textContent: item[connectValue]
+                        });
+                    });
+                });
+            }
+        }
+
+        updateTemplates(templates, response, field) {
+            const items = Array.isArray(response) ? response : [response];
+            templates.forEach(template => {
+                let readOnLoad = template.getAttribute('data-read-on-load');
+                let noCache = template.getAttribute('data-no-cache');
+                if (readOnLoad === '' && (field.value === undefined || field.value.length === 0)) {
+                    const tbody = template.parentNode;
+                    tbody.innerHTML = '';
+                    tbody.appendChild(template);
+                    return;
+                }
+
+                const tbody = template.parentNode;
+                tbody.innerHTML = '';
+                tbody.appendChild(template);
+
+                this.processDataItems(items, template, tbody);
+
+                if (noCache !== '') {
+                    this.requestCache.delete(cacheKey);
+                }
+            });
+        }
+
+        clearCache() {
+            this.requestCache.clear();
+        }
+
+        async create(url, data) {
+            if (!url || !data) return;
+
+            try {
+                const response = await api.post(url, data);
+                this.clearCache();
+            } catch (error) {
+                console.error("Create failed", error);
+            }
+        }
+
+        async read(url, field) {
+            if (!url || !field) return;
+
+            let fieldDataName = '';
+            if (field instanceof HTMLElement) {
+                const requestName = field.getAttribute('data-request-name');
+                fieldDataName = requestName && requestName.length > 0 ? requestName : field.name;
+            } else {
+                fieldDataName = field.name ?? '';
+            }
+
+            if (!fieldDataName) return;
+
+            const data = {
+                [fieldDataName]: field.value
+            };
+
+            let templates = this.getTemplateForField(field);
+            if (templates.length === 0) return;
+
+            const cacheKey = `${url}-${JSON.stringify(data)}`;
+            if (this.requestCache.has(cacheKey)) {
+                return this.requestCache.get(cacheKey)
+                    .then(response => {
+                        this.updateTemplates(templates, response, field);
+                    })
+                    .catch(error => {
+                        console.error("🚀 ~ FormHandler ~ read ~ error from cache:", error);
+                    });
+            }
+
+            const requestPromise = api.post(url, data);
+            this.requestCache.set(cacheKey, requestPromise);
+
+            try {
+                const response = await requestPromise;
+                this.updateTemplates(templates, response, field, cacheKey);
+            } catch (error) {
+                console.error("🚀 ~ FormHandler ~ read ~ error from request:", error);
+                this.requestCache.delete(cacheKey);
+            }
+        }
+
+        async update(url, data) {
+            if (!url || !data) return;
+
+            try {
+                const response = await api.put(url, data);
+                this.clearCache();
+            } catch (error) {
+                console.error("Update failed", error);
+            }
+        }
+
+        async delete(url, data) {
+            if (!url || !data) return;
+
+            try {
+                const response = await api.delete(url, data);
+                this.clearCache();
+            } catch (error) {
+                console.error("Delete failed", error);
+            }
+        }
+
+        validateField(field, value, rules) {
+            if (!rules) return [];
+            this.errors = [];
+
+            for (const [rule, options] of Object.entries(rules)) {
+                let ruleValue = options;
+                let customMessage = null;
+
+                if (typeof options === 'object') {
+                    ruleValue = options.value;
+                    customMessage = options.message || null;
+                }
+
+                switch (rule) {
+                    case 'text':
+                    case 'search':
+                        if (typeof value !== 'string') {
+                            this.errors.push(customMessage || 'Must be a string.');
+                        }
+                        break;
+                    case 'email':
+                        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                            this.errors.push(customMessage || 'Invalid email format.');
+                        }
+                        break;
+                    case 'number':
+                        if (isNaN(value)) {
+                            this.errors.push(customMessage || 'Must be a number.');
+                        }
+                        break;
+                    case 'date':
+                        if (isNaN(Date.parse(value))) {
+                            this.errors.push(customMessage || 'Invalid date format.');
+                        }
+                        break;
+                    case 'range':
+                        const [min, max] = ruleValue;
+                        if (isNaN(value) || value < min || value > max) {
+                            this.errors.push(customMessage || `Must be between ${min} and ${max}.`);
+                        }
+                        break;
+                    case 'url':
+                        try {
+                            new URL(value);
+                        } catch (e) {
+                            this.errors.push(customMessage || 'Invalid URL format.');
+                        }
+                        break;
+                    case 'required':
+                        if (!value) {
+                            this.errors.push(customMessage || 'This field is required.');
+                        }
+                        break;
+                    case 'min':
+                        if (Number(value) < ruleValue) {
+                            this.errors.push(customMessage || `Must be at least ${ruleValue}.`);
+                        }
+                        break;
+                    case 'max':
+                        if (Number(value) > ruleValue) {
+                            this.errors.push(customMessage || `Must be at most ${ruleValue}.`);
+                        }
+                        break;
+                    case 'minLength':
+                        if (value.length < ruleValue) {
+                            this.errors.push(customMessage || `Must be at least ${ruleValue} characters.`);
+                        }
+                        break;
+                    case 'maxLength':
+                        if (value.length > ruleValue) {
+                            this.errors.push(customMessage || `Must be at most ${ruleValue} characters.`);
+                        }
+                        break;
+                    case 'pattern':
+                        if (!new RegExp(ruleValue).test(value)) {
+                            this.errors.push(customMessage || 'Invalid format.');
+                        }
+                        break;
+                    case 'accept':
+                        if (!ruleValue.split(',').includes(value)) {
+                            this.errors.push(customMessage || 'Invalid file format.');
+                        }
+                        break;
+                    default:
+                        // Optionally handle unknown rules or log them
+                        break;
+                }
+            }
+
+            return this.errors;
+        }
+    }
+
+    let formHandler = null;
+    document.addEventListener('DOMContentLoaded', function() {
+        formHandler = new FormHandler();
+    });
+</script>

package/dist/src/app/js/index.js

@@ -1,22 +1,31 @@
 /**
  * Debounces a function to limit the rate at which it is called.
  *
+ * The debounced function will postpone its execution until after the specified wait time
+ * has elapsed since the last time it was invoked. If `immediate` is `true`, the function
+ * will be called at the beginning of the wait period instead of at the end.
+ *
  * @param {Function} func - The function to debounce.
- * @param {number} wait - The number of milliseconds to wait before invoking the function.
- * @param {boolean} immediate - Whether to invoke the function immediately on the leading edge.
- * @returns {Function} - The debounced function.
+ * @param {number} [wait=300] - The number of milliseconds to wait before invoking the function.
+ * @param {boolean} [immediate=false] - If `true`, the function is invoked immediately on the leading edge.
+ * @returns {Function} - Returns the debounced version of the original function.
  */
-function debounce(func, wait, immediate) {
+function debounce(func, wait = 300, immediate = false) {
   let timeout;
+
   return function () {
-    const context = this,
-      args = arguments;
+    const context = this;
+    const args = arguments;
     clearTimeout(timeout);
+
     timeout = setTimeout(() => {
       timeout = null;
       if (!immediate) func.apply(context, args);
     }, wait);
-    if (immediate && !timeout) func.apply(context, args);
+
+    if (immediate && !timeout) {
+      func.apply(context, args);
+    }
   };
 }
 

package/dist/src/app/layout.php

@@ -9,6 +9,7 @@
     <link rel="shortcut icon" href="<?php echo $baseUrl; ?>favicon.ico" type="image/x-icon">
     <script>
         const baseUrl = '<?php echo $baseUrl; ?>';
+        const pathname = '<?php echo $pathname; ?>';
     </script>
 </head>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-prisma-php-app",
-  "version": "1.11.22",
+  "version": "1.11.23",
   "description": "Prisma-PHP: A Revolutionary Library Bridging PHP with Prisma ORM",
   "main": "dist/index.js",
   "type": "module",