Add useGetVariables composable

src/App.vue

@@ -1,18 +1,44 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import PageHeader from './components/PageHeader.vue'
 import PageFooter from './components/PageFooter.vue'
-import { useEditor } from './composables/useEditor'
+import useEditor from './composables/useEditor'
+import useGetVariables from './composables/useGetVariables'
 
-useEditor('container')
+const { getEditorValue } = useEditor('container')
+const { getVariables } = useGetVariables()
+
+const variables = ref<string[]>([])
+
+async function getEditorContent (): Promise<void> {
+  const content = getEditorValue()
+  variables.value = getVariables(content ?? '')
+}
 </script>
 
 <template>
   <PageHeader />
-  <main class="my-5">
+  <main class="flex flex-wrap justify-center gap-5 my-5">
     <div
       id="container"
       class="h-96 w-screen md:w-[43rem]"
     />
+    <section class="border border-gray-600 p-3 min-w-72 w-fit h-96">
+      <button
+        class="bg-blue-800 text-white px-4 py-2 rounded-md mb-3"
+        @click="getEditorContent"
+      >
+        Get Template Variables
+      </button>
+      <ul class="h-72 overflow-y-auto">
+        <li
+          v-for="variable in variables"
+          :key="variable"
+        >
+          {{ variable }}
+        </li>
+      </ul>
+    </section>
   </main>
   <PageFooter />
 </template>

src/components/PageFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer>
+  <footer class="my-5">
     <p class="text-center text-sm text-gray-500">
       Created by <a
         href="https://github.com/Lexuil"

src/components/PageHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header class="my-5">
     <h1 class="text-4xl text-center font-bold">
       doT.js Editor
     </h1>

src/composables/useEditor.ts

@@ -1,13 +1,14 @@
-import { onMounted, type Ref, ref } from 'vue'
+import { onMounted } from 'vue'
 import { createHighlighter } from 'shiki/bundle/web'
 import { shikiToMonaco } from '@shikijs/monaco'
 import * as monaco from 'monaco-editor-core'
 import dotLang from '@/lib/dot.tmLanguage.json'
 
-export function useEditor (editorId: string): {
-  editor: Ref<monaco.editor.IStandaloneCodeEditor | null>
+export default function useEditor (editorId: string): {
+  editor: monaco.editor.IStandaloneCodeEditor | null
+  getEditorValue: () => string
 } {
-  const editor = ref<monaco.editor.IStandaloneCodeEditor | null>(null)
+  let editor: monaco.editor.IStandaloneCodeEditor | null = null
 
   onMounted(async () => {
     const highlighter = await createHighlighter({
@@ -23,7 +24,7 @@ export function useEditor (editorId: string): {
     if (container === null) {
       return
     }
-    editor.value = monaco.editor.create(container, {
+    editor = monaco.editor.create(container, {
       value: `Hola {{=it.name}}, como está todo en {{=it.city}}.
 
 Estas son las categorías
@@ -40,6 +41,7 @@ Es cierto
         top: 30,
         bottom: 10
       },
+      rulers: [80],
       wordWrap: 'wordWrapColumn',
       wordWrapColumn: 80,
       minimap: {
@@ -48,7 +50,15 @@ Es cierto
     })
   })
 
+  function getEditorValue (): string {
+    if (editor === null) {
+      return ''
+    }
+    return editor.getValue()
+  }
+
   return {
-    editor
+    editor,
+    getEditorValue
   }
 }

src/composables/useGetVariables.ts

@@ -0,0 +1,30 @@
+import { type Ref, ref } from 'vue'
+
+export default function useGetVariables (): {
+  getVariables: (template: string) => string[]
+  variables: Ref<string[]>
+} {
+  const regexExpressions = /\{\{.*?\}\}/gs
+  const regexVariables = /it\.([a-zA-Z_]\w*)/g
+  const variables = ref<string[]>([])
+
+  function getVariables (template: string): string[] {
+    const expressions = template.match(regexExpressions) ?? []
+
+    const allVariables: string[] = []
+
+    expressions.forEach(expression => {
+      const matches = [...expression.matchAll(regexVariables)]
+      const variables = matches.map(match => match[1])
+      allVariables.push(...variables)
+    })
+
+    variables.value = [...new Set(allVariables)]
+    return variables.value
+  }
+
+  return {
+    getVariables,
+    variables
+  }
+}