feat: new for helper

Author: Raymond Ottun

package-lock.json

@@ -30,7 +30,6 @@
   "dependencies": {
     "@faker-js/faker": "^8.0.2",
     "handlebars": "^4.7.7",
-    "handlebars-helpers": "^0.10.0",
     "object-path": "^0.11.8",
     "yargs": "^17.7.2"
   },
@@ -80,4 +79,4 @@
       "src/**/*.test.ts"
     ]
   }
-}
+}

package.json

@@ -14,6 +14,13 @@ test('repeat', () => {
   expect(result).toMatchInlineSnapshot(`"index-0,index-1,index-2"`)
 })
 
+test('for', () => {
+  const result = compile({
+    template: '{{#for 1 3}} index-{{@index}} {{/for}}'
+  })
+  expect(result).toMatchInlineSnapshot(`" index-1  index-2  index-3 "`)
+})
+
 test('randomize', () => {
   const template =
     'My dogs\'s breed is {{randomize "german shepard" "golden retriever" "pug"}}'

src/helpers.test.ts

@@ -1,10 +1,8 @@
 import Handlebars from 'handlebars'
 import * as allFaker from '@faker-js/faker'
 import objectPath from 'object-path'
-import extraHelpers from 'handlebars-helpers'
 
 export const createHelpers = ({ locale }: { locale: string }): void => {
-  extraHelpers()
   Handlebars.registerHelper('repeat', function (count: number, options: any) {
     const MAX_COUNT = 100000
     if (Number.isNaN(count)) {
@@ -56,14 +54,41 @@ export const createHelpers = ({ locale }: { locale: string }): void => {
     return `fakerjs does not support ${String(type)}`
   })
 
-  Handlebars.registerHelper('helperMissing', function (...args: any[]): string {
-    try {
-      const [{ name }] = args.concat().reverse()
-      return `${String(name)} helper is not available`
-    } catch (error) {
-      return error.message
+  Handlebars.registerHelper('for', function (from: any, to: any) {
+    const options = arguments[arguments.length - 1]
+    const maxIterations = 100
+    let output = ''
+
+    if (Number.isNaN(parseInt(from, 10)) || Number.isNaN(parseInt(to, 10))) {
+      throw new Error('Invalid number for for helper')
+    }
+
+    if (to < from) {
+      throw new Error('Invalid range for for helper')
+    }
+
+    from = parseInt(from, 10)
+    to = parseInt(to, 10)
+
+    if (to - from >= maxIterations) {
+      to = Number(from) + maxIterations - 1
+    }
+
+    for (let index = from; index <= to; index++) {
+      output += options.fn(this, { data: { index } })
     }
+
+    return output
   })
 }
 
+Handlebars.registerHelper('helperMissing', function (...args: any[]): string {
+  try {
+    const [{ name }] = args.concat().reverse()
+    return `${String(name)} helper is not available`
+  } catch (error) {
+    return error.message
+  }
+})
+
 export const registerHelper = Handlebars.registerHelper

src/helpers.ts

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
 import Editor from '@monaco-editor/react'
 import { compile } from '@sayjava/phake-cli/lib/compile'
+import { templates } from '../templates'
 
-function debounce (func, delay) {
+function debounce(func, delay) {
   let timeoutId
 
   return function () {
@@ -17,56 +18,58 @@ function debounce (func, delay) {
 }
 
 export const Compile = () => {
-  const initialContent = `
-{
-    "id": {{faker 'number.int' 10}},
-    "node_id": "{{faker 'string.alpha' 25}}",
-    "name": "{{faker 'word.noun'}}",
-    "language": "{{randomize 'javascript' 'ruby' 'golang' 'c++'}}",
-    "forks_count": {{faker 'number.int' max=10000}},
-    "size": {{faker 'number.float' max=10000 precision=0.2}},
-    "default_branch": "{{randomize 'main' 'master'}}",
-    "open_issues_count": {{faker 'number.int' max=50}},
-    "is_template": {{randomize false true}},
-    "description": "{{faker 'lorem.sentences' max=1}}",
-    "topics": [
-        {{#repeat 5}}
-            "{{faker 'string.alpha' 5}}"
-        {{/repeat}}
-    ]
-}
-    `
 
+  const [currTemplate, setCurrTemplate] = useState(templates[0].name)
   const [content, setContent] = useState('')
+
   const doCompile = (template) => {
     try {
-      const newContent = JSON.parse(compile({ template }))
-      setContent(JSON.stringify(newContent, null, 2))
+      const newContent = compile({ template })
+      setContent(newContent, null, 2)
     } catch (error) {
       setContent(error.toString())
     }
   }
 
-  useEffect(() => {
-    doCompile(initialContent)
-  }, [])
-
   const handleChange = debounce(doCompile, 500)
+  const changeTemplate = (e) => {
+    setCurrTemplate(e.target.value)
+    doCompile(templates.find((template) => template.name === e.target.value).template)
+  }
+
+  useEffect(() => {
+    doCompile(
+      templates.find((template) => template.name === currTemplate).template
+    )
+  }, [currTemplate])
 
   return (
     <div className='w-full'>
+      <div className='my-4 flex space-x-4'>
+        <label className='inline-block' htmlFor="examples">Examples</label>
+        <select id='examples' className='inline-block'
+          onChange={(e) => { changeTemplate(e) }}>
+          {
+            templates.map((template) => (
+              <option key={template.name} value={template.name}>{template.label}</option>
+            ))
+          }
+        </select>
+      </div>
+
+
       <div style={{ display: 'flex' }}>
         <Editor
           height='70vh' theme='vs-dark'
           options={{ minimap: { enabled: false }, readOnly: false }}
-          language='json'
-          defaultValue={initialContent}
+          language={currTemplate}
+          value={templates.find((template) => template.name === currTemplate).template}
           onChange={handleChange}
         />
         <Editor
           height='70vh' theme='vs-dark'
-          options={{ minimap: { enabled: false }, readOnly: true }}
-          language='json'
+          options={{ minimap: { enabled: false }, readOnly: true, formatOnPaste: true, formatOnType: true, renderControlCharacters: false, renderWhitespace: 'none', renderFinalNewline: true, renderIndentGuides: true, renderLineHighlight: 'none', renderLineNumbers: 'off', renderValidationDecorations: 'off', scrollBeyondLastLine: false, wordWrap: 'on' }}
+          language={currTemplate}
           value={content}
         />
       </div>

web/components/Compile.jsx

@@ -1,5 +1,10 @@
+---
+title: Mock data generator
+description: Effortlessly Generate Realistic Mock JSON, CSV, YAML, SQL Data with Ease using Handlebars and Fakerjs
+---
+
 import { Compile } from '../components/Compile'
 
-<h1 className="w-full text-center text-4xl my-4 text-gray-600">JSON Live Data Generator</h1>
+<h1 className="w-full text-center text-4xl my-4 text-gray-600">Mock Data Generator</h1>
 
 <Compile />

web/pages/editor.mdx

@@ -1,11 +1,8 @@
 ---
 title: Mock data generator
-description: Effortlessly Generate Realistic Mock Data with Ease using Handlebars and Fakerjs
+description: Effortlessly Generate Realistic Mock JSON, CSV, YAML, SQL Data with Ease using Handlebars and Fakerjs
 ---
 
-import { Compile } from '../components/Compile.jsx'
-import { Bleed } from 'nextra-theme-docs'
-
 <h1 className="text-8xl tracking-tighter font-extrabold mt-8">Phake</h1>
 <p className="text-2xl my-4 text-gray-600">Effortlessly Generate Realistic Mock Data with Ease using Handlebars and Fakerjs</p>
 <a href="/editor" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 px-6 rounded-full mt-4 inline-block">Try it online →</a>

web/pages/index.mdx

@@ -0,0 +1,86 @@
+export const templates = [
+  {
+    name: 'json',
+    label: 'JSON',
+    template: `
+{
+    "id": {{faker 'number.int' 10}},
+    "node_id": "{{faker 'string.alpha' 25}}",
+    "name": "{{faker 'word.noun'}}",
+    "language": "{{randomize 'javascript' 'ruby' 'golang' 'c++'}}",
+    "forks_count": {{faker 'number.int' max=10000}},
+    "size": {{faker 'number.float' max=10000 precision=0.2}},
+    "default_branch": "{{randomize 'main' 'master'}}",
+    "open_issues_count": {{faker 'number.int' max=50}},
+    "is_template": {{randomize false true}},
+    "description": "{{faker 'lorem.sentences' max=1}}",
+    "topics": [
+    {{#repeat 5}}
+        "{{faker 'string.alpha' 5}}"
+    {{/repeat}}
+    ]
+}
+      `,
+  },
+  {
+    name: 'csv',
+    label: 'CSV',
+    template: `firstName,lastName,email
+{{#for 1 10}}
+{{faker 'person.firstName'}},{{faker 'person.lastName'}},{{faker 'internet.email'}}
+{{/for}}
+      `
+  },
+  {
+    name: 'xml',
+    label: 'XML',
+    template: `
+<root>
+  <id>{{faker 'number.int' 10}}</id>
+  <node_id>{{faker 'string.alpha' 25}}</node_id>
+  <name>{{faker 'word.noun'}}</name>
+  <language>{{randomize 'javascript' 'ruby' 'golang' 'c++'}}</language>
+  <forks_count>{{faker 'number.int' max=10000}}</forks_count>
+  <size>{{faker 'number.float' max=10000 precision=0.2}}</size>
+  <default_branch>{{randomize 'main' 'master'}}</default_branch>
+  <open_issues_count>{{faker 'number.int' max=50}}</open_issues_count>
+  <is_template>{{randomize false true}}</is_template>
+  <description>{{faker 'lorem.sentences' max=1}}</description>
+  <topics>
+    {{#for 1 5}}
+      <topic>{{faker 'string.alpha' 5}}</topic>
+    {{/for}}
+  </topics>
+</root>
+      `
+  },
+  {
+    name: 'yaml',
+    label: 'YAML',
+    template: `id: {{faker 'number.int' 10}}
+node_id: {{faker 'string.alpha' 25}}
+name: {{faker 'word.noun'}}
+language: {{randomize 'javascript' 'ruby' 'golang' 'c++'}}
+forks_count: {{faker 'number.int' max=10000}}
+size: {{faker 'number.float' max=10000 precision=0.2}}     
+      `
+  },
+  {
+    name: 'sql',
+    label: 'SQL',
+    template: `
+INSERT INTO users (id, node_id, name, language, forks_count, size, default_branch, open_issues_count)
+{{#for 1 10}}
+VALUES ({{faker 'number.int' 10}},
+  "{{faker 'string.alpha' 25}}",
+  "{{faker 'word.noun'}}",
+  "{{randomize 'javascript' 'ruby' 'golang' 'c++'}}",
+  {{faker 'number.int' max=10000}},
+  {{faker 'number.float' max=10000 precision=0.2}},
+  "{{randomize 'main' 'master'}}",
+  {{faker 'number.int' max=50}}
+)
+{{/for}}
+      `
+  }
+]