Skip to content

Commit

Permalink
feat: support nested use
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaohuoni
xiaohuoni committed Apr 16, 2022
1 parent f31ddf7 commit 02f55f5
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 30 deletions.
5 changes: 5 additions & 0 deletions .changeset/quiet-oranges-film.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@alita/chalk': patch
---

feat: support nested use
50 changes: 43 additions & 7 deletions packages/chalk/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
if (!window.chalk) {
const _console = console;
const color = {
black: '#00000',
black: '#000000',
red: '#FF0000',
green: '#008000',
yellow: '#FFFF00',
Expand All @@ -30,7 +30,7 @@
];
for (let key = 0; key < arr.length; key++) {
const [first, ...other] = arr[key];
fi[0] += `${first.startsWith(' ') ? '' : ' '}${first}`;
fi[0] += first;
fi = fi.concat(other);
}
return fi;
Expand Down Expand Up @@ -62,33 +62,69 @@
event: 'magenta',
debug: 'gray',
};
const createChalk = (name) => (str) => {
const createChalk = (name) => (...str) => {
if (typeof str[0] === 'object') {
createlog(name)(...add(colorUtils.bold(colorUtils[colorHash[name]](`[${firstToUpperCase(name)}] `)), ...str));
return;
}
let strArr = str;
if (typeof str === 'string' || typeof str === 'number') {
strArr = colorUtils[colorHash[name]](str);
}
createlog(name)(...add(colorUtils.bold(colorUtils[colorHash[name]](`[${firstToUpperCase(name)}] `)), strArr));

};
const chalk = {};
Object.keys(colorHash).forEach(key => {
chalk[key] = createChalk(key);
});
const firstToUpperCase = (str) => str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
Object.keys(color).forEach(key => {
colorUtils[key] = (str) => [`%c${str}`, `color:${color[key]}`];
colorUtils[key] = (str) => {
if (typeof str === 'string' || typeof str === 'number') {
return [`%c${str}`, `color:${color[key]}`];
}
for (let i = 1; i < str.length; i++) {
str[i] += `;color:${color[key]}`;
}
return str;
};
colorUtils[`bg${firstToUpperCase(key)}`] = (str) => {
return [`%c${str}`, `padding: 2px 4px; border-radius: 3px; color: ${key === 'white' ? '#000' : '#fff'}; font-weight: bold; background:${color[key]};`];
if (typeof str === 'string' || typeof str === 'number') {
return [`%c${str}`, `padding: 2px 4px; border-radius: 3px; color: ${key === 'white' ? '#000' : '#fff'}; font-weight: bold; background:${color[key]};`];
}
for (let i = 1; i < str.length; i++) {
str[i] += `;padding: 2px 4px; border-radius: 3px; font-weight: bold; background:${color[key]};`;
}
return str;
};
});
window.chalk = {
add,
...chalk,
...colorUtils,
hello: (title, version) => createlog('log')(`%c ${title} %c V${version} `, 'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;', 'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;')
hello: (title, version) => createlog('log')(`%c ${title} %c V${version} `, 'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;', 'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;'),
image: (img) => {
if (!img) return;
createlog('log')(`%c `, `font-size: 1px;
padding: 100px 100px;
background-image: url(${img});
background-size: contain;
background-repeat: no-repeat;
color: transparent;`)

}
};
}
chalk = window.chalk;
window.alitadebug = true;
chalk.hello('Malita', '0.0.6');
chalk.image('https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecfbefb4fc8f4a9ca4b3095a8d22752f~tplv-k3u1fbpfcp-watermark.image');
chalk.log('大家好，我是《挑战21天手写前端框架的产物》')
chalk.info('作者是陈小聪哦')
chalk.wait('github: xiaohuoni')
chalk.warn('感兴趣的朋友可以掘金搜索标题')
chalk.error('内容主要是挑战日更，所以对于我就是一个附加产物，伤心！')
chalk.ready('不过没有关系，我还是会努力成长的！gogogo！')
</script>
</head>

Expand Down
2 changes: 1 addition & 1 deletion packages/chalk/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@alita/chalk",
"version": "1.0.1-rc.0",
"version": "1.0.2",
"description": "@alita/browser-chalk",
"main": "dist/index.js",
"types": "dist/index.d.ts",
Expand Down
88 changes: 66 additions & 22 deletions packages/chalk/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ interface AlitaChalk {
if (!(window as any).chalk) {
const _console: any = console;
const color: ColorProps = {
black: '#00000',
black: '#000000',
red: '#FF0000',
green: '#008000',
yellow: '#FFFF00',
Expand Down Expand Up @@ -111,35 +111,67 @@ if (!(window as any).chalk) {
event: 'magenta',
debug: 'gray',
};
const createChalk = (name: string) => (str: string) => {
let strArr = str;
if (typeof str === 'string' || typeof str === 'number') {
strArr = colorUtils[colorHash[name]](str);
}
createlog(name)(
...add(
colorUtils.bold(
colorUtils[colorHash[name]](`[${firstToUpperCase(name)}] `),
const createChalk =
(name: string) =>
(
// @ts-ignore
...str
) => {
if (typeof str[0] === 'object') {
createlog(name)(
...add(
colorUtils.bold(
colorUtils[colorHash[name]](`[${firstToUpperCase(name)}] `),
),
...str,
),
);
return;
}
let strArr = str;
if (typeof str === 'string' || typeof str === 'number') {
strArr = colorUtils[colorHash[name]](str);
}
createlog(name)(
...add(
colorUtils.bold(
colorUtils[colorHash[name]](`[${firstToUpperCase(name)}] `),
),
strArr,
),
strArr,
),
);
};
);
};
const chalk = {} as any;
Object.keys(colorHash).forEach((key) => {
chalk[key] = createChalk(key);
});
const firstToUpperCase = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
Object.keys(color).forEach((key) => {
colorUtils[key] = (str: string) => [`%c${str}`, `color:${color[key]}`];
colorUtils[`bg${firstToUpperCase(key)}`] = (str: string) => {
return [
`%c${str}`,
`padding: 2px 4px; border-radius: 3px; color: ${
key === 'white' ? '#000' : '#fff'
}; font-weight: bold; background:${color[key]};`,
];
colorUtils[key] = (str: string | string[]) => {
if (typeof str === 'string' || typeof str === 'number') {
return [`%c${str}`, `color:${color[key]}`];
}
for (let i = 1; i < str.length; i++) {
str[i] += `;color:${color[key]}`;
}
return str;
};
colorUtils[`bg${firstToUpperCase(key)}`] = (str: string | string[]) => {
if (typeof str === 'string' || typeof str === 'number') {
return [
`%c${str}`,
`padding: 2px 4px; border-radius: 3px; color: ${
key === 'white' ? '#000' : '#fff'
}; font-weight: bold; background:${color[key]};`,
];
}
for (let i = 1; i < str.length; i++) {
str[
i
] += `;padding: 2px 4px; border-radius: 3px; font-weight: bold; background:${color[key]};`;
}
return str;
};
});
(window as any).chalk = {
Expand All @@ -152,6 +184,18 @@ if (!(window as any).chalk) {
'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;',
'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;',
),
image: (img: string) => {
if (!img) return;
createlog('log')(
`%c `,
`font-size: 1px;
padding: 100px 100px;
background-image: url(${img});
background-size: contain;
background-repeat: no-repeat;
color: transparent;`,
);
},
};
}
chalk = (window as any).chalk;
Expand Down

0 comments on commit 02f55f5

Please sign in to comment.