docs: 📘 improve examples

ngneat · Sep 23, 2023 · e4272b5 · e4272b5
1 parent 91f70a7
commit e4272b5
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/docs-generator.js b/docs-generator.js
@@ -4,14 +4,26 @@ const path = require('path');
 const glob = require('glob');
 const { minify } = require("terser");
 
+function imageModifier(generator) {
+  // we chain the query param to trigger refetching of the image.
+  return '<img src={`${'+generator+'()}?${Math.random()}}`} alt="Random image"/>';
+}
+
+function stringModifier(generator) {
+  return `${generator}().toString()`;
+}
+
 const functionModifiers = {
+  randBoolean: stringModifier,
+  randFutureDate: stringModifier,
+  randPastDate: stringModifier,
+  randRecentDate: stringModifier,
+  randSoonDate: stringModifier,
+  randAvatar: imageModifier,
+  randImg: imageModifier,
+  randChanceBoolean: 'randChanceBoolean({chanceTrue: 0.78}).toString()',
   rand: 'rand([1,2,3])',
-  randBoolean: 'randBoolean().toString()',
-  randFutureDate: 'randFutureDate().toString()',
   randBetweenDate: 'randBetweenDate({ from: new Date(\'10/07/2020\'), to: new Date(\'10/07/2025\') }).toString()',
-  randPastDate: 'randPastDate().toString()',
-  randRecentDate: 'randRecentDate().toString()',
-  randSoonDate: 'randSoonDate().toString()',
   randTextRange: 'randTextRange({ min: 10, max: 100 })',
 }
 
@@ -88,7 +100,11 @@ function getDocsSection({ name, description, examples }) {
   let section = `### \`\`\`${name}\`\`\`\n\n${description}\n\n\`\`\`ts\nimport { ${name} } from '@ngneat/falso';\n\n${examples.join('\n')}\n\`\`\`\n\n`;
 
   if (!skipLivePreview.includes(name)) {
-    const funcCall = functionModifiers[name] ? functionModifiers[name] : `${name}()`;
+    let funcCall = `${name}()`;
+    const modifier = functionModifiers[name];
+    if (modifier) {
+      funcCall = typeof modifier === 'function' ? modifier(name) : modifier;
+    }
     const source = `() => ${funcCall}`;
 
     section += `\`\`\`jsx live\nfunction Demo(props) {\n  return <Preview source={${source}}/>;\n}\n\`\`\`\n\n`;

diff --git a/docs/src/consolePlayground/index.js b/docs/src/consolePlayground/index.js
@@ -5,7 +5,7 @@ if (typeof window !== 'undefined') {
 		const titleStyles = 'color:#8a76d9; font-size: 22px; font-weight:bold;';
 		const copyStyles = 'color:white; font-size: 14px';
 		const exampleStyles = 'color:#8a76d9; font-size: 14px;';
-		console.log('%cFalso\n\n' + '%cYou can use _ to access Falso functions here in the console. \n\n%c' + 'For example: _.randFullName()', titleStyles, copyStyles, exampleStyles)
+		console.log('%c🎩Falso\n' + '%cYou can use _ to access Falso functions here in the console. \n\n%c' + 'For example: _.randFullName()', titleStyles, copyStyles, exampleStyles)
 
 		window._ = falso;
 	};

diff --git a/docs/src/theme/ReactLiveScope/index.js b/docs/src/theme/ReactLiveScope/index.js
@@ -58,12 +58,16 @@ function Preview({source}) {
 
       return (<>
         <ChangeDataBtn onClick={() => setData(source())}/>
-        {typeof data === 'object' ? <ReactJson style={reactJsonStyle} name={false} enableClipboard={false} src={data} /> : <div>{data}</div>}
+        {!React.isValidElement(data) && isObject(data) ? <ReactJson style={reactJsonStyle} name={false} enableClipboard={false} src={data} /> : <div>{data}</div>}
       </>);
     }}
   </BrowserOnly>;
 }
 
+function isObject(v) {
+  return typeof v === 'object';
+}
+
 // Add react-live imports you need here
 const ReactLiveScope = {
   React,