JLarky · JLarky · Mar 9, 2023 · Mar 9, 2023 · Mar 9, 2023
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -4,6 +4,7 @@ import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
 import solid from '@astrojs/solid-js';
 import partytown from '@astrojs/partytown';
+import vercel from '@astrojs/vercel/serverless';
 import { defineAstro } from 'qgp';
 
 import { common } from './qgp.config.mjs';
@@ -13,5 +14,7 @@ export default defineConfig({
 	site: 'https://qgp.app',
 	integrations: [mdx(), sitemap(), solid(), partytown({ config: { forward: ['dataLayer.push'] } })],
 	vite: defineAstro(common, {}),
+	output: 'server',
 	server: { port: 3000 },
+	adapter: vercel(),
 });
diff --git a/package.json b/package.json
@@ -20,10 +20,14 @@
     "@astrojs/rss": "^2.1.0",
     "@astrojs/sitemap": "^1.0.1",
     "@astrojs/solid-js": "^2.0.2",
+    "@astrojs/vercel": "^3.2.0",
+    "@qgp-js/bling": "^0.4.3",
     "@solidjs/router": "^0.7.0",
     "@tailwindcss/typography": "^0.5.9",
     "@total-typescript/ts-reset": "^0.3.2",
+    "@types/jquery": "^3.5.16",
     "astro": "^2.0.10",
+    "jquery": "^3.6.4",
     "npm-run-all": "^4.1.5",
     "qgp": "0.0.12",
     "solid-element": "^1.6.3",

diff --git a/qgp.config.mjs b/qgp.config.mjs
@@ -2,9 +2,11 @@
 import solid from 'vite-plugin-solid';
 import { defineCommon, defineVite } from 'qgp';
 import checker from 'vite-plugin-checker';
+import { bling } from '@qgp-js/bling/vite';
 
 export const common = defineCommon({
 	vite: {
+		plugins: [bling()],
 		build: {
 			sourcemap: true,
 		},

diff --git a/src/components/jquery/app.ts b/src/components/jquery/app.ts
@@ -0,0 +1,36 @@
+import { fetch$ } from '@qgp-js/bling';
+import $ from 'jquery';
+
+export const increment = fetch$(
+	async function ({ count, button }: { count: number; button: '+' | '-' }) {
+		// await new Promise((r) => setTimeout(r, 1000));
+		return {
+			count: count + (button === '+' ? 1 : -1),
+		};
+	},
+	{
+		method: 'POST',
+	}
+);
+
+const run = () => {
+	const div = $('.counter');
+	const pre = div.find('pre');
+	let count = Number(div[0].dataset.count || 0);
+	div.find('button').on('click', async function () {
+		const res = await increment({ count, button: $(this).text() as '+' | '-' });
+		count = res.count;
+		pre.text(count);
+	});
+};
+
+typeof document === 'object' && run();
+
+export const registerHandler = (x: number) => {
+	// this is done during SSR so that bling server know that we have a handler for this route
+	// it's not necessary to do it in the real app that uses real SSR, this is jQuery 😅
+	// otherise this function is not getting included into server bundle
+	if (x) {
+		increment;
+	}
+};
diff --git a/src/pages/[...bling].ts b/src/pages/[...bling].ts
@@ -0,0 +1,18 @@
+import type { APIRoute } from 'astro';
+import { handleEvent, hasHandler } from '@qgp-js/bling/server';
+
+export const all: APIRoute = async ({ params, request }) => {
+	console.log('params', params);
+	const id = params.bling;
+	if (hasHandler('/' + id)) {
+		const res = await handleEvent({ request });
+		if (!res) {
+			throw new Error('failed to handle event');
+		}
+		return res;
+	}
+	return new Response(null, {
+		status: 404,
+		statusText: 'Not found',
+	});
+};
diff --git a/src/pages/jquery/index.astro b/src/pages/jquery/index.astro
@@ -0,0 +1,26 @@
+---
+import { registerHandler } from '../../components/jquery/app';
+
+registerHandler(0);
+
+const initialCount = 1;
+---
+
+<body>
+	<h1>Demo jQuery</h1>
+	<div class="counter" data-count={initialCount}>
+		<button>-</button>
+		<pre>{ initialCount }</pre>
+		<button>+</button>
+	</div>
+	<script src="../../components/jquery/app.ts"></script>
+	<style>
+		.counter {
+			display: grid;
+			font-size: 2em;
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+			margin-top: 2em;
+			place-items: center;
+		}
+	</style>
+</body>