[Vue] Introduce Vue UX component

Author: t-richard

src/Vue/.gitattributes

@@ -0,0 +1,7 @@
+/.gitattributes export-ignore
+/.gitignore export-ignore
+/.symfony.bundle.yaml export-ignore
+/phpunit.xml.dist export-ignore
+/Resources/assets/test export-ignore
+/Resources/assets/jest.config.js export-ignore
+/Tests export-ignore

src/Vue/.gitignore

@@ -0,0 +1,4 @@
+vendor
+composer.lock
+.php_cs.cache
+.phpunit.result.cache

src/Vue/.symfony.bundle.yaml

@@ -0,0 +1,3 @@
+branches: ["2.x"]
+maintained_branches: ["2.x"]
+doc_dir: "Resources/doc"

src/Vue/CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG
+
+## 2.4
+
+-   Component added

src/Vue/DependencyInjection/VueExtension.php

@@ -0,0 +1,37 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\Vue\DependencyInjection;
+
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Definition;
+use Symfony\Component\DependencyInjection\Reference;
+use Symfony\Component\HttpKernel\DependencyInjection\Extension;
+use Symfony\UX\Vue\Twig\VueComponentExtension;
+
+/**
+ * @author Titouan Galopin <[email protected]>
+ * @author Thibault RICHARD <[email protected]>
+ *
+ * @internal
+ */
+class VueExtension extends Extension
+{
+    public function load(array $configs, ContainerBuilder $container)
+    {
+        $container
+            ->setDefinition('twig.extension.vue', new Definition(VueComponentExtension::class))
+            ->setArgument(0, new Reference('webpack_encore.twig_stimulus_extension'))
+            ->addTag('twig.extension')
+            ->setPublic(false)
+        ;
+    }
+}

src/Vue/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2020-2022 Fabien Potencier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

src/Vue/README.md

@@ -0,0 +1,14 @@
+# Symfony UX Vue.js
+
+Symfony UX Vue integrates [Vue.js](https://vuejs.org/) into Symfony applications.
+It provides tools to render Vue.js v3 components from Twig.
+
+**This repository is a READ-ONLY sub-tree split**. See
+https://github.com/symfony/ux to create issues or submit pull requests.
+
+## Resources
+
+-   [Documentation](https://symfony.com/bundles/ux-vue/current/index.html)
+-   [Report issues](https://github.com/symfony/ux/issues) and
+    [send Pull Requests](https://github.com/symfony/ux/pulls)
+    in the [main Symfony UX repository](https://github.com/symfony/ux)

src/Vue/Resources/assets/dist/register_controller.js

@@ -0,0 +1,16 @@
+function registerVueControllerComponents(context) {
+    const vueControllers = {};
+    const importAllVueComponents = (r) => {
+        r.keys().forEach((key) => (vueControllers[key] = r(key).default));
+    };
+    importAllVueComponents(context);
+    window.resolveVueComponent = (name) => {
+        const component = vueControllers[`./${name}.vue`];
+        if (typeof component === 'undefined') {
+            throw new Error('Vue controller "' + name + '" does not exist');
+        }
+        return component;
+    };
+}
+
+export { registerVueControllerComponents };

src/Vue/Resources/assets/dist/render_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from '@hotwired/stimulus';
+import { createApp } from 'vue';
+
+class default_1 extends Controller {
+    connect() {
+        var _a;
+        this.props = (_a = this.propsValue) !== null && _a !== void 0 ? _a : null;
+        this._dispatchEvent('vue:connect', { componentName: this.componentValue, props: this.props });
+        const component = window.resolveVueComponent(this.componentValue);
+        this.app = createApp(component, this.props);
+        this.app.mount(this.element);
+        this._dispatchEvent('vue:mount', { componentName: this.componentValue, component: component, props: this.props });
+    }
+    disconnect() {
+        this.app.unmount();
+        this._dispatchEvent('vue:unmount', {
+            componentName: this.componentValue,
+            props: this.props,
+        });
+    }
+    _dispatchEvent(name, payload) {
+        this.element.dispatchEvent(new CustomEvent(name, { detail: payload, bubbles: true }));
+    }
+}
+default_1.values = {
+    component: String,
+    props: Object,
+};
+
+export { default_1 as default };

src/Vue/Resources/assets/jest.config.js

@@ -0,0 +1,7 @@
+const { defaults } = require('jest-config');
+const jestConfig = require('../../../../jest.config.js');
+
+jestConfig.moduleFileExtensions = [...defaults.moduleFileExtensions, 'vue'];
+jestConfig.transform['^.+\\.vue$'] = ['@vue/vue3-jest'];
+
+module.exports = jestConfig;