@vyr/cli 0.0.11 → 0.0.13

package/output/class-wrapper-plugin/loaders/index.js

@@ -0,0 +1,30 @@
+const { parse } = require('@babel/parser')
+const { default: generate } = require('@babel/generator');
+const { validateObjectPool, wrapperObjectPool } = require('./object-pool');
+const { validateDescriptor, wrapperDescriptor } = require('./descriptor');
+const { validateInputSystem, wrapperInputSystem } = require('./input-system');
+const { validateDynamicInterpreter, wrapperDynamicInterpreter } = require('./dynamic-interpreter')
+
+const wrappers = [
+  { validate: validateObjectPool, executor: wrapperObjectPool },
+  { validate: validateDescriptor, executor: wrapperDescriptor },
+  { validate: validateInputSystem, executor: wrapperInputSystem },
+  { validate: validateDynamicInterpreter, executor: wrapperDynamicInterpreter },
+]
+
+module.exports = function (source) {
+  const options = this.getOptions()
+
+  const ast = parse(source, { sourceType: 'module', plugins: ['typescript'] })
+
+  for (const wrapper of wrappers) {
+    if (wrapper.validate(options)) {
+      wrapper.executor(ast, options)
+      break
+    }
+  }
+
+  const { code } = generate(ast, { retainLines: false, concise: false, jsescOption: { minimal: true, sourceType: 'module' } })
+
+  return code
+}

package/output/class-wrapper-plugin/loaders/input-system.js

@@ -0,0 +1,31 @@
+const types = require("@babel/types");
+const { default: traverse } = require("@babel/traverse");
+const { ifInputSystemStatement } = require("../utils");
+
+const wrapperMethod = (p) => {
+  p.node.body.body.unshift(ifInputSystemStatement);
+  p.stop();
+};
+
+const validateMethod = (p, options) => {
+  if (types.isClassMethod(p.node) === false) return false;
+  if (p.node.kind !== "method") return false;
+  if (p.node.key.name !== "listen") return false;
+  return p.parentPath.parent.id.name === options.className;
+};
+
+const wrapperInputSystem = (ast, options) => {
+  const onEnter = (p) => {
+    if (validateMethod(p, options)) wrapperMethod(p);
+  };
+
+  traverse(ast, { enter: onEnter });
+};
+const validateInputSystem = (options) => {
+  return options.className === "InputSystem";
+};
+
+module.exports = {
+  wrapperInputSystem,
+  validateInputSystem,
+};

package/output/class-wrapper-plugin/loaders/object-pool.js

@@ -0,0 +1,79 @@
+const types = require('@babel/types');
+const { default: traverse } = require('@babel/traverse')
+const { vueImportDeclaration, wrapperDeclaration, wrapperIdentifier } = require('../utils')
+
+const replaceMethodGet = (path) => {
+    const left = path.node.argument.left;
+    const right = path.node.argument.right;
+    if (types.isNullLiteral(right)) {
+        // 提取 instance.deref() 表达式
+        const derefCall = left;
+        // 创建 const ref = instance.deref(); 语句
+        const refDeclaration = types.variableDeclaration('const', [
+            types.variableDeclarator(
+                types.identifier('ref'),
+                derefCall
+            )
+        ]);
+        // 创建 ref? v(ref) : null; 表达式
+        const conditionalExpression = types.conditionalExpression(
+            types.identifier('ref'),
+            types.callExpression(wrapperIdentifier, [types.identifier('ref')]),
+            types.nullLiteral()
+        );
+        // 替换原语句
+        path.replaceWith(refDeclaration);
+        path.insertAfter(types.returnStatement(conditionalExpression))
+    }
+}
+
+const wrapperMethod = (p, method) => {
+    p.traverse({
+        CallExpression(path) {
+            const { node } = path;
+
+            // 检查是否是 instance.deref() 调用
+            if (types.isMemberExpression(node.callee) &&
+                types.isIdentifier(node.callee.property, { name: "deref" }) &&
+                types.isIdentifier(node.callee.object, { name: "instance" }) &&
+                node.arguments.length === 0) {
+
+                const wrappedCall = types.callExpression(
+                    wrapperIdentifier,
+                    [node]
+                );
+                path.replaceWith(wrappedCall);
+
+                path.skip();
+            }
+        }
+    })
+}
+const validateMethod = (p, options) => {
+    if (types.isClassMethod(p.node) === false) return false
+    if (p.node.static === false) return false
+    if (p.parentPath.parent.id.name !== options.className) return
+    return ['get'].includes(p.node.key.name) ? p.node.key.name : false
+}
+
+const wrapperObjectPool = (ast, options) => {
+    //添加导入语句
+    ast.program.body.splice(2, 0, vueImportDeclaration)
+    ast.program.body.splice(3, 0, wrapperDeclaration)
+
+    traverse(ast, {
+        enter: (p) => {
+            const result = validateMethod(p, options)
+            if (result === false) return
+            wrapperMethod(p, result)
+        }
+    })
+}
+const validateObjectPool = (options) => {
+    return options.className === 'ObjectPool'
+}
+
+module.exports = {
+    wrapperObjectPool,
+    validateObjectPool,
+}

package/output/class-wrapper-plugin/package.json

@@ -0,0 +1 @@
+{"name":"@vyr/pack-class-wrapper-plugin","version":"0.0.13","description":"","main":"./index.js","author":"","license":"ISC"}

package/output/class-wrapper-plugin/utils.js

@@ -0,0 +1,79 @@
+const types = require('@babel/types');
+
+// 创建具名导入的标识符
+const reactiveIdentifier = types.identifier("reactive")
+
+// 构建 import { reactive } from 'vue'
+const vueImportDeclaration = types.importDeclaration(
+    [
+        types.importSpecifier(
+            reactiveIdentifier, // 导入的变量名
+            reactiveIdentifier  // 如果重命名，可以用 types.identifier('newName')
+        )
+    ],
+    types.stringLiteral('vue')
+);
+
+// 1. 构建条件表达式 (window['Runtime'] === 'editor')
+const windowRuntime = types.memberExpression(
+    types.identifier('window'),
+    types.stringLiteral('__VYR_RUNTIME_MODE'),
+    true // computed: true 因使用方括号访问
+);
+const runtimeCheck = types.binaryExpression(
+    '===',
+    windowRuntime,
+    types.stringLiteral('editor')
+);
+
+// 2. 构建 reactive 调用 (reactive(raw))
+const reactiveCall = types.callExpression(reactiveIdentifier, [types.identifier('raw')])
+
+// 3. 组装三元表达式
+const conditionalExpr = types.conditionalExpression(
+    runtimeCheck,
+    reactiveCall,
+    types.identifier('raw') // 直接返回 raw
+);
+
+// 4. 构建箭头函数体
+const returnStatement = types.returnStatement(conditionalExpr);
+const functionBody = types.blockStatement([returnStatement]);
+
+// 5. 创建箭头函数表达式
+const arrowFunction = types.arrowFunctionExpression(
+    [types.identifier('raw')], // 参数列表
+    functionBody
+);
+
+// 6. 组装变量声明
+const wrapperIdentifier = types.identifier('wrapper');
+const wrapperDeclarator = types.variableDeclarator(wrapperIdentifier, arrowFunction)
+const wrapperDeclaration = types.variableDeclaration('const', [wrapperDeclarator])
+const wrapperCall = types.callExpression(wrapperIdentifier, [types.thisExpression()])
+const returnwrapper = types.returnStatement(wrapperCall);
+
+const inputRuntime = types.memberExpression(
+    types.identifier('window'),
+    types.stringLiteral('__VYR_RUNTIME.DISABLED_INPUT'),
+    true
+);
+const disabledInputSystem = types.binaryExpression(
+    "===",
+    inputRuntime,
+    types.booleanLiteral(true)
+)
+const ifInputSystemStatement = types.ifStatement(
+    disabledInputSystem,
+    types.returnStatement(),
+    null
+)
+
+module.exports = {
+    vueImportDeclaration,
+    wrapperDeclaration,
+    wrapperIdentifier,
+    wrapperCall,
+    returnwrapper,
+    ifInputSystemStatement,
+}

package/output/declare/package.json

@@ -0,0 +1 @@
+{"name":"@vyr/declare","version":"0.0.13","description":"","main":"./src/index.ts","author":"","license":"MIT","dependencies":{"@vyr/locale":"0.0.13"},"devDependencies":{},"files":["package.json","src/"]}

package/output/declare/src/Config.ts

@@ -0,0 +1,19 @@
+interface PortConfig {
+    main: number
+}
+
+interface RemoteLib {
+    name: string
+    entry: string
+}
+
+interface ClientConfig {
+    readonly languageProviders: any[]
+    readonly language: string
+    readonly port: PortConfig
+}
+
+export {
+    PortConfig,
+    ClientConfig,
+}

package/output/declare/src/Draggable.ts

@@ -0,0 +1,10 @@
+type DraggableEndType = 'insert' | 'insertBefore' | 'insertAfter'
+interface AdditionalData { [k: string]: any }
+interface DraggableData<T extends AdditionalData = AdditionalData> { id: string, data: T }
+
+
+export {
+    DraggableEndType,
+    AdditionalData,
+    DraggableData,
+}

package/output/declare/src/Extension.ts

@@ -0,0 +1,12 @@
+interface Extension {
+    readonly name: string
+    /**扩展的路径 */
+    readonly path: string
+    readonly link: boolean
+    readonly type: 'node' | 'browser' | 'universal'
+    readonly order: number
+}
+
+export {
+    Extension
+}

package/output/declare/src/index.ts

@@ -0,0 +1,3 @@
+export * from './Config'
+export * from './Draggable'
+export * from './Extension'

package/output/declare/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "lib": [
+      "ESNext",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "outDir": "build",
+    "strict": true,
+    "jsx": "preserve",
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": false,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {}
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": []
+}

package/output/design/package.json

@@ -0,0 +1,14 @@
+{
+    "name": "@vyr/design",
+    "version": "0.0.13",
+    "main": "./src/index.ts",
+    "dependencies": {
+        "@popperjs/core": "2.11.7",
+        "vue": "3.5.22",
+        "tinycolor2": "1.6.0"
+    },
+    "files": [
+        "package.json",
+        "src/"
+    ]
+}

package/output/design/src/components/Button.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="vyr-button" :style="style" @click="e => emit('click', e)">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  width: { default: 'auto' }
+})
+const style = computed(() => {
+  let style = ''
+
+  style += props.width === 'auto' ? '' : 'width:100%;text-align:center;'
+
+  return style
+})
+const emit = defineEmits(['click'])
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+@button-background-color: rgba(35, 35, 35, 1);
+@button-border-color: rgba(71, 71, 71, 1);
+@button-background-color-hover: rgba(40, 40, 40, 1);
+@button-border-color-hover: rgba(87, 87, 87, 1);
+@button-background-color-active: rgba(47, 47, 47, 1);
+@button-border-color-active: rgba(111, 111, 111, 1);
+
+.vyr-button {
+  .vyr-font-family;
+  cursor: pointer;
+  color: var(--vyr-font-color);
+  font-size: var(--vyr-font-size);
+  line-height: 1em;
+  padding: 10px 18px;
+  background-color: @button-background-color;
+  display: inline-block;
+  border-radius: var(--vyr-radius-size);
+  border: @button-border-color 1px solid;
+  box-sizing: border-box;
+  user-select: none;
+  letter-spacing: 2px;
+  transition: all 0.2s;
+  margin: 0 20px 0 0;
+
+  &:hover {
+    background-color: @button-background-color-hover;
+    border: @button-border-color-hover 1px solid;
+  }
+
+  &:active {
+    background-color: @button-background-color-active;
+    border: @button-border-color-active 1px solid;
+  }
+}
+
+.vyr-button:last-child {
+  margin-right: 0;
+}
+</style>

package/output/design/src/components/Card.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="vyr-card" :style="style">
+    <div class="card-header" :class="{ 'handle': arrow }" @click="changeVisible">
+      <div class="header-title">
+        <slot v-if="$slots.title" name="title"></slot>
+        <div v-else class="title-text">
+          {{ title }}
+        </div>
+      </div>
+      <div class="header-icon" :class="{ 'expand': state.visible }">
+        <slot name="icon">
+          <i v-if="arrow" class="vyrfont vyr-arrow-down-bold"></i>
+        </slot>
+      </div>
+    </div>
+    <div class="card-body" :class="{ scroll }" ref="refBody" :style="state.style">
+      <template v-if="scroll">
+        <vyr-scroll :margin="8" :padding="8">
+          <slot></slot>
+        </vyr-scroll>
+      </template>
+      <template v-else>
+        <div class="body-wrapper" ref="refWrapper">
+          <slot></slot>
+        </div>
+      </template>
+    </div>
+    <div class="card-tool" v-if="$slots.tool">
+      <slot name="tool"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { Theme } from '../theme';
+import VyrScroll from './Scroll.vue'
+
+const props = defineProps({
+  title: { default: '' },
+  arrow: { default: false },
+  scroll: { default: false }
+})
+
+const refBody = useTemplateRef('refBody')
+const refWrapper = useTemplateRef('refWrapper')
+const state = ref({
+  visible: true,
+  style: '',
+  showing: false,
+})
+const showBodyEnd = () => {
+  state.value.showing = false
+  state.value.style = ''
+}
+const showBody = () => {
+  if (!refWrapper.value) return
+  let height = refWrapper.value.clientHeight
+  state.value.style = `height:${height}px;overflow:hidden;`
+  setTimeout(showBodyEnd, Theme.config.animationTime.value)
+}
+const hideBodyEnd = () => {
+  state.value.showing = false
+  state.value.style = 'display:none;'
+}
+const hideBody = () => {
+  if (!refBody.value) return
+  state.value.style = `height:${refBody.value.clientHeight}px;overflow:hidden;`
+  requestAnimationFrame(() => state.value.style = `height:0px;overflow:hidden;`)
+  setTimeout(hideBodyEnd, Theme.config.animationTime.value)
+}
+const watchVisible = () => {
+  state.value.showing = true
+  if (state.value.visible === true) {
+    state.value.style = 'height:0px;overflow:hidden;'
+    requestAnimationFrame(showBody)
+  } else {
+    hideBody()
+  }
+}
+watch(() => state.value.visible, watchVisible)
+
+const style = computed(() => {
+  return props.scroll ? 'height:100%;' : ''
+})
+
+const changeVisible = () => {
+  if (props.arrow === false || state.value.showing === true) return
+  state.value.visible = !state.value.visible
+}
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+@card-pad-size: 10px;
+@header-icon-width: 25px;
+
+.vyr-card {
+  .vyr-font-family;
+  width: 100%;
+  font-size: var(--vyr-font-size);
+  color: var(--vyr-font-color);
+  border: 1px solid var(--vyr-border-color);
+  box-sizing: border-box;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+
+  .card-header {
+    width: 100%;
+    box-sizing: border-box;
+    line-height: 1.5em;
+    padding: 0 @card-pad-size;
+    background-color: var(--vyr-topic-color);
+    position: relative;
+    left: 0;
+    top: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;
+
+    .header-title {
+      width: calc(~'100% - @{header-icon-width}');
+      display: flex;
+      align-items: center;
+
+      .title-text {
+        .t_hide;
+        line-height: calc(1em + 24px);
+        margin-right: 4px;
+      }
+    }
+
+    .header-icon {
+      width: @header-icon-width;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      align-content: center;
+
+      .vyrfont {
+        cursor: pointer;
+        font-size: var(--vyr-font-size);
+        display: inline-block;
+        transition: all var(--vyr-animation-time);
+        color: var(--vyr-helper-color);
+      }
+    }
+
+    .header-icon.expand {
+      .vyrfont {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  .card-body {
+    width: 100%;
+    box-sizing: border-box;
+    background-color: var(--vyr-topic-color);
+    border-top: var(--vyr-border-size) solid var(--vyr-border-color);
+    transition: height var(--vyr-animation-time);
+    flex: 1;
+
+    .body-wrapper {
+      min-height: @card-pad-size;
+      box-sizing: border-box;
+      padding: @card-pad-size*0.5 @card-pad-size;
+    }
+  }
+
+  .card-body.scroll {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .card-tool {
+    border-top: var(--vyr-border-size) solid var(--vyr-border-color);
+    padding: @card-pad-size;
+    box-sizing: border-box;
+    display: flex;
+
+    >* {
+      font-size: 18px;
+      margin-right: 16px;
+      cursor: pointer;
+      transition: all var(--vyr-animation-time);
+
+      &:hover {
+        color: var(--vyr-active-topic-color);
+      }
+    }
+  }
+}
+</style>