@cbjwwwcode/common 0.0.1

package/src/loader.ts

@@ -0,0 +1,62 @@
+import type { UseScriptTagOptions } from '@vueuse/core';
+
+import { useScriptTag } from '@vueuse/core';
+
+import { md5 } from './crypto';
+import { loadJsStore } from './idb-keyval';
+
+export async function loaderScript(
+  cdnUrl: string,
+  onLoaded?: (el: HTMLScriptElement) => void,
+  options?: UseScriptTagOptions,
+) {
+  const { load } = useScriptTag(cdnUrl, onLoaded, {
+    attrs: { id: `remoteJs-${md5(cdnUrl)}` },
+    immediate: false,
+    ...options,
+  });
+  await load();
+}
+
+export async function useStyleLink(
+  link: string,
+  onLoaded?: (el: Element) => void,
+) {
+  return new Promise((resolve, reject) => {
+    const linkId = `remoteCss-${md5(link)}`;
+    let el = document.querySelector<HTMLLinkElement>(`#${linkId}`);
+    let shouldAppend = false;
+    if (!el) {
+      el = document.createElement('link');
+      el.setAttribute('rel', 'stylesheet');
+      el.setAttribute('id', linkId);
+      el.setAttribute('href', link);
+      shouldAppend = true;
+    }
+    el.addEventListener('error', (event: any) => reject(event));
+    el.addEventListener('abort', (event: any) => reject(event));
+    el.addEventListener('load', () => {
+      onLoaded?.(el);
+      resolve(el);
+    });
+    if (shouldAppend) {
+      document.head.append(el);
+    }
+  });
+}
+
+export async function loadRemoteModule(moduleName: string, url: string) {
+  const cacheId = `${moduleName}-${md5(url)}`;
+  const content = await loadJsStore(cacheId, async () => {
+    // 发送 HTTP GET 请求获取模块
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`无法加载远程模块: ${response.statusText}`);
+    }
+    return await response.text();
+  });
+  return new Function('module', 'exports', `${content}\nreturn exports;`)(
+    { exports: {} },
+    {},
+  );
+}

package/src/lowlight/common.ts

@@ -0,0 +1,79 @@
+import arduino from 'highlight.js/lib/languages/arduino';
+import bash from 'highlight.js/lib/languages/bash';
+import c from 'highlight.js/lib/languages/c';
+import cpp from 'highlight.js/lib/languages/cpp';
+import csharp from 'highlight.js/lib/languages/csharp';
+import css from 'highlight.js/lib/languages/css';
+import diff from 'highlight.js/lib/languages/diff';
+import go from 'highlight.js/lib/languages/go';
+import graphql from 'highlight.js/lib/languages/graphql';
+import ini from 'highlight.js/lib/languages/ini';
+import java from 'highlight.js/lib/languages/java';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import kotlin from 'highlight.js/lib/languages/kotlin';
+import less from 'highlight.js/lib/languages/less';
+import lua from 'highlight.js/lib/languages/lua';
+import makefile from 'highlight.js/lib/languages/makefile';
+import markdown from 'highlight.js/lib/languages/markdown';
+import objectivec from 'highlight.js/lib/languages/objectivec';
+import perl from 'highlight.js/lib/languages/perl';
+import php from 'highlight.js/lib/languages/php';
+import phpTemplate from 'highlight.js/lib/languages/php-template';
+import plaintext from 'highlight.js/lib/languages/plaintext';
+import python from 'highlight.js/lib/languages/python';
+import pythonRepl from 'highlight.js/lib/languages/python-repl';
+import r from 'highlight.js/lib/languages/r';
+import ruby from 'highlight.js/lib/languages/ruby';
+import rust from 'highlight.js/lib/languages/rust';
+import scss from 'highlight.js/lib/languages/scss';
+import shell from 'highlight.js/lib/languages/shell';
+import sql from 'highlight.js/lib/languages/sql';
+import swift from 'highlight.js/lib/languages/swift';
+import typescript from 'highlight.js/lib/languages/typescript';
+import vbnet from 'highlight.js/lib/languages/vbnet';
+import wasm from 'highlight.js/lib/languages/wasm';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
+
+export const grammars = {
+  arduino,
+  bash,
+  c,
+  cpp,
+  csharp,
+  css,
+  diff,
+  go,
+  graphql,
+  html: xml,
+  ini,
+  java,
+  javascript,
+  json,
+  kotlin,
+  less,
+  lua,
+  makefile,
+  markdown,
+  objectivec,
+  perl,
+  php,
+  'php-template': phpTemplate,
+  plaintext,
+  text: plaintext,
+  python,
+  'python-repl': pythonRepl,
+  r,
+  ruby,
+  rust,
+  scss,
+  shell,
+  sql,
+  swift,
+  typescript,
+  vbnet,
+  wasm,
+  xml,
+  yaml,
+};

package/src/lowlight/hljs.ts

@@ -0,0 +1,11 @@
+import hljs from 'highlight.js/lib/core';
+
+import { grammars } from './common';
+
+Object.entries(grammars).forEach(([lang, languageFn]) => {
+  if (Reflect.has(grammars, lang)) {
+    hljs.registerLanguage(lang, languageFn);
+  }
+});
+
+export default hljs;

package/src/lowlight/index.ts

@@ -0,0 +1,22 @@
+import { grammars } from './common';
+import { createLowlight } from './lowlights.ts';
+
+import 'highlight.js/styles/atom-one-dark.min.css';
+
+import { default as hljs } from './hljs';
+export const highlightLanguages = Object.keys(grammars);
+export const lowlight = createLowlight(grammars);
+export const VueLowlight = {
+  hljs,
+  common: grammars,
+  all: grammars,
+  createLowlight,
+  highlightLanguages
+};
+export {
+  hljs
+}
+export type Lowlight = typeof lowlight;
+
+
+

package/src/lowlight/lowlights.ts

@@ -0,0 +1,231 @@
+import HighlightJs from './hljs';
+
+const emptyOptions: Record<string, any> = {};
+
+const defaultPrefix = 'hljs-';
+
+export function createLowlight(grammars: any) {
+  const high = HighlightJs.newInstance();
+
+  if (grammars) {
+    register(grammars);
+  }
+
+  function highlight(language: any, value: any, options: any) {
+    // assert(typeof language === 'string', 'expected `string` as `name`')
+    // assert(typeof value === 'string', 'expected `string` as `value`')
+    const settings = options || emptyOptions;
+    const prefix =
+      typeof settings.prefix === 'string' ? settings.prefix : defaultPrefix;
+
+    if (!high.getLanguage(language)) {
+      throw new Error(`Unknown language: \`${language}\` is not registered`);
+    }
+
+    // See: <https://github.com/highlightjs/highlight.js/issues/3621#issuecomment-1528841888>
+    high.configure({ __emitter: HastEmitter, classPrefix: prefix });
+
+    const result: any =
+      /** @type {HighlightResult & { _emitter: HastEmitter }} */ high.highlight(
+        value,
+        {
+          ignoreIllegals: true,
+          language,
+        },
+      );
+
+    // `highlight.js` seems to use this (currently) for broken grammars, so let’s
+    // keep it in there just to be sure.
+    /* c8 ignore next 5 */
+    if (result.errorRaised) {
+      throw new Error('Could not highlight with `Highlight.js`', {
+        cause: result.errorRaised,
+      });
+    }
+
+    const root = result._emitter.root;
+
+    // Cast because it is always defined.
+    const data = /** @type {RootData} */ root.data;
+
+    data.language = result.language;
+    data.relevance = result.relevance;
+
+    return root;
+  }
+
+  function highlightAuto(value: any, options: any) {
+    // assert(typeof value === 'string', 'expected `string` as `value`')
+    const settings = options || emptyOptions;
+    const subset = settings.subset || listLanguages();
+
+    let index = -1;
+    let relevance = 0;
+    /** @type {Root | undefined} */
+    let result;
+
+    while (++index < subset.length) {
+      const name = subset[index];
+
+      if (!high.getLanguage(name)) continue;
+
+      const current = highlight(name, value, options);
+
+      if (
+        current.data &&
+        current.data.relevance !== undefined &&
+        current.data.relevance > relevance
+      ) {
+        relevance = current.data.relevance;
+        result = current;
+      }
+    }
+
+    return (
+      result || {
+        type: 'root',
+        children: [],
+        data: { language: undefined, relevance },
+      }
+    );
+  }
+
+  function listLanguages() {
+    return high.listLanguages();
+  }
+
+  function register(grammarsOrName: any, grammar?: any) {
+    if (typeof grammarsOrName === 'string') {
+      // assert(grammar !== undefined, 'expected `grammar`')
+      high.registerLanguage(grammarsOrName, grammar);
+    } else {
+      /** @type {string} */
+      let name;
+
+      for (name in grammarsOrName) {
+        if (grammarsOrName[name]) {
+          high.registerLanguage(name, grammarsOrName[name]);
+        }
+      }
+    }
+  }
+
+  function registerAlias(aliasesOrName: any, alias: any) {
+    if (typeof aliasesOrName === 'string') {
+      // assert(alias !== undefined)
+      high.registerAliases(
+        // Note: copy needed because hljs doesn’t accept readonly arrays yet.
+        typeof alias === 'string' ? alias : [...alias],
+        { languageName: aliasesOrName },
+      );
+    } else {
+      /** @type {string} */
+      let key;
+
+      for (key in aliasesOrName) {
+        if (aliasesOrName[key]) {
+          const aliases = aliasesOrName[key];
+          high.registerAliases(
+            // Note: copy needed because hljs doesn’t accept readonly arrays yet.
+            typeof aliases === 'string' ? aliases : [...aliases],
+            { languageName: key },
+          );
+        }
+      }
+    }
+  }
+
+  function registered(aliasOrName: any) {
+    return Boolean(high.getLanguage(aliasOrName));
+  }
+
+  return {
+    ...high,
+    highlight,
+    highlightAuto,
+    listLanguages,
+    register,
+    registerAlias,
+    registered,
+  };
+}
+
+class HastEmitter {
+  options: any;
+  root: Record<string, any>;
+  stack: any[] = [];
+  constructor(options: any) {
+    this.options = options;
+    this.root = {
+      type: 'root',
+      children: [],
+      data: { language: undefined, relevance: 0 },
+    };
+    this.stack = [this.root];
+  }
+
+  __addSublanguage(other: any, name: any) {
+    const current = this.stack[this.stack.length - 1];
+    // Assume only element content.
+    const results = other.root.children;
+    if (name) {
+      current.children.push({
+        type: 'element',
+        tagName: 'span',
+        properties: { className: [name] },
+        children: results,
+      });
+    } else {
+      current.children.push(...results);
+    }
+  }
+
+  addText(value: any) {
+    if (value === '') return;
+    const current = this.stack[this.stack.length - 1];
+    const tail = current.children[current.children.length - 1];
+
+    if (tail && tail.type === 'text') {
+      tail.value += value;
+    } else {
+      current.children.push({ type: 'text', value });
+    }
+  }
+
+  closeNode() {
+    this.stack.pop();
+  }
+
+  endScope() {
+    this.closeNode();
+  }
+
+  finalize() {}
+
+  openNode(name: string) {
+    // First “class” gets the prefix. Rest gets a repeated underscore suffix.
+    // See: <https://github.com/highlightjs/highlight.js/commit/51806aa>
+    // See: <https://github.com/wooorm/lowlight/issues/43>
+    const className = name.split('.').map((d, i) => {
+      return i ? d + '_'.repeat(i) : this.options.classPrefix + d;
+    });
+    const current = this.stack[this.stack.length - 1];
+    const child = {
+      type: 'element',
+      tagName: 'span',
+      properties: { className },
+      children: [],
+    };
+
+    current.children.push(child);
+    this.stack.push(child);
+  }
+
+  startScope(rawName: any) {
+    this.openNode(String(rawName));
+  }
+
+  toHTML() {
+    return '';
+  }
+}

package/src/nprogress.ts

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import type { NProgressOptions } from 'nprogress';
+import  nProgress from 'nprogress';
+
+// @ts-ignore
+const options: Partial<NProgressOptions> = {
+  minimum: 0.1,        // 初始最小进度
+  showSpinner: false,  // 关闭右上角旋转loading（推荐false）
+  speed: 300,          // 动画时长 ms
+  trickle: true,       // 是否自动递增
+  trickleRate: 0.02,
+  trickleSpeed: 800,
+}
+const progress = nProgress.configure(options)
+export function useProgress(options?: Partial<NProgressOptions>){
+  if (options){  progress.configure(options) }
+  return progress
+}
+
+export { type NProgress, type NProgressOptions } from 'nprogress';

package/src/sortablejs.ts

@@ -0,0 +1 @@
+// export { default as Sortable, type SortableOptions } from 'sortablejs';

package/src/tippy.ts

@@ -0,0 +1,3 @@
+
+// @ts-ignore
+// export { default as tippy } from 'tippy.js';

package/src/toastify.ts

@@ -0,0 +1,19 @@
+import type { App } from 'vue';
+
+import Toastify, { toast } from 'vue3-toastify';
+
+export { toast };
+
+export type { Toast, ToastOptions } from 'vue3-toastify';
+
+export function setupToast(app: App, useHandler?: (app: App) => void) {
+  // @ts-ignore
+  app.use(Toastify, {
+    theme: 'colored',
+    autoClose: 2000,
+    useHandler,
+  });
+  app.provide('toast', toast);
+}
+
+export * as ToastApi from 'vue3-toastify';

package/src/vee-validate.ts

@@ -0,0 +1 @@
+export * as VeeValidate from 'vee-validate';

package/src/vtj/index.ts

@@ -0,0 +1,2 @@
+export * from './node';
+export * from './provider';

package/src/vtj/node.ts

@@ -0,0 +1,158 @@
+import type {
+  ApiSchema,
+  BlockSchema,
+  Dependencie,
+  MetaSchema,
+  ProjectSchema
+} from '@vtj/core';
+
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+  shallowReactive,
+  shallowRef
+} from 'vue';
+
+import {
+  createFunction,
+  loaderScript,
+  md5,
+  useStyleLink,
+} from '../index';
+
+import { useGlobalProvider } from './provider';
+// import { parseVue } from "@vtj/parser";
+
+export interface JsonNodeProps {
+  apis?: ApiSchema[];
+  assets?: {
+    css: string[];
+    js: string[];
+    script: string[];
+  };
+  blocks?: BlockSchema[];
+  dependencies?: Dependencie[];
+  id?: string;
+  meta?: MetaSchema[];
+  mock?: boolean;
+  mode?: 'Design' | 'Raw' | 'Runtime' | 'VNode';
+  refreshKey?: string;
+  schema?: BlockSchema;
+  url?: string;
+  sources?: string
+  project?: Partial<ProjectSchema>
+}
+
+export const setupJsonNode = function (props: JsonNodeProps) {
+  const schema = shallowRef({});
+  // const sfcId = useId()
+  const { proxy } = getCurrentInstance()!;
+  const cacheId = computed(() => md5(JSON.stringify(props)));
+  const refreshKey = ref(0);
+  const dsl = shallowRef<BlockSchema | null>(props.schema || null);
+  const loading = ref(false);
+  const { cacheNodes, provider, initProject } = useGlobalProvider();
+  // @ts-ignore
+  const renderer = computed(() => schema.value?.renderer || null);
+  const assets = shallowReactive({
+    css: [],
+    js: [],
+    script: [],
+    ...props.assets,
+  });
+  const removes = ref<Element[]>([]);
+
+  const loadAssets = async () => {
+    const promiseList: Promise<any>[] = [];
+    if (assets.css && assets.css.length > 0) {
+      for (const link of assets.css) {
+        promiseList.push(
+          useStyleLink(link, (el) => {
+            removes.value.push(el);
+          }),
+        );
+      }
+    }
+    if (assets.js && assets.js.length > 0) {
+      for (const link of assets.js) {
+        promiseList.push(loaderScript(link));
+      }
+    }
+    if (assets.script && assets.script.length > 0) {
+      for (const script of assets.script) {
+        const fnRes = createFunction(`return async ()=>{ ${script} }`, {
+          proxy,
+        });
+        if (fnRes) {
+          promiseList.push(fnRes.call({ proxy }));
+        }
+      }
+    }
+    if (promiseList.length > 0) {
+      await Promise.all(promiseList);
+    }
+  };
+
+  onMounted(async () => {
+    await initProject(props);
+    loading.value = true;
+    await loadAssets();
+    if (cacheNodes[cacheId.value]) {
+      schema.value = cacheNodes[cacheId.value];
+    } else {
+      if (props.url && !dsl.value) {
+        dsl.value = await provider.getDslByUrl(props.url);
+      }
+      // if (props.sources && !dsl.value){
+      //   dsl.value = await parseVue({
+      //     id: sfcId,
+      //     name: 'SfcParse',
+      //     source: props.sources,
+      //     project: {
+      //       id: "",
+      //       name: "",
+      //       ...provider.project
+      //     },
+      //   })
+      //   console.log('sfc',dsl.value)
+      // }
+      if (dsl.value) {
+        schema.value = provider.createDslRenderer(dsl.value);
+      }
+      cacheNodes[cacheId.value] = schema.value;
+    }
+    refreshKey.value++;
+    loading.value = false;
+  });
+
+  onBeforeUnmount(() => {
+    if (removes.value.length > 0) {
+      removes.value.forEach((el) => {
+        el.remove();
+      });
+    }
+  });
+
+  const store = {
+    schema,
+    renderer,
+    cacheNodes,
+    provider,
+    loading,
+    cacheId,
+    refreshKey,
+  };
+  provide('JsonNode', store);
+  return store;
+};
+
+declare type JsonNodeType = ReturnType<typeof setupJsonNode>;
+
+export const useJsonNode = () => {
+  return inject('JsonNode', null as unknown) as JsonNodeType;
+};