feat: support traverse native dom (#132)

* Create sync.yml * Update sync.yml * feat: support nativeDom * ci: remove sync.yml * fix: update test case * fix: update isValidComponentName logic
NetEase · Apr 15, 2024 · 1c1ad9e · 1c1ad9e
1 parent 7768370
commit 1c1ad9e
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 28 deletions.
diff --git a/apps/playground/src/helpers/mock-files.ts b/apps/playground/src/helpers/mock-files.ts
@@ -173,6 +173,60 @@ class App extends React.Component {
             <FormilyFormItem name="select1" component="Select" label="表单项" />
           </FormilyForm>
         </Section>
+        <Section title="原生 DOM" tid="section3">
+          <div
+            style={{
+              border: "1px solid #ccc",
+              borderRadius: "5px",
+              backgroundColor: "#f4f4f4",
+            }}
+          >
+            <form onSubmit={tango.stores.app.submitForm} style={{
+              padding: "10px",
+            }}>
+              <div>
+                <label>Username:</label>
+                <input
+                  type="text"
+                  id="username"
+                  name="username"
+                  style={{ margin: "5px" }}
+                />
+              </div>
+              <div>
+                <label>Password:</label>
+                <input
+                  type="password"
+                  id="password"
+                  name="password"
+                  style={{ margin: "5px" }}
+                />
+              </div>
+              <div>
+                <label>Role:</label>
+                <select id="role" name="role" style={{ margin: "5px" }}>
+                  <option value="admin">Admin</option>
+                  <option value="user">User</option>
+                </select>
+              </div>
+              <div>
+                <button
+                  type="submit"
+                  style={{
+                    marginTop: '5px',
+                    padding: "3px 10px",
+                    backgroundColor: "#007bff",
+                    color: "#fff",
+                    border: "none",
+                    borderRadius: "5px",
+                  }}
+                >
+                  Submit
+                </button>
+              </div>
+            </form>
+          </div>
+        </Section>
       </Page>
     );
   }
@@ -227,38 +281,21 @@ const storeApp = `
 import { defineStore } from '@music163/tango-boot';
 
 export default defineStore({
-
   title: 'Page Title',
 
   array: [1, 2, 3],
 
   test: function() {
     console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
-    console.log('test');
+  },
+
+  submitForm: function(event) {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    const username = formData.get("username");
+    const password = formData.get("password");
+    const role = formData.get("role");
+    console.log("Submitted Data:", { username, password, role });
   }
 }, 'app');
 `;

diff --git a/apps/playground/src/helpers/prototypes.ts b/apps/playground/src/helpers/prototypes.ts
@@ -85,8 +85,82 @@ basePrototypes['Section'].siblingNames = [
   'Section',
 ];
 
+export const nativeDomPrototypes = () => {
+  const doms = [
+    'div',
+    'span',
+    'h1',
+    'h2',
+    'p',
+    'a',
+    'img',
+    'ul',
+    'ol',
+    'li',
+    'input',
+    'button',
+    'form',
+    'table',
+    'tr',
+    'td',
+    'header',
+    'footer',
+    'nav',
+    'section',
+    'article',
+    'aside',
+    'main',
+    'video',
+    'audio',
+    'label',
+    'select',
+    'option',
+    'textarea',
+    'iframe',
+  ];
+  const componentPrototypes: Dict<IComponentPrototype> = doms.reduce(
+    (acc: Dict<IComponentPrototype>, tag) => {
+      acc[tag] = {
+        name: tag,
+        title: tag,
+        hasChildren: true,
+        package: '',
+        type: 'element',
+        props: [
+          {
+            name: 'style',
+            title: '样式',
+            group: 'style',
+            setter: 'expressionSetter',
+          },
+          {
+            name: 'className',
+            title: '类名',
+            setter: 'textSetter',
+          },
+          {
+            name: 'id',
+            title: 'ID',
+            setter: 'textSetter',
+          },
+          {
+            name: 'onClick',
+            title: '点击事件',
+            setter: 'actionSetter',
+            group: 'event',
+          },
+        ],
+      };
+      return acc;
+    },
+    {},
+  );
+  return componentPrototypes;
+};
+
 // iconfont: https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2891794
 const prototypes: Dict<IComponentPrototype> = {
+  ...nativeDomPrototypes(),
   ...(basePrototypes as any),
   SnippetSuccessResult,
   Snippet2ColumnLayout,

diff --git a/packages/core/src/helpers/string.ts b/packages/core/src/helpers/string.ts
@@ -75,15 +75,20 @@ export function inferFileType(filename: string): FileType {
 /**
  * 判断组件名是否合法
  * @example Button -> valid
- * @example div -> invalid
+ * @example isStrict ? div -> invalid : div -> valid
  * @param name
+ * @param isStrict 是否严格模式（严格模式不匹配原生标签）
  * @returns
  */
-export function isValidComponentName(name: string) {
+export function isValidComponentName(name: string, isStrict = false) {
   if (!name) {
     return false;
   }
 
+  if (!isStrict) {
+    return true;
+  }
+
   const firstChar = name.charAt(0);
   return firstChar === firstChar.toUpperCase();
 }

diff --git a/packages/core/tests/helpers.test.ts b/packages/core/tests/helpers.test.ts
@@ -161,6 +161,10 @@ describe('string helpers', () => {
   it('isValidComponentName', () => {
     expect(isValidComponentName('Button')).toBeTruthy();
     expect(isValidComponentName('Button.Group')).toBeTruthy();
+    expect(isValidComponentName('div')).toBeTruthy();
+    expect(isValidComponentName('')).toBeFalsy();
+    expect(isValidComponentName(null)).toBeFalsy();
+    expect(isValidComponentName(undefined)).toBeFalsy();
   });
 
   it('inferFileType', () => {