@builder.io/mitosis 0.0.50-6 → 0.0.50

package/dist/src/generators/qwik/handlers.js

@@ -63,18 +63,17 @@ function renderHandler(file, symbol, code) {
     file.exportConst(symbol, function () {
         this.emit([(0, src_generator_1.arrowFnBlock)([], body)]);
     });
-    file.src.emit(src_generator_1.NL);
 }
 function wrapWithUse(file, code) {
     var needsEvent = !!code.match(/\bevent\b/);
     if (needsEvent) {
         return function () {
-            this.emit('{', src_generator_1.NL, src_generator_1.INDENT);
+            this.emit('{');
             needsEvent &&
-                this.emit('const event', src_generator_1.WS, '=', src_generator_1.WS, (0, src_generator_1.invoke)(file.import(file.qwikModule, 'useEvent'), []), ';', src_generator_1.NL);
+                this.emit('const event=', (0, src_generator_1.invoke)(file.import(file.qwikModule, 'useEvent'), []), ';');
             var blockContent = stripBlock(code);
             this.emit(blockContent);
-            this.emit(src_generator_1.UNINDENT, src_generator_1.NL, '}');
+            this.emit('}');
         };
     }
     else {

package/dist/src/generators/qwik/jsx.js

@@ -30,7 +30,7 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
         if (children.length == 0)
             return;
         if (root)
-            this.emit('(', src_generator_1.INDENT, src_generator_1.NL);
+            this.emit('(');
         var needsFragment = root && children.length > 1;
         file.import(file.qwikModule, 'h');
         if (needsFragment) {
@@ -61,6 +61,11 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                 else {
                     if (typeof directive == 'string') {
                         directives.set(childName, directive);
+                        Array.from(directive.matchAll(/(__[^_]+__)/g)).forEach(function (match) {
+                            var name = match[0];
+                            var code = directives_1.DIRECTIVES[name];
+                            typeof code == 'string' && directives.set(name, code);
+                        });
                         if (file.module !== 'med') {
                             file.import('./med.js', childName);
                         }
@@ -75,13 +80,20 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                     }
                     var props = child.properties;
                     var css = child.bindings.css;
+                    var specialBindings = {};
                     if (css) {
                         props = __assign({}, props);
-                        props.class = addClass(styles.get(css).CLASS_NAME, props.class);
+                        var styleProps = styles.get(css);
+                        var imageMaxWidth = childName == 'Image' && styleProps.maxWidth;
+                        if (imageMaxWidth && imageMaxWidth.endsWith('px')) {
+                            // special case for Images. We want to make sure that we include the maxWidth in a srcset
+                            specialBindings.srcsetSizes = Number.parseInt(imageMaxWidth);
+                        }
+                        props.class = addClass(styleProps.CLASS_NAME, props.class);
                     }
                     var symbolBindings = {};
                     var bindings = rewriteHandlers(file, handlers, child.bindings, symbolBindings);
-                    _this.jsxBegin(childName, props, __assign(__assign({}, bindings), parentSymbolBindings));
+                    _this.jsxBegin(childName, props, __assign(__assign(__assign({}, bindings), parentSymbolBindings), specialBindings));
                     renderJSXNodes(file, directives, handlers, child.children, styles, symbolBindings, false).call(_this);
                     _this.jsxEnd(childName);
                 }
@@ -91,7 +103,7 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
             this.jsxEndFragment();
         }
         if (root)
-            this.emit(src_generator_1.UNINDENT, ')');
+            this.emit(')');
     };
 }
 exports.renderJSXNodes = renderJSXNodes;
@@ -131,7 +143,7 @@ function rewriteHandlers(file, handlers, bindings, symbolBindings) {
                     continue;
                 }
                 else if ((handlerBlock = handlers.get(binding))) {
-                    key = "on:".concat(key.substring(2).toLowerCase());
+                    key = "".concat(key, "Qrl");
                     binding = (0, src_generator_1.invoke)(file.import(file.qwikModule, 'qrl'), [
                         (0, src_generator_1.quote)(file.qrlPrefix + 'high.js'),
                         (0, src_generator_1.quote)(handlerBlock),

package/dist/src/generators/qwik/src-generator.d.ts

@@ -1,8 +1,3 @@
-export declare const WS: string;
-export declare const RS = " ";
-export declare const NL = "\n";
-export declare const INDENT: string;
-export declare const UNINDENT: string;
 export interface SrcBuilderOptions {
     isPretty: boolean;
     isTypeScript: boolean;
@@ -28,14 +23,10 @@ export declare class File {
     toString(): string;
 }
 export declare class SrcBuilder {
-    isPretty: boolean;
     isTypeScript: boolean;
     isModule: boolean;
     isJSX: boolean;
     buf: string[];
-    wasLastNL: boolean;
-    nestingDepth: number;
-    offset: number;
     constructor(options: SrcBuilderOptions);
     import(module: string, symbols: string[]): this;
     emit(...values: any[]): this;

package/dist/src/generators/qwik/src-generator.js

@@ -1,11 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iteratorProperty = exports.lastProperty = exports.isStatement = exports.iif = exports.arrowFnValue = exports.arrowFnBlock = exports.invoke = exports.quote = exports.Block = exports.Imports = exports.Symbol = exports.SrcBuilder = exports.File = exports.UNINDENT = exports.INDENT = exports.NL = exports.RS = exports.WS = void 0;
-exports.WS = String.fromCharCode(29);
-exports.RS = ' ';
-exports.NL = '\n';
-exports.INDENT = String.fromCharCode(16);
-exports.UNINDENT = String.fromCharCode(17);
+exports.iteratorProperty = exports.lastProperty = exports.isStatement = exports.iif = exports.arrowFnValue = exports.arrowFnBlock = exports.invoke = exports.quote = exports.Block = exports.Imports = exports.Symbol = exports.SrcBuilder = exports.File = void 0;
+var standalone_1 = require("prettier/standalone");
 var File = /** @class */ (function () {
     function File(filename, options, qwikModule, qrlPrefix) {
         this.imports = new Imports();
@@ -62,8 +58,21 @@ var File = /** @class */ (function () {
                 srcImports.import(module, symbols);
             }
         });
-        srcImports.emit(exports.NL);
-        return srcImports.toString() + this.src.toString();
+        var source = srcImports.toString() + this.src.toString();
+        if (this.options.isPretty) {
+            source = (0, standalone_1.format)(source, {
+                parser: 'typescript',
+                plugins: [
+                    // To support running in browsers
+                    require('prettier/parser-typescript'),
+                    require('prettier/parser-postcss'),
+                    require('prettier/parser-html'),
+                    require('prettier/parser-babel'),
+                ],
+                htmlWhitespaceSensitivity: 'ignore',
+            });
+        }
+        return source;
     };
     return File;
 }());
@@ -76,10 +85,6 @@ var spaces = [''];
 var SrcBuilder = /** @class */ (function () {
     function SrcBuilder(options) {
         this.buf = [];
-        this.wasLastNL = false;
-        this.nestingDepth = 0;
-        this.offset = 0;
-        this.isPretty = options.isPretty;
         this.isTypeScript = options.isTypeScript;
         this.isModule = options.isModule;
         this.isJSX = options.isJSX;
@@ -87,7 +92,7 @@ var SrcBuilder = /** @class */ (function () {
     SrcBuilder.prototype.import = function (module, symbols) {
         var _this = this;
         if (this.isModule) {
-            this.emit('import', exports.WS, '{', exports.WS, symbols, exports.WS, '}', exports.WS, 'from', exports.WS, quote(module), ';', exports.NL);
+            this.emit('import{', symbols, '}from', quote(module), ';');
         }
         else {
             symbols.forEach(function (symbol) {
@@ -96,7 +101,6 @@ var SrcBuilder = /** @class */ (function () {
                 });
             });
         }
-        this.emit(exports.NL);
         return this;
     };
     SrcBuilder.prototype.emit = function () {
@@ -128,18 +132,18 @@ var SrcBuilder = /** @class */ (function () {
                 this.emitList(value);
             }
             else if (typeof value == 'object') {
-                this.emit('{', exports.NL, exports.INDENT);
+                this.emit('{');
                 var separator = false;
                 for (var key in value) {
                     if (Object.prototype.hasOwnProperty.call(value, key)) {
                         if (separator) {
-                            this.emit(',', exports.NL);
+                            this.emit(',');
                         }
-                        this.emit(possiblyQuotePropertyName(key)).emit(':', exports.WS, value[key]);
+                        this.emit(possiblyQuotePropertyName(key)).emit(':', value[key]);
                         separator = true;
                     }
                 }
-                this.emit(exports.NL, exports.UNINDENT, '}');
+                this.emit('}');
             }
             else {
                 throw new Error('Unexpected value: ' + value);
@@ -148,35 +152,20 @@ var SrcBuilder = /** @class */ (function () {
         return this;
     };
     SrcBuilder.prototype.push = function (value) {
-        if (value == exports.UNINDENT) {
-            this.nestingDepth--;
-        }
-        else if (value == exports.INDENT) {
-            this.nestingDepth++;
-        }
-        else {
-            if (value == ')' || value == ':' || value == ']' || value == '}') {
-                // clear last ',';
-                var index = this.buf.length - 1;
-                var ch = '';
-                while (index > 1 && isWhitespace((ch = this.buf[index]))) {
-                    index--;
-                }
-                if (ch == ',') {
-                    this.buf[index] = '';
-                }
-            }
-            if (this.isPretty && this.wasLastNL) {
-                while (spaces.length <= this.nestingDepth) {
-                    spaces.push(spaces[spaces.length - 1] + '  ');
-                }
-                this.buf.push(spaces[this.nestingDepth]);
-            }
-            this.wasLastNL = value === exports.NL;
-            if (this.isPretty || (value !== exports.WS && value !== exports.NL)) {
-                this.buf.push(value == exports.WS ? ' ' : value);
+        if (value.startsWith(')') ||
+            value.startsWith(':') ||
+            value.startsWith(']') ||
+            value.startsWith('}') ||
+            value.startsWith('?')) {
+            // clear last ',' or ';';
+            var index = this.buf.length - 1;
+            var ch = this.buf[index];
+            if (ch.endsWith(',') || ch.endsWith(';')) {
+                ch = ch.substring(0, ch.length - 1);
+                this.buf[index] = ch;
             }
         }
+        this.buf.push(value);
     };
     SrcBuilder.prototype.emitList = function (values, sep) {
         if (sep === void 0) { sep = ','; }
@@ -184,7 +173,7 @@ var SrcBuilder = /** @class */ (function () {
         for (var _i = 0, values_1 = values; _i < values_1.length; _i++) {
             var value = values_1[_i];
             if (separator) {
-                this.emit(sep, sep == ';' ? exports.NL : exports.WS);
+                this.emit(sep);
             }
             this.emit(value);
             separator = true;
@@ -204,9 +193,9 @@ var SrcBuilder = /** @class */ (function () {
         }
         this.emit(name);
         if (value !== undefined) {
-            this.emit(exports.WS, '=', exports.WS, value);
+            this.emit('=', value);
         }
-        this.emit(';', exports.NL);
+        this.emit(';');
         return this;
     };
     SrcBuilder.prototype.type = function (def) {
@@ -221,6 +210,7 @@ var SrcBuilder = /** @class */ (function () {
         }
     };
     SrcBuilder.prototype.jsxBegin = function (symbol, props, bindings) {
+        var self = this;
         if (symbol == 'div' && ('href' in props || 'href' in bindings)) {
             // HACK: if we contain href then we are `a` not `div`
             symbol = 'a';
@@ -229,91 +219,93 @@ var SrcBuilder = /** @class */ (function () {
             this.emit('<' + symbol);
         }
         else {
-            this.emit('h', '(', exports.INDENT, exports.NL, literalTagName(symbol), ',', exports.NL, '{', exports.NL, exports.INDENT);
+            this.emit('h(', literalTagName(symbol), ',{');
         }
-        var first = true;
         for (var key in props) {
             if (Object.prototype.hasOwnProperty.call(props, key) &&
                 !ignoreKey(key) &&
                 !Object.prototype.hasOwnProperty.call(bindings, key)) {
-                if (first) {
-                    first = false;
-                    this.isJSX && this.emit(exports.RS, exports.INDENT, exports.INDENT);
-                }
-                else {
-                    this.isJSX ? this.emit(exports.NL) : this.emit(',', exports.NL);
-                }
-                this.isJSX ? this.emit(key) : this.emit(possiblyQuotePropertyName(key));
-                this.isJSX ? this.emit('=') : this.emit(':', exports.WS);
-                this.emit(quote(props[key]));
+                emitJsxProp(possiblyQuotePropertyName(key), quote(props[key]));
             }
         }
-        for (var rawKey in bindings) {
+        var _loop_1 = function (rawKey) {
             if (Object.prototype.hasOwnProperty.call(bindings, rawKey) &&
                 !ignoreKey(rawKey)) {
-                var binding = bindings[rawKey];
+                var binding_1 = bindings[rawKey];
                 var key = lastProperty(rawKey);
-                if (first) {
-                    first = false;
-                    this.isJSX && this.emit(exports.RS, exports.INDENT, exports.INDENT);
-                }
-                else {
-                    this.isJSX ? this.emit(exports.NL) : this.emit(',', exports.NL);
-                }
-                this.isJSX ? this.emit(key) : this.emit(possiblyQuotePropertyName(key));
-                this.isJSX ? this.emit('={') : this.emit(':', exports.WS);
-                if (binding === props[key]) {
+                if (binding_1 === props[key]) {
                     // HACK: workaround for the fact that sometimes the `bindings` have string literals
                     // We assume that when the binding content equals prop content.
-                    binding = JSON.stringify(binding);
+                    binding_1 = quote(binding_1);
+                }
+                else if (typeof binding_1 == 'string' && isStatement(binding_1)) {
+                    binding_1 = iif(binding_1);
+                }
+                if (key === 'hide' || key === 'show') {
+                    var _a = key == 'hide' ? ['"none"', '"inherit"'] : ['"inherit"', '"none"'], truthy_1 = _a[0], falsy_1 = _a[1];
+                    emitJsxProp('style', function () {
+                        this.emit('{display:', binding_1, '?', truthy_1, ':', falsy_1, '}');
+                    });
                 }
-                else if (typeof binding == 'string' && isStatement(binding)) {
-                    binding = iif(binding);
+                else {
+                    emitJsxProp(possiblyQuotePropertyName(key), binding_1);
                 }
-                this.emit(binding);
-                this.isJSX ? this.emit('}') : this.emit();
             }
-        }
-        if (!first) {
-            this.isJSX && this.emit(exports.UNINDENT, exports.UNINDENT);
+        };
+        for (var rawKey in bindings) {
+            _loop_1(rawKey);
         }
         if (this.isJSX) {
-            this.emit('>', exports.INDENT, exports.NL);
+            this.emit('>');
         }
         else {
-            this.emit(exports.NL, exports.UNINDENT, '}', ',', exports.NL);
+            this.emit('},');
+        }
+        function emitJsxProp(key, value) {
+            if (self.isJSX) {
+                self.emit(' ', key, '=');
+                if (typeof value == 'string' && value.startsWith('"')) {
+                    self.emit(value);
+                }
+                else {
+                    self.emit('{', value, '}');
+                }
+            }
+            else {
+                self.emit(key, ':', value, ',');
+            }
         }
     };
     SrcBuilder.prototype.jsxEnd = function (symbol) {
         if (this.isJSX) {
-            this.emit(exports.UNINDENT, '</', symbol, '>', exports.NL);
+            this.emit('</', symbol, '>');
         }
         else {
-            this.emit(exports.UNINDENT, ')', ',', exports.NL);
+            this.emit('),');
         }
     };
     SrcBuilder.prototype.jsxBeginFragment = function (symbol) {
         if (this.isJSX) {
-            this.emit('<>', exports.INDENT, exports.NL);
+            this.emit('<>');
         }
         else {
-            this.emit('h', '(', symbol.name, ',', exports.WS, 'null', ',', exports.INDENT, exports.NL);
+            this.emit('h(', symbol.name, ',null,');
         }
     };
     SrcBuilder.prototype.jsxEndFragment = function () {
         if (this.isJSX) {
-            this.emit(exports.UNINDENT, exports.NL, '</>');
+            this.emit('</>');
         }
         else {
-            this.emit(exports.UNINDENT, ')', exports.NL);
+            this.emit(')');
         }
     };
     SrcBuilder.prototype.jsxTextBinding = function (exp) {
         if (this.isJSX) {
-            this.emit('{', exp, '}', exports.NL);
+            this.emit('{', exp, '}');
         }
         else {
-            this.emit(exp, exports.NL);
+            this.emit(exp);
         }
     };
     SrcBuilder.prototype.toString = function () {
@@ -365,10 +357,16 @@ var Block = /** @class */ (function () {
 }());
 exports.Block = Block;
 function possiblyQuotePropertyName(key) {
-    return /^\w[\w\d]*$/.test(key) ? key : JSON.stringify(key);
+    return /^\w[\w\d]*$/.test(key) ? key : quote(key);
 }
 function quote(text) {
-    return JSON.stringify(text);
+    var string = JSON.stringify(text);
+    // So \u2028 is a line separator character and prettier treats it as such
+    // https://www.fileformat.info/info/unicode/char/2028/index.htm
+    // That means it can't be inside of a string, so we replace it with `\\u2028`.
+    // (see double `\\` vs `\`)
+    var parts = string.split('\u2028');
+    return parts.join('\\u2028');
 }
 exports.quote = quote;
 function invoke(symbol, args, typeParameters) {
@@ -381,22 +379,19 @@ function invoke(symbol, args, typeParameters) {
 exports.invoke = invoke;
 function arrowFnBlock(args, statements) {
     return function () {
-        this.emit('(', args, ')', exports.WS, '=>', exports.WS);
-        this.emit('{', exports.INDENT, exports.NL)
-            .emitList(statements, ';')
-            .emit(exports.UNINDENT, exports.NL, '}');
+        this.emit('(', args, ')=>{').emitList(statements, ';').emit('}');
     };
 }
 exports.arrowFnBlock = arrowFnBlock;
 function arrowFnValue(args, expression) {
     return function () {
-        this.emit('(', args, ')', exports.WS, '=>', exports.WS, expression);
+        this.emit('(', args, ')=>', expression);
     };
 }
 exports.arrowFnValue = arrowFnValue;
 function iif(code) {
     return function () {
-        code && this.emit('(()', exports.WS, '=>', exports.WS, '{', exports.WS, exports.NL, code, exports.NL, '}', ')()');
+        code && this.emit('(()=>{', code, '})()');
     };
 }
 exports.iif = iif;
@@ -409,9 +404,6 @@ function literalTagName(symbol) {
     }
     return symbol;
 }
-function isWhitespace(ch) {
-    return ch == '' || ch == exports.RS || ch == exports.NL;
-}
 /**
  * Returns `true` if the code is a statement (rather than expression).
  *

package/dist/src/generators/qwik/styles.js

@@ -26,7 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderStyles = exports.collectStyles = void 0;
 var json5_1 = __importDefault(require("json5"));
 var dash_case_1 = require("../../helpers/dash-case");
-var src_generator_1 = require("./src-generator");
 function collectStyles(children, styleMap) {
     var nodes = __spreadArray([], children, true);
     while (nodes.length) {
@@ -55,10 +54,10 @@ function hashCode(text) {
 function renderStyles(styles) {
     return function () {
         var _this = this;
-        this.emit('`', src_generator_1.NL, src_generator_1.INDENT);
+        this.emit('`');
         var mediaStyles = [];
         styles.forEach(function (styles) {
-            _this.emit('.', styles.CLASS_NAME, /*'.🏷️�', WS,*/ '{', src_generator_1.NL, src_generator_1.INDENT);
+            _this.emit('.', styles.CLASS_NAME, /*'.🏷️�', WS,*/ '{');
             for (var key in styles) {
                 if (key !== 'CLASS_NAME' &&
                     Object.prototype.hasOwnProperty.call(styles, key)) {
@@ -67,28 +66,26 @@ function renderStyles(styles) {
                         mediaStyles.push(styles.CLASS_NAME, key, value);
                     }
                     else {
-                        _this.emit((0, dash_case_1.dashCase)(key), ':', src_generator_1.WS, value, ';', src_generator_1.NL);
+                        _this.emit((0, dash_case_1.dashCase)(key), ':', value, ';');
                     }
                 }
             }
-            _this.emit(src_generator_1.UNINDENT, '}', src_generator_1.NL);
+            _this.emit('}');
         });
         while (mediaStyles.length) {
             var className = mediaStyles.shift();
             var mediaKey = mediaStyles.shift();
             var mediaObj = mediaStyles.shift();
-            this.emit(mediaKey, src_generator_1.WS, '{', src_generator_1.INDENT, src_generator_1.NL);
-            this.emit('.', className, /*'.🏷️�', WS,*/ '{', src_generator_1.NL, src_generator_1.INDENT);
+            this.emit(mediaKey, '{.', className, /*'.🏷️�',*/ '{');
             for (var key in mediaObj) {
                 if (Object.prototype.hasOwnProperty.call(mediaObj, key)) {
                     var value = mediaObj[key];
-                    this.emit((0, dash_case_1.dashCase)(key), ':', src_generator_1.WS, value, ';', src_generator_1.NL);
+                    this.emit((0, dash_case_1.dashCase)(key), ':', value, ';');
                 }
             }
-            this.emit(src_generator_1.UNINDENT, '}', src_generator_1.NL);
-            this.emit(src_generator_1.UNINDENT, '}', src_generator_1.NL);
+            this.emit('}}');
         }
-        this.emit(src_generator_1.UNINDENT, '`');
+        this.emit('`');
     };
 }
 exports.renderStyles = renderStyles;

package/dist/src/generators/react.js

@@ -47,6 +47,7 @@ var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
 var plugins_1 = require("../modules/plugins");
 var jsx_1 = require("../parsers/jsx");
+var context_1 = require("./helpers/context");
 var react_native_1 = require("./react-native");
 var wrapInFragment = function (json) {
     return json.children.length !== 1;
@@ -289,10 +290,6 @@ function getContextString(component, options) {
     }
     return str;
 }
-function hasContext(component) {
-    return Boolean(Object.keys(component.context.get).length ||
-        Object.keys(component.context.set).length);
-}
 var getInitCode = function (json, options) {
     var _a;
     return processBinding(((_a = json.hooks.init) === null || _a === void 0 ? void 0 : _a.code) || '', options);
@@ -379,7 +376,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     if (useStateCode && useStateCode.includes('useState')) {
         reactLibImports.add('useState');
     }
-    if (hasContext(json)) {
+    if ((0, context_1.hasContext)(json)) {
         reactLibImports.add('useContext');
     }
     if (refs.size) {
@@ -387,7 +384,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     }
     if (((_a = json.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code) ||
         ((_b = json.hooks.onUnMount) === null || _b === void 0 ? void 0 : _b.code) ||
-        ((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.code)) {
+        ((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length)) {
         reactLibImports.add('useEffect');
     }
     var wrap = wrapInFragment(json) || (componentHasStyles && stylesType === 'styled-jsx');
@@ -418,8 +415,12 @@ var _componentToReact = function (json, options, isSubComponent) {
                         : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
         : '', getContextString(json, options), getRefsString(json), getInitCode(json, options), ((_d = json.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code)
         ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onMount.code, options), options), "\n          }, [])")
-        : '', ((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.code)
-        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onUpdate.code, options), options), "\n          }, ").concat(json.hooks.onUpdate.deps, ")")
+        : '', ((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
+        ? json.hooks.onUpdate
+            .map(function (hook) { return "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(hook.code, options), options), "\n          }, \n          ").concat(hook.deps
+            ? processBinding(updateStateSettersInCode(hook.deps, options), options)
+            : '', ")"); })
+            .join(';')
         : '', ((_f = json.hooks.onUnMount) === null || _f === void 0 ? void 0 : _f.code)
         ? "useEffect(() => {\n            return () => {\n              ".concat(processBinding(updateStateSettersInCode(json.hooks.onUnMount.code, options), options), "\n            }\n          }, [])")
         : '', wrap ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToReact)(item, options); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'