diff options
Diffstat (limited to 'js/seed')
-rw-r--r-- | js/seed/README.md | 15 | ||||
-rwxr-xr-x | js/seed/seed | 75 | ||||
-rw-r--r-- | js/seed/src/app.js | 8 | ||||
-rw-r--r-- | js/seed/src/dev.js | 4 | ||||
-rw-r--r-- | js/seed/src/view.js | 6 |
5 files changed, 85 insertions, 23 deletions
diff --git a/js/seed/README.md b/js/seed/README.md index 8159cb3..981ca7d 100644 --- a/js/seed/README.md +++ b/js/seed/README.md @@ -1,6 +1,6 @@ # Seed: Minimal FRP/TEA Web App Starter Kit -This is an opinionated, minimal starting point for browser-native web apps using a functional, Elm-style architecture (FRP/TEA) and only browser APIs. No frameworks, no build step, just ES modules. +This is an opinionated, hopefully simple starting point for browser-native web apps using a functional, Elm-style architecture (FRP/TEA) and only browser APIs. No rulers, no kings, no frameworks, no build step, only ES modules. ## Architecture - **state.js**: App state definition and helpers @@ -15,14 +15,9 @@ This is an opinionated, minimal starting point for browser-native web apps using - **View**: Pure function `(state) => html` - **Entrypoint**: Handles events, dispatches actions, triggers re-render -## Why? -- Simple, testable, and maintainable -- No dependencies -- Encourages functional, declarative code - ## How to Extend and Use This Template -This template is designed to be a flexible, opinionated starting point for any browser-native app. +This template is designed to be a flexible, opinionated starting point for any kinda app, especially proofs of concept, toys, and prototypes. ### Key Files to Extend - **src/state.js**: Define the app's state shape and any helper functions for cloning or initializing state. @@ -69,9 +64,9 @@ Suppose you want to add a button that increments a counter: ``` ### Tips -- Keep all state transitions in `update.js` for predictability. -- Keep all DOM rendering in `view.js` for clarity. -- Use the `postRender` hook for accessibility or focus management. +- Keep all state transitions in `update.js`. +- Keep all DOM rendering in `view.js`. +- Use the `postRender` hook for accessibility or focus management stuff. - Add new features by extending state, update, view, and wiring up events in `app.js`. --- diff --git a/js/seed/seed b/js/seed/seed new file mode 100755 index 0000000..15276e7 --- /dev/null +++ b/js/seed/seed @@ -0,0 +1,75 @@ +#!/bin/bash + +set -euo pipefail + +# Usage: seed plant + +if [ "$#" -ne 1 ] || [ "$1" != "plant" ]; then + echo "Usage: $0 plant" + exit 1 +fi + +if [ "$EUID" -eq 0 ]; then + echo "Do not run this script as root." + exit 1 +fi + +if ! command -v git >/dev/null 2>&1; then + echo "Warning: git is not installed. You won't be able to initialize a git repo." +fi + +SRC_DIR="$(cd "$(dirname "$0")" && pwd)" + +read -rp "Enter new project name: " DEST_DIR + +if [ -z "$DEST_DIR" ]; then + echo "Project name cannot be empty." + exit 1 +fi + +DEST_PATH="$PWD/$DEST_DIR" + +if [ -e "$DEST_PATH" ]; then + echo "Error: '$DEST_PATH' already exists." + exit 1 +fi + +cleanup() { + if [ -d "$DEST_PATH" ]; then + echo "Cleaning up partial directory..." + rm -rf "$DEST_PATH" + fi +} +trap cleanup INT TERM + +echo "Copying seed template to '$DEST_PATH'..." +mkdir "$DEST_PATH" + +if command -v rsync >/dev/null 2>&1; then + rsync -a --exclude='.git' --exclude='seed' "$SRC_DIR/" "$DEST_PATH/" +else + cp -r "$SRC_DIR/"* "$DEST_PATH/" + cp -r "$SRC_DIR/".* "$DEST_PATH/" 2>/dev/null || true + rm -rf "$DEST_PATH/.git" "$DEST_PATH/seed" +fi + +cd "$DEST_PATH" + +# Optionally, update README +if [ -f README.md ]; then + sed -i '' "1s/.*/# $DEST_DIR/" README.md 2>/dev/null || sed -i "1s/.*/# $DEST_DIR/" README.md +fi + +echo "Initialized new project in '$DEST_PATH'." + +read -rp "Do you want to initialize a git repository? (y/n): " INIT_GIT +if [[ "$INIT_GIT" =~ ^[Yy]$ ]]; then + git init + echo "Git repository initialized." +else + echo "Skipping git initialization." +fi + +echo "Next steps:" +echo " cd \"$DEST_PATH\"" +echo " and tend to the seed you've planted..." \ No newline at end of file diff --git a/js/seed/src/app.js b/js/seed/src/app.js index 34b4579..49ad9d1 100644 --- a/js/seed/src/app.js +++ b/js/seed/src/app.js @@ -155,11 +155,3 @@ function setHistoryPointer(idx) { updateHistoryInfo(); } } - -function handleSliderChange(e) { - setHistoryPointer(Number(e.target.value)); -} - -function handleStepperChange(e) { - setHistoryPointer(Number(e.target.value)); -} \ No newline at end of file diff --git a/js/seed/src/dev.js b/js/seed/src/dev.js index ee1a6e7..173fc3c 100644 --- a/js/seed/src/dev.js +++ b/js/seed/src/dev.js @@ -1,8 +1,8 @@ // devMode.js -// Minimal, single-file dev mode with scriptable console API +// Simpleish, single-file dev mode with interactive console API /** - * Initialize dev mode: exposes a scriptable API for stepping through state history. + * Initialize dev mode: exposes an API for stepping through state history. * @param {object} opts * @param {function} opts.getState - returns current app state * @param {function} opts.setState - sets app state diff --git a/js/seed/src/view.js b/js/seed/src/view.js index 5feef6e..4c6e680 100644 --- a/js/seed/src/view.js +++ b/js/seed/src/view.js @@ -4,10 +4,10 @@ /** * Pure view functions for the application. * - * Why pure functions returning HTML strings? + * Why pure functions returning HTML strings? Because Elm does it, tbh. * - Keeps rendering logic stateless and easy to test. - * - Ensures the UI is always a direct function of state, avoiding UI bugs from incremental DOM updates. - * - Using template literals is minimal and browser-native, with no dependencies. + * - Ensures the UI is always a direct function of state, which should in theory totally avoid bugs from incremental DOM updates. + * - Using template literals is minimal and browser-native, with no dependencies, and is fun. * * Why escape output? * - Prevents XSS and ensures all user/content data is safely rendered. |