@webflow/emotion-utils - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

CHANGELOG.md

 # @webflow/emotion-utils
 
+## 1.2.1
+
+### Patch Changes
+
+- 4a7eaaa: Fix issue with missing styles after components are re-mounted in Designer
+- Updated dependencies [dbf223b]
+  - @webflow/data-types@1.2.1
+  - @webflow/react@1.2.1
+
 ## 1.2.0
@@ -4,0 +13,0 @@

dist/index.cjs

@@ -1,1 +0,1 @@
-'use strict';var t=require('react'),h=require('@emotion/cache'),react=require('@emotion/react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var t__default=/*#__PURE__*/_interopDefault(t);var h__default=/*#__PURE__*/_interopDefault(h);var s={key:"webflow"};var c=({children:r,options:e})=>{let o=t.useRef(null),[a,f]=t.useState(true),i=react.__unsafe_useEmotionCache(),n={...s,...e},[D,u]=t.useState(i?.key===n.key?i:h__default.default(n));return t.useLayoutEffect(()=>{if(o.current){let m=o.current.getRootNode(),E=m instanceof ShadowRoot?m:document.head,O=h__default.default({container:E,...n});u(O),f(false);}},[]),t__default.default.createElement(t__default.default.Fragment,null,t__default.default.createElement(react.CacheProvider,{value:D},r),a?t__default.default.createElement("div",{ref:o,style:{display:"none"}}):null)};var d=r=>e=>{let o=a=>t__default.default.createElement(c,{options:r?.cacheOptions},t__default.default.createElement(e,{...a}));return o.displayName=`emotionShadowDom(${e.displayName||e.name||"Component"})`,o},y=d();exports.EmotionCacheShadowDomProvider=c;exports.createEmotionShadowDomDecorator=d;exports.emotionShadowDomDecorator=y;
+'use strict';var t=require('react'),h=require('@emotion/cache'),react$1=require('@emotion/react'),react=require('@webflow/react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var t__default=/*#__PURE__*/_interopDefault(t);var h__default=/*#__PURE__*/_interopDefault(h);var s={key:"webflow"};var c=({children:r,options:e})=>{let o=t.useRef(null),[n,f]=t.useState(true),{mode:u}=react.useWebflowContext(),i=react$1.__unsafe_useEmotionCache(),a={...s,speedy:u==="publish",...e},[D,l]=t.useState(i?.key===a.key?i:h__default.default(a));return t.useLayoutEffect(()=>{if(o.current){let m=o.current.getRootNode(),E=m instanceof ShadowRoot?m:document.head,O=h__default.default({container:E,...a});l(O),f(false);}},[]),t__default.default.createElement(t__default.default.Fragment,null,t__default.default.createElement(react$1.CacheProvider,{value:D},r),n?t__default.default.createElement("div",{ref:o,style:{display:"none"}}):null)};var d=r=>e=>{let o=n=>t__default.default.createElement(c,{options:r?.cacheOptions},t__default.default.createElement(e,{...n}));return o.displayName=`emotionShadowDom(${e.displayName||e.name||"Component"})`,o},v=d();exports.EmotionCacheShadowDomProvider=c;exports.createEmotionShadowDomDecorator=d;exports.emotionShadowDomDecorator=v;

dist/index.js

@@ -1,1 +0,1 @@
-import t,{useRef,useState,useLayoutEffect}from'react';import h from'@emotion/cache';import {__unsafe_useEmotionCache,CacheProvider}from'@emotion/react';var s={key:"webflow"};var c=({children:r,options:e})=>{let o=useRef(null),[a,f]=useState(true),i=__unsafe_useEmotionCache(),n={...s,...e},[D,u]=useState(i?.key===n.key?i:h(n));return useLayoutEffect(()=>{if(o.current){let m=o.current.getRootNode(),E=m instanceof ShadowRoot?m:document.head,O=h({container:E,...n});u(O),f(false);}},[]),t.createElement(t.Fragment,null,t.createElement(CacheProvider,{value:D},r),a?t.createElement("div",{ref:o,style:{display:"none"}}):null)};var d=r=>e=>{let o=a=>t.createElement(c,{options:r?.cacheOptions},t.createElement(e,{...a}));return o.displayName=`emotionShadowDom(${e.displayName||e.name||"Component"})`,o},y=d();export{c as EmotionCacheShadowDomProvider,d as createEmotionShadowDomDecorator,y as emotionShadowDomDecorator};
+import t,{useRef,useState,useLayoutEffect}from'react';import h from'@emotion/cache';import {__unsafe_useEmotionCache,CacheProvider}from'@emotion/react';import {useWebflowContext}from'@webflow/react';var s={key:"webflow"};var c=({children:r,options:e})=>{let o=useRef(null),[n,f]=useState(true),{mode:u}=useWebflowContext(),i=__unsafe_useEmotionCache(),a={...s,speedy:u==="publish",...e},[D,l]=useState(i?.key===a.key?i:h(a));return useLayoutEffect(()=>{if(o.current){let m=o.current.getRootNode(),E=m instanceof ShadowRoot?m:document.head,O=h({container:E,...a});l(O),f(false);}},[]),t.createElement(t.Fragment,null,t.createElement(CacheProvider,{value:D},r),n?t.createElement("div",{ref:o,style:{display:"none"}}):null)};var d=r=>e=>{let o=n=>t.createElement(c,{options:r?.cacheOptions},t.createElement(e,{...n}));return o.displayName=`emotionShadowDom(${e.displayName||e.name||"Component"})`,o},v=d();export{c as EmotionCacheShadowDomProvider,d as createEmotionShadowDomDecorator,v as emotionShadowDomDecorator};

package.json

 {
   "name": "@webflow/emotion-utils",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
@@ -28,10 +28,11 @@ "license": "MIT",
   "scripts": {
-    "build": "rm -fr ./dist; tsup",
+    "build": "tsup",
     "lint": "eslint .",
     "test": "jest tests --ci",
+    "test:unit": "jest tests --ci",
     "test:local": "jest tests"
   },
   "dependencies": {
-    "@webflow/data-types": "1.2.0",
-    "@webflow/react": "1.2.0"
+    "@webflow/data-types": "1.2.1",
+    "@webflow/react": "1.2.1"
   },
@@ -38,0 +39,0 @@ "peerDependencies": {

README.md

@@ -115,2 +115,35 @@ # @webflow/emotion-utils
 
+## Server-Side Rendering
+
+This package provides a server-side renderer that automatically handles Emotion SSR configuration.
+
+### Using the Server Renderer
+
+Configure the server renderer in your `webflow.json` file:
+
+```json
+{
+  "library": {
+    "renderer": {
+      "server": "@webflow/emotion-utils/server"
+    }
+  }
+}
+```
+
+The `ServerRenderer` extends the base React server renderer and:
+
+- Automatically wraps your component with Emotion's `CacheProvider`
+- Collects and extracts critical CSS during server-side rendering
+- Returns both HTML and styles in the `renderToString` method
+
+**Return Type:**
+
+```typescript
+{
+  html: string; // The rendered HTML
+  styles: string; // The extracted style tags
+}
+```
+
 ## API Reference
@@ -185,2 +218,25 @@
 
+### `ServerRenderer`
+
+A server-side renderer factory for Emotion. Available via `@webflow/emotion-utils/server`.
+
+**Type:**
+
+```typescript
+ComponentServerRendererFactory<
+  React.ComponentType<ComponentRuntimeProps<React.ReactNode>>,
+  PipeableStream,
+  ReactDOMServer.RenderToPipeableStreamOptions,
+  React.ReactNode,
+  ReactDOMServer.ServerOptions
+>;
+```
+
+**Methods:**
+
+- `renderToStream(props?, options?, streamOptions?)` - Renders component to a pipeable stream
+- `renderToString(props?, options?, stringOptions?)` - Renders component to a string with extracted styles
+- `createElement(props?, options?)` - Creates a React element with the component
+- `createSlot(name)` - Creates a named slot element for component composition
+
 ## Why Shadow DOM Support?
@@ -187,0 +243,0 @@

No alert changes

Improved metrics

Total package byte prevSize

16056

13.1%

Number of lines in readme file

247

29.32%

Dependency changes

• + Added

  @webflow/data-types@1.2.1
  (transitive)

• + Added

  @webflow/react@1.2.1
  (transitive)

• - Removed

  @webflow/data-types@1.2.0
  (transitive)

• - Removed

  @webflow/react@1.2.0
  (transitive)

• Updated

  @webflow/data-types@1.2.1

• Updated

  @webflow/react@1.2.1