Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support traverse native dom #132

Merged
merged 6 commits into from
Apr 15, 2024
Merged

feat: support traverse native dom #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
05fcc76
Create sync.yml
BoBoooooo Apr 11, 2024
3d3f638
Update sync.yml
BoBoooooo Apr 11, 2024
236966d
feat: support nativeDom
BoBoooooo Apr 12, 2024
014e6e5
ci: remove sync.yml
BoBoooooo Apr 12, 2024
a0113d2
fix: update test case
BoBoooooo Apr 12, 2024
c13578a
fix: update isValidComponentName logic
BoBoooooo Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 63 additions & 26 deletions apps/playground/src/helpers/mock-files.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down Expand Up @@ -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');
`;
Expand Down
74 changes: 74 additions & 0 deletions apps/playground/src/helpers/prototypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
9 changes: 7 additions & 2 deletions packages/core/src/helpers/string.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
4 changes: 4 additions & 0 deletions packages/core/tests/helpers.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
Loading