feat(laroux): laroux packages are introduced.

Author: eser

.claude/skills/architecture-guidelines/SKILL.md

@@ -24,6 +24,9 @@ export function processFile() {}
 - Document architectural decisions with ADRs including trade-offs
 - Write automated tests with CI (target 80%+ coverage for critical paths)
 - Use naming conventions: PascalCase for components, camelCase for utilities
+- Hexagonal architecture: domain + ports together, adapters separate
+- Explicit composition only: import adapters directly, pass as parameters (no
+  magic config strings, no convenience factories)
 
 ## References
 

.claude/skills/architecture-guidelines/references/rules.md

@@ -235,3 +235,128 @@ Incorrect:
 - No date/status in headers
 - Vague filenames like `notes.md` or `stuff.md`
 - Missing code examples
+
+---
+
+## Hexagonal Architecture (Double-Layered)
+
+Scope: All projects with external dependencies
+
+Rule: Use double-layered hexagonal architecture. Domain layer contains both
+business logic AND port interfaces/types together (no separate ports directory).
+Adapters implement domain interfaces. Composition happens at call site via
+explicit imports.
+
+**Structure:**
+
+```
+package/
+├── domain/                    # Business logic + port interfaces
+│   ├── mod.ts                 # Re-exports all domain types
+│   ├── bundler.ts             # Bundler interface + BundleData type
+│   ├── framework-plugin.ts    # FrameworkPlugin interface + related types
+│   └── build-cache.ts         # BuildCache interface + implementation
+│
+├── adapters/                  # All adapter implementations
+│   ├── react/                 # implements FrameworkPlugin
+│   ├── tailwindcss/           # implements CssPlugin
+│   ├── lightningcss/          # implements CssTransformer
+│   └── prebuilt-bundler/      # implements Bundler
+│
+└── mod.ts                     # Main entry, exports bundle function
+```
+
+**Composition via Explicit Imports:**
+
+Correct:
+
+```typescript
+// User explicitly imports what they need
+import { bundle } from "@eser/laroux-bundler";
+import { reactPlugin } from "@eser/laroux-bundler/adapters/react";
+import { tailwindPlugin } from "@eser/laroux-bundler/adapters/tailwindcss";
+import { PrebuiltBundler } from "@eser/laroux-bundler/adapters/prebuilt-bundler";
+
+// Pass adapters as parameters
+await bundle(config, {
+  framework: reactPlugin,
+  css: tailwindPlugin,
+  bundler: new PrebuiltBundler(bundlerConfig),
+});
+```
+
+Incorrect:
+
+```typescript
+// Magic config strings - avoid
+const config = {
+  framework: "react",  // String-based selection
+  css: "tailwindcss",
+  bundler: "prebuilt",
+};
+await bundle(config);  // Dynamic imports inside
+
+// Convenience factory functions - avoid
+const plugins = await createReactTailwindPlugins();  // Hides adapter selection
+await bundle(config, plugins);                        // User doesn't control what loads
+
+// Separate ports directory - avoid
+import type { Plugin } from "./ports/plugin.ts";  // Don't separate ports
+import { logic } from "./domain/logic.ts";        // from domain
+```
+
+**Why Avoid Convenience Factories:**
+
+- Hide which adapters are loaded (opaque dependency graph)
+- Require dynamic imports that break tree-shaking
+- Make it harder to swap individual adapters
+- Add unnecessary abstraction layer
+- Users should always know exactly what they're importing
+
+**Benefits:**
+
+- Tree-shaking works naturally (unused adapters not bundled)
+- Type-safe: TypeScript validates plugin interfaces at compile time
+- User controls exactly what gets loaded
+- Easy to swap adapters (Vue instead of React, UnoCSS instead of Tailwind)
+- No runtime magic or dynamic imports
+- Clear dependency graph
+
+**Domain Layer Design:**
+
+Domain files contain both interfaces and business logic:
+
+```typescript
+// domain/framework-plugin.ts
+export type ClientComponent = {
+  filePath: string;
+  relativePath: string;
+  exportNames: string[];
+};
+
+export type FrameworkPlugin = {
+  name: string;
+  analyzeClientComponents?: (srcDir: string) => Promise<ClientComponent[]>;
+  transformClientComponents?: (components: ClientComponent[]) => Promise<void>;
+};
+
+// Noop implementation for when no framework is configured
+export const noopPlugin: FrameworkPlugin = {
+  name: "noop",
+  analyzeClientComponents: () => Promise.resolve([]),
+};
+```
+
+**Adapter Implementation:**
+
+```typescript
+// adapters/react/plugin.ts
+import type { FrameworkPlugin } from "../../domain/framework-plugin.ts";
+
+export const reactPlugin: FrameworkPlugin = {
+  name: "react",
+  analyzeClientComponents: async (srcDir) => {
+    // React-specific implementation
+  },
+};
+```

.claude/skills/javascript-practices/references/rules.md

@@ -445,6 +445,53 @@ if (!array.length) {} // false for length 0
 if (user) {} // false for null, undefined, 0, ""
 ```
 
+### Iteration Over Optional Values
+
+Scope: JS/TS
+
+Rule: Use explicit undefined checks before iterating. Avoid nullish
+coalescing that creates empty objects just to iterate over nothing.
+
+Correct:
+
+```typescript
+const props: Record<string, unknown> | undefined = getProps();
+
+if (props !== undefined) {
+  for (const [key, value] of Object.entries(props)) {
+    process(key, value);
+  }
+}
+
+// Also acceptable for arrays
+if (items !== undefined) {
+  for (const item of items) {
+    handle(item);
+  }
+}
+```
+
+Incorrect:
+
+```typescript
+// Creates empty object just to iterate nothing
+for (const [key, value] of Object.entries(props ?? {})) {
+  process(key, value);
+}
+
+// Same issue with arrays
+for (const item of items ?? []) {
+  handle(item);
+}
+```
+
+Rationale:
+
+- More efficient: avoids creating temporary empty objects/arrays
+- More explicit: makes the conditional nature of iteration clear
+- More readable: intent is obvious at a glance
+- Better for debugging: easier to add logging or breakpoints
+
 ---
 
 ## Async

.pre-commit-config.yaml

@@ -13,8 +13,8 @@ repos:
       - id: check-json
         exclude: |
           (?x)^(
-            test/apps/vite-app/tsconfig.app.json|
-            test/apps/cf-workers-app/tsconfig.json
+            etc/templates/vite-app/tsconfig.app.json|
+            etc/templates/cf-workers-app/tsconfig.json
           )$
       - id: check-merge-conflict
       - id: check-shebang-scripts-are-executable
@@ -34,8 +34,8 @@ repos:
         args: ["--autofix", "--no-ensure-ascii", "--no-sort-keys"]
         exclude: |
           (?x)^(
-            test/apps/vite-app/tsconfig.app.json|
-            test/apps/cf-workers-app/tsconfig.json
+            etc/templates/vite-app/tsconfig.app.json|
+            etc/templates/cf-workers-app/tsconfig.json
           )$
       - id: trailing-whitespace
 
@@ -96,6 +96,9 @@ repos:
             pkg/@eser/functions/README.md|
             pkg/@eser/http/README.md|
             pkg/@eser/jsx-runtime/README.md|
+            pkg/@eser/laroux-bundler/README.md|
+            pkg/@eser/laroux-react/README.md|
+            pkg/@eser/laroux-server/README.md|
             pkg/@eser/logging/README.md|
             pkg/@eser/parsing/README.md|
             pkg/@eser/primitives/README.md|
@@ -105,7 +108,7 @@ repos:
             pkg/@eser/writer/README.md|
             pkg/@cool/cli/README.md|
             pkg/@cool/lime/README.md|
-            test/apps/vite-app/README.md|
+            etc/templates/vite-app/README.md|
             Dockerfile|
             LICENSE|
             README.md

deno.json

@@ -1,7 +1,10 @@
 {
   "nodeModulesDir": "auto",
   "unstable": [
-    "temporal"
+    "temporal",
+    "unsafe-proto",
+    "sloppy-imports",
+    "bundle"
   ],
   "lint": {
     "rules": {
@@ -37,6 +40,7 @@
     "docs/",
     "etc/temp/",
     "node_modules/",
-    "pkg/@eser/cli/dist/"
+    "pkg/@eser/cli/dist/",
+    "etc/templates/laroux-app/dist/"
   ]
 }