Merge pull request #15 from ernestmarcinko/dev

feature: updated a few pages & chores

src/htmx-serverless.js

@@ -3,33 +3,29 @@ import htmxServerless from "htmx-serverless";
 
 htmxServerless.init(htmx);
 
-htmxServerless.handlers.set('/clicked', 
-    `<button hx-get="/clicked2" hx-swap="outerHTML" hx-ext="serverless">
-        Hey!
-    </button>`
-);
-htmxServerless.handlers.set('/clicked2', 
-    `<button hx-get="/clicked3" hx-swap="outerHTML" hx-ext="serverless">
-        Okay then!
-    </button>`
-);
-htmxServerless.handlers.set('/clicked3', 
-    `<button hx-get="/clicked4" hx-swap="outerHTML" hx-ext="serverless">
-        Stop it now.
-    </button>`
-);
-htmxServerless.handlers.set('/clicked4', 
-    `<button hx-get="/clicked5" hx-swap="outerHTML" hx-ext="serverless">
-        Just stop pls..
-    </button>`
-);
-htmxServerless.handlers.set('/clicked5', 
-    `<button hx-get="/clicked6" hx-swap="outerHTML" hx-ext="serverless">
-        Sus.
-    </button>`
-);
-htmxServerless.handlers.set('/clicked6', 
-    `<button hx-get="/clicked" hx-swap="outerHTML" hx-ext="serverless">
-        I'm done.
-    </button>`
-);
+const duck = {}
+let duckCount = 0;
+duck.getDuck = function(text, params, xhr){
+    let status = 'bad, get more.';
+
+
+    if ( duckCount > 0 && duckCount < 10 ) {
+        status = 'okay.'
+    } else if ( duckCount < 20 ) {
+        status = 'getting better.'
+    } else if ( duckCount < 50 ) {
+        status = 'getting better and better.'
+    } else if ( duckCount < 100 ) {
+        status = 'even better!'
+    } else if ( duckCount < 200 ) {
+        status = 'marvelous!'
+    } else if ( duckCount < 500 ) {
+        status = 'duckolitios!'
+    } else if ( duckCount < 500 ) {
+        status = 'what???'
+    }
+
+    return `You have ${duckCount++} 🦆, it is ${status}`;
+}
+
+export default duck;

views/pages/htmx-serverless.ejs

@@ -10,12 +10,12 @@
             <h1 id="tw1">HTMX Serverless</h1>
             <p>
                 <h3>Click the button to do things</h3>
-                <button hx-get="/clicked" hx-swap="outerHTML" hx-ext="serverless">
-                    Click to change the buttons!
+                <button hx-get="js:duck.getDuck" hx-trigger="click, load" hx-target="next .duckcount" hx-ext="serverless">
+                    Click for more 🦆!
                 </button>
-                <p>The button changes via HTMX without server queries.</p>
+                <span class="duckcount"></span>
+                <p>The button changes via HTMX without server, on the client side. <a href='https://gist.github.com/ernestmarcinko/48b2f7fc81a845b8cfcbd7dac26ac5a3'>Source 🦆 code.</a></p>
                 <p><a href='https://github.com/ernestmarcinko/htmx-serverless'>Github repository</a> | <a href="https://www.npmjs.com/package/htmx-serverless">npm</a></p>
-
             </p>
         </section>
         <section style="max-width: 640px;">

webpack.config.js

@@ -44,6 +44,12 @@ export default [{
 {
   entry: './src/htmx-serverless.js',
   output: {
+    library: {
+      name: 'duck',
+      type: 'global',
+      export: 'default',
+    },
+    globalObject: 'window',
     path: path.resolve(__dirname, 'dist'),
     filename: 'htmx-serverless.js',
   },