tailwind-styled-v4 5.0.7 → 5.0.9

package/README.md

@@ -142,9 +142,32 @@ function Alert({ type, children }) {
 }
 ```
 
-### 6. Sub-components (Inline)
+### 6. Sub-components
 
-Definisikan sub-components langsung di template literal dengan syntax `[name] { classes }` — **TypeScript otomatis infer nama tanpa perlu `.withSub<>()`**.
+Ada **dua cara** mendefinisikan sub-components:
+
+#### A. Config Object — Direkomendasikan (Autocomplete + Type Safe)
+
+```tsx
+const Card = tw.div({
+  base: "flex flex-col p-4 rounded-xl bg-white shadow",
+  sub: {
+    header: "font-bold text-lg border-b pb-2",
+    body:   "text-gray-600 py-2",
+    footer: "border-t pt-2 text-sm text-gray-400",
+  },
+})
+
+// TypeScript infer keys dari object literal → autocomplete penuh
+<Card>
+  <Card.header>Judul</Card.header>    // ✅ autocomplete
+  <Card.body>Konten</Card.body>       // ✅ autocomplete
+  <Card.footer>Footer</Card.footer>   // ✅ autocomplete
+  <Card.xyz>?</Card.xyz>              // ❌ TypeScript error
+</Card>
+```
+
+#### B. Template Literal Inline — Ringkas (tanpa autocomplete)
 
 ```tsx
 const Card = tw.div`
@@ -154,24 +177,18 @@ const Card = tw.div`
   [footer] { border-t pt-2 text-sm text-gray-400 }
 `
 
-// TypeScript otomatis tahu: Card.header, Card.body, Card.footer
+// Runtime benar, tapi TypeScript tidak bisa infer nama dari multiline template —
+// ini limitasi TypeScript, bukan bug library. Gunakan config object untuk type safety.
 <Card>
   <Card.header>Judul</Card.header>
   <Card.body>Konten</Card.body>
   <Card.footer>Footer</Card.footer>
 </Card>
-
-// Autocomplete ✓ — Card.nonexistent akan error TypeScript
 ```
 
-> **Catatan:** Sub-components **tidak mewarisi** style base `Card`. Mereka adalah komponen terpisah dengan classes dari block `[name] { ... }`. Untuk mewarisi, gunakan `.extend()` (Pattern B di bawah).
+> Sub-components **tidak mewarisi** style base. Untuk mewarisi, pakai `.extend()` (lihat Pattern B di bawah).
 
-**`.withSub<>()`** hanya diperlukan jika nama sub-component tidak muncul di template literal (misalnya di-register secara dinamis):
-
-```tsx
-// Kasus khusus — nama tidak ada di template
-const Modal = tw.div`fixed inset-0`.withSub<"overlay" | "content">()
-```
+> **Sub-component tidak terdefinisi** tidak akan crash — library otomatis fallback ke `<span>` passthrough. Tapi tetap gunakan config object untuk catch typo di TypeScript.
 
 ### 7. State Engine — Zero-JS State Management
 
@@ -248,9 +265,22 @@ const IconButton = Button.extend`p-2 rounded-full`
 
 ### Pattern Sub-components
 
-**Pattern A: Inline `[name] { }` — Direkomendasikan**
+**Pattern A: Config Object — Direkomendasikan (autocomplete + type safe)**
+
+```tsx
+const Card = tw.div({
+  base: "flex flex-col p-4 rounded-xl bg-white shadow",
+  sub: {
+    header: "font-bold text-lg border-b pb-2",
+    body:   "text-gray-600 py-2",
+    footer: "border-t pt-2 text-sm",
+  },
+})
+// TypeScript infer: Card.header, Card.body, Card.footer ✅ autocomplete
+// Card.xyz → TypeScript error ✅
+```
 
-Cocok kalau sub-components punya style sendiri yang *tidak perlu* mewarisi base:
+**Pattern A2: Inline Template `[name] { }` — Ringkas (tanpa autocomplete)**
 
 ```tsx
 const Card = tw.div`
@@ -259,7 +289,7 @@ const Card = tw.div`
   [body]   { text-gray-600 py-2 }
   [footer] { border-t pt-2 text-sm }
 `
-// TypeScript otomatis: Card.header, Card.body, Card.footer ✓
+// Runtime benar — TypeScript tidak bisa infer nama dari multiline template literal
 ```
 
 **Pattern B: `.extend()` — Sub-components Mewarisi Style Base**

package/dist/cli.js

@@ -5940,6 +5940,67 @@ var init_createApp = __esm({
     };
   }
 });
+var log3, NATIVE_UNAVAILABLE_MESSAGE, nativeBridge, bridgeLoadAttempted, bridgeLoadError, isValidNativeBridge, getNativeBridge;
+var init_nativeBridge = __esm({
+  "packages/domain/compiler/src/nativeBridge.ts"() {
+    init_src();
+    log3 = (...args) => {
+      if (process.env.DEBUG?.includes("compiler:native")) {
+        console.log("[compiler:native]", ...args);
+      }
+    };
+    NATIVE_UNAVAILABLE_MESSAGE = "[tailwind-styled/compiler v5] Native binding is required but not available.\nThis package requires native Rust bindings. There is no JavaScript fallback.\nPlease ensure:\n  1. The native module is properly installed\n  2. You have run: npm run build:rust (or use prebuilt binary)\n\nFor help, see: https://tailwind-styled.dev/docs/install";
+    nativeBridge = null;
+    bridgeLoadAttempted = false;
+    bridgeLoadError = null;
+    isValidNativeBridge = (mod) => {
+      const m = mod;
+      return !!(typeof m.transformSource === "function" || typeof m.extractAllClasses === "function" || typeof m.hasTwUsage === "function");
+    };
+    getNativeBridge = () => {
+      if (nativeBridge) {
+        return nativeBridge;
+      }
+      if (bridgeLoadAttempted) {
+        if (bridgeLoadError) {
+          throw bridgeLoadError;
+        }
+        throw new Error(NATIVE_UNAVAILABLE_MESSAGE);
+      }
+      bridgeLoadAttempted = true;
+      try {
+        const runtimeDir = resolveRuntimeDir(void 0, (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('cli.js', document.baseURI).href)));
+        const require2 = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('cli.js', document.baseURI).href)));
+        const result = resolveNativeBinary(runtimeDir);
+        if (result.path && result.path.endsWith(".node")) {
+          try {
+            const binding = require2(result.path);
+            if (isValidNativeBridge(binding)) {
+              nativeBridge = binding;
+              log3("Native bridge loaded successfully from:", result.path);
+              return nativeBridge;
+            }
+          } catch (e) {
+            log3("Failed to require native binding:", e);
+          }
+        }
+        throw new Error(`${NATIVE_UNAVAILABLE_MESSAGE}
+
+Tried paths: ${result.tried.join("\n")}`);
+      } catch (err) {
+        bridgeLoadError = err instanceof Error ? err : new Error(String(err));
+        log3("Failed to load native bridge:", bridgeLoadError.message);
+        throw bridgeLoadError;
+      }
+    };
+    if (typeof process !== "undefined" && !bridgeLoadAttempted) {
+      try {
+        getNativeBridge();
+      } catch {
+      }
+    }
+  }
+});
 
 // packages/infrastructure/cli/src/commands/program.ts
 init_esm();
@@ -9070,59 +9131,8 @@ var syncCommand = {
 var import_picocolors5 = __toESM(require_picocolors());
 init_errors();
 
-// packages/domain/compiler/src/nativeBridge.ts
-init_src();
-var log3 = (...args) => {
-  if (process.env.DEBUG?.includes("compiler:native")) {
-    console.log("[compiler:native]", ...args);
-  }
-};
-var NATIVE_UNAVAILABLE_MESSAGE = "[tailwind-styled/compiler v5] Native binding is required but not available.\nThis package requires native Rust bindings. There is no JavaScript fallback.\nPlease ensure:\n  1. The native module is properly installed\n  2. You have run: npm run build:rust (or use prebuilt binary)\n\nFor help, see: https://tailwind-styled.dev/docs/install";
-var nativeBridge = null;
-var bridgeLoadAttempted = false;
-var bridgeLoadError = null;
-var isValidNativeBridge = (mod) => {
-  const m = mod;
-  return !!(typeof m.transformSource === "function" || typeof m.extractAllClasses === "function" || typeof m.hasTwUsage === "function");
-};
-var getNativeBridge = () => {
-  if (nativeBridge) {
-    return nativeBridge;
-  }
-  if (bridgeLoadAttempted) {
-    if (bridgeLoadError) {
-      throw bridgeLoadError;
-    }
-    throw new Error(NATIVE_UNAVAILABLE_MESSAGE);
-  }
-  bridgeLoadAttempted = true;
-  try {
-    const runtimeDir = resolveRuntimeDir(void 0, (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('cli.js', document.baseURI).href)));
-    const require2 = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('cli.js', document.baseURI).href)));
-    const result = resolveNativeBinary(runtimeDir);
-    if (result.path && result.path.endsWith(".node")) {
-      try {
-        const binding = require2(result.path);
-        if (isValidNativeBridge(binding)) {
-          nativeBridge = binding;
-          log3("Native bridge loaded successfully from:", result.path);
-          return nativeBridge;
-        }
-      } catch (e) {
-        log3("Failed to require native binding:", e);
-      }
-    }
-    throw new Error(`${NATIVE_UNAVAILABLE_MESSAGE}
-
-Tried paths: ${result.tried.join("\n")}`);
-  } catch (err) {
-    bridgeLoadError = err instanceof Error ? err : new Error(String(err));
-    log3("Failed to load native bridge:", bridgeLoadError.message);
-    throw bridgeLoadError;
-  }
-};
-
 // packages/domain/compiler/src/index.ts
+init_nativeBridge();
 var compileCssFromClasses = (classes, prefix) => {
   const native = getNativeBridge();
   if (!native?.transformSource) {