getting basic astro-react demo working

examples/astro-react-demo/.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

examples/astro-react-demo/README.md

@@ -0,0 +1,13 @@
+# Astro + React Example
+
+```sh
+npm create astro@latest -- --template framework-react
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-react)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-react)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/framework-react/devcontainer.json)
+
+This example showcases Astro working with [React](https://react.dev).
+
+Write your React components as `.jsx` or `.tsx` files in your project.

examples/astro-react-demo/astro.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+
+// https://astro.build/config
+export default defineConfig({
+	// Enable React to support React JSX components.
+	integrations: [react()],
+});

examples/astro-react-demo/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "astro-react-demo",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "astro": "astro",
+    "build": "astro check && astro build",
+    "dev": "astro dev",
+    "preview": "astro preview",
+    "start": "astro dev"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.3",
+    "@astrojs/react": "^3.6.2",
+    "@formspree/react": "*",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "astro": "^4.15.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.5.4"
+  }
+}

examples/astro-react-demo/src/components/ContactForm.css

@@ -0,0 +1,59 @@
+.contact-form {
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.contact-form h2 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.contact-form label {
+  display: block;
+  margin-bottom: 5px;
+  color: #555;
+}
+
+.contact-form input,
+.contact-form textarea {
+  width: calc(100% - 20px);
+  padding: 10px;
+  margin-bottom: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+.contact-form textarea {
+  height: 150px;
+  resize: vertical;
+}
+
+.contact-form button {
+  display: block;
+  width: 100%;
+  padding: 12px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.contact-form button:hover {
+  background-color: #0056b3;
+}
+
+.contact-form .error {
+  color: #dc3545;
+  font-size: 14px;
+  margin-top: -10px;
+  margin-bottom: 10px;
+}

examples/astro-react-demo/src/components/ContactForm.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import './ContactForm.css';
+
+import { useForm, ValidationError } from '@formspree/react';
+
+function ContactForm() {
+  const [state, handleSubmit] = useForm("YOUR_FORM_ID");
+
+  if (state.succeeded) {
+    return <p className="success-message">Thanks for your submission!</p>;
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="contact-form">
+      <label htmlFor="email" className="form-label">
+        Email Address
+      </label>
+      <input
+        id="email"
+        type="email" 
+        name="email"
+        className="form-input"
+      />
+      <ValidationError 
+        prefix="Email" 
+        field="email"
+        errors={state.errors}
+        className="error-message"
+      />
+      <label htmlFor="message" className="form-label">
+        Message
+      </label>
+      <textarea
+        id="message"
+        name="message"
+        className="form-textarea"
+      />
+      <ValidationError 
+        prefix="Message" 
+        field="message"
+        errors={state.errors}
+        className="error-message"
+      />
+      <button type="submit" disabled={state.submitting} className="submit-button">
+        Submit
+      </button>
+    </form>
+  );
+}
+
+export default ContactForm;

examples/astro-react-demo/src/components/Counter.css

@@ -0,0 +1,11 @@
+.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;
+}

examples/astro-react-demo/src/components/Counter.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import './Counter.css';
+
+export default function Counter({
+	children,
+	count: initialCount,
+}: {
+	children: JSX.Element;
+	count: number;
+}) {
+	const [count, setCount] = useState(initialCount);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div className="counter">
+				<button onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button onClick={add}>+</button>
+			</div>
+			<div className="counter-message">{children}</div>
+		</>
+	);
+}

examples/astro-react-demo/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />

examples/astro-react-demo/src/pages/index.astro

@@ -0,0 +1,31 @@
+---
+// Component Imports
+import ContactForm from '../components/ContactForm'; 
+
+// Full Astro Component Syntax:
+// https://docs.astro.build/basics/astro-components/
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<style>
+			html,
+			body {
+				font-family: system-ui;
+				margin: 0;
+			}
+			body {
+				padding: 2rem;
+			}
+		</style>
+	</head>
+	<body>
+		<main>
+			<ContactForm client:visible />
+		</main>
+	</body>
+</html>

examples/astro-react-demo/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}

package.json

@@ -1,4 +1,5 @@
 {
+  "name": "formspree-js",
   "private": true,
   "workspaces": [
     "packages/*",
@@ -8,7 +9,9 @@
     "build": "turbo run build",
     "changeset": "changeset",
     "clean": "turbo run clean && rm -rf node_modules",
-    "dev": "turbo run dev",
+    "dev": "echo \"dev what? See dev:??? scripts in package.json\"",
+    "dev:astro-react": "turbo run dev watch --parallel --filter=astro-react-demo --filter=@formspree/react --filter=@formspree/core",
+    "dev:react": "echo 'dev what? See dev:??? scripts in package.json'",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "lint": "turbo run lint",
     "prepare": "husky install",
@@ -40,5 +43,6 @@
     "tsup": "^6.2.2",
     "turbo": "latest",
     "typescript": "^5.1.3"
-  }
+  },
+  "packageManager": "[email protected]"
 }

packages/formspree-astro/README.md

@@ -0,0 +1 @@
+# `formspree-astro`

packages/formspree-astro/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "formspree-astro",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "echo 'Add build script here'",
+    "dev": "echo 'Add dev script here'",
+    "lint": "echo 'Add lint script here'",
+    "test": "echo 'Add test script here'"
+  }
+}

packages/formspree-core/package.json

@@ -19,18 +19,27 @@
     "Ismail Ghallou"
   ],
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist/**"
   ],
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --minify",
     "clean": "rm -rf dist && rm -rf node_modules",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --sourcemap --watch",
+    "dev": "echo 'Use watch instead of dev for this package'",
     "lint": "eslint ./src ./test",
     "test": "jest",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "watch": "tsup src/index.ts --format esm,cjs --dts --sourcemap --watch"
   },
   "dependencies": {
     "@stripe/stripe-js": "^1.35.0"

packages/formspree-react/package.json

@@ -26,10 +26,11 @@
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react --minify",
     "clean": "rm -rf dist && rm -rf node_modules",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --sourcemap --watch",
+    "dev": "echo 'Use watch instead of dev for this package'",
     "lint": "eslint ./src ./test",
     "test": "jest",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "watch": "tsup src/index.ts --format esm,cjs --dts --external react --sourcemap --watch"
   },
   "dependencies": {
     "@formspree/core": "^3.0.2",

packages/formspree-react/tsconfig.json

@@ -8,7 +8,10 @@
     "declarationDir": "dist/types",
     "declarationMap": true,
     "jsx": "react",
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "paths": {
+      "@formspree/core": ["../formspree-core/src"]
+    }
   },
   "include": ["src/**/*", "test/**/*"],
   "exclude": ["node_modules", "dist"]

turbo.json

@@ -1,17 +1,21 @@
 {
   "$schema": "https://turbo.build/schema.json",
   "globalDependencies": ["tsconfig.json"],
-  "pipeline": {
+  "tasks": {
     "build": {
       "outputs": ["build/**", "dist/**"],
       "dependsOn": ["^build"]
     },
     "clean": {
       "cache": false
     },
+    "watch": {
+      "cache": false,
+      "persistent": true
+    },
     "dev": {
-      "dependsOn": ["^dev"],
-      "cache": false
+      "cache": false,
+      "persistent": true
     },
     "lint": {},
     "test": {},