feat: 1.注册vue SFC #ing

JuckZ · Sep 21, 2023 · 5baff44 · 5baff44
1 parent 03e37ba
commit 5baff44
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 8 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -312,7 +312,8 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
  }
  this.registerMarkdownPostProcessor(codeEmoji);
  this.registerMarkdownCodeBlockProcessor('plantuml', this.process.UMLProcess);
- this.registerMarkdownCodeBlockProcessor('vue', this.process.VueProcess);
+ this.registerMarkdownCodeBlockProcessor('vue-widget', this.process.VueProcess);
+ this.registerMarkdownCodeBlockProcessor('react-widget', this.process.ReactProcess);
 
  this.app.workspace.onLayoutReady(async () => {
  if (SETTINGS.debugEnable.value) {

diff --git a/src/process/Process.ts b/src/process/Process.ts
@@ -5,7 +5,7 @@ import plantuml from 'plantuml-encoder';
 import { v4 as uuidv4 } from 'uuid';
 import { request } from '@/utils/request';
 import type AwesomeBrainManagerPlugin from '@/main';
-import { insertImageWithMap, insertVueComponent } from '@/utils/content';
+import { insertImageWithMap, insertReactComponent, insertVueComponent } from '@/utils/content';
 
 export default class Process {
  plugin: AwesomeBrainManagerPlugin;
@@ -28,6 +28,10 @@ export default class Process {
  insertVueComponent(el, ctx, source);
  };
 
+ ReactProcess = async (source, el, ctx) => {
+ insertVueComponent(el, ctx, source);
+ };
+
  // https://github.com/joethei/obsidian-plantuml
  UMLProcess = async (source: string, el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
  const debounceMap = new Map<

diff --git a/src/utils/content.ts b/src/utils/content.ts
@@ -1,5 +1,6 @@
-import type { MarkdownPostProcessorContext } from 'obsidian';
-import { VueApp, createApp } from 'vue/dist/vue.esm-bundler.js';
+import type { MarkdownPostProcessorContext, TFile } from 'obsidian';
+import naive from 'naive-ui';
+import * as vue from 'vue/dist/vue.esm-bundler.js';
 import TestTitle from '@/ui/TestTitle';
 import { LoggerUtil } from '@/utils/logger';
 
@@ -8,6 +9,49 @@ interface MContent {
  posNum?: number;
 }
 
+// TODO registerCodeBlockComponents
+export async function registerComponent(file: TFile, vueApp: vue.VueApp) {
+ const content = await app.vault.read(file);
+ const templateMatch = content.match(/<template>([\s\S]*?)<\/template>/);
+ const scriptMatch = content.match(/<script>([\s\S]*?)<\/script>/);
+
+ if (templateMatch && scriptMatch) {
+ const templateContent = templateMatch[1].trim();
+ const scriptContent = scriptMatch[1].trim();
+ const compName = file.name.replace('.' + file.extension, '');
+ vueApp.component(compName, {
+ data() {
+ return {
+ message: 'hello juck',
+ };
+ },
+ template: templateContent,
+ });
+ }
+}
+
+export async function awaitFilesLoaded() {
+ let len: number;
+ do {
+ len = app.vault.getAllLoadedFiles().length;
+ await new Promise(r => setTimeout(r, 500));
+ } while (len != app.vault.getAllLoadedFiles().length);
+}
+
+async function registerComponentsFromDirectory(dir, vueApp) {
+ try {
+ await awaitFilesLoaded();
+ const sfcList = app.vault.getFiles().filter(file => {
+ return file.path.contains(dir) && file.extension === 'vue';
+ });
+ for (const file of sfcList) {
+ await registerComponent(file, vueApp);
+ }
+ } catch (e) {
+ console.error(e);
+ }
+}
+
 //credit to chhoumann, original code from: https://github.com/chhoumann/quickadd
 export function insertAfterHandler(targetString: string, formatted: string, fileContent: string) {
  // const targetString: string = plugin.settings.InsertAfter;
@@ -151,13 +195,15 @@ export function insertSvgImage(el: HTMLElement, image: string) {
  el.insertAdjacentHTML('beforeend', svg.documentElement.outerHTML);
 }
 
-export function registerVueComponent(vueApp: VueApp) {
+export async function registerVueComponent(vueApp: vue.VueApp) {
+ vueApp.use(naive);
  // TODO 扫描并注册某个文件夹下所有的组件
+ await registerComponentsFromDirectory('vue-widget', vueApp);
  vueApp.component('TestTitle', TestTitle);
 }
 
-export function insertVueComponent(el: HTMLElement, ctx: MarkdownPostProcessorContext, source: string) {
- const vueApp = createApp({
+export async function insertVueComponent(el: HTMLElement, ctx: MarkdownPostProcessorContext, source: string) {
+ const vueApp = vue.createApp({
  data() {
  return {
  message: 'ignore this place',
@@ -166,7 +212,21 @@ export function insertVueComponent(el: HTMLElement, ctx: MarkdownPostProcessorCo
  template: source,
  });
  // TODO 优化方向1，根据source进行有选择的注入组件，而非全部注入；优化方向2：只使用一个实例，通过定位等方式在不同元素上使用是否可行
- registerVueComponent(vueApp);
+ await registerVueComponent(vueApp);
+ const container = document.createElement('span');
+ vueApp.mount(container);
+ el.replaceChildren(container);
+}
+
+export function insertReactComponent(el: HTMLElement, ctx: MarkdownPostProcessorContext, source: string) {
+ const vueApp = vue.createApp({
+ data() {
+ return {
+ message: 'ignore this place',
+ };
+ },
+ template: source,
+ });
  const container = document.createElement('span');
  vueApp.mount(container);
  el.replaceChildren(container);