From bb76fc499404ffb2dca79a380364eb1bdac007ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Schr=C3=B6ter?= Date: Thu, 28 Nov 2024 19:00:26 +0100 Subject: [PATCH] feat(svelte): add environment provider --- bun.lockb | Bin 908292 -> 908324 bytes packages/svelte/CHANGELOG.md | 1 + packages/svelte/package.json | 7 ++++ .../components/avatar/use-avatar.svelte.ts | 3 ++ .../environment/environment-provider.svelte | 39 ++++++++++++++++++ .../environment/environment.stories.ts | 14 +++++++ .../environment/examples/basic.svelte | 10 +++++ .../environment/examples/setup.svelte | 7 ++++ .../environment/examples/usage.svelte | 7 ++++ .../src/lib/providers/environment/index.ts | 9 ++++ .../environment/use-environment-context.ts | 32 ++++++++++++++ .../providers/locale/locale-provider.svelte | 4 +- packages/svelte/src/lib/utils/run-if-fn.ts | 11 +++++ 13 files changed, 142 insertions(+), 2 deletions(-) create mode 100644 packages/svelte/src/lib/providers/environment/environment-provider.svelte create mode 100644 packages/svelte/src/lib/providers/environment/environment.stories.ts create mode 100644 packages/svelte/src/lib/providers/environment/examples/basic.svelte create mode 100644 packages/svelte/src/lib/providers/environment/examples/setup.svelte create mode 100644 packages/svelte/src/lib/providers/environment/examples/usage.svelte create mode 100644 packages/svelte/src/lib/providers/environment/index.ts create mode 100644 packages/svelte/src/lib/providers/environment/use-environment-context.ts create mode 100644 packages/svelte/src/lib/utils/run-if-fn.ts diff --git a/bun.lockb b/bun.lockb index 9c85792b06b68a97c7f000633c581f3fc4e38b60..78282850f4b762bbce68fbf9146127539d9173ff 100755 GIT binary patch delta 5230 zcmeI0e{5FO8OQJY_H8+D+ZQQqE#0u?SH&*rN?{g8SD`3novxK>9f=mBbLuu-Wh_Hm z?MszXf&bB3feM}m&G-Q7+ zy~*eO-sk(Ad+vGfJ@=k-?uNq)yALnysEzDst!t}`9IT5za3(oD2!iG;eoRx)7UBf@ zu=!&(g8yUuD7w}1V^#TW=1V6LcUmk}-kUy}6(oZg#$y-`?M4;vN7aCXR`8JJU$nRf z)h10t`%oP>V7^qx|IuRUMZ~93HT)g(-^of6nW2CFt|i7(Rq&ow_z|jq7@ZmfndoG6 z3R-|_8>?#IEc2y`FHN$eOET9I(sbf7R1NwPs)CCwu0U1(E2uW9$}KT}DS9dK?Ut7+ z{~e1ztI5wAigkkT+JSf5fzmksk1W5=e5p>*WU*9N=zfc(id#_Ct3Rww%B@QVZDvSS zupL#wP3DiMD! zR44cws*28|YQW!7b;6HOZDUpWPt2F<_n)y=s`4&r4 zi3=GQk6o?B*P4C< z)h5-IyAIVATZO8g8&Tb|Te4@5CT_=2g?FNQ{CN97*ZyNlnWUN^wf+~ZemE$1^Pc3QrZX0Qy>PZkOq^& z!E!fTRjEN&+fGJ64Nsc8b=zF)XXa@vf6}~NczV%h!2a;uz3%E*?x#c96lMde<4WlB zD<5##l}}prQ!TZe)TiTmwt3Zf*IT(9JXOB}7Wpn!kwQu>m_{lOt%0}|FSRPZhL>*M zJo7YN&GhF~g(jtH@O)BQA$=WA+aFqN#cT04+QOv*Ppznfk9}2(%Z_Xd>swrptL*12 z%di_+u#AlI>_25^zQ??m@qT6A8uO0gJ>plk)0zfLt+iAisnzEF5KrS>KirI0jjl8A zRrb&OE~>~~LTUwJGby!V0CN05yIU7=zG@Tg?GNiWxdn;hLsoGWH&!K^__-BNCs>BZ z?F^dnmihxfb#;;XKGI433+&?5+fl8Qm>d>&y23>65sto(xQUyB1Yh7vRr`j0uA*4$ zCQb1=E%ilGHRgHqO7T|t-hH|dc9xx_G$AY_b(?vQTk-jL<>u`+ZvkFGnAPpPE7po? z9`R+|U$tg0`)kZAHg6x^qVNw-xk;(H>hBN1255tg(C*J2aCs$L+3f(Wb+*F}*af>` zALy~rW3V57=gXdRb5rl5!!(5r&$;H5q@IEs=s22Ac7wY9&q34A$040dodKDksi_`= zpTG&Kdkgdk)PttqTHX8`BJ9T?71Cf5sPC(x0L^(S1#lhR`=%Ygt)iVC_DjOpzjdd!+}HY&DipzoLAH2{qRfB z6QCad3_J@5;CawY`zBDAR~OgNT!2<{NAmsYBd)OMeXL?|kjAQCUlslW`pWP&=&MA3 zSp0%}HFil4hiW!{5Y(~vz=s_7PssI&UYD1vCI5U-51tGc!PM}}z3z@^QWN$rsOJvc z0N214@>Q?`u7O&pgOzX{d=pl|O`!g|8g7Pff%@vVL7x{c2ldke$fwDlhv`rNg)k#4 z2n%0v^^u}BN^FGn&wA4OxD)h|VwT_8=Xz50`QR?!(C->&_R;Q<;TqK&QLnUz zsJ91pLq~YF-yMk*=>7B$o`a`REtGBqy+|ryNw(kod$&5SCGu7L_iSG>;ASVZ6xYY7 zEf5PE2Hb10%U`C57BX{qF0~Zbnyne`hg(3eklR4ZcC8~XhCJW!x|u;U1{=ZEv{3OZ2W-4thUa3-xd-EQA?h?;9>9b*4U(=u?Ou@=#_<0@APSNPoH?o8yWFml4BR7YlpkvZ`t@%X(ZyvB4*d`(Gwu3oS0jV1B0 zu_QgO-!Gn$KE=(VKWg)Pax$ied(Nl7SCR2ysfLUoI9#6LUmHq%&L1evC<>32X1tUZ z|8x0h?o@kMc?M*LUFC^+d*d?(wQvlAulk{5iQ0IFh3mtz!9-~!{n??>^vNMVd@NDq cw+$uA;+GANnydW4P-0!Y!@?cDW;k)=KYuh^dH?_b delta 5212 zcmeI0e{5Cd8OP7u-0=49ew>l80iv@tVT7A6#RCW;xUY!R1eVAFlR?PJpTM??H` z=}A8Kd!Fy}p7*@>ocEmfeb3%Q)g6bbyXzvW+Uq;(BM0lVS_jjY1wpW`kRQ`1+De>2 zH<>?DBlthU&q5!x{76;)A@ikq#9J(uD!sHQ(^DAoz?umkV11En$iA6oui^QAh$T8pK+LM;|c6}O_Qx6OPhw=NxYm?2fc z4X6rsnLnDU`~y}_s^d0UELFoEL>HnbP+iHF&Hp}ZqfAD*!SZw(a)g0q&F z>IDBpRna+A4fr>zPIw;GHd2-UkNHv^|6gL`@ zq`Go9qPk*BP}OrYs#~@!`MKf5?HHiL7^r8;k~=~I?}+Vn80ZAkqJs-L9dN6a3n5x0-mbB0jm9ORgpzXEtp8E82vIhD_&_;d<8FN-Zb+x zQH}ezRfVRbYVdSYS{p5bH|!71vf_1kowj6|ji*-B!v$Z{=8}N?d=O2H@X>#@`F}!4L4RL*YR^Jo=$Kr9=9`S z!JF?N-{R^cRX(zn`ls8)X|$u-DUk@vx4P0q(H}W_E%7>T3KD#lE49Ek^|;yPS}~>Z zwp!}*q`qXHH?IPO-l6`{1{%L zx>rGuz)hfux7Ic9L%@C%vLOd@L499+Jq`u%I_2ohb-`(N^tqu8(r_QN!+Pid_3jPO z1rLB0+!sI-C#~xL1~0(?yzF;B>5_#<*xdz>g1$g>hy72wm$DaV_Noc;KKK>r2~dy! zEj$Llg9E@MJGceZ<<-SCE|;LS+>wd?bgwHd`xn+#kO#S}_w_yDAE56Gr$OH%`oi)* zx#zM=G`H3~{0UIU{yDtMaqqzdpUAl4A}#i-Ks`7CpMb*f>Wo{SmDW`KQE222EQYVb zX7blSEi8mZPzPUw8(}dlfm=ZRwF#EOw?KXM+n^5%UjX&f5|~7jFN06P@n9Hxm@q3cj-94LA6A>8T2BV1M`x8)1Team=?#^^WVq&ihegGp+&ep zLv4m=*wpV{$ex*@h*mCF@LXyUzLx!U&;rXquaMh73-!TBkb=@MbKFI9ChG%^njb16;ru6FxMBo;sztvgppTWv^I2C#OB0e%@w@F*f#q`6|t#ZYbs*lnu`2O zj`>ZW$sgwndh_$cBk$zDH9LNyQe#9A{4^E!g9C|6{a-8NWpvc=y~_AAxv}R{!|6;{ zCKZQ*Fq2A5+Y<{;YMDqU_UBI|>SE0nE(;q@CMqNO-2=nvX9oO*6Nxha*g&Ex=1vWp UU-V}N602j)7OwJloJ#cm4}L9Ci~s-t diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 5e01aa412e..72d4f459f6 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -9,6 +9,7 @@ description: All notable changes will be documented in this file. ## Added - Added `factory` component for `asChild` prop. +- Added `Environment` component. ## [0.1.0] - 2024-11-27 diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 8c20799547..4fd1064c76 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -26,6 +26,10 @@ "types": "./src/lib/components/anatomy.ts", "svelte": "./src/lib/components/anatomy.ts" }, + "./environment": { + "types": "./src/lib/providers/environment/index.ts", + "svelte": "./src/lib/providers/environment/index.ts" + }, "./locale": { "types": "./src/lib/providers/locale/index.ts", "svelte": "./src/lib/providers/locale/index.ts" @@ -54,6 +58,8 @@ "exports.\\./anatomy.types": "./dist/components/anatomy.d.ts", "exports.\\./locale.svelte": "./dist/providers/locale/index.js", "exports.\\./locale.types": "./dist/providers/locale/index.d.ts", + "exports.\\./environment.svelte": "./dist/providers/environment/index.js", + "exports.\\./environment.types": "./dist/providers/environment/index.d.ts", "exports.\\./*.svelte": "./dist/components/*/index.js", "exports.\\./*.types": "./dist/components/*/index.d.ts" } @@ -66,6 +72,7 @@ "@zag-js/anatomy": "0.78.0", "@zag-js/avatar": "0.78.0", "@zag-js/core": "0.78.0", + "@zag-js/dom-query": "0.78.0", "@zag-js/i18n-utils": "0.78.0", "@zag-js/svelte": "0.78.0", "nanoid": "5.0.9" diff --git a/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts b/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts index e9803586c9..6cb8b7af57 100644 --- a/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts +++ b/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts @@ -1,3 +1,4 @@ +import { useEnvironmentContext } from '$lib/providers/environment' import { useLocaleContext } from '$lib/providers/locale' import type { Accessor, Optional } from '$lib/types' import { createId } from '$lib/utils/create-id' @@ -10,9 +11,11 @@ export interface UseAvatarReturn extends Accessor> {} export const useAvatar = (props: UseAvatarProps = {}) => { const { dir } = useLocaleContext() + const { getRootNode } = useEnvironmentContext() const context = $derived({ id: createId(), dir, + getRootNode, ...props, }) diff --git a/packages/svelte/src/lib/providers/environment/environment-provider.svelte b/packages/svelte/src/lib/providers/environment/environment-provider.svelte new file mode 100644 index 0000000000..313f7f68a9 --- /dev/null +++ b/packages/svelte/src/lib/providers/environment/environment-provider.svelte @@ -0,0 +1,39 @@ + + + + +{@render children?.()} +{#if !value} + +{/if} diff --git a/packages/svelte/src/lib/providers/environment/environment.stories.ts b/packages/svelte/src/lib/providers/environment/environment.stories.ts new file mode 100644 index 0000000000..6aab4b0e1b --- /dev/null +++ b/packages/svelte/src/lib/providers/environment/environment.stories.ts @@ -0,0 +1,14 @@ +import type { Meta } from '@storybook/svelte' +import BasicExample from './examples/basic.svelte' + +const meta = { + title: 'Providers / Environment', +} as Meta + +export default meta + +export const Basic = { + render: () => ({ + Component: BasicExample, + }), +} diff --git a/packages/svelte/src/lib/providers/environment/examples/basic.svelte b/packages/svelte/src/lib/providers/environment/examples/basic.svelte new file mode 100644 index 0000000000..d0f1cd625e --- /dev/null +++ b/packages/svelte/src/lib/providers/environment/examples/basic.svelte @@ -0,0 +1,10 @@ + + + + + + + diff --git a/packages/svelte/src/lib/providers/environment/examples/setup.svelte b/packages/svelte/src/lib/providers/environment/examples/setup.svelte new file mode 100644 index 0000000000..091807c79e --- /dev/null +++ b/packages/svelte/src/lib/providers/environment/examples/setup.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/packages/svelte/src/lib/providers/environment/examples/usage.svelte b/packages/svelte/src/lib/providers/environment/examples/usage.svelte new file mode 100644 index 0000000000..094e6d72c5 --- /dev/null +++ b/packages/svelte/src/lib/providers/environment/examples/usage.svelte @@ -0,0 +1,7 @@ + + +
{JSON.stringify(environment?.getRootNode(), null, 2)}
diff --git a/packages/svelte/src/lib/providers/environment/index.ts b/packages/svelte/src/lib/providers/environment/index.ts new file mode 100644 index 0000000000..d36f516dd8 --- /dev/null +++ b/packages/svelte/src/lib/providers/environment/index.ts @@ -0,0 +1,9 @@ +export { + default as EnvironmentProvider, + type EnvironmentProviderProps, +} from './environment-provider.svelte' +export { + useEnvironmentContext, + type EnvironmentContext, + type RootNode, +} from './use-environment-context' diff --git a/packages/svelte/src/lib/providers/environment/use-environment-context.ts b/packages/svelte/src/lib/providers/environment/use-environment-context.ts new file mode 100644 index 0000000000..aeed9c819c --- /dev/null +++ b/packages/svelte/src/lib/providers/environment/use-environment-context.ts @@ -0,0 +1,32 @@ +import { createContext } from '$lib/utils/create-context' + +export type RootNode = ShadowRoot | Document | Node + +export interface EnvironmentContext { + /** + * The root node of the application. + * This is used to determine the window and document objects. + * @default document + */ + getRootNode(): RootNode + /** + * The document context for the root node. + * @default document + */ + getDocument(): Document + /** + * The window context for the root node. + * @default window + */ + getWindow(): Window & typeof globalThis +} + +export const [EnvironmentContextProvider, useEnvironmentContext] = + createContext({ + key: 'EnvironmentContext', + defaultValue: { + getRootNode: () => document, + getDocument: () => document, + getWindow: () => window, + }, + }) diff --git a/packages/svelte/src/lib/providers/locale/locale-provider.svelte b/packages/svelte/src/lib/providers/locale/locale-provider.svelte index d4bdaa813f..8136d7e9d7 100644 --- a/packages/svelte/src/lib/providers/locale/locale-provider.svelte +++ b/packages/svelte/src/lib/providers/locale/locale-provider.svelte @@ -1,6 +1,6 @@