Add Vue SFC support to AEs #17718

whoacowboy · 2024-12-22T20:18:08Z

What happened?

I created a new ui app-extension and only modified the Component.js. When executing yarn build I receive an error if I use the short hand @ instead of v-on: and I also get an error when I use a computed attribute inside a template :label="item" or :data-item="item".

<template>
  <q-btn
    class="component"
    @click="action"
    :label="item"
  ></q-btn>
</template>
<script setup>
import { ref } from 'vue'

const item = ref('hello')
const action = () => (item.value = Math.random().toString(36).substring(2, 12))
</script>

and

<template>
  <q-btn
    class="component"
    :label="item"
    @click="action"
  ></q-btn>
</template>
<script setup>
import { ref } from 'vue'

const item = ref('hello')
const action = () => (item.value = Math.random().toString(36).substring(2, 12))
</script>

error for slightly different reasons but it appears to be buble causing the issue.

I have tried this with div tag as well and I receive the same error.

What did you expect to happen?

I expected the app-extension ui framework to support the @ shorthand and the hyphenated dynamic attributes.

Reproduction URL

https://github.com/whoacowboy/app-extension-bug

How to reproduce?

Create a new UI App extension.

yarn create quasar

During the CLI process, enter default info wherever possible and appropriate info where user input is required.

cd quasar-project/ui

Install dependencies

yarn

Rename src/components/Component.js to src/components/Component.vue

mv src/components/Component.js src/components/Component.vue

Replace the code in src/Components.vue with the follow code and save

<template>
  <q-btn
    class="component"
    :data-item="item"
    :label="item"
    @click="action"
  ></q-btn>
</template>
<script setup>
import { ref } from 'vue'

const item = ref('hello')
const action = () => (item.value = Math.random().toString(36).substring(2, 12))
</script>

Run the build script

yarn build

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

App Extension API

Platforms/Browsers

Chrome

Quasar info output

`quasar info`

Operating System   	Darwin(23.6.0) - darwin/arm64
NodeJs             	20.11.0

Global packages
  NPM              	10.2.4
  yarn             	1.22.22
  pnpm             	Not installed
  bun              	Not installed
  @quasar/cli      	2.4.1
  @quasar/icongenie	Not installed
  cordova          	Not installed

Networking
  Host             	James.localdomain
  en1              	192.168.4.4
  bridge1          	192.168.1.70

Relevant log output

ui % yarn build
yarn run v1.22.22
$ node build/index.js

 ⭐️ App Extension version quasar-app-extension-delete-1 synced with UI version.

 💥 Cleaned build artifacts.

 📦 Building v0.0.1... [multi-threaded]

SyntaxError: Unexpected character '@' (2:27)
    at pp$4.raise (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:2825:15)
    at pp$9.getTokenFromCode (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:4560:10)
    at pp$9.readToken (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:4288:17)
    at _class.readToken (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:469:20)
    at pp$9.nextToken (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:4279:17)
    at pp$9.next (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:4236:10)
    at pp$3.parseLiteral (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:2288:10)
    at pp$3.parseExprAtom (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:2220:19)
    at _class.parseExprAtom (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-dynamic-import/lib/index.js:75:117)
    at _class.parseExprAtom (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:445:22) {
  pos: 38,
  loc: Position {
    line: 2,
    column: 27,
    file: '/Users/james/Code/example/consumer/fe/delete-1/ui/src/components/Component.vue'
  },
  raisedAt: 38,
  snippet: '1 : <template>\n' +
    '2 :   <q-btn class="component" @click="action" :label="item"></q-btn>\n' +
    '                               ^',
  toString: [Function (anonymous)],
  plugin: 'buble',
  frame: '1 : <template>\n' +
    '2 :   <q-btn class="component" @click="action" :label="item"></q-btn>\n' +
    '                               ^',
  code: 'PLUGIN_ERROR',
  hook: 'transform',
  id: '/Users/james/Code/example/consumer/fe/delete-1/ui/src/components/Component.vue',
  watchFiles: [
    '/Users/james/Code/example/consumer/fe/delete-1/ui/src/index.umd.js',
    '/Users/james/Code/example/consumer/fe/delete-1/ui/src/vue-plugin.js',
    '/Users/james/Code/example/consumer/fe/delete-1/ui/src/components/Component.vue'
  ]
}
Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
1 │ @import 'quasar/src/css/variables.sass'
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    src/index.sass 1:9  root stylesheet

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
3 │ @import './components/Component.sass'
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    src/index.sass 3:9  root stylesheet

[css]  dist/index.css                              0.15kb (gzipped:   0.15kb)
[css]  dist/index.rtl.css                          0.15kb (gzipped:   0.15kb)
[css]  dist/index.min.css                          0.14kb (gzipped:   0.15kb)
[css]  dist/index.rtl.min.css                      0.14kb (gzipped:   0.15kb)
✨  Done in 0.67s.


##################################################################
Syntax error when putting :label first
##################################################################

SyntaxError: Unexpected token (2:27)
    at pp$4.raise (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:2825:15)
    at pp.unexpected (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:689:10)
    at _class.jsx_parseIdentifier (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:257:14)
    at _class.jsx_parseNamespacedName (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:266:23)
    at _class.jsx_parseAttribute (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:343:24)
    at _class.jsx_parseOpeningElementAt (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:356:35)
    at _class.jsx_parseElementAt (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:378:33)
    at _class.jsx_parseElementAt (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:391:32)
    at _class.jsx_parseElement (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:436:19)
    at _class.parseExprAtom (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:443:21) {
  pos: 38,
  loc: Position {
    line: 2,
    column: 27,
    file: '/Users/james/Code/example/consumer/fe/delete-1/ui/src/components/Component.vue'
  },
  raisedAt: 39,
  snippet: '1 : <template>\n' +
    '2 :   <q-btn class="component" :label="item" @click="action"></q-btn>\n' +
    '                               ^',
  toString: [Function (anonymous)],
  plugin: 'buble',
  frame: '1 : <template>\n' +
    '2 :   <q-btn class="component" :label="item" @click="action"></q-btn>\n' +
    '                               ^',
  code: 'PLUGIN_ERROR',
  hook: 'transform',
  id: '/Users/james/Code/example/consumer/fe/delete-1/ui/src/components/Component.vue',
  watchFiles: [
    '/Users/james/Code/example/consumer/fe/delete-1/ui/src/index.esm.js',
    '/Users/james/Code/example/consumer/fe/delete-1/ui/src/vue-plugin.js',
    '/Users/james/Code/example/consumer/fe/delete-1/ui/src/components/Component.vue'
  ]
}

Additional context

No response

The text was updated successfully, but these errors were encountered:

whoacowboy · 2024-12-22T21:13:37Z

FWIW I switch :item with v-bind:item and then I got an error about <script setup>

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (4:0)
    at pp$4.raise (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:2825:15)
    at _class.jsx_parseElementAt (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:418:14)
    at _class.jsx_parseElement (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:436:19)
    at _class.parseExprAtom (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn-jsx/index.js:443:21)
    at pp$3.parseExprSubscripts (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:2089:21)
    at pp$3.parseMaybeUnary (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:2066:19)
    at pp$3.parseExprOps (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:2010:21)
    at pp$3.parseMaybeConditional (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:1993:21)
    at pp$3.parseMaybeAssign (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:1968:21)
    at pp$3.parseExpression (/Users/james/Code/example/consumer/fe/delete-1/ui/node_modules/buble/node_modules/acorn/dist/acorn.js:1933:21) {
  pos: 99,
  loc: Position {
    line: 4,
    column: 0,
    file: '/Users/james/Code/example/consumer/fe/delete-1/ui/src/components/Component.vue'
  },
  raisedAt: 100,
  snippet: '1 : <template>\n' +
    '2 :   <q-btn class="component" v-bind:label="item" v-on:click="action"></q-btn>\n' +
    '3 : </template>\n' +
    '4 : <script setup>\n' +
    '    ^',
  toString: [Function (anonymous)],
  plugin: 'buble',
  frame: '1 : <template>\n' +
    '2 :   <q-btn class="component" v-bind:label="item" v-on:click="action"></q-btn>\n' +
    '3 : </template>\n' +
    '4 : <script setup>\n' +
    '    ^',
  code: 'PLUGIN_ERROR',
  hook: 'transform',
  id: '/Users/james/Code/example/consumer/fe/delete-1/ui/src/components/Component.vue',
  watchFiles: [
    '/Users/james/Code/example/consumer/fe/delete-1/ui/src/index.esm.js',
    '/Users/james/Code/example/consumer/fe/delete-1/ui/src/vue-plugin.js',
    '/Users/james/Code/example/consumer/fe/delete-1/ui/src/components/Component.vue'
  ]
}

yusufkandemir · 2025-01-02T08:18:22Z

The UI kit build process doesn't support Vue SFCs(i.e., .vue files). In #17168, we introduced support for SFCs in AEs(not UI kit), TS-only. It has not yet been enabled for use. We are planning to support it in both JS and TS AE templates.

whoacowboy · 2025-01-02T17:08:35Z

Hi @yusufkandemir, do you have a timeline on when you be implementing it.

yusufkandemir · 2025-01-02T18:15:42Z

Hi, unfortunately, no.

/cc @rstoenescu

whoacowboy added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Dec 22, 2024

github-actions bot added area/app-ext bug/1-hard-to-reproduce A reproduction is available, but it's hard to reproduce, so it has a lower priority. bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-webpack labels Dec 22, 2024

yusufkandemir changed the title ~~@click="action" and :label="item" in component throwing errors~~ Add Vue SFC support to AEs Jan 2, 2025

yusufkandemir added kind/feature 💡 and removed kind/bug 🐞 flavour/quasar-cli-webpack bug/1-hard-to-reproduce A reproduction is available, but it's hard to reproduce, so it has a lower priority. bug/1-repro-available A reproduction is available and needs to be confirmed. labels Jan 2, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Vue SFC support to AEs #17718

Add Vue SFC support to AEs #17718

whoacowboy commented Dec 22, 2024

whoacowboy commented Dec 22, 2024

yusufkandemir commented Jan 2, 2025

whoacowboy commented Jan 2, 2025

yusufkandemir commented Jan 2, 2025

Add Vue SFC support to AEs #17718

Add Vue SFC support to AEs #17718

Comments

whoacowboy commented Dec 22, 2024

What happened?

What did you expect to happen?

Reproduction URL

How to reproduce?

Flavour

Areas

Platforms/Browsers

Quasar info output

Relevant log output

Additional context

whoacowboy commented Dec 22, 2024

yusufkandemir commented Jan 2, 2025

whoacowboy commented Jan 2, 2025

yusufkandemir commented Jan 2, 2025