From 93939ff05405813bf8a15a112ca034a5b2c4bc00 Mon Sep 17 00:00:00 2001
From: Stephan Ploehn <ploehn@deichrakete.com>
Date: Tue, 26 Aug 2025 11:59:30 +0200
Subject: [PATCH] feat: added webpack, stimulus and turbo

---
 .gitignore                             |  4 +++-
 composer.json                          |  7 ++++++-
 package.json                           | 15 +++++++++++++--
 site/commands/serve.php                | 19 ++++++++++++++-----
 site/snippets/layouts/main.php         |  3 ++-
 src/js/controllers/hello_controller.js |  8 ++++++++
 src/js/index.js                        |  6 ++++++
 webpack.config.js                      | 10 ++++++++++
 8 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 src/js/controllers/hello_controller.js
 create mode 100644 src/js/index.js
 create mode 100644 webpack.config.js

diff --git a/.gitignore b/.gitignore
index 1d7efbc..c9b393d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,6 +57,7 @@ package-lock.json
 
 /vendor
 /node_modules
+/site/plugins
 
 # Content
 # ---------------
@@ -66,4 +67,5 @@ package-lock.json
 # Compiled files
 # ---------------
 
-/public/css
\ No newline at end of file
+/public/css
+/public/js
\ No newline at end of file
diff --git a/composer.json b/composer.json
index 8602a6e..18884c7 100644
--- a/composer.json
+++ b/composer.json
@@ -24,7 +24,12 @@
   "require": {
     "php": "~8.1.0 || ~8.2.0 || ~8.3.0 || ~8.4.0",
     "getkirby/cms": "^5.0",
-    "ext-pcntl": "*"
+    "ext-pcntl": "*",
+    "deichrakete/kirby-cache": "^1.0"
+  }
+  ,
+  "require-dev": {
+    "roave/security-advisories": "dev-latest"
   },
   "config": {
     "allow-plugins": {
diff --git a/package.json b/package.json
index 2c73ae4..1a7329e 100644
--- a/package.json
+++ b/package.json
@@ -2,9 +2,12 @@
   "name": "kirby-moin",
   "version": "1.0.0",
   "description": "Watch and build tailwindcss",
+  "private": true,
   "scripts": {
-    "watch": "npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content './site/**/*.php' -w",
-    "build": "npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content './site/**/*.php' -m"
+    "watch": "concurrently 'npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content \"./site/**/*.php\" -w' 'webpack --watch'",
+    "watch:css": "npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content \"./site/**/*.php\" -w",
+    "watch:js": "webpack --watch",
+    "build": "concurrently 'npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content \"./site/**/*.php\" -m' 'webpack'"
   },
   "repository": {
     "type": "git",
@@ -13,6 +16,14 @@
   "author": "Stephan Plöhn",
   "license": "ISC",
   "dependencies": {
+    "@hotwired/stimulus": "^3.2.2",
+    "@hotwired/stimulus-webpack-helpers": "^1.0.1",
+    "@hotwired/turbo": "^8.0.13",
+    "concurrently": "^9.2.1",
     "tailwindcss": "^4.1.12"
+  },
+  "devDependencies": {
+    "webpack": "^5.101.3",
+    "webpack-cli": "^6.0.1"
   }
 }
diff --git a/site/commands/serve.php b/site/commands/serve.php
index 085dee1..2b257d7 100644
--- a/site/commands/serve.php
+++ b/site/commands/serve.php
@@ -57,7 +57,8 @@ return [
             escapeshellarg($router)
         );
 
-        $npmCmd = 'npm run watch';
+        $cssCmd = 'npm run watch:css';
+        $jsCmd = 'npm run watch:js';
 
         $cli->info("Starting PHP dev server on http://{$host}:{$port} (docroot: {$docroot})");
 
@@ -95,11 +96,18 @@ return [
         }
         $processes['php'] = $phpProc;
 
-        $npmProc = $start($npmCmd);
+        $npmProc = $start($cssCmd);
         if ($npmProc === null) {
             $cli->warning('Could not start npm watcher. Is Node/npm installed and in your PATH?');
         } else {
-            $processes['npm'] = $npmProc;
+            $processes['css'] = $npmProc;
+        }
+
+        $jsProc = $start($jsCmd);
+        if ($jsProc === null) {
+            $cli->warning('Could not start npm watcher. Is Node/npm installed and in your PATH?');
+        } else {
+            $processes['js'] = $jsProc;
         }
 
         // Graceful termination
@@ -150,8 +158,9 @@ return [
 
         // Stream outputs until all children exit
         $prefixColor = [
-            'php' => fn($s) => "\033[1;34m🐘 [php]\033[0m $s",
-            'npm' => fn($s) => "\033[1;32m [npm]\033[0m $s",
+            'php' => fn($s) => "\033[1;34m [php]\033[0m $s",
+            'css' => fn($s) => "\033[1;32m󱏿 [css]\033[0m $s",
+            'js' => fn($s) => "\033[1;97m [js]\033[0m $s",
         ];
 
         while (true) {
diff --git a/site/snippets/layouts/main.php b/site/snippets/layouts/main.php
index b643d2f..80657c1 100644
--- a/site/snippets/layouts/main.php
+++ b/site/snippets/layouts/main.php
@@ -21,6 +21,7 @@ use Kirby\Template\Slots;
     <?= $page->title() ?> | <?= $site->title() ?>
   </title>
   <?= css('css/app.css') ?>
+  <?= js('js/app.js') ?>
 </head>
 <body>
 
@@ -32,7 +33,7 @@ use Kirby\Template\Slots;
   </h1>
 </header>
 
-<main>
+<main data-controller="hello">
   <?= $slot ?>
 </main>
 
diff --git a/src/js/controllers/hello_controller.js b/src/js/controllers/hello_controller.js
new file mode 100644
index 0000000..99c9447
--- /dev/null
+++ b/src/js/controllers/hello_controller.js
@@ -0,0 +1,8 @@
+import { Controller} from "@hotwired/stimulus";
+import "@hotwired/turbo"
+
+export default class extends Controller {
+  connect() {
+    console.log("Hello World!");
+  }
+}
diff --git a/src/js/index.js b/src/js/index.js
new file mode 100644
index 0000000..196d606
--- /dev/null
+++ b/src/js/index.js
@@ -0,0 +1,6 @@
+import { Application } from "@hotwired/stimulus"
+import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
+
+window.Stimulus = Application.start()
+const context = require.context("./controllers", true, /\.js$/)
+Stimulus.load(definitionsFromContext(context))
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..ff56325
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/js/index.js',
+  mode: "production",
+  output: {
+    filename: 'app.js',
+    path: path.resolve(__dirname, 'public/js'),
+  },
+};