formtress-js 0.1.2

package/.github/workflows/publish.yml

@@ -0,0 +1,27 @@
+name: Publish Package to npmjs
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4.1.0
+        name: Install pnpm
+        with:
+          version: 8.15.5
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run build
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/dist/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./webflow.js";
+export {
+  o as webflow
+};

package/dist/webflow.js

@@ -0,0 +1,32 @@
+function d() {
+  document.querySelectorAll('form[data-ft^="https://formtress"]').forEach((r) => {
+    const n = r.dataset.ft;
+    if (!n) return;
+    const s = r.closest(".w-form");
+    if (!s) return;
+    const t = s.querySelector(".w-button"), l = s.querySelector(".w-form-done"), e = s.querySelector(".w-form-fail");
+    if (!t || !l || !e) return;
+    let a = e.querySelector("[data-ft-error]");
+    a || (a = e.firstChild), r.addEventListener("submit", async function(c) {
+      c.preventDefault(), e.style.display = "none";
+      const i = t.value;
+      t.value = t.dataset.wait || "Please wait...";
+      const f = new FormData(r);
+      try {
+        const o = await fetch(n, {
+          method: "POST",
+          body: f,
+          mode: "cors",
+          credentials: "same-origin"
+        }), u = await o.text();
+        t.value = i, o.ok ? (r.style.display = "none", l.style.display = "block") : (console.error("Form submission failed:", o.status, o.statusText), a.textContent = u, e.style.display = "block");
+      } catch (o) {
+        console.error("Error submitting form:", o), a.textContent = "An error occurred. Please try again later.", e.style.display = "block", t.value = i;
+      }
+    });
+  });
+}
+typeof window < "u" && d();
+export {
+  d as default
+};

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "formtress-js",
+  "description": "A tiny library for managing Formtress forms",
+  "private": false,
+  "license": "MIT",
+  "main": "dist/index.js",
+  "version": "0.1.2",
+  "type": "module",
+  "homepage": "https://formtress.com",
+  "author": "Christos Soulaki",
+  "packageManager": "pnpm@8.15.5",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.1",
+    "typescript": "~5.7.2",
+    "vite": "^6.3.1"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { default as webflow } from './webflow'

package/src/webflow/index.ts

@@ -0,0 +1,55 @@
+export default function webflow() {
+  const forms = document.querySelectorAll('form[data-ft^="https://formtress"]') as NodeListOf<HTMLFormElement>
+
+  forms.forEach((form) => {
+    const action = form.dataset.ft as string
+    if (!action) return
+    const formWrapper = form.closest('.w-form')
+    if (!formWrapper) return
+    const submitBtn = formWrapper.querySelector('.w-button') as HTMLInputElement
+    const success = formWrapper.querySelector('.w-form-done') as HTMLElement
+    const fail = formWrapper.querySelector('.w-form-fail') as HTMLElement
+    if (!submitBtn || !success || !fail) return
+
+    let failText = fail.querySelector('[data-ft-error]') as HTMLElement | null
+    if (!failText) {
+      failText = fail.firstChild as HTMLElement
+    }
+
+    form.addEventListener('submit', async function (e: Event) {
+      e.preventDefault()
+      fail.style.display = 'none'
+      const initialButtonText = submitBtn.value
+      submitBtn.value = submitBtn.dataset.wait || 'Please wait...'
+      const formData = new FormData(form)
+      try {
+        const response = await fetch(action, {
+          method: 'POST',
+          body: formData,
+          mode: 'cors',
+          credentials: 'same-origin'
+        })
+        const message = await response.text()
+        submitBtn.value = initialButtonText
+
+        if (response.ok) {
+          form.style.display = 'none'
+          success.style.display = 'block'
+        } else {
+          console.error('Form submission failed:', response.status, response.statusText)
+
+          failText.textContent = message
+          fail.style.display = 'block'
+        }
+      } catch (error) {
+        console.error('Error submitting form:', error)
+        failText.textContent = 'An error occurred. Please try again later.'
+        fail.style.display = 'block'
+        submitBtn.value = initialButtonText
+      }
+    })
+  })
+}
+
+// Auto-initialize if this file is loaded directly via script tag
+if (typeof window !== 'undefined') webflow()

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,18 @@
+import { resolve } from 'path'
+import { defineConfig } from "vite"
+import type { UserConfig } from "vite"
+
+export default defineConfig({
+  base: "./",
+  build: {
+    lib: {
+      entry: {
+        webflow: resolve(__dirname, "src/webflow/index.ts"),
+        index: resolve(__dirname, "src/index.ts"),
+      },
+      name: "formtress",
+      formats: ["es"],
+      fileName: (format, entryName) => `${entryName}.js`,
+    },
+  },
+} satisfies UserConfig)