Skip to content

Instantly share code, notes, and snippets.

@littlee
Last active July 26, 2021 01:15
Show Gist options
  • Save littlee/f026b16782ff6d1bfba8842ae677bad7 to your computer and use it in GitHub Desktop.
Save littlee/f026b16782ff6d1bfba8842ae677bad7 to your computer and use it in GitHub Desktop.
Lanhu TW
// ==UserScript==
// @name Lanhu TW
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://lanhuapp.com/web/
// @icon https://lhcdn.lanhuapp.com/web/static/favicon.ico?v=2
// @grant none
// ==/UserScript==
function tryUntil(fn, time) {
return new Promise((resolve) => {
function getRes() {
const res = fn();
if (res) {
resolve(res);
} else {
setTimeout(getRes, time);
}
}
getRes();
});
}
function declToClass(prop, value) {
switch (prop) {
case 'width':
return [`w-[${value}]`];
case 'height':
return [`h-[${value}]`];
case 'background':
return [`bg-[${value}]`];
case 'box-shadow':
return ['shadow'];
case 'border': {
const [width, type, ...rest] = value.split(' ');
return [
`border-[${width}]`,
`border-[${type}]`,
`border-[${rest.join('')}]`,
];
}
case 'border-radius': {
const r = value.split(' ');
if (r.length > 1) {
return ['tl', 'tr', 'br', 'bl']
.map((pos, index) => {
return [`rounded-${pos}-[${r[index] || ''}]`];
})
.filter((item) => !/\[\]$/.test(item));
}
return [`rounded-[${r[0]}]`];
}
case 'color': {
return [`text-[${value}]`];
}
case 'font-size': {
return [`text-[${value}]`];
}
case 'line-height': {
return [`leading-[${value}]`];
}
default:
}
}
function declToStyle(prop, value) {
switch (prop) {
case 'box-shadow':
return {
key: '--tw-shadow',
value: value,
};
default:
}
}
function convertToTwJit(str) {
const decls = str
.split(/;\n*/)
.filter((item) => Boolean(item))
.map((item) => {
let [prop, value] = item.split(':');
prop = prop.trim();
value = value.trim();
return {
prop,
value,
className: declToClass(prop, value),
style: declToStyle(prop, value),
};
});
const classNameCode = `className={cls(${decls
.filter((item) => item.className)
.reduce((acc, item) => {
acc = acc.concat(item.className.map((name) => `'${name}'`));
return acc;
}, [])
.join(',')})}`;
const styleCode = decls
.filter((item) => item.style)
.map((item) => `'${item.style.key}':'${item.style.value}'`)
.join('\n')
.trim();
return `<div ${classNameCode}\n${styleCode ? `style={{${styleCode}}}` : ''} ></div>`;
}
function loadLib(url) {
return new Promise((resolve) => {
const $script = document.createElement('script');
$script.src = url;
$script.onload = resolve;
document.head.appendChild($script);
});
}
function formatCode(code) {
return window.prettier.format(code, {
parser: 'babel',
plugins: window.prettierPlugins,
singleQuote: true,
}).replace(/;\s*$/g, '');
}
function createStyle(code) {
const $style = document.createElement('style');
$style.textContent = code;
document.head.appendChild($style);
}
function main() {
createStyle(`
.annotation_item {
display: none;
}
.annotation_item.code_detail {
display: initial;
}
.mu-paper .annotation_container_b .view-code {
display: none;
}
.annotation_item.code_detail pre {
padding: 10px;
font-size: 12px;
}
`)
loadLib('https://www.wulihub.com.cn/gc/QBVK24/prettier.js')
.then(() => loadLib('https://www.wulihub.com.cn/gc/QBVK24/parser-babel.js'))
.then(() => {
let $prevNode;
setInterval(function loop() {
tryUntil(() => document.querySelector('.code_box')).then((node) => {
const $wrapper = document.querySelector('.mu-paper.mu-drawer.mu-paper-round.mu-paper-2.right');
if ($wrapper) {
$wrapper.style.width = '500px';
}
const $codeBox = node;
if (node === $prevNode) {
return;
}
console.log('render tailwind code');
$prevNode = node;
const nowText = $codeBox.textContent.trim();
const $prevPre = document.querySelector('.tw-code-pre');
if ($prevPre) {
$prevPre.remove();
}
const $pre = document.createElement('pre');
$pre.style.whiteSpace = 'pre-wrap';
$pre.classList.add('tw-code-pre', 'language-javascript');
$pre.textContent = formatCode(convertToTwJit(nowText));
$codeBox.insertAdjacentElement('afterend', $pre);
window.Prism.highlightElement($pre);
});
},200)
});
};
(function() {
main();
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment