First try

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 hana+nils · Büro für Gestaltung
+
+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

@@ -0,0 +1,23 @@
+# Proof of Concept: Simple Self-bundling Panel Plugin for Kirby 3
+
+Experimental template for Kirby 3 panel plugins that creates its plugin definition from a Vue single file component on the fly.
+
+1. Write your component's template and script in `index.vue`.
+2. Write your CSS in `index.css`.
+
+On panel load, `index.js` will be created (or updated) with the plugin definition as described in <https://getkirby.com/docs/cookbook/panel/to-bundle-or-not-to-bundle>.
+
+### Pros
+
+-   No need to setup any bundling tools.
+-   Nonetheless, let's you write single file Vue components which gives you nice syntax highlighting in your editor of choice.
+
+### Cons
+
+-   No hot-reloading in the browser.
+-   Only suitable for simple plugins without dependencies.
+-   The hook that creates the bundled JavaScript file needs to be adapted to the type of plugin required. This example created a custom section, `type: customsection`.
+
+# Acknowledgement
+
+This is a variation of <https://github.com/bastianallgeier/phew>.

composer.json

@@ -0,0 +1,15 @@
+{
+    "name": "hananils/bundlekit",
+    "description": "Experimental Kirby 3 panel plugin template with automatic component bundling",
+    "type": "kirby-plugin",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "hana+nils · Büro für Gestaltung",
+            "email": "[email protected]"
+        }
+    ],
+    "support": {
+        "issues": "https://github.com/hananils/kirby-bundlekit/issues/"
+    }
+}

index.css

@@ -0,0 +1 @@
+/* CSS */

index.js

@@ -0,0 +1,13 @@
+// This file is auto-generated. Please edit index.vue instead.
+                panel.plugin('hananils/bundlekit', {
+                    sections: {
+                        customsection: {
+                            name: 'customsection',
+                            template: `<section>
+        <header class="k-section-header">
+            <h2 class="k-headline">Custom section</h2>
+        </header>
+    </section>`
+                        }
+                    }
+                });

index.php

@@ -0,0 +1,66 @@
+<?php
+
+/**
+ * hana+nils · Büro für Gestaltung
+ * https://hananils.de · [email protected]
+ */
+
+Kirby::plugin('hananils/bundlekit', [
+    'sections' => [
+        'customsection' => [
+            'props' => [
+                'headline' => function ($headline) {
+                    return $headline;
+                }
+            ]
+        ]
+    ],
+    'hooks' => [
+        'route:before' => function ($route, $path, $method) {
+            $root = __DIR__;
+            $source = $root . '/index.vue';
+            $compiled = $root . '/index.js';
+
+            if (
+                is_file($source) === false ||
+                (file_exists($compiled) &&
+                    filemtime($source) < filemtime($compiled))
+            ) {
+                return;
+            }
+
+            $contents = file_get_contents($source);
+
+            $template = '';
+            if (
+                preg_match('/<template>(.*?)<\/template>/s', $contents, $match)
+            ) {
+                $template = trim($match[1]);
+            }
+
+            $script = '';
+            if (
+                preg_match(
+                    '/<script>\s?+export default {(.*?)};\s?+<\/script>/s',
+                    $contents,
+                    $match
+                )
+            ) {
+                $script = trim($match[1]);
+            }
+
+            file_put_contents(
+                $compiled,
+                "// This file is auto-generated. Please edit index.vue instead.
+                panel.plugin('hananils/bundlekit', {
+                    sections: {
+                        customsection: {
+                            $script,
+                            template: `$template`
+                        }
+                    }
+                });"
+            );
+        }
+    ]
+]);

index.vue

@@ -0,0 +1,13 @@
+<template>
+    <section>
+        <header class="k-section-header">
+            <h2 class="k-headline">Custom section</h2>
+        </header>
+    </section>
+</template>
+
+<script>
+export default {
+    name: 'customsection'
+};
+</script>