@webflow/emotion-utils - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/server.cjs

+'use strict';var d=require('react'),v=require('react-dom/server'),l=require('@emotion/cache'),react$1=require('@emotion/react'),O=require('@emotion/server/create-instance'),react=require('@webflow/react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var d__default=/*#__PURE__*/_interopDefault(d);var v__default=/*#__PURE__*/_interopDefault(v);var l__default=/*#__PURE__*/_interopDefault(l);var O__default=/*#__PURE__*/_interopDefault(O);var o={key:"webflow"};var h=n=>{let e=react.ServerRenderer(n);function m(c,p,a){let r=l__default.default(o),{extractCriticalToChunks:i,constructStyleTagsFromChunks:s}=O__default.default(r),R=d__default.default.createElement(react$1.CacheProvider,{value:r},e.createElement(c,p)),S=v__default.default.renderToString(R,a),t=i(S),C=s(t);return {html:t.html,styles:C}}return {...e,renderToString:m}};exports.ServerRenderer=h;

dist/server.d.ts

+import React from 'react';
+import ReactDOMServer, { PipeableStream } from 'react-dom/server';
+import { ComponentServerRendererFactory, ComponentRuntimeProps } from '@webflow/data-types';
+
+/**
+ * A factory that creates a server-side renderer for a given React component
+ * that automatically configures styled-components to work correctly within server-side rendering boundaries.
+ *
+ * @param Component
+ * @returns ComponentServerRendererFactory
+ */
+declare const ServerRenderer: ComponentServerRendererFactory<React.ComponentType<ComponentRuntimeProps<React.ReactNode>>, PipeableStream, ReactDOMServer.RenderToPipeableStreamOptions, React.ReactNode, ReactDOMServer.ServerOptions>;
+
+export { ServerRenderer };

dist/server.js

+import d from'react';import v from'react-dom/server';import l from'@emotion/cache';import {CacheProvider}from'@emotion/react';import O from'@emotion/server/create-instance';import {ServerRenderer}from'@webflow/react';var o={key:"webflow"};var h=n=>{let e=ServerRenderer(n);function m(c,p,a){let r=l(o),{extractCriticalToChunks:i,constructStyleTagsFromChunks:s}=O(r),R=d.createElement(CacheProvider,{value:r},e.createElement(c,p)),S=v.renderToString(R,a),t=i(S),C=s(t);return {html:t.html,styles:C}}return {...e,renderToString:m}};export{h as ServerRenderer};

CHANGELOG.md

 # @webflow/emotion-utils
 
+## 1.2.0
+
+### Minor Changes
+
+- Add support for custom renderers in code component libraries
+
+### Patch Changes
+
+- Updated dependencies
+  - @webflow/data-types@1.2.0
+  - @webflow/react@1.2.0
+
 ## 1.1.0
@@ -4,0 +16,0 @@

dist/index.cjs

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

dist/index.d.ts

@@ -5,3 +5,3 @@ import React from 'react';
 declare const EmotionCacheShadowDomProvider: React.FC<{
-    options?: Options;
+    options?: Partial<Options>;
     children: React.ReactNode;
@@ -12,3 +12,3 @@ }>;
     /** Emotion cache options */
-    cacheOptions?: Options;
+    cacheOptions?: Partial<Options>;
 };
@@ -25,3 +25,3 @@ /**
  * const decorator = createEmotionShadowDomDecorator({
- *   cacheOptions: { key: 'custom-key', speedy: true }
+ *   cacheOptions: { key: 'custom-key' }
  * });
@@ -51,3 +51,3 @@ * ```
  * const customDecorator = createEmotionShadowDomDecorator({
- *   cacheOptions: { key: "custom-key", speedy: true }
+ *   cacheOptions: { key: "custom-key" }
  * });
@@ -54,0 +54,0 @@ *

dist/index.js

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

package.json

 {
   "name": "@webflow/emotion-utils",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
@@ -15,2 +15,8 @@ "license": "MIT",
       "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs",
+      "default": "./dist/server.js"
     }
@@ -28,6 +34,10 @@ },
   },
-  "dependencies": {},
+  "dependencies": {
+    "@webflow/data-types": "1.2.0",
+    "@webflow/react": "1.2.0"
+  },
   "peerDependencies": {
     "@emotion/cache": ">=11",
     "@emotion/react": ">=11",
+    "@emotion/server": ">=11",
     "react": ">=18 <=19",
@@ -34,0 +44,0 @@ "react-dom": ">=18 <=19"

README.md

@@ -59,3 +59,2 @@ # @webflow/emotion-utils
     key: "custom-key",
-    speedy: true,
   },
@@ -105,3 +104,2 @@ });
   key: "my-custom-key",
-  speedy: true,
   // Other Emotion cache options...
@@ -126,7 +124,9 @@ };
 **Type:**
+
 ```typescript
-<P extends {}>(Component: React.ComponentType<P>) => React.ComponentType<P>
+<P extends {}>(Component: React.ComponentType<P>) => React.ComponentType<P>;
 ```
 
 **Example:**
+
 ```tsx
@@ -143,7 +143,11 @@ import { emotionShadowDomDecorator } from "@webflow/emotion-utils";
 **Type:**
+
 ```typescript
-(options?: EmotionDecoratorOptions) => <P extends {}>(Component: React.ComponentType<P>) => React.ComponentType<P>
+(options?: EmotionDecoratorOptions) =>
+  <P extends {}>(Component: React.ComponentType<P>) =>
+    React.ComponentType<P>;
 ```
 
 **Parameters:**
+
 - `options` (optional): Configuration options for the decorator
@@ -153,2 +157,3 @@ - `options.cacheOptions` (optional): Custom options to pass to Emotion's `createCache` function
 **Example:**
+
 ```tsx
@@ -160,3 +165,2 @@ import { createEmotionShadowDomDecorator } from "@webflow/emotion-utils";
     key: "my-app",
-    speedy: true,
   },
@@ -181,4 +185,3 @@ });
 {
-  key: "webflow",
-  speedy: false,
+  key: "webflow";
   // container is automatically determined based on DOM context
@@ -185,0 +188,0 @@ }

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14196

23.04%

Number of package files

10

42.86%

Lines of code

68

21.43%

Number of lines in readme file

191

1.6%

Worsened metrics

Dependency count

7

75%

Number of low quality alerts

4

33.33%

Dependency changes

• + Added

  @webflow/data-types@1.2.0

• + Added

  @webflow/react@1.2.0

• + Added

  @emotion/server@11.11.0
  (transitive)

• + Added

  @webflow/data-types@1.2.0
  (transitive)

• + Added

  @webflow/react@1.2.0
  (transitive)

• + Added

  buffer-from@0.1.2
  (transitive)

• + Added

  core-util-is@1.0.3
  (transitive)

• + Added

  duplexer2@0.1.4
  (transitive)

• + Added

  html-tokenize@2.0.1
  (transitive)

• + Added

  inherits@2.0.4
  (transitive)

• + Added

  isarray@0.0.11.0.0
  (transitive)

• + Added

  minimist@1.2.8
  (transitive)

• + Added

  multipipe@1.0.2
  (transitive)

• + Added

  object-assign@4.1.1
  (transitive)

• + Added

  object-keys@0.4.0
  (transitive)

• + Added

  process-nextick-args@2.0.1
  (transitive)

• + Added

  readable-stream@1.0.342.3.8
  (transitive)

• + Added

  safe-buffer@5.1.2
  (transitive)

• + Added

  string_decoder@0.10.311.1.1
  (transitive)

• + Added

  through@2.3.8
  (transitive)

• + Added

  through2@0.4.2
  (transitive)

• + Added

  util-deprecate@1.0.2
  (transitive)

• + Added

  xtend@2.1.2
  (transitive)