stepanjakl

AlpineJS with ViteJS

ViteJS is a modern JavaScript build tool that can be used to build modern JavaScript frameworks including ReactJS and VueJS to name only two. In this tutorial you will explore how to use ViteJS with AlpineJS. This will prepare you for using ViteJS with ReactJS or other modern web framework.

Modern JavaScript built tools like ViteJS, ParcelJS & react-create-app (built with webpack) embrace ES Modules. Meaning that external dependencies are installed via npm and imported. So no more script, style or link tags. HTML, CSS & JavaScript are bundled into compact bundle.

Create app using Vite

Let's start exploring ViteJS by creating a new application. Using this command:

	<html>
	<head>
	<title>Stripe Gradient</title>
	</head>
	<body>
	<canvas id="gradient-canvas" data-js-darken-top data-transition-in>
	<!--
	Remove data-js-darken-top to keep the same brightness in the upper part of the canvas
	-->
	</canvas>

	await new Promise(function (resolve) {
	setTimeout(function () {
	resolve();
	}, 1000);
	});

	// ... Can be shortened to:

	await new Promise(function (resolve) {
	setTimeout(resolve, 1000);


	/*
	* Stripe WebGl Gradient Animation
	* All Credits to Stripe.com
	* ScrollObserver functionality to disable animation when not scrolled into view has been disabled and
	* commented out for now.
	* https://kevinhufnagl.com
	*/

	<div x-data="googlePlacesAutocomplete" class="grid grid-cols-3 gap-2">
	<input type="text" x-model="address.address1" x-ref="googleAutocomplete" autocomplete="chrome-off" class="col-span-3 sm:col-span-2 order-1" placeholder="Add‌ress">
	<input type="text" x-model="address.address2" placeholder="Apt/Ste" class="col-span-3 sm:col-span-1 order-2">
	<input type="text" x-model="address.city" placeholder="Ci‌ty" class="col-span-1" x-bind:class="`order-${order.locality}`">
	<select x-model="address.state" placeholder="St‌ate" class="col-span-1 order-4" x-show="isUSA">
	<option value="">State</option>
	<option value="AL">Alabama</option>
	<option value="AK">Alaska</option>
	<option value="AZ">Arizona</option>
	<option value="AR">Arkansas</option>

	// Turn all HTML <a> elements into client side router links, no special framework-specific <Link> component necessary!
	// Example using the Next.js App Router.
	import { useRouter } from 'next/navigation';
	import { useEffect } from 'react';

	function useLinkHandler() {
	let router = useRouter();

	useEffect(() => {
	let onClick = e => {

	// MARK: - SceneDelegate
	class SceneDelegate: UIResponder, UIWindowSceneDelegate {

	var window: UIWindow?

	func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
	let navigationController = UINavigationController(navigationBarClass: NavigationBar.self, toolbarClass: nil)
	(navigationController.navigationBar as! NavigationBar).preferredHeight = 88
	navigationController.setViewControllers([ViewController()], animated: false)

	//
	// CDView.swift
	// CD
	//
	// Created by Daniel Kuntz on 7/3/23.
	//

	import SwiftUI

	struct ShapeWithHole: Shape {

	//
	// ContentView.swift
	// Airdrop Demo
	//
	// Created by Daniel Kuntz on 7/30/23.
	//

	import SwiftUI

	struct ContentView: View {

	import z from "zod";

	export async function safeFetch<T>(
	schema: z.Schema<T>,
	input: RequestInfo,
	init?: RequestInit
	): Promise<T> {
	const response = await fetch(input, init);

	if (!response.ok) {