@tenphi/tasty 0.0.0-snapshot.b3fbcbb → 0.0.0-snapshot.bae20d4

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.
Files changed (163) hide show
  1. package/README.md +130 -7
  2. package/dist/chunks/cacheKey.js +16 -8
  3. package/dist/chunks/cacheKey.js.map +1 -1
  4. package/dist/chunks/definitions.js +1 -2
  5. package/dist/chunks/definitions.js.map +1 -1
  6. package/dist/chunks/renderChunk.js +31 -32
  7. package/dist/chunks/renderChunk.js.map +1 -1
  8. package/dist/config.d.ts +45 -10
  9. package/dist/config.js +75 -13
  10. package/dist/config.js.map +1 -1
  11. package/dist/core/index.d.ts +9 -8
  12. package/dist/core/index.js +7 -6
  13. package/dist/hooks/useGlobalStyles.d.ts +3 -0
  14. package/dist/hooks/useGlobalStyles.js +28 -1
  15. package/dist/hooks/useGlobalStyles.js.map +1 -1
  16. package/dist/hooks/useKeyframes.js +18 -3
  17. package/dist/hooks/useKeyframes.js.map +1 -1
  18. package/dist/hooks/useProperty.js +36 -13
  19. package/dist/hooks/useProperty.js.map +1 -1
  20. package/dist/hooks/useRawCSS.js +13 -1
  21. package/dist/hooks/useRawCSS.js.map +1 -1
  22. package/dist/hooks/useStyles.d.ts +5 -0
  23. package/dist/hooks/useStyles.js +87 -7
  24. package/dist/hooks/useStyles.js.map +1 -1
  25. package/dist/index.d.ts +9 -8
  26. package/dist/index.js +7 -6
  27. package/dist/injector/index.d.ts +9 -1
  28. package/dist/injector/index.js +9 -1
  29. package/dist/injector/index.js.map +1 -1
  30. package/dist/injector/injector.d.ts +9 -0
  31. package/dist/injector/injector.js +21 -17
  32. package/dist/injector/injector.js.map +1 -1
  33. package/dist/injector/sheet-manager.d.ts +1 -0
  34. package/dist/injector/sheet-manager.js +1 -0
  35. package/dist/injector/sheet-manager.js.map +1 -1
  36. package/dist/parser/classify.js +2 -1
  37. package/dist/parser/classify.js.map +1 -1
  38. package/dist/parser/parser.js +1 -1
  39. package/dist/pipeline/index.d.ts +1 -1
  40. package/dist/pipeline/index.js +24 -14
  41. package/dist/pipeline/index.js.map +1 -1
  42. package/dist/pipeline/materialize.js +380 -119
  43. package/dist/pipeline/materialize.js.map +1 -1
  44. package/dist/pipeline/parseStateKey.d.ts +1 -1
  45. package/dist/pipeline/parseStateKey.js +20 -11
  46. package/dist/pipeline/parseStateKey.js.map +1 -1
  47. package/dist/plugins/okhsl-plugin.js +2 -275
  48. package/dist/plugins/okhsl-plugin.js.map +1 -1
  49. package/dist/plugins/types.d.ts +9 -2
  50. package/dist/properties/index.js +14 -28
  51. package/dist/properties/index.js.map +1 -1
  52. package/dist/properties/property-type-resolver.js +12 -0
  53. package/dist/properties/property-type-resolver.js.map +1 -1
  54. package/dist/ssr/astro.d.ts +29 -0
  55. package/dist/ssr/astro.js +65 -0
  56. package/dist/ssr/astro.js.map +1 -0
  57. package/dist/ssr/async-storage.d.ts +17 -0
  58. package/dist/ssr/async-storage.js +35 -0
  59. package/dist/ssr/async-storage.js.map +1 -0
  60. package/dist/ssr/collect-auto-properties.js +40 -0
  61. package/dist/ssr/collect-auto-properties.js.map +1 -0
  62. package/dist/ssr/collector.d.ts +85 -0
  63. package/dist/ssr/collector.js +183 -0
  64. package/dist/ssr/collector.js.map +1 -0
  65. package/dist/ssr/context.d.ts +8 -0
  66. package/dist/ssr/context.js +14 -0
  67. package/dist/ssr/context.js.map +1 -0
  68. package/dist/ssr/format-global-rules.js +22 -0
  69. package/dist/ssr/format-global-rules.js.map +1 -0
  70. package/dist/ssr/format-keyframes.js +70 -0
  71. package/dist/ssr/format-keyframes.js.map +1 -0
  72. package/dist/ssr/format-property.js +50 -0
  73. package/dist/ssr/format-property.js.map +1 -0
  74. package/dist/ssr/format-rules.js +70 -0
  75. package/dist/ssr/format-rules.js.map +1 -0
  76. package/dist/ssr/hydrate.d.ts +22 -0
  77. package/dist/ssr/hydrate.js +50 -0
  78. package/dist/ssr/hydrate.js.map +1 -0
  79. package/dist/ssr/index.d.ts +5 -0
  80. package/dist/ssr/index.js +12 -0
  81. package/dist/ssr/index.js.map +1 -0
  82. package/dist/ssr/next.d.ts +45 -0
  83. package/dist/ssr/next.js +71 -0
  84. package/dist/ssr/next.js.map +1 -0
  85. package/dist/ssr/ssr-collector-ref.js +12 -0
  86. package/dist/ssr/ssr-collector-ref.js.map +1 -0
  87. package/dist/states/index.js +10 -257
  88. package/dist/states/index.js.map +1 -1
  89. package/dist/styles/color.js +9 -5
  90. package/dist/styles/color.js.map +1 -1
  91. package/dist/styles/createStyle.js +24 -21
  92. package/dist/styles/createStyle.js.map +1 -1
  93. package/dist/styles/index.js +1 -1
  94. package/dist/styles/predefined.d.ts +0 -2
  95. package/dist/styles/predefined.js +0 -3
  96. package/dist/styles/predefined.js.map +1 -1
  97. package/dist/styles/preset.js +1 -1
  98. package/dist/styles/preset.js.map +1 -1
  99. package/dist/styles/scrollbar.d.ts +9 -5
  100. package/dist/styles/scrollbar.js +25 -89
  101. package/dist/styles/scrollbar.js.map +1 -1
  102. package/dist/styles/transition.js +1 -1
  103. package/dist/styles/transition.js.map +1 -1
  104. package/dist/styles/types.d.ts +24 -14
  105. package/dist/tasty.d.ts +20 -21
  106. package/dist/tasty.js +24 -11
  107. package/dist/tasty.js.map +1 -1
  108. package/dist/types.d.ts +1 -1
  109. package/dist/utils/cache-wrapper.js +4 -8
  110. package/dist/utils/cache-wrapper.js.map +1 -1
  111. package/dist/utils/color-math.d.ts +45 -0
  112. package/dist/utils/color-math.js +749 -0
  113. package/dist/utils/color-math.js.map +1 -0
  114. package/dist/utils/color-space.d.ts +5 -0
  115. package/dist/utils/color-space.js +228 -0
  116. package/dist/utils/color-space.js.map +1 -0
  117. package/dist/utils/colors.js +3 -1
  118. package/dist/utils/colors.js.map +1 -1
  119. package/dist/utils/has-keys.js +13 -0
  120. package/dist/utils/has-keys.js.map +1 -0
  121. package/dist/utils/mod-attrs.js +1 -1
  122. package/dist/utils/process-tokens.d.ts +3 -13
  123. package/dist/utils/process-tokens.js +17 -97
  124. package/dist/utils/process-tokens.js.map +1 -1
  125. package/dist/utils/selector-transform.js +32 -0
  126. package/dist/utils/selector-transform.js.map +1 -0
  127. package/dist/utils/styles.d.ts +2 -79
  128. package/dist/utils/styles.js +26 -554
  129. package/dist/utils/styles.js.map +1 -1
  130. package/dist/utils/typography.d.ts +24 -13
  131. package/dist/utils/typography.js +6 -16
  132. package/dist/utils/typography.js.map +1 -1
  133. package/dist/zero/babel.d.ts +48 -6
  134. package/dist/zero/babel.js +63 -5
  135. package/dist/zero/babel.js.map +1 -1
  136. package/dist/zero/next.d.ts +44 -30
  137. package/dist/zero/next.js +102 -38
  138. package/dist/zero/next.js.map +1 -1
  139. package/docs/PIPELINE.md +519 -0
  140. package/docs/adoption.md +286 -0
  141. package/docs/comparison.md +413 -0
  142. package/docs/configuration.md +263 -0
  143. package/docs/debug.md +505 -0
  144. package/docs/design-system.md +401 -0
  145. package/docs/dsl.md +540 -0
  146. package/docs/getting-started.md +201 -0
  147. package/docs/injector.md +528 -0
  148. package/docs/methodology.md +501 -0
  149. package/docs/runtime.md +291 -0
  150. package/docs/ssr.md +382 -0
  151. package/docs/styles.md +574 -0
  152. package/docs/tasty-static.md +420 -0
  153. package/package.json +50 -30
  154. package/dist/styles/styledScrollbar.d.ts +0 -47
  155. package/dist/styles/styledScrollbar.js +0 -38
  156. package/dist/styles/styledScrollbar.js.map +0 -1
  157. package/dist/tokens/typography.d.ts +0 -19
  158. package/dist/tokens/typography.js +0 -237
  159. package/dist/tokens/typography.js.map +0 -1
  160. package/dist/utils/hsl-to-rgb.js +0 -38
  161. package/dist/utils/hsl-to-rgb.js.map +0 -1
  162. package/dist/utils/okhsl-to-rgb.js +0 -296
  163. package/dist/utils/okhsl-to-rgb.js.map +0 -1
@@ -0,0 +1,14 @@
1
+ import { createContext } from "react";
2
+
3
+ //#region src/ssr/context.ts
4
+ /**
5
+ * React context for SSR collector discovery.
6
+ *
7
+ * Used by Next.js TastyRegistry to provide the ServerStyleCollector
8
+ * to useStyles() via React context (the streaming-compatible path).
9
+ */
10
+ const TastySSRContext = createContext(null);
11
+
12
+ //#endregion
13
+ export { TastySSRContext };
14
+ //# sourceMappingURL=context.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.js","names":[],"sources":["../../src/ssr/context.ts"],"sourcesContent":["/**\n * React context for SSR collector discovery.\n *\n * Used by Next.js TastyRegistry to provide the ServerStyleCollector\n * to useStyles() via React context (the streaming-compatible path).\n */\n\nimport { createContext } from 'react';\n\nimport type { ServerStyleCollector } from './collector';\n\nexport const TastySSRContext = createContext<ServerStyleCollector | null>(null);\n"],"mappings":";;;;;;;;;AAWA,MAAa,kBAAkB,cAA2C,KAAK"}
@@ -0,0 +1,22 @@
1
+ //#region src/ssr/format-global-rules.ts
2
+ /**
3
+ * Format an array of global StyleResult rules into a CSS text string.
4
+ *
5
+ * Rules already have their full selectors applied by renderStyles().
6
+ * Handles rootPrefix prepending and at-rule wrapping.
7
+ */
8
+ function formatGlobalRules(rules) {
9
+ if (rules.length === 0) return "";
10
+ const cssRules = [];
11
+ for (const rule of rules) {
12
+ const baseRule = `${rule.rootPrefix ? `${rule.rootPrefix} ${rule.selector}` : rule.selector} { ${rule.declarations} }`;
13
+ let fullRule = baseRule;
14
+ if (rule.atRules && rule.atRules.length > 0) fullRule = rule.atRules.reduce((css, atRule) => `${atRule} { ${css} }`, baseRule);
15
+ cssRules.push(fullRule);
16
+ }
17
+ return cssRules.join("\n");
18
+ }
19
+
20
+ //#endregion
21
+ export { formatGlobalRules };
22
+ //# sourceMappingURL=format-global-rules.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"format-global-rules.js","names":[],"sources":["../../src/ssr/format-global-rules.ts"],"sourcesContent":["/**\n * Format global CSS rules for SSR output.\n *\n * Unlike formatRules() which applies className-based specificity doubling,\n * this function formats rules that already have their full selectors\n * (from renderStyles called with a selector string).\n */\n\nimport type { StyleResult } from '../pipeline';\n\n/**\n * Format an array of global StyleResult rules into a CSS text string.\n *\n * Rules already have their full selectors applied by renderStyles().\n * Handles rootPrefix prepending and at-rule wrapping.\n */\nexport function formatGlobalRules(rules: StyleResult[]): string {\n if (rules.length === 0) return '';\n\n const cssRules: string[] = [];\n\n for (const rule of rules) {\n const selector = rule.rootPrefix\n ? `${rule.rootPrefix} ${rule.selector}`\n : rule.selector;\n\n const baseRule = `${selector} { ${rule.declarations} }`;\n\n let fullRule = baseRule;\n if (rule.atRules && rule.atRules.length > 0) {\n fullRule = rule.atRules.reduce(\n (css, atRule) => `${atRule} { ${css} }`,\n baseRule,\n );\n }\n\n cssRules.push(fullRule);\n }\n\n return cssRules.join('\\n');\n}\n"],"mappings":";;;;;;;AAgBA,SAAgB,kBAAkB,OAA8B;AAC9D,KAAI,MAAM,WAAW,EAAG,QAAO;CAE/B,MAAM,WAAqB,EAAE;AAE7B,MAAK,MAAM,QAAQ,OAAO;EAKxB,MAAM,WAAW,GAJA,KAAK,aAClB,GAAG,KAAK,WAAW,GAAG,KAAK,aAC3B,KAAK,SAEoB,KAAK,KAAK,aAAa;EAEpD,IAAI,WAAW;AACf,MAAI,KAAK,WAAW,KAAK,QAAQ,SAAS,EACxC,YAAW,KAAK,QAAQ,QACrB,KAAK,WAAW,GAAG,OAAO,KAAK,IAAI,KACpC,SACD;AAGH,WAAS,KAAK,SAAS;;AAGzB,QAAO,SAAS,KAAK,KAAK"}
@@ -0,0 +1,70 @@
1
+ import { createStyle } from "../styles/createStyle.js";
2
+ import { STYLE_HANDLER_MAP } from "../styles/index.js";
3
+
4
+ //#region src/ssr/format-keyframes.ts
5
+ /**
6
+ * Convert keyframes steps to a CSS string.
7
+ * Replicates SheetManager.stepsToCSS() without the class instance.
8
+ */
9
+ function stepsToCSS(steps) {
10
+ const rules = [];
11
+ for (const [key, value] of Object.entries(steps)) {
12
+ if (typeof value === "string") {
13
+ rules.push(`${key} { ${value.trim()} }`);
14
+ continue;
15
+ }
16
+ const styleMap = value || {};
17
+ const styleNames = Object.keys(styleMap).sort();
18
+ const handlerQueue = [];
19
+ const seenHandlers = /* @__PURE__ */ new Set();
20
+ styleNames.forEach((styleName) => {
21
+ let handlers = STYLE_HANDLER_MAP[styleName];
22
+ if (!handlers) handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];
23
+ handlers.forEach((handler) => {
24
+ if (!seenHandlers.has(handler)) {
25
+ seenHandlers.add(handler);
26
+ handlerQueue.push(handler);
27
+ }
28
+ });
29
+ });
30
+ const declarationPairs = [];
31
+ handlerQueue.forEach((handler) => {
32
+ const result = handler(handler.__lookupStyles.reduce((acc, name) => {
33
+ const v = styleMap[name];
34
+ if (v !== void 0) acc[name] = v;
35
+ return acc;
36
+ }, {}));
37
+ if (!result) return;
38
+ (Array.isArray(result) ? result : [result]).forEach((cssMap) => {
39
+ if (!cssMap || typeof cssMap !== "object") return;
40
+ const { $: _$, ...props } = cssMap;
41
+ Object.entries(props).forEach(([prop, val]) => {
42
+ if (val == null || val === "") return;
43
+ if (Array.isArray(val)) val.forEach((v) => {
44
+ if (v != null && v !== "") declarationPairs.push({
45
+ prop,
46
+ value: String(v)
47
+ });
48
+ });
49
+ else declarationPairs.push({
50
+ prop,
51
+ value: String(val)
52
+ });
53
+ });
54
+ });
55
+ });
56
+ const declarations = declarationPairs.map((d) => `${d.prop}: ${d.value}`).join("; ");
57
+ rules.push(`${key} { ${declarations.trim()} }`);
58
+ }
59
+ return rules.join(" ");
60
+ }
61
+ /**
62
+ * Format a @keyframes rule as a CSS string.
63
+ */
64
+ function formatKeyframesCSS(name, steps) {
65
+ return `@keyframes ${name} { ${stepsToCSS(steps)} }`;
66
+ }
67
+
68
+ //#endregion
69
+ export { formatKeyframesCSS };
70
+ //# sourceMappingURL=format-keyframes.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"format-keyframes.js","names":[],"sources":["../../src/ssr/format-keyframes.ts"],"sourcesContent":["/**\n * Format @keyframes CSS rules for SSR output.\n *\n * Replicates the stepsToCSS logic from SheetManager but as a\n * standalone function that doesn't need DOM access.\n */\n\nimport type { KeyframesSteps } from '../injector/types';\nimport { createStyle, STYLE_HANDLER_MAP } from '../styles';\nimport type { CSSMap, StyleHandler, StyleValueStateMap } from '../utils/styles';\n\n/**\n * Convert keyframes steps to a CSS string.\n * Replicates SheetManager.stepsToCSS() without the class instance.\n */\nfunction stepsToCSS(steps: KeyframesSteps): string {\n const rules: string[] = [];\n\n for (const [key, value] of Object.entries(steps)) {\n if (typeof value === 'string') {\n rules.push(`${key} { ${value.trim()} }`);\n continue;\n }\n\n const styleMap = (value || {}) as StyleValueStateMap;\n const styleNames = Object.keys(styleMap).sort();\n const handlerQueue: StyleHandler[] = [];\n const seenHandlers = new Set<StyleHandler>();\n\n styleNames.forEach((styleName) => {\n let handlers = STYLE_HANDLER_MAP[styleName];\n if (!handlers) {\n handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];\n }\n\n handlers.forEach((handler) => {\n if (!seenHandlers.has(handler)) {\n seenHandlers.add(handler);\n handlerQueue.push(handler);\n }\n });\n });\n\n const declarationPairs: { prop: string; value: string }[] = [];\n\n handlerQueue.forEach((handler) => {\n const lookup = handler.__lookupStyles;\n const filteredMap = lookup.reduce<StyleValueStateMap>((acc, name) => {\n const v = styleMap[name];\n if (v !== undefined) acc[name] = v;\n return acc;\n }, {});\n\n const result = handler(filteredMap);\n if (!result) return;\n\n const results = Array.isArray(result) ? result : [result];\n results.forEach((cssMap) => {\n if (!cssMap || typeof cssMap !== 'object') return;\n const { $: _$, ...props } = cssMap as CSSMap;\n\n Object.entries(props).forEach(([prop, val]) => {\n if (val == null || val === '') return;\n\n if (Array.isArray(val)) {\n val.forEach((v) => {\n if (v != null && v !== '') {\n declarationPairs.push({ prop, value: String(v) });\n }\n });\n } else {\n declarationPairs.push({ prop, value: String(val) });\n }\n });\n });\n });\n\n const declarations = declarationPairs\n .map((d) => `${d.prop}: ${d.value}`)\n .join('; ');\n\n rules.push(`${key} { ${declarations.trim()} }`);\n }\n\n return rules.join(' ');\n}\n\n/**\n * Format a @keyframes rule as a CSS string.\n */\nexport function formatKeyframesCSS(\n name: string,\n steps: KeyframesSteps,\n): string {\n const cssSteps = stepsToCSS(steps);\n return `@keyframes ${name} { ${cssSteps} }`;\n}\n"],"mappings":";;;;;;;;AAeA,SAAS,WAAW,OAA+B;CACjD,MAAM,QAAkB,EAAE;AAE1B,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,EAAE;AAChD,MAAI,OAAO,UAAU,UAAU;AAC7B,SAAM,KAAK,GAAG,IAAI,KAAK,MAAM,MAAM,CAAC,IAAI;AACxC;;EAGF,MAAM,WAAY,SAAS,EAAE;EAC7B,MAAM,aAAa,OAAO,KAAK,SAAS,CAAC,MAAM;EAC/C,MAAM,eAA+B,EAAE;EACvC,MAAM,+BAAe,IAAI,KAAmB;AAE5C,aAAW,SAAS,cAAc;GAChC,IAAI,WAAW,kBAAkB;AACjC,OAAI,CAAC,SACH,YAAW,kBAAkB,aAAa,CAAC,YAAY,UAAU,CAAC;AAGpE,YAAS,SAAS,YAAY;AAC5B,QAAI,CAAC,aAAa,IAAI,QAAQ,EAAE;AAC9B,kBAAa,IAAI,QAAQ;AACzB,kBAAa,KAAK,QAAQ;;KAE5B;IACF;EAEF,MAAM,mBAAsD,EAAE;AAE9D,eAAa,SAAS,YAAY;GAQhC,MAAM,SAAS,QAPA,QAAQ,eACI,QAA4B,KAAK,SAAS;IACnE,MAAM,IAAI,SAAS;AACnB,QAAI,MAAM,OAAW,KAAI,QAAQ;AACjC,WAAO;MACN,EAAE,CAAC,CAE6B;AACnC,OAAI,CAAC,OAAQ;AAGb,IADgB,MAAM,QAAQ,OAAO,GAAG,SAAS,CAAC,OAAO,EACjD,SAAS,WAAW;AAC1B,QAAI,CAAC,UAAU,OAAO,WAAW,SAAU;IAC3C,MAAM,EAAE,GAAG,IAAI,GAAG,UAAU;AAE5B,WAAO,QAAQ,MAAM,CAAC,SAAS,CAAC,MAAM,SAAS;AAC7C,SAAI,OAAO,QAAQ,QAAQ,GAAI;AAE/B,SAAI,MAAM,QAAQ,IAAI,CACpB,KAAI,SAAS,MAAM;AACjB,UAAI,KAAK,QAAQ,MAAM,GACrB,kBAAiB,KAAK;OAAE;OAAM,OAAO,OAAO,EAAE;OAAE,CAAC;OAEnD;SAEF,kBAAiB,KAAK;MAAE;MAAM,OAAO,OAAO,IAAI;MAAE,CAAC;MAErD;KACF;IACF;EAEF,MAAM,eAAe,iBAClB,KAAK,MAAM,GAAG,EAAE,KAAK,IAAI,EAAE,QAAQ,CACnC,KAAK,KAAK;AAEb,QAAM,KAAK,GAAG,IAAI,KAAK,aAAa,MAAM,CAAC,IAAI;;AAGjD,QAAO,MAAM,KAAK,IAAI;;;;;AAMxB,SAAgB,mBACd,MACA,OACQ;AAER,QAAO,cAAc,KAAK,KADT,WAAW,MAAM,CACM"}
@@ -0,0 +1,50 @@
1
+ import { colorInitialValueToComponents, getColorSpaceSuffix, getComponentPropertySyntax } from "../utils/color-space.js";
2
+ import { getEffectiveDefinition } from "../properties/index.js";
3
+ import { parseStyle } from "../utils/styles.js";
4
+
5
+ //#region src/ssr/format-property.ts
6
+ /**
7
+ * Format a single @property rule as a CSS string.
8
+ *
9
+ * Returns the full `@property --name { ... }` text, or empty string
10
+ * if the token is invalid. For color properties, also returns
11
+ * the companion component property.
12
+ */
13
+ function formatPropertyCSS(token, definition) {
14
+ const result = getEffectiveDefinition(token, definition);
15
+ if (!result.isValid) return "";
16
+ const rules = [];
17
+ rules.push(buildPropertyRule(result.cssName, result.definition));
18
+ if (result.isColor) {
19
+ const suffix = getColorSpaceSuffix();
20
+ const componentCssName = `${result.cssName}-${suffix}`;
21
+ const componentInitial = colorInitialValueToComponents(result.definition.initialValue);
22
+ rules.push(buildPropertyRule(componentCssName, {
23
+ syntax: getComponentPropertySyntax(),
24
+ inherits: result.definition.inherits,
25
+ initialValue: componentInitial
26
+ }));
27
+ }
28
+ return rules.join("\n");
29
+ }
30
+ function buildPropertyRule(cssName, definition) {
31
+ const parts = [];
32
+ if (definition.syntax != null) {
33
+ let syntax = String(definition.syntax).trim();
34
+ if (!/^['"]/u.test(syntax)) syntax = `"${syntax}"`;
35
+ parts.push(`syntax: ${syntax};`);
36
+ }
37
+ const inherits = definition.inherits ?? true;
38
+ parts.push(`inherits: ${inherits ? "true" : "false"};`);
39
+ if (definition.initialValue != null) {
40
+ let initialValueStr;
41
+ if (typeof definition.initialValue === "number") initialValueStr = String(definition.initialValue);
42
+ else initialValueStr = parseStyle(definition.initialValue).output;
43
+ parts.push(`initial-value: ${initialValueStr};`);
44
+ }
45
+ return `@property ${cssName} { ${parts.join(" ").trim()} }`;
46
+ }
47
+
48
+ //#endregion
49
+ export { formatPropertyCSS };
50
+ //# sourceMappingURL=format-property.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"format-property.js","names":[],"sources":["../../src/ssr/format-property.ts"],"sourcesContent":["/**\n * Format @property CSS rules for SSR output.\n *\n * Replicates the CSS construction from StyleInjector.property()\n * but returns a CSS string instead of inserting into the DOM.\n */\n\nimport type { PropertyDefinition } from '../injector/types';\nimport { getEffectiveDefinition } from '../properties';\nimport {\n colorInitialValueToComponents,\n getColorSpaceSuffix,\n getComponentPropertySyntax,\n} from '../utils/color-space';\nimport type { StyleValue } from '../utils/styles';\nimport { parseStyle } from '../utils/styles';\n\n/**\n * Format a single @property rule as a CSS string.\n *\n * Returns the full `@property --name { ... }` text, or empty string\n * if the token is invalid. For color properties, also returns\n * the companion component property.\n */\nexport function formatPropertyCSS(\n token: string,\n definition: PropertyDefinition,\n): string {\n const result = getEffectiveDefinition(token, definition);\n if (!result.isValid) return '';\n\n const rules: string[] = [];\n\n rules.push(buildPropertyRule(result.cssName, result.definition));\n\n if (result.isColor) {\n const suffix = getColorSpaceSuffix();\n const componentCssName = `${result.cssName}-${suffix}`;\n const componentInitial = colorInitialValueToComponents(\n result.definition.initialValue,\n );\n rules.push(\n buildPropertyRule(componentCssName, {\n syntax: getComponentPropertySyntax(),\n inherits: result.definition.inherits,\n initialValue: componentInitial,\n }),\n );\n }\n\n return rules.join('\\n');\n}\n\nfunction buildPropertyRule(\n cssName: string,\n definition: PropertyDefinition,\n): string {\n const parts: string[] = [];\n\n if (definition.syntax != null) {\n let syntax = String(definition.syntax).trim();\n if (!/^['\"]/u.test(syntax)) syntax = `\"${syntax}\"`;\n parts.push(`syntax: ${syntax};`);\n }\n\n const inherits = definition.inherits ?? true;\n parts.push(`inherits: ${inherits ? 'true' : 'false'};`);\n\n if (definition.initialValue != null) {\n let initialValueStr: string;\n if (typeof definition.initialValue === 'number') {\n initialValueStr = String(definition.initialValue);\n } else {\n initialValueStr = parseStyle(\n definition.initialValue as StyleValue,\n ).output;\n }\n parts.push(`initial-value: ${initialValueStr};`);\n }\n\n const declarations = parts.join(' ').trim();\n return `@property ${cssName} { ${declarations} }`;\n}\n"],"mappings":";;;;;;;;;;;;AAwBA,SAAgB,kBACd,OACA,YACQ;CACR,MAAM,SAAS,uBAAuB,OAAO,WAAW;AACxD,KAAI,CAAC,OAAO,QAAS,QAAO;CAE5B,MAAM,QAAkB,EAAE;AAE1B,OAAM,KAAK,kBAAkB,OAAO,SAAS,OAAO,WAAW,CAAC;AAEhE,KAAI,OAAO,SAAS;EAClB,MAAM,SAAS,qBAAqB;EACpC,MAAM,mBAAmB,GAAG,OAAO,QAAQ,GAAG;EAC9C,MAAM,mBAAmB,8BACvB,OAAO,WAAW,aACnB;AACD,QAAM,KACJ,kBAAkB,kBAAkB;GAClC,QAAQ,4BAA4B;GACpC,UAAU,OAAO,WAAW;GAC5B,cAAc;GACf,CAAC,CACH;;AAGH,QAAO,MAAM,KAAK,KAAK;;AAGzB,SAAS,kBACP,SACA,YACQ;CACR,MAAM,QAAkB,EAAE;AAE1B,KAAI,WAAW,UAAU,MAAM;EAC7B,IAAI,SAAS,OAAO,WAAW,OAAO,CAAC,MAAM;AAC7C,MAAI,CAAC,SAAS,KAAK,OAAO,CAAE,UAAS,IAAI,OAAO;AAChD,QAAM,KAAK,WAAW,OAAO,GAAG;;CAGlC,MAAM,WAAW,WAAW,YAAY;AACxC,OAAM,KAAK,aAAa,WAAW,SAAS,QAAQ,GAAG;AAEvD,KAAI,WAAW,gBAAgB,MAAM;EACnC,IAAI;AACJ,MAAI,OAAO,WAAW,iBAAiB,SACrC,mBAAkB,OAAO,WAAW,aAAa;MAEjD,mBAAkB,WAChB,WAAW,aACZ,CAAC;AAEJ,QAAM,KAAK,kBAAkB,gBAAgB,GAAG;;AAIlD,QAAO,aAAa,QAAQ,KADP,MAAM,KAAK,IAAI,CAAC,MAAM,CACG"}
@@ -0,0 +1,70 @@
1
+ //#region src/ssr/format-rules.ts
2
+ /**
3
+ * Resolve selectors for a rule, applying className-based specificity doubling
4
+ * and rootPrefix handling. Mirrors the logic in StyleInjector.inject().
5
+ */
6
+ function resolveSelector(rule, className) {
7
+ let selector = rule.selector;
8
+ if (rule.needsClassName) {
9
+ const selectorParts = selector ? selector.split("|||") : [""];
10
+ const classPrefix = `.${className}.${className}`;
11
+ selector = selectorParts.map((part) => {
12
+ const classSelector = part ? `${classPrefix}${part}` : classPrefix;
13
+ if (rule.rootPrefix) return `${rule.rootPrefix} ${classSelector}`;
14
+ return classSelector;
15
+ }).join(", ");
16
+ }
17
+ return selector;
18
+ }
19
+ /**
20
+ * Group rules by selector + at-rules and merge their declarations.
21
+ * Mirrors the grouping logic in SheetManager.insertRule().
22
+ */
23
+ function groupRules(rules) {
24
+ const groupMap = /* @__PURE__ */ new Map();
25
+ const order = [];
26
+ const atKey = (at) => at && at.length ? at.join("|") : "";
27
+ for (const r of rules) {
28
+ const key = `${atKey(r.atRules)}||${r.selector}`;
29
+ const existing = groupMap.get(key);
30
+ if (existing) existing.declarations = existing.declarations ? `${existing.declarations} ${r.declarations}` : r.declarations;
31
+ else {
32
+ groupMap.set(key, {
33
+ selector: r.selector,
34
+ atRules: r.atRules,
35
+ declarations: r.declarations
36
+ });
37
+ order.push(key);
38
+ }
39
+ }
40
+ return order.map((key) => groupMap.get(key));
41
+ }
42
+ /**
43
+ * Format an array of StyleResult rules into a CSS text string.
44
+ *
45
+ * Applies className-based specificity doubling (.cls.cls),
46
+ * groups rules by selector + at-rules, and wraps with at-rule blocks.
47
+ *
48
+ * Produces the same CSS text as SheetManager.insertRule() would insert
49
+ * into the DOM, but as a plain string suitable for SSR output.
50
+ */
51
+ function formatRules(rules, className) {
52
+ if (rules.length === 0) return "";
53
+ const grouped = groupRules(rules.map((rule) => ({
54
+ selector: resolveSelector(rule, className),
55
+ declarations: rule.declarations,
56
+ atRules: rule.atRules
57
+ })));
58
+ const cssRules = [];
59
+ for (const rule of grouped) {
60
+ const baseRule = `${rule.selector} { ${rule.declarations} }`;
61
+ let fullRule = baseRule;
62
+ if (rule.atRules && rule.atRules.length > 0) fullRule = rule.atRules.reduce((css, atRule) => `${atRule} { ${css} }`, baseRule);
63
+ cssRules.push(fullRule);
64
+ }
65
+ return cssRules.join("\n");
66
+ }
67
+
68
+ //#endregion
69
+ export { formatRules };
70
+ //# sourceMappingURL=format-rules.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"format-rules.js","names":[],"sources":["../../src/ssr/format-rules.ts"],"sourcesContent":["/**\n * Shared CSS rule formatting utility.\n *\n * Extracted from SheetManager to allow both the DOM-based injector (client)\n * and the ServerStyleCollector (server) to produce identical CSS text\n * from StyleResult arrays.\n */\n\nimport type { StyleResult } from '../pipeline';\n\n/**\n * Resolve selectors for a rule, applying className-based specificity doubling\n * and rootPrefix handling. Mirrors the logic in StyleInjector.inject().\n */\nfunction resolveSelector(rule: StyleResult, className: string): string {\n let selector = rule.selector;\n\n if (rule.needsClassName) {\n const selectorParts = selector ? selector.split('|||') : [''];\n const classPrefix = `.${className}.${className}`;\n\n selector = selectorParts\n .map((part) => {\n const classSelector = part ? `${classPrefix}${part}` : classPrefix;\n\n if (rule.rootPrefix) {\n return `${rule.rootPrefix} ${classSelector}`;\n }\n return classSelector;\n })\n .join(', ');\n }\n\n return selector;\n}\n\n/**\n * Group rules by selector + at-rules and merge their declarations.\n * Mirrors the grouping logic in SheetManager.insertRule().\n */\nfunction groupRules(\n rules: { selector: string; declarations: string; atRules?: string[] }[],\n): { selector: string; declarations: string; atRules?: string[] }[] {\n const groupMap = new Map<\n string,\n { selector: string; atRules?: string[]; declarations: string }\n >();\n const order: string[] = [];\n\n const atKey = (at?: string[]) => (at && at.length ? at.join('|') : '');\n\n for (const r of rules) {\n const key = `${atKey(r.atRules)}||${r.selector}`;\n const existing = groupMap.get(key);\n if (existing) {\n existing.declarations = existing.declarations\n ? `${existing.declarations} ${r.declarations}`\n : r.declarations;\n } else {\n groupMap.set(key, {\n selector: r.selector,\n atRules: r.atRules,\n declarations: r.declarations,\n });\n order.push(key);\n }\n }\n\n return order.map((key) => groupMap.get(key)!);\n}\n\n/**\n * Format an array of StyleResult rules into a CSS text string.\n *\n * Applies className-based specificity doubling (.cls.cls),\n * groups rules by selector + at-rules, and wraps with at-rule blocks.\n *\n * Produces the same CSS text as SheetManager.insertRule() would insert\n * into the DOM, but as a plain string suitable for SSR output.\n */\nexport function formatRules(rules: StyleResult[], className: string): string {\n if (rules.length === 0) return '';\n\n const resolvedRules = rules.map((rule) => ({\n selector: resolveSelector(rule, className),\n declarations: rule.declarations,\n atRules: rule.atRules,\n }));\n\n const grouped = groupRules(resolvedRules);\n const cssRules: string[] = [];\n\n for (const rule of grouped) {\n const baseRule = `${rule.selector} { ${rule.declarations} }`;\n\n let fullRule = baseRule;\n if (rule.atRules && rule.atRules.length > 0) {\n fullRule = rule.atRules.reduce(\n (css, atRule) => `${atRule} { ${css} }`,\n baseRule,\n );\n }\n\n cssRules.push(fullRule);\n }\n\n return cssRules.join('\\n');\n}\n"],"mappings":";;;;;AAcA,SAAS,gBAAgB,MAAmB,WAA2B;CACrE,IAAI,WAAW,KAAK;AAEpB,KAAI,KAAK,gBAAgB;EACvB,MAAM,gBAAgB,WAAW,SAAS,MAAM,MAAM,GAAG,CAAC,GAAG;EAC7D,MAAM,cAAc,IAAI,UAAU,GAAG;AAErC,aAAW,cACR,KAAK,SAAS;GACb,MAAM,gBAAgB,OAAO,GAAG,cAAc,SAAS;AAEvD,OAAI,KAAK,WACP,QAAO,GAAG,KAAK,WAAW,GAAG;AAE/B,UAAO;IACP,CACD,KAAK,KAAK;;AAGf,QAAO;;;;;;AAOT,SAAS,WACP,OACkE;CAClE,MAAM,2BAAW,IAAI,KAGlB;CACH,MAAM,QAAkB,EAAE;CAE1B,MAAM,SAAS,OAAmB,MAAM,GAAG,SAAS,GAAG,KAAK,IAAI,GAAG;AAEnE,MAAK,MAAM,KAAK,OAAO;EACrB,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,CAAC,IAAI,EAAE;EACtC,MAAM,WAAW,SAAS,IAAI,IAAI;AAClC,MAAI,SACF,UAAS,eAAe,SAAS,eAC7B,GAAG,SAAS,aAAa,GAAG,EAAE,iBAC9B,EAAE;OACD;AACL,YAAS,IAAI,KAAK;IAChB,UAAU,EAAE;IACZ,SAAS,EAAE;IACX,cAAc,EAAE;IACjB,CAAC;AACF,SAAM,KAAK,IAAI;;;AAInB,QAAO,MAAM,KAAK,QAAQ,SAAS,IAAI,IAAI,CAAE;;;;;;;;;;;AAY/C,SAAgB,YAAY,OAAsB,WAA2B;AAC3E,KAAI,MAAM,WAAW,EAAG,QAAO;CAQ/B,MAAM,UAAU,WANM,MAAM,KAAK,UAAU;EACzC,UAAU,gBAAgB,MAAM,UAAU;EAC1C,cAAc,KAAK;EACnB,SAAS,KAAK;EACf,EAAE,CAEsC;CACzC,MAAM,WAAqB,EAAE;AAE7B,MAAK,MAAM,QAAQ,SAAS;EAC1B,MAAM,WAAW,GAAG,KAAK,SAAS,KAAK,KAAK,aAAa;EAEzD,IAAI,WAAW;AACf,MAAI,KAAK,WAAW,KAAK,QAAQ,SAAS,EACxC,YAAW,KAAK,QAAQ,QACrB,KAAK,WAAW,GAAG,OAAO,KAAK,IAAI,KACpC,SACD;AAGH,WAAS,KAAK,SAAS;;AAGzB,QAAO,SAAS,KAAK,KAAK"}
@@ -0,0 +1,22 @@
1
+ import { SSRCacheState } from "./collector.js";
2
+
3
+ //#region src/ssr/hydrate.d.ts
4
+ declare global {
5
+ interface Window {
6
+ __TASTY_SSR_CACHE__?: SSRCacheState;
7
+ }
8
+ }
9
+ /**
10
+ * Pre-populate the client-side style cache from the server's SSR state.
11
+ *
12
+ * Call this before ReactDOM.hydrateRoot() or ensure it runs before
13
+ * any tasty() component renders on the client.
14
+ *
15
+ * When called without arguments, reads state from:
16
+ * 1. `window.__TASTY_SSR_CACHE__` (streaming — populated by inline scripts)
17
+ * 2. `<script data-tasty-cache>` (non-streaming — JSON payload)
18
+ */
19
+ declare function hydrateTastyCache(state?: SSRCacheState): void;
20
+ //#endregion
21
+ export { hydrateTastyCache };
22
+ //# sourceMappingURL=hydrate.d.ts.map
@@ -0,0 +1,50 @@
1
+ import { getGlobalInjector } from "../config.js";
2
+
3
+ //#region src/ssr/hydrate.ts
4
+ /**
5
+ * Client-side cache hydration for SSR.
6
+ *
7
+ * Pre-populates the client injector's cacheKeyToClassName map from the
8
+ * server's serialized state. This ensures that useStyles() returns
9
+ * cache hits during hydration, skipping the entire rendering pipeline.
10
+ */
11
+ /**
12
+ * Pre-populate the client-side style cache from the server's SSR state.
13
+ *
14
+ * Call this before ReactDOM.hydrateRoot() or ensure it runs before
15
+ * any tasty() component renders on the client.
16
+ *
17
+ * When called without arguments, reads state from:
18
+ * 1. `window.__TASTY_SSR_CACHE__` (streaming — populated by inline scripts)
19
+ * 2. `<script data-tasty-cache>` (non-streaming — JSON payload)
20
+ */
21
+ function hydrateTastyCache(state) {
22
+ if (typeof document === "undefined") return;
23
+ if (!state) {
24
+ state = (typeof window !== "undefined" ? window.__TASTY_SSR_CACHE__ : null) ?? void 0;
25
+ if (!state) {
26
+ const script = document.querySelector("script[data-tasty-cache]");
27
+ if (script) try {
28
+ state = JSON.parse(script.textContent);
29
+ } catch {
30
+ return;
31
+ }
32
+ }
33
+ }
34
+ if (!state) return;
35
+ const registry = getGlobalInjector()._sheetManager.getRegistry(document);
36
+ registry.classCounter = Math.max(registry.classCounter, state.classCounter);
37
+ for (const [cacheKey, className] of Object.entries(state.entries)) {
38
+ registry.cacheKeyToClassName.set(cacheKey, className);
39
+ registry.rules.set(className, {
40
+ className,
41
+ ruleIndex: -2,
42
+ sheetIndex: -2
43
+ });
44
+ registry.refCounts.set(className, 0);
45
+ }
46
+ }
47
+
48
+ //#endregion
49
+ export { hydrateTastyCache };
50
+ //# sourceMappingURL=hydrate.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hydrate.js","names":[],"sources":["../../src/ssr/hydrate.ts"],"sourcesContent":["/**\n * Client-side cache hydration for SSR.\n *\n * Pre-populates the client injector's cacheKeyToClassName map from the\n * server's serialized state. This ensures that useStyles() returns\n * cache hits during hydration, skipping the entire rendering pipeline.\n */\n\nimport { getGlobalInjector } from '../config';\nimport type { SSRCacheState } from './collector';\n\ndeclare global {\n interface Window {\n __TASTY_SSR_CACHE__?: SSRCacheState;\n }\n}\n\n/**\n * Pre-populate the client-side style cache from the server's SSR state.\n *\n * Call this before ReactDOM.hydrateRoot() or ensure it runs before\n * any tasty() component renders on the client.\n *\n * When called without arguments, reads state from:\n * 1. `window.__TASTY_SSR_CACHE__` (streaming — populated by inline scripts)\n * 2. `<script data-tasty-cache>` (non-streaming — JSON payload)\n */\nexport function hydrateTastyCache(state?: SSRCacheState): void {\n if (typeof document === 'undefined') return;\n\n if (!state) {\n state =\n (typeof window !== 'undefined' ? window.__TASTY_SSR_CACHE__ : null) ??\n undefined;\n if (!state) {\n const script = document.querySelector('script[data-tasty-cache]');\n if (script) {\n try {\n state = JSON.parse(script.textContent!) as SSRCacheState;\n } catch {\n return;\n }\n }\n }\n }\n\n if (!state) return;\n\n const injector = getGlobalInjector();\n const registry = injector._sheetManager.getRegistry(document);\n\n registry.classCounter = Math.max(registry.classCounter, state.classCounter);\n\n for (const [cacheKey, className] of Object.entries(state.entries)) {\n registry.cacheKeyToClassName.set(cacheKey, className);\n registry.rules.set(className, {\n className,\n ruleIndex: -2,\n sheetIndex: -2,\n });\n registry.refCounts.set(className, 0);\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,kBAAkB,OAA6B;AAC7D,KAAI,OAAO,aAAa,YAAa;AAErC,KAAI,CAAC,OAAO;AACV,WACG,OAAO,WAAW,cAAc,OAAO,sBAAsB,SAC9D;AACF,MAAI,CAAC,OAAO;GACV,MAAM,SAAS,SAAS,cAAc,2BAA2B;AACjE,OAAI,OACF,KAAI;AACF,YAAQ,KAAK,MAAM,OAAO,YAAa;WACjC;AACN;;;;AAMR,KAAI,CAAC,MAAO;CAGZ,MAAM,WADW,mBAAmB,CACV,cAAc,YAAY,SAAS;AAE7D,UAAS,eAAe,KAAK,IAAI,SAAS,cAAc,MAAM,aAAa;AAE3E,MAAK,MAAM,CAAC,UAAU,cAAc,OAAO,QAAQ,MAAM,QAAQ,EAAE;AACjE,WAAS,oBAAoB,IAAI,UAAU,UAAU;AACrD,WAAS,MAAM,IAAI,WAAW;GAC5B;GACA,WAAW;GACX,YAAY;GACb,CAAC;AACF,WAAS,UAAU,IAAI,WAAW,EAAE"}
@@ -0,0 +1,5 @@
1
+ import { SSRCacheState, ServerStyleCollector } from "./collector.js";
2
+ import { hydrateTastyCache } from "./hydrate.js";
3
+ import { TastySSRContext } from "./context.js";
4
+ import { getSSRCollector, runWithCollector } from "./async-storage.js";
5
+ export { type SSRCacheState, ServerStyleCollector, TastySSRContext, getSSRCollector, hydrateTastyCache, runWithCollector };
@@ -0,0 +1,12 @@
1
+ import { TastySSRContext } from "./context.js";
2
+ import { registerSSRCollectorGetter } from "./ssr-collector-ref.js";
3
+ import { ServerStyleCollector } from "./collector.js";
4
+ import { getSSRCollector, runWithCollector } from "./async-storage.js";
5
+ import { hydrateTastyCache } from "./hydrate.js";
6
+
7
+ //#region src/ssr/index.ts
8
+ registerSSRCollectorGetter(getSSRCollector);
9
+
10
+ //#endregion
11
+ export { ServerStyleCollector, TastySSRContext, getSSRCollector, hydrateTastyCache, runWithCollector };
12
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/ssr/index.ts"],"sourcesContent":["/**\n * SSR entry point for @tenphi/tasty.\n *\n * Provides the core SSR infrastructure: ServerStyleCollector,\n * React context, AsyncLocalStorage integration, and cache hydration.\n *\n * Import from '@tenphi/tasty/ssr'.\n */\n\n// Core collector\nexport { ServerStyleCollector } from './collector';\nexport type { SSRCacheState } from './collector';\n\n// React context for Next.js streaming\nexport { TastySSRContext } from './context';\n\n// AsyncLocalStorage integration for Astro / generic frameworks\nexport { runWithCollector, getSSRCollector } from './async-storage';\n\n// Client-side cache hydration\nexport { hydrateTastyCache } from './hydrate';\n\n// Register the ALS getter so useStyles can find the collector\n// without importing 'node:async_hooks' in the browser bundle.\nimport { getSSRCollector } from './async-storage';\nimport { registerSSRCollectorGetter } from './ssr-collector-ref';\n\nregisterSSRCollectorGetter(getSSRCollector);\n"],"mappings":";;;;;;;AA2BA,2BAA2B,gBAAgB"}
@@ -0,0 +1,45 @@
1
+ import { ServerStyleCollector } from "./collector.js";
2
+ import * as react from "react";
3
+ import { ReactNode } from "react";
4
+
5
+ //#region src/ssr/next.d.ts
6
+ interface TastyRegistryProps {
7
+ children: ReactNode;
8
+ /**
9
+ * Whether to embed the cache state script for client hydration.
10
+ * Set to false to skip cache transfer (useful when cache size
11
+ * exceeds the hydration benefit). Default: true.
12
+ */
13
+ transferCache?: boolean;
14
+ }
15
+ /**
16
+ * Next.js App Router registry for Tasty SSR.
17
+ *
18
+ * Wraps the component tree with a ServerStyleCollector and flushes
19
+ * collected CSS into the HTML stream via useServerInsertedHTML.
20
+ *
21
+ * @example
22
+ * ```tsx
23
+ * // app/tasty-registry.tsx
24
+ * 'use client';
25
+ * import { TastyRegistry } from '@tenphi/tasty/ssr/next';
26
+ * export default function TastyStyleRegistry({ children }) {
27
+ * return <TastyRegistry>{children}</TastyRegistry>;
28
+ * }
29
+ *
30
+ * // app/layout.tsx
31
+ * import TastyStyleRegistry from './tasty-registry';
32
+ * export default function RootLayout({ children }) {
33
+ * return <html><body>
34
+ * <TastyStyleRegistry>{children}</TastyStyleRegistry>
35
+ * </body></html>;
36
+ * }
37
+ * ```
38
+ */
39
+ declare function TastyRegistry({
40
+ children,
41
+ transferCache
42
+ }: TastyRegistryProps): react.FunctionComponentElement<react.ProviderProps<ServerStyleCollector | null>>;
43
+ //#endregion
44
+ export { TastyRegistry, TastyRegistryProps };
45
+ //# sourceMappingURL=next.d.ts.map
@@ -0,0 +1,71 @@
1
+ 'use client';
2
+
3
+ import { getConfig } from "../config.js";
4
+ import { TastySSRContext } from "./context.js";
5
+ import { ServerStyleCollector } from "./collector.js";
6
+ import { hydrateTastyCache } from "./hydrate.js";
7
+ import { Fragment, createElement, useState } from "react";
8
+ import { useServerInsertedHTML } from "next/navigation";
9
+
10
+ //#region src/ssr/next.ts
11
+ /**
12
+ * Next.js integration for Tasty SSR.
13
+ *
14
+ * Provides TastyRegistry for App Router (streaming via useServerInsertedHTML)
15
+ * and createTastySSRDocument for Pages Router (non-streaming).
16
+ *
17
+ * Import from '@tenphi/tasty/ssr/next'.
18
+ */
19
+ if (typeof window !== "undefined" && window.__TASTY_SSR_CACHE__) hydrateTastyCache(window.__TASTY_SSR_CACHE__);
20
+ /**
21
+ * Next.js App Router registry for Tasty SSR.
22
+ *
23
+ * Wraps the component tree with a ServerStyleCollector and flushes
24
+ * collected CSS into the HTML stream via useServerInsertedHTML.
25
+ *
26
+ * @example
27
+ * ```tsx
28
+ * // app/tasty-registry.tsx
29
+ * 'use client';
30
+ * import { TastyRegistry } from '@tenphi/tasty/ssr/next';
31
+ * export default function TastyStyleRegistry({ children }) {
32
+ * return <TastyRegistry>{children}</TastyRegistry>;
33
+ * }
34
+ *
35
+ * // app/layout.tsx
36
+ * import TastyStyleRegistry from './tasty-registry';
37
+ * export default function RootLayout({ children }) {
38
+ * return <html><body>
39
+ * <TastyStyleRegistry>{children}</TastyStyleRegistry>
40
+ * </body></html>;
41
+ * }
42
+ * ```
43
+ */
44
+ function TastyRegistry({ children, transferCache = true }) {
45
+ const isClient = typeof window !== "undefined";
46
+ const [collector] = useState(() => isClient ? null : new ServerStyleCollector());
47
+ const nonce = getConfig().nonce;
48
+ useServerInsertedHTML(() => {
49
+ if (!collector) return null;
50
+ const css = collector.flushCSS();
51
+ const cacheState = collector.getCacheState();
52
+ if (!css) return null;
53
+ const styleEl = createElement("style", {
54
+ key: "tasty-ssr-styles",
55
+ "data-tasty-ssr": "",
56
+ nonce,
57
+ dangerouslySetInnerHTML: { __html: css }
58
+ });
59
+ if (!transferCache) return styleEl;
60
+ return createElement(Fragment, null, styleEl, createElement("script", {
61
+ key: "tasty-ssr-cache",
62
+ nonce,
63
+ dangerouslySetInnerHTML: { __html: `(window.__TASTY_SSR_CACHE__=window.__TASTY_SSR_CACHE__||{entries:{},classCounter:0});Object.assign(window.__TASTY_SSR_CACHE__.entries,${JSON.stringify(cacheState.entries)});window.__TASTY_SSR_CACHE__.classCounter=${cacheState.classCounter};` }
64
+ }));
65
+ });
66
+ return createElement(TastySSRContext.Provider, { value: collector }, children);
67
+ }
68
+
69
+ //#endregion
70
+ export { TastyRegistry };
71
+ //# sourceMappingURL=next.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"next.js","names":[],"sources":["../../src/ssr/next.ts"],"sourcesContent":["/**\n * Next.js integration for Tasty SSR.\n *\n * Provides TastyRegistry for App Router (streaming via useServerInsertedHTML)\n * and createTastySSRDocument for Pages Router (non-streaming).\n *\n * Import from '@tenphi/tasty/ssr/next'.\n */\n\n'use client';\n\n/// <reference path=\"./next-navigation.d.ts\" />\n\nimport { createElement, Fragment, useState, type ReactNode } from 'react';\nimport { useServerInsertedHTML } from 'next/navigation';\n\nimport { getConfig } from '../config';\nimport { ServerStyleCollector } from './collector';\nimport { TastySSRContext } from './context';\nimport { hydrateTastyCache } from './hydrate';\n\n// Auto-hydrate on module load (client only).\n// When this module is imported by the TastyRegistry client component,\n// the streaming cache scripts have already populated __TASTY_SSR_CACHE__.\nif (typeof window !== 'undefined' && window.__TASTY_SSR_CACHE__) {\n hydrateTastyCache(window.__TASTY_SSR_CACHE__);\n}\n\nexport interface TastyRegistryProps {\n children: ReactNode;\n /**\n * Whether to embed the cache state script for client hydration.\n * Set to false to skip cache transfer (useful when cache size\n * exceeds the hydration benefit). Default: true.\n */\n transferCache?: boolean;\n}\n\n/**\n * Next.js App Router registry for Tasty SSR.\n *\n * Wraps the component tree with a ServerStyleCollector and flushes\n * collected CSS into the HTML stream via useServerInsertedHTML.\n *\n * @example\n * ```tsx\n * // app/tasty-registry.tsx\n * 'use client';\n * import { TastyRegistry } from '@tenphi/tasty/ssr/next';\n * export default function TastyStyleRegistry({ children }) {\n * return <TastyRegistry>{children}</TastyRegistry>;\n * }\n *\n * // app/layout.tsx\n * import TastyStyleRegistry from './tasty-registry';\n * export default function RootLayout({ children }) {\n * return <html><body>\n * <TastyStyleRegistry>{children}</TastyStyleRegistry>\n * </body></html>;\n * }\n * ```\n */\nexport function TastyRegistry({\n children,\n transferCache = true,\n}: TastyRegistryProps) {\n const isClient = typeof window !== 'undefined';\n\n const [collector] = useState(() =>\n isClient ? null : new ServerStyleCollector(),\n );\n const nonce = getConfig().nonce;\n\n useServerInsertedHTML(() => {\n if (!collector) return null;\n\n const css = collector.flushCSS();\n const cacheState = collector.getCacheState();\n\n if (!css) return null;\n\n const styleEl = createElement('style', {\n key: 'tasty-ssr-styles',\n 'data-tasty-ssr': '',\n nonce,\n dangerouslySetInnerHTML: { __html: css },\n });\n\n if (!transferCache) return styleEl;\n\n const scriptEl = createElement('script', {\n key: 'tasty-ssr-cache',\n nonce,\n dangerouslySetInnerHTML: {\n __html:\n `(window.__TASTY_SSR_CACHE__=window.__TASTY_SSR_CACHE__||{entries:{},classCounter:0});` +\n `Object.assign(window.__TASTY_SSR_CACHE__.entries,${JSON.stringify(cacheState.entries)});` +\n `window.__TASTY_SSR_CACHE__.classCounter=${cacheState.classCounter};`,\n },\n });\n\n return createElement(Fragment, null, styleEl, scriptEl);\n });\n\n return createElement(\n TastySSRContext.Provider,\n { value: collector },\n children,\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,IAAI,OAAO,WAAW,eAAe,OAAO,oBAC1C,mBAAkB,OAAO,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;AAqC/C,SAAgB,cAAc,EAC5B,UACA,gBAAgB,QACK;CACrB,MAAM,WAAW,OAAO,WAAW;CAEnC,MAAM,CAAC,aAAa,eAClB,WAAW,OAAO,IAAI,sBAAsB,CAC7C;CACD,MAAM,QAAQ,WAAW,CAAC;AAE1B,6BAA4B;AAC1B,MAAI,CAAC,UAAW,QAAO;EAEvB,MAAM,MAAM,UAAU,UAAU;EAChC,MAAM,aAAa,UAAU,eAAe;AAE5C,MAAI,CAAC,IAAK,QAAO;EAEjB,MAAM,UAAU,cAAc,SAAS;GACrC,KAAK;GACL,kBAAkB;GAClB;GACA,yBAAyB,EAAE,QAAQ,KAAK;GACzC,CAAC;AAEF,MAAI,CAAC,cAAe,QAAO;AAa3B,SAAO,cAAc,UAAU,MAAM,SAXpB,cAAc,UAAU;GACvC,KAAK;GACL;GACA,yBAAyB,EACvB,QACE,yIACoD,KAAK,UAAU,WAAW,QAAQ,CAAC,4CAC5C,WAAW,aAAa,IACtE;GACF,CAAC,CAEqD;GACvD;AAEF,QAAO,cACL,gBAAgB,UAChB,EAAE,OAAO,WAAW,EACpB,SACD"}
@@ -0,0 +1,12 @@
1
+ //#region src/ssr/ssr-collector-ref.ts
2
+ let _getSSRCollector = null;
3
+ function registerSSRCollectorGetter(fn) {
4
+ _getSSRCollector = fn;
5
+ }
6
+ function getRegisteredSSRCollector() {
7
+ return _getSSRCollector ? _getSSRCollector() : null;
8
+ }
9
+
10
+ //#endregion
11
+ export { getRegisteredSSRCollector, registerSSRCollectorGetter };
12
+ //# sourceMappingURL=ssr-collector-ref.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ssr-collector-ref.js","names":[],"sources":["../../src/ssr/ssr-collector-ref.ts"],"sourcesContent":["/**\n * Global reference to the SSR collector getter function.\n *\n * This indirection avoids importing 'node:async_hooks' in the browser bundle.\n * The SSR entry point sets this ref when loaded on the server. The useStyles\n * hook calls it if set; on the client it stays null and is never called.\n */\n\nimport type { ServerStyleCollector } from './collector';\n\ntype SSRCollectorGetter = () => ServerStyleCollector | null;\n\nlet _getSSRCollector: SSRCollectorGetter | null = null;\n\nexport function registerSSRCollectorGetter(fn: SSRCollectorGetter): void {\n _getSSRCollector = fn;\n}\n\nexport function getRegisteredSSRCollector(): ServerStyleCollector | null {\n return _getSSRCollector ? _getSSRCollector() : null;\n}\n"],"mappings":";AAYA,IAAI,mBAA8C;AAElD,SAAgB,2BAA2B,IAA8B;AACvE,oBAAmB;;AAGrB,SAAgB,4BAAyD;AACvE,QAAO,mBAAmB,kBAAkB,GAAG"}