chore(examples): add AlpineJS example (withastro#2222)

harrytran998 · Dec 21, 2021 · 5ab3fbb · 5ab3fbb
1 parent 1b418a6
commit 5ab3fbb
Show file tree

Hide file tree

Showing 11 changed files with 146 additions and 0 deletions.
diff --git a/examples/framework-alpine/.gitignore b/examples/framework-alpine/.gitignore
@@ -0,0 +1,18 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+.snowpack/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/examples/framework-alpine/.npmrc b/examples/framework-alpine/.npmrc
@@ -0,0 +1,2 @@
+## force pnpm to hoist 
+shamefully-hoist = true
diff --git a/examples/framework-alpine/.stackblitzrc b/examples/framework-alpine/.stackblitzrc
@@ -0,0 +1,6 @@
+{
+ "startCommand": "npm start",
+ "env": {
+ "ENABLE_CJS_IMPORTS": true
+ }
+}
diff --git a/examples/framework-alpine/README.md b/examples/framework-alpine/README.md
@@ -0,0 +1,10 @@
+# Astro + AlpineJS Example
+
+```
+npm init astro -- --template framework-alpine
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-alpine)
+
+This example showcases Astro working with [AlpineJS](https://alpinejs.dev/).
+
diff --git a/examples/framework-alpine/astro.config.mjs b/examples/framework-alpine/astro.config.mjs
@@ -0,0 +1,13 @@
+// Full Astro Configuration API Documentation:
+// https://docs.astro.build/reference/configuration-reference
+
+// @type-check enabled!
+// VSCode and other TypeScript-enabled text editors will provide auto-completion,
+// helpful tooltips, and warnings if your exported object is invalid.
+// You can disable this by removing "@ts-check" and `@type` comments below.
+
+// @ts-check
+export default /** @type {import('astro').AstroUserConfig} */ ({
+ // No renderers are needed for AlpineJS support, just use Astro components!
+ renderers: [],
+});
diff --git a/examples/framework-alpine/package.json b/examples/framework-alpine/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@example/framework-alpine",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "dev": "astro dev",
+ "start": "astro dev",
+ "build": "astro build",
+ "preview": "astro preview"
+ },
+ "devDependencies": {
+ "astro": "^0.21.13"
+ }
+}
diff --git a/examples/framework-alpine/public/favicon.ico b/examples/framework-alpine/public/favicon.ico
diff --git a/examples/framework-alpine/sandbox.config.json b/examples/framework-alpine/sandbox.config.json
@@ -0,0 +1,11 @@
+{
+ "infiniteLoopProtection": true,
+ "hardReloadOnChange": false,
+ "view": "browser",
+ "template": "node",
+ "container": {
+ "port": 3000,
+ "startScript": "start",
+ "node": "14"
+ }
+}
diff --git a/examples/framework-alpine/src/components/Counter.astro b/examples/framework-alpine/src/components/Counter.astro
@@ -0,0 +1,29 @@
+---
+// Full Astro Component Syntax:
+// https://docs.astro.build/core-concepts/astro-components/
+
+const { initialCount = 0 } = Astro.props;
+---
+
+<div class="counter" x-data=`{ count: ${initialCount} }`>
+ <button x-on:click="count--">-</button>
+ <pre x-text="count">{ initialCount }</pre>
+ <button x-on:click="count++">+</button>
+</div>
+
+<div class="counter-message">
+ <slot />
+</div>
+
+<style>
+.counter {
+ display: grid;
+ font-size: 2em;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ margin-top: 2em;
+ place-items: center;
+}
+.counter-message {
+ text-align: center;
+}
+</style>
diff --git a/examples/framework-alpine/src/pages/index.astro b/examples/framework-alpine/src/pages/index.astro
@@ -0,0 +1,40 @@
+---
+// Component Imports
+import Counter from '../components/Counter.astro'
+
+// Full Astro Component Syntax:
+// https://docs.astro.build/core-concepts/astro-components/
+---
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width" />
+ <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+ <style>
+ html,
+ body {
+ font-family: system-ui;
+ margin: 0;
+ }
+ body {
+ padding: 2rem;
+ }
+ </style>
+
+ <!-- Be sure to include AlpineJS -->
+ <script src="//unpkg.com/alpinejs" defer></script>
+ </head>
+ <body>
+ <main>
+ <!-- Note: no `client:load` necessary since AlpineJS is always included -->
+ <Counter>
+ <h1>Hello, AlpineJS!</h1>
+ </Counter>
+
+ <!-- Note: pass props to Astro components to initialize Alpine with a certain state -->
+ <Counter initialCount={5}>
+ <h2>Use Astro to pass in server-side props</h2>
+ </Counter>
+ </main>
+ </body>
+</html>
diff --git a/examples/framework-alpine/tsconfig.json b/examples/framework-alpine/tsconfig.json
@@ -0,0 +1,3 @@
+{
+ "moduleResolution": "node"
+}