Lanhu TW

kuai_kua_wo.js

// ==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();
})()