[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 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;

src/Vue/Resources/assets/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "@symfony/ux-vue",
+    "description": "Integration of Vue.js in Symfony",
+    "license": "MIT",
+    "version": "1.0.0",
+    "main": "dist/register_controller.js",
+    "symfony": {
+        "controllers": {
+            "vue": {
+                "main": "dist/render_controller.js",
+                "webpackMode": "eager",
+                "fetch": "eager",
+                "enabled": true
+            }
+        }
+    },
+    "peerDependencies": {
+        "@hotwired/stimulus": "^3.0.0",
+        "vue": "^3.0"
+    },
+    "devDependencies": {
+        "@hotwired/stimulus": "^3.0.0",
+        "@types/webpack-env": "^1.16",
+        "@vue/vue3-jest": "27",
+        "vue": "^3.0"
+    },
+    "dependencies": {}
+}

src/Vue/Resources/assets/src/register_controller.ts

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+'use strict';
+
+export function registerVueControllerComponents(context: __WebpackModuleApi.RequireContext) {
+    const vueControllers: { [key: string]: object } = {};
+
+    const importAllVueComponents = (r: __WebpackModuleApi.RequireContext) => {
+        r.keys().forEach((key) => (vueControllers[key] = r(key).default));
+    };
+
+    importAllVueComponents(context);
+
+    // Expose a global Vue loader to allow rendering from the Stimulus controller
+    (window as any).resolveVueComponent = (name: string): object => {
+        const component = vueControllers[`./${name}.vue`];
+        if (typeof component === 'undefined') {
+            throw new Error('Vue controller "' + name + '" does not exist');
+        }
+
+        return component;
+    };
+}

src/Vue/Resources/assets/src/render_controller.ts

@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+
+'use strict';
+
+import { Controller } from '@hotwired/stimulus';
+import { App, Component, createApp } from 'vue';
+
+export default class extends Controller {
+    private props: Record<string, unknown> | null;
+    private app: App<Element>;
+    readonly componentValue: string;
+
+    readonly propsValue: Record<string, unknown> | null | undefined;
+    static values = {
+        component: String,
+        props: Object,
+    };
+
+    connect() {
+        this.props = this.propsValue ?? null;
+
+        this._dispatchEvent('vue:connect', { componentName: this.componentValue, props: this.props });
+
+        const component: Component = window.resolveVueComponent(this.componentValue);
+
+        this.app = createApp(component, this.props);
+
+        if (this.element.__vue_app__ !== undefined) {
+            this.element.__vue_app__.unmount();
+        }
+
+        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: string, payload: any) {
+        this.element.dispatchEvent(new CustomEvent(name, { detail: payload, bubbles: true }));
+    }
+}

src/Vue/Resources/assets/test/fixtures/Hello.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>Hello {{ name }}</h1>
+</template>

src/Vue/Resources/assets/test/register_controller.test.ts

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+'use strict';
+
+import {registerVueControllerComponents} from '../src/register_controller';
+import {createRequireContextPolyfill} from './util/require_context_poylfill';
+import Hello from './fixtures/Hello.vue'
+
+require.context = createRequireContextPolyfill(__dirname);
+
+describe('registerVueControllerComponents', () => {
+    it('test', () => {
+        registerVueControllerComponents(require.context('./fixtures', true, /\.vue$/));
+        const resolveComponent = (window as any).resolveVueComponent;
+
+        expect(resolveComponent).not.toBeUndefined();
+        expect(resolveComponent('Hello')).toBe(Hello);
+    });
+});

src/Vue/Resources/assets/test/render_controller.test.ts

@@ -0,0 +1,84 @@
+/*
+ * 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.
+ */
+
+'use strict';
+
+import { Application, Controller } from '@hotwired/stimulus';
+import { getByTestId, waitFor } from '@testing-library/dom';
+import { clearDOM, mountDOM } from '@symfony/stimulus-testing';
+import VueController from '../src/render_controller';
+
+// Controller used to check the actual controller was properly booted
+class CheckController extends Controller {
+    connect() {
+        this.element.addEventListener('vue:connect', () => {
+            this.element.classList.add('connected');
+        });
+
+        this.element.addEventListener('vue:mount', () => {
+            this.element.classList.add('mounted');
+        });
+    }
+}
+
+const startStimulus = () => {
+    const application = Application.start();
+    application.register('check', CheckController);
+    application.register('vue', VueController);
+};
+
+const Hello = {
+    template: "<h1>Hello {{ name ?? 'world' }}</h1>",
+    props: ['name']
+};
+
+(window as any).resolveVueComponent = () => {
+    return Hello;
+};
+
+describe('VueController', () => {
+    it('connect with props', async () => {
+        const container = mountDOM(`
+          <div data-testid="component"
+              data-controller="check vue"
+              data-vue-component-value="Hello"
+              data-vue-props-value="{&quot;name&quot;: &quot;Thibault Richard&quot;}" />
+        `);
+
+        const component = getByTestId(container, 'component');
+        expect(component).not.toHaveClass('connected');
+        expect(component).not.toHaveClass('mounted');
+
+        startStimulus();
+        await waitFor(() => expect(component).toHaveClass('connected'));
+        await waitFor(() => expect(component).toHaveClass('mounted'));
+        await waitFor(() => expect(component.innerHTML).toEqual('<h1>Hello Thibault Richard</h1>'));
+
+        clearDOM();
+    });
+
+    it('connect without props', async () => {
+        const container = mountDOM(`
+          <div data-testid="component" id="container-2"
+              data-controller="check vue"
+              data-vue-component-value="Hello" />
+        `);
+
+        const component = getByTestId(container, 'component');
+        expect(component).not.toHaveClass('connected');
+        expect(component).not.toHaveClass('mounted');
+
+        startStimulus();
+        await waitFor(() => expect(component).toHaveClass('connected'));
+        await waitFor(() => expect(component).toHaveClass('mounted'));
+        await waitFor(() => expect(component.innerHTML).toEqual('<h1>Hello world</h1>'));
+
+        clearDOM();
+    });
+});