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/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-ts/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-ts/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-ts/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-ts/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-ts/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-ts/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,
+    });
+  }
+}

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

@@ -0,0 +1,103 @@
+import { JSXElement, objectProperty, identifier, JSXAttribute, JSXSpreadAttribute, JSXExpressionContainer, JSXFragment, JSXSpreadChild, JSXText, memberExpression } from "@babel/types";
+import { isNativeTag } from "@velto/shared";
+import { getTagLiteral } from "../../utils";
+import { transformJSXChildren } from "./transformJSXChildren";
+import { transformJSX } from "./transformJSX";
+import { transformJSXComponentProps } from "./transformJSXComponentProps";
+import { anchorIdentifier, targetIdentifier } from "../../constants";
+import Template from "../../template";
+import { RuntimeHelper } from "../../helper";
+import { TransformJSXOptions } from "../../types";
+import { setParentId, getParentId } from "../parentId";
+import { NodePath } from "@babel/traverse";
+
+export default function transformJSXElement({
+  path,
+  template,
+  root = false,
+}: TransformJSXOptions<JSXElement>) {
+  const openingElementPath = path.get("openingElement");
+  // @ts-ignore
+  const attributesPath = openingElementPath.get("attributes");
+  const childrenPath = path.get("children");
+  const tag = getTagLiteral(openingElementPath);
+
+  if (isNativeTag(tag)) {
+    handleNativeTag({ path, template, tag, root });
+  } else {
+    handleComponentTag({ path, template, tag, root, attributesPath, childrenPath });
+  }
+}
+
+function handleNativeTag({
+  path,
+  template,
+  tag,
+  root,
+}: {
+  path: NodePath<JSXElement>;
+  template: Template;
+  tag: string;
+  root: boolean;
+}) {
+  const parentId = getParentId(path);
+  const elementId = template.rootPath.scope.generateUidIdentifier("_element");
+  setParentId(path, memberExpression(
+    elementId,
+    identifier('el'),
+  ));
+  const props = transformJSXComponentProps({
+    // @ts-ignore
+    path: path.get("openingElement").get("attributes"),
+    template,
+  });
+
+  template.element({
+    elementId,
+    props,
+    tag,
+    target: root ? targetIdentifier : parentId,
+    anchor: root ? anchorIdentifier : undefined,
+  });
+
+  transformJSXChildren({ path: path.get("children"), template });
+}
+
+function handleComponentTag({
+  path,
+  template,
+  tag,
+  root,
+  attributesPath,
+  childrenPath,
+}: {
+  path: NodePath<JSXElement>;
+  template: Template;
+  tag: string;
+  root: boolean;
+  attributesPath: NodePath<JSXAttribute | JSXSpreadAttribute>[];
+  childrenPath: NodePath<JSXElement | JSXExpressionContainer | JSXFragment | JSXSpreadChild | JSXText>[];
+}) {
+  const parentId = getParentId(path);
+  const props = transformJSXComponentProps({ path: attributesPath, template });
+
+  if (childrenPath.length) {
+    const subRender = new Template({
+      rootPath: template.rootPath,
+    });
+    childrenPath.forEach((childPath) =>
+      transformJSX({ path: childPath, template: subRender, root: true })
+    );
+
+    props.properties.push(
+      objectProperty(identifier("children"), subRender.generate())
+    );
+  }
+
+  template.component({
+    tag,
+    props,
+    target: root ? targetIdentifier : parentId,
+    anchor: root ? anchorIdentifier : undefined,
+  });
+}

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

@@ -0,0 +1,15 @@
+import { JSXExpressionContainer, JSXSpreadChild, Expression } from '@babel/types';
+import { TransformJSXOptions } from '../../types';
+import { getParentId } from '../parentId';
+
+export function transformJSXExpression({
+  path, template,
+}: TransformJSXOptions<JSXExpressionContainer | JSXSpreadChild>) {
+  const expression = path.get('expression');
+  const parentId = getParentId(expression);
+
+  template.expression({
+    target: parentId,
+    express: expression.node as Expression,
+  });
+}

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

@@ -0,0 +1,19 @@
+import { NodePath } from '@babel/core';
+import { LogicalExpression, Expression, binaryExpression } from '@babel/types';
+import { transformJSXConsequentExpression } from './transformJSXConsequentExpression';
+import Template from '../../template';
+
+export function transformJSXLogicalExpression({ path, template, test }: {
+  path: NodePath<LogicalExpression>;
+  template: Template;
+  test?: Expression;
+}) {
+  const left = path.get('left');
+  const right = path.get('right');
+
+  transformJSXConsequentExpression({
+    test: test ? 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/src/transform/parentId.ts

@@ -0,0 +1,22 @@
+import { NodePath } from '@babel/core';
+import { Identifier, MemberExpression } from '@babel/types';
+import { targetIdentifier } from '../constants';
+import { NodePathData } from '../types';
+
+export function getParentId(path?: NodePath<any>) {
+  let parent: NodePath | undefined | null = path?.parentPath;
+  while (parent) {
+    const data = parent.data as unknown as NodePathData | undefined;
+    const parentId = data?.parentId;
+    if (parentId) {
+      return parentId;
+    }
+    parent = parent.parentPath;
+  }
+  return targetIdentifier;
+}
+
+export function setParentId(path: NodePath<any>, id: Identifier | MemberExpression = targetIdentifier) {
+  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/src/types/global.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/src/types/index.ts

@@ -0,0 +1,24 @@
+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/src/utils/index.ts

@@ -0,0 +1,40 @@
+import {
+  JSXOpeningElement,
+  Expression,
+  expressionStatement,
+  callExpression,
+  Identifier,
+  variableDeclaration,
+  variableDeclarator,
+} from "@babel/types";
+import { NodePath } from "@babel/traverse";
+
+export function getTagLiteral(path: NodePath<JSXOpeningElement>) {
+  const namePath = path.get("name");
+  return namePath.getSource();
+}
+
+export function getExpressionStatement(
+  callee: Expression,
+  argumentList: Expression[] = [],
+) {
+  return expressionStatement(callExpression(callee, argumentList));
+}
+
+export function getVariableDeclaration(
+  id: Identifier,
+  callee: Expression,
+  argumentList: Expression[] = [],
+  kind: "var" | "let" | "const" = "const",
+) {
+
+  return variableDeclaration(
+    kind, 
+    [
+      variableDeclarator(
+        id, 
+        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/src/utils/stringCurrying.ts

@@ -0,0 +1,14 @@
+// input a,b,c
+// a,b,c => {a: true, b: true, c: true}
+// return val => map[val]
+export function stringCurrying(
+  str: string,
+  lowerCase?: boolean
+): (key: string) => boolean {
+  const map: Record<string, boolean> = Object.create(null)
+  const list: Array<string> = 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/src/visitor/index.ts

@@ -0,0 +1,9 @@
+import JSXElement from './jsxElement';
+import JSXFragment from './jsxFragment';
+import Program from './program';
+
+export default {
+  JSXElement,
+  JSXFragment,
+  Program,
+}

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

@@ -0,0 +1,12 @@
+import { NodePath } from "@babel/traverse";
+import { JSXElement } from "@babel/types";
+import { transformJSX } from "../transform";
+import Template from "../template";
+
+export default function JSXElement(path: NodePath<JSXElement>) {
+  const template = new Template({
+    rootPath: path,
+  });
+  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/src/visitor/jsxFragment.ts

@@ -0,0 +1,12 @@
+import { NodePath,  } from '@babel/traverse';
+import { JSXFragment } from '@babel/types';
+import Template from '../template';
+import { transformJSX } from '../transform';
+
+export default function JSXFragment(path: NodePath<JSXFragment>) {
+  const template = new Template({
+    rootPath: path,
+  });
+  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/src/visitor/program.ts

@@ -0,0 +1,17 @@
+import { NodePath } from '@babel/traverse';
+import { Program } from '@babel/types';
+import { Helper } from '../helper';
+import { NodePathState } from '../types';
+
+export default {
+  enter(path: NodePath<Program>) {
+    path.state = {} as NodePathState;
+    path.state.helper = new Helper({ rootPath: path });
+  },
+  exit(path: NodePath<Program>) {
+    const state = path.state as NodePathState;
+    if (state.helper.hasSpecifier) {
+      path.node.body.unshift(state.helper.helperImportDeclaration);
+    }
+  }
+}