feat(50%): typst

extensions/typst/package.json

@@ -27,6 +27,8 @@
     "access": "public"
   },
   "dependencies": {
+    "@myriaddreamin/typst-ts-web-compiler": "0.5.0-rc7",
+    "@myriaddreamin/typst.ts": "0.5.0-rc7",
     "@vue-motion/core": "workspace:*",
     "@vue-motion/lib": "workspace:*",
     "vue": "^3.4.26"

extensions/typst/src/index.ts

@@ -0,0 +1,2 @@
+export { default as Typst } from './index.vue'
+export type { TypstOptions } from './index.vue'

extensions/typst/src/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <g v-bind="widget(options)" v-html="compiled"></g>
+</template>
+
+<script setup lang="ts">
+import { defineWidget } from '@vue-motion/core'
+import { widget, type WidgetOptions } from '@vue-motion/lib'
+import { onMounted, ref, useSlots } from 'vue'
+import { $typst } from '@myriaddreamin/typst.ts/dist/esm/contrib/snippet'
+
+export interface TypstOptions extends WidgetOptions {
+  width?: number
+  height?: number
+}
+
+const props = defineProps<TypstOptions>()
+const options = defineWidget<TypstOptions>(props)
+
+const compiled = ref()
+
+const slots = useSlots()
+const content = slots.default ? slots.default().map(vnode => vnode.children).join('') : ''
+
+onMounted(async () => {
+  console.log(content)
+  compiled.value = await $typst.svg({
+    mainContent: content, 
+  })
+})
+</script>