create-gardener 2.1.0 → 2.1.2

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

@@ -1,85 +1,120 @@
-import type { Request, Response } from "express";
 import path from "path";
 import fsp from "fs/promises";
 import ejs from "ejs";
+import { build } from "esbuild";
 
 import { fileURLToPath } from "url";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const frontendDir = path.resolve(__dirname, '..', '..', '..', 'frontend');
+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");
+async function generateStatic() {
+  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 });
+  await fsp.mkdir(outDir, { recursive: true });
+  await fsp.mkdir(finalOut, { recursive: true });
 
-    const entries = await fsp.readdir(viewsDir, { withFileTypes: true });
+  const entries = await fsp.readdir(viewsDir, { withFileTypes: true });
 
-    const rendered: string[] = [];
+  const rendered: string[] = [];
 
+  for (const entry of entries) {
+    if (!entry.isFile()) continue;
+    if (!entry.name.endsWith(".ejs")) continue;
 
-    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 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,
+      {
+        fileName: entry.name.slice(0, -4)
+      },
+      {
+        views: [viewsDir],
+      }
+    );
 
-      const html = await ejs.renderFile(
-        inputPath,
-        {
-          fileName: inputPath
-        },
-        {
-          // async: true,
-          views: [viewsDir], // needed for includes
-        }
-      );
+    await fsp.writeFile(outputPath, html, "utf8");
+    rendered.push(outputName);
+  }
 
-      await fsp.writeFile(outputPath, html, "utf8");
-      rendered.push(outputName);
-    }
+  const entries3 = await fsp.readdir(outDir, { withFileTypes: true });
+  for (const entry of entries3) {
+    const parts = entry.name
+      .replace(/^_/, "")
+      .replace(/\.html$/, "")
+      .split("_");
 
-    const entries3 = await fsp.readdir(outDir, { withFileTypes: true });
-    for (const entry of entries3) {
+    const targetDir = path.join(finalOut, ...parts);
+    const targetFile = path.join(targetDir, "index.html");
 
-      // "_path1_path2_path3.html" -> ["path1", "path2", "path3"]
-      const parts = entry.name
-        .replace(/^_/, "")
-        .replace(/\.html$/, "")
-        .split("_");
+    await fsp.mkdir(targetDir, { recursive: true });
+    await fsp.copyFile(path.join(outDir, entry.name), targetFile);
+  }
 
-      const targetDir = path.join(finalOut, ...parts);
-      const targetFile = path.join(targetDir, "index.html");
+  await fsp.rm(outDir, { recursive: true, force: true });
 
-      // 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.mkdir(path.join(finalOut, "static"), { recursive: true });
+
+  await fsp.cp(
+    path.join(frontendDir, "static", 'cache'),
+    path.join(finalOut, "static", 'cache'),
+    { recursive: true }
+  );
+
+  await fsp.cp(
+    path.join(frontendDir, "static", 'style.css'),
+    path.join(finalOut, "static", 'style.css'),
+    { recursive: true }
+  );
 
-    }
-    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,
-    });
+  await fsp.cp(
+    path.join(frontendDir, "static", 'style2.css'),
+    path.join(finalOut, "static", 'style2.css'),
+    { recursive: true }
+  );
+
+  const srcBundleDir = path.join(frontendDir, "bundle");
+  const destBundleDir = path.join(finalOut, "static", "bundle");
+
+  try {
+    const bundleFiles = await fsp.readdir(srcBundleDir);
+    if (bundleFiles.length) {
+      await fsp.mkdir(destBundleDir, { recursive: true });
+
+      for (const file of bundleFiles) {
+        const srcFile = path.join(srcBundleDir, file);
+        const destFile = path.join(destBundleDir, file);
+
+        await build({
+          entryPoints: [srcFile],
+          bundle: true,
+          minify: true,
+          format: "esm",
+          outfile: destFile,
+        });
+      }
+    }
   } catch (err) {
-    console.error(err);
-    return res.status(500).json({ error: "Static build failed" });
+    const error = err as NodeJS.ErrnoException;
+    if (error.code !== "ENOENT") {
+      throw err;
+    }
   }
+
+  console.log("Static pages generated:", rendered);
+  console.log("Output directory:", finalOut);
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  generateStatic().catch((err) => {
+    console.error("Static build failed:", err);
+    process.exit(1);
+  });
 }

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

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

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, saveTemplate } from "../controllers/gardener/index.js";
+import { addComponent, addPage, imageOptimiser, saveTemplate } from "../controllers/gardener/index.js";
 
 const router: Router = Router();
 export default router;
@@ -11,7 +11,6 @@ export default router;
 router.route("/static/cache/:name").get(imageOptimiser);
 
 if (process.env.NODE_ENV !== 'production') {
-  router.route("/createstatic").get(createStatic);
   router.route('/addcomponent').post(addComponent);
   router.route('/addpage').post(addPage);
   router.route('/savetemplate').post(saveTemplate);

package/template/src/frontend/bundle/bundle._.js

@@ -0,0 +1,2 @@
+import '../static/global.js';
+import '../static/pages/pages._.js';

package/template/src/frontend/bundle/bundle._about.js

@@ -0,0 +1 @@
+import '../static/global.js'; import '../static/pages/pages._about.js'; 

package/template/src/frontend/bundle/bundle._kartik.js

@@ -0,0 +1 @@
+import '../static/global.js'; import '../static/pages/pages._kartik.js'; 

package/template/src/frontend/bundle/bundle._new.js

@@ -0,0 +1 @@
+import '../static/global.js'; import '../static/pages/pages._new.js'; 

package/template/src/frontend/bundle/bundle._ritish.js

@@ -0,0 +1 @@
+import '../static/global.js'; import '../static/pages/pages._ritish.js'; 

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

@@ -1,5 +1,5 @@
-import { gardener, fetchElement, appendElement } from "/static/gardener.js";
-import { mode } from "/static/gardenerConfig.js";
+import { gardener, fetchElement, appendElement } from "../../gardener.js";
+import { mode } from "../../gardenerConfig.js";
 
 const body = fetchElement('#main');
 

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

@@ -1,4 +1,4 @@
-import { gardener, replaceElement, fetchElement } from '/static/gardener.js';
+import { gardener, replaceElement, fetchElement } from '../gardener.js';
 
 export default function addNotification(noti) {
   console.log('clicked');

package/template/src/frontend/static/gardenerDev.js

@@ -1,5 +1,5 @@
-import { mode } from '/static/gardenerConfig.js'
-import { gardener, appendElement, fetchElement } from '/static/gardener.js'
+import { mode } from './gardenerConfig.js'
+import { gardener, appendElement, fetchElement } from './gardener.js'
 import { addPagebtn } from './components/gardener/pageOverlayBtn.js';
 import { parserWindow as parserWindowComponent } from './components/gardener/parserWindow.js';
 import { hotReloadBtn, togglehotreload } from './components/gardener/hotReloadbtn.js';

package/template/src/frontend/static/global.js

@@ -1,4 +1,4 @@
-import { nextPagehandler, pageloader } from '/static/components/nonui/navigation.js';
+import { nextPagehandler, pageloader } from './components/nonui/navigation.js';
 
 pageloader()
 nextPagehandler();

package/template/src/frontend/static/pages/pages._.js

@@ -1,8 +1,8 @@
 import { copybtn } from "../components/copybtn.js";
 import { pageloader } from "../components/nonui/navigation.js";
 import addNotification from "../components/notification.js";
-import { gardener, fetchElement, replaceElement, appendElement } from "/static/gardener.js";
-import { log, parser, addEl, State } from "/static/gardenerDev.js"
+import { gardener, fetchElement, replaceElement, appendElement } from "../gardener.js";
+import { log, parser, addEl, State } from "../gardenerDev.js"
 
 
 // pageloader();

package/template/src/frontend/static/style.css

@@ -247,18 +247,21 @@
   .start {
     inset-inline-start: var(--spacing);
   }
-  .end {
-    inset-inline-end: var(--spacing);
-  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
   .top-1\/4 {
     top: calc(1 / 4 * 100%);
   }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
   .top-2\/5 {
     top: calc(2 / 5 * 100%);
   }
@@ -289,12 +292,18 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
   .left-1\/4 {
     left: calc(1 / 4 * 100%);
   }
+  .left-2 {
+    left: calc(var(--spacing) * 2);
+  }
   .left-2\/5 {
     left: calc(2 / 5 * 100%);
   }
@@ -316,24 +325,6 @@
   .z-\[100\] {
     z-index: 100;
   }
-  .container {
-    width: 100%;
-    @media (width >= 40rem) {
-      max-width: 40rem;
-    }
-    @media (width >= 48rem) {
-      max-width: 48rem;
-    }
-    @media (width >= 64rem) {
-      max-width: 64rem;
-    }
-    @media (width >= 80rem) {
-      max-width: 80rem;
-    }
-    @media (width >= 96rem) {
-      max-width: 96rem;
-    }
-  }
   .m-2 {
     margin: calc(var(--spacing) * 2);
   }
@@ -385,12 +376,15 @@
   .hidden {
     display: none;
   }
-  .inline {
-    display: inline;
-  }
   .inline-block {
     display: inline-block;
   }
+  .table {
+    display: table;
+  }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
   .h-2\/4 {
     height: calc(2 / 4 * 100%);
   }
@@ -409,15 +403,24 @@
   .h-screen {
     height: 100vh;
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/4 {
     width: calc(1 / 4 * 100%);
   }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
   .w-2\/4 {
     width: calc(2 / 4 * 100%);
   }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
+  .w-11 {
+    width: calc(var(--spacing) * 11);
+  }
   .w-11\/12 {
     width: calc(11 / 12 * 100%);
   }
@@ -454,10 +457,21 @@
   .flex-1 {
     flex: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .-translate-x-1 {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -468,6 +482,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .resize {
+    resize: both;
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -692,6 +709,9 @@
   .py-20 {
     padding-block: calc(var(--spacing) * 20);
   }
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
   .pb-1\.5 {
     padding-bottom: calc(var(--spacing) * 1.5);
   }
@@ -715,10 +735,6 @@
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
-  .text-5xl {
-    font-size: var(--text-5xl);
-    line-height: var(--tw-leading, var(--text-5xl--line-height));
-  }
   .text-6xl {
     font-size: var(--text-6xl);
     line-height: var(--tw-leading, var(--text-6xl--line-height));
@@ -808,15 +824,15 @@
   .text-white {
     color: var(--color-white);
   }
-  .lowercase {
-    text-transform: lowercase;
-  }
   .uppercase {
     text-transform: uppercase;
   }
   .italic {
     font-style: italic;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .opacity-70 {
     opacity: 70%;
   }
@@ -836,11 +852,19 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .backdrop-blur-md {
     --tw-backdrop-blur: blur(var(--blur-md));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1057,6 +1081,11 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
@@ -1141,6 +1170,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;

package/template/src/frontend/template/template._.ejs

@@ -116,6 +116,10 @@ gardener({
     </div>
 
   </body>
-  <script type='module' src='/static/global.js'> </script>
+  <% if (process.env.NODE_ENV === 'production') { %>
+    <script type='module' src='/static/bundle/bundle.<%=fileName%>.js'></script>
+  <% } else { %>
+    <script type='module' src='/static/global.js'></script>
 
+  <% } %>
 </html>

package/template/src/frontend/views/_.ejs

@@ -116,6 +116,10 @@ gardener({
     </div>
 
   </body>
-  <script type='module' src='/static/global.js'> </script>
-  <script type='module' src='/static/pages/pages._.js'> </script>
+  <% if (process.env.NODE_ENV === 'production') { %>
+    <script type='module' src='/static/bundle/bundle.<%=fileName%>.js'></script>
+  <% } else { %>
+    <script type='module' src='/static/global.js'></script>
+    <script type='module' src='/static/pages/pages._.js'></script>
+  <% } %>
 </html>