- 
+ 
Next.js-style web framework in Zig. Zero Node.js.
+ +curl -fsSL https://merjs.trilok.ai/install.sh | bashOr with wget:
+wget -qO- https://merjs.trilok.ai/install.sh | bashmer init myapp
+cd myapp
+mer devv0.2.5
+ + diff --git a/docs/install.sh b/docs/install.sh new file mode 100755 index 0000000..b620eb0 --- /dev/null +++ b/docs/install.sh @@ -0,0 +1,111 @@ +#!/bin/bash +# install.sh — One-liner installer for merjs +# Usage: curl -fsSL https://merjs.trilok.ai/install.sh | bash + +set -e + +REPO="justrach/merjs" +INSTALL_DIR="${INSTALL_DIR:-/usr/local/bin}" +VERSION="${VERSION:-latest}" + +detect_os() { + case "$(uname -s)" in + Linux*) echo "linux";; + Darwin*) echo "macos";; + *) echo "unknown";; + esac +} + +detect_arch() { + case "$(uname -m)" in + x86_64|amd64) echo "x86_64";; + arm64|aarch64) echo "arm64";; + *) echo "unknown";; + esac +} + +OS=$(detect_os) +ARCH=$(detect_arch) + +if [ "$OS" = "unknown" ] || [ "$ARCH" = "unknown" ]; then + echo "Error: Unsupported platform: ${OS}/${ARCH}" + exit 1 +fi + +echo "🚀 merjs installer" +echo " Platform: ${OS}/${ARCH}" +echo " Install dir: ${INSTALL_DIR}" +echo "" + +# Get latest version +if [ "$VERSION" = "latest" ]; then + echo "📦 Fetching latest version..." + VERSION=$(curl -s "https://api.github.com/repos/${REPO}/releases/latest" | grep '"tag_name":' | sed -E 's/.*"([^"]+)".*/\1/') + if [ -z "$VERSION" ]; then + VERSION="v0.2.5" + fi +fi + +echo " Version: ${VERSION}" + +# Map to release asset naming +if [ "$OS" = "macos" ]; then + if [ "$ARCH" = "arm64" ]; then + ASSET="mer-macos-aarch64" + else + ASSET="mer-macos-x86_64" + fi +else + if [ "$ARCH" = "arm64" ]; then + ASSET="mer-linux-aarch64" + else + ASSET="mer-linux-x86_64" + fi +fi + +URL="https://github.com/${REPO}/releases/download/${VERSION}/${ASSET}" + +TMP_DIR=$(mktemp -d) +trap "rm -rf $TMP_DIR" EXIT + +echo "⬇️ Downloading ${ASSET}..." +if ! curl -fsSL "$URL" -o "$TMP_DIR/mer"; then + echo "Error: Failed to download ${URL}" + echo "The release may not exist yet. Build from source:" + echo " git clone https://github.com/${REPO}.git" + echo " cd merjs && zig build cli" + exit 1 +fi + +echo "🔧 Installing..." + +if [ -w "$INSTALL_DIR" ]; then + SUDO="" +else + echo " (may prompt for sudo password)" + SUDO="sudo" +fi + +$SUDO mkdir -p "$INSTALL_DIR" +$SUDO cp "$TMP_DIR/mer" "${INSTALL_DIR}/mer" +$SUDO chmod +x "${INSTALL_DIR}/mer" + +if command -v mer &> /dev/null; then + INSTALLED_VERSION=$(mer --version 2>/dev/null || echo "unknown") + echo "" + echo "✅ merjs installed successfully!" + echo "" + echo " Version: ${INSTALLED_VERSION}" + echo " Location: $(which mer)" + echo "" + echo "Next steps:" + echo " mer init myapp # Create a new project" + echo " mer dev # Start dev server" +else + echo "⚠️ mer installed but not in PATH" + echo " Add this to your shell profile:" + echo " export PATH=\"${INSTALL_DIR}:\$PATH\"" +fi + +echo "" +echo "Documentation: https://github.com/justrach/merjs" diff --git a/docs/mercss-nextjs.md b/docs/mercss-nextjs.md new file mode 100644 index 0000000..e982dc1 --- /dev/null +++ b/docs/mercss-nextjs.md @@ -0,0 +1,128 @@ +# mercss in Next.js? Feasibility Analysis + +## Question +> Can mercss be used in a Next.js app? What are the obstacles? + +## Short Answer +**No, not directly.** mercss is specifically designed for Zig/merjs. For Next.js, use **Tailwind CSS** - it's already perfect for that ecosystem. + +## Why mercss ≠ Next.js + +### 1. Language Mismatch +| mercss | Next.js | +|--------|---------| +| Zig (systems language) | JavaScript/TypeScript | +| Compile-time evaluation | Runtime/build-time | +| `@import("mercss")` | `npm install tailwindcss` | + +### 2. Build System Incompatibility +``` +mercss flow: +Zig source → Zig compiler → CSS (at comptime) + +Next.js flow: +TSX/JSX → Webpack/Turbopack → Bundled JS + PostCSS → CSS +``` + +### 3. Import Systems Don't Align +- mercss: `@import("mercss")` - Zig module system +- Next.js: `import styles from './styles.css'` - JS module system + +### 4. Runtime vs Compile-time +- mercss generates CSS **during Zig compilation** +- Next.js expects CSS **during webpack build** +- No bridge exists between these + +## Potential Integration Approaches (All Have Issues) + +### Option A: CLI Tool +Create a `mercss-cli` that: +1. Scans JS/TS files for style definitions +2. Generates CSS at build time +3. Outputs `.css` file for Next.js + +**Problem:** +- Where do you define styles? In JS comments? Separate file? +- Loses type-safety (Zig's advantage) +- Just becomes a worse Tailwind + +### Option B: WASM Bridge +Compile mercss to WASM, run in Node.js during Next.js build. + +**Problem:** +- Complex build pipeline +- Still need to define styles somewhere +- Overhead for marginal benefit + +### Option C: Schema/JSON Based +Define styles in JSON, both Zig and JS read it. + +**Problem:** +- Loses compile-time type safety +- Loses Zig's comptime power +- Just JSON config like Tailwind + +### Option D: Tailwind Plugin +Create a Tailwind plugin with mercss-like conventions. + +**Problem:** +- Not actually mercss +- Just different Tailwind config +- No Zig involved + +## Recommendation + +**Use Tailwind CSS for Next.js.** It's: +- ✅ Mature ecosystem +- ✅ IDE support (IntelliSense) +- ✅ Perfect Next.js integration +- ✅ JIT compiler for arbitrary values +- ✅ Huge community + +**Use mercss for merjs.** It's: +- ✅ Type-safe at compile time +- ✅ Zero build overhead (Zig is the build) +- ✅ No purging needed +- ✅ Integrates with Zig's comptime power + +## What mercss Gives You (That Tailwind Can't) + +```zig +// Type-safe design tokens +const Button = mercss.Component(.{ + .background = DesignSystem.colors.primary, // Compile error if wrong + .padding = DesignSystem.spacing.md, // Type-safe spacing +}); + +// Zig knows all components at compile time +// No scanning, no purging, no build step +``` + +Tailwind can't do this because: +- JS doesn't have comptime +- Can't know all classes at build time (must scan files) +- Needs PurgeCSS to remove unused styles + +## The Real Value of mercss + +mercss isn't trying to replace Tailwind in Next.js. It's bringing Tailwind-like ergonomics to **Zig web development**. + +**merjs + mercss = Next.js + Tailwind for Zig** + +## If You Really Want It + +You could theoretically: +1. Define styles in a `.zig` file +2. Run `zig build css` to generate `.css` +3. Import that CSS in Next.js + +But at that point... just use Tailwind. + +## Conclusion + +**Different ecosystems, different tools.** + +- Next.js → Tailwind CSS +- merjs → mercss + +Don't cross the streams. Use the right tool for the job. diff --git a/docs/mercss.md b/docs/mercss.md new file mode 100644 index 0000000..7d2421f --- /dev/null +++ b/docs/mercss.md @@ -0,0 +1,184 @@ +# mercss - Compile-time Atomic CSS for merjs + +mercss generates type-safe, atomic CSS at **compile time** using Zig's `comptime`. Unlike Tailwind CSS which needs a build pipeline (PostCSS → JIT → Purge), mercss generates CSS during Zig compilation with **zero runtime cost**. + +## Quick Start + +```zig +const mer = @import("mer"); +const mercss = mer.mercss; + +// Define component styles at compile time +const Button = mercss.Component(.{ + .background = "#3b82f6", + .color = "white", + .padding = "12px 24px", + .border_radius = "8px", + .font_weight = "600", +}); + +// Use in your page +pub const meta: mer.Meta = .{ + .extra_head = "", +}; + +pub fn render(req: mer.Request) mer.Response { + return mer.render(req.allocator, + h.button(.{ .class = Button.classes }, "Click Me") + ); +} +``` + +## How It Works + +1. **Define styles** as Zig structs with design tokens +2. **Compile time**: Zig analyzes the struct fields +3. **CSS generation**: One atomic rule per property (`.mcss-padding{padding:12px}`) +4. **Class generation**: Component gets all classes (`.mcss-padding .mcss-background`) +5. **Zero runtime**: All strings are comptime constants + +## Comparison with Tailwind CSS + +| Feature | Tailwind CSS | mercss (merjs) | +|---------|--------------|----------------| +| **Build step** | PostCSS → JIT → PurgeCSS | ❌ None (Zig comptime) | +| **File scanning** | Scans all source files | ❌ Not needed (comptime knows all) | +| **Type safety** | Runtime errors for wrong classes | ✅ Compile-time errors | +| **Config** | `tailwind.config.js` | ✅ Zig structs (type-safe) | +| **Unused styles** | Need PurgeCSS | ❌ Never generated | +| **Bundle size** | ~10KB (purged) | ~500 bytes (actual used) | +| **Arbitrary values** | `w-[123px]` (runtime) | ✅ `width = 123` (comptime) | +| **JIT mode** | Required for arbitrary values | ❌ Not needed (all comptime) | +| **Plugins** | JavaScript-based | ✅ Zig functions | +| **IDE support** | Tailwind IntelliSense | 🚧 Coming soon | + +## Current mercss Features + +### ✅ Implemented +- [x] Atomic CSS generation from structs +- [x] Compile-time class name generation +- [x] Type-safe design tokens +- [x] Component-level style scoping +- [x] CSS string concatenation at comptime +- [x] Integration with merjs page rendering + +### 🚧 Not Yet Implemented (vs Tailwind) +- [ ] Responsive variants (`md:`, `lg:`) +- [ ] State variants (`hover:`, `focus:`, `active:`) +- [ ] Arbitrary value syntax (`[123px]`) +- [ ] Plugin system +- [ ] `@apply` directive equivalent +- [ ] Dark mode support +- [ ] Container queries +- [ ] CSS grid helpers +- [ ] Typography plugin +- [ ] Form elements reset +- [ ] Animation utilities +- [ ] Transform/transition utilities + +### 🎯 Different Approach from Tailwind + +**Tailwind:** Utility-first, thousands of pre-generated classes, purge unused ones +```html +