@webflow/react - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

CHANGELOG.md

 # @webflow/react
 
+## 1.1.0
+
+### Minor Changes
+
+- Added support for Code Components Decorators
+
+### Patch Changes
+
+- Updated dependencies
+  - @webflow/data-types@1.1.0
+
 ## 1.0.4
@@ -4,0 +15,0 @@

dist/index.cjs

@@ -1,1 +0,1 @@
-'use strict';var dataTypes=require('@webflow/data-types'),a=require('react'),P=require('react-dom/client'),y=require('react-dom/server');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var a__namespace=/*#__PURE__*/_interopNamespace(a);var P__default=/*#__PURE__*/_interopDefault(P);var y__default=/*#__PURE__*/_interopDefault(y);var c={mode:"publish",interactive:true,locale:null},d=a__namespace.createContext(c),u=({webflowContext:e,children:t})=>{let o=a__namespace.useMemo(()=>({mode:e?.mode??c.mode,interactive:e?.interactive??c.interactive,locale:e?.locale??c.locale}),[e?.mode,e?.interactive,e?.locale]);return a__namespace.createElement(d.Provider,{value:o},t)};function x(){return a__namespace.useContext(d)}var i=class extends a__namespace.Component{constructor(t){super(t);}componentDidCatch(t,o){this.props.onError?.({error:t,message:o.digest||t.message,stack:o.componentStack??void 0});}render(){return this.props.children}};function m({Component:e,props:t,options:o}){return a__namespace.default.createElement(i,{children:a__namespace.default.createElement(u,{children:a__namespace.default.createElement(e,t),webflowContext:o?.webflowContext}),onError:o?.onError})}var v=e=>{function t(r){return P__default.default.createRoot(r)}function o(r,p,s){return P__default.default.hydrateRoot(r,m({Component:e,props:p,options:s}))}function R(r,p,s){r.render(m({Component:e,props:p,options:s}));}function n(r){return a__namespace.default.createElement("slot",{name:r})}return {mount:t,hydrate:o,render:R,createSlot:n}};var b=e=>{function t(n,r,p){return y__default.default.renderToPipeableStream(m({Component:e,props:n,options:r}),p)}function o(n,r,p){return y__default.default.renderToString(m({Component:e,props:n,options:r}),p)}function R(n){return a__namespace.default.createElement("slot",{name:n})}return {renderToStream:t,renderToString:o,createSlot:R}};var G=(e,t)=>({...t,component:e,framework:dataTypes.Framework.React});exports.ClientRenderer=v;exports.ServerRenderer=b;exports.declareComponent=G;exports.useWebflowContext=x;
+'use strict';var dataTypes=require('@webflow/data-types'),a=require('react'),P=require('react-dom/client'),x=require('react-dom/server');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var a__namespace=/*#__PURE__*/_interopNamespace(a);var P__default=/*#__PURE__*/_interopDefault(P);var x__default=/*#__PURE__*/_interopDefault(x);function l(e,o){return o.reduceRight((t,m)=>m(t),e)}var i={mode:"publish",interactive:true,locale:null},d=a__namespace.createContext(i),C=({webflowContext:e,children:o})=>{let t=a__namespace.useMemo(()=>({mode:e?.mode??i.mode,interactive:e?.interactive??i.interactive,locale:e?.locale??i.locale}),[e?.mode,e?.interactive,e?.locale]);return a__namespace.createElement(d.Provider,{value:t},o)};function T(){return a__namespace.useContext(d)}var R=class extends a__namespace.Component{constructor(o){super(o);}componentDidCatch(o,t){this.props.onError?.({error:o,message:t.digest||o.message,stack:t.componentStack??void 0});}render(){return this.props.children}};function c({Component:e,props:o,options:t}){return a__namespace.default.createElement(R,{children:a__namespace.default.createElement(C,{children:a__namespace.default.createElement(e,o),webflowContext:t?.webflowContext}),onError:t?.onError})}var v=e=>{function o(r){return P__default.default.createRoot(r)}function t(r,p,s){return P__default.default.hydrateRoot(r,c({Component:e,props:p,options:s}))}function m(r,p,s){r.render(c({Component:e,props:p,options:s}));}function n(r){return a__namespace.default.createElement("slot",{name:r})}return {mount:o,hydrate:t,render:m,createSlot:n}};var E=e=>{function o(n,r,p){return x__default.default.renderToPipeableStream(c({Component:e,props:n,options:r}),p)}function t(n,r,p){return x__default.default.renderToString(c({Component:e,props:n,options:r}),p)}function m(n){return a__namespace.default.createElement("slot",{name:n})}return {renderToStream:o,renderToString:t,createSlot:m}};var K=(e,o)=>{o?.name&&!e.displayName&&(e.displayName=o.name);let t=e;o?.decorators&&o.decorators.length>0&&(t=l(e,o.decorators));let{decorators:m,...n}=o??{};return {...n,component:t,framework:dataTypes.Framework.React}};exports.ClientRenderer=v;exports.ServerRenderer=E;exports.applyDecorators=l;exports.declareComponent=K;exports.useWebflowContext=T;

dist/index.d.ts

 import React from 'react';
-import { WebflowContext, ComponentClientRendererFactory, ComponentRuntimeProps, ComponentServerRendererFactory, ComponentData, ComponentDefinition } from '@webflow/data-types';
+import { WebflowContext, ComponentClientRendererFactory, ComponentRuntimeProps, ComponentServerRendererFactory, ComponentDecorator, ComponentData, ComponentDefinition } from '@webflow/data-types';
 import ReactDOM from 'react-dom/client';
@@ -35,2 +35,22 @@ import ReactDOMServer, { PipeableStream } from 'react-dom/server';
 /**
+ * Applies an array of decorators to a component in reverse order.
+ *
+ * Decorators are applied using `reduceRight` so that the first decorator
+ * in the array becomes the outermost wrapper, matching the intuitive
+ * reading order and Storybook's decorator behavior.
+ *
+ * @param component - The component to decorate
+ * @param decorators - Array of decorator functions to apply
+ * @returns The decorated component
+ *
+ * @example
+ * ```typescript
+ * const decorators = [decorator1, decorator2, decorator3];
+ * const decorated = applyDecorators(MyComponent, decorators);
+ * // Result: decorator1(decorator2(decorator3(MyComponent)))
+ * ```
+ */
+declare function applyDecorators<ComponentType>(component: ComponentType, decorators: ComponentDecorator<ComponentType>[]): ComponentType;
+
+/**
  * Creates a Webflow code component definition for the provided React component. Expected as the default export from a *.webflow.tsx file.
@@ -57,2 +77,13 @@ *
  *
+ * @example With decorators
+ * ```tsx
+ * import { declareComponent } from "@webflow/react";
+ * import { emotionShadowDomDecorator } from "@webflow/emotion-utils";
+ *
+ * export default declareComponent(MyComponent, {
+ *   name: "My Component",
+ *   decorators: [emotionShadowDomDecorator],
+ * });
+ * ```
+ *
  * @param Component The React component to render
@@ -67,6 +98,7 @@ * @param data An object with metadata about the code component
  * @param data.options.ssr An optional flag to enable server-side rendering for the code component (default: true)
+ * @param data.decorators An optional array of decorator functions to wrap the component
  * @returns A Webflow code component definition
  */
-declare const declareComponent: <P extends {}>(Component: React.ComponentType<P>, data: ComponentData<P, React.ReactNode>) => ComponentDefinition<React.ComponentType<P>, React.ReactNode, P>;
+declare const declareComponent: <P extends {}>(Component: React.ComponentType<P>, data: ComponentData<P, React.ReactNode, React.ComponentType<P>>) => ComponentDefinition<React.ComponentType<P>, React.ReactNode, P>;
 
-export { ClientRenderer, ServerRenderer, declareComponent, useWebflowContext };
+export { ClientRenderer, ServerRenderer, applyDecorators, declareComponent, useWebflowContext };

dist/index.js

@@ -1,1 +0,1 @@
-import {Framework}from'@webflow/data-types';import*as a from'react';import a__default from'react';import P from'react-dom/client';import y from'react-dom/server';var c={mode:"publish",interactive:true,locale:null},d=a.createContext(c),u=({webflowContext:e,children:t})=>{let o=a.useMemo(()=>({mode:e?.mode??c.mode,interactive:e?.interactive??c.interactive,locale:e?.locale??c.locale}),[e?.mode,e?.interactive,e?.locale]);return a.createElement(d.Provider,{value:o},t)};function x(){return a.useContext(d)}var i=class extends a.Component{constructor(t){super(t);}componentDidCatch(t,o){this.props.onError?.({error:t,message:o.digest||t.message,stack:o.componentStack??void 0});}render(){return this.props.children}};function m({Component:e,props:t,options:o}){return a__default.createElement(i,{children:a__default.createElement(u,{children:a__default.createElement(e,t),webflowContext:o?.webflowContext}),onError:o?.onError})}var v=e=>{function t(r){return P.createRoot(r)}function o(r,p,s){return P.hydrateRoot(r,m({Component:e,props:p,options:s}))}function R(r,p,s){r.render(m({Component:e,props:p,options:s}));}function n(r){return a__default.createElement("slot",{name:r})}return {mount:t,hydrate:o,render:R,createSlot:n}};var b=e=>{function t(n,r,p){return y.renderToPipeableStream(m({Component:e,props:n,options:r}),p)}function o(n,r,p){return y.renderToString(m({Component:e,props:n,options:r}),p)}function R(n){return a__default.createElement("slot",{name:n})}return {renderToStream:t,renderToString:o,createSlot:R}};var G=(e,t)=>({...t,component:e,framework:Framework.React});export{v as ClientRenderer,b as ServerRenderer,G as declareComponent,x as useWebflowContext};
+import {Framework}from'@webflow/data-types';import*as a from'react';import a__default from'react';import P from'react-dom/client';import x from'react-dom/server';function l(e,o){return o.reduceRight((t,m)=>m(t),e)}var i={mode:"publish",interactive:true,locale:null},d=a.createContext(i),C=({webflowContext:e,children:o})=>{let t=a.useMemo(()=>({mode:e?.mode??i.mode,interactive:e?.interactive??i.interactive,locale:e?.locale??i.locale}),[e?.mode,e?.interactive,e?.locale]);return a.createElement(d.Provider,{value:t},o)};function T(){return a.useContext(d)}var R=class extends a.Component{constructor(o){super(o);}componentDidCatch(o,t){this.props.onError?.({error:o,message:t.digest||o.message,stack:t.componentStack??void 0});}render(){return this.props.children}};function c({Component:e,props:o,options:t}){return a__default.createElement(R,{children:a__default.createElement(C,{children:a__default.createElement(e,o),webflowContext:t?.webflowContext}),onError:t?.onError})}var v=e=>{function o(r){return P.createRoot(r)}function t(r,p,s){return P.hydrateRoot(r,c({Component:e,props:p,options:s}))}function m(r,p,s){r.render(c({Component:e,props:p,options:s}));}function n(r){return a__default.createElement("slot",{name:r})}return {mount:o,hydrate:t,render:m,createSlot:n}};var E=e=>{function o(n,r,p){return x.renderToPipeableStream(c({Component:e,props:n,options:r}),p)}function t(n,r,p){return x.renderToString(c({Component:e,props:n,options:r}),p)}function m(n){return a__default.createElement("slot",{name:n})}return {renderToStream:o,renderToString:t,createSlot:m}};var K=(e,o)=>{o?.name&&!e.displayName&&(e.displayName=o.name);let t=e;o?.decorators&&o.decorators.length>0&&(t=l(e,o.decorators));let{decorators:m,...n}=o??{};return {...n,component:t,framework:Framework.React}};export{v as ClientRenderer,E as ServerRenderer,l as applyDecorators,K as declareComponent,T as useWebflowContext};

package.json

 {
   "name": "@webflow/react",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "license": "MIT",
@@ -28,3 +28,3 @@ "main": "./dist/index.cjs",
   "dependencies": {
-    "@webflow/data-types": "1.0.4"
+    "@webflow/data-types": "1.1.0"
   },
@@ -31,0 +31,0 @@ "peerDependencies": {

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

Fixed 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

13183

16.3%

Lines of code

95

48.44%

Dependency changes

• + Added

  @webflow/data-types@1.1.0
  (transitive)

• - Removed

  @webflow/data-types@1.0.4
  (transitive)

• Updated

  @webflow/data-types@1.1.0