fast-ejs-builder 1.0.1 → 1.0.2

package/README.md

@@ -61,7 +61,8 @@ npm install fast-ejs-builder --save-dev
        "useIndexRouting": true
      },
      "components": {
-       "dir": "components"
+       "dir": "components",
+       "autoGenerate": false
      },
      "data": {
        "dir": "data",
@@ -127,7 +128,8 @@ The `fast.ejs.json` (occasionnally called _the FEJ_) file controls all aspects o
     "useIndexRouting": true
   },
   "components": {
-    "dir": "components"
+    "dir": "components",
+    "autoGenerate": false
   },
   "data": {
     "dir": "data",
@@ -139,6 +141,7 @@ The `fast.ejs.json` (occasionnally called _the FEJ_) file controls all aspects o
   "tailwind": {
     "output": "public/app.css",
     "imports": [
+      "public/style.css",
       "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
     ]
   }
@@ -151,11 +154,12 @@ The `fast.ejs.json` (occasionnally called _the FEJ_) file controls all aspects o
 - **`build.interval`**: Milliseconds between rebuilds in development mode
 - **`build.useIndexRouting`**: Generate `route/index.html` instead of `route.html`
 - **`components.dir`**: Directory containing reusable EJS components
+- **`components.autoGenerate`**: Generate missing components. Default is `false`
 - **`data.dir`**: Directory for global and page-specific data files
 - **`data.allow`**: Data file format (`"js"`, `"json"`, or `"all"`)
 - **`pages.dir`**: Directory containing your EJS page templates. **Here is where you should mainly work**.
 - **`tailwind.output`**: Path to generated Tailwind CSS file
-- **`tailwind.imports`**: Array of external CSS URLs to include
+- **`tailwind.imports`**: Array of external CSS URLs to include. Each `@layer` will be detected if specified.
 
 ## Usage Examples
 
@@ -318,14 +322,15 @@ Fast EJS comes with default data that can't be overrided.
 
 #### 2. Using your own data
 
-Fill data files in `data.dir` (generated automatically if missing).
+Fill data files in `data.dir` (generated automatically if missing).\
+Remember that using js data allow you to use function, async function and getter as data.
 
 - **Global data** : Can be accessed inside every pages and components
 
 If `data.allow` is `all` or `js` (recommended)
 
 ```javascript
-// data/global.data.js
+// data/global.js
 module.exports = {
   siteName: "My Awesome Site",
   navItems: [
@@ -335,13 +340,16 @@ module.exports = {
   ],
   add: (a, b) => a + b,
   getUsers: async () => await db.getUsers(),
+  get randomBool() {
+    return Math.random() > 0.5;
+  },
 };
 ```
 
 If `data.allow` is `all` or `json`
 
 ```js
-// data/global.data.json
+// data/global.json
  {
   "siteName": "My Awesome Site",
   "navItems": [
@@ -355,18 +363,79 @@ If `data.allow` is `all` or `json`
 - **Local data** : Can be accessed only in the target page
 
 ```javascript
-// data/local.data.js
+// data/local.js
 module.exports = {
   // for page "pages/users/profile.ejs"
   "users/profile": {
     title: "Welcome to My Site",
     description: "This is a fast-ejs powered website with Tailwind CSS.",
   },
+
+  // dynamic routes
+  "user/$id": (params) => ({
+    id: params.id,
+    username: params.name,
+  }),
+  "blog/$id": ({ title, id }) => ({
+    id,
+    blogTitle: title,
+  }),
+};
+```
+
+- **Route params** : Params sent to dynamic routes. Should return an array of object
+
+```javascript
+// data/route.js
+module.exports = {
+  "user/$id": [{ id: "u1", name: "John Doe" }],
+  "blog/$id": () => {
+    const arr = [];
+    for (let i = 0; i < 5; i++) {
+      arr.push({ title: "Article " + i, id: i, isPremium: i % 2 == 0 });
+    }
+    return arr;
+  },
+  // or getter
+  get "blog/$id"() {
+    // ...
+  },
 };
 ```
 
 **Note that all JS data can be asynchronous, and each asynchronous data will affect the build time.**
 
+## Use cases
+
+You can use fast-ejs to build any static website. Just keep in mind that all pages are pre-built, not in runtime like front-end frameworks.\
+For example, if you want to create a blog, you have to use dynamic routes (ex: `articles/$id.ejs`) in order to generate each article page at once:
+
+```js
+// - Create "articles/$id.ejs" with the logic
+// - Inside "data/route.js", add all articles with their data
+module.exports = {
+  // ...,
+  "articles/$id": async () => {
+    const list = await db.getArticles();
+    return list.map((a) => ({ ...a, id: a._id })); // ensure "id" key
+  },
+};
+
+// - Add your view data inside "data/local.js"
+module.exports = {
+  // ...,
+  "articles/$id": (article /*represents the data from route.js*/) => {
+    const { name, date } = article;
+    return { name, date }; // if only name and date are used in the view
+  },
+};
+
+/** Then, when the build is done, route.js will generate files based on your list. And each files built with the corresponding data.
+ * /articles/1 (retrieve data "articles/$id" but with the article with id=1 )
+ * etc..
+ */
+```
+
 ## Commands
 
 - **`fast-ejs dev`**: Start development server with live reloading
@@ -379,7 +448,10 @@ Here is the real building flow :
 - Get the data inside `data.dir` that match the `data.allow`.
 - Scan the specified `pages.dir`.
   - All empty folder will be ignored
-  - If any `.ejs` file is found, render the html with the corresponding data and generate the right file inside `build.output` depending on `build.useIndexRouting`.
+  - If any `.ejs` file is found, search for used component inside `components.dir`.
+    - If a component is missing, it will be generated if `components.autoGenerate` is `true`
+    - If the file it is dynamic file (ex: $id.ejs), search for corresponding routes inside `data.dir/route.js(json)`
+  - Render the html with the corresponding data and generate the right file inside `build.output` depending on `build.useIndexRouting`.
   - For any other file, just copy it inside the `build.output`.
 - Generate the css with tailwind at `tailwind.output` along with `tailwind.imports` if specified.
 - Scan the `build.output` and clean all junk files and folders (files from previous build and empty folders).

package/core/index.js

@@ -72,6 +72,7 @@ const _r = (pathname, json = true) => {
     const data = fs.readFileSync(_p(pathname), { encoding: "utf8" });
     return json ? JSON.parse(data) : data;
   }
+  return null;
 };
 const _d = (...messages) => {
   let obj = "";
@@ -89,9 +90,13 @@ const _cp = (i, o) => fs.copyFileSync(_p(i), _p(o));
 
 const _has = (obj, k) => Object.hasOwn(obj, k);
 
+const _v = async (v, ...args) =>
+  typeof v === "function" ? await v(...args) : v;
+
 module.exports = {
   _ce,
   _cp,
+
   _d,
   _ds,
   _e,
@@ -104,6 +109,7 @@ module.exports = {
   _rd,
   _tree,
   _name,
+  _v,
   _w,
   args,
   root,

package/core/lib.js

@@ -1,4 +1,4 @@
-const { args, _r, _has, _ce, _d, _w, _md, _e, _p, _ds } = require(".");
+const { args, _r, _has, _ce, _d, _w, _md, _e, _p, _ds, _v } = require(".");
 const { $confirm, $input, $select, $number } = require("./prompter");
 const default_fej = require("../fast.ejs.json");
 const config = {
@@ -14,6 +14,7 @@ function getConfigFile() {
       if (v) return v;
     }
   }
+  return "fast.ejs.json";
 }
 
 function smartMerge(target = {}, source = {}) {
@@ -45,7 +46,7 @@ function smartMerge(target = {}, source = {}) {
 }
 
 async function getConfig() {
-  const file = getConfigFile() || "fast.ejs.json";
+  const file = getConfigFile();
 
   if (!_ce(file, "Config file")) {
     const auto = await $confirm("Do you want to use default settings ?", true);
@@ -62,6 +63,10 @@ async function getConfig() {
         "In which folder are your components ?",
         config.components.dir,
       );
+      config.components.autoGenerate = await $input(
+        "Auto generate missing components ?",
+        config.components.autoGenerate,
+      );
 
       config.build.output = await $input(
         "Where do you want to output ?",
@@ -116,8 +121,9 @@ function generateBaseDirs() {
 }
 
 async function getDatas() {
-  const globalDataPath = (type) => `${config.data.dir}/global.data.${type}`;
-  const localDataPath = (type) => `${config.data.dir}/local.data.${type}`;
+  const globalDataPath = (type) => `${config.data.dir}/global.${type}`;
+  const localDataPath = (type) => `${config.data.dir}/local.${type}`;
+  const routeDataPath = (type) => `${config.data.dir}/route.${type}`;
 
   const globalJs = globalDataPath("js");
   const globalJson = globalDataPath("json");
@@ -125,6 +131,9 @@ async function getDatas() {
   const localJs = localDataPath("js");
   const localJson = localDataPath("json");
 
+  const routeJs = routeDataPath("js");
+  const routeJson = routeDataPath("json");
+
   const templates = {
     globalJS: `
 module.exports = async () => ({
@@ -138,9 +147,24 @@ module.exports = () => ({
   index: {
     title: process.env.APP_NAME,
   },
-  about: {}, // about.ejs,
   "contact/menu": {}, // contact/menu.ejs
+
+  "blog/$id": (params) => ({
+    blogId: params.id,
+  }), // blog/$id.ejs
+
+  "article/$name": ({ name }) => ({
+    name,
+  }), // blog/$id.ejs
 });
+`,
+    routeJS: `
+module.exports = {
+  "blog/$id": [
+    { id: 123, title: "Article 1" },
+    { id: 456, title: "Article 2", isPremium: true },
+  ],
+};
 `,
   };
 
@@ -150,14 +174,13 @@ module.exports = () => ({
     const resolved = require.resolve(_p(path));
     delete require.cache[resolved];
     const v = require(resolved);
-    return typeof v == "function" ? await v(default_data_args) : v;
+    return await _v(v, default_data_args);
   };
 
   const getGlobalJSData = async () => {
     if (_e(globalJs)) {
       return await parseJSDate(globalJs);
     } else {
-      _d(`Global file '${globalJs}' not found. It will be generated`);
       _w(globalJs, templates.globalJS.trim());
       return {};
     }
@@ -167,18 +190,24 @@ module.exports = () => ({
     if (_e(localJs)) {
       return await parseJSDate(localJs);
     } else {
-      _d(`Local file '${localJs}' not found. It will be generated`);
       _w(localJs, templates.localJS.trim());
       return {};
     }
   };
 
+  const getRouteJSData = async () => {
+    if (_e(routeJs)) {
+      return await parseJSDate(routeJs);
+    } else {
+      _w(routeJs, templates.routeJS.trim());
+      return {};
+    }
+  };
+
   const getGlobalJSONData = () => {
     if (_e(globalJson)) {
       return _r(globalJson);
     } else {
-      _d(`Global file '${globalJson}' not found. It will be generated`);
-      _w(globalJson, {});
       return {};
     }
   };
@@ -187,31 +216,40 @@ module.exports = () => ({
     if (_e(localJson)) {
       return _r(localJson);
     } else {
-      _d(`Local file '${localJson}' not found. It will be generated`);
-      _w(localJson, { index: { title: "HomePage" }, about: {} });
       return {};
     }
   };
 
-  let globalData = {},
-    localData = {};
+  const getRouteJSONData = () => {
+    if (_e(routeJson)) {
+      return _r(routeJson);
+    } else {
+      return {};
+    }
+  };
 
+  let globalData = {},
+    localData = {},
+    routeData = {};
   switch (config.data.allow) {
     case "js":
       globalData = await getGlobalJSData();
       localData = await getLocalJSData();
+      routeData = await getRouteJSData();
       break;
     case "json":
       globalData = getGlobalJSONData();
       localData = getLocalJSONData();
+      routeData = getRouteJSONData();
       break;
     default:
       globalData = { ...getGlobalJSONData(), ...(await getGlobalJSData()) };
       localData = { ...getLocalJSONData(), ...(await getLocalJSData()) };
+      routeData = { ...getRouteJSONData(), ...(await getRouteJSData()) };
       break;
   }
 
-  return { globalData, localData };
+  return { globalData, localData, routeData };
 }
 
 const configTailwindOutput = () => {

package/fast.ejs.json

@@ -6,7 +6,8 @@
     "useIndexRouting": true
   },
   "components": {
-    "dir": "components"
+    "dir": "components", 
+    "autoGenerate": false
   },
   "data": {
     "allow": "all",

package/fast.ejs.schema.json

@@ -34,6 +34,11 @@
           "default": "components",
           "description": "The folder containing your EJS components",
           "type": "string"
+        },
+        "autoGenerate": {
+          "default": false,
+          "description": "Automatically generate missing components when they are referenced",
+          "type": "boolean"
         }
       },
       "required": ["dir"],
@@ -43,7 +48,7 @@
       "properties": {
         "dir": {
           "default": "data",
-          "description": "The folder containing global and local data files (global.data.js/json, local.data.js/json)",
+          "description": "The folder containing global and local data files (global.js/json, local.js/json, route.js/json)",
           "type": "string"
         },
         "allow": {
@@ -56,7 +61,6 @@
       "required": ["dir"],
       "additionalProperties": false
     },
-
     "pages": {
       "properties": {
         "dir": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fast-ejs-builder",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Fast-EJS is a simple and fast tool to pre-render EJS templates into static HTML files with clean conventions and flexible data handling.",
   "keywords": [
     "tailwind",
@@ -27,10 +27,6 @@
   "bin": {
     "fast-ejs": "bin/index.js"
   },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "nodemon index.js"
-  },
   "dependencies": {
     "@inquirer/prompts": "^8.2.0",
     "autoprefixer": "^10.4.23",
@@ -40,5 +36,9 @@
     "postcss": "^8.5.6",
     "prettier": "^3.8.0",
     "tailwindcss": "^3.4.17"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "nodemon index.js"
   }
-}
+}

package/src/build-dev.js

@@ -1,7 +1,7 @@
 const { args, _d, _p } = require("../core");
 const ejsbuild = require("../src/build");
 const nodemon = require("nodemon");
-const { config, getConfig } = require("../core/lib");
+const { config, getConfig, getConfigFile } = require("../core/lib");
 
 async function ejsbuild_dev() {
   await getConfig();
@@ -10,7 +10,9 @@ async function ejsbuild_dev() {
     config.pages.dir,
     config.components.dir,
     config.data.dir,
+    getConfigFile(),
     ".env",
+    "tailwind.config.js",
   ];
 
   _d("Watching :", toWatch.map((d) => `'${d}'`).join(", "));

package/src/build.js

@@ -18,6 +18,7 @@ const {
   _w,
   _ds,
   _cp,
+  _v,
 } = require("../core");
 const {
   getConfig,
@@ -40,7 +41,7 @@ async function ejsbuild(code = 0) {
   const start = new Date();
 
   generateBaseDirs();
-  const { globalData, localData } = await getDatas();
+  const { globalData, localData, routeData } = await getDatas();
 
   /** @param {File } file */
   function getOutputName(file) {
@@ -61,6 +62,13 @@ async function ejsbuild(code = 0) {
     return { normalized, original };
   }
 
+  const params_regex = /\$([a-zA-Z_]\w*)\b/g;
+  function fillParams(s = "", p = {}) {
+    return s.replace(params_regex, (_, key) => {
+      return p[key] ?? `$${key}`;
+    });
+  }
+
   // generate tailwind file only if detected any view
   if (
     _tree(config.pages.dir).filter((f) => !f.isDir && f.ext == "ejs").length > 0
@@ -74,7 +82,7 @@ async function ejsbuild(code = 0) {
   const built = [];
 
   /** @param {File } file */
-  async function writeFile(file) {
+  async function writeFile(file, templatePath, templateData) {
     const outputName = getOutputName(file);
     const hasConflict = !!allOutputNames.find(
       (f) => f.original == outputName.normalized,
@@ -91,16 +99,57 @@ async function ejsbuild(code = 0) {
       return;
     }
     output += ".html";
+    const routeParams = outputName.original.match(params_regex) ?? [];
+
+    const hasParams = routeParams.length > 0;
+
+    const local =
+      localData[outputName.original] ?? localData[`/${outputName.original}`];
+
+    if (hasParams) {
+      const routes = await _v(
+        routeData[outputName.original] ?? routeData[`/${outputName.original}`],
+      );
+      if (typeof routes == "object") {
+        const params = Array.isArray(routes) ? routes : [routes];
+        for (let p of params) {
+          const fill = (s) => fillParams(s, p);
+          const pf = {
+            name: fill(file.name),
+            fullpath: fill(file.fullpath),
+            path: fill(file.path),
+            isDir: file.isDir,
+            ext: file.ext,
+          };
+
+          const notFoundParams = [
+            ...(pf.fullpath.matchAll(params_regex) ?? []),
+          ].map((m) => m[1]);
+          if (notFoundParams.length > 0) {
+            _d(
+              `\x1b[31m${notFoundParams.map((p) => `'${p}'`).join(", ")} not found for route '${outputName.original}'`,
+            );
+            continue;
+          }
+
+          writeFile(pf, file.fullpath, await _v(local, p));
+        }
+      }
+
+      return;
+    }
+
     try {
       const data = {
         ...globalData,
-        ...(localData[outputName.original] ?? {}),
+        ...((await _v(local, {})) ?? {}),
+        ...(templateData ?? {}),
       };
 
       const getComponent = (component, ...args) => {
         if (!component.endsWith(".ejs")) component += ".ejs";
         const content = _r(`${config.components.dir}/${component}`, false);
-        if (!content) throw new Error("Component not found.");
+        if (content == null) throw new Error("Component not found.");
         const component_data = {};
         for (let i in args) {
           component_data[`$${i}`] = args[i];
@@ -108,6 +157,18 @@ async function ejsbuild(code = 0) {
 
         return { content, component_data };
       };
+
+      const handleComponentError = (component, error) => {
+        if (config.components.autoGenerate) {
+          _md(config.components.dir + `/${component}`, false);
+          _w(config.components.dir + `/${component}.ejs`, "", false);
+          _ds(`Missing component '${component}' generated.`);
+        } else {
+          _d(`\x1b[31mFailed to build component '${component}'`);
+          console.log("\x1b[31m", error.message, "\x1b[0m");
+        }
+      };
+
       // NOTE - Reserved keywords
       const context = (d = {}) =>
         new Proxy(d, {
@@ -134,8 +195,7 @@ async function ejsbuild(code = 0) {
             );
             return comp_render;
           } catch (error) {
-            _d(`\x1b[31mFailed to build component '${component}'`);
-            console.log("\x1b[31m", error.message, "\x1b[0m");
+            handleComponentError(component, error);
           }
         },
         $async: async (component, ...args) => {
@@ -155,8 +215,7 @@ async function ejsbuild(code = 0) {
             );
             return comp_render;
           } catch (error) {
-            _d(`\x1b[31mFailed to build component '${component}'`);
-            console.log("\x1b[31m", error.message, "\x1b[0m");
+            handleComponentError(component, error);
           }
         },
         $env: (k) => process.env[k],
@@ -187,8 +246,9 @@ async function ejsbuild(code = 0) {
           return new Date();
         },
       };
+      // const fileContent = _r(file.fullpath, false);
       const out = await ejs.renderFile(
-        file.fullpath,
+        templatePath ?? file.fullpath,
         context({
           ...data,
           ...defaultData,

package/src/tailwind.js

@@ -3,7 +3,7 @@ const path = require("path");
 const postcss = require("postcss");
 const tailwindcss = require("tailwindcss");
 const autoprefixer = require("autoprefixer");
-const { _p, _e, _w, _js, _ce } = require("../core");
+const { _p, _e, _w, _js, _ce, _r } = require("../core");
 const { config, configTailwindOutput } = require("../core/lib");
 
 const twConfigPath = "tailwind.config.js";
@@ -41,6 +41,24 @@ function mergeTailwindConfig(base, user) {
   };
 }
 
+function extractLayers(path) {
+  const css = _r(path, false);
+  if (!css) return {};
+  const regex = /@layer\s+([a-zA-Z0-9_-]+)\s*\{([\s\S]*?\})\s*\}/g;
+  const result = {};
+  let match;
+
+  while ((match = regex.exec(css)) !== null) {
+    const name = match[1];
+    const content = match[2].trim();
+
+    result[name] ??= [];
+    result[name].push(content);
+  }
+
+  return result;
+}
+
 async function buildTailwind() {
   const inputCss = path.join(__dirname, "../templates/tailwind.css");
   const outputCss = configTailwindOutput();
@@ -83,13 +101,34 @@ module.exports = ${_js(baseConfig)};
   let css = fs.readFileSync(inputCss, "utf8");
   const tailwindOutput = path.dirname(configTailwindOutput());
   let imported = "";
+  const layers = {};
   for (let style of config.tailwind.imports) {
+    const uri_regex = /^https?:\/\/[^\s/$.?#].[^\s]*$/i;
+    if (uri_regex.test(style)) {
+      imported += `@import "${style}";\n`;
+      continue;
+    }
     const style_path = _p(`${config.build.output}/${style}`);
     const relative_path = path.relative(tailwindOutput, style_path);
     imported += `@import "./${relative_path}";\n`;
+
+    const lay = extractLayers(`${config.pages.dir}/${style}`);
+    for (let k in lay) {
+      layers[k] ??= "";
+      layers[k] += `${lay[k]}\n`;
+    }
   }
+
   css = `${imported}\n${css}`;
 
+  for (let k in layers) {
+    css += `
+@layer ${k} {
+    ${layers[k]?.trim()}
+}
+`;
+  }
+
   const result = await postcss([
     tailwindcss(finalConfig),
     autoprefixer(),