framer-motion-theatre - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

dist/main.d.ts

@@ -14,5 +14,5 @@ import * as _theatre_core from '@theatre/core';
 };
-declare const TheatreProvider: ({ project, studio, children, theme, }: {
+declare const TheatreProvider: ({ project, studio: userStudio, children, theme, }: {
     project: IProject;
-    studio?: IStudio | undefined;
+    studio?: false | IStudio | "auto" | undefined;
     children: ReactNode;
@@ -19,0 +19,0 @@ theme?: GizmoTheme | undefined;

dist/main.js

@@ -1,2 +0,2 @@
-import{createContext as x,useContext as b,useEffect as c,useMemo as G,useState as d}from"react";import{onChange as F,createRafDriver as H}from"@theatre/core";import{cancelFrame as K,frame as U,motionValue as T}from"framer-motion";import{createRoot as D}from"react-dom/client";import{jsx as y}from"react/jsx-runtime";var O=H({name:"framer-motion-theatre"}),P=x(null),ee=({project:r,studio:s,children:l,theme:e})=>{let a={normalColor:"rgb(173, 173, 173)",selectedColor:"rgb(79, 167, 255)",fillOpacity:.2,width:3};return c(()=>{let f=({timestamp:h})=>{O.tick(h)};return U.update(f,!0),()=>K(f)},[]),y(P.Provider,{value:{project:r,studio:s,gizmoTheme:e??a},children:l})};function te(){let{project:r,studio:s}=b(P);return{project:r,studio:s}}var E=x(null);function oe(r,s){return l=>{let{project:e}=b(P),[a]=d(()=>e.sheet(r,l.animationId));return y(E.Provider,{value:{sheet:a},children:y(s,{...l})})}}var z=()=>{};function I(r,s){return()=>{s.setSelection([r])}}function ne(r,s){let{sheet:l}=b(E),{studio:e,gizmoTheme:a}=b(P),[f,h]=d(!1),[S,g]=d(!1),[o,L]=d(null),[m,k]=d(),[C,j]=d(!1),[u,V]=d(()=>l.object(r,s,{reconfigure:!0})),[v,w]=d(()=>{let t={};for(let n in u.value)t[n]=T(u.value[n]);return t}),[p,M]=d(()=>e?I(u,e):z);c(()=>{e?(M(()=>I(u,e)),g(e.selection.includes(u)),e.onSelectionChange(t=>{g(t.includes(u))})):(M(z),g(!1))},[u,e]);let R=G(()=>({...v,$studio:{isSelected:S,select:p,setSelectionTarget:L}}),[v,p,S]);return c(()=>{w(t=>{let n={};for(let i in u.value)t[i]?n[i]=t[i]:n[i]=T(u.value[i]);return n})},[u]),c(()=>F(u.props,n=>{for(let i in n)v[i]&&v[i].set(n[i])},O),[u,v]),c(()=>{V(l.object(r,s,{reconfigure:!0}))},[s,r,l]),c(()=>{if(!o||!e)return;let t=document.createElement("div"),n=D(t);return k({root:n,domElement:t}),()=>{n.unmount(),t.remove(),k(null)}},[o,e]),c(()=>{!m||!o||m.root.render(y(W,{selectFn:p,isSelected:S,isHovered:f,theme:a}))},[m,a,f,S,p,o]),c(()=>{if(!e)return;let t=i=>{i.altKey===!0&&j(!0)},n=i=>{i.altKey===!1&&j(!1)};return document.addEventListener("keydown",t),document.addEventListener("keyup",n),()=>{document.removeEventListener("keydown",t),document.removeEventListener("keyup",n)}},[e]),c(()=>{if(!C||!m||!o)return;o.appendChild(m.domElement);let t=o.style.position;return/static/.test(getComputedStyle(o).position)&&(o.style.position="relative"),()=>{try{o.removeChild(m.domElement)}catch{}o.style.position=t}},[C,m,o]),c(()=>{if(!o||!e)return;let t=()=>h(!0),n=()=>h(!1);return o.addEventListener("mouseenter",t),o.addEventListener("mouseleave",n),()=>{h(!1),o.removeEventListener("mouseenter",t),o.removeEventListener("mouseleave",n)}},[o,e]),c(()=>{if(!o||!e)return;let t=n=>{C&&(n.stopPropagation(),p(),e?.ui.restore())};return o.addEventListener("click",t),()=>{o.removeEventListener("click",t)}},[C,p,o,e]),R}function re(){let{sheet:r}=b(E);return r.sequence}function W({selectFn:r,isSelected:s,isHovered:l,theme:e}){let a=s||l?e.selectedColor:e.normalColor;return y("div",{style:{position:"absolute",inset:0,pointerEvents:"none",borderWidth:e.width,borderStyle:s?"solid":"dashed",borderColor:a,backgroundColor:`rgb(from ${a} r g b / ${e.fillOpacity})`,boxSizing:"border-box",zIndex:1e3},onClick:r})}export{ee as TheatreProvider,re as useControls,ne as useSheetObject,te as useTheatre,oe as withTheatre};
+import{createContext as x,useContext as v,useEffect as c,useMemo as L,useState as d}from"react";import{onChange as K,createRafDriver as U}from"@theatre/core";import{cancelFrame as F,frame as D,motionValue as O}from"framer-motion";import T from"@theatre/studio";import{jsx as g}from"react/jsx-runtime";var V=U({name:"framer-motion-theatre"}),S=x(null),te=({project:s,studio:n,children:l,theme:e})=>{let a={normalColor:"rgb(173, 173, 173)",selectedColor:"rgb(79, 167, 255)",fillOpacity:.2,width:3};c(()=>{let p=({timestamp:f})=>{V.tick(f)};return D.update(p,!0),()=>F(p)},[]);let b=L(()=>{if(n!=="auto"&&n)return n;if(process.env.NODE_ENV==="development"&&n==="auto")return T.initialize(),T},[n]);return g(S.Provider,{value:{project:s,studio:b,gizmoTheme:e??a},children:l})};function oe(){let{project:s,studio:n}=v(S);return{project:s,studio:n}}var E=x(null);function ne(s,n){return l=>{let{project:e}=v(S),[a]=d(()=>e.sheet(s,l.animationId));return g(E.Provider,{value:{sheet:a},children:g(n,{...l})})}}var z=()=>{};function I(s,n){return()=>{n.setSelection([s])}}function re(s,n){let{sheet:l}=v(E),{studio:e,gizmoTheme:a}=v(S),[b,p]=d(!1),[f,C]=d(!1),[t,w]=d(null),[m,j]=d(),[y,k]=d(!1),[u,G]=d(()=>l.object(s,n,{reconfigure:!0})),[h,R]=d(()=>{let o={};for(let r in u.value)o[r]=O(u.value[r]);return o}),[P,M]=d(()=>e?I(u,e):z);c(()=>{e?(M(()=>I(u,e)),C(e.selection.includes(u)),e.onSelectionChange(o=>{C(o.includes(u))})):(M(z),C(!1))},[u,e]);let H=L(()=>({...h,$studio:{isSelected:f,select:P,setSelectionTarget:w}}),[h,P,f]);return c(()=>{R(o=>{let r={};for(let i in u.value)o[i]?r[i]=o[i]:r[i]=O(u.value[i]);return r})},[u]),c(()=>K(u.props,r=>{for(let i in r)h[i]&&h[i].set(r[i])},V),[u,h]),c(()=>{G(l.object(s,n,{reconfigure:!0}))},[n,s,l]),c(()=>{if(!t||!e)return;let o=document.createElement("div");return j(o),()=>{o.remove(),j(null)}},[t,e]),c(()=>{!m||!t||N(m,{isHovered:b,isSelected:f,theme:a})},[m,a,b,f,t]),c(()=>{if(!e)return;let o=i=>{i.altKey===!0&&k(!0)},r=i=>{i.altKey===!1&&k(!1)};return document.addEventListener("keydown",o),document.addEventListener("keyup",r),()=>{document.removeEventListener("keydown",o),document.removeEventListener("keyup",r)}},[e]),c(()=>{if(!y||!m||!t)return;t.appendChild(m);let o=t.style.position;return/static/.test(getComputedStyle(t).position)&&(t.style.position="relative"),()=>{try{t.removeChild(m)}catch{}t.style.position=o}},[y,m,t]),c(()=>{if(!t||!e)return;let o=()=>p(!0),r=()=>p(!1);return t.addEventListener("mouseenter",o),t.addEventListener("mouseleave",r),()=>{p(!1),t.removeEventListener("mouseenter",o),t.removeEventListener("mouseleave",r)}},[t,e]),c(()=>{if(!t||!e)return;let o=r=>{y&&(r.stopPropagation(),P(),e?.ui.restore())};return t.addEventListener("click",o),()=>{t.removeEventListener("click",o)}},[y,P,t,e]),H}function se(){let{sheet:s}=v(E);return s.sequence}function N(s,{isSelected:n,isHovered:l,theme:e}){let a=n||l?e.selectedColor:e.normalColor;Object.assign(s.style,{position:"absolute",inset:0,pointerEvents:"none",borderWidth:e.width,borderStyle:n?"solid":"dashed",borderColor:a,backgroundColor:`rgb(from ${a} r g b / ${e.fillOpacity})`,boxSizing:"border-box",zIndex:1e3})}export{te as TheatreProvider,se as useControls,re as useSheetObject,oe as useTheatre,ne as withTheatre};
 //# sourceMappingURL=main.js.map

package.json

@@ -18,3 +18,3 @@ {
   "homepage": "https://github.com/AndrewPrifer/framer-motion-theatre",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
@@ -21,0 +21,0 @@ "files": [

README.md

@@ -37,8 +37,2 @@ # Framer Motion 🤝 Theatre
 ```tsx
-let maybeStudio: IStudio | undefined = undefined;
-
-// Comment out these lines to remove studio from the bundle
-maybeStudio = studio;
-studio.initialize();
-
 const project = getProject("framer-motion-theatre", { state: theatreState });
@@ -48,4 +42,7 @@
   return (
-    // Wrap your components in TheatreProvider, passing the project and optionally, studio if you want automatic visual selection tools.
-    <TheatreProvider project={project} studio={maybeStudio}>
+    // Wrap your components in TheatreProvider, passing the project.
+    // Optionally, pass in studio, or 'auto' if you want it set up automatically in development
+    // Caveat: 'auto' relies on your bundler being smart enough to tree-shake,
+    // check the console when running the production bundle.
+    <TheatreProvider project={project} studio="auto">
       <div className="container">
@@ -119,6 +116,8 @@ {/* Pass your components a unique animation ID besides the regular props. */}
 
-Wrap your app in `TheatreProvider`, passing it your Theatre.js project and optionally, studio if you want automatic visual selection tools.
+Wrap your app in `TheatreProvider`, passing it your Theatre.js project.
+Optionally, pass in studio, or `'auto'` if you want it set up automatically in development.
+Caveat: `'auto'` relies on your bundler being smart enough to tree-shake, check the console when running the production bundle.
 
 ```tsx
-<TheatreProvider project={project} studio={studio}>
+<TheatreProvider project={project} studio="auto">
   <App />
@@ -159,1 +158,15 @@ </TheatreProvider>
 ```
+
+### **`useTheatre`**
+
+Returns the project and the studio instance associated with the component.
+
+```tsx
+const { project, studio } = useTheatre();
+
+useEffect(() => {
+  project.ready.then(() => {
+    // ...
+  });
+}, [project]);
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50084

increased by2.09%

Lines of code

68

increased by1.49%

Number of lines in readme file

169

increased by8.33%

Worsened metrics

Number of low supply chain risk alerts

3

increased by200%

No dependency changes