release: 0.0.1-alpha.6

packages/babel-plugin-jsx/src/test/index.tsx

@@ -0,0 +1,57 @@
+// @ts-expect-error
+import { Dialog, Fragment, Template } from 'one-jsx-loader'
+// @ts-expect-error
+import { Button, Form, FormItem, Icon, Input, Modal } from './components'
+
+
+function useForm() {
+  const visible1 = false;
+  const visible2 = false;
+  const handleConfirm = () => {}
+  const handleCancel = () => {}
+  return <Fragment title="aaaa" tips="bbbb">
+    <Form></Form>
+    <Dialog visible={visible1}>
+      <Template slot="buttons">
+        <Button type="primary" text="确定" onClick={handleConfirm} />
+        <Button type="primary" text="取消" onClick={handleCancel} />
+      </Template>
+    </Dialog>
+    <Dialog visible={visible2} />
+  </Fragment>
+}
+
+
+export function useFn() {
+  const a: number = 1;
+  const b: any = 3;
+  const c = a + b;
+  const d = 12 as any;
+  const e = c + d;
+  console.log(e);
+  const rules = {};
+  const visible = false;
+  const onClose = () => {};
+  const handleFocus = () => {};
+  const handleBlur = () => {};
+  return <Form ref="formRef" use={useForm} rules={rules}>
+    <Modal visible={visible} onClose={onClose} resolve={(row: any) => {
+      console.log(row)
+    }}>
+    </Modal>
+    <Input />
+    <FormItem label="name" prop="name">
+      <Input value="xxx" onFocus={handleFocus} onBlur={handleBlur} />
+    </FormItem>
+    <FormItem label="age" prop="age">
+      <Input value="xxx">
+        <Template slot="prefix" width={100}>
+          <Icon class="search" />
+        </Template>
+        <Template slot="suffix">
+          <Icon class="calendar" />
+        </Template>
+      </Input>
+    </FormItem>
+  </Form>
+}

packages/babel-plugin-jsx/src/transform-vue-jsx.ts

@@ -172,10 +172,14 @@ const genProps = (props: t.ObjectExpression) => {
   return result;
 };
 
-const genComponent = (component: t.Identifier) => {
+const genComponent = (component: t.Identifier | t.StringLiteral) => {
   return t.objectProperty(
     t.identifier('component'), 
-    component.name.indexOf(":") > -1 ? t.stringLiteral(component.name) : component
+    t.isStringLiteral(component) 
+      ? component
+      : component.name.indexOf(":") > -1 
+        ? t.stringLiteral(component.name) 
+        : component
   );
 };
 
@@ -220,6 +224,17 @@ const isNamedSlot = (slot: t.Expression) => {
   return '';
 };
 
+const genButtonsSlot = (slot: t.ObjectExpression) => {
+  const targetSlots = (slot as t.ObjectExpression).properties.find(v => {
+    return t.isObjectProperty(v) && (v.key as t.Identifier).name === 'slots';
+  })! as t.ObjectProperty;
+  const targetDefault = (targetSlots.value as t.ObjectExpression).properties.find(v => {
+    return t.isObjectProperty(v) && (v.key as t.Identifier).name === 'default';
+  })!
+  const value = (targetDefault as t.ObjectProperty).value;
+  return t.isArrayExpression(value) ? value : t.arrayExpression([value as t.ObjectExpression]);
+}
+
 const genSlots = (slots: t.Expression[]) => {
   const defaultSlots = [] as t.Expression[];
   const namedSlots = {} as any;
@@ -228,11 +243,15 @@ const genSlots = (slots: t.Expression[]) => {
     const properties = (slot as t.ObjectExpression).properties;
     const slotName = isNamedSlot(slot);
     if (slotName) {
-      namedSlots[slotName] = slot;
+      // 对于 buttons 的具名插槽特殊处理
+      if (slotName === 'buttons') {
+        namedSlots[slotName] = genButtonsSlot(slot as t.ObjectExpression);
+      } else {
+        namedSlots[slotName] = slot;
+      }
     } else if (properties) {
       const componentPropertyIdx = properties.findIndex((item) => {
         if (t.isObjectProperty(item)) {
-          console.log(item);
           return (
             (item.key as t.Identifier).name === 'component' &&
             (
@@ -270,9 +289,7 @@ const genSlots = (slots: t.Expression[]) => {
         dialogSlots.length &&
           t.objectProperty(
             t.identifier('dialog'),
-            dialogSlots.length <= 1
-              ? dialogSlots?.[0] || t.objectExpression([])
-              : t.arrayExpression(dialogSlots)
+            t.arrayExpression(dialogSlots)
           ),
       ].filter(Boolean) as t.ObjectProperty[]
     )

packages/jsx-explorer/src/template.ts

@@ -1,18 +1,62 @@
-export const templateStr = `export function useFn() {
+export const templateStr = `// @ts-expect-error
+import { Template, Fragment, Dialog } from 'one-jsx-loader'
+// @ts-expect-error
+import { Form, FormItem, Grid, Column, Icon, Tag, Button, Input, Select } from './components'
+
+function useHeader() {
+  return <Fragment title="xxx" tips="zzz" />
+}
+
+function useForm() {
   return <Form ref="formRef" use={useForm} rules={rules}>
     <FormItem label="name" prop="name">
       <Input value="xxx" onFocus={handleFocus} onBlur={handleBlur} />
     </FormItem>
     <FormItem label="age" prop="age">
       <Input value="xxx">
-        <template slot="prefix">
+        <Template slot="prefix">
           <Icon class="search" />
-        </template>
-        <template slot="suffix">
+        </Template>
+        <Template slot="suffix">
           <Icon class="calendar" />
-        </template>
+        </Template>
       </Input>
     </FormItem>
+    <Dialog visible={visible}>
+      <Template slot="buttons">
+        <Button type="primary" text="Confirm" onClick={handleConfirm} />
+        <Button type="primary" text="Cancel" onClick={handleCancel} />
+      </Template>
+    </Dialog>
   </Form>
 }
+
+function useGrid() {
+  const handleFocus = () => {}
+  const handleChange = () => {}
+  return <Grid>
+    <Column field="name" title="Name" width={100} showOverflow />
+    <Column field="status" title="Status" width={120}>
+      <Tag resolve={({ row }) => {
+        return {
+          props: {
+            light: 'light',
+            type: 'error',
+            value: row.status
+          }
+        }
+      }} />
+    </Column>
+    <Column field="age" title="Age" width={80}>
+      <Input />
+      <Template slot="default" tips="xxx">
+        <Input />
+      </Template>
+      <Template slot="header" tips="xxx" />
+      <Template slot="edit">
+        <Select clearable placeholder="please select..." onFocus={handleFocus} onChange={handleChange} />
+      </Template>
+    </Column>
+  </Grid>
+}
 `;