@builder.io/mitosis 0.0.0-dev-20260605060721

package/dist/src/constants/hooks.d.ts

@@ -0,0 +1,16 @@
+export declare const HOOKS: {
+    readonly STORE: "useStore";
+    readonly STATE: "useState";
+    readonly CONTEXT: "useContext";
+    readonly REF: "useRef";
+    readonly DEFAULT_PROPS: "useDefaultProps";
+    readonly STYLE: "useStyle";
+    readonly TARGET: "useTarget";
+    readonly METADATA: "useMetadata";
+    readonly MOUNT: "onMount";
+    readonly EVENT: "onEvent";
+    readonly UNMOUNT: "onUnMount";
+    readonly UPDATE: "onUpdate";
+    readonly INIT: "onInit";
+    readonly SET_CONTEXT: "setContext";
+};

package/dist/src/constants/hooks.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HOOKS = void 0;
+exports.HOOKS = {
+    STORE: 'useStore',
+    STATE: 'useState',
+    CONTEXT: 'useContext',
+    REF: 'useRef',
+    DEFAULT_PROPS: 'useDefaultProps',
+    STYLE: 'useStyle',
+    TARGET: 'useTarget',
+    METADATA: 'useMetadata',
+    MOUNT: 'onMount',
+    EVENT: 'onEvent',
+    UNMOUNT: 'onUnMount',
+    UPDATE: 'onUpdate',
+    INIT: 'onInit',
+    SET_CONTEXT: 'setContext',
+};

package/dist/src/constants/html_tags.d.ts

@@ -0,0 +1,2 @@
+export declare const VALID_HTML_TAGS: string[];
+export declare const SELF_CLOSING_HTML_TAGS: Set<string>;

package/dist/src/constants/html_tags.js

@@ -0,0 +1,198 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SELF_CLOSING_HTML_TAGS = exports.VALID_HTML_TAGS = void 0;
+exports.VALID_HTML_TAGS = [
+    'html',
+    'base',
+    'head',
+    'link',
+    'meta',
+    'style',
+    'title',
+    'body',
+    'address',
+    'article',
+    'aside',
+    'footer',
+    'header',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'main',
+    'nav',
+    'section',
+    'blockquote',
+    'dd',
+    'div',
+    'dl',
+    'dt',
+    'figcaption',
+    'figure',
+    'hr',
+    'li',
+    'menu',
+    'ol',
+    'p',
+    'pre',
+    'ul',
+    'a',
+    'abbr',
+    'b',
+    'bdi',
+    'bdo',
+    'br',
+    'cite',
+    'code',
+    'data',
+    'dfn',
+    'em',
+    'i',
+    'kbd',
+    'mark',
+    'q',
+    'rp',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'small',
+    'span',
+    'strong',
+    'sub',
+    'sup',
+    'time',
+    'u',
+    'var',
+    'wbr',
+    'area',
+    'audio',
+    'img',
+    'map',
+    'track',
+    'video',
+    'embed',
+    'iframe',
+    'object',
+    'param',
+    'picture',
+    'portal',
+    'source',
+    'svg',
+    'math',
+    'canvas',
+    'noscript',
+    'script',
+    'del',
+    'ins',
+    'caption',
+    'col',
+    'colgroup',
+    'table',
+    'tbody',
+    'td',
+    'tfoot',
+    'th',
+    'thead',
+    'tr',
+    'button',
+    'datalist',
+    'fieldset',
+    'form',
+    'input',
+    'label',
+    'legend',
+    'meter',
+    'optgroup',
+    'option',
+    'output',
+    'progress',
+    'select',
+    'textarea',
+    'details',
+    'dialog',
+    'summary',
+    'slot',
+    'template',
+    // tags below are SVG tags. See the below article for list of SVG tags
+    // https://developer.mozilla.org/en-US/docs/Web/SVG/Element
+    'animate',
+    'animateMotion',
+    'animateTransform',
+    'circle',
+    'clipPath',
+    'defs',
+    'desc',
+    'discard',
+    'ellipse',
+    'feBlend',
+    'feColorMatrix',
+    'feComponentTransfer',
+    'feComposite',
+    'feConvolveMatrix',
+    'feDiffuseLighting',
+    'feDisplacementMap',
+    'feDistantLight',
+    'feDropShadow',
+    'feFlood',
+    'feFuncA',
+    'feFuncB',
+    'feFuncG',
+    'feFuncR',
+    'feGaussianBlur',
+    'feImage',
+    'feMerge',
+    'feMergeNode',
+    'feMorphology',
+    'feOffset',
+    'fePointLight',
+    'feSpecularLighting',
+    'feSpotLight',
+    'feTile',
+    'feTurbulence',
+    'filter',
+    'foreignObject',
+    'g',
+    'hatch',
+    'hatchpath',
+    'image',
+    'line',
+    'linearGradient',
+    'marker',
+    'mask',
+    'metadata',
+    'mpath',
+    'path',
+    'pattern',
+    'polygon',
+    'polyline',
+    'radialGradient',
+    'rect',
+    'set',
+    'stop',
+    'switch',
+    'symbol',
+    'text',
+    'textPath',
+    'tspan',
+    'use',
+    'view',
+];
+exports.SELF_CLOSING_HTML_TAGS = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr',
+]);

package/dist/src/constants/media-sizes.d.ts

@@ -0,0 +1,22 @@
+export type Size = 'large' | 'medium' | 'small';
+export declare const sizeNames: Size[];
+export declare const sizes: {
+    small: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    medium: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    large: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    getWidthForSize(size: Size): number;
+    getSizeForWidth(width: number): Size;
+};
+export declare const mediaQueryRegex: RegExp;

package/dist/src/constants/media-sizes.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mediaQueryRegex = exports.sizes = exports.sizeNames = void 0;
+exports.sizeNames = ['small', 'medium', 'large'];
+exports.sizes = {
+    small: {
+        min: 320,
+        default: 321,
+        max: 640,
+    },
+    medium: {
+        min: 641,
+        default: 642,
+        max: 991,
+    },
+    large: {
+        min: 990,
+        default: 991,
+        max: 1200,
+    },
+    getWidthForSize(size) {
+        return this[size].default;
+    },
+    getSizeForWidth(width) {
+        for (const size of exports.sizeNames) {
+            const value = this[size];
+            if (width <= value.max) {
+                return size;
+            }
+        }
+        return 'large';
+    },
+};
+exports.mediaQueryRegex = /@\s*?media\s*?\(\s*?max-width\s*?:\s*?(\d+)(px)\s*?\)\s*?/;

package/dist/src/constants/method-literal-prefix.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/constants/method-literal-prefix.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/flow.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from '../jsx-runtime';
+/**
+ * Flow control based on Solid
+ *
+ * https://github.com/ryansolid/solid/blob/master/packages/solid/src/rendering/flow.ts
+ * https://github.com/ryansolid/solid/blob/master/documentation/rendering.md
+ *
+ * These elements all compile away so they return `null`
+ */
+export declare function For<T, U extends JSX.Element>(props: {
+    each?: readonly T[];
+    children: (item: T, index: number) => U;
+}): any;
+export declare function Slot<T, U extends JSX.Element>(props: {
+    name?: JSX.Element;
+} | {
+    [key: string]: any;
+}): any;
+export declare function Show<T>(props: {
+    when: T | undefined | null | false;
+    else?: JSX.Element;
+    children?: JSX.Element | null;
+}): any;
+export declare function Fragment(props: {
+    children: JSX.Element | JSX.Element[];
+}): any;

package/dist/src/flow.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fragment = exports.Show = exports.Slot = exports.For = void 0;
+/**
+ * Flow control based on Solid
+ *
+ * https://github.com/ryansolid/solid/blob/master/packages/solid/src/rendering/flow.ts
+ * https://github.com/ryansolid/solid/blob/master/documentation/rendering.md
+ *
+ * These elements all compile away so they return `null`
+ */
+function For(props) {
+    return null;
+}
+exports.For = For;
+function Slot(props) {
+    return null;
+}
+exports.Slot = Slot;
+function Show(props) {
+    return null;
+}
+exports.Show = Show;
+function Fragment(props) {
+    return null;
+}
+exports.Fragment = Fragment;

package/dist/src/generators/alpine/generate.d.ts

@@ -0,0 +1,11 @@
+import { ToAlpineOptions } from '../../generators/alpine/types';
+import { MitosisNode } from '../../types/mitosis-node';
+import { TranspilerGenerator } from '../../types/transpiler';
+export declare const checkIsComponentNode: (node: MitosisNode) => boolean;
+/**
+ * Test if the binding expression would be likely to generate
+ * valid or invalid liquid. If we generate invalid liquid tags
+ * Shopify will reject our PUT to update the template
+ */
+export declare const isValidAlpineBinding: (str?: string) => boolean;
+export declare const componentToAlpine: TranspilerGenerator<ToAlpineOptions>;

package/dist/src/generators/alpine/generate.js

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToAlpine = exports.isValidAlpineBinding = exports.checkIsComponentNode = void 0;
+const html_tags_1 = require("../../constants/html_tags");
+const babel_transform_1 = require("../../helpers/babel-transform");
+const dash_case_1 = require("../../helpers/dash-case");
+const event_handlers_1 = require("../../helpers/event-handlers");
+const fast_clone_1 = require("../../helpers/fast-clone");
+const get_refs_1 = require("../../helpers/get-refs");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const merge_options_1 = require("../../helpers/merge-options");
+const remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
+const replace_identifiers_1 = require("../../helpers/replace-identifiers");
+const strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+const collect_css_1 = require("../../helpers/styles/collect-css");
+const plugins_1 = require("../../modules/plugins");
+const mitosis_node_1 = require("../../types/mitosis-node");
+const lodash_1 = require("lodash");
+const standalone_1 = require("prettier/standalone");
+const render_mount_hook_1 = require("./render-mount-hook");
+const render_update_hooks_1 = require("./render-update-hooks");
+const checkIsComponentNode = (node) => node.name === '@builder.io/mitosis/component';
+exports.checkIsComponentNode = checkIsComponentNode;
+/**
+ * Test if the binding expression would be likely to generate
+ * valid or invalid liquid. If we generate invalid liquid tags
+ * Shopify will reject our PUT to update the template
+ */
+const isValidAlpineBinding = (str = '') => {
+    return true;
+    /*
+    const strictMatches = Boolean(
+      // Test for our `context.shopify.liquid.*(expression), which
+      // we regex out later to transform back into valid liquid expressions
+      str.match(/(context|ctx)\s*(\.shopify\s*)?\.liquid\s*\./),
+    );
+  
+    return (
+      strictMatches ||
+      // Test is the expression is simple and would map to Shopify bindings	    // Test for our `context.shopify.liquid.*(expression), which
+      // e.g. `state.product.price` -> `{{product.price}}	    // we regex out later to transform back into valid liquid expressions
+      Boolean(str.match(/^[a-z0-9_\.\s]+$/i))
+    );
+    */
+};
+exports.isValidAlpineBinding = isValidAlpineBinding;
+const removeOnFromEventName = (str) => str.replace(/^on/, '');
+const removeTrailingSemicolon = (str) => str.replace(/;$/, '');
+const trim = (str) => str.trim();
+const replaceInputRefs = (0, lodash_1.curry)((json, str) => {
+    (0, get_refs_1.getRefs)(json).forEach((value) => {
+        str = str.replaceAll(value, `this.$refs.${value}`);
+    });
+    return str;
+});
+const replaceStateWithThis = (str) => str.replaceAll('state.', 'this.');
+const getStateObjectString = (json) => (0, lodash_1.flow)(get_state_object_string_1.getStateObjectStringFromComponent, trim, replaceInputRefs(json), (0, render_mount_hook_1.renderMountHook)(json), (0, render_update_hooks_1.renderUpdateHooks)(json), replaceStateWithThis, 
+// cleanup bad regexes that result in malformed JSON strings that start with `{,`
+(x) => (x.startsWith('{,') ? x.replace('{,', '{') : x))(json);
+const bindEventHandlerKey = (0, lodash_1.flowRight)(dash_case_1.dashCase, removeOnFromEventName);
+const bindEventHandlerValue = (0, lodash_1.flowRight)((x) => (0, replace_identifiers_1.replaceIdentifiers)({
+    code: x,
+    from: 'event',
+    to: '$event',
+}), removeTrailingSemicolon, trim, remove_surrounding_block_1.removeSurroundingBlock, strip_state_and_props_refs_1.stripStateAndPropsRefs);
+const bindEventHandler = ({ useShorthandSyntax }) => (eventName, code) => {
+    const bind = useShorthandSyntax ? '@' : 'x-on:';
+    return ` ${bind}${bindEventHandlerKey(eventName)}="${bindEventHandlerValue(code).trim()}"`;
+};
+const mappers = {
+    For: (json, options) => {
+        var _a, _b, _c;
+        return !((0, mitosis_node_1.checkIsForNode)(json) &&
+            (0, exports.isValidAlpineBinding)((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code) &&
+            (0, exports.isValidAlpineBinding)(json.scope.forName))
+            ? ''
+            : `<template x-for="${json.scope.forName} in ${(0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code)}">
+    ${((_c = json.children) !== null && _c !== void 0 ? _c : []).map((item) => blockToAlpine(item, options)).join('\n')}
+    </template>`;
+    },
+    Fragment: (json, options) => blockToAlpine({ ...json, name: 'div' }, options),
+    Show: (json, options) => {
+        var _a, _b, _c;
+        return !(0, exports.isValidAlpineBinding)((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code)
+            ? ''
+            : `<template x-if="${(0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_b = json.bindings.when) === null || _b === void 0 ? void 0 : _b.code)}">
+    ${((_c = json.children) !== null && _c !== void 0 ? _c : []).map((item) => blockToAlpine(item, options)).join('\n')}
+    </template>`;
+    },
+};
+// TODO: spread support
+const blockToAlpine = (json, options = {}) => {
+    var _a, _b;
+    if (mappers[json.name]) {
+        return mappers[json.name](json, options);
+    }
+    // TODO: Add support for `{props.children}` bindings
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
+        return (0, exports.isValidAlpineBinding)(json.bindings._text.code)
+            ? `<span x-html="${(0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text.code)}"></span>`
+            : '';
+    }
+    let str = `<${json.name} `;
+    /*
+    // Copied from the liquid generator. Not sure what it does.
+    if (
+      json.bindings._spread?.code === '_spread' &&
+      isValidAlpineBinding(json.bindings._spread.code)
+    ) {
+      str += `
+            <template x-for="_attr in ${json.bindings._spread.code}">
+              {{ _attr[0] }}="{{ _attr[1] }}"
+            </template>
+          `;
+    }
+    */
+    for (const key in json.properties) {
+        const value = json.properties[key];
+        str += ` ${key}="${value}" `;
+    }
+    for (const key in json.bindings) {
+        if (key === '_spread' || key === 'css') {
+            continue;
+        }
+        const { code: value, type: bindingType } = json.bindings[key];
+        // TODO: proper babel transform to replace. Util for this
+        const useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value);
+        if ((0, event_handlers_1.checkIsEvent)(key)) {
+            str += bindEventHandler(options)(key, value);
+        }
+        else if (key === 'ref') {
+            str += ` x-ref="${useValue}"`;
+        }
+        else if ((0, exports.isValidAlpineBinding)(useValue)) {
+            const bind = options.useShorthandSyntax && bindingType !== 'spread' ? ':' : 'x-bind:';
+            str += ` ${bind}${bindingType === 'spread' ? '' : key}="${useValue}" `.replace(':=', '=');
+        }
+    }
+    return html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)
+        ? `${str} />`
+        : `${str}>${((_b = json.children) !== null && _b !== void 0 ? _b : []).map((item) => blockToAlpine(item, options)).join('\n')}</${json.name}>`;
+};
+const componentToAlpine = (_options = {}) => ({ component }) => {
+    const options = (0, merge_options_1.initializeOptions)({ target: 'alpine', component, defaults: _options });
+    let json = (0, fast_clone_1.fastClone)(component);
+    if (options.plugins) {
+        json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
+    }
+    const css = (0, collect_css_1.collectCss)(json);
+    (0, strip_meta_properties_1.stripMetaProperties)(json);
+    if (options.plugins) {
+        json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
+    }
+    const componentName = (0, lodash_1.camelCase)(json.name) || 'MyComponent';
+    const stateObjectString = getStateObjectString(json);
+    // Set x-data on root element
+    json.children[0].properties['x-data'] = options.inlineState
+        ? stateObjectString
+        : `${componentName}()`;
+    if ((0, render_update_hooks_1.hasRootUpdateHook)(json)) {
+        json.children[0].properties['x-effect'] = 'onUpdate';
+    }
+    let str = css.trim().length ? `<style>${css}</style>` : '';
+    str += json.children.map((item) => blockToAlpine(item, options)).join('\n');
+    if (!options.inlineState) {
+        str += `<script>
+          ${(0, babel_transform_1.babelTransformCode)(`document.addEventListener('alpine:init', () => {
+              Alpine.data('${componentName}', () => (${stateObjectString}))
+          })`)}
+        </script>`;
+    }
+    if (options.plugins) {
+        str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
+    }
+    if (options.prettier !== false) {
+        try {
+            str = (0, standalone_1.format)(str, {
+                parser: 'html',
+                htmlWhitespaceSensitivity: 'ignore',
+                plugins: [
+                    // To support running in browsers
+                    require('prettier/parser-html'),
+                    require('prettier/parser-postcss'),
+                    require('prettier/parser-babel'),
+                ],
+            });
+        }
+        catch (err) {
+            console.warn('Could not prettify', { string: str }, err);
+        }
+    }
+    if (options.plugins) {
+        str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
+    }
+    return str;
+};
+exports.componentToAlpine = componentToAlpine;

package/dist/src/generators/alpine/index.d.ts

@@ -0,0 +1,2 @@
+export * from './generate';
+export * from './types';

package/dist/src/generators/alpine/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./generate"), exports);
+__exportStar(require("./types"), exports);

package/dist/src/generators/alpine/render-mount-hook.d.ts

@@ -0,0 +1,2 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+export declare const renderMountHook: import("lodash").CurriedFunction2<MitosisComponent, string, string>;

package/dist/src/generators/alpine/render-mount-hook.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderMountHook = void 0;
+const lodash_1 = require("lodash");
+const on_mount_1 = require("../helpers/on-mount");
+const render_update_hooks_1 = require("./render-update-hooks");
+function shouldRenderMountHook(json) {
+    return json.hooks.onMount.length > 0 || (0, render_update_hooks_1.hasWatchHooks)(json);
+}
+exports.renderMountHook = (0, lodash_1.curry)((json, objectString) => {
+    return shouldRenderMountHook(json)
+        ? objectString.replace(/(?:,)?(\s*)(}\s*)$/, `, init() {
+      ${(0, render_update_hooks_1.renderWatchHooks)(json)}
+      ${(0, on_mount_1.stringifySingleScopeOnMount)(json)}
+    }$1$2`)
+        : objectString;
+});

package/dist/src/generators/alpine/render-update-hooks.d.ts

@@ -0,0 +1,5 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+export declare function hasRootUpdateHook(json: MitosisComponent): boolean;
+export declare const renderUpdateHooks: import("lodash").CurriedFunction2<MitosisComponent, string, string>;
+export declare const hasWatchHooks: (json: MitosisComponent) => boolean;
+export declare const renderWatchHooks: (json: MitosisComponent) => string;

package/dist/src/generators/alpine/render-update-hooks.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderWatchHooks = exports.hasWatchHooks = exports.renderUpdateHooks = exports.hasRootUpdateHook = void 0;
+const lodash_1 = require("lodash");
+const extractCode = (hook) => hook.code;
+function renderRootUpdateHook(hooks, output) {
+    if (hooks.length === 0) {
+        return output;
+    }
+    const str = `onUpdate() {
+        ${hooks.map(extractCode).join('\n')}
+    }`;
+    return output.replace(/,?(\s*})$/, `,\n${str}$1`);
+}
+function getRootUpdateHooks(json) {
+    var _a;
+    return ((_a = json.hooks.onUpdate) !== null && _a !== void 0 ? _a : []).filter((hook) => hook.deps == '');
+}
+function hasRootUpdateHook(json) {
+    return getRootUpdateHooks(json).length > 0;
+}
+exports.hasRootUpdateHook = hasRootUpdateHook;
+exports.renderUpdateHooks = (0, lodash_1.curry)((json, output) => {
+    return renderRootUpdateHook(getRootUpdateHooks(json), output);
+});
+function getWatchHooks(json) {
+    var _a;
+    return ((_a = json.hooks.onUpdate) !== null && _a !== void 0 ? _a : []).filter((hook) => { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.match(/state|this/); });
+}
+const hasWatchHooks = (json) => {
+    return getWatchHooks(json).length > 0;
+};
+exports.hasWatchHooks = hasWatchHooks;
+function renderWatchHook(hook) {
+    var _a, _b;
+    const deps = (_b = ((_a = hook.deps) !== null && _a !== void 0 ? _a : '')) === null || _b === void 0 ? void 0 : _b.slice(1).slice(0, -1).split(', ').filter((dep) => dep.match(/state|this/));
+    return deps
+        .map((dep) => `this.$watch('${dep.replace(/(state|this)\./, '')}', (value, oldValue) => { ${hook.code} });`)
+        .join('\n');
+}
+const renderWatchHooks = (json) => {
+    return (0, exports.hasWatchHooks)(json) ? getWatchHooks(json).map(renderWatchHook).join('\n') : '';
+};
+exports.renderWatchHooks = renderWatchHooks;