├── .github
    └── FUNDING.yml
├── .gitignore
├── .npmrc
├── .vscode
    ├── extensions.json
    └── settings.json
├── LICENSE
├── README.md
├── index.html
├── netlify.toml
├── package.json
├── pnpm-lock.yaml
├── public
    ├── favicon.png
    ├── favicon.svg
    ├── pwa-192x192.png
    ├── pwa-512x512.png
    ├── robots.txt
    └── safari-pinned-tab.svg
├── src
    ├── App.vue
    ├── components
    │   ├── Editor.vue
    │   ├── ErrorPopup.vue
    │   ├── NavBar.vue
    │   ├── ResultArea.vue
    │   └── SearchArea.vue
    ├── logics
    │   ├── dark.ts
    │   ├── index.ts
    │   └── store.ts
    ├── main.ts
    ├── modes
    │   └── regex.ts
    ├── pages
    │   ├── [...all].vue
    │   └── index.vue
    ├── shims.d.ts
    └── styles
    │   └── main.css
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: antfu
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .vite-ssg-dist
3 | .vite-ssg-temp
4 | *.local
5 | dist
6 | dist-ssr
7 | node_modules
8 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": [
3 |     "johnsoncodehk.volar",
4 |     "lokalise.i18n-ally",
5 |     "antfu.iconify",
6 |     "dbaeumer.vscode-eslint"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "volar.tsPlugin": true,
 3 |   "i18n-ally.localesPaths": "locales",
 4 |   "i18n-ally.keystyle": "nested",
 5 |   "i18n-ally.sortKeys": true,
 6 |   "cSpell.words": [
 7 |     "Vitesse"
 8 |   ],
 9 |   "typescript.tsdk": "node_modules/typescript/lib",
10 |   "volar.tsPluginStatus": false,
11 |   "svg.preview.background": "transparent"
12 | }
13 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Anthony Fu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align='center'>
 2 |   <img src="./public/favicon.png" height='100' width='100'>
 3 | </p>
 4 | <h1 align='center'>ReX</h1>
 5 | <p align='center'>
 6 | Transform texts with RegExp like a Pro.
 7 | </p>
 8 | <p align='center'>
 9 | <a href="https://rex.antfu.me/">Go to App</a>
10 | </p>
11 | 
12 | ## Motivation
13 | 
14 | Sometimes you need to do some clean up or transform for texts in batches. You can either edit manually line-by-line, using multi-cursors in your editor, apply find & replace with RegExp, or write a script for that.
15 | 
16 | Editing manually sometime could be laborious, writing a script could be complicated and overkill. Replacing via RegExp sounds like a good options to me, but somehow most editors can only do replacement but lack of the feature "keep only what matched".
17 | 
18 | Introducing **ReX**, an tiny app for me to do the text transformation without causing my headache. It was wrote in like 4 hours, but I will try to add more features as needed along the way.
19 | 
20 | So, yeah, enjoy. I would be glad if you find it useful as well.
21 | 
22 | 
23 | ## Sponsors
24 | 
25 | <p align="center">
26 |   <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg">
27 |     <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/>
28 |   </a>
29 | </p>
30 | 
31 | ## License
32 | 
33 | MIT License © 2021 [Anthony Fu](https://github.com/antfu)
34 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 7 |   <link rel="apple-touch-icon" href="/pwa-192x192.png">
 8 |   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
 9 |   <meta name="msapplication-TileColor" content="#00aba9">
10 |   <meta name="theme-color" content="#ffffff">
11 | </head>
12 | <body>
13 |   <div id="app"></div>
14 |   <script>
15 |     (function() {
16 |       const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
17 |       const setting = localStorage.getItem('color-schema') || 'auto'
18 |       if (setting === 'dark' || (prefersDark && setting !== 'light'))
19 |         document.documentElement.classList.toggle('dark', true)
20 |     })()
21 |   </script>
22 |   <script type="module" src="/src/main.ts"></script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build.environment]
 2 |   NPM_FLAGS = "--prefix=/dev/null"
 3 |   NODE_VERSION = "14"
 4 | 
 5 | [build]
 6 |   publish = "dist"
 7 |   command = "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build"
 8 | 
 9 | [[redirects]]
10 |   from = "/*"
11 |   to = "/index.html"
12 |   status = 200
13 | 
14 | [[headers]]
15 |   for = "/manifest.webmanifest"
16 |   [headers.values]
17 |     Content-Type = "application/manifest+json"


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "vite --port 3333 --open",
 5 |     "build": "cross-env NODE_ENV=production vite build"
 6 |   },
 7 |   "dependencies": {
 8 |     "@vueuse/core": "^4.2.2",
 9 |     "@vueuse/head": "^0.3.1",
10 |     "codemirror": "^5.59.4",
11 |     "vue": "^3.0.6",
12 |     "vue-router": "^4.0.4"
13 |   },
14 |   "devDependencies": {
15 |     "@antfu/eslint-config": "^0.4.3",
16 |     "@iconify/json": "^1.1.308",
17 |     "@types/codemirror": "^0.0.108",
18 |     "@typescript-eslint/eslint-plugin": "^4.15.2",
19 |     "@vitejs/plugin-vue": "^1.1.4",
20 |     "@vue/compiler-sfc": "^3.0.6",
21 |     "@vue/server-renderer": "^3.0.6",
22 |     "@vueuse/motion": "^1.1.0",
23 |     "cross-env": "^7.0.3",
24 |     "eslint": "^7.20.0",
25 |     "pnpm": "^5.18.1",
26 |     "typescript": "^4.2.2",
27 |     "vite": "^2.0.3",
28 |     "vite-plugin-components": "^0.7.3",
29 |     "vite-plugin-icons": "^0.2.4",
30 |     "vite-plugin-pages": "^0.4.5",
31 |     "vite-plugin-pwa": "^0.5.5",
32 |     "vite-plugin-windicss": "^0.5.2",
33 |     "vite-ssg": "^0.8.11"
34 |   },
35 |   "eslintConfig": {
36 |     "extends": "@antfu/eslint-config",
37 |     "rules": {
38 |       "no-unused-vars": "off",
39 |       "@typescript-eslint/no-unused-vars": "off"
40 |     }
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antfu/rex/68cff77ed58d85abedb6c66400a7dff80d5b7175/public/favicon.png


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
 2 |   <style>
 3 |     path {
 4 |       fill: #222;
 5 |     }
 6 |     @media (prefers-color-scheme: dark) {
 7 |       path {
 8 |         fill: #ffffff;
 9 |       }
10 |     }
11 |   </style>
12 |   <path d="M14 4H9v2h5v2h-4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h6V6a2.002 2.002 0 0 0-2-2zm0 8h-4v-2h4z">
13 |   </path>
14 |   <path d="M22 26v-8h-2v1h-2v2h2v5h-2v2h6v-2h-2z"></path>
15 |   <path d="M2 2h2v14H2z"></path>
16 |   <path d="M28 16h2v14h-2z"></path>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/public/pwa-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antfu/rex/68cff77ed58d85abedb6c66400a7dff80d5b7175/public/pwa-192x192.png


--------------------------------------------------------------------------------
/public/pwa-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antfu/rex/68cff77ed58d85abedb6c66400a7dff80d5b7175/public/pwa-512x512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /
3 | 


--------------------------------------------------------------------------------
/public/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="580.000000pt" height="580.000000pt" viewBox="0 0 580.000000 580.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013
 9 | </metadata>
10 | <g transform="translate(0.000000,580.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M1130 3795 l0 -875 125 0 125 0 0 875 0 875 -125 0 -125 0 0 -875z"/>
13 | <path d="M2010 4295 l0 -125 310 0 310 0 0 -125 0 -125 -262 0 c-161 0 -278
14 | -4 -303 -11 -63 -18 -118 -62 -150 -121 -29 -52 -30 -57 -33 -217 -2 -101 1
15 | -181 8 -209 17 -67 60 -123 122 -157 l53 -30 408 -3 407 -3 0 508 c0 304 -5
16 | 526 -11 552 -15 64 -59 122 -121 156 l-53 30 -342 3 -343 3 0 -126z m620 -750
17 | l0 -125 -250 0 -250 0 0 125 0 125 250 0 250 0 0 -125z"/>
18 | <path d="M4380 2045 l0 -875 125 0 125 0 0 875 0 875 -125 0 -125 0 0 -875z"/>
19 | <path d="M3380 2605 l0 -65 -125 0 -125 0 0 -120 0 -120 125 0 125 0 0 -315 0
20 | -315 -125 0 -125 0 0 -125 0 -125 375 0 375 0 0 125 0 125 -125 0 -125 0 0
21 | 500 0 500 -125 0 -125 0 0 -65z"/>
22 | </g>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useHead } from '@vueuse/head'
 3 | 
 4 | // https://github.com/vueuse/head
 5 | // you can use this to manipulate the document head in any components,
 6 | // they will be rendered correctly in the html results with vite-ssg
 7 | useHead({
 8 |   title: 'ReX',
 9 |   meta: [
10 |     { name: 'description', content: 'ReX' },
11 |   ],
12 | })
13 | </script>
14 | 
15 | <template>
16 |   <router-view />
17 | </template>
18 | 


--------------------------------------------------------------------------------
/src/components/Editor.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang='ts'>
  2 | import { onMounted, ref, watch, defineProps } from 'vue'
  3 | import { useVModel } from '@vueuse/core'
  4 | import CodeMirror from 'codemirror'
  5 | import 'codemirror/lib/codemirror.css'
  6 | import 'codemirror/addon/display/placeholder'
  7 | import '../modes/regex'
  8 | 
  9 | const props = defineProps<{
 10 |   modelValue: string
 11 |   mode?: string
 12 |   placeholder?: string
 13 |   readonly?: boolean
 14 |   inline?: boolean
 15 |   wrapping?: boolean
 16 |   matches?: RegExpMatchArray[]
 17 | }>()
 18 | const el = ref<HTMLTextAreaElement | null>()
 19 | const text = useVModel(props, 'modelValue')
 20 | 
 21 | onMounted(() => {
 22 |   const cm = CodeMirror.fromTextArea(el.value!, {
 23 |     mode: props.mode,
 24 |     readOnly: props.readonly,
 25 |     scrollbarStyle: 'null',
 26 |     lineWrapping: props.wrapping,
 27 |     extraKeys: {
 28 |       // @ts-expect-error
 29 |       Tab: props.inline ? false : undefined,
 30 |     },
 31 |   })
 32 | 
 33 |   cm.on('change', () => {
 34 |     text.value = cm.getValue()
 35 |   })
 36 | 
 37 |   let decorations: CodeMirror.TextMarker<CodeMirror.MarkerRange>[] = []
 38 | 
 39 |   watch(() => props.mode, v => cm.setOption('mode', v))
 40 |   watch(() => props.readonly, v => cm.setOption('readOnly', v))
 41 |   watch(() => props.wrapping, v => cm.setOption('lineWrapping', v))
 42 |   watch(
 43 |     text,
 44 |     (v) => {
 45 |       if (v !== cm.getValue())
 46 |         cm.replaceRange(v, cm.posFromIndex(0), cm.posFromIndex(Infinity))
 47 |     },
 48 |     { immediate: true },
 49 |   )
 50 | 
 51 |   watch(
 52 |     () => props.matches,
 53 |     (m = []) => {
 54 |       decorations.forEach(i => i.clear())
 55 |       decorations = Array.from(m)
 56 |         .map((i, idx) => {
 57 |           const start = i.index
 58 |           if (start == null)
 59 |             return null!
 60 |           const end = start + i[0].length
 61 |           return cm.markText(
 62 |             cm.posFromIndex(start),
 63 |             cm.posFromIndex(end),
 64 |             { className: `match full-${idx % 2 === 0 ? 'even' : 'odd'}` },
 65 |           )
 66 |         })
 67 |         .filter(i => i)
 68 |     },
 69 |     { immediate: true },
 70 |   )
 71 | })
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div class="editor relative">
 76 |     <textarea ref="el" :placeholder="props.placeholder" />
 77 |   </div>
 78 | </template>
 79 | 
 80 | <style lang='postcss'>
 81 | .editor {
 82 |   @apply outline-none font-mono overflow-auto;
 83 | }
 84 | .CodeMirror {
 85 |   height: 100%;
 86 |   background: transparent;
 87 |   color: inherit;
 88 | }
 89 | .CodeMirror pre.CodeMirror-placeholder {
 90 |   opacity: 0.3;
 91 |   font-style: italic;
 92 | }
 93 | .CodeMirror-cursor {
 94 |   border-color: var(--fg);
 95 | }
 96 | .CodeMirror-selected {
 97 |   background: rgba(125,125,125,0.2);
 98 | }
 99 | .source .CodeMirror-code span {
100 |   color: var(--fg-semi);
101 | }
102 | .match {
103 |   color: var(--fg) !important;
104 | }
105 | .match.full-even {
106 |   border-bottom: 2px solid #e7d25e;
107 | }
108 | .match.full-odd {
109 |   border-bottom: 2px solid #e79c5e;
110 | }
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/ErrorPopup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { error } from '~/logics'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div
 7 |     v-if="error"
 8 |     class="fixed top-0 bg-orange-400 text-orange-500 bg-opacity-10 border border-orange-500 py-1 px-4 rounded-b -mt-1px"
 9 |     style="left:50%; transform: translateX(-50%);"
10 |   >
11 |     {{ error }}
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/src/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { isDark, toggleDark, history, cleanup, findRaw, replaceRaw } from '~/logics'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <nav class="py-1 px-4 pt-2 flex">
 7 |     <h1 class="inline-block ml-1 mr-2 font-mono mt-1.5">
 8 |       <b>Re</b>X
 9 |     </h1>
10 | 
11 |     <button
12 |       class="icon"
13 |       :disabled="!history.canUndo.value"
14 |       @click="history.undo"
15 |     >
16 |       <carbon-undo />
17 |     </button>
18 |     <button
19 |       class="icon"
20 |       :disabled="!history.canRedo.value"
21 |       @click="history.redo"
22 |     >
23 |       <carbon-redo />
24 |     </button>
25 |     <button
26 |       class="icon"
27 |       :disabled="!(findRaw || replaceRaw)"
28 |       @click="cleanup"
29 |     >
30 |       <carbon-delete />
31 |     </button>
32 |     <div class="flex-auto" />
33 |     <a class="icon" href="https://github.com/antfu/rex" target="_blank">
34 |       <carbon-logo-github class="mt-2" />
35 |     </a>
36 |     <button class="icon" @click="toggleDark">
37 |       <carbon-moon v-if="isDark" />
38 |       <carbon-sun v-else />
39 |     </button>
40 |   </nav>
41 | </template>
42 | 


--------------------------------------------------------------------------------
/src/components/ResultArea.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { useClipboard } from '@vueuse/core'
  3 | import { content, fullResult, toggleMode, mode, applyResult, matches, findRaw, takeGroup, linewrap } from '~/logics'
  4 | 
  5 | const { copy } = useClipboard()
  6 | </script>
  7 | 
  8 | <template>
  9 |   <div class="relative overflow-hidden">
 10 |     <div class="flex flex-col h-full w-1/2">
 11 |       <div class="flex p-2">
 12 |         <div class="icon relax static py-1">
 13 |           <carbon:text-annotation-toggle />
 14 |           <div class="label">
 15 |             TEXT
 16 |           </div>
 17 |         </div>
 18 | 
 19 |         <div class="flex-auto" />
 20 | 
 21 |         <button
 22 |           v-if="content"
 23 |           class="icon"
 24 |           @click="() => content = ''"
 25 |         >
 26 |           <carbon-delete />
 27 |         </button>
 28 |         <button
 29 |           title="Toogle line wrap"
 30 |           class="icon"
 31 |           :class="{active: linewrap }"
 32 |           @click="linewrap = !linewrap"
 33 |         >
 34 |           <carbon:text-wrap />
 35 |         </button>
 36 |         <button class="icon" title="Copy" @click="() => copy(content)">
 37 |           <carbon-copy />
 38 |         </button>
 39 |       </div>
 40 |       <Editor
 41 |         v-model="content"
 42 |         :matches="matches"
 43 |         :wrapping="linewrap"
 44 |         :class="{ source: !!findRaw }"
 45 |         placeholder="Paste your content here to transform..."
 46 |         class="flex-auto py-2 px-4"
 47 |       />
 48 |     </div>
 49 |     <div class="bg-trueGray-400 bg-opacity-25 h-full w-1px" />
 50 |     <div class="flex flex-col h-full -m-1px w-1/2">
 51 |       <div class="flex p-2">
 52 |         <button class="icon relax" @click="toggleMode">
 53 |           <carbon-transpose v-if="mode=='replace'" />
 54 |           <carbon-search v-else />
 55 |           <div class="label">
 56 |             {{ mode.toUpperCase() }}
 57 |           </div>
 58 |           <carbon:chevron-down class="text-xs opacity-50 ml-2" />
 59 |         </button>
 60 | 
 61 |         <div class="flex-auto" />
 62 | 
 63 |         <template v-if="mode=='take'">
 64 |           <button
 65 |             class="icon"
 66 |             title="Full Match"
 67 |             :class="{active: takeGroup === 0}"
 68 |             @click="takeGroup = 0"
 69 |           >
 70 |             <mdi:format-letter-matches />
 71 |           </button>
 72 |           <button
 73 |             class="icon"
 74 |             title="Group 1"
 75 |             :class="{active: takeGroup === 1}"
 76 |             @click="takeGroup = 1"
 77 |           >
 78 |             <carbon-number-1 />
 79 |           </button>
 80 |           <button
 81 |             class="icon"
 82 |             title="Group 2"
 83 |             :class="{active: takeGroup === 2}"
 84 |             @click="takeGroup = 2"
 85 |           >
 86 |             <carbon-number-2 />
 87 |           </button>
 88 |           <button
 89 |             class="icon"
 90 |             title="Group 3"
 91 |             :class="{active: takeGroup === 3}"
 92 |             @click="takeGroup = 3"
 93 |           >
 94 |             <carbon-number-3 />
 95 |           </button>
 96 |         </template>
 97 | 
 98 |         <button class="icon" title="Copy" @click="copy(fullResult)">
 99 |           <carbon-copy />
100 |         </button>
101 |       </div>
102 |       <Editor
103 |         :model-value="fullResult"
104 |         :readonly="true"
105 |         :wrapping="linewrap"
106 |         placeholder="Empty result"
107 |         class="flex-auto py-2 px-4"
108 |       />
109 |     </div>
110 | 
111 |     <div
112 |       v-if="fullResult !== content"
113 |       v-motion
114 |       title="Apply result"
115 |       class="bg-white border border-trueGray-400 border-opacity-25 rounded-full cursor-pointer flex h-2em w-2em absolute dark:bg-trueGray-700 hover:shadow"
116 |       style="top: 50%; left: 50%; transform-origin: left top;"
117 |       :initial="{
118 |         scale: 0,
119 |         x: '-50%',
120 |         y: '-50%'
121 |       }"
122 |       :enter="{
123 |         scale: 1
124 |       }"
125 |       @click="applyResult"
126 |     >
127 |       <carbon-chevron-left class="m-auto pt-2px pr-1px hover:text-orange-400" />
128 |     </div>
129 |   </div>
130 | </template>
131 | 
132 | <style lang="postcss" scoped>
133 | .label {
134 |   @apply pl-2 opacity-50 text-sm inline-block;
135 | }
136 | </style>
137 | 


--------------------------------------------------------------------------------
/src/components/SearchArea.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useMotions } from '@vueuse/motion'
 3 | import { findRaw, flags, replaceRaw, mode } from '~/logics'
 4 | 
 5 | const motions = useMotions()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <div class="flex flex-col pb-2 border-b border-trueGray-400 border-opacity-25">
10 |     <NavBar />
11 |     <div class="flex mx-2">
12 |       <Editor
13 |         v-model="findRaw"
14 |         class="flex-auto input rounded p-2 m-2"
15 |         placeholder="Find..."
16 |         :inline="true"
17 |       />
18 |       <input
19 |         v-model="flags"
20 |         class="input !py-0 !px-4 !m-2 font-mono w-20 rounded"
21 |         placeholder="flags"
22 |         type="text"
23 |       >
24 |     </div>
25 |     <transition
26 |       :css="false"
27 |       @leave="(el, done) => motions.replaceBox.leave(done)"
28 |     >
29 |       <div
30 |         v-if="mode === 'replace'"
31 |         v-motion="'replaceBox'"
32 |         class="flex mx-2"
33 |         style="min-height: 60px;box-sizing: border-box;"
34 |         :initial="{
35 |           x: 120,
36 |           opacity: 0,
37 |           marginBottom: -60
38 |         }"
39 |         :enter="{
40 |           x: 0,
41 |           opacity: 1,
42 |           marginBottom: 0,
43 |           transition: {
44 |             x: {
45 |               delay: 200
46 |             },
47 |             opacity: {
48 |               delay: 200
49 |             }
50 |           }
51 |         }"
52 |         :leave="{
53 |           x: -100,
54 |           opacity: 0,
55 |           dur: 200,
56 |           marginBottom: -60,
57 |           transition: {
58 |             marginBottom: {
59 |               delay: 200
60 |             },
61 |           }
62 |         }"
63 |       >
64 |         <Editor
65 |           v-model="replaceRaw"
66 |           class="flex-auto input rounded p-2 m-2"
67 |           placeholder="Replace..."
68 |           :inline="true"
69 |         />
70 |       </div>
71 |     </transition>
72 |   </div>
73 | </template>
74 | 


--------------------------------------------------------------------------------
/src/logics/dark.ts:
--------------------------------------------------------------------------------
1 | import { useDark, useToggle } from '@vueuse/core'
2 | 
3 | export const isDark = useDark()
4 | export const toggleDark = useToggle(isDark)
5 | 


--------------------------------------------------------------------------------
/src/logics/index.ts:
--------------------------------------------------------------------------------
1 | export * from './dark'
2 | export * from './store'
3 | 


--------------------------------------------------------------------------------
/src/logics/store.ts:
--------------------------------------------------------------------------------
 1 | import { ref, computed } from 'vue'
 2 | import { useDebounce, useLocalStorage, useRefHistory } from '@vueuse/core'
 3 | import DEFAULT_CONTENT from '../../README.md?raw'
 4 | 
 5 | const DEFAULT_FIND = '(<.*>)(.*)(</.*>)'
 6 | const DEFAULT_MODE = 'take'
 7 | 
 8 | export const findRaw = useLocalStorage('find', DEFAULT_FIND)
 9 | export const flags = useLocalStorage('flags', 'gm')
10 | export const replaceRaw = useLocalStorage('replace', '')
11 | export const content = useLocalStorage('content', DEFAULT_CONTENT)
12 | export const mode = useLocalStorage<'replace' | 'take'>('mode', DEFAULT_MODE)
13 | export const takeJoint = useLocalStorage('take-join', '\n')
14 | export const takeGroup = useLocalStorage('take-group', 0)
15 | export const linewrap = useLocalStorage('linewrap', true)
16 | export const history = useRefHistory(content, { clone: false })
17 | 
18 | export const error = ref<Error | null>(null)
19 | 
20 | export const throttleFind = useDebounce(findRaw, 300)
21 | export const findRegex = computed(() => {
22 |   error.value = null
23 |   try {
24 |     return new RegExp(throttleFind.value, flags.value)
25 |   }
26 |   catch (e) {
27 |     error.value = e
28 |     console.error(e)
29 |     return new RegExp('', 'g')
30 |   }
31 | })
32 | 
33 | export function replace() {
34 |   content.value = content.value.replace(findRegex.value, replaceRaw.value)
35 | }
36 | 
37 | export function cleanup() {
38 |   flags.value = 'gm'
39 |   findRaw.value = ''
40 |   replaceRaw.value = ''
41 | }
42 | 
43 | function take<T>(iterable: IterableIterator<T>, length: number): T[] {
44 |   return Array.from((function* () {
45 |     const iterator = iterable[Symbol.iterator]()
46 |     while (length-- > 0)
47 |       yield iterator.next().value
48 |   })())
49 | }
50 | 
51 | export const matchResult = computed(() => {
52 |   return take(content.value.matchAll(findRegex.value), 30)
53 |     .filter(i => i)
54 |     .map(i => i[0])
55 |     .join('\n')
56 | })
57 | 
58 | export const matches = computed(() => Array.from(content.value.matchAll(findRegex.value)))
59 | 
60 | export const fullResult = computed(() => {
61 |   if (mode.value === 'replace') {
62 |     return content.value.replaceAll(findRegex.value, replaceRaw.value)
63 |   }
64 |   else if (mode.value === 'take') {
65 |     return Array.from(content.value.matchAll(findRegex.value))
66 |       .map(i => i?.[takeGroup.value])
67 |       .filter(i => i != null)
68 |       .join(takeJoint.value)
69 |   }
70 |   return ''
71 | })
72 | 
73 | export function toggleMode() {
74 |   if (mode.value === 'replace')
75 |     mode.value = 'take'
76 |   else
77 |     mode.value = 'replace'
78 | }
79 | 
80 | export function applyResult() {
81 |   content.value = fullResult.value
82 | }
83 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import 'windi.css'
 2 | import './styles/main.css'
 3 | import { ViteSSG } from 'vite-ssg'
 4 | import routes from 'pages-generated'
 5 | import { MotionPlugin } from '@vueuse/motion'
 6 | import App from './App.vue'
 7 | 
 8 | // https://github.com/antfu/vite-ssg
 9 | export const createApp = ViteSSG(
10 |   App,
11 |   { routes },
12 |   ({ app }) => {
13 |     app.use(MotionPlugin)
14 |   },
15 | )
16 | 


--------------------------------------------------------------------------------
/src/modes/regex.ts:
--------------------------------------------------------------------------------
 1 | import CodeMirror from 'codemirror'
 2 | import 'codemirror/addon/mode/simple'
 3 | 
 4 | CodeMirror.defineSimpleMode('regex', {
 5 |   start: [
 6 |     { regex: /\(.*\)/, token: 'atom' },
 7 |     { regex: /\[.*\]/, token: 'string' },
 8 |     { regex: /\\\\/, token: 'builtin' },
 9 |     { regex: /\\\w/, token: 'keyword' },
10 |     { regex: /[+\-?]/, token: 'operator' },
11 |   ],
12 | })
13 | 


--------------------------------------------------------------------------------
/src/pages/[...all].vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     Not Found
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ErrorPopup />
 3 |   <div
 4 |     class="grid h-screen w-screen overflow-hidden"
 5 |     style="grid-template-rows: min-content auto;"
 6 |   >
 7 |     <SearchArea />
 8 |     <ResultArea class="flex flex-auto" />
 9 |   </div>
10 | </template>
11 | 


--------------------------------------------------------------------------------
/src/shims.d.ts:
--------------------------------------------------------------------------------
1 | declare interface Window {
2 |   // extend the window
3 | }
4 | 


--------------------------------------------------------------------------------
/src/styles/main.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --fg: #222;
 3 |   --fg-semi: #2225;
 4 | }
 5 | 
 6 | html,
 7 | body,
 8 | #app {
 9 |   height: 100vh;
10 |   margin: 0;
11 |   padding: 0;
12 | }
13 | 
14 | html.dark {
15 |   background: #222;
16 |   color: #ddd;
17 |   --fg: #ddd;
18 |   --fg-semi: #ddd5;
19 | }
20 | 
21 | .gray-border {
22 |   @apply border border-gray-200 dark:border-gray-600 outline-none;
23 | }
24 | 
25 | .input {
26 |   @apply outline-none border border-transparent focus-within:border-orange-400;
27 |   @apply bg-trueGray-50 hover:bg-trueGray-100;
28 |   @apply dark:(bg-trueGray-700 hover:bg-trueGray-600);
29 | }
30 | 
31 | 
32 | .icon {
33 |   @apply opacity-50 px-2 rounded h-8.5 mr-2 inline-block align-middle transition-all duration-200;
34 |   outline: none !important;
35 | }
36 | .icon:not(.static) {
37 |   @apply hover:(!opacity-100 text-orange-500) pointer-cursor;
38 | }
39 | .icon:not(.relax) {
40 |   @apply w-8.5;
41 | }
42 | button.icon.active {
43 |   @apply bg-orange-300 bg-opacity-10 text-orange-500 !opacity-75;
44 | }
45 | 
46 | [disabled] {
47 |   @apply !pointer-events-none !opacity-10;
48 | }
49 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite-plugin-windicss'
 2 | 
 3 | export default defineConfig({
 4 |   darkMode: 'class',
 5 |   theme: {
 6 |     extend: {
 7 |       fontFamily: {
 8 |         mono: 'Input Mono, Fira-Code, monospace',
 9 |       },
10 |     },
11 |   },
12 | })
13 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "module": "ESNext",
 5 |     "target": "es2016",
 6 |     "lib": ["DOM", "ESNext"],
 7 |     "strict": true,
 8 |     "esModuleInterop": true,
 9 |     "incremental": true,
10 |     "skipLibCheck": true,
11 |     "moduleResolution": "node",
12 |     "resolveJsonModule": true,
13 |     "noUnusedLocals": true,
14 |     "strictNullChecks": true,
15 |     "forceConsistentCasingInFileNames": true,
16 |     "types": [
17 |       "vite/client",
18 |       "vite-plugin-pages/client"
19 |     ],
20 |     "paths": {
21 |       "~/*": ["src/*"]
22 |     }
23 |   },
24 |   "exclude": ["dist", "node_modules"]
25 | }
26 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import { defineConfig } from 'vite'
 3 | import Vue from '@vitejs/plugin-vue'
 4 | import Pages from 'vite-plugin-pages'
 5 | import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 6 | import ViteComponents from 'vite-plugin-components'
 7 | import WindiCSS from 'vite-plugin-windicss'
 8 | import { VitePWA } from 'vite-plugin-pwa'
 9 | 
10 | export default defineConfig({
11 |   resolve: {
12 |     alias: {
13 |       '~/': `${path.resolve(__dirname, 'src')}/`,
14 |     },
15 |   },
16 |   plugins: [
17 |     Vue(),
18 |     Pages(),
19 |     ViteComponents({
20 |       customComponentResolvers: [
21 |         ViteIconsResolver({
22 |           componentPrefix: '',
23 |         }),
24 |       ],
25 |     }),
26 |     ViteIcons(),
27 |     WindiCSS(),
28 |     VitePWA({
29 |       manifest: {
30 |         name: 'ReX',
31 |         short_name: 'ReX',
32 |         theme_color: '#ffffff',
33 |         icons: [
34 |           {
35 |             src: '/pwa-192x192.png',
36 |             sizes: '192x192',
37 |             type: 'image/png',
38 |           },
39 |           {
40 |             src: '/pwa-512x512.png',
41 |             sizes: '512x512',
42 |             type: 'image/png',
43 |           },
44 |           {
45 |             src: '/pwa-512x512.png',
46 |             sizes: '512x512',
47 |             type: 'image/png',
48 |             purpose: 'any maskable',
49 |           },
50 |         ],
51 |       },
52 |     }),
53 |   ],
54 |   optimizeDeps: {
55 |     include: [
56 |       'vue',
57 |       'vue-router',
58 |       '@vueuse/core',
59 |     ],
60 |     exclude: [
61 |       'vue-demi',
62 |     ],
63 |   },
64 | })
65 | 


--------------------------------------------------------------------------------