tailwind-styled-v4 5.1.13 → 5.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.browser.mjs +1 -1
- package/dist/index.browser.mjs.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/runtime-css.d.mts +1 -90
- package/dist/runtime-css.d.ts +1 -90
- package/dist/runtime-css.js +1 -95
- package/dist/runtime-css.js.map +1 -1
- package/dist/runtime-css.mjs +1 -89
- package/dist/runtime-css.mjs.map +1 -1
- package/dist/runtime.js +1 -1
- package/dist/runtime.js.map +1 -1
- package/dist/runtime.mjs +1 -1
- package/dist/runtime.mjs.map +1 -1
- package/dist/theme.js +1 -1
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +1 -1
- package/dist/theme.mjs.map +1 -1
- package/package.json +2 -2
package/dist/runtime-css.d.mts
CHANGED
|
@@ -1,90 +1 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Queue a CSS rule for batched injection.
|
|
5
|
-
* Multiple rules accumulated during one event loop tick are flushed together
|
|
6
|
-
* in one requestAnimationFrame → one style recalculation.
|
|
7
|
-
*
|
|
8
|
-
* Rules diinjeksi via insertRule() — zero flicker, truly additive.
|
|
9
|
-
*/
|
|
10
|
-
declare function batchedInject(cssRule: string): void;
|
|
11
|
-
/**
|
|
12
|
-
* Immediately flush all pending CSS rules to the DOM.
|
|
13
|
-
* Called automatically by RAF each frame. Can also be called manually
|
|
14
|
-
* after synchronous component setup where RAF timing is too late.
|
|
15
|
-
*
|
|
16
|
-
* Setiap rule diinjeksi secara individual via insertRule() — tidak ada
|
|
17
|
-
* window dimana existing rules hilang.
|
|
18
|
-
*/
|
|
19
|
-
declare function flushBatchedCss(): void;
|
|
20
|
-
/**
|
|
21
|
-
* Synchronous inject — skips batching.
|
|
22
|
-
* Use for SSR / critical path where RAF is not available.
|
|
23
|
-
*
|
|
24
|
-
* Menggunakan insertRule() — tidak ada flicker meskipun dipanggil
|
|
25
|
-
* di tengah render cycle.
|
|
26
|
-
*/
|
|
27
|
-
declare function syncInject(cssRule: string): void;
|
|
28
|
-
/**
|
|
29
|
-
* Check if a rule has already been injected (deduplication check).
|
|
30
|
-
*/
|
|
31
|
-
declare function isInjected(cssRule: string): boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Clear all injected rules and remove the style element.
|
|
34
|
-
* Useful for testing / SSR resets. Not for production use.
|
|
35
|
-
*/
|
|
36
|
-
declare function resetBatchedCss(): void;
|
|
37
|
-
/**
|
|
38
|
-
* Get stats about the current injection state (for devtools).
|
|
39
|
-
*/
|
|
40
|
-
declare function getBatchedCssStats(): {
|
|
41
|
-
totalInjected: number;
|
|
42
|
-
pendingCount: number;
|
|
43
|
-
hasBatchScheduled: boolean;
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* tailwind-styled-v4 — TwCssInjector
|
|
48
|
-
*
|
|
49
|
-
* React Server Component — inject route-specific CSS ke <head>.
|
|
50
|
-
* Zero client JS, no hydration overhead, streaming-friendly.
|
|
51
|
-
*
|
|
52
|
-
* Pipeline:
|
|
53
|
-
* 1. withTailwindStyled webpack plugin emit CSS manifest ke .next/static/css/tw/
|
|
54
|
-
* 2. TwCssInjector baca manifest → inject <style> inline per route
|
|
55
|
-
*
|
|
56
|
-
* Usage:
|
|
57
|
-
* // app/layout.tsx
|
|
58
|
-
* import { TwCssInjector } from "tailwind-styled-v4/runtime-css"
|
|
59
|
-
*
|
|
60
|
-
* export default function Layout({ children }) {
|
|
61
|
-
* return (
|
|
62
|
-
* <html>
|
|
63
|
-
* <head><TwCssInjector /></head>
|
|
64
|
-
* <body>{children}</body>
|
|
65
|
-
* </html>
|
|
66
|
-
* )
|
|
67
|
-
* }
|
|
68
|
-
*/
|
|
69
|
-
|
|
70
|
-
interface CssInjectorProps {
|
|
71
|
-
/** Route spesifik. Default: auto-detect */
|
|
72
|
-
route?: string;
|
|
73
|
-
/** Inject global CSS juga. Default: true */
|
|
74
|
-
includeGlobal?: boolean;
|
|
75
|
-
/** Minify inline CSS. Default: true */
|
|
76
|
-
minify?: boolean;
|
|
77
|
-
/** CSS directory. Default: .next/static/css/tw */
|
|
78
|
-
cssDir?: string;
|
|
79
|
-
}
|
|
80
|
-
/**
|
|
81
|
-
* Server Component — inject CSS per route ke <head>.
|
|
82
|
-
* Baca dari manifest yang di-emit oleh TwCssManifestPlugin.
|
|
83
|
-
*/
|
|
84
|
-
declare function TwCssInjector(props?: CssInjectorProps): Promise<React.ReactElement>;
|
|
85
|
-
/**
|
|
86
|
-
* Hook untuk client components — CSS sudah di-handle TwCssInjector di server.
|
|
87
|
-
*/
|
|
88
|
-
declare function useTwClasses(classes: string): string;
|
|
89
|
-
|
|
90
|
-
export { TwCssInjector, batchedInject, flushBatchedCss, getBatchedCssStats, isInjected, resetBatchedCss, syncInject, useTwClasses };
|
|
1
|
+
export { TwCssInjector, useTwClasses } from '@tailwind-styled/runtime-css/server';
|
package/dist/runtime-css.d.ts
CHANGED
|
@@ -1,90 +1 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Queue a CSS rule for batched injection.
|
|
5
|
-
* Multiple rules accumulated during one event loop tick are flushed together
|
|
6
|
-
* in one requestAnimationFrame → one style recalculation.
|
|
7
|
-
*
|
|
8
|
-
* Rules diinjeksi via insertRule() — zero flicker, truly additive.
|
|
9
|
-
*/
|
|
10
|
-
declare function batchedInject(cssRule: string): void;
|
|
11
|
-
/**
|
|
12
|
-
* Immediately flush all pending CSS rules to the DOM.
|
|
13
|
-
* Called automatically by RAF each frame. Can also be called manually
|
|
14
|
-
* after synchronous component setup where RAF timing is too late.
|
|
15
|
-
*
|
|
16
|
-
* Setiap rule diinjeksi secara individual via insertRule() — tidak ada
|
|
17
|
-
* window dimana existing rules hilang.
|
|
18
|
-
*/
|
|
19
|
-
declare function flushBatchedCss(): void;
|
|
20
|
-
/**
|
|
21
|
-
* Synchronous inject — skips batching.
|
|
22
|
-
* Use for SSR / critical path where RAF is not available.
|
|
23
|
-
*
|
|
24
|
-
* Menggunakan insertRule() — tidak ada flicker meskipun dipanggil
|
|
25
|
-
* di tengah render cycle.
|
|
26
|
-
*/
|
|
27
|
-
declare function syncInject(cssRule: string): void;
|
|
28
|
-
/**
|
|
29
|
-
* Check if a rule has already been injected (deduplication check).
|
|
30
|
-
*/
|
|
31
|
-
declare function isInjected(cssRule: string): boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Clear all injected rules and remove the style element.
|
|
34
|
-
* Useful for testing / SSR resets. Not for production use.
|
|
35
|
-
*/
|
|
36
|
-
declare function resetBatchedCss(): void;
|
|
37
|
-
/**
|
|
38
|
-
* Get stats about the current injection state (for devtools).
|
|
39
|
-
*/
|
|
40
|
-
declare function getBatchedCssStats(): {
|
|
41
|
-
totalInjected: number;
|
|
42
|
-
pendingCount: number;
|
|
43
|
-
hasBatchScheduled: boolean;
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* tailwind-styled-v4 — TwCssInjector
|
|
48
|
-
*
|
|
49
|
-
* React Server Component — inject route-specific CSS ke <head>.
|
|
50
|
-
* Zero client JS, no hydration overhead, streaming-friendly.
|
|
51
|
-
*
|
|
52
|
-
* Pipeline:
|
|
53
|
-
* 1. withTailwindStyled webpack plugin emit CSS manifest ke .next/static/css/tw/
|
|
54
|
-
* 2. TwCssInjector baca manifest → inject <style> inline per route
|
|
55
|
-
*
|
|
56
|
-
* Usage:
|
|
57
|
-
* // app/layout.tsx
|
|
58
|
-
* import { TwCssInjector } from "tailwind-styled-v4/runtime-css"
|
|
59
|
-
*
|
|
60
|
-
* export default function Layout({ children }) {
|
|
61
|
-
* return (
|
|
62
|
-
* <html>
|
|
63
|
-
* <head><TwCssInjector /></head>
|
|
64
|
-
* <body>{children}</body>
|
|
65
|
-
* </html>
|
|
66
|
-
* )
|
|
67
|
-
* }
|
|
68
|
-
*/
|
|
69
|
-
|
|
70
|
-
interface CssInjectorProps {
|
|
71
|
-
/** Route spesifik. Default: auto-detect */
|
|
72
|
-
route?: string;
|
|
73
|
-
/** Inject global CSS juga. Default: true */
|
|
74
|
-
includeGlobal?: boolean;
|
|
75
|
-
/** Minify inline CSS. Default: true */
|
|
76
|
-
minify?: boolean;
|
|
77
|
-
/** CSS directory. Default: .next/static/css/tw */
|
|
78
|
-
cssDir?: string;
|
|
79
|
-
}
|
|
80
|
-
/**
|
|
81
|
-
* Server Component — inject CSS per route ke <head>.
|
|
82
|
-
* Baca dari manifest yang di-emit oleh TwCssManifestPlugin.
|
|
83
|
-
*/
|
|
84
|
-
declare function TwCssInjector(props?: CssInjectorProps): Promise<React.ReactElement>;
|
|
85
|
-
/**
|
|
86
|
-
* Hook untuk client components — CSS sudah di-handle TwCssInjector di server.
|
|
87
|
-
*/
|
|
88
|
-
declare function useTwClasses(classes: string): string;
|
|
89
|
-
|
|
90
|
-
export { TwCssInjector, batchedInject, flushBatchedCss, getBatchedCssStats, isInjected, resetBatchedCss, syncInject, useTwClasses };
|
|
1
|
+
export { TwCssInjector, useTwClasses } from '@tailwind-styled/runtime-css/server';
|
package/dist/runtime-css.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
"use strict";
|
|
3
2
|
var __create = Object.create;
|
|
4
3
|
var __defProp = Object.defineProperty;
|
|
@@ -32,98 +31,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
32
31
|
var runtime_css_exports = {};
|
|
33
32
|
__export(runtime_css_exports, {
|
|
34
33
|
TwCssInjector: () => TwCssInjector,
|
|
35
|
-
batchedInject: () => batchedInject,
|
|
36
|
-
flushBatchedCss: () => flushBatchedCss,
|
|
37
|
-
getBatchedCssStats: () => getBatchedCssStats,
|
|
38
|
-
isInjected: () => isInjected,
|
|
39
|
-
resetBatchedCss: () => resetBatchedCss,
|
|
40
|
-
syncInject: () => syncInject,
|
|
41
34
|
useTwClasses: () => useTwClasses
|
|
42
35
|
});
|
|
43
36
|
module.exports = __toCommonJS(runtime_css_exports);
|
|
44
37
|
|
|
45
|
-
// packages/domain/runtime-css/
|
|
46
|
-
var injected = /* @__PURE__ */ new Set();
|
|
47
|
-
var pending = [];
|
|
48
|
-
var _state = {
|
|
49
|
-
rafHandle: null,
|
|
50
|
-
styleEl: null
|
|
51
|
-
};
|
|
52
|
-
function getStyleElement() {
|
|
53
|
-
if (_state.styleEl && document.head.contains(_state.styleEl)) return _state.styleEl;
|
|
54
|
-
_state.styleEl = document.createElement("style");
|
|
55
|
-
_state.styleEl.id = "__tw-runtime-css";
|
|
56
|
-
_state.styleEl.setAttribute("data-tw-batched", "true");
|
|
57
|
-
document.head.appendChild(_state.styleEl);
|
|
58
|
-
return _state.styleEl;
|
|
59
|
-
}
|
|
60
|
-
function insertRuleToSheet(cssRule) {
|
|
61
|
-
const trimmed = cssRule.trim();
|
|
62
|
-
if (!trimmed) return;
|
|
63
|
-
const el = getStyleElement();
|
|
64
|
-
const sheet = el.sheet;
|
|
65
|
-
if (sheet) {
|
|
66
|
-
try {
|
|
67
|
-
sheet.insertRule(trimmed, sheet.cssRules.length);
|
|
68
|
-
return;
|
|
69
|
-
} catch {
|
|
70
|
-
if (process.env.NODE_ENV === "development") {
|
|
71
|
-
console.warn("[tw] insertRule failed, falling back to textContent append for rule:", trimmed.slice(0, 80));
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
el.textContent = (el.textContent ?? "") + `
|
|
76
|
-
${trimmed}`;
|
|
77
|
-
}
|
|
78
|
-
function batchedInject(cssRule) {
|
|
79
|
-
if (typeof window === "undefined") return;
|
|
80
|
-
if (!cssRule || injected.has(cssRule)) return;
|
|
81
|
-
injected.add(cssRule);
|
|
82
|
-
pending.push(cssRule);
|
|
83
|
-
if (_state.rafHandle === null) {
|
|
84
|
-
_state.rafHandle = requestAnimationFrame(flushBatchedCss);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
function flushBatchedCss() {
|
|
88
|
-
_state.rafHandle = null;
|
|
89
|
-
if (pending.length === 0 || typeof document === "undefined") return;
|
|
90
|
-
const rules = pending.splice(0);
|
|
91
|
-
for (const rule of rules) {
|
|
92
|
-
insertRuleToSheet(rule);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
function syncInject(cssRule) {
|
|
96
|
-
if (typeof document === "undefined") return;
|
|
97
|
-
if (!cssRule || injected.has(cssRule)) return;
|
|
98
|
-
injected.add(cssRule);
|
|
99
|
-
insertRuleToSheet(cssRule);
|
|
100
|
-
}
|
|
101
|
-
function isInjected(cssRule) {
|
|
102
|
-
return injected.has(cssRule);
|
|
103
|
-
}
|
|
104
|
-
function resetBatchedCss() {
|
|
105
|
-
injected.clear();
|
|
106
|
-
pending.length = 0;
|
|
107
|
-
if (_state.rafHandle !== null) {
|
|
108
|
-
cancelAnimationFrame(_state.rafHandle);
|
|
109
|
-
_state.rafHandle = null;
|
|
110
|
-
}
|
|
111
|
-
if (typeof document !== "undefined" && _state.styleEl && document.head.contains(_state.styleEl)) {
|
|
112
|
-
document.head.removeChild(_state.styleEl);
|
|
113
|
-
_state.styleEl = null;
|
|
114
|
-
} else {
|
|
115
|
-
_state.styleEl = null;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
function getBatchedCssStats() {
|
|
119
|
-
return {
|
|
120
|
-
totalInjected: injected.size,
|
|
121
|
-
pendingCount: pending.length,
|
|
122
|
-
hasBatchScheduled: _state.rafHandle !== null
|
|
123
|
-
};
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
// packages/domain/runtime-css/src/CssInjector.tsx
|
|
38
|
+
// packages/domain/runtime-css/dist/CssInjector.js
|
|
127
39
|
var import_react = __toESM(require("react"), 1);
|
|
128
40
|
async function TwCssInjector(props = {}) {
|
|
129
41
|
const { route, includeGlobal = true, minify = true, cssDir } = props;
|
|
@@ -182,12 +94,6 @@ function minifyCss(css) {
|
|
|
182
94
|
// Annotate the CommonJS export names for ESM import in node:
|
|
183
95
|
0 && (module.exports = {
|
|
184
96
|
TwCssInjector,
|
|
185
|
-
batchedInject,
|
|
186
|
-
flushBatchedCss,
|
|
187
|
-
getBatchedCssStats,
|
|
188
|
-
isInjected,
|
|
189
|
-
resetBatchedCss,
|
|
190
|
-
syncInject,
|
|
191
97
|
useTwClasses
|
|
192
98
|
});
|
|
193
99
|
/* tailwind-styled-v4 v5.1.9 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
|
package/dist/runtime-css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/umbrella/runtime-css.ts","../packages/domain/runtime-css/src/batchedInjector.ts","../packages/domain/runtime-css/src/CssInjector.tsx"],"sourcesContent":["export * from \"@tailwind-styled/runtime-css\"\n","\"use client\"\n\n/**\n * tailwind-styled-v5 — Batched CSS Injector (Client Runtime)\n *\n * Menggantikan pattern inject-per-komponen yang menyebabkan banyak\n * style recalculation saat banyak komponen mount bersamaan.\n *\n * Cara kerja:\n * - Semua CSS rules dari render cycle yang sama dikumpulkan\n * - Satu requestAnimationFrame = satu DOM style update\n * - Deduplication via Set<string> — rule yang sama tidak diinjeksi dua kali\n * - Injection via CSSStyleSheet.insertRule() — TIDAK menghapus rules yang ada\n * - Fallback ke textContent += jika CSSOM API tidak tersedia\n *\n * PENTING — Kenapa insertRule() bukan textContent +=:\n * `el.textContent += css` terlihat additive tapi sebenarnya:\n * 1. Browser baca semua textContent yang ada\n * 2. HAPUS semua rules dari stylesheet\n * 3. Concat string baru\n * 4. Parse ulang dan re-add semua rules\n * Di step 2-3, ada window singkat dimana SEMUA styles hilang → FLICKER.\n *\n * `sheet.insertRule()` benar-benar additive — hanya menambah rule baru\n * tanpa menyentuh rules yang sudah ada. Zero flicker.\n *\n * Usage (internal, dipakai oleh stateEngine dan containerQuery):\n * import { batchedInject, flushBatchedCss } from \"./batchedInjector\"\n *\n * // Queue a rule\n * batchedInject(\".tw-s-abc123[data-active=\\\"true\\\"]{opacity:0.5}\")\n *\n * // Force flush (biasanya tidak perlu — RAF melakukan ini otomatis)\n * flushBatchedCss()\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Singleton state\n// ─────────────────────────────────────────────────────────────────────────────\n\n/** All injected rules (deduplication registry) */\nconst injected = new Set<string>()\n\n/** Pending rules for current RAF batch */\nconst pending: string[] = []\n\n/** RAF handle and style element state */\nconst _state = {\n rafHandle: null as ReturnType<typeof requestAnimationFrame> | null,\n styleEl: null as HTMLStyleElement | null,\n}\n\nfunction getStyleElement(): HTMLStyleElement {\n if (_state.styleEl && document.head.contains(_state.styleEl)) return _state.styleEl\n\n _state.styleEl = document.createElement(\"style\")\n _state.styleEl.id = \"__tw-runtime-css\"\n _state.styleEl.setAttribute(\"data-tw-batched\", \"true\")\n // Harus diappend ke DOM sebelum .sheet bisa diakses\n document.head.appendChild(_state.styleEl)\n return _state.styleEl\n}\n\n/**\n * Inject satu CSS rule via CSSStyleSheet.insertRule().\n *\n * Ini benar-benar additive — tidak menyentuh rules yang sudah ada.\n * Fallback ke textContent append jika sheet belum siap (edge case).\n *\n * @internal\n */\nfunction insertRuleToSheet(cssRule: string): void {\n const trimmed = cssRule.trim()\n if (!trimmed) return\n\n const el = getStyleElement()\n const sheet = el.sheet\n\n if (sheet) {\n try {\n // insertRule() di akhir — urutan tidak kritis untuk utility CSS\n sheet.insertRule(trimmed, sheet.cssRules.length)\n return\n } catch {\n // insertRule() bisa throw jika:\n // 1. Rule syntax tidak valid\n // 2. Multi-rule string (insertRule() hanya terima satu rule)\n // Fallback ke textContent append untuk kasus ini.\n if (process.env.NODE_ENV === \"development\") {\n console.warn(\"[tw] insertRule failed, falling back to textContent append for rule:\", trimmed.slice(0, 80))\n }\n }\n }\n\n // Fallback: textContent append.\n // Lebih jarang terjadi sekarang karena stateEngine sudah loop per-rule,\n // tapi tetap perlu sebagai safety net.\n el.textContent = (el.textContent ?? \"\") + `\\n${trimmed}`\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Core API\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Queue a CSS rule for batched injection.\n * Multiple rules accumulated during one event loop tick are flushed together\n * in one requestAnimationFrame → one style recalculation.\n *\n * Rules diinjeksi via insertRule() — zero flicker, truly additive.\n */\nexport function batchedInject(cssRule: string): void {\n if (typeof window === \"undefined\") return // SSR — no-op\n if (!cssRule || injected.has(cssRule)) return\n\n injected.add(cssRule)\n pending.push(cssRule)\n\n if (_state.rafHandle === null) {\n _state.rafHandle = requestAnimationFrame(flushBatchedCss)\n }\n}\n\n/**\n * Immediately flush all pending CSS rules to the DOM.\n * Called automatically by RAF each frame. Can also be called manually\n * after synchronous component setup where RAF timing is too late.\n *\n * Setiap rule diinjeksi secara individual via insertRule() — tidak ada\n * window dimana existing rules hilang.\n */\nexport function flushBatchedCss(): void {\n _state.rafHandle = null\n\n if (pending.length === 0 || typeof document === \"undefined\") return\n\n // Flush semua rules sekaligus — satu per satu via insertRule()\n // insertRule() atomic per-rule: rule lama tidak pernah dihapus\n const rules = pending.splice(0)\n for (const rule of rules) {\n insertRuleToSheet(rule)\n }\n}\n\n/**\n * Synchronous inject — skips batching.\n * Use for SSR / critical path where RAF is not available.\n *\n * Menggunakan insertRule() — tidak ada flicker meskipun dipanggil\n * di tengah render cycle.\n */\nexport function syncInject(cssRule: string): void {\n if (typeof document === \"undefined\") return\n if (!cssRule || injected.has(cssRule)) return\n\n injected.add(cssRule)\n insertRuleToSheet(cssRule)\n}\n\n/**\n * Check if a rule has already been injected (deduplication check).\n */\nexport function isInjected(cssRule: string): boolean {\n return injected.has(cssRule)\n}\n\n/**\n * Clear all injected rules and remove the style element.\n * Useful for testing / SSR resets. Not for production use.\n */\nexport function resetBatchedCss(): void {\n injected.clear()\n pending.length = 0\n\n if (_state.rafHandle !== null) {\n cancelAnimationFrame(_state.rafHandle)\n _state.rafHandle = null\n }\n\n // Guard: document tidak tersedia di SSR / Node test environment\n if (typeof document !== \"undefined\" && _state.styleEl && document.head.contains(_state.styleEl)) {\n document.head.removeChild(_state.styleEl)\n _state.styleEl = null\n } else {\n _state.styleEl = null\n }\n}\n\n/**\n * Get stats about the current injection state (for devtools).\n */\nexport function getBatchedCssStats(): {\n totalInjected: number\n pendingCount: number\n hasBatchScheduled: boolean\n} {\n return {\n totalInjected: injected.size,\n pendingCount: pending.length,\n hasBatchScheduled: _state.rafHandle !== null,\n }\n}","/**\n * tailwind-styled-v4 — TwCssInjector\n *\n * React Server Component — inject route-specific CSS ke <head>.\n * Zero client JS, no hydration overhead, streaming-friendly.\n *\n * Pipeline:\n * 1. withTailwindStyled webpack plugin emit CSS manifest ke .next/static/css/tw/\n * 2. TwCssInjector baca manifest → inject <style> inline per route\n *\n * Usage:\n * // app/layout.tsx\n * import { TwCssInjector } from \"tailwind-styled-v4/runtime-css\"\n *\n * export default function Layout({ children }) {\n * return (\n * <html>\n * <head><TwCssInjector /></head>\n * <body>{children}</body>\n * </html>\n * )\n * }\n */\n\nimport React from \"react\"\n\ninterface CssInjectorProps {\n /** Route spesifik. Default: auto-detect */\n route?: string\n /** Inject global CSS juga. Default: true */\n includeGlobal?: boolean\n /** Minify inline CSS. Default: true */\n minify?: boolean\n /** CSS directory. Default: .next/static/css/tw */\n cssDir?: string\n}\n\n/**\n * Server Component — inject CSS per route ke <head>.\n * Baca dari manifest yang di-emit oleh TwCssManifestPlugin.\n */\nexport async function TwCssInjector(props: CssInjectorProps = {}): Promise<React.ReactElement> {\n const { route, includeGlobal = true, minify = true, cssDir } = props\n\n // Dynamic import fs — hanya jalan di server\n let fs: typeof import(\"node:fs\") | null = null\n let path: typeof import(\"node:path\") | null = null\n try {\n fs = await import(\"node:fs\")\n path = await import(\"node:path\")\n } catch {\n return React.createElement(React.Fragment, null)\n }\n\n const resolvedDir = cssDir\n ?? path.join(process.cwd(), \".next\", \"static\", \"css\", \"tw\")\n\n const manifestPath = path.join(resolvedDir, \"css-manifest.json\")\n\n // Baca manifest\n let manifest: { routes?: Record<string, string> } = {}\n try {\n if (fs.existsSync(manifestPath)) {\n manifest = JSON.parse(fs.readFileSync(manifestPath, \"utf-8\"))\n }\n } catch {\n // Manifest tidak ada — mungkin belum build atau native binding belum ready\n return React.createElement(React.Fragment, null)\n }\n\n const cssChunks: string[] = []\n\n // Global CSS (_global.css)\n if (includeGlobal && manifest.routes?.[\"__global\"]) {\n const globalPath = path.join(resolvedDir, manifest.routes[\"__global\"])\n const css = readFile(fs, globalPath)\n if (css) cssChunks.push(css)\n }\n\n // Route-specific CSS\n const targetRoute = route ?? \"/\"\n if (manifest.routes?.[targetRoute]) {\n const routePath = path.join(resolvedDir, manifest.routes[targetRoute])\n const css = readFile(fs, routePath)\n if (css) cssChunks.push(css)\n }\n\n if (cssChunks.length === 0) return React.createElement(React.Fragment, null)\n\n const combined = cssChunks.join(\"\\n\")\n const final = minify ? minifyCss(combined) : combined\n\n return React.createElement(\"style\", {\n dangerouslySetInnerHTML: { __html: final },\n \"data-tw-route\": targetRoute,\n \"data-tw-injector\": \"true\",\n })\n}\n\n/**\n * Hook untuk client components — CSS sudah di-handle TwCssInjector di server.\n */\nexport function useTwClasses(classes: string): string {\n return classes\n}\n\n// Helpers\nfunction readFile(fs: typeof import(\"node:fs\"), filepath: string): string | null {\n try {\n if (fs.existsSync(filepath)) return fs.readFileSync(filepath, \"utf-8\")\n } catch {}\n return null\n}\n\nfunction minifyCss(css: string): string {\n return css\n .replace(/\\/\\*[^*]*\\*+([^/*][^*]*\\*+)*\\//g, \"\")\n .replace(/\\s+/g, \" \")\n .replace(/\\s*{\\s*/g, \"{\")\n .replace(/\\s*}\\s*/g, \"}\")\n .replace(/\\s*;\\s*/g, \";\")\n .trim()\n}"],"mappings":"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","names":["React"]}
|
|
1
|
+
{"version":3,"sources":["../src/umbrella/runtime-css.ts","../packages/domain/runtime-css/dist/CssInjector.js"],"sourcesContent":["// Server-safe entry — hanya export TwCssInjector (async RSC) dan useTwClasses.\n// batchedInjector SENGAJA tidak di-export di sini karena punya \"use client\"\n// yang akan membuat Next.js memperlakukan TwCssInjector sebagai Client Component.\n// Runtime CSS injection internal (stateEngine, containerQuery) mengakses\n// @tailwind-styled/runtime-css/batched secara langsung di module level mereka sendiri.\nexport { TwCssInjector, useTwClasses } from \"@tailwind-styled/runtime-css/server\"\n","import React from \"react\";\nasync function TwCssInjector(props = {}) {\n const { route, includeGlobal = true, minify = true, cssDir } = props;\n let fs = null;\n let path = null;\n try {\n fs = await import(\"node:fs\");\n path = await import(\"node:path\");\n } catch {\n return React.createElement(React.Fragment, null);\n }\n const resolvedDir = cssDir ?? path.join(process.cwd(), \".next\", \"static\", \"css\", \"tw\");\n const manifestPath = path.join(resolvedDir, \"css-manifest.json\");\n let manifest = {};\n try {\n if (fs.existsSync(manifestPath)) {\n manifest = JSON.parse(fs.readFileSync(manifestPath, \"utf-8\"));\n }\n } catch {\n return React.createElement(React.Fragment, null);\n }\n const cssChunks = [];\n if (includeGlobal && manifest.routes?.[\"__global\"]) {\n const globalPath = path.join(resolvedDir, manifest.routes[\"__global\"]);\n const css = readFile(fs, globalPath);\n if (css) cssChunks.push(css);\n }\n const targetRoute = route ?? \"/\";\n if (manifest.routes?.[targetRoute]) {\n const routePath = path.join(resolvedDir, manifest.routes[targetRoute]);\n const css = readFile(fs, routePath);\n if (css) cssChunks.push(css);\n }\n if (cssChunks.length === 0) return React.createElement(React.Fragment, null);\n const combined = cssChunks.join(\"\\n\");\n const final = minify ? minifyCss(combined) : combined;\n return React.createElement(\"style\", {\n dangerouslySetInnerHTML: { __html: final },\n \"data-tw-route\": targetRoute,\n \"data-tw-injector\": \"true\"\n });\n}\nfunction useTwClasses(classes) {\n return classes;\n}\nfunction readFile(fs, filepath) {\n try {\n if (fs.existsSync(filepath)) return fs.readFileSync(filepath, \"utf-8\");\n } catch {\n }\n return null;\n}\nfunction minifyCss(css) {\n return css.replace(/\\/\\*[^*]*\\*+([^/*][^*]*\\*+)*\\//g, \"\").replace(/\\s+/g, \" \").replace(/\\s*{\\s*/g, \"{\").replace(/\\s*}\\s*/g, \"}\").replace(/\\s*;\\s*/g, \";\").trim();\n}\nexport {\n TwCssInjector,\n useTwClasses\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,eAAe,cAAc,QAAQ,CAAC,GAAG;AACvC,QAAM,EAAE,OAAO,gBAAgB,MAAM,SAAS,MAAM,OAAO,IAAI;AAC/D,MAAI,KAAK;AACT,MAAI,OAAO;AACX,MAAI;AACF,SAAK,MAAM,OAAO,IAAS;AAC3B,WAAO,MAAM,OAAO,MAAW;AAAA,EACjC,QAAQ;AACN,WAAO,aAAAA,QAAM,cAAc,aAAAA,QAAM,UAAU,IAAI;AAAA,EACjD;AACA,QAAM,cAAc,UAAU,KAAK,KAAK,QAAQ,IAAI,GAAG,SAAS,UAAU,OAAO,IAAI;AACrF,QAAM,eAAe,KAAK,KAAK,aAAa,mBAAmB;AAC/D,MAAI,WAAW,CAAC;AAChB,MAAI;AACF,QAAI,GAAG,WAAW,YAAY,GAAG;AAC/B,iBAAW,KAAK,MAAM,GAAG,aAAa,cAAc,OAAO,CAAC;AAAA,IAC9D;AAAA,EACF,QAAQ;AACN,WAAO,aAAAA,QAAM,cAAc,aAAAA,QAAM,UAAU,IAAI;AAAA,EACjD;AACA,QAAM,YAAY,CAAC;AACnB,MAAI,iBAAiB,SAAS,SAAS,UAAU,GAAG;AAClD,UAAM,aAAa,KAAK,KAAK,aAAa,SAAS,OAAO,UAAU,CAAC;AACrE,UAAM,MAAM,SAAS,IAAI,UAAU;AACnC,QAAI,IAAK,WAAU,KAAK,GAAG;AAAA,EAC7B;AACA,QAAM,cAAc,SAAS;AAC7B,MAAI,SAAS,SAAS,WAAW,GAAG;AAClC,UAAM,YAAY,KAAK,KAAK,aAAa,SAAS,OAAO,WAAW,CAAC;AACrE,UAAM,MAAM,SAAS,IAAI,SAAS;AAClC,QAAI,IAAK,WAAU,KAAK,GAAG;AAAA,EAC7B;AACA,MAAI,UAAU,WAAW,EAAG,QAAO,aAAAA,QAAM,cAAc,aAAAA,QAAM,UAAU,IAAI;AAC3E,QAAM,WAAW,UAAU,KAAK,IAAI;AACpC,QAAM,QAAQ,SAAS,UAAU,QAAQ,IAAI;AAC7C,SAAO,aAAAA,QAAM,cAAc,SAAS;AAAA,IAClC,yBAAyB,EAAE,QAAQ,MAAM;AAAA,IACzC,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,EACtB,CAAC;AACH;AACA,SAAS,aAAa,SAAS;AAC7B,SAAO;AACT;AACA,SAAS,SAAS,IAAI,UAAU;AAC9B,MAAI;AACF,QAAI,GAAG,WAAW,QAAQ,EAAG,QAAO,GAAG,aAAa,UAAU,OAAO;AAAA,EACvE,QAAQ;AAAA,EACR;AACA,SAAO;AACT;AACA,SAAS,UAAU,KAAK;AACtB,SAAO,IAAI,QAAQ,mCAAmC,EAAE,EAAE,QAAQ,QAAQ,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,KAAK;AACjK;","names":["React"]}
|
package/dist/runtime-css.mjs
CHANGED
|
@@ -1,86 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
// packages/domain/runtime-css/src/batchedInjector.ts
|
|
3
|
-
var injected = /* @__PURE__ */ new Set();
|
|
4
|
-
var pending = [];
|
|
5
|
-
var _state = {
|
|
6
|
-
rafHandle: null,
|
|
7
|
-
styleEl: null
|
|
8
|
-
};
|
|
9
|
-
function getStyleElement() {
|
|
10
|
-
if (_state.styleEl && document.head.contains(_state.styleEl)) return _state.styleEl;
|
|
11
|
-
_state.styleEl = document.createElement("style");
|
|
12
|
-
_state.styleEl.id = "__tw-runtime-css";
|
|
13
|
-
_state.styleEl.setAttribute("data-tw-batched", "true");
|
|
14
|
-
document.head.appendChild(_state.styleEl);
|
|
15
|
-
return _state.styleEl;
|
|
16
|
-
}
|
|
17
|
-
function insertRuleToSheet(cssRule) {
|
|
18
|
-
const trimmed = cssRule.trim();
|
|
19
|
-
if (!trimmed) return;
|
|
20
|
-
const el = getStyleElement();
|
|
21
|
-
const sheet = el.sheet;
|
|
22
|
-
if (sheet) {
|
|
23
|
-
try {
|
|
24
|
-
sheet.insertRule(trimmed, sheet.cssRules.length);
|
|
25
|
-
return;
|
|
26
|
-
} catch {
|
|
27
|
-
if (process.env.NODE_ENV === "development") {
|
|
28
|
-
console.warn("[tw] insertRule failed, falling back to textContent append for rule:", trimmed.slice(0, 80));
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
el.textContent = (el.textContent ?? "") + `
|
|
33
|
-
${trimmed}`;
|
|
34
|
-
}
|
|
35
|
-
function batchedInject(cssRule) {
|
|
36
|
-
if (typeof window === "undefined") return;
|
|
37
|
-
if (!cssRule || injected.has(cssRule)) return;
|
|
38
|
-
injected.add(cssRule);
|
|
39
|
-
pending.push(cssRule);
|
|
40
|
-
if (_state.rafHandle === null) {
|
|
41
|
-
_state.rafHandle = requestAnimationFrame(flushBatchedCss);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
function flushBatchedCss() {
|
|
45
|
-
_state.rafHandle = null;
|
|
46
|
-
if (pending.length === 0 || typeof document === "undefined") return;
|
|
47
|
-
const rules = pending.splice(0);
|
|
48
|
-
for (const rule of rules) {
|
|
49
|
-
insertRuleToSheet(rule);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
function syncInject(cssRule) {
|
|
53
|
-
if (typeof document === "undefined") return;
|
|
54
|
-
if (!cssRule || injected.has(cssRule)) return;
|
|
55
|
-
injected.add(cssRule);
|
|
56
|
-
insertRuleToSheet(cssRule);
|
|
57
|
-
}
|
|
58
|
-
function isInjected(cssRule) {
|
|
59
|
-
return injected.has(cssRule);
|
|
60
|
-
}
|
|
61
|
-
function resetBatchedCss() {
|
|
62
|
-
injected.clear();
|
|
63
|
-
pending.length = 0;
|
|
64
|
-
if (_state.rafHandle !== null) {
|
|
65
|
-
cancelAnimationFrame(_state.rafHandle);
|
|
66
|
-
_state.rafHandle = null;
|
|
67
|
-
}
|
|
68
|
-
if (typeof document !== "undefined" && _state.styleEl && document.head.contains(_state.styleEl)) {
|
|
69
|
-
document.head.removeChild(_state.styleEl);
|
|
70
|
-
_state.styleEl = null;
|
|
71
|
-
} else {
|
|
72
|
-
_state.styleEl = null;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
function getBatchedCssStats() {
|
|
76
|
-
return {
|
|
77
|
-
totalInjected: injected.size,
|
|
78
|
-
pendingCount: pending.length,
|
|
79
|
-
hasBatchScheduled: _state.rafHandle !== null
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
// packages/domain/runtime-css/src/CssInjector.tsx
|
|
1
|
+
// packages/domain/runtime-css/dist/CssInjector.js
|
|
84
2
|
import React from "react";
|
|
85
3
|
async function TwCssInjector(props = {}) {
|
|
86
4
|
const { route, includeGlobal = true, minify = true, cssDir } = props;
|
|
@@ -138,12 +56,6 @@ function minifyCss(css) {
|
|
|
138
56
|
}
|
|
139
57
|
export {
|
|
140
58
|
TwCssInjector,
|
|
141
|
-
batchedInject,
|
|
142
|
-
flushBatchedCss,
|
|
143
|
-
getBatchedCssStats,
|
|
144
|
-
isInjected,
|
|
145
|
-
resetBatchedCss,
|
|
146
|
-
syncInject,
|
|
147
59
|
useTwClasses
|
|
148
60
|
};
|
|
149
61
|
/* tailwind-styled-v4 v5.1.9 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
|
package/dist/runtime-css.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../packages/domain/runtime-css/src/batchedInjector.ts","../packages/domain/runtime-css/src/CssInjector.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * tailwind-styled-v5 — Batched CSS Injector (Client Runtime)\n *\n * Menggantikan pattern inject-per-komponen yang menyebabkan banyak\n * style recalculation saat banyak komponen mount bersamaan.\n *\n * Cara kerja:\n * - Semua CSS rules dari render cycle yang sama dikumpulkan\n * - Satu requestAnimationFrame = satu DOM style update\n * - Deduplication via Set<string> — rule yang sama tidak diinjeksi dua kali\n * - Injection via CSSStyleSheet.insertRule() — TIDAK menghapus rules yang ada\n * - Fallback ke textContent += jika CSSOM API tidak tersedia\n *\n * PENTING — Kenapa insertRule() bukan textContent +=:\n * `el.textContent += css` terlihat additive tapi sebenarnya:\n * 1. Browser baca semua textContent yang ada\n * 2. HAPUS semua rules dari stylesheet\n * 3. Concat string baru\n * 4. Parse ulang dan re-add semua rules\n * Di step 2-3, ada window singkat dimana SEMUA styles hilang → FLICKER.\n *\n * `sheet.insertRule()` benar-benar additive — hanya menambah rule baru\n * tanpa menyentuh rules yang sudah ada. Zero flicker.\n *\n * Usage (internal, dipakai oleh stateEngine dan containerQuery):\n * import { batchedInject, flushBatchedCss } from \"./batchedInjector\"\n *\n * // Queue a rule\n * batchedInject(\".tw-s-abc123[data-active=\\\"true\\\"]{opacity:0.5}\")\n *\n * // Force flush (biasanya tidak perlu — RAF melakukan ini otomatis)\n * flushBatchedCss()\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Singleton state\n// ─────────────────────────────────────────────────────────────────────────────\n\n/** All injected rules (deduplication registry) */\nconst injected = new Set<string>()\n\n/** Pending rules for current RAF batch */\nconst pending: string[] = []\n\n/** RAF handle and style element state */\nconst _state = {\n rafHandle: null as ReturnType<typeof requestAnimationFrame> | null,\n styleEl: null as HTMLStyleElement | null,\n}\n\nfunction getStyleElement(): HTMLStyleElement {\n if (_state.styleEl && document.head.contains(_state.styleEl)) return _state.styleEl\n\n _state.styleEl = document.createElement(\"style\")\n _state.styleEl.id = \"__tw-runtime-css\"\n _state.styleEl.setAttribute(\"data-tw-batched\", \"true\")\n // Harus diappend ke DOM sebelum .sheet bisa diakses\n document.head.appendChild(_state.styleEl)\n return _state.styleEl\n}\n\n/**\n * Inject satu CSS rule via CSSStyleSheet.insertRule().\n *\n * Ini benar-benar additive — tidak menyentuh rules yang sudah ada.\n * Fallback ke textContent append jika sheet belum siap (edge case).\n *\n * @internal\n */\nfunction insertRuleToSheet(cssRule: string): void {\n const trimmed = cssRule.trim()\n if (!trimmed) return\n\n const el = getStyleElement()\n const sheet = el.sheet\n\n if (sheet) {\n try {\n // insertRule() di akhir — urutan tidak kritis untuk utility CSS\n sheet.insertRule(trimmed, sheet.cssRules.length)\n return\n } catch {\n // insertRule() bisa throw jika:\n // 1. Rule syntax tidak valid\n // 2. Multi-rule string (insertRule() hanya terima satu rule)\n // Fallback ke textContent append untuk kasus ini.\n if (process.env.NODE_ENV === \"development\") {\n console.warn(\"[tw] insertRule failed, falling back to textContent append for rule:\", trimmed.slice(0, 80))\n }\n }\n }\n\n // Fallback: textContent append.\n // Lebih jarang terjadi sekarang karena stateEngine sudah loop per-rule,\n // tapi tetap perlu sebagai safety net.\n el.textContent = (el.textContent ?? \"\") + `\\n${trimmed}`\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Core API\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Queue a CSS rule for batched injection.\n * Multiple rules accumulated during one event loop tick are flushed together\n * in one requestAnimationFrame → one style recalculation.\n *\n * Rules diinjeksi via insertRule() — zero flicker, truly additive.\n */\nexport function batchedInject(cssRule: string): void {\n if (typeof window === \"undefined\") return // SSR — no-op\n if (!cssRule || injected.has(cssRule)) return\n\n injected.add(cssRule)\n pending.push(cssRule)\n\n if (_state.rafHandle === null) {\n _state.rafHandle = requestAnimationFrame(flushBatchedCss)\n }\n}\n\n/**\n * Immediately flush all pending CSS rules to the DOM.\n * Called automatically by RAF each frame. Can also be called manually\n * after synchronous component setup where RAF timing is too late.\n *\n * Setiap rule diinjeksi secara individual via insertRule() — tidak ada\n * window dimana existing rules hilang.\n */\nexport function flushBatchedCss(): void {\n _state.rafHandle = null\n\n if (pending.length === 0 || typeof document === \"undefined\") return\n\n // Flush semua rules sekaligus — satu per satu via insertRule()\n // insertRule() atomic per-rule: rule lama tidak pernah dihapus\n const rules = pending.splice(0)\n for (const rule of rules) {\n insertRuleToSheet(rule)\n }\n}\n\n/**\n * Synchronous inject — skips batching.\n * Use for SSR / critical path where RAF is not available.\n *\n * Menggunakan insertRule() — tidak ada flicker meskipun dipanggil\n * di tengah render cycle.\n */\nexport function syncInject(cssRule: string): void {\n if (typeof document === \"undefined\") return\n if (!cssRule || injected.has(cssRule)) return\n\n injected.add(cssRule)\n insertRuleToSheet(cssRule)\n}\n\n/**\n * Check if a rule has already been injected (deduplication check).\n */\nexport function isInjected(cssRule: string): boolean {\n return injected.has(cssRule)\n}\n\n/**\n * Clear all injected rules and remove the style element.\n * Useful for testing / SSR resets. Not for production use.\n */\nexport function resetBatchedCss(): void {\n injected.clear()\n pending.length = 0\n\n if (_state.rafHandle !== null) {\n cancelAnimationFrame(_state.rafHandle)\n _state.rafHandle = null\n }\n\n // Guard: document tidak tersedia di SSR / Node test environment\n if (typeof document !== \"undefined\" && _state.styleEl && document.head.contains(_state.styleEl)) {\n document.head.removeChild(_state.styleEl)\n _state.styleEl = null\n } else {\n _state.styleEl = null\n }\n}\n\n/**\n * Get stats about the current injection state (for devtools).\n */\nexport function getBatchedCssStats(): {\n totalInjected: number\n pendingCount: number\n hasBatchScheduled: boolean\n} {\n return {\n totalInjected: injected.size,\n pendingCount: pending.length,\n hasBatchScheduled: _state.rafHandle !== null,\n }\n}","/**\n * tailwind-styled-v4 — TwCssInjector\n *\n * React Server Component — inject route-specific CSS ke <head>.\n * Zero client JS, no hydration overhead, streaming-friendly.\n *\n * Pipeline:\n * 1. withTailwindStyled webpack plugin emit CSS manifest ke .next/static/css/tw/\n * 2. TwCssInjector baca manifest → inject <style> inline per route\n *\n * Usage:\n * // app/layout.tsx\n * import { TwCssInjector } from \"tailwind-styled-v4/runtime-css\"\n *\n * export default function Layout({ children }) {\n * return (\n * <html>\n * <head><TwCssInjector /></head>\n * <body>{children}</body>\n * </html>\n * )\n * }\n */\n\nimport React from \"react\"\n\ninterface CssInjectorProps {\n /** Route spesifik. Default: auto-detect */\n route?: string\n /** Inject global CSS juga. Default: true */\n includeGlobal?: boolean\n /** Minify inline CSS. Default: true */\n minify?: boolean\n /** CSS directory. Default: .next/static/css/tw */\n cssDir?: string\n}\n\n/**\n * Server Component — inject CSS per route ke <head>.\n * Baca dari manifest yang di-emit oleh TwCssManifestPlugin.\n */\nexport async function TwCssInjector(props: CssInjectorProps = {}): Promise<React.ReactElement> {\n const { route, includeGlobal = true, minify = true, cssDir } = props\n\n // Dynamic import fs — hanya jalan di server\n let fs: typeof import(\"node:fs\") | null = null\n let path: typeof import(\"node:path\") | null = null\n try {\n fs = await import(\"node:fs\")\n path = await import(\"node:path\")\n } catch {\n return React.createElement(React.Fragment, null)\n }\n\n const resolvedDir = cssDir\n ?? path.join(process.cwd(), \".next\", \"static\", \"css\", \"tw\")\n\n const manifestPath = path.join(resolvedDir, \"css-manifest.json\")\n\n // Baca manifest\n let manifest: { routes?: Record<string, string> } = {}\n try {\n if (fs.existsSync(manifestPath)) {\n manifest = JSON.parse(fs.readFileSync(manifestPath, \"utf-8\"))\n }\n } catch {\n // Manifest tidak ada — mungkin belum build atau native binding belum ready\n return React.createElement(React.Fragment, null)\n }\n\n const cssChunks: string[] = []\n\n // Global CSS (_global.css)\n if (includeGlobal && manifest.routes?.[\"__global\"]) {\n const globalPath = path.join(resolvedDir, manifest.routes[\"__global\"])\n const css = readFile(fs, globalPath)\n if (css) cssChunks.push(css)\n }\n\n // Route-specific CSS\n const targetRoute = route ?? \"/\"\n if (manifest.routes?.[targetRoute]) {\n const routePath = path.join(resolvedDir, manifest.routes[targetRoute])\n const css = readFile(fs, routePath)\n if (css) cssChunks.push(css)\n }\n\n if (cssChunks.length === 0) return React.createElement(React.Fragment, null)\n\n const combined = cssChunks.join(\"\\n\")\n const final = minify ? minifyCss(combined) : combined\n\n return React.createElement(\"style\", {\n dangerouslySetInnerHTML: { __html: final },\n \"data-tw-route\": targetRoute,\n \"data-tw-injector\": \"true\",\n })\n}\n\n/**\n * Hook untuk client components — CSS sudah di-handle TwCssInjector di server.\n */\nexport function useTwClasses(classes: string): string {\n return classes\n}\n\n// Helpers\nfunction readFile(fs: typeof import(\"node:fs\"), filepath: string): string | null {\n try {\n if (fs.existsSync(filepath)) return fs.readFileSync(filepath, \"utf-8\")\n } catch {}\n return null\n}\n\nfunction minifyCss(css: string): string {\n return css\n .replace(/\\/\\*[^*]*\\*+([^/*][^*]*\\*+)*\\//g, \"\")\n .replace(/\\s+/g, \" \")\n .replace(/\\s*{\\s*/g, \"{\")\n .replace(/\\s*}\\s*/g, \"}\")\n .replace(/\\s*;\\s*/g, \";\")\n .trim()\n}"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../packages/domain/runtime-css/dist/CssInjector.js"],"sourcesContent":["import React from \"react\";\nasync function TwCssInjector(props = {}) {\n const { route, includeGlobal = true, minify = true, cssDir } = props;\n let fs = null;\n let path = null;\n try {\n fs = await import(\"node:fs\");\n path = await import(\"node:path\");\n } catch {\n return React.createElement(React.Fragment, null);\n }\n const resolvedDir = cssDir ?? path.join(process.cwd(), \".next\", \"static\", \"css\", \"tw\");\n const manifestPath = path.join(resolvedDir, \"css-manifest.json\");\n let manifest = {};\n try {\n if (fs.existsSync(manifestPath)) {\n manifest = JSON.parse(fs.readFileSync(manifestPath, \"utf-8\"));\n }\n } catch {\n return React.createElement(React.Fragment, null);\n }\n const cssChunks = [];\n if (includeGlobal && manifest.routes?.[\"__global\"]) {\n const globalPath = path.join(resolvedDir, manifest.routes[\"__global\"]);\n const css = readFile(fs, globalPath);\n if (css) cssChunks.push(css);\n }\n const targetRoute = route ?? \"/\";\n if (manifest.routes?.[targetRoute]) {\n const routePath = path.join(resolvedDir, manifest.routes[targetRoute]);\n const css = readFile(fs, routePath);\n if (css) cssChunks.push(css);\n }\n if (cssChunks.length === 0) return React.createElement(React.Fragment, null);\n const combined = cssChunks.join(\"\\n\");\n const final = minify ? minifyCss(combined) : combined;\n return React.createElement(\"style\", {\n dangerouslySetInnerHTML: { __html: final },\n \"data-tw-route\": targetRoute,\n \"data-tw-injector\": \"true\"\n });\n}\nfunction useTwClasses(classes) {\n return classes;\n}\nfunction readFile(fs, filepath) {\n try {\n if (fs.existsSync(filepath)) return fs.readFileSync(filepath, \"utf-8\");\n } catch {\n }\n return null;\n}\nfunction minifyCss(css) {\n return css.replace(/\\/\\*[^*]*\\*+([^/*][^*]*\\*+)*\\//g, \"\").replace(/\\s+/g, \" \").replace(/\\s*{\\s*/g, \"{\").replace(/\\s*}\\s*/g, \"}\").replace(/\\s*;\\s*/g, \";\").trim();\n}\nexport {\n TwCssInjector,\n useTwClasses\n};\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,eAAe,cAAc,QAAQ,CAAC,GAAG;AACvC,QAAM,EAAE,OAAO,gBAAgB,MAAM,SAAS,MAAM,OAAO,IAAI;AAC/D,MAAI,KAAK;AACT,MAAI,OAAO;AACX,MAAI;AACF,SAAK,MAAM,OAAO,IAAS;AAC3B,WAAO,MAAM,OAAO,MAAW;AAAA,EACjC,QAAQ;AACN,WAAO,MAAM,cAAc,MAAM,UAAU,IAAI;AAAA,EACjD;AACA,QAAM,cAAc,UAAU,KAAK,KAAK,QAAQ,IAAI,GAAG,SAAS,UAAU,OAAO,IAAI;AACrF,QAAM,eAAe,KAAK,KAAK,aAAa,mBAAmB;AAC/D,MAAI,WAAW,CAAC;AAChB,MAAI;AACF,QAAI,GAAG,WAAW,YAAY,GAAG;AAC/B,iBAAW,KAAK,MAAM,GAAG,aAAa,cAAc,OAAO,CAAC;AAAA,IAC9D;AAAA,EACF,QAAQ;AACN,WAAO,MAAM,cAAc,MAAM,UAAU,IAAI;AAAA,EACjD;AACA,QAAM,YAAY,CAAC;AACnB,MAAI,iBAAiB,SAAS,SAAS,UAAU,GAAG;AAClD,UAAM,aAAa,KAAK,KAAK,aAAa,SAAS,OAAO,UAAU,CAAC;AACrE,UAAM,MAAM,SAAS,IAAI,UAAU;AACnC,QAAI,IAAK,WAAU,KAAK,GAAG;AAAA,EAC7B;AACA,QAAM,cAAc,SAAS;AAC7B,MAAI,SAAS,SAAS,WAAW,GAAG;AAClC,UAAM,YAAY,KAAK,KAAK,aAAa,SAAS,OAAO,WAAW,CAAC;AACrE,UAAM,MAAM,SAAS,IAAI,SAAS;AAClC,QAAI,IAAK,WAAU,KAAK,GAAG;AAAA,EAC7B;AACA,MAAI,UAAU,WAAW,EAAG,QAAO,MAAM,cAAc,MAAM,UAAU,IAAI;AAC3E,QAAM,WAAW,UAAU,KAAK,IAAI;AACpC,QAAM,QAAQ,SAAS,UAAU,QAAQ,IAAI;AAC7C,SAAO,MAAM,cAAc,SAAS;AAAA,IAClC,yBAAyB,EAAE,QAAQ,MAAM;AAAA,IACzC,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,EACtB,CAAC;AACH;AACA,SAAS,aAAa,SAAS;AAC7B,SAAO;AACT;AACA,SAAS,SAAS,IAAI,UAAU;AAC9B,MAAI;AACF,QAAI,GAAG,WAAW,QAAQ,EAAG,QAAO,GAAG,aAAa,UAAU,OAAO;AAAA,EACvE,QAAQ;AAAA,EACR;AACA,SAAO;AACT;AACA,SAAS,UAAU,KAAK;AACtB,SAAO,IAAI,QAAQ,mCAAmC,EAAE,EAAE,QAAQ,QAAQ,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,KAAK;AACjK;","names":[]}
|
package/dist/runtime.js
CHANGED
|
@@ -203,7 +203,7 @@ function generateTokenCssString() {
|
|
|
203
203
|
}
|
|
204
204
|
function createUseTokens() {
|
|
205
205
|
return function useTokens() {
|
|
206
|
-
const [tokens, setTokensState] = import_react.default.useState(
|
|
206
|
+
const [tokens, setTokensState] = import_react.default.useState({});
|
|
207
207
|
import_react.default.useEffect(() => {
|
|
208
208
|
setTokensState(engine.getTokens());
|
|
209
209
|
return engine.subscribe((nextTokens) => setTokensState(nextTokens));
|
package/dist/runtime.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/umbrella/runtime.ts","../packages/domain/runtime/src/index.ts","../packages/domain/theme/src/liveTokenEngine.ts","../packages/domain/runtime/src/schemas.ts"],"sourcesContent":["export * from \"@tailwind-styled/runtime\"\n","/**\n * @tailwind-styled/runtime v5\n *\n * Lightweight runtime helpers for compiled tailwind-styled-v5 components.\n * Live token engine has been moved to @tailwind-styled/theme package.\n */\n\nimport React from \"react\"\n\n// Re-export live token engine from @tailwind-styled/theme\nexport type {\n LiveTokenEngineBridge,\n LiveTokenSet,\n TokenMap,\n TokenSubscriber,\n} from \"@tailwind-styled/theme\"\nexport {\n applyTokenSet,\n createUseTokens,\n generateTokenCssString,\n getToken,\n getTokens,\n liveToken,\n liveTokenEngine,\n setToken,\n setTokens,\n subscribeTokens,\n tokenRef,\n tokenVar,\n} from \"@tailwind-styled/theme/live-tokens\"\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface SubComponentDef {\n /** HTML tag to render (default: \"span\") */\n tag?: string\n /** Scoped CSS class generated by Rust, e.g. \"Button_icon_abc123\" */\n class: string\n}\n\nexport type SubComponentMap = Record<string, SubComponentDef>\n\n/**\n * Map of prop name → CSS class appended when the prop is truthy.\n * e.g. { fullWidth: \"w-full\", large: \"text-lg px-6 py-3\" }\n */\nexport type ConditionalProps = Record<string, string>\n\n/**\n * A compound styled component: base ForwardRef + attached .SubName properties.\n * The generic params are intentionally loose so callers don't need to repeat them.\n */\nexport type StyledComponent<S extends SubComponentMap = SubComponentMap> =\n React.ForwardRefExoticComponent<\n React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n > & {\n [K in keyof S]: React.ForwardRefExoticComponent<\n React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n >\n }\n\n/** Metadata for one compound component produced by Rust. */\nexport interface ComponentMetadata {\n component: string\n tag: string\n baseClass: string\n subComponents: SubComponentMap\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// cx — tiny className utility (no external dependency)\n// ─────────────────────────────────────────────────────────────────────────────\n\ntype ClassInput = string | number | false | null | undefined | ClassInput[]\n\nexport function cx(...inputs: ClassInput[]): string {\n const out: string[] = []\n for (const input of inputs) {\n if (!input) continue // filters 0, false, null, undefined, \"\"\n if (typeof input === \"string\") {\n out.push(input)\n } else if (typeof input === \"number\") {\n out.push(String(input))\n } else if (Array.isArray(input)) {\n const nested = cx(...input)\n if (nested) out.push(nested)\n }\n }\n return out.join(\" \")\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// createComponent\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Build a compound styled React component from Rust-generated metadata.\n *\n * @param tag HTML element tag, e.g. \"button\" | \"div\"\n * @param baseClass Scoped base class from Rust, e.g. \"Button_abc123\"\n * @param subComponents Map of subcomponent definitions (optional)\n * @param conditionals Map of prop name → CSS class (optional)\n *\n * @example\n * // Injected automatically by the compiler — do not call manually\n * const Button = createComponent(\"button\", \"Button_abc123\", {\n * icon: { tag: \"span\", class: \"Button_icon_abc123\" },\n * text: { tag: \"span\", class: \"Button_text_abc123\" },\n * }, { fullWidth: \"w-full\" })\n *\n * // Usage in JSX:\n * <Button fullWidth>\n * <Button.icon>🔍</Button.icon>\n * <Button.text>Search</Button.text>\n * </Button>\n */\nexport function createComponent<S extends SubComponentMap = SubComponentMap>(\n tag: string,\n baseClass: string,\n subComponents?: S,\n conditionals?: ConditionalProps\n): StyledComponent<S> {\n type Props = React.HTMLAttributes<HTMLElement> &\n React.RefAttributes<HTMLElement> &\n Record<string, unknown>\n\n // ── Base component ─────────────────────────────────────────────────────────\n const Base = React.forwardRef<HTMLElement, Props>(function TwBase(props, ref) {\n const extra: string[] = []\n\n // Collect conditional classes\n if (conditionals) {\n for (const [prop, cls] of Object.entries(conditionals)) {\n if (props[prop]) extra.push(cls)\n }\n }\n\n // Build clean props — strip conditional + subcomponent boolean props\n const clean: Record<string, unknown> = {}\n const stripKeys = new Set([\n \"className\",\n ...(conditionals ? Object.keys(conditionals) : []),\n ...(subComponents ? Object.keys(subComponents) : []),\n ])\n for (const [k, v] of Object.entries(props)) {\n if (!stripKeys.has(k)) clean[k] = v\n }\n\n const className = cx(baseClass, ...extra, (props.className as string) ?? \"\")\n\n return React.createElement(tag, { ...clean, ref, className: className || undefined })\n })\n\n ;(Base as { displayName?: string }).displayName = `tw.${String(tag)}`\n\n // ── Attach subcomponent properties ────────────────────────────────────────\n if (subComponents) {\n for (const [subName, def] of Object.entries(subComponents)) {\n const subTag = def.tag ?? \"span\"\n const subClass = def.class\n\n const SubComp = React.forwardRef<HTMLElement, Props>(function TwSub(props, ref) {\n const className = cx(subClass, (props.className as string) ?? \"\")\n const clean: Record<string, unknown> = { ...props }\n delete clean.className\n return React.createElement(subTag, { ...clean, ref, className: className || undefined })\n })\n\n ;(SubComp as { displayName?: string }).displayName = `tw.${String(tag)}.${String(subName)}`\n\n ;(Base as unknown as Record<string, unknown>)[subName] = SubComp\n }\n }\n\n return Base as StyledComponent<S>\n}\n\n// Re-export schemas\nexport {\n type ComponentMetadataInput,\n ComponentMetadataSchema,\n type ConditionalPropsInput,\n ConditionalPropsSchema,\n parseComponentMetadata,\n parseSubComponentDef,\n type SubComponentDefInput,\n SubComponentDefSchema,\n} from \"./schemas\"\n","\"use client\"\n\nimport React from \"react\"\n\nimport type { TokenMap } from '@tailwind-styled/shared'\nexport type { TokenMap }\n\nexport type TokenSubscriber = (tokens: TokenMap) => void\n\nexport interface LiveTokenSet {\n vars: Record<string, string>\n get(name: string): string | undefined\n set(name: string, value: string): void\n setAll(tokens: TokenMap): void\n snapshot(): TokenMap\n}\n\nexport interface LiveTokenEngineBridge {\n getToken(name: string): string | undefined\n getTokens(): TokenMap\n setToken(name: string, value: string): void\n setTokens(tokens: TokenMap): void\n applyTokenSet(tokens: TokenMap): void\n subscribeTokens(fn: TokenSubscriber): () => void\n subscribe?(fn: TokenSubscriber): () => void\n}\n\ninterface LiveTokenEngineRuntime {\n liveToken(tokens: TokenMap): LiveTokenSet\n getToken(name: string): string | undefined\n getTokens(): TokenMap\n setToken(name: string, value: string): void\n setTokens(tokens: TokenMap): void\n applyTokenSet(tokens: TokenMap): void\n generateTokenCssString(): string\n subscribe(fn: TokenSubscriber): () => void\n}\n\nconst TOKEN_ENGINE_KEY = \"__TW_TOKEN_ENGINE__\"\n\nexport function tokenVar(name: string): string {\n const normalized = name.replace(/[^a-zA-Z0-9-]/g, \"-\").toLowerCase()\n return `--tw-token-${normalized}`\n}\n\nexport function tokenRef(name: string): string {\n return `var(${tokenVar(name)})`\n}\n\nconst buildRootCss = (tokens: TokenMap): string => {\n const vars = Object.entries(tokens)\n .map(([name, value]) => ` ${tokenVar(name)}: ${value};`)\n .join(\"\\n\")\n return `:root {\\n${vars}\\n}`\n}\n\nconst createLiveTokenEngine = (): LiveTokenEngineRuntime => {\n const state = {\n currentTokens: {} as TokenMap,\n styleEl: null as HTMLStyleElement | null,\n }\n const subscribers = new Set<TokenSubscriber>()\n\n const syncStyleEl = (): void => {\n if (typeof document === \"undefined\") return\n\n if (!state.styleEl) {\n const styleEl = document.createElement(\"style\")\n styleEl.id = \"tw-live-tokens\"\n styleEl.setAttribute(\"data-tw-tokens\", \"true\")\n document.head.appendChild(styleEl)\n state.styleEl = styleEl\n }\n\n state.styleEl.textContent = buildRootCss(state.currentTokens)\n }\n\n const notifySubscribers = (): void => {\n const snapshot = { ...state.currentTokens }\n for (const subscriber of subscribers) {\n try {\n subscriber(snapshot)\n } catch {\n // Intentionally ignore subscriber errors.\n }\n }\n }\n\n const setToken = (name: string, value: string): void => {\n state.currentTokens = { ...state.currentTokens, [name]: value }\n if (typeof document !== \"undefined\") {\n document.documentElement.style.setProperty(tokenVar(name), value)\n }\n syncStyleEl()\n notifySubscribers()\n }\n\n const setTokens = (tokens: TokenMap): void => {\n state.currentTokens = { ...state.currentTokens, ...tokens }\n if (typeof document !== \"undefined\") {\n const root = document.documentElement\n for (const [name, value] of Object.entries(tokens)) {\n root.style.setProperty(tokenVar(name), value)\n }\n }\n syncStyleEl()\n notifySubscribers()\n }\n\n const applyTokenSet = (tokens: TokenMap): void => {\n if (typeof document !== \"undefined\") {\n const root = document.documentElement\n for (const name of Object.keys(state.currentTokens)) {\n if (!(name in tokens)) {\n root.style.removeProperty(tokenVar(name))\n }\n }\n for (const [name, value] of Object.entries(tokens)) {\n root.style.setProperty(tokenVar(name), value)\n }\n }\n\n state.currentTokens = { ...tokens }\n syncStyleEl()\n notifySubscribers()\n }\n\n return {\n liveToken(tokens: TokenMap): LiveTokenSet {\n setTokens(tokens)\n\n const vars: Record<string, string> = {}\n for (const name of Object.keys(tokens)) {\n vars[name] = tokenRef(name)\n }\n\n return {\n vars,\n get(name: string) {\n return state.currentTokens[name]\n },\n set(name: string, value: string) {\n setToken(name, value)\n },\n setAll(nextTokens: TokenMap) {\n setTokens(nextTokens)\n },\n snapshot() {\n return { ...state.currentTokens }\n },\n }\n },\n getToken(name: string): string | undefined {\n return state.currentTokens[name]\n },\n getTokens(): TokenMap {\n return { ...state.currentTokens }\n },\n setToken,\n setTokens,\n applyTokenSet,\n generateTokenCssString(): string {\n return buildRootCss(state.currentTokens)\n },\n subscribe(fn: TokenSubscriber): () => void {\n subscribers.add(fn)\n return () => {\n subscribers.delete(fn)\n }\n },\n }\n}\n\nconst engine = createLiveTokenEngine()\n\nexport function liveToken(tokens: TokenMap): LiveTokenSet {\n return engine.liveToken(tokens)\n}\n\nexport function setToken(name: string, value: string): void {\n engine.setToken(name, value)\n}\n\nexport function setTokens(tokens: TokenMap): void {\n engine.setTokens(tokens)\n}\n\nexport function applyTokenSet(tokens: TokenMap): void {\n engine.applyTokenSet(tokens)\n}\n\nexport function getToken(name: string): string | undefined {\n return engine.getToken(name)\n}\n\nexport function getTokens(): TokenMap {\n return engine.getTokens()\n}\n\nexport function subscribeTokens(fn: TokenSubscriber): () => void {\n return engine.subscribe(fn)\n}\n\nexport function generateTokenCssString(): string {\n return engine.generateTokenCssString()\n}\n\nexport function createUseTokens() {\n return function useTokens(): TokenMap {\n const [tokens, setTokensState] = React.useState<TokenMap>(engine.getTokens())\n\n React.useEffect(() => {\n setTokensState(engine.getTokens())\n return engine.subscribe((nextTokens) => setTokensState(nextTokens))\n }, [])\n\n return tokens\n }\n}\n\nexport const liveTokenEngine: LiveTokenEngineBridge = {\n getToken: engine.getToken,\n getTokens: engine.getTokens,\n setToken: engine.setToken,\n setTokens: engine.setTokens,\n applyTokenSet: engine.applyTokenSet,\n subscribeTokens: engine.subscribe,\n subscribe: engine.subscribe,\n}\n\ndeclare global {\n interface Window {\n __TW_TOKEN_ENGINE__?: LiveTokenEngineBridge\n }\n}\n\nconst globalTokenEngine = globalThis as typeof globalThis & {\n [TOKEN_ENGINE_KEY]?: LiveTokenEngineBridge\n}\n\nglobalTokenEngine[TOKEN_ENGINE_KEY] = liveTokenEngine\nif (typeof window !== \"undefined\") {\n window.__TW_TOKEN_ENGINE__ = liveTokenEngine\n}\n","import { z } from \"zod\"\n\nconst formatIssues = (error: z.ZodError): string =>\n error.issues\n .map((issue) => {\n const p = issue.path.length > 0 ? issue.path.join(\".\") : \"<root>\"\n return `${p}: ${issue.message}`\n })\n .join(\"; \")\n\nconst parseWithSchema = <T>(schema: z.ZodType<T>, data: unknown, label: string): T => {\n const parsed = schema.safeParse(data)\n if (parsed.success) return parsed.data\n throw new TypeError(`${label}: ${formatIssues(parsed.error)}`)\n}\n\nexport const SubComponentDefSchema = z.object({\n tag: z.string().optional(),\n class: z.string(),\n})\n\nexport type SubComponentDefInput = z.infer<typeof SubComponentDefSchema>\n\nexport const ComponentMetadataSchema = z.object({\n component: z.string(),\n tag: z.string(),\n baseClass: z.string(),\n subComponents: z.record(z.string(), SubComponentDefSchema),\n})\n\nexport type ComponentMetadataInput = z.infer<typeof ComponentMetadataSchema>\n\nexport const ConditionalPropsSchema = z.record(z.string(), z.string())\n\nexport type ConditionalPropsInput = z.infer<typeof ConditionalPropsSchema>\n\nexport const parseSubComponentDef = (data: unknown) =>\n parseWithSchema(SubComponentDefSchema, data, \"sub-component definition is invalid\")\n\nexport const parseComponentMetadata = (data: unknown) =>\n parseWithSchema(ComponentMetadataSchema, data, \"component metadata is invalid\")\n"],"mappings":"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","names":["import_react","setToken","setTokens","applyTokenSet","React","React"]}
|
|
1
|
+
{"version":3,"sources":["../src/umbrella/runtime.ts","../packages/domain/runtime/src/index.ts","../packages/domain/theme/src/liveTokenEngine.ts","../packages/domain/runtime/src/schemas.ts"],"sourcesContent":["export * from \"@tailwind-styled/runtime\"\n","/**\n * @tailwind-styled/runtime v5\n *\n * Lightweight runtime helpers for compiled tailwind-styled-v5 components.\n * Live token engine has been moved to @tailwind-styled/theme package.\n */\n\nimport React from \"react\"\n\n// Re-export live token engine from @tailwind-styled/theme\nexport type {\n LiveTokenEngineBridge,\n LiveTokenSet,\n TokenMap,\n TokenSubscriber,\n} from \"@tailwind-styled/theme\"\nexport {\n applyTokenSet,\n createUseTokens,\n generateTokenCssString,\n getToken,\n getTokens,\n liveToken,\n liveTokenEngine,\n setToken,\n setTokens,\n subscribeTokens,\n tokenRef,\n tokenVar,\n} from \"@tailwind-styled/theme/live-tokens\"\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface SubComponentDef {\n /** HTML tag to render (default: \"span\") */\n tag?: string\n /** Scoped CSS class generated by Rust, e.g. \"Button_icon_abc123\" */\n class: string\n}\n\nexport type SubComponentMap = Record<string, SubComponentDef>\n\n/**\n * Map of prop name → CSS class appended when the prop is truthy.\n * e.g. { fullWidth: \"w-full\", large: \"text-lg px-6 py-3\" }\n */\nexport type ConditionalProps = Record<string, string>\n\n/**\n * A compound styled component: base ForwardRef + attached .SubName properties.\n * The generic params are intentionally loose so callers don't need to repeat them.\n */\nexport type StyledComponent<S extends SubComponentMap = SubComponentMap> =\n React.ForwardRefExoticComponent<\n React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n > & {\n [K in keyof S]: React.ForwardRefExoticComponent<\n React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n >\n }\n\n/** Metadata for one compound component produced by Rust. */\nexport interface ComponentMetadata {\n component: string\n tag: string\n baseClass: string\n subComponents: SubComponentMap\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// cx — tiny className utility (no external dependency)\n// ─────────────────────────────────────────────────────────────────────────────\n\ntype ClassInput = string | number | false | null | undefined | ClassInput[]\n\nexport function cx(...inputs: ClassInput[]): string {\n const out: string[] = []\n for (const input of inputs) {\n if (!input) continue // filters 0, false, null, undefined, \"\"\n if (typeof input === \"string\") {\n out.push(input)\n } else if (typeof input === \"number\") {\n out.push(String(input))\n } else if (Array.isArray(input)) {\n const nested = cx(...input)\n if (nested) out.push(nested)\n }\n }\n return out.join(\" \")\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// createComponent\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Build a compound styled React component from Rust-generated metadata.\n *\n * @param tag HTML element tag, e.g. \"button\" | \"div\"\n * @param baseClass Scoped base class from Rust, e.g. \"Button_abc123\"\n * @param subComponents Map of subcomponent definitions (optional)\n * @param conditionals Map of prop name → CSS class (optional)\n *\n * @example\n * // Injected automatically by the compiler — do not call manually\n * const Button = createComponent(\"button\", \"Button_abc123\", {\n * icon: { tag: \"span\", class: \"Button_icon_abc123\" },\n * text: { tag: \"span\", class: \"Button_text_abc123\" },\n * }, { fullWidth: \"w-full\" })\n *\n * // Usage in JSX:\n * <Button fullWidth>\n * <Button.icon>🔍</Button.icon>\n * <Button.text>Search</Button.text>\n * </Button>\n */\nexport function createComponent<S extends SubComponentMap = SubComponentMap>(\n tag: string,\n baseClass: string,\n subComponents?: S,\n conditionals?: ConditionalProps\n): StyledComponent<S> {\n type Props = React.HTMLAttributes<HTMLElement> &\n React.RefAttributes<HTMLElement> &\n Record<string, unknown>\n\n // ── Base component ─────────────────────────────────────────────────────────\n const Base = React.forwardRef<HTMLElement, Props>(function TwBase(props, ref) {\n const extra: string[] = []\n\n // Collect conditional classes\n if (conditionals) {\n for (const [prop, cls] of Object.entries(conditionals)) {\n if (props[prop]) extra.push(cls)\n }\n }\n\n // Build clean props — strip conditional + subcomponent boolean props\n const clean: Record<string, unknown> = {}\n const stripKeys = new Set([\n \"className\",\n ...(conditionals ? Object.keys(conditionals) : []),\n ...(subComponents ? Object.keys(subComponents) : []),\n ])\n for (const [k, v] of Object.entries(props)) {\n if (!stripKeys.has(k)) clean[k] = v\n }\n\n const className = cx(baseClass, ...extra, (props.className as string) ?? \"\")\n\n return React.createElement(tag, { ...clean, ref, className: className || undefined })\n })\n\n ;(Base as { displayName?: string }).displayName = `tw.${String(tag)}`\n\n // ── Attach subcomponent properties ────────────────────────────────────────\n if (subComponents) {\n for (const [subName, def] of Object.entries(subComponents)) {\n const subTag = def.tag ?? \"span\"\n const subClass = def.class\n\n const SubComp = React.forwardRef<HTMLElement, Props>(function TwSub(props, ref) {\n const className = cx(subClass, (props.className as string) ?? \"\")\n const clean: Record<string, unknown> = { ...props }\n delete clean.className\n return React.createElement(subTag, { ...clean, ref, className: className || undefined })\n })\n\n ;(SubComp as { displayName?: string }).displayName = `tw.${String(tag)}.${String(subName)}`\n\n ;(Base as unknown as Record<string, unknown>)[subName] = SubComp\n }\n }\n\n return Base as StyledComponent<S>\n}\n\n// Re-export schemas\nexport {\n type ComponentMetadataInput,\n ComponentMetadataSchema,\n type ConditionalPropsInput,\n ConditionalPropsSchema,\n parseComponentMetadata,\n parseSubComponentDef,\n type SubComponentDefInput,\n SubComponentDefSchema,\n} from \"./schemas\"\n","\"use client\"\n\nimport React from \"react\"\n\nimport type { TokenMap } from '@tailwind-styled/shared'\nexport type { TokenMap }\n\nexport type TokenSubscriber = (tokens: TokenMap) => void\n\nexport interface LiveTokenSet {\n vars: Record<string, string>\n get(name: string): string | undefined\n set(name: string, value: string): void\n setAll(tokens: TokenMap): void\n snapshot(): TokenMap\n}\n\nexport interface LiveTokenEngineBridge {\n getToken(name: string): string | undefined\n getTokens(): TokenMap\n setToken(name: string, value: string): void\n setTokens(tokens: TokenMap): void\n applyTokenSet(tokens: TokenMap): void\n subscribeTokens(fn: TokenSubscriber): () => void\n subscribe?(fn: TokenSubscriber): () => void\n}\n\ninterface LiveTokenEngineRuntime {\n liveToken(tokens: TokenMap): LiveTokenSet\n getToken(name: string): string | undefined\n getTokens(): TokenMap\n setToken(name: string, value: string): void\n setTokens(tokens: TokenMap): void\n applyTokenSet(tokens: TokenMap): void\n generateTokenCssString(): string\n subscribe(fn: TokenSubscriber): () => void\n}\n\nconst TOKEN_ENGINE_KEY = \"__TW_TOKEN_ENGINE__\"\n\nexport function tokenVar(name: string): string {\n const normalized = name.replace(/[^a-zA-Z0-9-]/g, \"-\").toLowerCase()\n return `--tw-token-${normalized}`\n}\n\nexport function tokenRef(name: string): string {\n return `var(${tokenVar(name)})`\n}\n\nconst buildRootCss = (tokens: TokenMap): string => {\n const vars = Object.entries(tokens)\n .map(([name, value]) => ` ${tokenVar(name)}: ${value};`)\n .join(\"\\n\")\n return `:root {\\n${vars}\\n}`\n}\n\nconst createLiveTokenEngine = (): LiveTokenEngineRuntime => {\n const state = {\n currentTokens: {} as TokenMap,\n styleEl: null as HTMLStyleElement | null,\n }\n const subscribers = new Set<TokenSubscriber>()\n\n const syncStyleEl = (): void => {\n if (typeof document === \"undefined\") return\n\n if (!state.styleEl) {\n const styleEl = document.createElement(\"style\")\n styleEl.id = \"tw-live-tokens\"\n styleEl.setAttribute(\"data-tw-tokens\", \"true\")\n document.head.appendChild(styleEl)\n state.styleEl = styleEl\n }\n\n state.styleEl.textContent = buildRootCss(state.currentTokens)\n }\n\n const notifySubscribers = (): void => {\n const snapshot = { ...state.currentTokens }\n for (const subscriber of subscribers) {\n try {\n subscriber(snapshot)\n } catch {\n // Intentionally ignore subscriber errors.\n }\n }\n }\n\n const setToken = (name: string, value: string): void => {\n state.currentTokens = { ...state.currentTokens, [name]: value }\n if (typeof document !== \"undefined\") {\n document.documentElement.style.setProperty(tokenVar(name), value)\n }\n syncStyleEl()\n notifySubscribers()\n }\n\n const setTokens = (tokens: TokenMap): void => {\n state.currentTokens = { ...state.currentTokens, ...tokens }\n if (typeof document !== \"undefined\") {\n const root = document.documentElement\n for (const [name, value] of Object.entries(tokens)) {\n root.style.setProperty(tokenVar(name), value)\n }\n }\n syncStyleEl()\n notifySubscribers()\n }\n\n const applyTokenSet = (tokens: TokenMap): void => {\n if (typeof document !== \"undefined\") {\n const root = document.documentElement\n for (const name of Object.keys(state.currentTokens)) {\n if (!(name in tokens)) {\n root.style.removeProperty(tokenVar(name))\n }\n }\n for (const [name, value] of Object.entries(tokens)) {\n root.style.setProperty(tokenVar(name), value)\n }\n }\n\n state.currentTokens = { ...tokens }\n syncStyleEl()\n notifySubscribers()\n }\n\n return {\n liveToken(tokens: TokenMap): LiveTokenSet {\n setTokens(tokens)\n\n const vars: Record<string, string> = {}\n for (const name of Object.keys(tokens)) {\n vars[name] = tokenRef(name)\n }\n\n return {\n vars,\n get(name: string) {\n return state.currentTokens[name]\n },\n set(name: string, value: string) {\n setToken(name, value)\n },\n setAll(nextTokens: TokenMap) {\n setTokens(nextTokens)\n },\n snapshot() {\n return { ...state.currentTokens }\n },\n }\n },\n getToken(name: string): string | undefined {\n return state.currentTokens[name]\n },\n getTokens(): TokenMap {\n return { ...state.currentTokens }\n },\n setToken,\n setTokens,\n applyTokenSet,\n generateTokenCssString(): string {\n return buildRootCss(state.currentTokens)\n },\n subscribe(fn: TokenSubscriber): () => void {\n subscribers.add(fn)\n return () => {\n subscribers.delete(fn)\n }\n },\n }\n}\n\nconst engine = createLiveTokenEngine()\n\nexport function liveToken(tokens: TokenMap): LiveTokenSet {\n return engine.liveToken(tokens)\n}\n\nexport function setToken(name: string, value: string): void {\n engine.setToken(name, value)\n}\n\nexport function setTokens(tokens: TokenMap): void {\n engine.setTokens(tokens)\n}\n\nexport function applyTokenSet(tokens: TokenMap): void {\n engine.applyTokenSet(tokens)\n}\n\nexport function getToken(name: string): string | undefined {\n return engine.getToken(name)\n}\n\nexport function getTokens(): TokenMap {\n return engine.getTokens()\n}\n\nexport function subscribeTokens(fn: TokenSubscriber): () => void {\n return engine.subscribe(fn)\n}\n\nexport function generateTokenCssString(): string {\n return engine.generateTokenCssString()\n}\n\nexport function createUseTokens() {\n return function useTokens(): TokenMap {\n // useSyncExternalStore untuk konsistensi SSR/client:\n // - getServerSnapshot() return empty object → SSR render tanpa tokens\n // - getSnapshot() return live tokens di client setelah hydration\n // Ini menghilangkan hydration mismatch karena server dan client\n // initial render keduanya return {} (empty), lalu useEffect update\n // ke nilai aktual via subscriber.\n const [tokens, setTokensState] = React.useState<TokenMap>({})\n\n React.useEffect(() => {\n // Set ke nilai aktual setelah mount (client-only)\n setTokensState(engine.getTokens())\n return engine.subscribe((nextTokens) => setTokensState(nextTokens))\n }, [])\n\n return tokens\n }\n}\n\nexport const liveTokenEngine: LiveTokenEngineBridge = {\n getToken: engine.getToken,\n getTokens: engine.getTokens,\n setToken: engine.setToken,\n setTokens: engine.setTokens,\n applyTokenSet: engine.applyTokenSet,\n subscribeTokens: engine.subscribe,\n subscribe: engine.subscribe,\n}\n\ndeclare global {\n interface Window {\n __TW_TOKEN_ENGINE__?: LiveTokenEngineBridge\n }\n}\n\nconst globalTokenEngine = globalThis as typeof globalThis & {\n [TOKEN_ENGINE_KEY]?: LiveTokenEngineBridge\n}\n\nglobalTokenEngine[TOKEN_ENGINE_KEY] = liveTokenEngine\nif (typeof window !== \"undefined\") {\n window.__TW_TOKEN_ENGINE__ = liveTokenEngine\n}\n","import { z } from \"zod\"\n\nconst formatIssues = (error: z.ZodError): string =>\n error.issues\n .map((issue) => {\n const p = issue.path.length > 0 ? issue.path.join(\".\") : \"<root>\"\n return `${p}: ${issue.message}`\n })\n .join(\"; \")\n\nconst parseWithSchema = <T>(schema: z.ZodType<T>, data: unknown, label: string): T => {\n const parsed = schema.safeParse(data)\n if (parsed.success) return parsed.data\n throw new TypeError(`${label}: ${formatIssues(parsed.error)}`)\n}\n\nexport const SubComponentDefSchema = z.object({\n tag: z.string().optional(),\n class: z.string(),\n})\n\nexport type SubComponentDefInput = z.infer<typeof SubComponentDefSchema>\n\nexport const ComponentMetadataSchema = z.object({\n component: z.string(),\n tag: z.string(),\n baseClass: z.string(),\n subComponents: z.record(z.string(), SubComponentDefSchema),\n})\n\nexport type ComponentMetadataInput = z.infer<typeof ComponentMetadataSchema>\n\nexport const ConditionalPropsSchema = z.record(z.string(), z.string())\n\nexport type ConditionalPropsInput = z.infer<typeof ConditionalPropsSchema>\n\nexport const parseSubComponentDef = (data: unknown) =>\n parseWithSchema(SubComponentDefSchema, data, \"sub-component definition is invalid\")\n\nexport const parseComponentMetadata = (data: unknown) =>\n parseWithSchema(ComponentMetadataSchema, data, \"component metadata is invalid\")\n"],"mappings":"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","names":["import_react","setToken","setTokens","applyTokenSet","React","React"]}
|
package/dist/runtime.mjs
CHANGED
|
@@ -149,7 +149,7 @@ function generateTokenCssString() {
|
|
|
149
149
|
}
|
|
150
150
|
function createUseTokens() {
|
|
151
151
|
return function useTokens() {
|
|
152
|
-
const [tokens, setTokensState] = React.useState(
|
|
152
|
+
const [tokens, setTokensState] = React.useState({});
|
|
153
153
|
React.useEffect(() => {
|
|
154
154
|
setTokensState(engine.getTokens());
|
|
155
155
|
return engine.subscribe((nextTokens) => setTokensState(nextTokens));
|