Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Create a working sample of an AlpineJS hello world

Browse source
This commit is contained in:
Eli Ribble 2026-03-21 02:04:11 +00:00
parent 701f4853b5
commit 976a29b7d7
No known key found for this signature in database
6 changed files with 3795 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

9
README.md
View file

@ -84,6 +84,15 @@ This uses [goose](https://github.com/pressly/goose). You can use the goose comma
> GOOSE_DRIVER=postgres GOOSE_DBSTRING="dbname=nidus-sync sslmode=disable" goose up > GOOSE_DRIVER=postgres GOOSE_DBSTRING="dbname=nidus-sync sslmode=disable" goose up
``` ```
### typescript
You can generate the TypeScript with:
```
esbuild ts/main.ts --bundle --outfile=html/static/bundle.js --format=iife --minify
```
The only page that works right now is `https://sync.nidus.cloud/template-test`
### watchexec ### watchexec
For iterating on styles For iterating on styles

9
flake.nix
View file

@ -11,15 +11,15 @@
flake-utils.lib.eachDefaultSystem (system: flake-utils.lib.eachDefaultSystem (system:
let let
pkgs = nixpkgs.legacyPackages.${system}; pkgs = nixpkgs.legacyPackages.${system};
projPkg = proj.packages.${system}.default; projPkg = proj.packages.${system}.default;
# Override pkgs.proj with your custom proj # Override pkgs.proj with your custom proj
customPkgs = pkgs // { customPkgs = pkgs // {
proj = proj.packages.${system}.default; proj = proj.packages.${system}.default;
}; };
package = pkgs.callPackage ./default.nix { package = pkgs.callPackage ./default.nix {
proj = projPkg; proj = projPkg;
}; };
in in
{ {
packages.default = package; packages.default = package;
@ -31,7 +31,7 @@
pkgs.air pkgs.air
pkgs.autoprefixer pkgs.autoprefixer
pkgs.dart-sass pkgs.dart-sass
pkgs.esbuild pkgs.esbuild
pkgs.go pkgs.go
pkgs.goose pkgs.goose
pkgs.gotools pkgs.gotools
@ -40,6 +40,7 @@
pkgs.prettier pkgs.prettier
pkgs.prettier-plugin-go-template pkgs.prettier-plugin-go-template
proj.packages.${system}.default proj.packages.${system}.default
pkgs.typescript
pkgs.watchexec pkgs.watchexec
]; ];
}; };

16
html/template/sync/template-test.html
View file

@ -1,8 +1,18 @@
<html> <!doctype html>
<html lang="en">
<head> <head>
<script src="/static/bundle.js"></script> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alpine + TypeScript Demo</title>
</head> </head>
<body> <body>
<h1>Hi Eli 2</h1> <div x-data="greeting">
<h1 x-text="message"></h1>
<input type="text" x-model="name" placeholder="Enter your name" />
<p>Hello, <span x-text="name"></span>!</p>
<button @click="updateMessage">Change Message</button>
</div>
<script src="/static/bundle.js"></script>
</body> </body>
</html> </html>

23
ts/main.ts
View file

@ -1,4 +1,19 @@
// This will run when the page loads import Alpine from './vendor/alpinejs-3.15.8.js';
window.addEventListener('DOMContentLoaded', () => {
console.log('Hello World'); interface GreetingComponent {
}); message: string;
name: string;
updateMessage(): void;
}
Alpine.data('greeting', (): GreetingComponent => ({
message: 'Welcome to Alpine + TypeScript!',
name: 'World',
updateMessage() {
this.message = 'Message updated at ' + new Date().toLocaleTimeString();
}
}));
Alpine.start();

1
ts/vendor/alpine-3.15.8.d.ts vendored Normal file
View file

@ -0,0 +1 @@
Couldn't find the requested file /packages/alpinejs/types/index.d.ts in alpinejs.

3748
ts/vendor/alpinejs-3.15.8.js vendored Normal file
View file

File diff suppressed because it is too large Load diff