Однофайловые компоненты vue3

[Voral]

Очень нужны документация и пример. Перечитал перепроверил два закрытых тикета. Прочитав их добился что вроде как начинает компилироваться, но выдает
Error: Cannot read properties of undefined (reading 'type')

Переустановил, как сказано, в закрытом тикете bitrix/cli теперь вернулась
Error: Unexpected character '#' (5:4) in ..../local/js/test/test/src/test.js

Код следующий
bundle.config.js

const isProd = process.argv.includes('--prod');
const vuePlugin = require('rollup-plugin-vue');
const commonjs = require('rollup-plugin-commonjs');

module.exports = {
    input: 'src/test.js',
    output: 'dist/test.bundle.js',
    namespace: 'BX.Test',
    browserslist: true,
    minification: isProd,
    sourceMaps: !isProd,
    plugins: {
        custom: [
            vuePlugin(),
            commonjs(),
        ],
    },
};

test.js

import {BitrixVue} from 'ui.vue3';
import Hello from "Hello.vue";

export class Test {
    #application;
    #rootNode;

    constructor(rootNode): void {
        this.#rootNode = document.querySelector(rootNode);
    }

    start(): void {
        this.#application = BitrixVue.createApp({
            name: 'Example',
            components:{
                Hello
            },
            template: '<div>Test: <Hello/></div>'
        })
        this.#application.mount(this.#rootNode);
    }
}

Hello.vue

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<script>
export default {
  data() {
    return {
      greeting: "Привет всем!"
    }
  }
}
</script>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

Info @bitrix/cli, v3.1.1

[Voral]

package.json

{
  "dependencies": {
    "rollup-plugin-commonjs": "^9.0.0",
    "rollup-plugin-vue": "^5.0.0"
  }
}

[Voral]

Info @bitrix/cli, v3.2.2, так же

   Build error: Unexpected character '#' (5:4) in .../local/js/test/test/src/test.js
   .../local/js/test/test/src/test.js:5:4

[druxik]

Есть у кого-нибудь рабочий пример с однофайловыми компонентами vue3?
когда делаю import App from "./components/App.vue"; в bunle закидывается не та переменная

Посмотрел в исходник, что пытается подключить cli
[ 'ui.vue3', 'vue' ]
'vue' появляется, когда делаю import App from "./components/App.vue";

[Voral]

Есть у кого-нибудь рабочий пример с однофайловыми компонентами vue3?

Долго пытался найти решение и в поддержку обращался (ответили что не поддерживается). В итоге либо без однофайловых либо использую vite (т.е без bitrix/cli)

[druxik]

да, тоже получил ответ от поддержки, печально(

[svn72]

Есть у кого-нибудь рабочий пример с однофайловыми компонентами vue3?

Пропатчи себе bitrix/cli изменениями из #59 и будет тебе счастье, там дел на пару строк кода

[druxik]

Есть у кого-нибудь рабочий пример с однофайловыми компонентами vue3?

Пропатчи себе bitrix/cli изменениями из #59 и будет тебе счастье, там дел на пару строк кода

Как это правильно делается, никогда этого не делал)
Допустим я установил cli через npm и он находится по пути
C:\Users\Roma\AppData\Roaming\npm\node_modules@bitrix\cli
Туда иду и делаю следующее
git init
git commit ....
curl https://patch-diff.githubusercontent.com/raw/bitrix-tools/cli/pull/59.patch | git am
Получаю Patch is empty.
Как это правильно делается? Желательно, чтобы это легко повторили другие разработчики из команды)

[svn72]

@druxik

Получаю Patch is empty.

Судя по документации git am требует именно файл, потому и ошибка.
У меня срабатывает следующий порядок действий (нода - v20.10)

Туда иду и делаю следующее

git init
git commit ...
wget https://patch-diff.githubusercontent.com/raw/bitrix-tools/cli/pull/59.patch
git apply 59.patch
npm run build

Абсолютно стабильным этот алгоритм не назвать, т.к. версия в npm часто выше чем тут в репозитории.
Так, что будем ждать.
Возможно ПР когда-то вольется, или мейнтейнеры что-нибудь доработают по своему, и можно будет писать vue компоненты как написано в доке по vue

[Dictator90]

2025 год на дворе, а однофайловые компоненты так и не завезли?

[svn72]

@Dictator90

2025 год на дворе, а однофайловые компоненты так и не завезли?

И, возможно, не завезут.
Если смотреть на документацию, то там продвигается другой подход в написании vue компонентов.

Нужно понимать, что этот репозиторий - типичный "корпоративный" опенсорс.
В приоритете всегда будут внутренние требования и подходы.
Ждать, что появится функционал которых хочет сообщество можно практически бесконечно.

Пока остается либо подождать следующий мажорный апдейт (судя по коммитам, сейчас активно ведется работа над v4, возможно там будут полезные для vue3 изменения), либо пилить свои решения.

[Dictator90]

@svn72 Да, я видел и пользовался тем костылем Vue от Bitrix. Но недавно познал всю прелесть Composition API и однофайловых компонентов. Затянул ваши правки из #59 .Но не очень понимаю что это дало))

Попытался так

const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
	input: 'src/index.js',
	output: 'dist/test.bundle.js',
	globals: {
		'vue': 'createApp'
	},
	namespace: 'MB.Vue.Test',
	plugins: {
		resolve: true,
		custom: [
			new VueLoaderPlugin()
		],
	},
}

Но на выходе ...
(function (exports,Hello) ... ((this.MB.Vue.Test = this.MB.Vue.Test || {}),BX));

Видно что Vue завелся (правда ругается на все подряд) Но сама суть что компонента нет.. и он BX

[svn72]

@Dictator90
Это была старая попытка хоть как-то заставить работать bitrix/cli со сборкой vue компонентов.
Настоятельно не рекомендую этим пользоваться.

Но недавно познал всю прелесть Composition API и однофайловых компонентов.

Аналогично, поэтому собрал себе частично совместимый бандлер на rolldown-vite поверх npm workspaces. Теперь могу обмазываться ts / vue sfc и прочими прелестями описанными в документации по vue

[Dictator90]

@svn72 Тут был весь смысл использовать Bitrix Js Extension , а так по факту можно и просто через Vite

[svn72]

@Dictator90
А кто сказал что я не использую экстеншены?
Закинул "слепок" своей сборки в профиль, можешь глянуть

[Dictator90]

@svn72 Огонь! Пока не посмотрел тоже возникла идея просто собрать на Vite а потом добавить config.php с верными путями - и js extension без проблем подключится.