@akanjs/cli 0.0.145 → 0.0.147

package/cjs/src/guidelines/modelUnit/modelUnit.instruction.md

@@ -194,167 +194,6 @@ export const Abstract = ({ product }: { product: cnst.LightProduct }) => (
    - Ensure proper image alt text
    - Maintain keyboard navigability
 
-## How to Use Model.Unit.tsx Files
-
-### In Pages
-
-```tsx
-// apps/your-app/app/products/page.tsx
-import { Product } from "@shared/client";
-import { getProducts } from "@shared/lib/product/product.service";
-
-export default async function ProductsPage() {
-  const products = await getProducts();
-
-  return (
-    <div className="container mx-auto">
-      <h1 className="mb-6 text-2xl font-bold">Products</h1>
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {products.map((product) => (
-          <Product.Unit.Card key={product.id} product={product} href={`/products/${product.id}`} />
-        ))}
-      </div>
-    </div>
-  );
-}
-```
-
-### In Utils
-
-```tsx
-// libs/shared/lib/product/Product.Util.tsx
-"use client";
-import { useState } from "react";
-import { Product } from "@shared/client";
-import { cnst } from "@shared/client";
-
-export const ProductSelector = ({
-  products,
-  onSelect,
-}: {
-  products: cnst.LightProduct[];
-  onSelect: (product: cnst.LightProduct) => void;
-}) => {
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-
-  const handleSelect = (product: cnst.LightProduct) => {
-    setSelectedId(product.id);
-    onSelect(product);
-  };
-
-  return (
-    <div className="space-y-2">
-      {products.map((product) => (
-        <button key={product.id} onClick={() => handleSelect(product)} className="w-full text-left">
-          <Product.Unit.Abstract product={product} className={selectedId === product.id ? "border-primary" : ""} />
-        </button>
-      ))}
-    </div>
-  );
-};
-```
-
-### In Templates
-
-```tsx
-// libs/shared/lib/product/Product.Template.tsx
-"use client";
-import { useState } from "react";
-import { Product } from "@shared/client";
-import { cnst } from "@shared/client";
-import { sig } from "@shared/client";
-
-export const ProductList = ({ initialProducts }: { initialProducts: cnst.LightProduct[] }) => {
-  const [products, setProducts] = useState(initialProducts);
-  const [loading, setLoading] = useState(false);
-
-  const loadMore = async () => {
-    if (loading) return;
-    setLoading(true);
-    try {
-      const nextPage = await sig.product.getProducts({
-        skip: products.length,
-        limit: 10,
-      });
-      setProducts([...products, ...nextPage.products]);
-    } catch (error) {
-      console.error("Failed to load more products", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div>
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {products.map((product) => (
-          <Product.Unit.Card key={product.id} product={product} />
-        ))}
-      </div>
-
-      {products.length >= 10 && (
-        <button className="btn btn-outline mx-auto mt-6 block" onClick={loadMore} disabled={loading}>
-          {loading ? "Loading..." : "Load More"}
-        </button>
-      )}
-    </div>
-  );
-};
-```
-
-### In Zones
-
-```tsx
-// libs/shared/lib/product/Product.Zone.tsx
-"use client";
-import { useState, useEffect } from "react";
-import { cnst } from "@shared/client";
-import { sig } from "@shared/client";
-import { Product } from "@shared/client";
-import { Zone, Tabs } from "@util/ui";
-
-export const ProductManager = () => {
-  const [products, setProducts] = useState<cnst.LightProduct[]>([]);
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-
-  useEffect(() => {
-    const loadProducts = async () => {
-      const data = await sig.product.getProducts({
-        filter: selectedCategory ? { byCategory: selectedCategory } : undefined,
-      });
-      setProducts(data.products);
-    };
-
-    loadProducts();
-  }, [selectedCategory]);
-
-  return (
-    <Zone title="Product Management">
-      <Zone.Section title="Categories">
-        <Tabs
-          tabs={[
-            { key: null, label: "All" },
-            { key: "electronics", label: "Electronics" },
-            { key: "clothing", label: "Clothing" },
-            { key: "food", label: "Food" },
-          ]}
-          activeTab={selectedCategory}
-          onChange={(tab) => setSelectedCategory(tab)}
-        />
-      </Zone.Section>
-
-      <Zone.Section title="Products">
-        <div className="space-y-2">
-          {products.map((product) => (
-            <Product.Unit.Row key={product.id} product={product} />
-          ))}
-        </div>
-      </Zone.Section>
-    </Zone>
-  );
-};
-```
-
 ## Best Practices
 
 ### 1. Component Variations and Consistent Exports
@@ -566,136 +405,6 @@ export const List = ({ product }: { product: cnst.LightProduct }) => (
 );
 ```
 
-## Performance Optimization
-
-### 1. Efficient Rendering with Memoization
-
-When using Model.Unit components in lists, consider memoizing them in client components:
-
-```tsx
-// In a client component file
-"use client";
-import { memo } from "react";
-import { Product } from "@shared/client";
-
-// Create memoized versions to prevent unnecessary re-renders
-const ProductCard = memo(Product.Unit.Card);
-const ProductRow = memo(Product.Unit.Row);
-
-export const ProductList = ({ products, view = "grid" }) => {
-  return (
-    <div className={view === "grid" ? "grid grid-cols-3 gap-4" : "space-y-2"}>
-      {products.map((product) =>
-        view === "grid" ? (
-          <ProductCard key={product.id} product={product} />
-        ) : (
-          <ProductRow key={product.id} product={product} />
-        )
-      )}
-    </div>
-  );
-};
-```
-
-### 2. Virtualization for Long Lists
-
-```tsx
-"use client";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { useRef } from "react";
-import { Product } from "@shared/client";
-
-export const VirtualProductList = ({ products }) => {
-  const parentRef = useRef(null);
-
-  const virtualizer = useVirtualizer({
-    count: products.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 80, // Approximate height of each row
-  });
-
-  return (
-    <div ref={parentRef} className="h-[600px] overflow-auto">
-      <div className="relative w-full" style={{ height: `${virtualizer.getTotalSize()}px` }}>
-        {virtualizer.getVirtualItems().map((virtualItem) => (
-          <div
-            key={virtualItem.key}
-            className="absolute top-0 left-0 w-full"
-            style={{
-              height: `${virtualItem.size}px`,
-              transform: `translateY(${virtualItem.start}px)`,
-            }}
-          >
-            <Product.Unit.Row product={products[virtualItem.index]} />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-```
-
-### 3. Image Optimization Techniques
-
-```tsx
-import { Image } from "@util/ui";
-
-export const Card = ({ product }: { product: cnst.LightProduct }) => (
-  <div className="card">
-    {product.image && (
-      <Image
-        file={product.image}
-        alt={product.name}
-        className="h-40 w-full object-cover"
-        priority={false}
-        loading="lazy"
-        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-      />
-    )}
-    {/* Other content */}
-  </div>
-);
-```
-
-### 4. Conditional Loading of Complex Units
-
-For complex units with heavy rendering needs:
-
-```tsx
-export const Full = ({ product, detailed = false }: { product: cnst.LightProduct; detailed?: boolean }) => (
-  <div className="product-full rounded border p-4">
-    <h2 className="text-xl font-bold">{product.name}</h2>
-    <p className="mt-2">{product.price.toLocaleString()} KRW</p>
-
-    {/* Only render detailed content when needed */}
-    {detailed && (
-      <>
-        <div className="mt-4 grid grid-cols-2 gap-2">
-          <div>SKU: {product.sku}</div>
-          <div>Category: {product.category}</div>
-          <div>Stock: {product.stockQuantity}</div>
-          <div>Weight: {product.weight}kg</div>
-        </div>
-
-        <div className="mt-4">
-          <h3 className="font-bold">Specifications</h3>
-          <table className="mt-2 w-full border">
-            <tbody>
-              {product.specifications?.map((spec) => (
-                <tr key={spec.key} className="border-b">
-                  <td className="p-2 font-medium">{spec.key}</td>
-                  <td className="p-2">{spec.value}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </>
-    )}
-  </div>
-);
-```
-
 ## Troubleshooting Common Issues
 
 ### 1. Server Component Errors
@@ -827,7 +536,6 @@ Key takeaways:
 - Keep components as server components without client-side hooks
 - Focus on presentation only, leaving business logic to Service files
 - Follow consistent prop patterns with className and href support
-- Optimize for performance with proper image handling and conditional rendering
 - Ensure type safety by respecting LightModel type definitions
 
 Well-designed Model.Unit components improve development velocity, maintain UI consistency, and enable seamless component reuse throughout your Akan.js applications.

package/cjs/src/guidelines/scalarModule/scalarModule.instruction.md

@@ -0,0 +1,84 @@
+# Scalar Modules Overview
+
+## Purpose
+
+Scalar modules provide reusable value objects for:
+
+- Embedded documents in domain models
+- Shared DTOs and configuration objects
+- Type-safe schemas across your application
+- Internationalized data structures
+
+## Core Principles
+
+- **Reusability**: Designed for cross-module consumption
+- **Stateless**: Pure data containers without business logic
+- **Type-Safe**: Full TypeScript integration with runtime validation
+- **Composable**: Embeddable within larger domain models
+- **I18n Ready**: Built-in translation support
+
+## File Structure
+
+```
+{domain}/lib/
+└── __scalar/                  // Special scalar directory
+    ├── _server.ts             // Module registration
+    └── [scalarName]/          // camelCase scalar name
+        ├── [name].constant.ts   // Schema definition
+        ├── [name].dictionary.ts // I18n translations
+        └── [name].document.ts   // Method extensions (optional)
+```
+
+## File Responsibilities
+
+| File Type         | Purpose                                                          |
+| ----------------- | ---------------------------------------------------------------- |
+| `*.constant.ts`   | Defines schema with `@Model.Scalar` and `@Field.Prop` decorators |
+| `*.dictionary.ts` | Provides internationalization with `ModelDictionary<Type>`       |
+| `*.document.ts`   | Extends functionality with custom methods using `by()` decorator |
+
+## Naming Conventions
+
+| Element          | Convention             | Example                     |
+| ---------------- | ---------------------- | --------------------------- |
+| Scalar Directory | `camelCase`            | `geoLocation`               |
+| Constant File    | `[name].constant.ts`   | `geoLocation.constant.ts`   |
+| Dictionary File  | `[name].dictionary.ts` | `geoLocation.dictionary.ts` |
+| Document File    | `[name].document.ts`   | `geoLocation.document.ts`   |
+| Scalar Class     | `PascalCase`           | `GeoLocation`               |
+| Enum Values      | `camelCase`            | `highAccuracy`              |
+| Dictionary Keys  | `kebab-case` prefixes  | `desc-fieldName`            |
+
+## Core Components
+
+1. **Constant File**: Schema definition with typed fields and validation
+2. **Dictionary File**: I18n translations for model metadata, fields and enums
+3. **Document File**: Optional method extensions for data transformations
+4. **Server Registration**: Aggregate and expose scalars through `_server.ts`
+
+## Key Rules
+
+1. One scalar class per file with matching `@Model.Scalar` parameter
+2. All fields require decorators (`@Field.Prop`, `@Field.Hidden`, etc.)
+3. Dictionary must include all fields/enums with `modelName`/`modelDesc`
+4. Use `satisfies ModelDictionary<Type>` for dictionary type safety
+5. Register all scalars in `_server.ts` with `scalarModulesOf()`
+
+## Best Practices
+
+- Design for maximum reusability across modules
+- Keep scalars focused and lightweight
+- Use immutable fields for invariant data
+- Provide complete I18n coverage in dictionaries
+- Add document methods only for data transformations
+- Validate fields with options (min/max, minlength/maxlength)
+
+## Integration Points
+
+- **Domain Models**: Embedded as value objects
+- **GraphQL**: Auto-generated types and enums
+- **Validation**: Runtime type checking through decorators
+- **Internationalization**: Consistent terminology via dictionaries
+- **API Contracts**: Shared request/response payloads
+
+Scalar modules provide foundational data structures that enable consistent, type-safe modeling across Akan.js applications while promoting code reuse and maintainability.

package/cjs/src/templates/app/main.js

@@ -32,8 +32,7 @@ import { registerModules } from "./server";
 const bootstrap = async () => {
   const serverMode = process.env.SERVER_MODE as "federation" | "batch" | "all" | null;
   if (!serverMode) throw new Error("SERVER_MODE environment variable is not defined");
-  const app = await createNestApp({ registerModules, serverMode, env });
-  return () => app.close();
+  await createNestApp({ registerModules, serverMode, env });
 };
 void bootstrap();
   `;