feat: manaco as code block

README.md

@@ -40,7 +40,7 @@ npx vite-slides export talk.pdf
 - [ ] Preload next slide
 - [ ] Shiki + TwoSlash
 - [ ] Export PDF
-- [ ] Monaco as markdown
+- [x] Monaco as markdown
 - [ ] Standalone package
 - [ ] Configurable themes
 

slides.md

@@ -56,12 +56,81 @@ layout: center
 
 ------
 
-# `ref` vs `reactive`
+<div class="grid grid-cols-2 gap-x-4"><div>
 
-## Return an object of refs 
+### Ref
+
+```ts{monaco}
+import { ref } from 'vue'
+
+let foo = 0
+const bar = ref(0)
+
+foo = 1
+bar = 1 // ts-error
+```
+
+- More explicitly, with type checking
+- Less caveats
+
+</div><div>
+
+
+### Reactive
+
+```ts{monaco:readonly}
+import { reactive } from 'vue'
+
+const foo = { prop: 0 }
+const bar = reactive({ prop: 0 })
+
+foo.prop = 1
+bar.prop = 1
+```
+
+- Auto unwrapping (a.k.a `.value` free)
+- Same as object on types
+- No destructure
+- Need to use callback for `watch`
+
+</div></div>
+
+------
+
+# `.value`
+
+<div class="grid grid-cols-2 gap-x-4">
+
+```ts
+const foo = ref(0)
+
+watch(foo, (num) => {
+  console.log(num)
+  console.log(foo.value) // the same
+})
+
+console.log(unref(foo))
+```
+
+
+```ts
+const foo = reactive({ a: })
+
+watch(foo, (num) => {
+  console.log(num)
+  console.log(foo.value) // the same
+})
+
+console.log(unref(foo))
+```
+
+</div>
+
+------
+
+# Return an object of refs 
 
 - destructurable
-- less caveats
 - convert to reactive when needed
 
 ------

src/components/Monaco.vue

@@ -1,13 +1,15 @@
 <template>
-  <div ref="el" class="editor text-base" :style="{ height, width }"></div>
+  <div ref="el" class="vue-monaco text-base" :style="{ height }"></div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, defineProps, watch } from 'vue'
+import { ref, onMounted, onUnmounted, defineProps, watch, computed, defineEmit } from 'vue'
+import { useVModel } from '@vueuse/core'
 import { formatCode } from '../logic/prettier'
 import { monaco } from './MonacoEnv'
 import { isDark, useNavigateControls } from '~/logic'
 
+const emit = defineEmit()
 const props = defineProps({
   code: {
     default:
@@ -21,35 +23,54 @@ const doubled = computed(() => counter.value * 2)
   lang: {
     default: 'typescript',
   },
+  readonly: {
+    default: false,
+  },
   lineNumbers: {
     default: 'off',
   },
-  width: {
-    default: '800px',
-  },
-  height: {
-    default: '300px',
-  },
   scale: {
     default: '1',
   },
+  height: {
+    default: 'auto',
+  },
 })
 
+const code = useVModel(props, 'code', emit, { passive: true })
+const height = computed(() => props.height === 'auto' ? `${code.value.split('\n').length * 1.5}em` : props.height)
+
 const el = ref<HTMLElement>()
 const controls = useNavigateControls()
 let editor: monaco.editor.IStandaloneCodeEditor
 
+const lang = computed(() => {
+  switch (props.lang) {
+    case 'ts':
+      return 'typescript'
+    case 'js':
+      return 'javascript'
+    default:
+      return props.lang
+  }
+})
+
 onMounted(() => {
   editor = monaco.editor.create(el.value!, {
-    language: props.lang,
-    value: `${props.code}\n\n`,
+    language: lang.value,
+    value: props.code,
     tabSize: 2,
     insertSpaces: true,
     detectIndentation: false,
     folding: false,
+    fontSize: 14,
     fontFamily: '\'Fira Code\', monospace',
     lineDecorationsWidth: 0,
     lineNumbersMinChars: 0,
+    scrollBeyondLastLine: false,
+    scrollBeyondLastColumn: 0,
+    automaticLayout: true,
+    readOnly: props.readonly,
     theme: isDark.value ? 'vitesse-dark' : 'vitesse-light',
     lineNumbers: props.lineNumbers as any,
     glyphMargin: false,
@@ -65,11 +86,21 @@ onMounted(() => {
   editor.onDidBlurEditorText(() => controls.paused.value = false)
 
   async function format() {
+    code.value = (await formatCode(code.value, lang.value)).trim()
+  }
+
+  watch(code, (v) => {
     const selection = editor.getSelection()
-    editor.setValue(`${await formatCode(editor.getValue(), props.lang)}\n\n`)
+    editor.setValue(v)
     if (selection)
       editor.setSelection(selection)
-  }
+  })
+
+  editor.getModel()?.onDidChangeContent((e) => {
+    const v = editor.getValue()
+    if (v !== code.value)
+      code.value = v
+  })
 
   // ctrl+s to format
   editor.onKeyDown((e) => {
@@ -85,6 +116,13 @@ watch(isDark, () => monaco.editor.setTheme(isDark.value ? 'vitesse-dark' : 'vite
 onUnmounted(() => editor.dispose())
 </script>
 <style>
+.vue-monaco {
+  background: var(--prism-background);
+  padding: var(--prism-block-padding-y) var(--prism-block-padding-x);
+  margin: var(--prism-block-margin-y) var(--prism-block-margin-x);
+  @apply rounded p-2;
+}
+
 .monaco-editor .monaco-hover {
   @apply rounded overflow-hidden shadow border-none outline-none;
 }

src/components/MonacoEnv.ts

@@ -11,6 +11,9 @@ import '/@monaco-types/@vueuse/core'
 import dark from 'theme-vitesse/themes/vitesse-dark.json'
 import light from 'theme-vitesse/themes/vitesse-light.json'
 
+light.colors['editor.background'] = '#00000000'
+dark.colors['editor.background'] = '#00000000'
+
 monaco.editor.defineTheme('vitesse-light', light as any)
 monaco.editor.defineTheme('vitesse-dark', dark as any)
 
@@ -29,4 +32,15 @@ self.MonacoEnvironment = {
   },
 }
 
+console.log(monaco.languages.typescript.typescriptDefaults.getCompilerOptions())
+
+monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+  ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
+  noUnusedLocals: false,
+  noUnusedParameters: false,
+  allowUnreachableCode: true,
+  allowUnusedLabels: true,
+  strict: true,
+})
+
 export { monaco }

src/layouts/default.vue

@@ -18,6 +18,14 @@
     @apply text-3xl mt-2 mb-4 font-500 opacity-75;
   }
 
+  h3 {
+    @apply text-2xl;
+  }
+
+  p {
+    @apply my-4;
+  }
+
   p ~ h2, ul ~ h2, table ~ h2 {
     @apply mt-10;
   }
@@ -45,16 +53,5 @@
   td, th {
     @apply p-2 py-3;
   }
-
-  *:not(pre) > code {
-    font-size: 0.9em;
-    @apply font-light bg-gray-400 bg-opacity-15 px-1.5 py-0.5 rounded opacity-75;
-  }
-}
-
-.master.default {
-  h1 ~ p {
-    @apply mb-5 -mt-2;
-  }
 }
 </style>

src/styles/code.css

@@ -3,14 +3,14 @@
 
 :root {
   --prism-font-family: 'Fira Code', monospace;
-  --prism-font-size: 0.8rem;
+  --prism-font-size: 0.9rem;
   --prism-block-padding-x: 0;
   --prism-block-padding-y: 0;
 }
 
 html:not(.dark) {
   --prism-foreground: #393a34;
-  --prism-background: transparent;
+  --prism-background: #fafafa;
   --prism-comment: #a0ada0;
   --prism-string: #b56959;
   --prism-literal: #2f8a89;
@@ -32,7 +32,7 @@ html:not(.dark) {
 
 html.dark {
   --prism-foreground: #d4cfbf;
-  --prism-background: transparent;
+  --prism-background: #191919;
   --prism-comment: #758575;
   --prism-string: #d48372;
   --prism-literal: #429988;
@@ -55,3 +55,13 @@ html.dark {
   --prism-line-highlight-background: #444444;
   --prism-selection-background: #444444;
 }
+
+pre[class*='language-'] {
+  @apply p-2;
+}
+
+:not(pre) > code {
+  font-size: 0.9em;
+  background: var(--prism-background);
+  @apply font-light px-1.5 py-0.5 rounded;
+}

vite.config.ts

@@ -27,6 +27,15 @@ export default defineConfig({
         // https://prismjs.com/
         md.use(Prism)
       },
+      transforms: {
+        before(code) {
+          // transform monaco
+          return code.replace(/\n```(\w+?){monaco([\w:,-]*)}[\s\n]*([\s\S]+?)\n```/mg, (full, lang = 'ts', options: string, code: string) => {
+            options = options || ''
+            return `<Monaco :code="'${code.replace(/'/g, '\\\'').replace(/\n/g, '\\n')}'" :lang="${lang}" :readonly="${options.includes('readonly')}" />`
+          })
+        },
+      },
     }),
 
     // https://github.com/antfu/vite-plugin-components

windi.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
     includeAll: true,
   },
   shortcuts: {
-    'bg-main': 'bg-white text-[#121212] dark:(bg-[#121212] text-white)',
+    'bg-main': 'bg-white text-[#121212] dark:(bg-[#121212] text-[#ddd])',
     'icon-btn': `
       inline-block cursor-pointer select-none !outline-none
       opacity-75 transition duration-200 ease-in-out align-middle