@cairntale/chimeling-react 1.0.0-alpha.6 → 1.0.0-alpha.7
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/CHANGELOG.md +6 -0
- package/dist/components/playground/playground.js +3 -0
- package/dist/components/playground/playground.js.map +1 -1
- package/dist/components/provider.js +14 -9
- package/dist/components/provider.js.map +1 -1
- package/dist/lib/use-client-committed.js +14 -0
- package/dist/lib/use-client-committed.js.map +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @cairntale/chimeling-react
|
|
2
2
|
|
|
3
|
+
## 1.0.0-alpha.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- eef6b43: Keep Emotion ClassNames and Global off the SSR hydration path so Next.js App Router hosts do not mismatch style tags against the client tree.
|
|
8
|
+
|
|
3
9
|
## 1.0.0-alpha.6
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { useClientCommitted } from "../../lib/use-client-committed.js";
|
|
2
3
|
import { ChimelingProvider } from "../provider.js";
|
|
3
4
|
import { Chimeling } from "../chimeling.js";
|
|
4
5
|
import useTweaks from "./store.js";
|
|
@@ -7,9 +8,11 @@ import { ClassNames } from "@emotion/react";
|
|
|
7
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
9
|
//#region src/components/playground/playground.tsx
|
|
9
10
|
function ChimelingPlayground({ className, baseUrl, userId }) {
|
|
11
|
+
const committed = useClientCommitted();
|
|
10
12
|
const tweaks = useTweaks();
|
|
11
13
|
const resolvedBaseUrl = baseUrl ?? tweaks.baseUrl;
|
|
12
14
|
const resolvedUserId = userId ?? tweaks.userId;
|
|
15
|
+
if (!committed) return /* @__PURE__ */ jsx("div", { className });
|
|
13
16
|
return /* @__PURE__ */ jsx(ClassNames, { children: ({ css, cx }) => /* @__PURE__ */ jsxs("div", {
|
|
14
17
|
className: cx(css({ display: "flex" }), className),
|
|
15
18
|
children: [/* @__PURE__ */ jsx("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"playground.js","names":[],"sources":["../../../src/components/playground/playground.tsx"],"sourcesContent":["'use client'\n\nimport { ClassNames } from '@emotion/react'\nimport { Chimeling } from '../chimeling'\nimport { ChimelingProvider } from '../provider'\nimport { PlaygroundPanel } from './panel'\nimport useTweaks from './store'\n\nexport type ChimelingPlaygroundProps = {\n className?: string\n baseUrl?: string\n userId?: string\n}\n\nexport function ChimelingPlayground({ className, baseUrl, userId }: ChimelingPlaygroundProps) {\n const tweaks = useTweaks()\n const resolvedBaseUrl = baseUrl ?? tweaks.baseUrl\n const resolvedUserId = userId ?? tweaks.userId\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n css({\n display: 'flex',\n }),\n className,\n )}\n >\n <div\n className={css({\n flexGrow: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n })}\n >\n <ChimelingProvider\n baseUrl={resolvedBaseUrl}\n accentColor={tweaks.theme.accentColor}\n colorScheme={tweaks.theme.colorScheme}\n spacingScaling={tweaks.theme.spacingScaling}\n fontSizeScaling={tweaks.theme.fontSizeScaling}\n borderRadiusScaling={tweaks.theme.borderRadiusScaling}\n >\n <Chimeling.Root\n userId={resolvedUserId}\n presence={tweaks.mode === 'mock' ? tweaks.presence : undefined}\n side={tweaks.behavior.side}\n align={tweaks.behavior.align}\n sideOffset={tweaks.behavior.sideOffset}\n openOnHover={tweaks.behavior.openOnHover}\n hoverOpenDelay={tweaks.behavior.hoverOpenDelay}\n hoverCloseDelay={tweaks.behavior.hoverCloseDelay}\n >\n <Chimeling.Trigger\n variant={tweaks.trigger.variant}\n shimmer={tweaks.trigger.shimmer}\n gradient={tweaks.trigger.gradient}\n />\n <Chimeling.Popover\n ring={tweaks.popover.ring}\n shadow={tweaks.popover.shadow}\n minWidth={tweaks.popover.minWidth}\n gerundCapitalize={tweaks.popover.gerundCapitalize}\n gerundEllipsis={tweaks.popover.gerundEllipsis}\n />\n </Chimeling.Root>\n </ChimelingProvider>\n </div>\n <PlaygroundPanel\n lockBaseUrl={typeof baseUrl === 'string'}\n lockUserId={typeof userId === 'string'}\n />\n </div>\n )}\n </ClassNames>\n )\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"playground.js","names":[],"sources":["../../../src/components/playground/playground.tsx"],"sourcesContent":["'use client'\n\nimport { ClassNames } from '@emotion/react'\nimport { useClientCommitted } from '../../lib/use-client-committed'\nimport { Chimeling } from '../chimeling'\nimport { ChimelingProvider } from '../provider'\nimport { PlaygroundPanel } from './panel'\nimport useTweaks from './store'\n\nexport type ChimelingPlaygroundProps = {\n className?: string\n baseUrl?: string\n userId?: string\n}\n\nexport function ChimelingPlayground({ className, baseUrl, userId }: ChimelingPlaygroundProps) {\n const committed = useClientCommitted()\n const tweaks = useTweaks()\n const resolvedBaseUrl = baseUrl ?? tweaks.baseUrl\n const resolvedUserId = userId ?? tweaks.userId\n\n if (!committed) {\n return <div className={className} />\n }\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n css({\n display: 'flex',\n }),\n className,\n )}\n >\n <div\n className={css({\n flexGrow: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n })}\n >\n <ChimelingProvider\n baseUrl={resolvedBaseUrl}\n accentColor={tweaks.theme.accentColor}\n colorScheme={tweaks.theme.colorScheme}\n spacingScaling={tweaks.theme.spacingScaling}\n fontSizeScaling={tweaks.theme.fontSizeScaling}\n borderRadiusScaling={tweaks.theme.borderRadiusScaling}\n >\n <Chimeling.Root\n userId={resolvedUserId}\n presence={tweaks.mode === 'mock' ? tweaks.presence : undefined}\n side={tweaks.behavior.side}\n align={tweaks.behavior.align}\n sideOffset={tweaks.behavior.sideOffset}\n openOnHover={tweaks.behavior.openOnHover}\n hoverOpenDelay={tweaks.behavior.hoverOpenDelay}\n hoverCloseDelay={tweaks.behavior.hoverCloseDelay}\n >\n <Chimeling.Trigger\n variant={tweaks.trigger.variant}\n shimmer={tweaks.trigger.shimmer}\n gradient={tweaks.trigger.gradient}\n />\n <Chimeling.Popover\n ring={tweaks.popover.ring}\n shadow={tweaks.popover.shadow}\n minWidth={tweaks.popover.minWidth}\n gerundCapitalize={tweaks.popover.gerundCapitalize}\n gerundEllipsis={tweaks.popover.gerundEllipsis}\n />\n </Chimeling.Root>\n </ChimelingProvider>\n </div>\n <PlaygroundPanel\n lockBaseUrl={typeof baseUrl === 'string'}\n lockUserId={typeof userId === 'string'}\n />\n </div>\n )}\n </ClassNames>\n )\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,oBAAoB,EAAE,WAAW,SAAS,UAAoC;CAC5F,MAAM,YAAY,mBAAmB;CACrC,MAAM,SAAS,UAAU;CACzB,MAAM,kBAAkB,WAAW,OAAO;CAC1C,MAAM,iBAAiB,UAAU,OAAO;CAExC,IAAI,CAAC,WACH,OAAO,oBAAC,OAAD,EAAgB,UAAY,CAAA;CAGrC,OACE,oBAAC,YAAD,EAAA,WACI,EAAE,KAAK,SACP,qBAAC,OAAD;EACE,WAAW,GACT,IAAI,EACF,SAAS,OACX,CAAC,GACD,SACF;EANF,UAAA,CAQE,oBAAC,OAAD;GACE,WAAW,IAAI;IACb,UAAU;IACV,SAAS;IACT,YAAY;IACZ,gBAAgB;GAClB,CAAC;GAED,UAAA,oBAAC,mBAAD;IACE,SAAS;IACT,aAAa,OAAO,MAAM;IAC1B,aAAa,OAAO,MAAM;IAC1B,gBAAgB,OAAO,MAAM;IAC7B,iBAAiB,OAAO,MAAM;IAC9B,qBAAqB,OAAO,MAAM;IAElC,UAAA,qBAAC,UAAU,MAAX;KACE,QAAQ;KACR,UAAU,OAAO,SAAS,SAAS,OAAO,WAAW,KAAA;KACrD,MAAM,OAAO,SAAS;KACtB,OAAO,OAAO,SAAS;KACvB,YAAY,OAAO,SAAS;KAC5B,aAAa,OAAO,SAAS;KAC7B,gBAAgB,OAAO,SAAS;KAChC,iBAAiB,OAAO,SAAS;KARnC,UAAA,CAUE,oBAAC,UAAU,SAAX;MACE,SAAS,OAAO,QAAQ;MACxB,SAAS,OAAO,QAAQ;MACxB,UAAU,OAAO,QAAQ;KAC1B,CAAA,GACD,oBAAC,UAAU,SAAX;MACE,MAAM,OAAO,QAAQ;MACrB,QAAQ,OAAO,QAAQ;MACvB,UAAU,OAAO,QAAQ;MACzB,kBAAkB,OAAO,QAAQ;MACjC,gBAAgB,OAAO,QAAQ;KAChC,CAAA,CACa;;GACC,CAAA;EAChB,CAAA,GACL,oBAAC,iBAAD;GACE,aAAa,OAAO,YAAY;GAChC,YAAY,OAAO,WAAW;EAC/B,CAAA,CACE;CAEG,CAAA,EAAA,CAAA;AAEhB"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { DEFAULT_PRESENCE_REFRESH_INTERVAL } from "../lib/config.js";
|
|
3
3
|
import { ChimelingContext } from "../lib/context.js";
|
|
4
|
+
import { useClientCommitted } from "../lib/use-client-committed.js";
|
|
4
5
|
import { generateContrastColor } from "../theme/color-system.js";
|
|
5
6
|
import { rootStyle } from "../theme/tokens.js";
|
|
6
7
|
import { ThemeProvider } from "../theme/context.js";
|
|
@@ -13,6 +14,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
13
14
|
//#region src/components/provider.tsx
|
|
14
15
|
const DEFAULT_BASE_URL = "https://chimeling.app";
|
|
15
16
|
function ChimelingProvider({ baseUrl, refreshInterval = DEFAULT_PRESENCE_REFRESH_INTERVAL, children, nonce, accentColor, colorScheme, spacingScaling, fontSizeScaling, borderRadiusScaling }) {
|
|
17
|
+
const committed = useClientCommitted();
|
|
16
18
|
const client = useMemo(() => createClient(createConfig({ baseUrl: baseUrl ?? "https://chimeling.app" })), [baseUrl]);
|
|
17
19
|
const value = useMemo(() => ({
|
|
18
20
|
client,
|
|
@@ -35,14 +37,23 @@ function ChimelingProvider({ baseUrl, refreshInterval = DEFAULT_PRESENCE_REFRESH
|
|
|
35
37
|
borderRadiusScaling
|
|
36
38
|
]);
|
|
37
39
|
const emotionCache = useMemo(() => {
|
|
38
|
-
|
|
40
|
+
if (!committed) return;
|
|
41
|
+
const insertionPoint = document.querySelector(`style#chl-style-insertion-point`) ?? void 0;
|
|
39
42
|
return createCache({
|
|
40
43
|
key: "chl-internal",
|
|
41
44
|
prepend: !insertionPoint,
|
|
42
45
|
insertionPoint,
|
|
43
46
|
nonce
|
|
44
47
|
});
|
|
45
|
-
}, [nonce]);
|
|
48
|
+
}, [committed, nonce]);
|
|
49
|
+
const tree = /* @__PURE__ */ jsx(ChimelingContext.Provider, {
|
|
50
|
+
value,
|
|
51
|
+
children: /* @__PURE__ */ jsx(ThemeProvider, {
|
|
52
|
+
value: theme,
|
|
53
|
+
children: committed ? children : null
|
|
54
|
+
})
|
|
55
|
+
});
|
|
56
|
+
if (!emotionCache) return tree;
|
|
46
57
|
return /* @__PURE__ */ jsxs(CacheProvider, {
|
|
47
58
|
value: emotionCache,
|
|
48
59
|
children: [/* @__PURE__ */ jsx(Global, { styles: {
|
|
@@ -51,13 +62,7 @@ function ChimelingProvider({ baseUrl, refreshInterval = DEFAULT_PRESENCE_REFRESH
|
|
|
51
62
|
fontFamily: "var(--chl-font-family)",
|
|
52
63
|
...theme.colorScheme === "light" || theme.colorScheme === "dark" ? { colorScheme: theme.colorScheme } : {}
|
|
53
64
|
}
|
|
54
|
-
} }),
|
|
55
|
-
value,
|
|
56
|
-
children: /* @__PURE__ */ jsx(ThemeProvider, {
|
|
57
|
-
value: theme,
|
|
58
|
-
children
|
|
59
|
-
})
|
|
60
|
-
})]
|
|
65
|
+
} }), tree]
|
|
61
66
|
});
|
|
62
67
|
}
|
|
63
68
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"provider.js","names":[],"sources":["../../src/components/provider.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type ReactNode } from 'react'\nimport { createClient, createConfig } from '@cairntale/chimeling-js/client'\nimport { DEFAULT_PRESENCE_REFRESH_INTERVAL } from '../lib/config'\nimport { ChimelingContext } from '../lib/context'\nimport createCache from '@emotion/cache'\nimport { CacheProvider, Global } from '@emotion/react'\nimport {\n ThemeProvider,\n generateContrastColor,\n rootStyle,\n type ChimelingColorScheme,\n} from '../theme'\n\nexport type ChimelingProviderProps = {\n baseUrl?: string\n refreshInterval?: number\n children?: ReactNode\n nonce?: string\n accentColor?: string\n colorScheme?: ChimelingColorScheme\n spacingScaling?: number\n fontSizeScaling?: number\n borderRadiusScaling?: number\n}\n\nexport const DEFAULT_BASE_URL = 'https://chimeling.app'\n\nexport function ChimelingProvider({\n baseUrl,\n refreshInterval = DEFAULT_PRESENCE_REFRESH_INTERVAL,\n children,\n nonce,\n accentColor,\n colorScheme,\n spacingScaling,\n fontSizeScaling,\n borderRadiusScaling,\n}: ChimelingProviderProps) {\n const client = useMemo(\n () => createClient(createConfig({ baseUrl: baseUrl ?? DEFAULT_BASE_URL })),\n [baseUrl],\n )\n const value = useMemo(() => ({ client, refreshInterval }), [client, refreshInterval])\n const theme = useMemo(() => {\n if (accentColor !== undefined) {\n generateContrastColor(accentColor)\n }\n return { accentColor, colorScheme, spacingScaling, fontSizeScaling, borderRadiusScaling }\n }, [accentColor, colorScheme, spacingScaling, fontSizeScaling, borderRadiusScaling])\n\n const emotionCache = useMemo(() => {\n
|
|
1
|
+
{"version":3,"file":"provider.js","names":[],"sources":["../../src/components/provider.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type ReactNode } from 'react'\nimport { createClient, createConfig } from '@cairntale/chimeling-js/client'\nimport { DEFAULT_PRESENCE_REFRESH_INTERVAL } from '../lib/config'\nimport { ChimelingContext } from '../lib/context'\nimport { useClientCommitted } from '../lib/use-client-committed'\nimport createCache from '@emotion/cache'\nimport { CacheProvider, Global } from '@emotion/react'\nimport {\n ThemeProvider,\n generateContrastColor,\n rootStyle,\n type ChimelingColorScheme,\n} from '../theme'\n\nexport type ChimelingProviderProps = {\n baseUrl?: string\n refreshInterval?: number\n children?: ReactNode\n nonce?: string\n accentColor?: string\n colorScheme?: ChimelingColorScheme\n spacingScaling?: number\n fontSizeScaling?: number\n borderRadiusScaling?: number\n}\n\nexport const DEFAULT_BASE_URL = 'https://chimeling.app'\n\nexport function ChimelingProvider({\n baseUrl,\n refreshInterval = DEFAULT_PRESENCE_REFRESH_INTERVAL,\n children,\n nonce,\n accentColor,\n colorScheme,\n spacingScaling,\n fontSizeScaling,\n borderRadiusScaling,\n}: ChimelingProviderProps) {\n const committed = useClientCommitted()\n const client = useMemo(\n () => createClient(createConfig({ baseUrl: baseUrl ?? DEFAULT_BASE_URL })),\n [baseUrl],\n )\n const value = useMemo(() => ({ client, refreshInterval }), [client, refreshInterval])\n const theme = useMemo(() => {\n if (accentColor !== undefined) {\n generateContrastColor(accentColor)\n }\n return { accentColor, colorScheme, spacingScaling, fontSizeScaling, borderRadiusScaling }\n }, [accentColor, colorScheme, spacingScaling, fontSizeScaling, borderRadiusScaling])\n\n const emotionCache = useMemo(() => {\n if (!committed) {\n return undefined\n }\n\n const insertionPoint =\n document.querySelector<HTMLElement>(`style#chl-style-insertion-point`) ?? undefined\n\n return createCache({\n key: 'chl-internal',\n prepend: !insertionPoint,\n insertionPoint,\n nonce,\n })\n }, [committed, nonce])\n\n const tree = (\n <ChimelingContext.Provider value={value}>\n <ThemeProvider value={theme}>{committed ? children : null}</ThemeProvider>\n </ChimelingContext.Provider>\n )\n\n if (!emotionCache) {\n return tree\n }\n\n return (\n <CacheProvider value={emotionCache}>\n <Global\n styles={{\n ':root': rootStyle(theme),\n '.chl-trigger, .chl-popover': {\n fontFamily: 'var(--chl-font-family)',\n ...(theme.colorScheme === 'light' || theme.colorScheme === 'dark'\n ? { colorScheme: theme.colorScheme }\n : {}),\n },\n }}\n />\n {tree}\n </CacheProvider>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AA4BA,MAAa,mBAAmB;AAEhC,SAAgB,kBAAkB,EAChC,SACA,kBAAkB,mCAClB,UACA,OACA,aACA,aACA,gBACA,iBACA,uBACyB;CACzB,MAAM,YAAY,mBAAmB;CACrC,MAAM,SAAS,cACP,aAAa,aAAa,EAAE,SAAS,WAAA,wBAA4B,CAAC,CAAC,GACzE,CAAC,OAAO,CACV;CACA,MAAM,QAAQ,eAAe;EAAE;EAAQ;CAAgB,IAAI,CAAC,QAAQ,eAAe,CAAC;CACpF,MAAM,QAAQ,cAAc;EAC1B,IAAI,gBAAgB,KAAA,GAClB,sBAAsB,WAAW;EAEnC,OAAO;GAAE;GAAa;GAAa;GAAgB;GAAiB;EAAoB;CAC1F,GAAG;EAAC;EAAa;EAAa;EAAgB;EAAiB;CAAmB,CAAC;CAEnF,MAAM,eAAe,cAAc;EACjC,IAAI,CAAC,WACH;EAGF,MAAM,iBACJ,SAAS,cAA2B,iCAAiC,KAAK,KAAA;EAE5E,OAAO,YAAY;GACjB,KAAK;GACL,SAAS,CAAC;GACV;GACA;EACF,CAAC;CACH,GAAG,CAAC,WAAW,KAAK,CAAC;CAErB,MAAM,OACJ,oBAAC,iBAAiB,UAAlB;EAAkC;EAChC,UAAA,oBAAC,eAAD;GAAe,OAAO;GAAQ,UAAA,YAAY,WAAW;EAAoB,CAAA;CAChD,CAAA;CAG7B,IAAI,CAAC,cACH,OAAO;CAGT,OACE,qBAAC,eAAD;EAAe,OAAO;EAAtB,UAAA,CACE,oBAAC,QAAD,EACE,QAAQ;GACN,SAAS,UAAU,KAAK;GACxB,8BAA8B;IAC5B,YAAY;IACZ,GAAI,MAAM,gBAAgB,WAAW,MAAM,gBAAgB,SACvD,EAAE,aAAa,MAAM,YAAY,IACjC,CAAC;GACP;EACF,EACD,CAAA,GACA,IACY;;AAEnB"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useSyncExternalStore } from "react";
|
|
3
|
+
//#region src/lib/use-client-committed.ts
|
|
4
|
+
const subscribe = () => () => {};
|
|
5
|
+
const getSnapshot = () => true;
|
|
6
|
+
const getServerSnapshot = () => false;
|
|
7
|
+
/** False on the server and during hydration; true after the client commits. */
|
|
8
|
+
function useClientCommitted() {
|
|
9
|
+
return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
10
|
+
}
|
|
11
|
+
//#endregion
|
|
12
|
+
export { useClientCommitted };
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=use-client-committed.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-client-committed.js","names":[],"sources":["../../src/lib/use-client-committed.ts"],"sourcesContent":["'use client'\n\nimport { useSyncExternalStore } from 'react'\n\nconst subscribe = () => () => {}\nconst getSnapshot = () => true\nconst getServerSnapshot = () => false\n\n/** False on the server and during hydration; true after the client commits. */\nexport function useClientCommitted() {\n return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n"],"mappings":";;;AAIA,MAAM,wBAAwB,CAAC;AAC/B,MAAM,oBAAoB;AAC1B,MAAM,0BAA0B;;AAGhC,SAAgB,qBAAqB;CACnC,OAAO,qBAAqB,WAAW,aAAa,iBAAiB;AACvE"}
|