simple-scaffold/docs/api/index.html

<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-api/index" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.1.1">
<title data-rh="true">simple-scaffold | Simple Scaffold</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://chenasraf.github.io/simple-scaffold/img/docusaurus-social-card.jpg"><meta data-rh="true" name="twitter:image" content="https://chenasraf.github.io/simple-scaffold/img/docusaurus-social-card.jpg"><meta data-rh="true" property="og:url" content="https://chenasraf.github.io/simple-scaffold/docs/api/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="simple-scaffold | Simple Scaffold"><meta data-rh="true" name="description" content="GitHub |"><meta data-rh="true" property="og:description" content="GitHub |"><link data-rh="true" rel="icon" href="/simple-scaffold/img/favicon.svg"><link data-rh="true" rel="canonical" href="https://chenasraf.github.io/simple-scaffold/docs/api/"><link data-rh="true" rel="alternate" href="https://chenasraf.github.io/simple-scaffold/docs/api/" hreflang="en"><link data-rh="true" rel="alternate" href="https://chenasraf.github.io/simple-scaffold/docs/api/" hreflang="x-default"><link rel="preconnect" href="https://www.googletagmanager.com">
<script>window.dataLayer=window.dataLayer||[]</script>
<script>!function(e,t,a,n,g){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var m=t.getElementsByTagName(a)[0],r=t.createElement(a);r.async=!0,r.src="https://www.googletagmanager.com/gtm.js?id=GTM-KHQS9TQ",m.parentNode.insertBefore(r,m)}(window,document,"script","dataLayer")</script><link rel="stylesheet" href="/simple-scaffold/assets/css/styles.8a64fb18.css">
<script src="/simple-scaffold/assets/js/runtime~main.2ee8686f.js" defer="defer"></script>
<script src="/simple-scaffold/assets/js/main.f5546471.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KHQS9TQ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_xD9F" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/simple-scaffold/"><div class="navbar__logo"><img src="/simple-scaffold/img/logo.svg" alt="Simple Scaffold" class="themedComponent_RIc6 themedComponent--light_aQWN"><img src="/simple-scaffold/img/logo.svg" alt="Simple Scaffold" class="themedComponent_RIc6 themedComponent--dark_XAeT"></div><b class="navbar__title text--truncate">Simple Scaffold</b></a><a class="navbar__item navbar__link" href="/simple-scaffold/docs/api/">API</a><a class="navbar__item navbar__link" href="/simple-scaffold/docs/usage/">Usage</a></div><div class="navbar__items navbar__items--right"><a href="https://npmjs.com/package/simple-scaffold" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">NPM<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_MnLA"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/chenasraf/simple-scaffold" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_MnLA"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_N2tU colorModeToggle_R3HC"><button class="clean-btn toggleButton_TIRg toggleButtonDisabled_Dghz" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_T53_"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_erRR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_YstM"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_DnkQ"><div class="docsWrapper_RNIR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_x6Zs" type="button"></button><div class="docRoot_W9dQ"><aside class="theme-doc-sidebar-container docSidebarContainer_ORMb"><div class="sidebarViewport_oNap"><div class="sidebar_Q8WE"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_R1FV"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible menu__list-item-collapsible--active"><a class="menu__link menu__link--sublist menu__link--active" aria-current="page" aria-expanded="true" href="/simple-scaffold/docs/api/">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/simple-scaffold/docs/api/modules">Exports</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" tabindex="0" href="/simple-scaffold/docs/api/interfaces/ScaffoldConfig">Interfaces</a></div></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" href="/simple-scaffold/docs/usage/">Usage</a><button aria-label="Expand sidebar category &#x27;Usage&#x27;" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav></div></div></aside><main class="docMainContainer_h1op"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_IS56"><div class="docItemContainer_A3Fn"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_gzph" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/simple-scaffold/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_k91F"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">API</span><meta itemprop="position" content="1"></li></ul></nav><div class="tocCollapsible_gU2I theme-doc-toc-mobile tocMobile_LZkL"><button type="button" class="clean-btn tocCollapsibleButton_dItm">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>simple-scaffold</h1></header><p align="center"><img src="https://chenasraf.github.io//simple-scaffold/img/logo-lg.png" alt="Logo"></p>
<h2 align="center"><p><a href="https://github.com/chenasraf/simple-scaffold" target="_blank" rel="noopener noreferrer">GitHub</a> |
<a href="https://chenasraf.github.io/simple-scaffold" target="_blank" rel="noopener noreferrer">Documentation</a> |
<a href="https://npmjs.com/package/simple-scaffold" target="_blank" rel="noopener noreferrer">NPM</a> | <a href="https://casraf.dev" target="_blank" rel="noopener noreferrer">casraf.dev</a></p><p><img decoding="async" loading="lazy" src="https://img.shields.io/github/package-json/v/chenasraf/simple-scaffold/master?label=master" alt="master" class="img_LS5D">
<img decoding="async" loading="lazy" src="https://img.shields.io/github/actions/workflow/status/chenasraf/simple-scaffold/release.yml?branch=master" alt="build" class="img_LS5D"></p></h2>
<p>Looking to streamline your workflow and get your projects up and running quickly? Look no further
than Simple Scaffold - the easy-to-use NPM package that simplifies the process of organizing and
copying your commonly-created files.</p>
<p>With its agnostic and un-opinionated approach, Simple Scaffold can handle anything from a few simple
files to an entire app boilerplate setup. Plus, with the power of <strong>Handlebars.js</strong> syntax, you can
easily replace custom data and personalize your files to fit your exact needs. But that&#x27;s not all -
you can also use it to loop through data, use conditions, and write custom functions using helpers.</p>
<p>Don&#x27;t waste any more time manually copying and pasting files - let Simple Scaffold do the heavy
lifting for you and start building your projects faster and more efficiently today!</p>
<div align="center"><p><img decoding="async" loading="lazy" src="https://chenasraf.github.io/simple-scaffold/img/intro.gif" alt="Intro" class="img_LS5D"></p></div>
<hr>
<h2 class="anchor anchorWithStickyNavbar_zTgU" id="documentation">Documentation<a href="#documentation" class="hash-link" aria-label="Direct link to Documentation" title="Direct link to Documentation"></a></h2>
<p>See full documentation <a href="https://chenasraf.github.io/simple-scaffold" target="_blank" rel="noopener noreferrer">here</a>.</p>
<ul>
<li><a href="https://chenasraf.github.io/simple-scaffold/docs/usage/cli" target="_blank" rel="noopener noreferrer">Command Line Interface (CLI) usage</a></li>
<li><a href="https://chenasraf.github.io/simple-scaffold/docs/usage/node" target="_blank" rel="noopener noreferrer">Node.js usage</a></li>
<li><a href="https://chenasraf.github.io/simple-scaffold/docs/usage/templates" target="_blank" rel="noopener noreferrer">Templates</a></li>
<li><a href="https://chenasraf.github.io/simple-scaffold/docs/usage/configuration_files" target="_blank" rel="noopener noreferrer">Configuration Files</a></li>
<li><a href="https://chenasraf.github.io/simple-scaffold/docs/usage/migration" target="_blank" rel="noopener noreferrer">Migration</a></li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_zTgU" id="getting-started">Getting Started<a href="#getting-started" class="hash-link" aria-label="Direct link to Getting Started" title="Direct link to Getting Started"></a></h2>
<h3 class="anchor anchorWithStickyNavbar_zTgU" id="cheat-sheet">Cheat Sheet<a href="#cheat-sheet" class="hash-link" aria-label="Direct link to Cheat Sheet" title="Direct link to Cheat Sheet"></a></h3>
<p>A quick rundown of common usage scenarios:</p>
<ul>
<li>
<p>Remote template config file on GitHub:</p>
<div class="language-sh codeBlockContainer_lofb theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_CIqb"><pre tabindex="0" class="prism-code language-sh codeBlock_H1Bz thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_GTCY"><span class="token-line" style="color:#393A34"><span class="token plain">npx simple-scaffold -g username/repository -c scaffold.js -k component NewComponentName</span><br></span></code></pre><div class="buttonGroup_m1Eb"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_H9jk" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon__y5V"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_JBPS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>Local template config file:</p>
<div class="language-sh codeBlockContainer_lofb theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_CIqb"><pre tabindex="0" class="prism-code language-sh codeBlock_H1Bz thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_GTCY"><span class="token-line" style="color:#393A34"><span class="token plain">npx simple-scaffold -c scaffold.js -k component NewComponentName</span><br></span></code></pre><div class="buttonGroup_m1Eb"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_H9jk" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon__y5V"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_JBPS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>Local one-time usage:</p>
<div class="language-sh codeBlockContainer_lofb theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_CIqb"><pre tabindex="0" class="prism-code language-sh codeBlock_H1Bz thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_GTCY"><span class="token-line" style="color:#393A34"><span class="token plain">npx simple-scaffold -t templates/component -o src/components NewComponentName</span><br></span></code></pre><div class="buttonGroup_m1Eb"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_H9jk" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon__y5V"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_JBPS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_zTgU" id="remote-configurations">Remote Configurations<a href="#remote-configurations" class="hash-link" aria-label="Direct link to Remote Configurations" title="Direct link to Remote Configurations"></a></h3>
<p>The fastest way to get started is to is to re-use someone else&#x27;s (or your own) work using a template
repository.</p>
<p>A remote config can be loaded in one of these ways:</p>
<ul>
<li>For templates hosted on GitHub, the syntax is <code>-g user/repository_name</code></li>
<li>For other Git platforms like GitLab, use <code>-g https://example.com/user/repository_name.git</code></li>
</ul>
<p>These remote configurations support multiple scaffold groups, which can be specified using the
<code>--key</code> or <code>-k</code> argument:</p>
<div class="language-sh codeBlockContainer_lofb theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_CIqb"><pre tabindex="0" class="prism-code language-sh codeBlock_H1Bz thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_GTCY"><span class="token-line" style="color:#393A34"><span class="token plain">$ npx simple-scaffold \</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  -g chenasraf/simple-scaffold \</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  -k component \</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  PageWrapper</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># equivalent to:</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ npx simple-scaffold \</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  -g https://github.com/chenasraf/simple-scaffold.git \</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  -c scaffold.config.js \</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  -k component \</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  PageWrapper</span><br></span></code></pre><div class="buttonGroup_m1Eb"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_H9jk" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon__y5V"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_JBPS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>By default, the template name is set to <code>default</code> when the <code>--key</code> option is not provided.</p>
<p>See information about each option and flag using the <code>--help</code> flag, or read the
<a href="https://chenasraf.github.io/simple-scaffold/docs/usage/cli" target="_blank" rel="noopener noreferrer">CLI documentation</a>. For information
about how configuration files work, <a href="#configuration-files">see below</a>.</p>
<h3 class="anchor anchorWithStickyNavbar_zTgU" id="configuration-files">Configuration Files<a href="#configuration-files" class="hash-link" aria-label="Direct link to Configuration Files" title="Direct link to Configuration Files"></a></h3>
<p>You can use a config file to more easily maintain all your scaffold definitions.</p>
<p><code>scaffold.config.js</code></p>
<div class="language-js codeBlockContainer_lofb theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_CIqb"><pre tabindex="0" class="prism-code language-js codeBlock_H1Bz thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_GTCY"><span class="token-line" style="color:#393A34"><span class="token plain">module</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// use &quot;default&quot; to avoid needing to specify key</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// in this case the key is &quot;component&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">component</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token literal-property property" style="color:#36acaa">templates</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&quot;templates/component&quot;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token literal-property property" style="color:#36acaa">output</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;src/components&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token literal-property property" style="color:#36acaa">data</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token comment" style="color:#999988;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_m1Eb"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_H9jk" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon__y5V"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_JBPS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Then call your scaffold like this:</p>
<div class="language-sh codeBlockContainer_lofb theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_CIqb"><pre tabindex="0" class="prism-code language-sh codeBlock_H1Bz thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_GTCY"><span class="token-line" style="color:#393A34"><span class="token plain">$ npx simple-scaffold -c scaffold.config.js PageWrapper</span><br></span></code></pre><div class="buttonGroup_m1Eb"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_H9jk" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon__y5V"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_JBPS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>This will allow you to avoid needing to remember which configs are needed or to store them in a
one-liner in <code>package.json</code> which can get pretty long and messy, and harder to maintain.</p>
<p>Also, this allows you to define more complex scaffolds with logic without having to use the Node.js
API directly. (Of course you always have the option to still do so if you wish)</p>
<p>More information can be found at the
<a href="https://chenasraf.github.io/simple-scaffold/docs/usage/configuration_files" target="_blank" rel="noopener noreferrer">Configuration Files documentation</a>.</p>
<h3 class="anchor anchorWithStickyNavbar_zTgU" id="templates-structure">Templates Structure<a href="#templates-structure" class="hash-link" aria-label="Direct link to Templates Structure" title="Direct link to Templates Structure"></a></h3>
<p>Templates are <strong>any file</strong> in the a directory given to <code>--templates</code>.</p>
<p>Simple Scaffold will maintain any file and directory structure you try to generate, while replacing
any tokens such as <code>{{ name }}</code> or other custom-data using
<a href="https://handlebarsjs.com/" target="_blank" rel="noopener noreferrer">Handlebars.js</a>.</p>
<p><code>templates/component/{{ pascalName name }}.tsx</code></p>
<div class="language-tsx codeBlockContainer_lofb theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_CIqb"><pre tabindex="0" class="prism-code language-tsx codeBlock_H1Bz thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_GTCY"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Created: {{ now &#x27;yyyy-MM-dd&#x27; }}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;react&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">pascalCase name</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method-variable function-variable method function property-access maybe-class-name" style="color:#d73a49">FC</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">props</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">className</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag attr-value" style="color:#e3116c">{{camelCase name}}</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">pascalCase name</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain-text"> Component</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_m1Eb"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_H9jk" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon__y5V"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_JBPS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>To generate the template output once without saving a configuration file, run:</p>
<div class="language-sh codeBlockContainer_lofb theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_CIqb"><pre tabindex="0" class="prism-code language-sh codeBlock_H1Bz thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_GTCY"><span class="token-line" style="color:#393A34"><span class="token plain"># generate single component</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ npx simple-scaffold \</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  -t templates/component \</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  -o src/components \</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  PageWrapper</span><br></span></code></pre><div class="buttonGroup_m1Eb"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_H9jk" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon__y5V"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_JBPS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>This will immediately create the following file: <code>src/components/PageWrapper.tsx</code></p>
<div class="language-tsx codeBlockContainer_lofb theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_CIqb"><pre tabindex="0" class="prism-code language-tsx codeBlock_H1Bz thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_GTCY"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Created: 2077-01-01</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;react&#x27;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">default</span><span class="token plain"> </span><span class="token maybe-class-name">PageWrapper</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method-variable function-variable method function property-access maybe-class-name" style="color:#d73a49">FC</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">props</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">className</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag attr-value" style="color:#e3116c">pageWrapper</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain-text">PageWrapper Component</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_m1Eb"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_H9jk" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon__y5V"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_JBPS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithStickyNavbar_zTgU" id="contributing">Contributing<a href="#contributing" class="hash-link" aria-label="Direct link to Contributing" title="Direct link to Contributing"></a></h2>
<p>I am developing this package on my free time, so any support, whether code, issues, or just stars is
very helpful to sustaining its life. If you are feeling incredibly generous and would like to donate
just a small amount to help sustain this project, I would be very very thankful!</p>
<a href="https://ko-fi.com/casraf" target="_blank"><img height="36" src="https://cdn.ko-fi.com/cdn/kofi1.png?v=3" alt="Buy Me a Coffee at ko-fi.com"></a>
<p>I welcome any issues or pull requests on GitHub. If you find a bug, or would like a new feature,
don&#x27;t hesitate to open an appropriate issue and I will do my best to reply promptly.</p>
<p>If you are a developer and want to contribute code, here are some starting tips:</p>
<ol>
<li>Fork this repository</li>
<li>Run <code>pnpm install</code></li>
<li>Run <code>pnpm dev</code> to start file watch mode</li>
<li>Make any changes you would like</li>
<li>Create tests for your changes</li>
<li>Update the relevant documentation (readme, code comments, type comments)</li>
<li>Create a PR on upstream</li>
</ol>
<p>Some tips on getting around the code:</p>
<ul>
<li>Use <code>pnpm cmd</code> to use the CLI feature of Simple Scaffold from within the root directory, enabling
you to test different behaviors. See <code>pnpm cmd -h</code> for more information.</li>
<li>Use <code>pnpm test</code> to run tests</li>
<li>Use <code>pnpm docs:build</code> to build the documentation once</li>
<li>Use <code>pnpm docs:watch</code> to start docs in watch mode</li>
<li>Use <code>pnpm build</code> to build the output</li>
</ul></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--next" href="/simple-scaffold/docs/api/modules"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Exports</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_Xz4f thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#documentation" class="table-of-contents__link toc-highlight">Documentation</a></li><li><a href="#getting-started" class="table-of-contents__link toc-highlight">Getting Started</a><ul><li><a href="#cheat-sheet" class="table-of-contents__link toc-highlight">Cheat Sheet</a></li><li><a href="#remote-configurations" class="table-of-contents__link toc-highlight">Remote Configurations</a></li><li><a href="#configuration-files" class="table-of-contents__link toc-highlight">Configuration Files</a></li><li><a href="#templates-structure" class="table-of-contents__link toc-highlight">Templates Structure</a></li></ul></li><li><a href="#contributing" class="table-of-contents__link toc-highlight">Contributing</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/simple-scaffold/docs/intro">Tutorial</a></li></ul></div><div class="col footer__col"><div class="footer__title">More from @casraf</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://chenasraf.github.io/massarg" target="_blank" rel="noopener noreferrer" class="footer__link-item">Massarg - CLI Argument Parser<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_MnLA"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://casraf.dev" target="_blank" rel="noopener noreferrer" class="footer__link-item">Website<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_MnLA"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://npmjs.com/package/simple-scaffold" target="_blank" rel="noopener noreferrer" class="footer__link-item">npm<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_MnLA"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://github.com/chenasraf/simple-scaffold" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_MnLA"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2024 Chen Asraf. Built with Docusaurus.</div></div></div></footer></div>
</body>
</html>