fakelab 0.0.6 → 0.0.8

package/README.md

@@ -37,7 +37,7 @@ Fakelab allows you to control generated mock data using JSDoc tags.
 You simply annotate your TypeScript interfaces with the @faker tag, and Fakelab uses the corresponding [faker](https://fakerjs.dev/)
 method when generating mock values.
 
-interfaces folder:
+`/interfaces/user.ts`:
 
 ```typescript
 export interface User {

package/lib/cli.js

@@ -1 +1,2 @@
-import {Command}from'commander';import w from'express';import q from'cors';import F from'path';import {fileURLToPath}from'url';import {bundleRequire}from'bundle-require';import O from'joycon';import'fast-glob';import I from'fs-extra';import'fs/promises';import u from'picocolors';import $ from'express-ejs-layouts';import B from'http';import'ejs';import U from'qs';import h from'zod';import {Project}from'ts-morph';import {v4}from'uuid';import J from'figlet';var c=class t{static prefix(e){let r=new Date().toLocaleTimeString();return {info:u.blue,warn:u.yellow,error:u.red,success:u.green,debug:u.magenta}[e](`[${r}] FAKELAB_${e.toUpperCase()}`)}static log(e,r,...s){let o=u.white,n=t.prefix(e);(e==="error"?console.error:e==="warn"?console.warn:console.log)(n,o(r),...s);}static info(e,...r){this.log("info",e,...r);}static warn(e,...r){this.log("warn",e,...r);}static error(e,...r){this.log("error",e,...r);}static success(e,...r){this.log("success",e,...r);}};async function k(){try{let e=await new O().resolve({files:["fakelab.config.ts"]});return e||(c.error("No fakelab config file is detected."),process.exit(1)),(await bundleRequire({filepath:e})).mod.default}catch{c.error("Could not load the config file."),process.exit(1);}}var g=class{constructor(e){this.faker=e;}JSDOC_FAKER_FIELD="faker";FAKER_TAG_REGEX=/^([a-zA-Z0-9._]+)(?:\((.*)\))?$/;boolMapping={true:true,false:false};string(e){return this.execute(e,this.faker.word.noun)}int(e){return this.execute(e,this.faker.number.int)}bool(e){return this.execute(e,this.faker.datatype.boolean)}bigInt(e){return this.execute(e,this.faker.number.bigInt)}litbool(e){return this.boolMapping[e]}async object(e,r){let s={};return await Promise.all(e.map(async o=>{let n=o.getTypeAtLocation(o.getValueDeclarationOrThrow());s[o.getName()]=await r(n,this,this.readJSDocTags(o));})),s}async union(e){let r=await Promise.all(e);return r[Math.floor(Math.random()*r.length)]}async intersection(e){let r=await Promise.all(e);return r[Math.floor(Math.random()*r.length)]}evalArgs(e){if(!(!e||!e.trim()))return Function(`"use strict"; return (${e});`)()}readJSDocTags(e){let r=e.getJsDocTags().filter(s=>s.getName()===this.JSDOC_FAKER_FIELD);return r.length===0?[]:r.map(s=>{let[o]=s.getText();if(!o)return;let n=o.text.trim().match(this.FAKER_TAG_REGEX);if(!n)return;let[,i,a]=n,f=this.evalArgs(a);return {path:i,args:f}})}execute(e,r){if(!e)return r();let s=e.path.split("."),o=this.faker;for(let n of s)o=o[n],o||(c.error("Invalid faker module path:",e.path),process.exit(1));typeof o!="function"&&(c.error("Unresolvable faker function.",e.path),process.exit(1));try{return e.args?o(e.args):o()}catch{return c.error("Passed invalid arguments to faker function."),o()}}};var d=class{constructor(e){this.files=e;let s=new Project({tsConfigFilePath:"tsconfig.json"}).addSourceFilesAtPaths(e);this.__targets=s.flatMap(o=>o.getInterfaces());}__targets;async run(e){return await e()}entities(){return new Map(this.__targets.map(e=>[e.getName().toLowerCase(),e.getType()]))}async loadFaker(e){let{faker:r}=await import(`@faker-js/faker/locale/${e.locale}`);return r}};async function p(t,e,r=[],s=0){if(t.isString())return e.string(r[s]);if(t.isNumber())return e.int(r[s]);if(t.isBoolean())return e.bool(r[s]);if(t.isBigInt())return e.bigInt(r[s]);if(t.isBooleanLiteral())return e.litbool(t.getText());if(t.isLiteral())return t.getLiteralValue();if(!t.isUndefined()){if(t.isUnion()){let o=t.getUnionTypes();return await e.union(o.map((n,i)=>p(n,e,r,i)))}if(t.isIntersection()){let o=t.getIntersectionTypes();return await e.intersection(o.map((n,i)=>p(n,e,r,i)))}if(t.isArray()){let o=t.getArrayElementTypeOrThrow();return [await p(o,e,r,s)]}if(t.isObject()){let o=t.getProperties();return await e.object(o,(n,i,a)=>p(n,i,a,s))}return null}}function _({each:t}){return {resolve:async r=>await Promise.all(Array.from({length:r},(s,o)=>t(o)))}}function R(t,e){return t==="uuid"?v4():e+1}function j(t,e,r){return async s=>{let o=await p(t,e);return r.uid&&typeof o=="object"?{[r.uid]:R(r.s,s),...o}:o}}async function x(t){let e=new d(t.files),r=await e.loadFaker(t.fakerOptions),s=new g(r),o=e.entities();async function n(i,a){let f=_({each:j(i,s,a)}),l=await(a.count?f.resolve(parseInt(a.count)):p(i,s)),m=JSON.stringify(l,null,2);return {data:l,json:m}}return {entities:o,forge:n}}var N=fileURLToPath(import.meta.url),G=F.dirname(N),T=I.readJSONSync(F.join(G,"../package.json")),y=class{constructor(e,r){this.router=e;this.config=r;this.prefix=this.config.serverOptions.pathPrefix;}prefix;get querySchema(){return h.object({count:h.string().optional(),uid:h.string().optional(),s:h.string().optional()})}async handleQueries(e){let{success:r,data:s,error:o}=await this.querySchema.safeParseAsync(e.query);return r?s:(c.warn(o.message),{})}async register(){let{entities:e,forge:r}=await x(this.config);this.router.get("/",(s,o)=>{let n=s.path;o.render("index",{currentPath:n,entities:e,version:T.version});}),this.router.get("/:name",async(s,o)=>{let n=`${s.protocol}://${s.host}/`,i=s.path,a=s.params.name,f=await this.handleQueries(s),l=U.stringify(f,{addQueryPrefix:true}),m=e.get(a.toLowerCase());if(m){let{json:P}=await r(m,f);o.render("preview",{name:a,currentPath:i,address:n,search:l,json:P,entities:e,version:T.version,prefix:this.prefix});}else o.redirect("/");}),this.router.get(`/${this.prefix}/:name`,async(s,o)=>{try{let n=s.params.name,i=await this.handleQueries(s),a=e.get(n.toLowerCase());if(a){let{data:f}=await r(a,i);o.status(200).json(f);}else o.status(400).json({message:"The requested interface is not found"});}catch(n){o.status(500).send(n);}});}};var K=fileURLToPath(import.meta.url),E=F.dirname(K);function X(t,e){let r=e.serverOptions.port;t.listen(r,"localhost",async()=>{c.info(`Server: http://localhost:${r}`),console.log(await J.text("FAKELAB"));});}function z(t,e,r){e.setHeader("x-powered-by","fakelab"),r();}function Q(t){t.disable("x-powered-by"),t.use(w.json()),t.use(q({methods:"GET"})),t.use(w.static(E+"/public")),t.use(z);}function V(t){t.set("views",F.join(E,"views")),t.set("view engine","ejs"),t.use($),t.set("layout","layouts/main");}async function L(t){let e=w(),r=w.Router(),s=B.createServer(e);Q(e),V(e),await new y(r,t).register(),e.use(r),X(s,t);}var v=new Command;v.name("falekab").description("CLI to generate mock data").version("0.0.0");v.command("serve").description("start server").action(async()=>{let t=await k();L(t);});v.parse();
+import P from'path';import {fileURLToPath}from'url';import $ from'fs-extra';import l from'zod';import {Command}from'commander';import k from'express';import M from'cors';import K from'express-ejs-layouts';import q from'http';import'ejs';import G from'qs';import {Project}from'ts-morph';import {v4}from'uuid';import u from'picocolors';import Q from'figlet';import {bundleRequire}from'bundle-require';import ee from'joycon';var a=class t{static prefix(e){let r=new Date().toLocaleTimeString();return {info:u.blue,warn:u.yellow,error:u.red,success:u.green,debug:u.magenta}[e](`[${r}] FAKELAB_${e.toUpperCase()}`)}static log(e,r,...n){let o=u.white,s=t.prefix(e);(e==="error"?console.error:e==="warn"?console.warn:console.log)(s,o(r),...n);}static info(e,...r){this.log("info",e,...r);}static warn(e,...r){this.log("warn",e,...r);}static error(e,...r){this.log("error",e,...r);}static success(e,...r){this.log("success",e,...r);}};var d=class{constructor(e){this.faker=e;}JSDOC_FAKER_FIELD="faker";FAKER_TAG_REGEX=/^([a-zA-Z0-9._]+)(?:\((.*)\))?$/;boolMapping={true:true,false:false};string(e){return this.execute(e,this.faker.word.noun)}int(e){return this.execute(e,this.faker.number.int)}bool(e){return this.execute(e,this.faker.datatype.boolean)}bigInt(e){return this.execute(e,this.faker.number.bigInt)}litbool(e){return this.boolMapping[e]}async object(e,r){let n={};return await Promise.all(e.map(async o=>{let s=o.getTypeAtLocation(o.getValueDeclarationOrThrow());n[o.getName()]=await r(s,this,this.readJSDocTags(o));})),n}async union(e){let r=await Promise.all(e);return r[Math.floor(Math.random()*r.length)]}async intersection(e){let r=await Promise.all(e);return r[Math.floor(Math.random()*r.length)]}evalArgs(e){if(!(!e||!e.trim()))return Function(`"use strict"; return (${e});`)()}readJSDocTags(e){let r=e.getJsDocTags().filter(n=>n.getName()===this.JSDOC_FAKER_FIELD);return r.length===0?[]:r.map(n=>{let[o]=n.getText();if(!o)return;let s=o.text.trim().match(this.FAKER_TAG_REGEX);if(!s)return;let[,i,c]=s,p=this.evalArgs(c);return {path:i,args:p}})}execute(e,r){if(!e)return r();let n=e.path.split("."),o=this.faker;for(let s of n)o=o[s],o||(a.error("Invalid faker module path:",e.path),process.exit(1));typeof o!="function"&&(a.error("Unresolvable faker function.",e.path),process.exit(1));try{return e.args?o(e.args):o()}catch{return a.error("Passed invalid arguments to faker function."),o()}}};var y=class{constructor(e){this.files=e;let n=new Project({tsConfigFilePath:"tsconfig.json"}).addSourceFilesAtPaths(e);this.__targets=n.flatMap(o=>o.getInterfaces());}__targets;async run(e){return await e()}normalizePath(e){return e.split(P.sep).join(P.posix.sep)}entities(){let e=this.__targets.map(r=>{let n=r.getName().toLowerCase(),o=r.getType(),s=this.normalizePath(process.cwd()),c=this.normalizePath(r.getSourceFile().getDirectoryPath()).replace(s,""),p=r.getSourceFile().getBaseName(),f=`${c}/${p}`;return [n,{type:o,filepath:f}]});return new Map(e)}async loadFaker(e,r){let{faker:n}=await import(`@faker-js/faker/locale/${r||e.locale}`);return n}};async function m(t,e,r=[],n=0){if(t.isString())return e.string(r[n]);if(t.isNumber())return e.int(r[n]);if(t.isBoolean())return e.bool(r[n]);if(t.isBigInt())return e.bigInt(r[n]);if(t.isBooleanLiteral())return e.litbool(t.getText());if(t.isLiteral())return t.getLiteralValue();if(!t.isUndefined()){if(t.isUnion()){let o=t.getUnionTypes();return await e.union(o.map((s,i)=>m(s,e,r,i)))}if(t.isIntersection()){let o=t.getIntersectionTypes();return await e.intersection(o.map((s,i)=>m(s,e,r,i)))}if(t.isArray()){let o=t.getArrayElementTypeOrThrow();return [await m(o,e,r,n)]}if(t.isObject()){let o=t.getProperties();return await e.object(o,(s,i,c)=>m(s,i,c,n))}return null}}function R({each:t}){return {resolve:async r=>await Promise.all(Array.from({length:r},(n,o)=>t(o)))}}function D(t,e){return t==="uuid"?v4():e+1}function N(t,e,r){return async n=>{let o=await m(t,e);return r.uid&&typeof o=="object"?{[r.uid]:D(r.s,n),...o}:o}}async function L(t,e){let r=await t.files(e.source),n=new y(r),o=await n.loadFaker(t.fakerOpts(e.locale)),s=new d(o),i=n.entities();async function c(p,f){let g=R({each:N(p,s,f)}),h=await(f.count?g.resolve(parseInt(f.count)):m(p,s)),x=JSON.stringify(h,null,2);return {data:h,json:x}}return {entities:i,forge:c}}var B=fileURLToPath(import.meta.url),J=P.dirname(B),F=$.readJSONSync(P.join(J,"../package.json")),v=class{constructor(e,r,n){this.router=e;this.config=r;this.opts=n;let{pathPrefix:o}=this.config.serverOpts(this.opts.pathPrefix);this.prefix=o;}prefix;get querySchema(){return l.object({count:l.string().optional(),uid:l.string().optional(),strategy:l.string().optional()})}async handleQueries(e){let{success:r,data:n,error:o}=await this.querySchema.safeParseAsync(e.query);return r?n:(a.warn(o.message),{})}async register(){let{entities:e,forge:r}=await L(this.config,this.opts);this.router.get("/",(n,o)=>{let s=n.path;o.render("index",{currentPath:s,entities:e,version:F.version});}),this.router.get("/:name",async(n,o)=>{let s=`${n.protocol}://${n.host}/`,i=n.path,c=n.params.name,p=await this.handleQueries(n),f=G.stringify(p,{addQueryPrefix:true}),g=e.get(c.toLowerCase());if(g){let{json:h}=await r(g.type,p),x=g.filepath;o.render("preview",{name:c,filepath:x,currentPath:i,address:s,search:f,json:h,entities:e,version:F.version,prefix:this.prefix});}else o.redirect("/");}),this.router.get(`/${this.prefix}/:name`,async(n,o)=>{try{let s=n.params.name,i=await this.handleQueries(n),c=e.get(s.toLowerCase());if(c){let{data:p}=await r(c.type,i);o.status(200).json(p);}else o.status(400).json({message:"The requested interface is not found"});}catch(s){o.status(500).send(s);}});}};var V=fileURLToPath(import.meta.url),C=P.dirname(V);function X(t,e,r){let{port:n}=e.serverOpts(r.pathPrefix,r.port);t.listen(n,"localhost",async()=>{a.info(`Server: http://localhost:${n}`),console.log(await Q.text("FAKELAB"));});}function H(t,e,r){e.setHeader("x-powered-by","fakelab"),r();}function Z(t){t.disable("x-powered-by"),t.use(k.json()),t.use(M({methods:"GET"})),t.use(k.static(C+"/public")),t.use(H);}function W(t){t.set("views",P.join(C,"views")),t.set("view engine","ejs"),t.use(K),t.set("layout","layouts/main");}async function _(t,e){let r=k(),n=k.Router(),o=q.createServer(r);Z(r),W(r),await new v(n,t,e).register(),r.use(n),X(o,t,e);}async function j(){try{let e=await new ee().resolve({files:["fakelab.config.ts"]});return e||(a.error("No fakelab config file is detected."),process.exit(1)),(await bundleRequire({filepath:e})).mod.default}catch{a.error("Could not load the config file."),process.exit(1);}}var T=new Command,ne=fileURLToPath(import.meta.url),se=P.dirname(ne),b=$.readJSONSync(P.join(se,"../package.json"));T.name(b.name).description(b.description).version(b.version);var ie=l.object({source:l.string().optional(),pathPrefix:l.string().optional(),port:l.number().int().optional(),locale:l.string().optional()});T.command("serve").description("start server").option("-s, --source <char>","config source path").option("-x, --pathPrefix <char>","server url path prefix").option("-p, --port <number>","server port number",parseInt).option("-l, --locale <char>","faker custom locale").action(async t=>{let e=await ie.safeParseAsync(t);e.error&&(a.error(l.treeifyError(e.error).errors.join(`
+`)),process.exit(1));let r=await j();_(r,e.data);});T.parse();

package/lib/main.d.ts

@@ -1,5 +1,3 @@
-type FakerLocale = "af" | "ar" | "az" | "bn" | "cs" | "cy" | "da" | "de" | "dv" | "el" | "en" | "eo" | "es" | "fa" | "fi" | "fr" | "he" | "hr" | "hu" | "hy" | "id" | "it" | "ja" | "ka" | "ko" | "ku" | "lv" | "mk" | "nb" | "ne" | "nl" | "pl" | "pt" | "ro";
-
 type ServerOptions = {
     /**
      * @default 5200
@@ -14,14 +12,29 @@ type FakerEngineOptions = {
     locale?: FakerLocale;
 };
 type ConfigOptions = {
-    sourcePath: string;
+    sourcePath: string | string[];
     server?: ServerOptions;
     faker?: FakerEngineOptions;
 };
-declare function defineConfig(options: ConfigOptions): Promise<{
+type UserConfig = {
     files: string[];
     serverOptions: Required<ServerOptions>;
     fakerOptions: Required<FakerEngineOptions>;
-}>;
+};
+type FakerLocale = "af" | "ar" | "az" | "bn" | "cs" | "cy" | "da" | "de" | "dv" | "el" | "en" | "eo" | "es" | "fa" | "fi" | "fr" | "he" | "hr" | "hu" | "hy" | "id" | "it" | "ja" | "ka" | "ko" | "ku" | "lv" | "mk" | "nb" | "ne" | "nl" | "pl" | "pt" | "ro";
+
+declare class Config {
+    private readonly opts;
+    constructor(opts: ConfigOptions);
+    files(_sourcePath?: string): Promise<string[]>;
+    serverOpts(prefix?: string, port?: number): Required<ServerOptions>;
+    fakerOpts(locale?: FakerLocale): Required<FakerEngineOptions>;
+    private tryStat;
+    private isReadable;
+    private resolveSourcePath;
+    private resolveTSFiles;
+}
+
+declare function defineConfig(options: ConfigOptions): Config;
 
-export { defineConfig };
+export { type UserConfig, defineConfig };

package/lib/main.js

@@ -1 +1,3 @@
-import'bundle-require';import'joycon';import u from'fast-glob';import g from'fs-extra';import p from'path';import {stat,access,constants}from'fs/promises';import i from'picocolors';var s=class{static PREFIX="api";static PORT=5200;static DEFAULT_LOCALE="en";static locale(){let e=Intl.DateTimeFormat().resolvedOptions().locale;if(!e)return this.DEFAULT_LOCALE;let[t]=e.split("-");return t.toLowerCase()}};var o=class r{static prefix(e){let t=new Date().toLocaleTimeString();return {info:i.blue,warn:i.yellow,error:i.red,success:i.green,debug:i.magenta}[e](`[${t}] FAKELAB_${e.toUpperCase()}`)}static log(e,t,...n){let a=i.white,l=r.prefix(e);(e==="error"?console.error:e==="warn"?console.warn:console.log)(l,a(t),...n);}static info(e,...t){this.log("info",e,...t);}static warn(e,...t){this.log("warn",e,...t);}static error(e,...t){this.log("error",e,...t);}static success(e,...t){this.log("success",e,...t);}};var f=".ts";async function w(r){if(r.endsWith(f))return r;let e=r+f;return await g.exists(e)?e:null}async function h(r){return await u("**/*.ts",{cwd:r,absolute:true,ignore:["**/*.d.ts"]})}async function y(r){let e=await w(r);try{if(e&&(await stat(e)).isFile()){if(await v(e))return o.info("Source:",e),[e];o.info("Could not access to the provided file path %s",p),process.exit(1);}}catch{o.error("The provided source path does not exists."),process.exit(1);}try{if((await stat(r)).isDirectory())return o.info("Source:",r),await h(r)}catch{o.error("The provided source path does not exists."),process.exit(1);}o.error("The provided source path does not exists."),process.exit(1);}async function x(r){let e=p.resolve(r.sourcePath),t=await y(e);t.length===0&&(o.error("No Typescript files found in %s",e),process.exit(1));let n={pathPrefix:r.server?.pathPrefix||s.PREFIX,port:r.server?.port||s.PORT},a={locale:r.faker?.locale||s.locale()};return {files:t,serverOptions:n,fakerOptions:a}}async function v(r){try{return await access(r,constants.R_OK),!0}catch{return  false}}export{x as defineConfig};
+import g from'fast-glob';import l from'path';import {stat,access,constants}from'fs/promises';import i from'picocolors';var s=class o{static prefix(t){let r=new Date().toLocaleTimeString();return {info:i.blue,warn:i.yellow,error:i.red,success:i.green,debug:i.magenta}[t](`[${r}] FAKELAB_${t.toUpperCase()}`)}static log(t,r,...e){let n=i.white,c=o.prefix(t);(t==="error"?console.error:t==="warn"?console.warn:console.log)(c,n(r),...e);}static info(t,...r){this.log("info",t,...r);}static warn(t,...r){this.log("warn",t,...r);}static error(t,...r){this.log("error",t,...r);}static success(t,...r){this.log("success",t,...r);}};function p(){let o=Intl.DateTimeFormat().resolvedOptions().locale;if(!o)return "en";let[t]=o.split("-");return t.toLowerCase()}var a=class{constructor(t){this.opts=t;this.files=this.files.bind(this),this.serverOpts=this.serverOpts.bind(this),this.fakerOpts=this.fakerOpts.bind(this);}async files(t){let r=this.resolveSourcePath(t||this.opts.sourcePath),e=Array.from(new Set((await Promise.all(r.map(n=>this.resolveTSFiles(n)))).flat()));return e.length===0&&(s.error(`No Typescript files found in:
+%s`,r.join(`
+`)),process.exit(1)),e}serverOpts(t,r){return {pathPrefix:t||this.opts.server?.pathPrefix||"api",port:r||this.opts.server?.port||5200}}fakerOpts(t){return {locale:t||this.opts.faker?.locale||p()}}async tryStat(t){try{return await stat(t)}catch{return null}}async isReadable(t){try{return await access(t,constants.R_OK),!0}catch{return  false}}resolveSourcePath(t){return (Array.isArray(t)?t:[t]).map(e=>l.resolve(e))}async resolveTSFiles(t){let r=l.resolve(t),e=r.endsWith(".ts")?r:r+".ts";if((await this.tryStat(e))?.isFile()){if(!await this.isReadable(e))throw new Error(`Cannot read file: ${e}`);return s.info("Source:",e),[e]}if((await this.tryStat(r))?.isDirectory())return s.info("Source:",r),g("**/*.ts",{cwd:r,absolute:true,ignore:["**/*.d.ts"]});s.error(`Invalid source path: ${t}`),process.exit(1);}};function w(o){return new a(o)}export{w as defineConfig};

package/lib/public/css/style.css

@@ -115,22 +115,46 @@ pre {
   padding: 12px 8px;
   border-radius: 4px;
   cursor: pointer;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  align-items: center;
+  text-decoration: none;
+  &:hover > .item_name {
+    color: oklch(98.5% 0.002 247.85);
+  }
+  &:hover > .item_filepath {
+    color: oklch(98.463% 0.00181 249.248 / 0.8);
+  }
+}
+
+.sidebar_content_list_item .item_name {
   transition: all 250ms ease-in-out;
   color: oklch(98.463% 0.00181 249.248 / 0.726);
-  text-decoration: none;
+  user-select: none;
   font-size: 14px;
-  &:hover {
-    color: oklch(98.5% 0.002 247.839);
-  }
+}
 
-  > span {
-    user-select: none;
-  }
+.sidebar_content_list_item .item_filepath {
+  transition: all 250ms ease-in-out;
+  white-space: nowrap;
+  line-clamp: 1;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: oklch(98.463% 0.00181 249.248 / 0.6);
+  font-style: italic;
 }
 
 .sidebar_content_list_item.active {
-  color: oklch(98.5% 0.002 247.839);
   background-color: oklch(37.306% 0.03436 260.191 / 0.26);
+
+  > .item_name {
+    color: oklch(98.5% 0.002 247.85);
+  }
+
+  > .item_filepath {
+    color: oklch(98.463% 0.00181 249.248 / 0.8);
+  }
 }
 
 .sidebar_content_leading .sidebar_content_title {
@@ -180,7 +204,13 @@ pre {
 
 .header .interface_name {
   font-size: 16px;
-  color: oklch(98.463% 0.00181 249.248 / 0.61);
+  color: oklch(98.463% 0.00181 249.248 / 0.8);
+}
+
+.interface_name .interface_source_filepath {
+  font-size: 12px;
+  color: oklch(98.463% 0.00181 249.248 / 0.6);
+  font-style: italic;
 }
 
 .preview {

package/lib/public/js/fakelab.min.js

@@ -1,12 +1,32 @@
-let address_url = document.querySelector(".address_url");
-async function copy() {
+function copyAddressUrl() {
+  var e = document.getElementById("request_address_url");
   try {
-    await navigator.clipboard.writeText(address_url.textContent);
+    navigator.clipboard.writeText(e.textContent);
   } catch (e) {
     console.info(e);
   }
 }
-function open_settings() {
+function copyJsonCode() {
+  var e = document.getElementById("source_code");
+  try {
+    navigator.clipboard.writeText(e.textContent);
+  } catch (e) {
+    console.info(e);
+  }
+}
+function downloadJsonCode(e) {
+  var t = document.getElementById("source_code").textContent.trim(),
+    t = new Blob([t], { type: "application/json" });
+  let n = URL.createObjectURL(t);
+  var t = e.getAttribute("data-source-name"),
+    d = new Date().toISOString().replace(/[:.]/g, "-");
+  (e.download = t + `-${d}.json`),
+    (e.href = n),
+    setTimeout(() => {
+      URL.revokeObjectURL(n), (e.download = ""), (e.href = "");
+    });
+}
+function openSettings() {
   document.getElementById("setting_overlay").setAttribute("data-visible", "true");
 }
 function handleCloseSetting(e) {
@@ -19,29 +39,29 @@ function submitForm(e) {
     e = new FormData(e.target),
     n = e.get("count")?.trim(),
     e = e.get("unique_id_key")?.trim(),
-    i = new URLSearchParams(),
-    d = document.getElementById("unique_id"),
-    o = document.getElementById("unique_id_strategy"),
+    d = new URLSearchParams(),
+    o = document.getElementById("unique_id"),
+    i = document.getElementById("unique_id_strategy"),
     n =
-      (n && 0 < Number(n) ? (Number(n), i.set("count", n.toString()), (window.location.search = i.toString())) : (i.delete("count"), t.add("count")),
-      d.checked || (i.delete("uid"), t.add("uid")),
-      e && d.checked ? (i.set("uid", e), o.checked && i.set("s", "uuid"), (window.location.search = i.toString())) : (i.delete("uid"), i.delete("s"), t.add("uid")),
+      (n && 0 < Number(n) ? (Number(n), d.set("count", n.toString()), (window.location.search = d.toString())) : (d.delete("count"), t.add("count")),
+      o.checked || (d.delete("uid"), t.add("uid")),
+      e && o.checked ? (d.set("uid", e), i.checked && d.set("strategy", "uuid"), (window.location.search = d.toString())) : (d.delete("uid"), d.delete("strategy"), t.add("uid")),
       t.has("uid")),
-    d = t.has("count");
-  d && n
+    o = t.has("count");
+  o && n
     ? window.location.href.includes("?") && (([href] = window.location.href.split("?")), (window.location.href = href))
-    : ((d && !n) || (!d && n)) && (window.location.search = i.toString());
+    : ((o && !n) || (!o && n)) && (window.location.search = d.toString());
 }
 function resetForm(e) {
   e.preventDefault();
   e = new URLSearchParams(window.location.search);
-  e.delete("count"), e.delete("uid"), e.delete("s"), window.location.href.includes("?") && (window.location.href = window.location.href.split("?")[0]);
+  e.delete("count"), e.delete("uid"), e.delete("strategy"), window.location.href.includes("?") && (window.location.href = window.location.href.split("?")[0]);
 }
 function onChangeGenerateUniqueId(e) {
   var t = document.getElementById("unique_id"),
     n = document.getElementById("unique_id_key_field"),
-    i = document.getElementById("unique_strategy_container");
-  (t.checked = !t.checked), n.setAttribute("data-visible", t.checked.toString()), i.setAttribute("data-visible", t.checked.toString());
+    d = document.getElementById("unique_strategy_container");
+  (t.checked = !t.checked), n.setAttribute("data-visible", t.checked.toString()), d.setAttribute("data-visible", t.checked.toString());
 }
 function onHandleUniqueIdStrategy(e) {
   var t = document.getElementById("unique_id_strategy");
@@ -52,11 +72,11 @@ window.addEventListener("click", handleCloseSetting),
     var e = document.getElementById("count"),
       t = document.getElementById("unique_id"),
       n = document.getElementById("unique_id_strategy"),
-      i = document.getElementById("unique_id_key"),
-      d = document.getElementById("unique_id_key_field"),
-      o = document.getElementById("unique_strategy_container"),
+      d = document.getElementById("unique_id_key"),
+      o = document.getElementById("unique_id_key_field"),
+      i = document.getElementById("unique_strategy_container"),
       a = new URLSearchParams(window.location.search),
-      u = a.get("count"),
-      c = a.get("uid");
-    u && (e.value = u), c && ((t.checked = !0), (i.value = c), d.setAttribute("data-visible", "true"), o.setAttribute("data-visible", "true"), a.has("s")) && (n.checked = !0);
+      c = a.get("count"),
+      r = a.get("uid");
+    c && (e.value = c), r && ((t.checked = !0), (d.value = r), o.setAttribute("data-visible", "true"), i.setAttribute("data-visible", "true"), a.has("s")) && (n.checked = !0);
   });

package/lib/views/components/code.ejs

@@ -1 +1 @@
-<pre class="code loading"><code class="language-<%= lang %>"><%- code %></code></pre>
+<pre class="code loading"><code id="source_code" class="language-<%= lang %>"><%- code %></code></pre>

package/lib/views/components/sidebar.ejs

@@ -6,9 +6,10 @@
       <span class="sidebar_content_title">Found interfaces</span>
     </div>
     <div class="sidebar_content_list">
-      <% entities.forEach((_,name) => { %>
+      <% entities.forEach((entity,name) => { %>
       <a class="sidebar_content_list_item <%= currentPath === `/${name}` ? 'active' : '' %>" href="/<%= name %>">
-        <span><%= name %></span>
+        <span class="item_name"><%= name %></span>
+        <span class="item_filepath"><%= entity.filepath %></span>
       </a>
       <% }) %>
     </div>

package/lib/views/components/toolbar.ejs

@@ -0,0 +1,60 @@
+<div class="preview_toolbar loading">
+  <div class="toolbar_setting">
+    <div class="data_fetch_address">
+      <div class="address">
+        <span class="address_method">GET</span>
+        <span id="request_address_url" class="address_url"><%= address %><%= prefix %>/<%= name %><%= search %></span>
+      </div>
+      <img id="copy_btn" onclick="copyAddressUrl()" class="icon pointer_auto" src="/icons/copy.svg" width="16px" height="16px" />
+    </div>
+    <div id="overlay_trigger" class="toolbar_setting_option" onclick="openSettings()">
+      <img class="icon" src="/icons/settings.svg" width="18px" height="18px" />
+    </div>
+    <div id="setting_overlay" data-visible="false" class="toolbar_setting_overlay">
+      <span class="setting_title">Generator settings</span>
+      <form class="setting_form" onsubmit="submitForm(event)">
+        <div class="form_input">
+          <label for="count">Count</label>
+          <input id="count" autocomplete="off" name="count" type="text" />
+          <span>Set count field to generate array of data items.</span>
+        </div>
+        <div style="display: flex; flex-direction: column; gap: 8px">
+          <div class="form_input inline">
+            <label for="unique_id">Generate unique id</label>
+            <div class="switch" onclick="onChangeGenerateUniqueId()">
+              <input type="checkbox" id="unique_id" name="unique_id" />
+              <span class="slider"></span>
+            </div>
+          </div>
+          <div id="unique_id_key_field" class="form_input" data-visible="false">
+            <input id="unique_id_key" autocomplete="off" name="unique_id_key" type="text" value="_id" placeholder="unique id key" />
+          </div>
+          <div id="unique_strategy_container" class="unique_strategy" data-visible="false">
+            <span class="unique_id_hint">By default unique id is auto incremented integer.</span>
+            <div class="form_input inline">
+              <label for="unique_id_strategy">Generate as uuid</label>
+              <div class="switch" onclick="onHandleUniqueIdStrategy()">
+                <input type="checkbox" id="unique_id_strategy" name="unique_id_strategy" />
+                <span class="slider"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="form_buttons">
+          <button class="form_reset_btn" type="button" onclick="resetForm(event)">Reset</button>
+          <button class="form_apply_btn" type="submit">Apply</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <div class="toolbar_actions">
+    <div class="toolbar_action_item" onclick="copyJsonCode()">
+      <img class="icon" src="/icons/copy.svg" width="18px" height="18px" />
+    </div>
+    <div class="divider"></div>
+    <a class="toolbar_action_item" data-source-name="<%= name %>" onclick="downloadJsonCode(this)">
+      <img class="icon" src="/icons/download.svg" width="18px" height="18px" />
+    </a>
+  </div>
+</div>

package/lib/views/preview.ejs

@@ -7,195 +7,7 @@
     <div class="preview-loading loading">
       <span class="loader visible"></span><span class="error">Some libraries could not be loaded. check your internet connection and try again.</span>
     </div>
-    <div class="preview_toolbar loading">
-      <div class="toolbar_setting">
-        <div class="data_fetch_address">
-          <div class="address">
-            <span class="address_method">GET</span>
-            <span class="address_url"><%= address %><%= prefix %>/<%= name %><%= search %></span>
-          </div>
-          <img id="copy_btn" onclick="copy()" class="icon pointer_auto" src="/icons/copy.svg" width="16px" height="16px" />
-        </div>
-        <div id="overlay_trigger" class="toolbar_setting_option" onclick="open_settings()">
-          <img class="icon" src="/icons/settings.svg" width="18px" height="18px" />
-        </div>
-        <div id="setting_overlay" data-visible="false" class="toolbar_setting_overlay">
-          <span class="setting_title">Generator settings</span>
-          <form class="setting_form" onsubmit="submitForm(event)">
-            <div class="form_input">
-              <label for="count">Count</label>
-              <input id="count" autocomplete="off" name="count" type="text" />
-              <span>Set count field to generate array of data items.</span>
-            </div>
-            <div style="display: flex; flex-direction: column; gap: 8px">
-              <div class="form_input inline">
-                <label for="unique_id">Generate unique id</label>
-                <div class="switch" onclick="onChangeGenerateUniqueId()">
-                  <input type="checkbox" id="unique_id" name="unique_id" />
-                  <span class="slider"></span>
-                </div>
-              </div>
-              <div id="unique_id_key_field" class="form_input" data-visible="false">
-                <input id="unique_id_key" autocomplete="off" name="unique_id_key" type="text" value="_id" placeholder="unique id key" />
-              </div>
-              <div id="unique_strategy_container" class="unique_strategy" data-visible="false">
-                <span class="unique_id_hint">By default unique id is auto incremented integer.</span>
-                <div class="form_input inline">
-                  <label for="unique_id_strategy">Generate as uuid</label>
-                  <div class="switch" onclick="onHandleUniqueIdStrategy()">
-                    <input type="checkbox" id="unique_id_strategy" name="unique_id_strategy" />
-                    <span class="slider"></span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="form_buttons">
-              <button class="form_reset_btn" type="button" onclick="resetForm(event)">Reset</button>
-              <button class="form_apply_btn" type="submit">Apply</button>
-            </div>
-          </form>
-        </div>
-      </div>
-
-      <div class="toolbar_actions">
-        <div class="toolbar_action_item">
-          <img class="icon" src="/icons/copy.svg" width="18px" height="18px" />
-        </div>
-        <div class="divider"></div>
-        <div class="toolbar_action_item">
-          <img class="icon" src="/icons/download.svg" width="18px" height="18px" />
-        </div>
-      </div>
-    </div>
-    <%- include("components/code", { lang: "json", code: json }) %>
+    <%- include("components/toolbar", { address, prefix, name, search }) %> <%- include("components/code", { lang: "json", code: json }) %>
   </div>
 </main>
 <script src="/js/fakelab.min.js"></script>
-<!-- <script>
-  const address_url = document.querySelector(".address_url");
-
-  async function copy() {
-    try {
-      await navigator.clipboard.writeText(address_url.textContent);
-    } catch (err) {
-      console.info(err);
-    }
-  }
-
-  function open_settings() {
-    const element = document.getElementById("setting_overlay");
-    element.setAttribute("data-visible", "true");
-  }
-
-  function handleCloseSetting(event) {
-    const element = document.getElementById("setting_overlay");
-
-    if (!event.target) return;
-    if (!element.contains(event.target) && event.target.id !== "overlay_trigger") {
-      element.setAttribute("data-visible", "false");
-    }
-  }
-
-  window.addEventListener("click", handleCloseSetting);
-
-  window.addEventListener("DOMContentLoaded", () => {
-    const countEl = document.getElementById("count");
-    const uniqueIdEl = document.getElementById("unique_id");
-    const strategyEl = document.getElementById("unique_id_strategy");
-    const uniqueIdKeyEl = document.getElementById("unique_id_key");
-    const keyEl = document.getElementById("unique_id_key_field");
-    const strategyContainerEl = document.getElementById("unique_strategy_container");
-    const params = new URLSearchParams(window.location.search);
-    const countValue = params.get("count");
-    const uniqueIdValue = params.get("uid");
-    if (countValue) countEl.value = countValue;
-    if (uniqueIdValue) {
-      uniqueIdEl.checked = true;
-      uniqueIdKeyEl.value = uniqueIdValue;
-      keyEl.setAttribute("data-visible", "true");
-      strategyContainerEl.setAttribute("data-visible", "true");
-      if (params.has("s")) {
-        strategyEl.checked = true;
-      }
-    }
-  });
-
-  function submitForm(event) {
-    event.preventDefault();
-    const resetReasons = new Set();
-    const formData = new FormData(event.target);
-    const countValue = formData.get("count")?.trim();
-    const uniqueIdValue = formData.get("unique_id_key")?.trim();
-    const params = new URLSearchParams();
-
-    const switcher = document.getElementById("unique_id");
-    const strategySwitcher = document.getElementById("unique_id_strategy");
-
-    if (countValue && Number(countValue) > 0) {
-      const valueAsNumber = Number(countValue);
-
-      params.set("count", countValue.toString());
-      window.location.search = params.toString();
-    } else {
-      params.delete("count");
-      resetReasons.add("count");
-    }
-
-    if (!switcher.checked) {
-      params.delete("uid");
-      resetReasons.add("uid");
-    }
-
-    if (uniqueIdValue && switcher.checked) {
-      params.set("uid", uniqueIdValue);
-
-      if (strategySwitcher.checked) {
-        params.set("s", "uuid");
-      }
-
-      window.location.search = params.toString();
-    } else {
-      params.delete("uid");
-      params.delete("s");
-      resetReasons.add("uid");
-    }
-
-    const hasUidReason = resetReasons.has("uid");
-    const hasCountReason = resetReasons.has("count");
-
-    if (hasCountReason && hasUidReason) {
-      if (window.location.href.includes("?")) {
-        [href] = window.location.href.split("?");
-
-        window.location.href = href;
-      }
-    } else if ((hasCountReason && !hasUidReason) || (!hasCountReason && hasUidReason)) {
-      window.location.search = params.toString();
-    }
-  }
-
-  function resetForm(event) {
-    event.preventDefault();
-    const params = new URLSearchParams(window.location.search);
-    params.delete("count");
-    params.delete("uid");
-    params.delete("s");
-    if (window.location.href.includes("?")) {
-      window.location.href = window.location.href.split("?")[0];
-    }
-  }
-
-  function onChangeGenerateUniqueId(element) {
-    const switcher = document.getElementById("unique_id");
-    const key = document.getElementById("unique_id_key_field");
-    const strategy = document.getElementById("unique_strategy_container");
-    switcher.checked = !switcher.checked;
-    key.setAttribute("data-visible", switcher.checked.toString());
-    strategy.setAttribute("data-visible", switcher.checked.toString());
-  }
-
-  function onHandleUniqueIdStrategy(element) {
-    const strategy = document.getElementById("unique_id_strategy");
-    strategy.checked = !strategy.checked;
-  }
-</script> -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fakelab",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "license": "MIT",
   "description": "A easy-config mock server for frontend developers.",