create-gardener 1.1.12 → 2.0.0

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/ritishDas/gardener"
   },
-  "version": "1.1.12",
+  "version": "2.0.0",
   "description": "A dom gardener converting dom elements into json and vice versa",
   "main": "index.js",
   "bin": {

package/starter.js

@@ -50,8 +50,11 @@ console.log(`
 
 Next steps:
   cd ${projectName}
-  pnpm install
-  pnpm dev
+
+  pnpm install / npm install
+  pnpm dev / npm run dev
+
+
 `);
 
 

package/template/buildHelper.js

@@ -6,6 +6,9 @@ async function buildHelper() {
   const dest = path.resolve('build', 'frontend');
 
   await fs.cp(src, dest, { recursive: true });
+
+  await fs.writeFile(path.join(dest, 'static', 'gardenerConfig.js'), "export const mode = 'pro';", 'utf8');
+
 }
 
 buildHelper();// const path = require('path');

package/template/jsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "nodenext",
+    "noUncheckedSideEffectImports": true,
+    "moduleResolution": "Bundler",
+    "checkJs": true,
+    "baseUrl": ".",
+    "paths": {
+      "/static/*.js": ["src/frontend/static/*.js"]
+    },
+
+
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+
+
+    "strict":true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true
+  },
+  "include": ["src/frontend/static/**/*.js"]
+}

package/template/package.json

@@ -1,14 +1,14 @@
 {
   "name": "create-gardener",
-  "version": "1.1.11",
+  "version": "2.0.0",
   "description": "A dom gardener converting dom elements into json and vice versa",
   "main": "src/build/server.js",
   "type": "module",
   "scripts": {
-    "start": "node src/build/server.js",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "concurrently \"tsx watch src/backend/server.ts\" \"tailwindcss -w -i src/frontend/tailwind.css -o src/frontend/static/style.css\"",
-    "build": "tailwindcss -i src/frontend/tailwind.css -o src/frontend/static/style.css --minify && tsc && node buildHelper.js"
+    "start": "NODE_ENV=production node build/backend/server.js",
+    "dev": "concurrently \"NODE_ENV=development tsx watch src/backend/server.ts\" \"tailwindcss -w -i src/frontend/tailwind.css -o src/frontend/static/style.css\"",
+    "build": "tailwindcss -i src/frontend/tailwind.css -o src/frontend/static/style.css --minify && tsc && node buildHelper.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "ritishDas",
@@ -32,3 +32,4 @@
   }
 }
 
+

package/template/src/backend/controllers/gardener/addComponent.ts

@@ -0,0 +1,27 @@
+import type { Request, Response } from "express";
+import fsp from "fs/promises";
+import path from 'path';
+
+interface AddComponentBody {
+  path: string;
+  component: string;
+}
+
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const frontendDir = path.resolve(__dirname, '..', '..', '..', 'frontend');
+
+export async function addComponent(req: Request<{}, {}, AddComponentBody>, res: Response) {
+  try {
+    const { path: filePath, component } = req.body;
+    await fsp.mkdir(path.join(frontendDir, 'static', 'components'), { recursive: true });
+    await fsp.writeFile(path.join(frontendDir, `${filePath}`), component, "utf8");
+    res.json({ success: true });
+
+  } catch (err) {
+    const error = err as Error;
+    res.json({ success: false, msg: error.message });
+  }
+}

package/template/src/backend/controllers/gardener/addPage.ts

@@ -0,0 +1,60 @@
+import type { Request, Response } from "express";
+import fsp from "fs/promises";
+import path from 'path';
+
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const frontendDir = path.resolve(__dirname, '..', '..', '..', 'frontend');
+
+export async function addPage(req: Request, res: Response) {
+  try {
+    const pagename: string = req.body.page;
+    const name = pagename.replaceAll('/', '_');
+
+    const templatePath = path.join(frontendDir, 'frontendtemplate.ejs');
+    const viewPath = path.join(frontendDir, `views`, `${name}.ejs`);
+    const routePath = path.resolve(__dirname, '..', '..', 'routes', 'gardener.route.ts');
+    const jsDir = path.join(frontendDir, 'static/pages');
+    const jsFilePath = path.join(jsDir, `${name}.js`);
+
+    const templateContent = await fsp.readFile(templatePath, 'utf8');
+    await fsp.writeFile(viewPath, templateContent, "utf8");
+
+    await replaceLastOccurrence(viewPath, '<script', `<script src="/static/pages/${name}.js" type='module'></script>`);
+
+    const routeEntry = `router.route("${pagename}").get((req: Request, res: Response) => res.render("${name}"));\n`;
+    await fsp.appendFile(routePath, routeEntry, "utf8");
+
+    await fsp.mkdir(jsDir, { recursive: true });
+    const jsContent = 'import { gardener, fetchElement, replaceElement, appendElement } from "/static/gardener.js";\n import {log, parser, addEl, State} from "/static/gardenerDev.js"';
+    await fsp.writeFile(jsFilePath, jsContent, "utf8");
+
+    res.json({ success: true });
+  } catch (err) {
+    const error = err as Error;
+    res.json({ success: false, msg: error.message });
+  }
+}
+
+async function replaceLastOccurrence(filePath: string, searchPattern: string, replacementLine: string) {
+  const content = await fsp.readFile(filePath, 'utf8');
+  const lines = content.split('\n');
+  let found = false;
+
+  for (let i = lines.length - 1; i >= 0; i--) {
+
+    if (lines[i]!.includes(searchPattern)) {
+      lines[i] = `${replacementLine}\n${lines[i]}`;
+      found = true;
+      break;
+    }
+  }
+
+  if (found) {
+    await fsp.writeFile(filePath, lines.join('\n'), 'utf8');
+  } else {
+    console.warn(`Pattern "${searchPattern}" not found in ${filePath}`);
+  }
+}

package/template/src/backend/controllers/gardener/createStatic.ts

@@ -0,0 +1,84 @@
+import type { Request, Response } from "express";
+import path from "path";
+import fsp from "fs/promises";
+import ejs from "ejs";
+
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const frontendDir = path.resolve(__dirname, '..', '..', '..', 'frontend');
+
+export async function createStatic(req: Request, res: Response) {
+  try {
+    const viewsDir = path.join(frontendDir, "views");
+    const outDir = path.resolve("src/tempfrontend");
+    const finalOut = path.resolve("src/frontendStatic");
+
+    await fsp.mkdir(outDir, { recursive: true });
+    await fsp.mkdir(finalOut, { recursive: true });
+
+    const entries = await fsp.readdir(viewsDir, { withFileTypes: true });
+
+    const rendered: string[] = [];
+
+
+    for (const entry of entries) {
+      // skip folders (partials, layouts, etc.)
+      if (!entry.isFile()) continue;
+      if (!entry.name.endsWith(".ejs")) continue;
+
+      const inputPath = path.join(viewsDir, entry.name);
+      const outputName = entry.name.replace(/\.ejs$/, ".html");
+      const outputPath = path.join(outDir, outputName);
+
+      const html = await ejs.renderFile(
+        inputPath,
+        {
+        },
+        {
+          // async: true,
+          views: [viewsDir], // needed for includes
+        }
+      );
+
+      await fsp.writeFile(outputPath, html, "utf8");
+      rendered.push(outputName);
+    }
+
+    const entries3 = await fsp.readdir(outDir, { withFileTypes: true });
+    for (const entry of entries3) {
+
+      // "_path1_path2_path3.html" -> ["path1", "path2", "path3"]
+      const parts = entry.name
+        .replace(/^_/, "")
+        .replace(/\.html$/, "")
+        .split("_");
+
+      const targetDir = path.join(finalOut, ...parts);
+      const targetFile = path.join(targetDir, "index.html");
+
+      // ensure directories exist
+      await fsp.mkdir(targetDir, { recursive: true });
+      console.log('done');
+      // copy file
+      await fsp.copyFile(path.join(outDir, entry.name), targetFile);
+
+    }
+    await fsp.rm(outDir, { recursive: true, force: true });
+    await fsp.cp(
+      path.join(frontendDir, "static"),
+      path.join(finalOut, 'static'),
+      { recursive: true }
+    );
+
+    return res.json({
+      success: true,
+      generated: rendered,
+      outDir,
+    });
+  } catch (err) {
+    console.error(err);
+    return res.status(500).json({ error: "Static build failed" });
+  }
+}

package/template/src/backend/controllers/gardener/imageOptimiser.ts

@@ -0,0 +1,67 @@
+import type { Request, Response } from "express";
+import fsp from "fs/promises";
+import path from "path";
+import generateWebP from "../../libs/generateWebp.js";
+
+
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+
+export async function imageOptimiser(req: Request, res: Response) {
+  try {
+    const { name } = req.params;
+
+    if (typeof name !== 'string') return;
+    // name format: test_500x300.webp
+    const match = name.match(/^(.+?)_(\d+)x(\d+)\.webp$/);
+
+    if (!match) {
+      return res.status(400).json({ error: "Invalid image format" });
+    }
+
+    const [, baseName, widthStr, heightStr] = match;
+
+    if (!widthStr || !heightStr) return;
+    const width = parseInt(widthStr, 10);
+    const height = parseInt(heightStr, 10);
+
+    const cacheDir = path.join(__dirname, "..", "..", "..", "frontend", "static", "cache");
+    await fsp.mkdir(cacheDir, { recursive: true });
+
+    const outputPath = path.join(cacheDir, name);
+
+    try {
+      await fsp.access(outputPath);
+      return res.sendFile(path.basename(outputPath), {
+        root: path.dirname(outputPath),
+      });
+    } catch {
+      // not cached → continue
+    }
+
+    const assetsDir = path.resolve(__dirname, '..', '..', '..', "frontend", "assets");
+    const files = await fsp.readdir(assetsDir);
+
+    const sourceFile = files.find((file) => {
+      const parsed = path.parse(file);
+      return parsed.name === baseName;
+    });
+
+    if (!sourceFile) {
+      return res.status(404).json({ error: "Source image not found" });
+    }
+
+    const inputPath = path.join(assetsDir, sourceFile);
+
+    await generateWebP(inputPath, outputPath, width, height);
+
+    return res.sendFile(path.basename(outputPath), {
+      root: path.dirname(outputPath),
+    });
+  } catch (err) {
+    console.error(err);
+    return res.status(500).json({ error: "Image optimisation failed" });
+  }
+}

package/template/src/backend/controllers/gardener/index.ts

@@ -0,0 +1,4 @@
+export * from './imageOptimiser.js';
+export * from './addPage.js';
+export * from './createStatic.js';
+export * from './addComponent.js';

package/template/src/backend/libs/generateWebp.ts

@@ -24,3 +24,4 @@ export default async function generateWebP(
 
   console.log("✅ Image successfully generated");
 }
+

package/template/src/backend/routes/gardener.route.ts

@@ -1,6 +1,6 @@
 import type { Request, Response } from 'express';
 import { Router } from "express";
-import { addComponent, addPage, createStatic, imageOptimiser } from "../controllers/gardener.controller.js";
+import { addComponent, addPage, createStatic, imageOptimiser } from "../controllers/gardener/index.js";
 
 const router: Router = Router();
 export default router;
@@ -9,9 +9,12 @@ export default router;
 
 
 router.route("/static/cache/:name").get(imageOptimiser);
-router.route("/createstatic").get(createStatic);
-router.route('/addcomponent').post(addComponent);
-router.route('/addpage').post(addPage);
+
+if (process.env.NODE_ENV !== 'production') {
+  router.route("/createstatic").get(createStatic);
+  router.route('/addcomponent').post(addComponent);
+  router.route('/addpage').post(addPage);
+}
 
 
 
@@ -19,4 +22,11 @@ router.route('/addpage').post(addPage);
 
 router.route('/').get((req: Request, res: Response) => res.render('_'));
 router.route('/login').get((req: Request, res: Response) => res.render('_login'));
-
+router.route("/test").get((req: Request, res: Response) => res.render("_test"))
+router.route("/rd").get((req: Request, res: Response) => res.render("_rd"));
+router.route("/car").get((req: Request, res: Response) => res.render("_car"));
+router.route("/onemore").get((req: Request, res: Response) => res.render("_onemore"));
+
+router.route("/re").get((req: Request, res: Response) => res.render("_re"));
+router.route("/playground").get((req: Request, res: Response) => res.render("_playground"));
+router.route("/get-started").get((req: Request, res: Response) => res.render("_get-started"));

package/template/src/backend/server.ts

@@ -2,26 +2,24 @@
 import 'dotenv/config';
 import express from 'express';
 import frontendRoute from './routes/gardener.route.js'
+import path from "path";
 
 const app = express();
 
 
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
-app.set('views', './src/frontend/views');
+const staticFiles = path.resolve(__dirname, '..', 'frontend')
+
+app.set('views', path.join(staticFiles, 'views'));
 app.set("view engine", "ejs");
-app.use(express.static('./src/frontend'));
+app.use(express.static(staticFiles));
 app.use(express.json());
 app.use(frontendRoute);
 
 const PORT = process.env.PORT || 3000;
-//
-// initDB().then(
-//   () => {
-//     app.listen(PORT, () => {
-//       console.log("server listening 🚀🚀🚀 PORT:", PORT);
-//     });
-//   }
-// )
 
 app.listen(PORT, () => {
   console.log("server listening 🚀🚀🚀 PORT:", PORT);

package/template/src/frontend/frontendtemplate.ejs

@@ -3,33 +3,21 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/svg+xml" href="/static/cache/favicon_50x50.webp" />
   <link href="/static/style.css" rel="stylesheet"/>
   <link href="/static/style2.css" rel="stylesheet"/>
-    <title>Redvent:Login</title>
+    <title>Gardener: The Mini Web Framework</title>
   </head>
   <body>
     <div class='notification'></div>
-    <div class="bg-gray-200 w-screen h-screen flex justify-center items-center" id='body'>
-      <!-- Remove this line when you are using hot reload as it will cause delay -->
-      <%- include('partials/loader') %>
-      <!-- Remove this line when you are using hot reload as it will cause delay -->
+    <div class='loader w-screen h-screen bg-white fixed z-2'> </div>
+    <div id='main'>
 
-<!-- Main  Content-->
 
 
-      <div class="hero flex justify-around items-center p-5 h-[90vh]">
-        <p class='p-5'>
-          Gardener is a front-end library for creating and manipulating DOM elements using a declarative JavaScript object syntax. It includes a development server with features like hot-reloading and on-the-fly component creation from existing HTML. The server also provides dynamic image resizing and caching.
-        </p>
-        <img src="/cache/w_500x500.webp" alt="logo" class="w-500">
-      </div>
-    </div>
-    <script src='/static/global.js' type="module"></script>
-<script type="module">
 
-  import { parser, fetchElement, replaceElement, appendElement } from "/static/gardener.js";
-</script>
   </body>
+  <script type='module' src='/static/global.js'> </script>
 </html>
 
 

package/template/src/frontend/static/components/copybtn.js

@@ -0,0 +1,86 @@
+
+import { gardener, fetchElement, replaceElement } from '../gardener.js'
+
+export function copybtn() {
+  return gardener({
+    "t": "button",
+    "cn": [
+      "copybtn",
+      "flex",
+      "items-center",
+      "justify-center",
+      "p-2",
+      "text-gray-400",
+      "hover:text-white",
+      "hover:bg-white/10",
+      "rounded",
+      "transition-all",
+      "duration-200",
+      "active:scale-95"
+    ],
+    "attr": {
+      "title": "Copy to clipboard"
+    },
+    "children": [
+      {
+        "t": "span",
+        "cn": [
+          "w-5",
+          "h-5"
+        ],
+        "children": [
+          {
+            "t": "svg",
+            "cn": [
+              "icon",
+              "icon-tabler",
+              "icons-tabler-outline",
+              "icon-tabler-clipboard-check"
+            ],
+            "attr": {
+              "xmlns": "http://www.w3.org/2000/svg",
+              "width": "24",
+              "height": "24",
+              "viewBox": "0 0 24 24",
+              "fill": "none",
+              "stroke": "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            },
+            "children": [
+              {
+                "t": "path",
+                "attr": {
+                  "stroke": "none",
+                  "d": "M0 0h24v24H0z",
+                  "fill": "none"
+                }
+              },
+              {
+                "t": "path",
+                "attr": {
+                  "d": "M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
+                }
+              },
+              {
+                "t": "path",
+                "attr": {
+                  "d": "M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2"
+                }
+              },
+              {
+                "t": "path",
+                "attr": {
+                  "d": "M9 14l2 2l4 -4"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  })
+}
+
+

package/template/src/frontend/static/components/nonui/api.js

@@ -1,22 +1,39 @@
-async function postFetch(path, body) {
+const baseName = '';
+
+export async function Fetch(
+  path,
+  body,
+  method = 'POST'
+) {
+
   try {
-    const data = await fetch(path, {
-      credentials: 'include',
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(body)
-    });
 
-    return await data.json();
+    const headers = {
+      "Content-Type": "application/json",
+      "ngrok-skip-browser-warning": 'true'
+      // "Authorization": 'Bearer ' + auth
+    }
+    let res;
+    if (method === 'GET' || method === 'DELETE')
+      res = await fetch(baseName + path, {
+        credentials: "include",
+        headers: headers,
+        method,
+      });
+
+    else
+      res = await fetch(baseName + path, {
+        credentials: "include",
+        headers: headers,
+        method,
+        body: JSON.stringify(body),
+      });
+
+
+
+    return res
   }
   catch (err) {
-    console.error('error while requesting', err);
+    console.log(err)
   }
 }
-
-export async function userlogin(email, password) {
-  const result = await postFetch('/login', { email, password });
-  console.log(result);
-}

package/template/src/frontend/static/components/nonui/navigation.js

@@ -0,0 +1,59 @@
+import { gardener, fetchElement, appendElement } from "/static/gardener.js";
+import { mode } from "/static/gardenerConfig.js";
+
+const body = fetchElement('#main');
+
+export function nextPagehandler() {
+  const anchor = document.querySelectorAll('a')
+  anchor.forEach(link => {
+
+    link.addEventListener('click', (e) => {
+
+
+      e.preventDefault();
+      nextPage(link.href)
+
+    })
+  })
+
+
+
+  window.addEventListener('pagehide', () => {
+    setTimeout(() => {
+      body.style.transform = 'translateX(0px)';
+      setTimeout(() => {
+        try {
+          fetchElement('.tempnpdiv').remove()
+        }
+        catch (err) { }
+
+      }, 200)
+    }, 200);
+  });
+
+}
+
+export function nextPage(link) {
+
+  appendElement(body, gardener({
+    t: 'div',
+    cn: ['tempnpdiv', 'top-0', 'left-[100vw]', 'fixed', 'h-screen', 'w-screen'],
+  }))
+  const width = window.innerWidth
+  console.log(width)
+  body.style.transition = '.2s';
+  body.style.transform = `translateX(-${width}px)`
+  setTimeout(() => {
+    window.location.href = link
+  }, 200)
+}
+
+export function pageloader() {
+  const loader = fetchElement('.loader');
+  loader.style.transition = '.4s';
+  loader.style.opacity = '0';
+  if (mode !== 'dev')
+    setTimeout(() => loader.remove(), 400)
+  else
+    loader.remove();
+}