Skip to content

Commit 813edac

Browse files
JustineoJustineo
committed
fix: fix reactivity for vue3, add metadata
1 parent 3366d30 commit 813edac

24 files changed

+1409
-189
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,6 @@ node_modules
3737

3838
# Assets
3939
assets
40+
41+
# Temporary files
42+
build/icons.json

‎build/data/data.tpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
const data{Name} = {icon}
2-
export default data{Name}
2+
{annotation}export default data{Name}

‎build/generate.js

+161-124
Original file line numberDiff line numberDiff line change
@@ -39,52 +39,29 @@ function getSVGOConfig ({ id }) {
3939
}
4040
}
4141

42+
function readFile (...parts) {
43+
return fs.readFileSync(path.resolve(__dirname, ...parts), 'utf8')
44+
}
45+
46+
function writeFile (content, ...parts) {
47+
fs.writeFileSync(path.resolve(__dirname, ...parts), content, 'utf8')
48+
}
49+
4250
const ENDPOINT = process.env.DLS_ICONS_API
4351
const RAW_DIR = path.resolve(__dirname, '../raw')
4452
const SVG_DIR = path.resolve(__dirname, '../svg')
45-
const ICON_PATTERN = /^(.+)\.svg$/
46-
47-
const DATA_TPL = fs.readFileSync(
48-
path.resolve(__dirname, 'data/data.tpl'),
49-
'utf8'
50-
)
51-
const DATA_EXPORT_TPL = fs.readFileSync(
52-
path.resolve(__dirname, 'data/export.tpl'),
53-
'utf8'
54-
)
55-
const ICON_TPL = fs.readFileSync(
56-
path.resolve(__dirname, 'icon/icon.tpl'),
57-
'utf8'
58-
)
59-
const ICON_EXPORT_TPL = fs.readFileSync(
60-
path.resolve(__dirname, 'icon/export.tpl'),
61-
'utf8'
62-
)
63-
64-
const TYPINGS_DATA_INDEX_TPL = fs.readFileSync(
65-
path.resolve(__dirname, 'typings/data.index.tpl'),
66-
'utf8'
67-
)
68-
const TYPINGS_DATA_TPL = fs.readFileSync(
69-
path.resolve(__dirname, 'typings/data.tpl'),
70-
'utf8'
71-
)
72-
const TYPINGS_REACT_INDEX_TPL = fs.readFileSync(
73-
path.resolve(__dirname, 'typings/react.index.tpl'),
74-
'utf8'
75-
)
76-
const TYPINGS_REACT_TPL = fs.readFileSync(
77-
path.resolve(__dirname, 'typings/react.tpl'),
78-
'utf8'
79-
)
80-
const TYPINGS_VUE_INDEX_TPL = fs.readFileSync(
81-
path.resolve(__dirname, 'typings/vue.index.tpl'),
82-
'utf8'
83-
)
84-
const TYPINGS_VUE_TPL = fs.readFileSync(
85-
path.resolve(__dirname, 'typings/vue.tpl'),
86-
'utf8'
87-
)
53+
54+
const DATA_TPL = readFile('data/data.tpl')
55+
const DATA_EXPORT_TPL = readFile('data/export.tpl')
56+
const ICON_TPL = readFile('icon/icon.tpl')
57+
const ICON_EXPORT_TPL = readFile('icon/export.tpl')
58+
59+
const TYPINGS_DATA_INDEX_TPL = readFile('typings/data.index.tpl')
60+
const TYPINGS_DATA_TPL = readFile('typings/data.tpl')
61+
const TYPINGS_REACT_INDEX_TPL = readFile('typings/react.index.tpl')
62+
const TYPINGS_REACT_TPL = readFile('typings/react.tpl')
63+
const TYPINGS_VUE_INDEX_TPL = readFile('typings/vue.index.tpl')
64+
const TYPINGS_VUE_TPL = readFile('typings/vue.tpl')
8865

8966
const ICON_PACKS = ['dls-icons-react', 'dls-icons-vue', 'dls-icons-vue-3']
9067
const DATA_PACK = 'dls-icons-data'
@@ -126,66 +103,117 @@ async function generate () {
126103
})
127104

128105
return Promise.all(
129-
(await getSVGFiles()).map(async ({ slug, content }) => {
130-
const file = `${slug}.svg`
131-
const { el, content: svg, width, height } = await normalizeSVG(content, file)
132-
133-
fs.writeFileSync(path.join(SVG_DIR, file), svg, 'utf8')
134-
135-
const name = camelCase(slug)
136-
const Name = upperFirst(name)
137-
138-
const { width: w, height: h, ...attributes } = el.attributes
139-
140-
const iconCode = stringifyObject(
141-
{
142-
name: `Icon${Name}`,
143-
content: el.children.map((child) => stringify(child)).join(''),
144-
attributes,
145-
width: Number(width),
146-
height: Number(height)
147-
},
148-
{
149-
indent: ' '
150-
}
151-
)
106+
(await getSVGFiles()).map(
107+
async ({ slug, content, category, desc, type, colorType }) => {
108+
const file = `${slug}.svg`
109+
const {
110+
el,
111+
content: svg,
112+
width,
113+
height
114+
} = await normalizeSVG(content, file)
115+
116+
fs.writeFileSync(path.join(SVG_DIR, file), svg, 'utf8')
117+
118+
const name = camelCase(slug)
119+
const Name = upperFirst(name)
120+
121+
const { width: w, height: h, ...attributes } = el.attributes
122+
123+
const iconCode = stringifyObject(
124+
{
125+
name: `Icon${Name}`,
126+
content: el.children.map((child) => stringify(child)).join(''),
127+
attributes,
128+
width: Number(width),
129+
height: Number(height)
130+
},
131+
{
132+
indent: ' '
133+
}
134+
)
152135

153-
const tplData = {
154-
name,
155-
Name,
156-
icon: iconCode
157-
}
136+
const deprecated = category === '@deprecated'
137+
const annotation = deprecated ? '/** @deprecated */\n' : ''
158138

159-
const dataModuleCode = renderTpl(DATA_TPL, tplData)
160-
const iconModuleCode = renderTpl(ICON_TPL, tplData)
139+
const tplData = {
140+
name,
141+
Name,
142+
icon: iconCode,
143+
annotation
144+
}
161145

162-
fs.writeFileSync(
163-
path.join(DATA_DIR, `icons/${Name}.js`),
164-
dataModuleCode,
165-
'utf8'
166-
)
146+
const dataModuleCode = renderTpl(DATA_TPL, tplData)
147+
const iconModuleCode = renderTpl(ICON_TPL, tplData)
167148

168-
ICON_PACKS.forEach((pack) => {
169-
const iconsDir = path.join(getPackDir(pack), 'src/icons')
170149
fs.writeFileSync(
171-
path.join(iconsDir, `${Name}.js`),
172-
iconModuleCode,
150+
path.join(DATA_DIR, `icons/${Name}.js`),
151+
dataModuleCode,
173152
'utf8'
174153
)
175-
})
176154

177-
return { slug, name, Name, file }
178-
})
155+
ICON_PACKS.forEach((pack) => {
156+
const iconsDir = path.join(getPackDir(pack), 'src/icons')
157+
fs.writeFileSync(
158+
path.join(iconsDir, `${Name}.js`),
159+
iconModuleCode,
160+
'utf8'
161+
)
162+
})
163+
164+
return {
165+
slug,
166+
name,
167+
Name,
168+
file,
169+
category,
170+
deprecated,
171+
desc,
172+
type,
173+
colorType,
174+
annotation
175+
}
176+
}
177+
)
179178
).then((icons) => {
180179
const dataIndex = icons
181180
.map((data) => renderTpl(DATA_EXPORT_TPL, data))
182181
.join('')
183182

184183
fs.writeFileSync(path.join(DATA_DIR, 'index.js'), dataIndex, 'utf8')
185184

185+
const TYPE_MAP = {
186+
0: 'outline',
187+
1: 'solid'
188+
}
189+
const COLOR_TYPE_MAP = {
190+
0: 'monocolor',
191+
1: 'multicolor'
192+
}
193+
fs.writeFileSync(
194+
getPackDir(DATA_PACK, 'meta.json'),
195+
JSON.stringify(
196+
icons.reduce((acc, { Name, slug, category, desc, deprecated, type, colorType }) => {
197+
acc[`Icon${Name}`] = {
198+
slug,
199+
category,
200+
desc,
201+
deprecated,
202+
type: TYPE_MAP[type],
203+
colorType: COLOR_TYPE_MAP[colorType]
204+
}
205+
206+
return acc
207+
}, {}),
208+
null,
209+
' '
210+
),
211+
'utf8'
212+
)
213+
186214
const iconIndex =
187215
icons.map((data) => renderTpl(ICON_EXPORT_TPL, data)).join('') +
188-
'export { createIcon, SharedResources } from \'./common\'\n'
216+
"export { createIcon, SharedResources } from './common'\n"
189217

190218
ICON_PACKS.concat(DATA_PACK).forEach((pack) => {
191219
const packDir = getPackDir(pack)
@@ -210,9 +238,17 @@ async function generate () {
210238
.map((_, j) => icons[i * cols + j])
211239
.map(
212240
(icon) =>
213-
`<td align="center">${
241+
`<td align="center"${
242+
icon && icon.deprecated ? ' title="@deprecated"' : ''
243+
}>${
214244
icon
215-
? `<img src="https://raw.githubusercontent.com/ecomfe/dls-icons/master/svg/${icon.file}" height="24"/><br/><sub>${prefix}${icon.Name}</sub>`
245+
? `<img src="https://raw.githubusercontent.com/ecomfe/dls-icons/master/svg/${
246+
icon.file
247+
}" height="24"/><br/><sub>${
248+
icon.deprecated ? '<s>' : ''
249+
}${prefix}${icon.Name}${
250+
icon.deprecated ? '</s>' : ''
251+
}</sub>`
216252
: ''
217253
}</td>`
218254
)
@@ -224,16 +260,15 @@ async function generate () {
224260

225261
const readmeFiles = ['README.md', 'README.zh-Hans.md']
226262

227-
readmeFiles.forEach(readme => {
228-
const file = path.join(packDir, readme)
229-
const content = fs.readFileSync(file, 'utf8')
263+
readmeFiles.forEach((readme) => {
264+
const content = readFile(packDir, readme)
230265

231-
fs.writeFileSync(
232-
file,
266+
writeFile(
233267
commentMark(content, {
234268
icons: iconTable
235269
}),
236-
'utf8'
270+
packDir,
271+
readme
237272
)
238273
})
239274
})
@@ -247,39 +282,41 @@ function sortFileData (f1, f2) {
247282
}
248283

249284
async function getSVGFiles () {
285+
let iconData
250286
if (ENDPOINT) {
251-
const { data } = JSON.parse(await fetch(ENDPOINT).then((res) => res.text()))
287+
iconData = await fetch(ENDPOINT).then((res) => res.text())
288+
writeFile(iconData, 'icons.json')
289+
} else {
290+
try {
291+
iconData = readFile('icons.json')
292+
} catch (e) {
293+
console.error('No local `icons.json` found. You must specify an `ENDPOINT`.')
294+
process.exit(1)
295+
}
296+
}
252297

253-
clearDir(RAW_DIR)
298+
const { data } = JSON.parse(iconData)
254299

255-
data.forEach(({ label, svg }) => {
256-
fs.writeFileSync(
257-
path.join(RAW_DIR, label.replace(/_/g, '-') + '.svg'),
258-
svg,
259-
'utf8'
260-
)
261-
})
300+
clearDir(RAW_DIR)
262301

263-
return data
264-
.map(({ label, svg }) => ({
265-
slug: label.replace(/_/g, '-'),
266-
content: svg
267-
}))
268-
.sort(sortFileData)
269-
} else {
270-
return fs
271-
.readdirSync(RAW_DIR)
272-
.filter((file) => ICON_PATTERN.test(file))
273-
.map((file) => {
274-
const slug = file.replace(ICON_PATTERN, (_, $1) => $1)
275-
const content = fs.readFileSync(path.resolve(RAW_DIR, file), 'utf8')
276-
return {
277-
slug,
278-
content
279-
}
280-
})
281-
.sort(sortFileData)
282-
}
302+
data.forEach(({ label, svg }) => {
303+
fs.writeFileSync(
304+
path.join(RAW_DIR, label.replace(/_/g, '-') + '.svg'),
305+
svg,
306+
'utf8'
307+
)
308+
})
309+
310+
return data
311+
.map(({ label, svg, name, category, type, colorType }) => ({
312+
slug: label.replace(/_/g, '-'),
313+
content: svg,
314+
category,
315+
desc: name, // Text description
316+
type, // 0: outline, 1: solid
317+
colorType // 0: monocolor, 1: multicolor
318+
}))
319+
.sort(sortFileData)
283320
}
284321

285322
async function normalizeSVG (content, file) {
@@ -299,7 +336,7 @@ async function normalizeSVG (content, file) {
299336
let { width, height, viewBox } = attributes
300337

301338
if (!viewBox && !(width && height)) {
302-
console.error(file, 'doesn\'t contain a valid size declaration.')
339+
console.error(file, "doesn't contain a valid size declaration.")
303340
console.error(width, height, viewBox)
304341
} else if (viewBox) {
305342
// has viewBox, override width/height

‎build/icon/icon.tpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ import { data{Name} } from 'dls-icons-data'
22
import { createIcon } from '../common'
33

44
const Icon{Name} = /*#__PURE__*/createIcon(data{Name})
5-
export default Icon{Name}
5+
{annotation}export default Icon{Name}

‎build/typings/data.tpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export declare const data{Name}: IconData
1+
{annotation}export declare const data{Name}: IconData

‎build/typings/react.tpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export declare const Icon{Name}: Icon
1+
{annotation}export declare const Icon{Name}: Icon

‎build/typings/vue.tpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export declare const Icon{Name}: DefineComponent<IconProps>
1+
{annotation}export declare const Icon{Name}: DefineComponent<IconProps>

‎packages/dls-icons-data/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
dist
2+
meta.json
23
src/index.*
34
src/icons

‎packages/dls-icons-data/README.md

+1-1
Large diffs are not rendered by default.

‎packages/dls-icons-data/README.zh-Hans.md

+1-1
Large diffs are not rendered by default.

‎packages/dls-icons-data/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
},
2121
"files": [
2222
"dist",
23+
"meta.json",
2324
"README.md"
2425
],
2526
"keywords": [

‎packages/dls-icons-react/README.md

+1-1
Large diffs are not rendered by default.

‎packages/dls-icons-react/README.zh-Hans.md

+1-1
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)