Skip to content

Commit 1c1ad9e

Browse files
BoBooooooBoBoooooo
authored
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
1 parent 7768370 commit 1c1ad9e

File tree

4 files changed

+148
-28
lines changed

4 files changed

+148
-28
lines changed

‎apps/playground/src/helpers/mock-files.ts

Lines changed: 63 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,60 @@ class App extends React.Component {
173173
<FormilyFormItem name="select1" component="Select" label="表单项" />
174174
</FormilyForm>
175175
</Section>
176+
<Section title="原生 DOM" tid="section3">
177+
<div
178+
style={{
179+
border: "1px solid #ccc",
180+
borderRadius: "5px",
181+
backgroundColor: "#f4f4f4",
182+
}}
183+
>
184+
<form onSubmit={tango.stores.app.submitForm} style={{
185+
padding: "10px",
186+
}}>
187+
<div>
188+
<label>Username:</label>
189+
<input
190+
type="text"
191+
id="username"
192+
name="username"
193+
style={{ margin: "5px" }}
194+
/>
195+
</div>
196+
<div>
197+
<label>Password:</label>
198+
<input
199+
type="password"
200+
id="password"
201+
name="password"
202+
style={{ margin: "5px" }}
203+
/>
204+
</div>
205+
<div>
206+
<label>Role:</label>
207+
<select id="role" name="role" style={{ margin: "5px" }}>
208+
<option value="admin">Admin</option>
209+
<option value="user">User</option>
210+
</select>
211+
</div>
212+
<div>
213+
<button
214+
type="submit"
215+
style={{
216+
marginTop: '5px',
217+
padding: "3px 10px",
218+
backgroundColor: "#007bff",
219+
color: "#fff",
220+
border: "none",
221+
borderRadius: "5px",
222+
}}
223+
>
224+
Submit
225+
</button>
226+
</div>
227+
</form>
228+
</div>
229+
</Section>
176230
</Page>
177231
);
178232
}
@@ -227,38 +281,21 @@ const storeApp = `
227281
import { defineStore } from '@music163/tango-boot';
228282
229283
export default defineStore({
230-
231284
title: 'Page Title',
232285
233286
array: [1, 2, 3],
234287
235288
test: function() {
236289
console.log('test');
237-
console.log('test');
238-
console.log('test');
239-
console.log('test');
240-
console.log('test');
241-
console.log('test');
242-
console.log('test');
243-
console.log('test');
244-
console.log('test');
245-
console.log('test');
246-
console.log('test');
247-
console.log('test');
248-
console.log('test');
249-
console.log('test');
250-
console.log('test');
251-
console.log('test');
252-
console.log('test');
253-
console.log('test');
254-
console.log('test');
255-
console.log('test');
256-
console.log('test');
257-
console.log('test');
258-
console.log('test');
259-
console.log('test');
260-
console.log('test');
261-
console.log('test');
290+
},
291+
292+
submitForm: function(event) {
293+
event.preventDefault();
294+
const formData = new FormData(event.target);
295+
const username = formData.get("username");
296+
const password = formData.get("password");
297+
const role = formData.get("role");
298+
console.log("Submitted Data:", { username, password, role });
262299
}
263300
}, 'app');
264301
`;

‎apps/playground/src/helpers/prototypes.ts

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,82 @@ basePrototypes['Section'].siblingNames = [
8585
'Section',
8686
];
8787

88+
export const nativeDomPrototypes = () => {
89+
const doms = [
90+
'div',
91+
'span',
92+
'h1',
93+
'h2',
94+
'p',
95+
'a',
96+
'img',
97+
'ul',
98+
'ol',
99+
'li',
100+
'input',
101+
'button',
102+
'form',
103+
'table',
104+
'tr',
105+
'td',
106+
'header',
107+
'footer',
108+
'nav',
109+
'section',
110+
'article',
111+
'aside',
112+
'main',
113+
'video',
114+
'audio',
115+
'label',
116+
'select',
117+
'option',
118+
'textarea',
119+
'iframe',
120+
];
121+
const componentPrototypes: Dict<IComponentPrototype> = doms.reduce(
122+
(acc: Dict<IComponentPrototype>, tag) => {
123+
acc[tag] = {
124+
name: tag,
125+
title: tag,
126+
hasChildren: true,
127+
package: '',
128+
type: 'element',
129+
props: [
130+
{
131+
name: 'style',
132+
title: '样式',
133+
group: 'style',
134+
setter: 'expressionSetter',
135+
},
136+
{
137+
name: 'className',
138+
title: '类名',
139+
setter: 'textSetter',
140+
},
141+
{
142+
name: 'id',
143+
title: 'ID',
144+
setter: 'textSetter',
145+
},
146+
{
147+
name: 'onClick',
148+
title: '点击事件',
149+
setter: 'actionSetter',
150+
group: 'event',
151+
},
152+
],
153+
};
154+
return acc;
155+
},
156+
{},
157+
);
158+
return componentPrototypes;
159+
};
160+
88161
// iconfont: https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2891794
89162
const prototypes: Dict<IComponentPrototype> = {
163+
...nativeDomPrototypes(),
90164
...(basePrototypes as any),
91165
SnippetSuccessResult,
92166
Snippet2ColumnLayout,

‎packages/core/src/helpers/string.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,20 @@ export function inferFileType(filename: string): FileType {
7575
/**
7676
* 判断组件名是否合法
7777
* @example Button -> valid
78-
* @example div -> invalid
78+
* @example isStrict ? div -> invalid : div -> valid
7979
* @param name
80+
* @param isStrict 是否严格模式（严格模式不匹配原生标签）
8081
* @returns
8182
*/
82-
export function isValidComponentName(name: string) {
83+
export function isValidComponentName(name: string, isStrict = false) {
8384
if (!name) {
8485
return false;
8586
}
8687

88+
if (!isStrict) {
89+
return true;
90+
}
91+
8792
const firstChar = name.charAt(0);
8893
return firstChar === firstChar.toUpperCase();
8994
}

‎packages/core/tests/helpers.test.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,10 @@ describe('string helpers', () => {
161161
it('isValidComponentName', () => {
162162
expect(isValidComponentName('Button')).toBeTruthy();
163163
expect(isValidComponentName('Button.Group')).toBeTruthy();
164+
expect(isValidComponentName('div')).toBeTruthy();
165+
expect(isValidComponentName('')).toBeFalsy();
166+
expect(isValidComponentName(null)).toBeFalsy();
167+
expect(isValidComponentName(undefined)).toBeFalsy();
164168
});
165169

166170
it('inferFileType', () => {

0 commit comments

Comments
 (0)