Merge branch 'release/1.0.0'

.github/workflows/release.yaml

@@ -1,11 +1,41 @@
 name: Publish Package to npmjs
 on:
   push:
-    branches: [main]
+    branches:
+      - main
+      - develop
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches:
+      - main
+      - develop
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: ['18.x', '20.x', '22.x']
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        name: Use Node.js ${{ matrix.node-version }}
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: 'https://registry.npmjs.org'
+          cache: pnpm
+
+      - run: pnpm install
+      - run: pnpm build
+      - run: npm link
+      - run: pnpm test:unit --runInBand
+      - run: pnpm test:integration --runInBand
+
+  release:
+    runs-on: ubuntu-latest
+    needs: [test]
+    if: ${{ github.event_name == 'push' && endsWith(github.ref, '/main') }}
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4

DEVELOPING.md

@@ -1,12 +1,21 @@
 ```sh
 pnpm build
 npm link
-pnpm start examples/simple --name="My Simple Component" --includeStyle=false --yeah=false --nah=true
+pnpm test:unit --watch
+pnpm test:integration
+pnpm start examples/simple --name="My Simple Component" --overwrite --includeStyle=false
 pnpm start examples/web-app --name="My Web Site"
 pnpm start examples/web-app --name="My Web Site" --outputDirectory=./foo/src/
 pnpm start examples/web-app --name="My Web Site" -o ./bar/src/
 pnpm start examples/react-component --name="My React Component" --includeStyle=false
-pnpm start examples/kitchen-sink --name="My Kitchen Sink" --includeStyle=false
+pnpm start examples/kitchen-sink --name="My Kitchen Sink" --includeStyle=false --yeah=false --nah=true
 pnpm start https://raw.githubusercontent.com/lindsayevans/scffld/develop/examples/simple.md --name="My Remote Component"
 pnpm start github:lindsayevans/scffld/examples/simple --name="My Github Component"
+pnpm start github:lindsayevans/scffld/examples/simple@main --name="My Github Component"
+```
+
+Create SVG screenshot - requires [asciinema](https://docs.asciinema.org/getting-started/)
+
+```sh
+npx svg-term --at=5000 --command="npx scffld github:lindsayevans/scffld/examples/simple --name=\"My Awesome Component\"" --out=screenshot.svg --window --no-cursor --height=18
 ```

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Lindsay Evans
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -22,7 +22,7 @@ npx @querc/scffld@latest github:lindsayevans/scffld/examples/simple \
 
 Files will be created in `my-project/src`
 
-<img src="./docs/quickstart-screen.png" width="680" alt="Example of command output" />
+![Example of command output](./docs/screenshot.svg)
 
 See [docs/usage.md](./docs/usage.md) for more details or check out the [example templates](./examples/).
 

docs/templates.md

@@ -59,6 +59,15 @@ scffld template-name --myProperty="foo"
 | `shortName`   | Shortened option name                                        |
 | `description` | Description of the property<br>Displayed when using `--help` |
 
+### Reserved property names
+
+| Name              | Short name |
+| ----------------- | ---------- |
+| `overwrite`       |            |
+| `outputDirectory` | `o`        |
+| `version`         | `V`        |
+| `help`            | `h`        |
+
 ## File blocks
 
 Markdown fenced code blocks define the template for each file.

docs/usage.md

@@ -12,9 +12,11 @@ npx @querc/scffld github:lindsayevans/scffld/examples/simple \
     -o ./my-project/src/
 ```
 
+(Windows users will need to remove `\` and put everything on one line)
+
 Files will be created in `my-project/src`
 
-<img src="./quickstart-screen.png" width="680" alt="Example of command output" />
+![Example of command output](./screenshot.svg)
 
 ## Syntax
 
@@ -53,6 +55,12 @@ npx @querc/scffld examples/simple \
     -o ./my-project/src/
 ```
 
+or leave out all options to be prompted for them:
+
+```sh
+npx @querc/scffld examples/simple
+```
+
 ## Remote templates
 
 Templates can be loaded from a remote URL:
@@ -69,6 +77,13 @@ npx @querc/scffld github:lindsayevans/scffld/examples/simple \
     --name="My Remote Component"
 ```
 
+and with a specific commit/tag/branch:
+
+```sh
+npx @querc/scffld github:lindsayevans/scffld/examples/simple@v0.11.0 \
+    --name="My Remote Component"
+```
+
 ## Common options
 
 | Option                   | Details                                                                                                   |

examples/kitchen-sink.md

@@ -5,49 +5,40 @@ props:
   name:
     type: string
     required: true
+    shortName: N
   includeStyle:
     type: boolean
     default: true
+  yeah:
+    type: boolean
+    shortName: y
+    default: true
+  nah:
+    type: boolean
+    shortName: n
+    default: false
   appRoot:
     type: string
     default: '@app/'
-# Hooks?
-hooks:
-  afterWrite: applyPrettier
+postInstallMessage: |
+  ___
+  # Your web app '<!-- @scffld name -->' has been created!
+  \
+  To get started, run the following commands:
+  ```sh
+  cd <!-- @scffld-outputDirectory -->
+  npm i
+  npm start
+  ```
+
+# hooks:
+#   afterWrite: applyPrettier
 ---
 
 # scffld template for React Functional Component with SCSS
 
 Anything outside code blocks can be used for documentation etc.
 
-Could probably use any of the methods from [change-case](https://www.npmjs.com/package/change-case) as output directives.
-
-## File path directives
-
-- `${SCFFLD(propName)}`
-- `${ @scffld-kebab propName }`
-- `${ @scffld-pascal propName }`
-- ...
-
-## Output directives
-
-- `/* @scffld propName */`
-- `/* @scffld-kebab propName */`
-- `/* @scffld-pascal propName */`
-- ...
-
-### Conditional directives
-
-- `/* @scffld-if propName */`
-- `/* @scffld-else */`
-- `/* @scffld-elseif propName */`
-- `/* @scffld-endif */`
-- ...
-
-JS/CSS/C#/Java and so on use C-style multiline comments for directives.
-
-Probably ignore any code blocks that don't have `{ filename: ...}`
-
 ```tsx { filename: '${ @scffld-pascal name }/${ @scffld-pascal name }.tsx' }
 import React from 'react'
 import { Button } from '/* @scffld appRoot */components';
@@ -92,9 +83,7 @@ HTML, SVG etc. would need to use HTML-style comments
 </div>
 ```
 
-JSON?
-
-Might need to do some kinda JSON5 -> JSON conversion thing so the output is valid...
+JSON
 
 ```json { filename: '${ @scffld-pascal name }/${ @scffld-kebab name }.json' }
 {
@@ -122,6 +111,69 @@ CFML FTMFW
 <cfoutput>#message#</cfoutput>
 ```
 
+Various directives
+
+```html { filename: '${ @scffld-pascal name }/${ @scffld-kebab name }-output-directives.html' }
+<div class="<!-- @scffld-kebab name -->">
+  <h2><!-- @scffld name --></h2>
+  <pre>Relative path to outputDirectory: <!-- @scffld-relativeRoot -->
+includeStyle: <!-- @scffld includeStyle --></pre>
+  <h3>Replace methods:</h3>
+  <dl>
+    <dt>upper:</dt>
+    <dd><!-- @scffld-upper name --></dd>
+    <dt>lower:</dt>
+    <dd><!-- @scffld-lower name --></dd>
+    <dt>camel:</dt>
+    <dd><!-- @scffld-camel name --></dd>
+    <dt>capital:</dt>
+    <dd><!-- @scffld-capital name --></dd>
+    <dt>constant:</dt>
+    <dd><!-- @scffld-constant name --></dd>
+    <dt>dot:</dt>
+    <dd><!-- @scffld-dot name --></dd>
+    <dt>kebab:</dt>
+    <dd><!-- @scffld-kebab name --></dd>
+    <dt>pascal:</dt>
+    <dd><!-- @scffld-pascal name --></dd>
+    <dt>pascalSnake:</dt>
+    <dd><!-- @scffld-pascalSnake name --></dd>
+    <dt>path:</dt>
+    <dd><!-- @scffld-path name --></dd>
+    <dt>sentence:</dt>
+    <dd><!-- @scffld-sentence name --></dd>
+    <dt>snake:</dt>
+    <dd><!-- @scffld-snake name --></dd>
+    <dt>train:</dt>
+    <dd><!-- @scffld-train name --></dd>
+  </dl>
+</div>
+```
+
+```html { filename: '${ @scffld-pascal name }/${ @scffld-kebab name }-conditional-directives.html' }
+<div class="<!-- @scffld-kebab name -->">
+  <!-- @scffld-if includeStyle -->
+  <link rel="stylesheet" href="<!-- @scffld-relativeRoot -->test.css" />
+  <!-- @scffld-endif -->
+  <!-- @scffld-if yeah -->
+  <p>yeah, nah</p>
+  <!-- @scffld-endif -->
+  <!-- @scffld-if nah -->
+  <p>nah, yeah</p>
+  <!-- @scffld-endif -->
+  <!-- @scffld-if yeah -->
+  <p>yeah1</p>
+  <!-- @scffld-else -->
+  <p>nah1</p>
+  <!-- @scffld-endif -->
+  <!-- @scffld-if nah -->
+  <p>nah2</p>
+  <!-- @scffld-else -->
+  <p>yeah2</p>
+  <!-- @scffld-endif -->
+</div>
+```
+
 ## Example output
 
 This code block will be ignored