create-velto 1.0.1 → 1.0.2

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/transform/jsx/transformJSXExpression.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformJSXExpression = transformJSXExpression;
+const parentId_1 = require("../parentId");
+function transformJSXExpression({ path, template, }) {
+    const expression = path.get('expression');
+    const parentId = (0, parentId_1.getParentId)(expression);
+    template.expression({
+        target: parentId,
+        express: expression.node,
+    });
+}

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/transform/jsx/transformJSXLogicalExpression.d.ts

@@ -0,0 +1,8 @@
+import { NodePath } from '@babel/core';
+import { LogicalExpression, Expression } from '@babel/types';
+import Template from '../../template';
+export declare function transformJSXLogicalExpression({ path, template, test }: {
+    path: NodePath<LogicalExpression>;
+    template: Template;
+    test?: Expression;
+}): void;

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/transform/jsx/transformJSXLogicalExpression.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformJSXLogicalExpression = transformJSXLogicalExpression;
+const types_1 = require("@babel/types");
+const transformJSXConsequentExpression_1 = require("./transformJSXConsequentExpression");
+function transformJSXLogicalExpression({ path, template, test }) {
+    const left = path.get('left');
+    const right = path.get('right');
+    (0, transformJSXConsequentExpression_1.transformJSXConsequentExpression)({
+        test: test ? (0, types_1.binaryExpression)('&', test, left.node) : left.node,
+        consequent: right,
+        template,
+    });
+}

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/transform/parentId.d.ts

@@ -0,0 +1,4 @@
+import { NodePath } from '@babel/core';
+import { Identifier, MemberExpression } from '@babel/types';
+export declare function getParentId(path?: NodePath<any>): Identifier;
+export declare function setParentId(path: NodePath<any>, id?: Identifier | MemberExpression): void;

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/transform/parentId.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getParentId = getParentId;
+exports.setParentId = setParentId;
+const constants_1 = require("../constants");
+function getParentId(path) {
+    let parent = path === null || path === void 0 ? void 0 : path.parentPath;
+    while (parent) {
+        const data = parent.data;
+        const parentId = data === null || data === void 0 ? void 0 : data.parentId;
+        if (parentId) {
+            return parentId;
+        }
+        parent = parent.parentPath;
+    }
+    return constants_1.targetIdentifier;
+}
+function setParentId(path, id = constants_1.targetIdentifier) {
+    var _a;
+    (_a = path.data) !== null && _a !== void 0 ? _a : (path.data = {});
+    path.data.parentId = id;
+}

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/index.ts","../src/constants/index.ts","../src/helper/constants.ts","../src/helper/index.ts","../src/template/index.ts","../src/template/util.ts","../src/transform/index.ts","../src/transform/parentid.ts","../src/transform/jsx/transformjsx.ts","../src/transform/jsx/transformjsxchildren.ts","../src/transform/jsx/transformjsxcomponentprops.ts","../src/transform/jsx/transformjsxconditionalexpression.ts","../src/transform/jsx/transformjsxconsequentexpression.ts","../src/transform/jsx/transformjsxelement.ts","../src/transform/jsx/transformjsxexpression.ts","../src/transform/jsx/transformjsxlogicalexpression.ts","../src/types/global.ts","../src/types/index.ts","../src/utils/index.ts","../src/utils/stringcurrying.ts","../src/visitor/index.ts","../src/visitor/jsxelement.ts","../src/visitor/jsxfragment.ts","../src/visitor/program.ts"],"version":"5.8.3"}

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/types/global.d.ts

@@ -0,0 +1 @@
+declare module '@babel/plugin-syntax-jsx';

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/types/global.js

@@ -0,0 +1 @@
+"use strict";

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/types/index.d.ts

@@ -0,0 +1,20 @@
+import { Identifier } from '@babel/types';
+import { Helper } from '../helper';
+import { NodePath } from '@babel/traverse';
+import Template from '../template';
+export interface NodePathState {
+    helper: Helper;
+}
+export interface NodePathData {
+    parentId: Identifier;
+    reactiveList: Identifier[];
+}
+export interface TransformJSXOptions<T = any> {
+    path: NodePath<T>;
+    template: Template;
+    root?: boolean;
+}
+export interface TransformJSXChildrenOptions<T = any> {
+    path: NodePath<T>[];
+    template: Template;
+}

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/types/index.js

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

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+import { JSXOpeningElement, Expression, Identifier } from "@babel/types";
+import { NodePath } from "@babel/traverse";
+export declare function getTagLiteral(path: NodePath<JSXOpeningElement>): string;
+export declare function getExpressionStatement(callee: Expression, argumentList?: Expression[]): import("@babel/types").ExpressionStatement;
+export declare function getVariableDeclaration(id: Identifier, callee: Expression, argumentList?: Expression[], kind?: "var" | "let" | "const"): import("@babel/types").VariableDeclaration;

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/utils/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTagLiteral = getTagLiteral;
+exports.getExpressionStatement = getExpressionStatement;
+exports.getVariableDeclaration = getVariableDeclaration;
+const types_1 = require("@babel/types");
+function getTagLiteral(path) {
+    const namePath = path.get("name");
+    return namePath.getSource();
+}
+function getExpressionStatement(callee, argumentList = []) {
+    return (0, types_1.expressionStatement)((0, types_1.callExpression)(callee, argumentList));
+}
+function getVariableDeclaration(id, callee, argumentList = [], kind = "const") {
+    return (0, types_1.variableDeclaration)(kind, [
+        (0, types_1.variableDeclarator)(id, (0, types_1.callExpression)(callee, argumentList)),
+    ]);
+}

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/utils/stringCurrying.d.ts

@@ -0,0 +1 @@
+export declare function stringCurrying(str: string, lowerCase?: boolean): (key: string) => boolean;

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/utils/stringCurrying.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringCurrying = stringCurrying;
+// input a,b,c
+// a,b,c => {a: true, b: true, c: true}
+// return val => map[val]
+function stringCurrying(str, lowerCase) {
+    const map = Object.create(null);
+    const list = str.split(',');
+    for (let i = 0; i < list.length; i++) {
+        map[list[i]] = true;
+    }
+    return lowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val];
+}

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/visitor/index.d.ts

@@ -0,0 +1,11 @@
+import JSXElement from './jsxElement';
+import JSXFragment from './jsxFragment';
+declare const _default: {
+    JSXElement: typeof JSXElement;
+    JSXFragment: typeof JSXFragment;
+    Program: {
+        enter(path: import("@babel/traverse").NodePath<import("@babel/types").Program>): void;
+        exit(path: import("@babel/traverse").NodePath<import("@babel/types").Program>): void;
+    };
+};
+export default _default;

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/visitor/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsxElement_1 = __importDefault(require("./jsxElement"));
+const jsxFragment_1 = __importDefault(require("./jsxFragment"));
+const program_1 = __importDefault(require("./program"));
+exports.default = {
+    JSXElement: jsxElement_1.default,
+    JSXFragment: jsxFragment_1.default,
+    Program: program_1.default,
+};

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/visitor/jsxElement.d.ts

@@ -0,0 +1,3 @@
+import { NodePath } from "@babel/traverse";
+import { JSXElement } from "@babel/types";
+export default function JSXElement(path: NodePath<JSXElement>): void;

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/visitor/jsxElement.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = JSXElement;
+const transform_1 = require("../transform");
+const template_1 = __importDefault(require("../template"));
+function JSXElement(path) {
+    const template = new template_1.default({
+        rootPath: path,
+    });
+    (0, transform_1.transformJSX)({ path, template, root: true });
+    template.replace();
+}

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/visitor/jsxFragment.d.ts

@@ -0,0 +1,3 @@
+import { NodePath } from '@babel/traverse';
+import { JSXFragment } from '@babel/types';
+export default function JSXFragment(path: NodePath<JSXFragment>): void;

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/visitor/jsxFragment.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = JSXFragment;
+const template_1 = __importDefault(require("../template"));
+const transform_1 = require("../transform");
+function JSXFragment(path) {
+    const template = new template_1.default({
+        rootPath: path,
+    });
+    (0, transform_1.transformJSX)({ path, template, root: true });
+    template.replace();
+}

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/visitor/program.d.ts

@@ -0,0 +1,7 @@
+import { NodePath } from '@babel/traverse';
+import { Program } from '@babel/types';
+declare const _default: {
+    enter(path: NodePath<Program>): void;
+    exit(path: NodePath<Program>): void;
+};
+export default _default;

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/dist/visitor/program.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const helper_1 = require("../helper");
+exports.default = {
+    enter(path) {
+        path.state = {};
+        path.state.helper = new helper_1.Helper({ rootPath: path });
+    },
+    exit(path) {
+        const state = path.state;
+        if (state.helper.hasSpecifier) {
+            path.node.body.unshift(state.helper.helperImportDeclaration);
+        }
+    }
+};

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@velto/babel-plugin-velto",
+  "version": "1.0.0-beta.2",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__helper-module-imports": "^7.18.3",
+    "@types/babel__traverse": "^7.20.7",
+    "@types/node": "^20.17.30",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/helper-module-imports": "^7.25.9",
+    "@babel/plugin-syntax-jsx": "^7.25.9",
+    "@babel/traverse": "^7.27.0",
+    "@babel/types": "^7.27.0",
+    "@velto/shared": "1.0.0-beta.2"
+  },
+  "scripts": {
+    "dev": "tsc --watch --declaration",
+    "build": "pnpm clean && tsc --build --declaration",
+    "clean": "rm -rf dist"
+  }
+}

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/src/constants/index.ts

@@ -0,0 +1,8 @@
+import { identifier } from '@babel/types';
+
+export const targetIdentifier = identifier('target');
+export const anchorIdentifier = identifier('anchor');
+export const reactiveIdentifier = identifier('reactive');
+export const mountIdentifier = identifier('mount');
+export const updateIdentifier = identifier('update');
+export const destroyIdentifier = identifier("destroy")

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/src/helper/constants.ts

@@ -0,0 +1,13 @@
+export enum RuntimeHelper {
+  source = '@velto/runtime',
+  markRender = 'markRender',
+
+  component = 'component',
+  element = 'element',
+  text = 'text',
+  remove = 'remove',
+  append = 'append',
+  expression = 'expression',
+  renderList = 'renderList',
+  condition = 'condition',
+}

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/src/helper/index.ts

@@ -0,0 +1,34 @@
+import { Program, Identifier, importDeclaration, identifier, stringLiteral, importSpecifier } from "@babel/types";
+import { NodePath } from "@babel/traverse";
+import { RuntimeHelper } from './constants';
+
+export * from './constants';
+
+export class Helper {
+  private rootPath: NodePath<Program>;
+  private helperNameIdentifierMap = new Map<RuntimeHelper, Identifier>();
+  public helperImportDeclaration = importDeclaration([], stringLiteral(RuntimeHelper.source));
+
+  constructor(options: { rootPath: NodePath<Program> }) {
+    const { rootPath } = options;
+    this.rootPath = rootPath;
+  }
+
+  get hasSpecifier() {
+    return !!this.helperImportDeclaration.specifiers.length;
+  }
+
+ public getHelperNameIdentifier(name: RuntimeHelper) {
+    let value = this.helperNameIdentifierMap.get(name);
+
+    if (!value) {
+      value = this.rootPath.scope.generateUidIdentifier(name);
+      this.helperNameIdentifierMap.set(name, value);
+      this.helperImportDeclaration.specifiers.push(
+        importSpecifier(value, identifier(name))
+      );
+    }
+
+    return value;
+  }
+}

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/src/index.ts

@@ -0,0 +1,10 @@
+import SyntaxJSX from '@babel/plugin-syntax-jsx';
+import visitor from './visitor';
+
+export default () => {
+  return {
+    name: 'babel-plugin-velto',
+    inherits: SyntaxJSX,
+    visitor,
+  };
+};

package/templates/velto-ts/node_modules/.pnpm/@velto+babel-plugin-velto@1.0.0-beta.2/node_modules/@velto/babel-plugin-velto/src/template/index.ts

@@ -0,0 +1,317 @@
+import {
+  Identifier,
+  identifier,
+  blockStatement,
+  Statement,
+  returnStatement,
+  objectExpression,
+  objectMethod,
+  callExpression,
+  stringLiteral,
+  Expression,
+  StringLiteral,
+  memberExpression,
+  ObjectProperty,
+  ObjectExpression,
+  arrowFunctionExpression,
+  ReturnStatement,
+  isCallExpression,
+  isBlockStatement,
+  CallExpression,
+  variableDeclaration,
+  variableDeclarator,
+  isReturnStatement,
+  isMemberExpression,
+  Node,
+  isArrowFunctionExpression,
+  isFunctionExpression,
+  isJSXElement,
+  isJSXFragment,
+  isObjectProperty,
+} from "@babel/types";
+import { NodePath } from "@babel/traverse";
+import {
+  targetIdentifier,
+  anchorIdentifier,
+  mountIdentifier,
+  updateIdentifier,
+  destroyIdentifier,
+  reactiveIdentifier,
+} from "../constants";
+import { RuntimeHelper } from "../helper";
+import { NodePathState } from "../types";
+import {
+  getExpressionStatement,
+  getVariableDeclaration,
+} from "../utils";
+import { getExpressionUpdateStatement, getRenderList } from "./util";
+import { isEvent } from "@velto/shared";
+
+export interface RenderOption {
+  rootPath: NodePath<any>;
+}
+
+export default class Template {
+  public rootPath: NodePath<any>;
+  private pathState: NodePathState;
+  private bodyStatement: Statement[] = [];
+  private mountStatement: Statement[] = [];
+  private updateStatement: Statement[] = [];
+  private destroyStatement: Statement[] = [];
+
+  constructor(options: RenderOption) {
+    const { rootPath } = options || {};
+    this.rootPath = rootPath;
+    this.pathState = rootPath.state as NodePathState;
+  }
+
+  public element(options: {
+    elementId: Identifier;
+    tag: string;
+    props: ObjectExpression;
+    target: Identifier;
+    anchor?: Identifier;
+  }) {
+    const {
+      tag,
+      elementId,
+      props,
+      target,
+      anchor,
+    } = options;
+
+    const properties = props.properties.filter(
+      (property) => {
+        if (isObjectProperty(property)) {
+          const { key = {}, value } = property;
+          if (isEvent((key as Identifier)?.name) && (isFunctionExpression(value) || isArrowFunctionExpression(value))) {
+            const eventName = this.rootPath.scope.generateUidIdentifier("handle");
+            this.bodyStatement.push(
+              variableDeclaration(
+                'const', 
+                [
+                  variableDeclarator(
+                    eventName, 
+                    value
+                  ),
+                ]
+              )
+            );
+            property.value = eventName;
+          }
+        }
+
+        return property;
+      }
+    );
+
+    this.bodyStatement.push(
+      getVariableDeclaration(
+        elementId,
+        this.pathState.helper.getHelperNameIdentifier(RuntimeHelper.element),
+        [stringLiteral(tag), props]
+      )
+    );
+
+    this.mountStatement.push(
+      getExpressionStatement(
+        memberExpression(elementId, mountIdentifier),
+        [target, anchor].filter(Boolean) as Identifier[]
+      )
+    );
+
+    if (properties.length) {
+      this.updateStatement.push(
+        getExpressionStatement(memberExpression(elementId, updateIdentifier), [
+          objectExpression(properties),
+        ])
+      );
+    }
+
+    this.destroyStatement.push(
+      getExpressionStatement(memberExpression(elementId, destroyIdentifier), [])
+    );
+  }
+
+  public text(options: {
+    str: StringLiteral;
+    target: Identifier;
+    anchor?: Identifier;
+  }): Identifier {
+    const { str, target, anchor } = options;
+    const id = this.rootPath.scope.generateUidIdentifier("text");
+
+    this.bodyStatement.push(
+      getVariableDeclaration(
+        id,
+        this.pathState.helper.getHelperNameIdentifier(RuntimeHelper.text),
+        [str]
+      )
+    );
+
+    this.mountStatement.push(
+      getExpressionStatement(
+        this.pathState.helper.getHelperNameIdentifier(RuntimeHelper.append),
+        [target, id, anchor].filter(Boolean) as Identifier[]
+      )
+    );
+
+    this.destroyStatement.push(
+      getExpressionStatement(
+        this.pathState.helper.getHelperNameIdentifier(RuntimeHelper.remove),
+        [id]
+      )
+    );
+
+    return id;
+  }
+
+  public component(options: {
+    tag: string;
+    props: ObjectExpression;
+    target: Identifier;
+    anchor?: Identifier;
+  }): Identifier {
+    const {
+      tag,
+      props,
+      target = targetIdentifier,
+      anchor,
+    } = options;
+    const id = this.rootPath.scope.generateUidIdentifier("_component");
+    this.bodyStatement.push(
+      getVariableDeclaration(
+        id,
+        this.pathState.helper.getHelperNameIdentifier(RuntimeHelper.component),
+        [identifier(tag), props]
+      )
+    );
+
+    this.mountStatement.push(
+      getExpressionStatement(memberExpression(id, mountIdentifier), [
+        target,
+        anchor,
+      ].filter(Boolean) as Identifier[])
+    );
+
+    this.destroyStatement.push(
+      getExpressionStatement(memberExpression(id, destroyIdentifier), [])
+    );
+
+    return id;
+  }
+
+  public expression(options: {
+    express: Expression;
+    target: Identifier;
+    anchor?: Identifier;
+    test?: Expression;
+  }): Identifier {
+    const {
+      express,
+      target = targetIdentifier,
+      anchor,
+      test,
+    } = options;
+    const expressId = this.rootPath.scope.generateUidIdentifier("express");
+    const conditionId = this.rootPath.scope.generateUidIdentifier("condition");
+    let renderListId: Identifier | undefined;
+    let id = expressId;
+
+    const renderListExpression = getRenderList(express, this.rootPath);
+    if (renderListExpression) {
+      renderListId = this.rootPath.scope.generateUidIdentifier("renderList");
+      this.bodyStatement.push(
+        variableDeclaration("const", [
+          variableDeclarator(renderListId, renderListExpression),
+        ])
+      );
+    }
+
+    this.bodyStatement.push(
+      getVariableDeclaration(
+        id,
+        this.pathState.helper.getHelperNameIdentifier(RuntimeHelper.expression),
+        [renderListId || express]
+      )
+    );
+
+    if (test) {
+      id = conditionId;
+      this.bodyStatement.push(
+        getVariableDeclaration(
+          id,
+          this.pathState.helper.getHelperNameIdentifier(
+            RuntimeHelper.condition
+          ),
+          [expressId, test]
+        )
+      );
+      this.updateStatement.push(
+        getExpressionUpdateStatement(id, test, express, renderListId)
+      );
+    } else {
+      this.updateStatement.push(
+        getExpressionUpdateStatement(id, undefined, express, renderListId)
+      );
+    }
+
+    this.mountStatement.push(
+      getExpressionStatement(
+        memberExpression(id, mountIdentifier),
+        [target, anchor].filter(Boolean) as Identifier[]
+      )
+    );
+
+    this.destroyStatement.push(
+      getExpressionStatement(memberExpression(id, destroyIdentifier), [])
+    );
+
+    return id;
+  }
+
+  private getTemplateExpression() {
+    return objectExpression([
+      objectMethod(
+        "method",
+        mountIdentifier,
+        [targetIdentifier, anchorIdentifier],
+        blockStatement(this.mountStatement)
+      ),
+      objectMethod(
+        "method",
+        updateIdentifier,
+        [],
+        blockStatement(this.updateStatement)
+      ),
+      objectMethod(
+        "method",
+        destroyIdentifier,
+        [],
+        blockStatement(this.destroyStatement)
+      ),
+    ]);
+  }
+
+  public generate(): CallExpression {
+    return callExpression(
+      this.rootPath.state.helper.getHelperNameIdentifier(
+        RuntimeHelper.markRender
+      ),
+      [
+        arrowFunctionExpression(
+          [],
+          blockStatement([
+            ...this.bodyStatement,
+            returnStatement(this.getTemplateExpression()),
+          ])
+        ),
+      ]
+    );
+  }
+
+  public replace() {
+    // @ts-ignore
+    this.rootPath.replaceWith(this.generate());
+  }
+}