vite-plugin-entry-shaking-debugger/src/client/components/CodeBlock/useCodeBlock.ts

Debugger for vite-plugin-entry-shaking

import type { ShikiTransformer } from 'shiki';
import { codeToHtml } from 'shiki';
import { ref, watchEffect } from 'vue';
import { transformerNotationDiff } from '@shikijs/transformers';

import type { CodeBlockProps } from './CodeBlock.types';
import { useDiffs } from './useDiffs';

export function useCodeBlock(props: CodeBlockProps) {
  const code = ref('');

  const getTransformers = async (): Promise<ShikiTransformer[]> => {
    const transformers = props.transformers ?? [];

    if (props.source && props.target) transformers.push(transformerNotationDiff());

    if (['typescript', 'ts'].includes(props.lang!) && !props.target) {
      const { useTwoSlash } = await import('./useTwoSlash');
      const { transformerTwoslash, twoslash } = useTwoSlash();
      await twoslash.prepareTypes(props.source);
      transformers.push(transformerTwoslash);
    }

    return transformers;
  };

  watchEffect(() => {
    (async () => {
      if (props.source && props.target) {
        const diffs = useDiffs();
        await diffs.prepare();
        diffs.compare('lol', props.source, props.target).then(async (val) => {
          code.value = await codeToHtml(val, {
            lang: props.lang!,
            theme: props.theme!,
            transformers: await getTransformers(),
          });
        });
      } else {
        code.value = await codeToHtml(props.source, {
          lang: props.lang!,
          theme: props.theme!,
          transformers: await getTransformers(),
        });
      }
    })();
  });

  return { code };
}