Skip to content

Commit 4c3b2d3

Browse files
zhiyuanzmjzhiyuanzmj
committed
chore: init
0 parents  commit 4c3b2d3

20 files changed

+5209
-0
lines changed

Diff for: ‎.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
*.log
5+
.vercel
6+
.eslintcache
7+
.vite-inspect

Diff for: ‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
shamefully-hoist=true

Diff for: ‎.vscode/settings.json

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"typescript.tsdk": "node_modules/typescript/lib",
3+
4+
// Enable the flat config support
5+
"eslint.experimental.useFlatConfig": true,
6+
7+
// Disable the default formatter
8+
"prettier.enable": false,
9+
"editor.formatOnSave": false,
10+
11+
// Auto fix
12+
"editor.codeActionsOnSave": {
13+
"source.fixAll.eslint": true,
14+
"source.organizeImports": false
15+
},
16+
17+
// Silent the stylistic rules in you IDE, but still auto fix them
18+
"eslint.rules.customizations": [
19+
{ "rule": "@stylistic/*", "severity": "off" },
20+
{ "rule": "style*", "severity": "off" },
21+
{ "rule": "*-indent", "severity": "off" },
22+
{ "rule": "*-spacing", "severity": "off" },
23+
{ "rule": "*-spaces", "severity": "off" },
24+
{ "rule": "*-order", "severity": "off" },
25+
{ "rule": "*-dangle", "severity": "off" },
26+
{ "rule": "*-newline", "severity": "off" },
27+
{ "rule": "*quotes", "severity": "off" },
28+
{ "rule": "*semi", "severity": "off" }
29+
],
30+
31+
"eslint.validate": [
32+
"javascript",
33+
"javascriptreact",
34+
"typescript",
35+
"typescriptreact",
36+
"vue",
37+
"html",
38+
"markdown",
39+
"json",
40+
"jsonc",
41+
"yaml"
42+
]
43+
}

Diff for: ‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021-PRESENT Anthony Fu <https://github.com/zhiyuanzmj>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

Diff for: ‎README.md

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
# transformer-attributify-jsx-sg
2+
3+
<!-- @unocss-ignore -->
4+
5+
Support [valueless attributify](https://github.com/unocss/unocss/tree/main/packages/preset-attributify#valueless-attributify) in JSX/TSX. \
6+
Using [ast-grep](https://github.com/ast-grep/ast-grep) to match attributes, Thanks for [HerringtonDarkholme](https://github.com/HerringtonDarkholme).
7+
8+
### Benchmark
9+
`pnpm run bench`
10+
```
11+
Running "unocss concurrent transform jsx" suite...
12+
benchRegexTransform:
13+
16 ops/s, ±9.95% | fastest
14+
15+
benchAstGrepTransform:
16+
13 ops/s, ±0.34% | 18.75% slower
17+
18+
benchSwcTransform:
19+
6 ops/s, ±0.84% | 62.5% slower
20+
21+
benchBabelTransform:
22+
2 ops/s, ±1.44% | slowest, 87.5% slower
23+
```
24+
25+
## Usage
26+
27+
```jsx
28+
export function Component() {
29+
return (
30+
<div text-red text-center text-5xl animate-bounce>
31+
unocss
32+
</div>
33+
)
34+
}
35+
```
36+
37+
Will be transformed to:
38+
39+
```jsx
40+
export function Component() {
41+
return (
42+
<div text-red="" text-center="" text-5xl="" animate-bounce="">
43+
unocss
44+
</div>
45+
)
46+
}
47+
```
48+
49+
<details>
50+
<summary>Without this transformer</summary>
51+
52+
JSX by default will treat valueless attributes as boolean attributes.
53+
54+
```jsx
55+
export function Component() {
56+
return (
57+
<div text-red={true} text-center={true} text-5xl={true} animate-bounce={true}>
58+
unocss
59+
</div>
60+
)
61+
}
62+
```
63+
64+
</details>
65+
66+
## Install
67+
68+
```bash
69+
npm i -D transformer-attributify-jsx-sg
70+
```
71+
72+
```ts
73+
// uno.config.ts
74+
import { defineConfig, presetAttributify } from 'unocss'
75+
import transformerAttributifyJsx from 'transformer-attributify-jsx-sg'
76+
77+
export default defineConfig({
78+
// ...
79+
presets: [
80+
// ...
81+
presetAttributify()
82+
],
83+
transformers: [
84+
transformerAttributifyJsx(), // <--
85+
],
86+
})
87+
```
88+
89+
## Caveats
90+
91+
If you encounter any issues with this package, there is [@unocss/transformer-attributify-jsx-babel](https://github.com/unocss/unocss/tree/main/packages/transformer-attributify-jsx-babel) package that uses Babel to transform JSX.
92+
93+
> ⚠️ The rules are almost the same as those of `preset-attributify`, but there are several precautions
94+
95+
```html
96+
<div translate-x-100% /> <!-- cannot end with `%` -->
97+
98+
<div translate-x-[100px] /> <!-- cannot contain `[` or `]` -->
99+
```
100+
101+
Instead, you may want to use valued attributes instead:
102+
103+
```html
104+
<div translate="x-100%" />
105+
106+
<div translate="x-[100px]" />
107+
```
108+
109+
## Blocklist
110+
111+
This transformer will only transform attributes that are valid UnoCSS utilities.
112+
You can also `blocklist` bypass some attributes from been transformed.
113+
114+
```js
115+
transformerAttributifyJsx({
116+
blocklist: [/text-[a-zA-Z]*/, 'text-5xl']
117+
})
118+
```
119+
120+
```jsx
121+
<div text-red text-center text-5xl animate-bounce>
122+
unocss
123+
</div>
124+
```
125+
126+
Will be compiled to:
127+
128+
```html
129+
<div text-red text-center text-5xl animate-bounce="">
130+
unocss
131+
</div>
132+
```
133+
134+
## License
135+
136+
MIT License &copy; 2022-PRESENT [zhiyuanzmj](https://github.com/zhiyuanzmj)

Diff for: ‎ast-grep/rules/jsx-directive/v-bind.yml

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
id: v-bind shorthand
3+
language: html
4+
rule:
5+
kind: quoted_attribute_value
6+
pattern: $A
7+
inside:
8+
kind: attribute
9+
has:
10+
kind: attribute_name
11+
regex: "^:"
12+
transform:
13+
B:
14+
substring:
15+
source: $A
16+
startChar: 1
17+
endChar: -1
18+
fix: |-
19+
{$B}
20+
21+
---
22+
23+
id: v-bind remove shorthand
24+
language: html
25+
rule:
26+
kind: attribute_name
27+
pattern: $A
28+
regex: "^:"
29+
transform:
30+
B:
31+
substring:
32+
source: $A
33+
startChar: 1
34+
fix: |-
35+
$B

Diff for: ‎ast-grep/rules/jsx-directive/v-directive.yml

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
id: v-directive
2+
message: Don't use await inside of loops
3+
severity: warning
4+
language: html
5+
rule:
6+
kind: quoted_attribute_value
7+
pattern: $A
8+
inside:
9+
kind: attribute
10+
has:
11+
kind: attribute_name
12+
regex: ^v-
13+
transform:
14+
B:
15+
substring:
16+
source: $A
17+
startChar: 1
18+
endChar: -1
19+
fix: |-
20+
{$B}

Diff for: ‎ast-grep/rules/jsx-directive/v-on.yml

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
id: v-on shorthand
2+
language: html
3+
rule:
4+
kind: quoted_attribute_value
5+
pattern: $A
6+
inside:
7+
kind: attribute
8+
has:
9+
kind: attribute_name
10+
regex: "^@"
11+
transform:
12+
B:
13+
substring:
14+
source: $A
15+
startChar: 1
16+
endChar: -1
17+
fix: |-
18+
{$B}
19+
20+
---
21+
22+
id: v-on remove shorthand
23+
language: html
24+
rule:
25+
kind: attribute_name
26+
pattern: $A
27+
regex: '^@'
28+
transform:
29+
B:
30+
substring:
31+
startChar: 1
32+
endChar: 2
33+
source: $A
34+
C:
35+
convert:
36+
source: $B
37+
toCase: upperCase
38+
D:
39+
substring:
40+
startChar: 2
41+
source: $A
42+
fix: |-
43+
on$C$D
44+
45+
---
46+
47+
id: v-on transform to on
48+
language: html
49+
rule:
50+
kind: attribute_name
51+
regex: '^v-on$'
52+
fix:
53+
on

Diff for: ‎ast-grep/rules/render/define-render.yml

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
id: define-render
2+
language: html
3+
rule:
4+
kind: end_tag
5+
regex: "</script>"
6+
inside:
7+
kind: script_element
8+
any:
9+
- precedes:
10+
matches: is-template
11+
- follows:
12+
matches: is-template
13+
fix: |-
14+
15+
defineRender(() => (
16+
$X
17+
))
18+
</script>
19+
20+
---
21+
22+
id: define-render remove template
23+
language: html
24+
rule:
25+
matches: is-template
26+
fix: |-

Diff for: ‎ast-grep/rules/render/export-render.yml

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
id: export-render
2+
language: html
3+
rule:
4+
kind: end_tag
5+
regex: "</script>"
6+
inside:
7+
kind: script_element
8+
any:
9+
- precedes:
10+
matches: is-template
11+
- follows:
12+
matches: is-template
13+
fix: |-
14+
15+
export default () => (
16+
$X
17+
)
18+
</script>
19+
20+
---
21+
22+
id: export-render remove template
23+
language: html
24+
rule:
25+
matches: is-template
26+
fix: |-

Diff for: ‎ast-grep/sgconfig.yml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
ruleDirs:
2+
- rules
3+
utilDirs:
4+
- utils

Diff for: ‎ast-grep/utils/is-template.yml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
id: is-template
2+
language: html
3+
rule:
4+
kind: element
5+
has:
6+
kind: element
7+
pattern: $X

0 commit comments

Comments
 (0)