chore: setup fiber-htmx package

.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    extends: ['plugin:prettier/recommended'],
+    overrides: [
+        {
+            files: ['**/*.tsx'],
+            rules: {
+                'react/prop-types': 'off'
+            }
+        }
+    ],
+    settings: {
+        react: {
+            version: 'detect' // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    globals: {
+        Atomics: 'readonly',
+        SharedArrayBuffer: 'readonly'
+    },
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: 'module', // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    rules: {}
+}

.prettierignore

@@ -0,0 +1 @@
+package.json

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll": "explicit"
+    }
+}

dist/fiber-htmx.esm.js

@@ -0,0 +1,60 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/toasts.ts
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var Toasts = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.notifications = new Array();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("htmx-toasts:notify", (e) => this._handleNotify(e));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("htmx-toasts:notify", (e) => this._handleNotify(e));
+  }
+  _handleNotify(e) {
+    const notifcation = { id: e.timeStamp, ...e.detail };
+    this.notifications.push(notifcation);
+    setTimeout(() => this._remove(notifcation), 3e3);
+    this.requestUpdate();
+  }
+  _remove(n) {
+    this.notifications = this.notifications.filter((i) => i.id !== n.id);
+  }
+  render() {
+    return html`
+            <link href="https://cdn.jsdelivr.net/npm/daisyui/dist/full.css" rel="stylesheet" type="text/css">
+            <div class="toast" role="status" aria-live="polite">
+                ${this.notifications.map((n) => html`
+                    <div class="alert alert-${n.level}">
+                        <span>${n.message}</span>
+                        <button class="btn btn-sm btn-outline" @click=${() => this._remove(n)}>Close</button>
+                    </div>
+                `)}
+            </div>
+        `;
+  }
+};
+Toasts.styles = css`.toast { z-index: 9999; }`;
+__decorateClass([
+  property({ type: Array })
+], Toasts.prototype, "notifications", 2);
+Toasts = __decorateClass([
+  customElement("htmx-toasts")
+], Toasts);
+export {
+  Toasts
+};

dist/main.d.ts

@@ -0,0 +1,3 @@
+import { Toasts } from "./toasts";
+export { Toasts };
+//# sourceMappingURL=main.d.ts.map

dist/toasts.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+type Level = 'info' | 'warn' | 'error';
+type Code = number;
+type Message = string;
+type Notification = {
+    id: number;
+    message: Message;
+    level: Level;
+    code: Code;
+};
+export declare class Toasts extends LitElement {
+    static styles: import("lit").CSSResult;
+    notifications: Notification[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleNotify;
+    private _remove;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=toasts.d.ts.map

embed.go

@@ -6,7 +6,7 @@ import (
 
 const (
 	BundleFolder      = "dist"
-	DefaultBundleFile = "out.js"
+	DefaultBundleFile = "fiber-htmx.min.js"
 )
 
 //go:embed dist

gen.go

@@ -3,4 +3,5 @@
 
 package htmx
 
-//go:generate npx esbuild --bundle --minify --sourcemap --outfile=dist/out.js src/main.ts
+//go:generate npx esbuild --bundle --minify --sourcemap --outfile=dist/fiber-htmx.min.js src/main.ts
+//go:generate npx esbuild --bundle --platform=neutral --packages=external --outfile=dist/fiber-htmx.esm.js src/main.ts