formtress-js 0.1.4 → 0.1.6

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://badge.fury.io/js/formtress-js.svg)](https://badge.fury.io/js/formtress-js)
 
-`formtress.js` is a tiny library that that submits your forms using javascript, and handles loading states, validation, and error messages. It has different packages for different platforms.
+`formtress.js` is a tiny library that that submits your forms using javascript, and handles loading states, validation, and error messages.
 
 ## Features
 
@@ -10,7 +10,7 @@
 - **Easy to use**: Just add a few attributes to your form and you're good to go.
 - **Built-in validation**: Automatically validates your forms based on the forms you created in Formtress.
 - **Error handling**: Automatically handles errors and displays them to the user.
-- **Platform specific**: Works with Webflow, with more platforms coming soon.
+- **Platform specific**: Built to work with Webflow's forms.
 
 ## Installation
 
@@ -19,7 +19,7 @@
 For Webflow, you can add the script to your project by adding the following code to your Webflow project settings before the closing `</body>` tag (change `latest` to the version you want to use):
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/formtress-js@latest/dist/webflow.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/formtress-js@latest/dist/umd/index.js"></script>
 ```
 > Note: While using @latest is convenient, it's recommended to pin to a specific version in production for stability. Check the version badge above for the current release.
 

package/dist/js/webflow.js

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

package/package.json

@@ -4,7 +4,7 @@
   "private": false,
   "license": "MIT",
   "main": "dist/index.umd.js",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "homepage": "https://formtress.com",
   "author": "Christos Soulaki",

package/src/{webflow/index.ts → webflow.ts}

@@ -1,5 +1,5 @@
-export default function webflow() {
-  const forms = document.querySelectorAll('form[data-ft^="https://formtress"]') as NodeListOf<HTMLFormElement>
+function webflow() {
+  const forms = document.querySelectorAll('form[data-ft]') as NodeListOf<HTMLFormElement>
 
   forms.forEach((form) => {
     const action = form.dataset.ft as string
@@ -11,13 +11,11 @@ export default function webflow() {
     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
-    }
+    const failText = fail.querySelector('[data-ft-error]') || fail.firstChild as HTMLElement
 
     form.addEventListener('submit', async function (e: Event) {
       e.preventDefault()
+      e.stopPropagation()
       fail.style.display = 'none'
       const initialButtonText = submitBtn.value
       submitBtn.value = submitBtn.dataset.wait || 'Please wait...'
@@ -26,8 +24,6 @@ export default function webflow() {
         const response = await fetch(action, {
           method: 'POST',
           body: formData,
-          mode: 'cors',
-          credentials: 'same-origin'
         })
         const message = await response.text()
         submitBtn.value = initialButtonText

package/vite.config.ts

@@ -1,4 +1,4 @@
-import { globSync } from 'glob'
+import { globSync } from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { defineConfig } from "vite"
@@ -7,31 +7,23 @@ export default defineConfig({
   base: "./",
   build: {
     rollupOptions: {
-      input: 'src/index.ts',
-      // input: Object.fromEntries(
-      //   globSync('src/**/*.ts').map(file => [
-      //     // This removes `src/` as well as the file extension from each
-      //     // file, so e.g. src/nested/foo.js becomes nested/foo
-      //     path.relative(
-      //       'src',
-      //       file.slice(0, file.length - path.extname(file).length)
-      //     ),
-      //     // This expands the relative paths to absolute paths, so e.g.
-      //     // src/nested/foo becomes /project/src/nested/foo.js
-      //     fileURLToPath(new URL(file, import.meta.url))
-      //   ])
-      // ),
+      input: Object.fromEntries(
+        globSync('src/**/*.ts').map(file => [
+          // This removes `src/` as well as the file extension from each
+          // file, so e.g. src/nested/foo.js becomes nested/foo
+          path.relative(
+            'src',
+            file.slice(0, file.length - path.extname(file).length)
+          ),
+          // This expands the relative paths to absolute paths, so e.g.
+          // src/nested/foo becomes /project/src/nested/foo.js
+          fileURLToPath(new URL(file, import.meta.url))
+        ])
+      ),
       output: [
         {
-          dir: 'dist/mjs',
+          dir: 'dist/js',
           format: 'es',
-          entryFileNames: '[name].mjs',
-          inlineDynamicImports: false
-        },
-        {
-          dir: 'dist/umd',
-          format: 'umd',
-          name: 'Formtress',
           entryFileNames: '[name].js',
           inlineDynamicImports: false
         },

package/dist/mjs/index.mjs

@@ -1 +0,0 @@
-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();

package/dist/umd/index.js

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

package/src/index.ts

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