From 5ab3fbb3b1ea9f9382699a5538f59c8d7c0c6e5f Mon Sep 17 00:00:00 2001
From: Nate Moore <natemoo-re@users.noreply.github.com>
Date: Tue, 21 Dec 2021 11:45:23 -0600
Subject: [PATCH] chore(examples): add AlpineJS example (#2222)

---
 examples/framework-alpine/.gitignore          |  18 ++++++++
 examples/framework-alpine/.npmrc              |   2 +
 examples/framework-alpine/.stackblitzrc       |   6 +++
 examples/framework-alpine/README.md           |  10 +++++
 examples/framework-alpine/astro.config.mjs    |  13 ++++++
 examples/framework-alpine/package.json        |  14 ++++++
 examples/framework-alpine/public/favicon.ico  | Bin 0 -> 4286 bytes
 examples/framework-alpine/sandbox.config.json |  11 +++++
 .../src/components/Counter.astro              |  29 +++++++++++++
 .../framework-alpine/src/pages/index.astro    |  40 ++++++++++++++++++
 examples/framework-alpine/tsconfig.json       |   3 ++
 11 files changed, 146 insertions(+)
 create mode 100644 examples/framework-alpine/.gitignore
 create mode 100644 examples/framework-alpine/.npmrc
 create mode 100644 examples/framework-alpine/.stackblitzrc
 create mode 100644 examples/framework-alpine/README.md
 create mode 100644 examples/framework-alpine/astro.config.mjs
 create mode 100644 examples/framework-alpine/package.json
 create mode 100644 examples/framework-alpine/public/favicon.ico
 create mode 100644 examples/framework-alpine/sandbox.config.json
 create mode 100644 examples/framework-alpine/src/components/Counter.astro
 create mode 100644 examples/framework-alpine/src/pages/index.astro
 create mode 100644 examples/framework-alpine/tsconfig.json

diff --git a/examples/framework-alpine/.gitignore b/examples/framework-alpine/.gitignore
new file mode 100644
index 000000000..d436c6dad
--- /dev/null
+++ 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
new file mode 100644
index 000000000..0cc653b2c
--- /dev/null
+++ b/examples/framework-alpine/.npmrc
@@ -0,0 +1,2 @@
+## force pnpm to hoist 
+shamefully-hoist = true
\ No newline at end of file
diff --git a/examples/framework-alpine/.stackblitzrc b/examples/framework-alpine/.stackblitzrc
new file mode 100644
index 000000000..43798ecff
--- /dev/null
+++ b/examples/framework-alpine/.stackblitzrc
@@ -0,0 +1,6 @@
+{
+  "startCommand": "npm start",
+  "env": {
+    "ENABLE_CJS_IMPORTS": true
+  }
+}
\ No newline at end of file
diff --git a/examples/framework-alpine/README.md b/examples/framework-alpine/README.md
new file mode 100644
index 000000000..d15834999
--- /dev/null
+++ 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
new file mode 100644
index 000000000..015eeff7c
--- /dev/null
+++ 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
new file mode 100644
index 000000000..ad3875198
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000000000000000000000000000000..578ad458b8906c08fbed84f42b045fea04db89d1
GIT binary patch
literal 4286
zcmchZF=!M)6ox0}Fc8GdTHG!cdIY>nA!3n2f|wxIl0rn}Hl#=uf>?-!2r&jMEF^_k
zh**lGut*gwBmoNv7AaB&2~nbzULg{WBhPQ{ZVzvF_HL8Cb&hv$_s#qN|IO^o>?+mA
zuTW6tU%k~z<&{z+7$G%*nRsTcEO|90xy<-G5&JTt%CgZZCDT4%R?+{Vd^wh>P8_)}
z`+dF$HQb9!>1o`Ivn;GInlCw{9T@Rt%q+d^T3Ke%cxkk;$v`{s^zCB9nHAv6w$Vbn
z8fb<+eQTNM`;rf9#obfGnV#3+OQEUv4gU;{oA@zol<TYbS?nEF<^Ey@`h)N;!GF9X
zw=YHV20P|-=`6YWLdnykk+f-vgpveGo^!eAX>%keY9-e>4W>p7AHmH~&!P7f7!Uj`
zwgFeQ=<3G4O;mwWO`L!=R-=y3_~-DPjH3W^3f&jjCfC$o#|oGaahSL`_=f?$&Aa+W
z2h8oZ+@?NUcjGW|aWJfbM*ZzxzmCPY`b~RobNrrj=rd`=)8-j`iSW64@0_b6?;GYk
zNB+-fzOxlqZ?`y{OA$WigtZXa8)#p#=DPYxH=VeC_Q5q9Cv`mvW6*zU&Gnp1;oPM6
zaK_B3j(l^FyJgYeE9RrmDyhE7W2}}nW%ic#0v@i1E!yTey$W)U>fyd+<EF0ZfRpPx
z)*R2d9^@R=!>!@2hWQ!Wa==NAtKoj`f3tp4y$Al`e;?)76?AjdaRR>|?&r)~3Git>
zb1)a?uiv|R0_{m#A9c;7)eZ1y6l@yQ#oE*>(Z2fG-&&smPa2QTW>m*^K65^~`coP$
z8y5Y?iS<4Gz{Zg##$1mk)u-0;X|!xu^FCr;ce~X<&UWE&pBgqfYmEJTzpK9I%vr%b
z3Ksd6qlPJLI%HFfeXK_^|BXiKZC>Ocu(Kk6hD3G-8us<O$gg^m)I`Q>LzVG^q00Qh
gz)s7ge@$ApxGu7=(6IGIk+uG&HTev01^#CH3$(Wk5&!@I

literal 0
HcmV?d00001

diff --git a/examples/framework-alpine/sandbox.config.json b/examples/framework-alpine/sandbox.config.json
new file mode 100644
index 000000000..9178af77d
--- /dev/null
+++ 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
new file mode 100644
index 000000000..24140ca16
--- /dev/null
+++ 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
new file mode 100644
index 000000000..3046c0aa6
--- /dev/null
+++ 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
new file mode 100644
index 000000000..44465b140
--- /dev/null
+++ b/examples/framework-alpine/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "moduleResolution": "node"
+}