@md-plugins/quasar-app-extension-q-press 0.1.0-beta.8 → 0.1.0-beta.9

package/README.md

@@ -6,7 +6,7 @@ See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpr
 
 > Current beta release: `0.1.0-beta.8`.
 >
-> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.26`. TypeScript processing is required.
+> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.29`. TypeScript processing is required.
 
 ## Features
 

package/dist/index.js

@@ -46,7 +46,7 @@ export default defineIndexScript((api) => {
         throw new Error('This extension requires Vite');
     }
     api.compatibleWith('quasar', '^2.0.0');
-    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.26');
+    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.29');
     // here we extend /quasar.config, so we can add some Vite/Vue stuff
     api.extendQuasarConf(async (config) => {
         config.build ??= {};

package/dist/install.js

@@ -11,7 +11,7 @@ export default defineInstallScript(async (api) => {
         throw new Error('This extension requires Vite');
     }
     api.compatibleWith('quasar', '^2.0.0');
-    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.26');
+    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.29');
     // project must have pinia installed
     if ((await api.getStorePackageName()) !== 'pinia') {
         console.error('-----------------------------');

package/dist/templates/init/src/_q-press/api/components/MarkdownCodepen.json

@@ -4,18 +4,15 @@
     "docsUrl": "https://path-to-your-docs/markdown-codepen"
   },
   "props": {
-    "active": {
-      "type": "Boolean",
-      "desc": "Flag to indicate if the form should be active",
-      "category": "state"
-    },
-    "options": {
+    "title": {
       "type": "String",
-      "desc": "JSON string containing the CodePen options",
+      "desc": "Title used for the generated CodePen",
+      "required": true,
       "examples": [
-        "'{\"title\":\"My Pen\",\"html\":\"<div>Hello World</div>\"}'"
+        "'Basic Example'",
+        "'Advanced Playground'"
       ],
       "category": "content"
     }
   }
-}
+}

package/dist/templates/init/src/_q-press/api/components/MarkdownExample.json

@@ -13,10 +13,35 @@
       ],
       "category": "content"
     },
+    "file": {
+      "type": "String",
+      "desc": "Vue example file name without the .vue extension",
+      "required": true,
+      "examples": [
+        "'Basic'",
+        "'AdvancedUsage'"
+      ],
+      "category": "content"
+    },
+    "noEdit": {
+      "type": "Boolean",
+      "desc": "Hide the CodePen edit button",
+      "category": "behavior"
+    },
     "noGithub": {
       "type": "Boolean",
-      "desc": "Flag to indicate if the GitHub button should be hidden",
+      "desc": "Hide the GitHub source button",
+      "category": "behavior"
+    },
+    "scrollable": {
+      "type": "Boolean",
+      "desc": "Constrain the example content to a scrollable area",
+      "category": "content"
+    },
+    "overflow": {
+      "type": "Boolean",
+      "desc": "Allow the example content to manage overflow automatically",
       "category": "behavior"
     }
   }
-}
+}

package/dist/templates/init/src/_q-press/components/MarkdownCodepen.vue

@@ -17,39 +17,164 @@ import { ref, reactive, computed, nextTick } from 'vue'
 
 import { slugify } from '@md-plugins/shared'
 
-const cssResources = [
+import siteConfig from '../../siteConfig'
+
+type CodepenParts = {
+  Template?: string
+  Script?: string
+  Style?: string
+  [key: string]: string | undefined
+}
+
+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 indent(code: string, spaces = 2) {
+  const padding = ' '.repeat(spaces)
+  return code
+    .split('\n')
+    .map((line) => (line.trim().length > 0 ? padding + line : line))
+    .join('\n')
+}
+
+function getImportNames(content: string, packageName: string) {
+  const names = new Set<string>()
+  const importRe = new RegExp(`import\\s+{([^}'"\\n]+)}\\s+from\\s+['"]${packageName}['"];?`, 'g')
+  let match: RegExpExecArray | null
+
+  while ((match = importRe.exec(content)) !== null) {
+    for (const part of match[1].split(',')) {
+      const name = part.trim().replace(/\s+as\s+/g, ': ')
+
+      if (name.length > 0) {
+        names.add(name)
+      }
     }
-    return text.join('\n')
   }
 
+  return [...names]
+}
+
+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` : '',
+  ].filter((line) => line.length > 0)
+}
+
+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 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 declarationRe = /(?:^|\n)\s*(?:const|let|var)\s+([A-Za-z_$][\w$]*)/g
+  const functionRe = /(?:^|\n)\s*function\s+([A-Za-z_$][\w$]*)/g
+  let match: RegExpExecArray | null
+
+  while ((match = declarationRe.exec(content)) !== null) {
+    names.add(match[1])
+  }
+
+  while ((match = functionRe.exec(content)) !== null) {
+    names.add(match[1])
+  }
+
+  return [...names]
+}
+
+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 = stripImports(content)
+  const returnNames = 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 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()
@@ -62,32 +187,19 @@ 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(() => {
@@ -157,14 +269,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,7 +287,7 @@ ${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) {

package/dist/templates/init/src/_q-press/components/MarkdownExample.vue

@@ -93,7 +93,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, markRaw, ref, reactive, onMounted } from 'vue'
+import { computed, inject, markRaw, ref, reactive, onBeforeUnmount, onMounted } from 'vue'
 import { openURL } from 'quasar'
 
 import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v6'
@@ -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/dist/templates/init/src/markdown/guides/upgrade-guide.md

@@ -7,16 +7,16 @@ related:
   - vite-plugins/vite-md-plugin/overview
 ---
 
-The `0.1.0` beta line moves MD-Plugins and Q-Press to the Quasar CLI Vite 3 beta toolchain. It is the right version to use when your Quasar application is being upgraded to `@quasar/app-vite` `>=3.0.0-beta.26`.
+The `0.1.0` beta line moves MD-Plugins and Q-Press to the Quasar CLI Vite 3 beta toolchain. It is the right version to use when your Quasar application is being upgraded to `@quasar/app-vite` `>=3.0.0-beta.29`.
 
 ::: warning
-Q-Press and the Quasar app extensions now target Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.26`. They are not intended for Webpack projects or JavaScript-only Quasar projects.
+Q-Press and the Quasar app extensions now target Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.29`. They are not intended for Webpack projects or JavaScript-only Quasar projects.
 :::
 
 ## Before You Upgrade
 
 - Make sure your app is already on a Quasar Vite setup.
-- Upgrade the app to `@quasar/app-vite` `>=3.0.0-beta.26`.
+- Upgrade the app to `@quasar/app-vite` `>=3.0.0-beta.29`.
 - Use TypeScript in the consuming Quasar project.
 - Import `defineConfig` in `quasar.config.ts` directly from `@quasar/app-vite`.
 - Use `/// <reference types="@quasar/app-vite/client" />` in `src/env.d.ts`.

package/dist/templates/init/src/markdown/quasar-app-extensions/qpress/overview.md

@@ -6,7 +6,7 @@ desc: Q-Press App-Extension for Quasar.
 The Q-Press App Extension is a powerful tool for Quasar developers that simplifies the integration of Markdown content into Quasar applications. It leverages the capabilities of Vite and various Markdown plugins to transform Markdown files into Vue components, enabling a seamless and efficient workflow for content management.
 
 ::: warning
-Q-Press is for Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.26` at this time. TypeScript processing is also required. Do not use if you are using Webpack or have a JavaScript-only project.
+Q-Press is for Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.29` at this time. TypeScript processing is also required. Do not use if you are using Webpack or have a JavaScript-only project.
 :::
 
 ::: tip

package/dist/templates/init/src/markdown/quasar-app-extensions/vite-md-plugin-app-ext/overview.md

@@ -9,7 +9,7 @@ related:
 The `viteMdPluginAppExt` is a [Quasar App Extension](https://quasar.dev/app-extensions/introduction) that integrates the `viteMdPlugin` into your Quasar project. This extension allows you to use Markdown files as Vue components, enabling a seamless integration of Markdown content into your Quasar application.
 
 ::: warning
-This app extension targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.26`.
+This app extension targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.29`.
 :::
 
 ## Key Features

package/dist/templates/init/src/siteConfig/index.ts

@@ -70,6 +70,14 @@ export interface PrivacyConfig {
   link: string
 }
 
+export interface CodepenConfig {
+  cssExternal?: string[]
+  jsExternal?: string[]
+  jsSetup?: string
+  jsPreProcessor?: string
+  head?: string
+}
+
 export interface SiteConfig {
   lang: string
   title: string
@@ -78,6 +86,8 @@ export interface SiteConfig {
   version: string
   copyright: CopyrightConfig
   githubEditRootSrc: string // src folder for github edit links (appended with 'markdown' and 'examples')
+  githubSourceRootSrc?: string // src folder for GitHub source links (appended with 'markdown' and 'examples')
+  codepen?: CodepenConfig
   license: LicenseConfig
   privacy: PrivacyConfig
   logoConfig: LogoConfig
@@ -391,6 +401,7 @@ const config = {
     line2: '',
   } as CopyrightConfig,
   githubEditRootSrc: 'https://github.com/md-plugins/md-plugins/edit/dev/packages/docs/src/',
+  githubSourceRootSrc: 'https://github.com/md-plugins/md-plugins/tree/dev/packages/docs/src/',
   license: {
     label: 'MIT License',
     link: 'https://github.com/md-plugins/md-plugins/blob/dev/LICENSE.md',

package/dist/templates/update/src/_q-press/api/components/MarkdownCodepen.json

@@ -4,18 +4,15 @@
     "docsUrl": "https://path-to-your-docs/markdown-codepen"
   },
   "props": {
-    "active": {
-      "type": "Boolean",
-      "desc": "Flag to indicate if the form should be active",
-      "category": "state"
-    },
-    "options": {
+    "title": {
       "type": "String",
-      "desc": "JSON string containing the CodePen options",
+      "desc": "Title used for the generated CodePen",
+      "required": true,
       "examples": [
-        "'{\"title\":\"My Pen\",\"html\":\"<div>Hello World</div>\"}'"
+        "'Basic Example'",
+        "'Advanced Playground'"
       ],
       "category": "content"
     }
   }
-}
+}

package/dist/templates/update/src/_q-press/api/components/MarkdownExample.json

@@ -13,10 +13,35 @@
       ],
       "category": "content"
     },
+    "file": {
+      "type": "String",
+      "desc": "Vue example file name without the .vue extension",
+      "required": true,
+      "examples": [
+        "'Basic'",
+        "'AdvancedUsage'"
+      ],
+      "category": "content"
+    },
+    "noEdit": {
+      "type": "Boolean",
+      "desc": "Hide the CodePen edit button",
+      "category": "behavior"
+    },
     "noGithub": {
       "type": "Boolean",
-      "desc": "Flag to indicate if the GitHub button should be hidden",
+      "desc": "Hide the GitHub source button",
+      "category": "behavior"
+    },
+    "scrollable": {
+      "type": "Boolean",
+      "desc": "Constrain the example content to a scrollable area",
+      "category": "content"
+    },
+    "overflow": {
+      "type": "Boolean",
+      "desc": "Allow the example content to manage overflow automatically",
       "category": "behavior"
     }
   }
-}
+}