@md-plugins/quasar-app-extension-q-press 0.1.0-beta.2 → 0.1.0-beta.21

package/src/templates/update/src/_q-press/components/MarkdownCodepen.vue

@@ -11,48 +11,308 @@
   </form>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { Quasar } from 'quasar'
 import { ref, reactive, computed, nextTick } from 'vue'
 
-import { slugify } from '@md-plugins/shared'
+import siteConfig from '../../siteConfig'
+import { slugify } from './markdown-utils'
 
-const cssResources = [
+type CodepenParts = {
+  Template?: string
+  Script?: string
+  Style?: string
+  [key: string]: string | undefined
+}
+
+type CodepenGlobalPackage = {
+  packageName: string
+  globalName: string
+}
+
+const defaultCssResources = [
   'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons',
   `https://cdn.jsdelivr.net/npm/quasar@${Quasar.version}/dist/quasar.min.css`,
-].join(';')
+]
 
-const jsResources = [
+const defaultJsResources = [
   'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js',
   `https://cdn.jsdelivr.net/npm/quasar@${Quasar.version}/dist/quasar.umd.prod.js`,
-].join(';')
-
-const replace = (name) =>
-  function (_, p1) {
-    const parts = p1
-      .split(',')
-      .map((p) => p.trim())
-      .filter((p) => p.length > 0)
-      .reduce((acc, p) => {
-        acc.push(p)
-        return acc
-      }, [])
-
-    const text = []
-    if (parts.length > 0) {
-      text.push('const { ' + parts.join(', ') + ' } = ' + name)
+]
+
+function getAbsolutePublicUrl(path: string) {
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`
+
+  return typeof location === 'undefined' ? normalizedPath : `${location.origin}${normalizedPath}`
+}
+
+function rewriteRootRelativeUrls(content: string) {
+  return content
+    .replace(
+      /\b(src|href|poster)=("|')\/(?!\/)([^"']*)\2/g,
+      (_match: string, attr: string, quote: string, path: string) =>
+        `${attr}=${quote}${getAbsolutePublicUrl(path)}${quote}`,
+    )
+    .replace(
+      /url\(\s*(["']?)\/(?!\/)([^"')]+)\1\s*\)/g,
+      (_match: string, quote: string, path: string) =>
+        `url(${quote}${getAbsolutePublicUrl(path)}${quote})`,
+    )
+}
+
+function indent(code: string, spaces = 2) {
+  const padding = ' '.repeat(spaces)
+  let isInsideTemplateLiteral = false
+
+  return code
+    .split('\n')
+    .map((line) => {
+      const shouldIndent = line.trim().length > 0 && isInsideTemplateLiteral === false
+
+      for (let index = 0; index < line.length; index++) {
+        if (line[index] !== '`') {
+          continue
+        }
+
+        let escapeCount = 0
+
+        for (let escapeIndex = index - 1; escapeIndex >= 0 && line[escapeIndex] === '\\'; escapeIndex--) {
+          escapeCount++
+        }
+
+        if (escapeCount % 2 === 0) {
+          isInsideTemplateLiteral = !isInsideTemplateLiteral
+        }
+      }
+
+      return shouldIndent ? padding + line : line
+    })
+    .join('\n')
+}
+
+function getImportParts(content: string, packageName: string) {
+  const parts: { importName: string; bindingName: string }[] = []
+  const escapedPackageName = packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const importRe = new RegExp(
+    `import\\s+(?!type\\b){([^}]*)}\\s+from\\s+['"]${escapedPackageName}['"];?`,
+    'g',
+  )
+  let match: RegExpExecArray | null
+
+  while ((match = importRe.exec(content)) !== null) {
+    for (const part of (match[1] ?? '').split(',')) {
+      const rawName = part.trim()
+
+      if (rawName.length === 0 || rawName.startsWith('type ')) {
+        continue
+      }
+
+      const [importName, bindingName = importName] = rawName.split(/\s+as\s+/)
+
+      if (importName !== undefined && importName.length > 0) {
+        parts.push({
+          importName,
+          bindingName,
+        })
+      }
+    }
+  }
+
+  return parts
+}
+
+function getImportNames(content: string, packageName: string) {
+  return [
+    ...new Set(
+      getImportParts(content, packageName).map(({ importName, bindingName }) =>
+        importName === bindingName ? importName : `${importName}: ${bindingName}`,
+      ),
+    ),
+  ]
+}
+
+function getImportBindingNames(content: string, packageName: string) {
+  return [...new Set(getImportParts(content, packageName).map(({ bindingName }) => bindingName))]
+}
+
+function getGlobalPackageImportLines(content: string) {
+  return (siteConfig.codepen?.globalPackages ?? [])
+    .map(({ packageName, globalName }: CodepenGlobalPackage) => {
+      const imports = getImportNames(content, packageName)
+
+      return imports.length > 0 ? `const { ${imports.join(', ')} } = ${globalName}` : ''
+    })
+    .filter((line) => line.length > 0)
+}
+
+function getGlobalImportLines(content: string) {
+  const vueImports = getImportNames(content, 'vue')
+  const quasarImports = getImportNames(content, 'quasar')
+
+  return [
+    vueImports.length > 0 ? `const { ${vueImports.join(', ')} } = Vue` : '',
+    quasarImports.length > 0 ? `const { ${quasarImports.join(', ')} } = Quasar` : '',
+    ...getGlobalPackageImportLines(content),
+  ].filter((line) => line.length > 0)
+}
+
+function getGlobalImportBindingNames(content: string) {
+  return [
+    ...getImportBindingNames(content, 'vue'),
+    ...getImportBindingNames(content, 'quasar'),
+    ...(siteConfig.codepen?.globalPackages ?? []).flatMap(({ packageName }: CodepenGlobalPackage) =>
+      getImportBindingNames(content, packageName),
+    ),
+  ]
+}
+
+function stripImports(content: string) {
+  return content
+    .replace(/^\s*import\s+type\s+[\s\S]*?\s+from\s+['"][^'"]+['"];?\s*$/gm, '')
+    .replace(/^\s*import\s+[\s\S]*?\s+from\s+['"][^'"]+['"];?\s*$/gm, '')
+    .replace(/^\s*import\s+['"][^'"]+['"];?\s*$/gm, '')
+    .trim()
+}
+
+function stripCompilerMacros(content: string) {
+  return content
+    .replace(/^\s*defineOptions\(\s*\{[\s\S]*?\}\s*\)\s*;?\s*$/gm, '')
+    .replace(/^\s*defineExpose\(\s*\{[\s\S]*?\}\s*\)\s*;?\s*$/gm, '')
+    .trim()
+}
+
+function getScriptBlock(script: string, setup: boolean) {
+  const re = setup
+    ? /<script\s+setup([^>]*)>([\s\S]*?)<\/script>/
+    : /<script(?!\s+setup)([^>]*)>([\s\S]*?)<\/script>/
+  const match = re.exec(script)
+
+  return {
+    attrs: match?.[1] ?? '',
+    content: match?.[2] ?? '',
+  }
+}
+
+function getSetupReturnNames(content: string) {
+  const names = new Set<string>()
+  const topLevelContent = getTopLevelContent(content)
+  const declarationRe =
+    /(?:^|\n)\s*(?:const|let|var)\s+([\s\S]*?)(?=\n\s*(?:const|let|var|function|interface|type|class)\s+|\s*$)/g
+  const variableNameRe = /(?:^|\n)\s*([A-Za-z_$][\w$]*)\s*(?:[:=,]|$)/g
+  const functionRe = /(?:^|\n)\s*(?:async\s+)?function\s+([A-Za-z_$][\w$]*)/g
+  let match: RegExpExecArray | null
+
+  while ((match = declarationRe.exec(topLevelContent)) !== null) {
+    let variableMatch: RegExpExecArray | null
+
+    while ((variableMatch = variableNameRe.exec(match[1] ?? '')) !== null) {
+      if (variableMatch[1] !== undefined) {
+        names.add(variableMatch[1])
+      }
+    }
+  }
+
+  while ((match = functionRe.exec(topLevelContent)) !== null) {
+    if (match[1] !== undefined) {
+      names.add(match[1])
     }
-    return text.join('\n')
   }
 
+  return [...names]
+}
+
+function getTopLevelContent(content: string) {
+  let depth = 0
+  let output = ''
+
+  for (const char of content) {
+    if (depth === 0 || char === '\n') {
+      output += char
+    } else {
+      output += ' '
+    }
+
+    if (char === '{') {
+      depth++
+    } else if (char === '}') {
+      depth = Math.max(0, depth - 1)
+    }
+  }
+
+  return output
+}
+
+function getAppSetup() {
+  return ['app.use(Quasar, { config: {} })', siteConfig.codepen?.jsSetup ?? '']
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0)
+    .join('\n')
+}
+
+function createSetupScript(script: string) {
+  const { content } = getScriptBlock(script, true)
+  const globalImports = getGlobalImportLines(content)
+  const setupContent = stripCompilerMacros(stripImports(content))
+  const returnNames = [
+    ...new Set([...getGlobalImportBindingNames(content), ...getSetupReturnNames(setupContent)]),
+  ]
+  const setupBody = [
+    setupContent.length > 0 ? indent(setupContent, 4) : '',
+    returnNames.length > 0 ? `    return { ${returnNames.join(', ')} }` : '',
+  ]
+    .filter((line) => line.length > 0)
+    .join('\n\n')
+
+  return [
+    ...globalImports,
+    `const app = Vue.createApp({
+  setup () {
+${setupBody}
+  }
+})`,
+    getAppSetup(),
+    "app.mount('#q-app')",
+  ].join('\n\n')
+}
+
+function createOptionsScript(script: string) {
+  const { content } = getScriptBlock(script, false)
+  const globalImports = getGlobalImportLines(content)
+  const match = /export\s+default\s+{([\s\S]*)}/.exec(content)
+  const beforeDefault = match === null ? stripImports(content) : stripImports(content.slice(0, match.index))
+  let component = match?.[1]?.trim() ?? ''
+
+  if (component.length > 0) {
+    component = '\n  ' + component + '\n'
+  }
+
+  return [
+    ...globalImports,
+    beforeDefault,
+    `const app = Vue.createApp({${component}})`,
+    getAppSetup(),
+    "app.mount('#q-app')",
+  ]
+    .filter((line) => line.length > 0)
+    .join('\n\n')
+}
+
 const props = defineProps({ title: { type: String, required: true } })
 
 const active = ref(false)
-const formRef = ref(null)
-const def = reactive({ parts: {} })
+const formRef = ref<HTMLFormElement | null>(null)
+const def = reactive<{ parts: CodepenParts }>({ parts: {} })
+
+const cssResources = computed(() => {
+  return [...defaultCssResources, ...(siteConfig.codepen?.cssExternal ?? [])].join(';')
+})
+
+const jsResources = computed(() => {
+  return [...defaultJsResources, ...(siteConfig.codepen?.jsExternal ?? [])].join(';')
+})
 
 const css = computed(() => {
-  return (def.parts.Style || '').replace(/(<style.*?>|<\/style>)/g, '').trim()
+  return rewriteRootRelativeUrls((def.parts.Style || '').replace(/(<style.*?>|<\/style>)/g, '').trim())
 })
 
 const cssPreprocessor = computed(() => {
@@ -62,42 +322,32 @@ const cssPreprocessor = computed(() => {
 })
 
 const js = computed(() => {
-  const quasarImports = /import\s+{([^}'\n]+)}\s+from\s+'quasar'/g
-  const vueImports = /import\s+{([^}'\n]+)}\s+from\s+'vue'/g
-  const otherImports = /import ([^'\n]*) from ([^\n]*)/g
-  let component = /export default {([\s\S]*)}/g.exec(def.parts.Script || '')
+  const script = def.parts.Script ?? ''
 
-  component = ((component && component[1]) || '').trim()
-  if (component.length > 0) {
-    component = '\n  ' + component + '\n'
-  }
-
-  let script = /<script>([\s\S]*)export default {/g.exec(def.parts.Script || '')
-  script = ((script && script[1]) || '')
-    .replace(quasarImports, replace('Quasar'))
-    .replace(vueImports, replace('Vue'))
-    .replace(otherImports, '')
-    .trim()
+  return script.includes('<script setup') === true
+    ? createSetupScript(script)
+    : createOptionsScript(script)
+})
 
-  script += script ? '\n\n' : ''
-  return (
-    script +
-    `const app = Vue.createApp({${component}})
+const jsPreProcessor = computed(() => {
+  const setupBlock = getScriptBlock(def.parts.Script ?? '', true)
+  const optionsBlock = getScriptBlock(def.parts.Script ?? '', false)
+  const attrs = setupBlock.content.length > 0 ? setupBlock.attrs : optionsBlock.attrs
 
-app.use(Quasar, { config: {} })
-app.mount('#q-app')
-`
-  )
+  return siteConfig.codepen?.jsPreProcessor ?? (/lang=["']ts["']/.test(attrs) ? 'typescript' : 'babel')
 })
 
 const html = computed(() => {
-  return (def.parts.Template || '')
+  const content = (def.parts.Template || '')
     .replace(/(<template>|<\/template>$)/g, '')
     .replace(/\n/g, '\n  ')
     .replace(/([\w]+=")([^"]*?)(")/g, function (match, p1, p2, p3) {
       return p1 + p2.replace(/>/g, '___TEMP_REPLACEMENT___') + p3
     })
-    .replace(/<(q-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs, '<$1$2$3></$1>')
+    .replace(
+      /<([A-Z][\w-]*|[a-z][\w]*-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs,
+      '<$1$2$3></$1>',
+    )
     .replace(
       /(<template[^>]*>)(\s*?(?:[\n\r][\t ]+)?)<(thead|tbody|tfoot)/gs,
       '$1$2<___PREVENT_TEMPLATE___$3',
@@ -122,18 +372,25 @@ const html = computed(() => {
     .replace(/___TEMP_REPLACEMENT___/g, '>')
     .replace(/^\s{2}/gm, '')
     .trim()
+
+  return rewriteRootRelativeUrls(content)
 })
 
 const editors = computed(() => {
-  const flag = (html.value && 0b100) | (css.value && 0b010) | (js.value && 0b001)
+  const flag =
+    (html.value.length > 0 ? 0b100 : 0) |
+    (css.value.length > 0 ? 0b010 : 0) |
+    (js.value.length > 0 ? 0b001 : 0)
   return flag.toString(2)
 })
 
 const computedTitle = computed(() => {
+  const titleSuffix = siteConfig.codepen?.titleSuffix ?? `Quasar v${Quasar.version}`
+
   return (
     (typeof document !== 'undefined' ? document.title.split(' | ')[0] + ': ' : '') +
     (props.title ? props.title + ' - ' : '') +
-    `Quasar v${Quasar.version}`
+    titleSuffix
   )
 })
 
@@ -157,14 +414,14 @@ ${location.origin + location.pathname}#${slugifiedTitle.value}
 <div id="q-app" style="min-height: 100vh;">
 ${html.value}
 </div>`,
-    head: '',
     html_pre_processor: 'none',
     css: css.value,
     css_pre_processor: cssPreprocessor.value,
-    css_external: cssResources,
+    css_external: cssResources.value,
     js: js.value,
-    js_pre_processor: 'babel',
-    js_external: jsResources,
+    js_pre_processor: jsPreProcessor.value,
+    js_external: jsResources.value,
+    head: siteConfig.codepen?.head ?? '',
     editors: editors.value,
   }
   return JSON.stringify(data)
@@ -175,18 +432,18 @@ ${html.value}
  *
  * @param {string} whichParts - The parts of the application to open.
  */
-function open(whichParts) {
+function open(whichParts: CodepenParts) {
   def.parts = whichParts
 
   if (active.value) {
-    formRef.value.submit()
+    formRef.value?.submit()
     return
   }
 
   active.value = true
 
   nextTick(() => {
-    formRef.value.submit()
+    formRef.value?.submit()
   })
 }
 

package/src/templates/update/src/_q-press/components/MarkdownCopyButton.vue

@@ -8,7 +8,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, getCurrentInstance } from 'vue'
 import { copyToClipboard } from './markdown-utils'
 import { mdiClipboardOutline } from '@quasar/extras/mdi-v7'

package/src/templates/update/src/_q-press/components/MarkdownExample.vue

@@ -92,11 +92,11 @@
   </q-card>
 </template>
 
-<script setup>
-import { computed, inject, markRaw, ref, reactive, onMounted } from 'vue'
+<script setup lang="ts">
+import { computed, inject, markRaw, ref, reactive, onBeforeUnmount, onMounted } from 'vue'
 import { openURL } from 'quasar'
 
-import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v6'
+import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v7'
 // import { mdiCompare } from '@quasar/extras/mdi-v7'
 
 import MarkdownCode from './MarkdownCode.vue'
@@ -134,6 +134,7 @@ const def = reactive({
 })
 const currentTab = ref('Template')
 const expanded = ref(false)
+let removeHmrListener = () => {}
 
 /**
  * A computed property that returns the CSS class for the component.
@@ -186,7 +187,8 @@ function parseComponent(comp) {
 }
 
 function openGitHub() {
-  openURL(`${siteConfig.githubEditRootSrc}/examples/${examples.name}/${props.file}.vue`)
+  const root = siteConfig.githubSourceRootSrc ?? siteConfig.githubEditRootSrc.replace('/edit/', '/tree/')
+  openURL(`${root}/examples/${examples.name}/${props.file}.vue`)
 }
 
 function openCodepen() {
@@ -197,23 +199,56 @@ function toggleExpand() {
   expanded.value = expanded.value === false
 }
 
+async function loadExample() {
+  const list = await examples.list
+  const devFile = `/src/examples/${examples.name}/${props.file}.vue`
+
+  if (import.meta.env.QUASAR_DEV) {
+    const loadComponent = list.code[devFile]
+    const loadSource = list.source[devFile]
+
+    if (loadComponent === void 0 || loadSource === void 0) {
+      throw new Error(`Markdown example not found: ${devFile}`)
+    }
+
+    const componentModule = await loadComponent()
+    const source = await loadSource()
+
+    component.value = markRaw(componentModule.default)
+    parseComponent(source)
+  } else {
+    component.value = markRaw(list[props.file])
+    parseComponent(list[`Raw${props.file}`])
+  }
+
+  isBusy.value = false
+}
+
 if (import.meta.env.QUASAR_CLIENT) {
   onMounted(() => {
-    examples.list.then((list) => {
-      component.value = markRaw(
-        import.meta.env.QUASAR_DEV
-          ? list.code[`/src/examples/${examples.name}/${props.file}.vue`].default
-          : list[props.file],
-      )
-
-      parseComponent(
-        import.meta.env.QUASAR_DEV
-          ? list.source[`/src/examples/${examples.name}/${props.file}.vue`]
-          : list[`Raw${props.file}`],
-      )
-
-      isBusy.value = false
-    })
+    void loadExample()
+
+    if (import.meta.hot) {
+      const examplePath = `/src/examples/${examples.name}/${props.file}.vue`
+      const onAfterUpdate = (payload) => {
+        const shouldReload = payload.updates.some(
+          (update) => update.path === examplePath || update.acceptedPath === examplePath,
+        )
+
+        if (shouldReload === true) {
+          void loadExample()
+        }
+      }
+
+      import.meta.hot.on('vite:afterUpdate', onAfterUpdate)
+      removeHmrListener = () => {
+        import.meta.hot?.off('vite:afterUpdate', onAfterUpdate)
+      }
+    }
+  })
+
+  onBeforeUnmount(() => {
+    removeHmrListener()
   })
 }
 </script>

package/src/templates/update/src/_q-press/components/MarkdownLink.vue

@@ -8,9 +8,9 @@
   </a>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
-import { mdiLaunch } from '@quasar/extras/mdi-v6'
+import { mdiLaunch } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({ to: { type: String, required: true } })
 const internal = computed(
@@ -20,14 +20,14 @@ const internal = computed(
 
 <style lang="scss">
 .markdown-link {
-  color: scale-color($brand-primary, $lightness: -35%);
+  color: $brand-light-text;
   text-decoration: none;
-  border-bottom: 1px dotted currentColor;
+  border-bottom: 1px dotted rgba($brand-primary, 0.78);
   outline: 0;
   transition: color $header-quick-transition;
 
   body.body--dark & {
-    color: $brand-primary;
+    color: $brand-dark-text;
   }
 
   &:hover {