feat(demo): build live demo

Author: softbeehive

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+dist-demo
 dist-ssr
 *.local
 

biome.json

@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["dist"]
+    "ignore": ["dist", "dist-demo"]
   },
   "formatter": {
     "enabled": true,

examples/DemoApp.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-y-12 container px-6 py-10 max-w-xl">
+  <div class="flex flex-col gap-y-12 container p-10 max-w-2xl mx-auto">
     <h1 class="text-3xl font-semibold">Demo Vue Stripe.js</h1>
 
     <section>
@@ -13,6 +13,8 @@
       <PaymentElementDeferred />
     </section>
 
+    <hr class="border-gray-300">
+
     <section>
       <h2 class="text-2xl font-semibold">Card Element</h2>
       <p class="pt-1 pb-4">More recent example. Stripe recommends using Payment Element instead of the Card - 
@@ -24,12 +26,16 @@
       <CardElement />
     </section>
 
+    <hr class="border-gray-300">
+
     <section>
       <h2 class="text-2xl font-semibold">Card Element (Legacy)</h2>
       <p class="pt-1 pb-4">How we implemented card payments a few years ago.</p>
       <CardElementLegacy />
     </section>
 
+    <hr class="border-gray-300">
+    
     <section>
       <h2 class="text-2xl font-semibold">Express Checkout Element</h2>
       <p class="pt-1 pb-4">Use your publishable key and enable relevant payment methods, e.g. PayPal - 

package.json

@@ -14,6 +14,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
+    "build:demo": "vite --config vite.demo.config.ts build",
     "check:types": "publint && attw --pack . --ignore-rules=cjs-resolves-to-esm",
     "ci": "biome check && pnpm run build && pnpm run check:types"
   },

vite.demo.config.ts

@@ -0,0 +1,11 @@
+import tailwindcss from "@tailwindcss/vite"
+import vue from "@vitejs/plugin-vue"
+import { defineConfig } from "vite"
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), tailwindcss()],
+  build: {
+    outDir: "dist-demo",
+  },
+})

vue-stripe-js.code-workspace

@@ -20,6 +20,9 @@
     },
     "[jsonc]": {
       "editor.defaultFormatter": "biomejs.biome"
+    },
+    "[json]": {
+      "editor.defaultFormatter": "biomejs.biome"
     }
   }
 }