create-velto 1.0.1 → 1.0.2

package/templates/velto/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());
+  }
+}

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

@@ -0,0 +1,63 @@
+import { Node, CallExpression, Expression, Identifier, MemberExpression, ReturnStatement, isArrowFunctionExpression, isBlockStatement, isCallExpression, isFunctionExpression, isJSXElement, isJSXFragment, isMemberExpression, isReturnStatement, memberExpression, variableDeclarator, callExpression, variableDeclaration } from "@babel/types";
+import { getExpressionStatement } from "../utils";
+import { updateIdentifier } from "../constants";
+import { RuntimeHelper } from "../helper";
+import { NodePath } from "@babel/traverse";
+
+export function getExpressionUpdateStatement(
+  id: Identifier,
+  test: Expression | undefined,
+  express: Expression,
+  renderListId: Identifier | undefined
+) {
+  const updateArgs = test
+    ? renderListId
+      ? [test, ((express as CallExpression).callee as MemberExpression).object]
+      : [test, express]
+    : renderListId
+      ? [((express as CallExpression).callee as MemberExpression).object]
+      : [express];
+
+  return getExpressionStatement(
+    memberExpression(id, updateIdentifier),
+    updateArgs
+  );
+}
+
+export function getRenderList(express: Node, rootPath: NodePath) {
+  if (!isCallExpression(express)) return;
+  const callee = express.callee;
+  const [argument] = express.arguments;
+
+  if (
+    isMemberExpression(callee) &&
+    (callee.property as Identifier)?.name === "map" &&
+    (isArrowFunctionExpression(argument) || isFunctionExpression(argument))
+  ) {
+    const body = argument.body || {};
+    let isJSX = isJSXElement(body) || isJSXFragment(body);
+
+    if (isBlockStatement(body)) {
+      const returnStatement = body.body.find((node) =>
+        isReturnStatement(node)
+      );
+      const returnArgument = (returnStatement as ReturnStatement)?.argument;
+      isJSX = isJSXElement(returnArgument) || isJSXFragment(returnArgument);
+    }
+
+    if (isJSX) {
+      const [
+        element = rootPath.scope.generateUidIdentifier("element"),
+        index = rootPath.scope.generateUidIdentifier("index"),
+        array = rootPath.scope.generateUidIdentifier("array"),
+      ] = argument.params;
+      argument.params = [element, index, array];
+      return callExpression(
+        rootPath.state.helper.getHelperNameIdentifier(
+          RuntimeHelper.renderList
+        ),
+        [callee.object, argument]
+      );
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export * from './jsx/transformJSX';

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

@@ -0,0 +1,61 @@
+import { JSXText, stringLiteral } from '@babel/types';
+import transformJSXElement from './transformJSXElement';
+import { transformJSXExpression } from './transformJSXExpression';
+import { transformJSXLogicalExpression } from './transformJSXLogicalExpression';
+import { transformJSXConditionalExpression } from './transformJSXConditionalExpression';
+import { TransformJSXOptions } from '../../types';
+import { getParentId } from '../parentId';
+
+export function transformJSX({ path, template, root }: TransformJSXOptions) {
+
+  // JSXElement
+  if (path.isJSXElement()) {
+    transformJSXElement({ path, template, root });
+
+    // JSXFragment
+  } else if (path.isJSXFragment()) {
+    path.get('children').forEach(path => transformJSX({ path, template, root }));
+
+    // JSXExpressionContainer
+  } else if (path.isJSXExpressionContainer()) {
+    const expression = path.get('expression');
+
+     // JSXElement
+     if (expression.isJSXElement()) {
+      transformJSXElement({ path: expression, template, root });
+      
+      // JSXFragment
+    } else if (expression.isJSXFragment()) {
+      expression.get('children').forEach(path => transformJSX({ path, template, root }));
+
+      // LogicalExpression
+    } else if (expression.isLogicalExpression()) {
+      transformJSXLogicalExpression({ path: expression, template });
+
+      // ConditionalExpression
+    } else if (expression.isConditionalExpression()) {
+      transformJSXConditionalExpression({ path: expression, template });
+
+
+      // ignore JSXEmptyExpression
+    } else if (!expression.isJSXEmptyExpression()) {
+      transformJSXExpression({ path, template });
+    }
+    
+    // JSXSpreadChild
+  }  else if (path.isJSXSpreadChild()) {
+    transformJSXExpression({ path, template });
+
+    // JSXText
+  } else {
+    const str = (path.node as JSXText).value;
+    // 过滤 "\n      ..." 字符
+    if (!/^\n\s+$/gi.test(str)) {
+      const parentId = getParentId(path);
+      template.text({
+        target: parentId,
+        str: stringLiteral(str),
+      });
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import {
+  JSXElement,
+  JSXExpressionContainer,
+  JSXFragment,
+  JSXSpreadChild,
+  JSXText,
+} from '@babel/types';
+import { transformJSX } from './transformJSX';
+import { TransformJSXChildrenOptions } from '../../types';
+
+export function transformJSXChildren(
+  { path, template }: TransformJSXChildrenOptions<JSXElement | JSXExpressionContainer | JSXFragment | JSXSpreadChild | JSXText>
+){
+  path.forEach((children) => {
+    transformJSX({ path: children, template });
+  });
+}

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

@@ -0,0 +1,89 @@
+import {
+  JSXSpreadAttribute,
+  objectProperty,
+  ObjectProperty,
+  identifier,
+  Expression,
+  SpreadElement,
+  spreadElement,
+  objectExpression,
+  booleanLiteral,
+} from '@babel/types';
+import { transformJSX } from './transformJSX';
+import Template from '../../template';
+import { TransformJSXChildrenOptions } from '../../types';
+
+export function transformJSXComponentProps({ path, template }: TransformJSXChildrenOptions) {
+  const properties: (ObjectProperty | SpreadElement)[] = [];
+
+  path.forEach((attribute) => {
+    // JSXAttribute
+    if (attribute.isJSXAttribute()) {
+      const nameLiteral = attribute.get('name').getSource();
+      const value = attribute.get('value');
+
+      if (
+        value.isJSXElement() // JSXElement <div child=<div></div>></div>
+        || value.isJSXFragment() // JSXFragment <div child=<></>></div>
+      ) {
+        const subRender = new Template({
+          rootPath: template.rootPath,
+        });
+        transformJSX({ path: value, template: subRender, root: true });
+        properties.push(objectProperty(
+          identifier(nameLiteral),
+          subRender.generate(),
+        ));
+
+        // JSXExpressionContainer
+        // {expression}
+      } else if (value.isJSXExpressionContainer()) {
+        const expression = value.get('expression');
+
+        if (
+          expression.isJSXElement() // JSXElement <div child={<div></div>}></div>
+          || expression.isJSXFragment() // JSXFragment <div child={<></>}></div>
+        ) {
+          const subRender = new Template({
+            rootPath: template.rootPath,
+          });
+          transformJSX({ path: expression, template: subRender, root: true });
+          properties.push(objectProperty(
+            identifier(nameLiteral),
+            subRender.generate(),
+          ));
+
+        } else {
+          properties.push(
+            objectProperty(
+              identifier(nameLiteral),
+              expression.node as Expression,
+            )
+          );
+        }
+        
+      } else if (!value.type) {
+        properties.push(
+          objectProperty(
+            identifier(nameLiteral),
+            booleanLiteral(true),
+          )
+        );
+      } else if (value) {
+        properties.push(
+          objectProperty(
+            identifier(nameLiteral),
+            value.node as Expression,
+          )
+        );
+      }
+
+      // JSXSpreadAttribute
+    } else {
+      properties.push(spreadElement((attribute.node as JSXSpreadAttribute).argument));
+    }
+  });
+
+
+  return objectExpression(properties);
+}

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

@@ -0,0 +1,26 @@
+import { NodePath } from '@babel/core';
+import { ConditionalExpression, unaryExpression, Expression, binaryExpression } from '@babel/types';
+import { transformJSXConsequentExpression } from './transformJSXConsequentExpression';
+import Template from '../../template';
+
+export function transformJSXConditionalExpression({ path, template, test }: {
+  path: NodePath<ConditionalExpression>;
+  template: Template;
+  test?: Expression;
+}) {
+  const subTest = path.get('test');
+  const consequent = path.get('consequent');
+  const alternate = path.get('alternate');
+
+  transformJSXConsequentExpression({
+    test: test ? binaryExpression('&', test, subTest.node) : subTest.node, 
+    consequent, 
+    template,
+  });
+
+  transformJSXConsequentExpression({
+    test: test ? binaryExpression('&', test, unaryExpression('!', subTest.node)) : unaryExpression('!', subTest.node), 
+    consequent: alternate, 
+    template,
+  });
+}

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

@@ -0,0 +1,57 @@
+import { NodePath } from '@babel/core';
+import { Expression, Identifier, isNullLiteral, isIdentifier } from '@babel/types';
+import  { transformJSX } from './transformJSX';
+import Template from '../../template';
+import { getParentId } from '../parentId';
+import { transformJSXConditionalExpression } from './transformJSXConditionalExpression';
+import { transformJSXLogicalExpression } from './transformJSXLogicalExpression';
+
+export function transformJSXConsequentExpression(options: {
+  test: Expression;
+  consequent: NodePath<Expression>;
+  template: Template;
+}) {
+  const { test, consequent, template } = options;
+  const target = getParentId(consequent);
+
+  if (consequent.isJSXElement() || consequent.isJSXFragment()) {
+    const subRender = new Template({
+      rootPath: template.rootPath,
+    });
+    
+    transformJSX({ path: consequent, template: subRender, root: true });
+    template.expression({
+      express: subRender.generate(),
+      target,
+      test,
+    });
+
+    // ConditionalExpression
+    // expression ? <div></div> : null
+  } else if (consequent.isConditionalExpression()) {
+    transformJSXConditionalExpression({ 
+      path: consequent,
+      template,
+      test,
+    });
+
+    // LogicalExpression
+    // expression && <div></div>
+  } else if (consequent.isLogicalExpression()) {
+    transformJSXLogicalExpression({ 
+      path: consequent,
+      template,
+      test,
+    });
+
+  } else if (
+    !isNullLiteral(consequent.node) && 
+    !(isIdentifier(consequent.node) && consequent.node.name === 'undefined')
+  ) {
+    template.expression({
+      express: consequent.node,
+      target,
+      test,
+    });
+  }
+}