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
```
### 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
For iterating on styles

1
flake.nix
View file

@ -40,6 +40,7 @@
pkgs.prettier
pkgs.prettier-plugin-go-template
proj.packages.${system}.default
pkgs.typescript
pkgs.watchexec
];
};

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

@ -1,8 +1,18 @@
<html>
<!doctype html>
<html lang="en">
<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>
<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>
</html>

23
ts/main.ts
View file

@ -1,4 +1,19 @@
// This will run when the page loads
window.addEventListener('DOMContentLoaded', () => {
console.log('Hello World');
});
import Alpine from './vendor/alpinejs-3.15.8.js';
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