feat(extensions): code

extensions/code/package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@vue-motion/core": "workspace:*",
     "@vue-motion/lib": "workspace:*",
+    "shiki": "^1.17.6",
     "vue": "^3.4.26"
   },
   "devDependencies": {

extensions/code/src/index.ts

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

extensions/code/src/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { defineWidget } from '@vue-motion/core'
+import { WidgetOptions, widget } from '@vue-motion/lib'
+import { CodeToHastOptions, codeToHtml } from 'shiki'
+import { ref, useSlots } from 'vue';
+
+export interface CodeOptions extends WidgetOptions {
+  shikiOptions?: CodeToHastOptions
+  lang: string
+  theme: string
+  width: number
+  height: number
+}
+
+const props = defineProps<CodeOptions>()
+const options = defineWidget<CodeOptions>(props)
+
+const slots = useSlots()
+const codes = slots.default ? slots.default().map(vnode => vnode.children).join('') : ''
+const content = ref(await codeToHtml(codes, {
+  ...options.shikiOptions,
+  lang: options.lang,
+  theme: options.theme,
+}))
+</script>
+
+<template>
+  <g v-bind="widget(options)">
+    <foreignObject x="20" y="20" :width="options.width" :height="options.height">
+      <!--
+      In the context of SVG embeded into HTML, the XHTML namespace could
+      be avoided, but it is mandatory in the context of an SVG document
+    -->
+      <div xmlns="http://www.w3.org/1999/xhtml" style="color: white" v-html="content"></div>
+    </foreignObject>
+  </g>
+</template>

package.json

@@ -19,7 +19,11 @@
     "test": "pnpm run --filter=* test",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
-    "pub:core": "pnpm run build:core && pnpm run --filter=./packages/* --sort pub"
+    "pub:core": "pnpm run build:core && pnpm run --filter=./packages/* --sort pub",
+    "preversion": "pnpm build:core && pnpm build:ext",
+    "change": "changeset add",
+    "release": "pnpm preversion && changeset version",
+    "pub": "changeset publish"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.26.0",