@valten/regulex-visualizer 1.0.1 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valten/regulex-visualizer",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "A Vue component for visualizing regular expressions",
   "keywords": [
     "vue",
@@ -13,7 +13,7 @@
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/index.js",
   "files": [
     "dist",
     "src"
@@ -31,7 +31,6 @@
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@vitejs/plugin-vue": "^5.2.1",
-    "typescript": "^5.4.2",
     "vite": "^6.0.11",
     "vue": "^3.0.0"
   }

package/src/components/RegulexVisualizer.vue

@@ -43,22 +43,28 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, computed, onMounted, nextTick, watch } from 'vue';
 import regulexScript from '../assets/regulex.js?url';
 
-const props = defineProps<{ pattern: string }>();
+const props = defineProps({
+  pattern: {
+    type: String,
+    default: ''
+  }
+});
+
 const emit = defineEmits(['update:pattern']);
 
 // 响应式数据
-const regexInput = ref(props.pattern || '^(a|b)*?$');
+const regexInput = ref(props.pattern || '^1[3-9]\\d{9}$');
 const flagI = ref(false);
 const flagM = ref(false);
 const flagG = ref(false);
 const errorMessage = ref('');
-const graphContainer = ref<HTMLElement | null>(null);
-const paper = ref<any>(null);
-const regulexDeps = ref<any>(null);
+const graphContainer = ref(null);
+const paper = ref(null);
+const regulexDeps = ref(null);
 const params = ref({
   embed: false,
   re: '',
@@ -81,18 +87,19 @@ watch(regexInput, (val) => {
   emit('update:pattern', `/${val}/${flags.value}`);
   visualize();
 });
+
 // 父组件 pattern 变化时同步到输入框
 watch(() => props.pattern, (val) => {
   if (val !== regexInput.value) parseFullRegexString(val);
 });
 
 // 工具函数
-function trim(s: string) {
+function trim(s) {
   return s.replace(/^\s+/, '').replace(/\s+$/, '');
 }
 
 // 辅助函数：从完整的正则表达式字符串（如 /regex/flags）中解析标志并更新状态
-function parseFullRegexString(fullString: string) {
+function parseFullRegexString(fullString) {
   const match = fullString.match(/^\/(.*)\/([gimsuy]*)$/);
   if (match) {
     regexInput.value = match[1];
@@ -116,7 +123,7 @@ function getParams() {
   }
 
   const paramsStr = hash.slice(2);
-  const paramsObj = paramsStr.split("&").reduce((p: any, a) => {
+  const paramsObj = paramsStr.split("&").reduce((p, a) => {
     const parts = a.split("=");
     p[parts[0]] = parts[1];
     return p;
@@ -148,7 +155,7 @@ function hideError() {
   errorMessage.value = '';
 }
 
-function showError(re: string, err: any) {
+function showError(re, err) {
   let msg = ["Error:" + err.message, ""];
   if (typeof err.lastIndex === 'number') {
     msg.push(re);
@@ -161,9 +168,9 @@ function showError(re: string, err: any) {
 function getRegulexDependencies() {
   try {
     if (typeof window !== 'undefined') {
-      if ((window as any).require) {
+      if (window.require) {
         try {
-          const regulex = (window as any).require('regulex');
+          const regulex = window.require('regulex');
           if (regulex) {
             return {
               parse: regulex.parse,
@@ -185,9 +192,9 @@ function getRegulexDependencies() {
 }
 
 // 动态加载 regulex 脚本
-function loadRegulexScript(): Promise<any> {
+function loadRegulexScript() {
   return new Promise((resolve, reject) => {
-    if ((window as any).regulexLoaded) {
+    if (window.regulexLoaded) {
       const deps = getRegulexDependencies();
       if (deps) {
         resolve(deps);
@@ -202,7 +209,7 @@ function loadRegulexScript(): Promise<any> {
     script.src = regulexScript;
 
     script.onload = () => {
-      (window as any).regulexLoaded = true;
+      window.regulexLoaded = true;
       const deps = getRegulexDependencies();
       if (deps) {
         resolve(deps);
@@ -247,7 +254,7 @@ function visualize(skipError = false) {
     // 可视化
     regulexDeps.value.visualize(ast, flags.value, paper.value);
     return true;
-  } catch (e: any) {
+  } catch (e) {
     if (!skipError) {
       showError(re, e);
     }
@@ -261,15 +268,15 @@ function onFlagChange() {
   changeHash();
 }
 
-function onKeyup(e: KeyboardEvent) {
+function onKeyup(e) {
   if (e.keyCode === 13) return; // Enter
-  clearTimeout((window as any).onKeyupTid);
-  (window as any).onKeyupTid = setTimeout(() => {
+  clearTimeout(window.onKeyupTid);
+  window.onKeyupTid = setTimeout(() => {
     visualize();
   }, 100);
 }
 
-function onEnter(e: KeyboardEvent) {
+function onEnter(e) {
   if (e.keyCode === 13) {
     e.preventDefault();
     e.stopPropagation();
@@ -278,12 +285,12 @@ function onEnter(e: KeyboardEvent) {
 }
 
 // 拖拽功能
-function dragGraph(container: HTMLElement) {
+function dragGraph(container) {
   if (!container) return;
 
   container.addEventListener('mousedown', startMove);
 
-  function startMove(e: MouseEvent) {
+  function startMove(e) {
     clearSelect();
     let x = e.clientX, y = e.clientY;
     container.addEventListener('mousemove', onMove);
@@ -291,13 +298,13 @@ function dragGraph(container: HTMLElement) {
     document.addEventListener('mouseup', unbind, true);
     window.addEventListener('mouseup', unbind, true);
 
-    function unbind(e: Event) {
+    function unbind(e) {
       container.removeEventListener('mousemove', onMove);
       document.removeEventListener('mouseup', unbind, true);
       window.removeEventListener('mouseup', unbind, true);
     }
 
-    function onMove(e: MouseEvent) {
+    function onMove(e) {
       let dx = x - e.clientX, dy = y - e.clientY;
       if (dx > 0 && container.scrollWidth - container.scrollLeft - container.clientWidth < 2
           || dx < 0 && container.scrollLeft < 1) {
@@ -321,13 +328,13 @@ function dragGraph(container: HTMLElement) {
 
 function clearSelect() {
   if (window.getSelection) {
-    if ((window.getSelection() as any).empty) {
-      (window.getSelection() as any).empty();
+    if (window.getSelection().empty) {
+      window.getSelection().empty();
     } else if (window.getSelection()?.removeAllRanges) {
       window.getSelection()?.removeAllRanges();
     }
-  } else if ((document as any).selection) {
-    (document as any).selection.empty();
+  } else if (document.selection) {
+    document.selection.empty();
   }
 }
 

package/src/env.d.ts

@@ -1,5 +0,0 @@
-// src/env.d.ts
-declare module '*.js?url' {
-    const src: string;
-    export default src;
-}

package/src/index.d.ts

@@ -1,13 +0,0 @@
-// index.d.ts
-import { DefineComponent, App } from 'vue';
-
-// 1. 定义组件的类型
-// 如果你的组件有 Props，可以将 {} 替换为具体的接口
-declare const RegulexVisualizer: DefineComponent<{}, {}, any>;
-
-// 2. 导出具名组件
-export { RegulexVisualizer };
-
-// 3. (可选) 如果你支持 Vue.use() 全局安装，导出插件类型
-declare const install: (app: App) => void;
-export default install;