[Svelte] Introduce Svelte UX component

.github/workflows/test.yaml

@@ -110,6 +110,15 @@ jobs:
               run: php vendor/bin/simple-phpunit
               working-directory: src/React
 
+            - name: Svelte Dependencies
+              uses: ramsey/composer-install@v2
+              with:
+                  working-directory: src/Svelte
+                  dependency-versions: lowest
+            - name: Svelte Tests
+              run: php vendor/bin/simple-phpunit
+              working-directory: src/Svelte
+
     tests-php8-low-deps:
         runs-on: ubuntu-latest
         steps:
@@ -218,6 +227,14 @@ jobs:
               working-directory: src/Autocomplete
               run: php vendor/bin/simple-phpunit
 
+            - name: Svelte Dependencies
+              uses: ramsey/composer-install@v2
+              with:
+                working-directory: src/Svelte
+            - name: Svelte Tests
+              working-directory: src/Svelte
+              run: php vendor/bin/simple-phpunit
+
     tests-php81-high-deps:
         runs-on: ubuntu-latest
         steps:

src/Svelte/.gitattributes

@@ -0,0 +1,8 @@
+/.gitattributes export-ignore
+/.gitignore export-ignore
+/.symfony.bundle.yaml export-ignore
+/assets/.gitignore export-ignore
+/assets/jest.config.js export-ignore
+/assets/test export-ignore
+/tests export-ignore
+/assets/src/*.ts export-ignore

src/Svelte/.gitignore

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

src/Svelte/.symfony.bundle.yaml

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

src/Svelte/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 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/Svelte/README.md

@@ -0,0 +1,14 @@
+# Symfony UX Svelte
+
+Symfony UX Svelte integrates [Svelte](https://svelte.dev/) into Symfony applications.
+It provides tools to render Svelte 3 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-svelte/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/Svelte/assets/.gitignore

@@ -0,0 +1 @@
+/node_modules/

src/Svelte/assets/dist/register_controller.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="webpack-env" />
+import type { SvelteComponent } from 'svelte';
+declare global {
+    function resolveSvelteComponent(name: string): typeof SvelteComponent;
+    interface Window {
+        resolveSvelteComponent(name: string): typeof SvelteComponent;
+    }
+}
+export declare function registerSvelteControllerComponents(context: __WebpackModuleApi.RequireContext): void;

src/Svelte/assets/dist/register_controller.js

@@ -0,0 +1,16 @@
+function registerSvelteControllerComponents(context) {
+    const svelteControllers = {};
+    const importAllSvelteComponents = (r) => {
+        r.keys().forEach((key) => (svelteControllers[key] = r(key).default));
+    };
+    importAllSvelteComponents(context);
+    window.resolveSvelteComponent = (name) => {
+        const component = svelteControllers[`./${name}.svelte`];
+        if (typeof component === 'undefined') {
+            throw new Error(`Svelte controller "${name}" does not exist`);
+        }
+        return component;
+    };
+}
+
+export { registerSvelteControllerComponents };

src/Svelte/assets/dist/render_controller.d.ts

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus';
+import { SvelteComponent } from 'svelte';
+export default class extends Controller<Element & {
+    root?: SvelteComponent;
+}> {
+    private app;
+    readonly componentValue: string;
+    private props;
+    private intro;
+    readonly propsValue: Record<string, unknown> | null | undefined;
+    readonly introValue: boolean | undefined;
+    static values: {
+        component: StringConstructor;
+        props: ObjectConstructor;
+        intro: BooleanConstructor;
+    };
+    connect(): void;
+    disconnect(): void;
+    _destroyIfExists(): void;
+    private dispatchEvent;
+}

src/Svelte/assets/dist/render_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from '@hotwired/stimulus';
+
+class default_1 extends Controller {
+    connect() {
+        var _a, _b;
+        this.element.innerHTML = '';
+        this.props = (_a = this.propsValue) !== null && _a !== void 0 ? _a : undefined;
+        this.intro = (_b = this.introValue) !== null && _b !== void 0 ? _b : undefined;
+        this.dispatchEvent('connect');
+        const Component = window.resolveSvelteComponent(this.componentValue);
+        this._destroyIfExists();
+        this.app = new Component({
+            target: this.element,
+            props: this.props,
+            intro: this.intro,
+        });
+        this.element.root = this.app;
+        this.dispatchEvent('mount', {
+            component: Component,
+        });
+    }
+    disconnect() {
+        this._destroyIfExists();
+        this.dispatchEvent('unmount');
+    }
+    _destroyIfExists() {
+        if (this.element.root !== undefined) {
+            this.element.root.$destroy();
+            delete this.element.root;
+        }
+    }
+    dispatchEvent(name, payload = {}) {
+        const detail = Object.assign({ componentName: this.componentValue, props: this.props, intro: this.intro }, payload);
+        this.dispatch(name, { detail, prefix: 'svelte' });
+    }
+}
+default_1.values = {
+    component: String,
+    props: Object,
+    intro: Boolean,
+};
+
+export { default_1 as default };

src/Svelte/assets/jest.config.js

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

src/Svelte/assets/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@symfony/ux-svelte",
+    "description": "Integration of Svelte in Symfony",
+    "main": "dist/register_controller.js",
+    "module": "dist/register_controller.js",
+    "version": "1.0.0",
+    "license": "MIT",
+    "symfony": {
+        "controllers": {
+            "svelte": {
+                "main": "dist/render_controller.js",
+                "fetch": "eager",
+                "enabled": true
+            }
+        }
+    },
+    "peerDependencies": {
+        "@hotwired/stimulus": "^3.0.0",
+        "svelte": "^3.0"
+    },
+    "devDependencies": {
+        "@hotwired/stimulus": "^3.0.0",
+        "@types/webpack-env": "^1.16",
+        "svelte": "^3.0",
+        "svelte-jester": "^2.3"
+    }
+}

src/Svelte/assets/src/register_controller.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 type { SvelteComponent } from 'svelte';
+
+declare global {
+    function resolveSvelteComponent(name: string): typeof SvelteComponent;
+
+    interface Window {
+        resolveSvelteComponent(name: string): typeof SvelteComponent;
+    }
+}
+
+export function registerSvelteControllerComponents(context: __WebpackModuleApi.RequireContext) {
+    const svelteControllers: { [key: string]: object } = {};
+
+    const importAllSvelteComponents = (r: __WebpackModuleApi.RequireContext) => {
+        r.keys().forEach((key) => (svelteControllers[key] = r(key).default));
+    };
+
+    importAllSvelteComponents(context);
+
+    // Expose a global Svelte loader to allow rendering from the Stimulus controller
+    (window as any).resolveSvelteComponent = (name: string): object => {
+        const component = svelteControllers[`./${name}.svelte`];
+        if (typeof component === 'undefined') {
+            throw new Error(`Svelte controller "${name}" does not exist`);
+        }
+
+        return component;
+    };
+}

src/Svelte/assets/src/render_controller.ts

@@ -0,0 +1,69 @@
+'use strict';
+
+import { Controller } from '@hotwired/stimulus';
+import { SvelteComponent } from 'svelte';
+
+export default class extends Controller<Element & { root?: SvelteComponent }> {
+    private app: SvelteComponent;
+    declare readonly componentValue: string;
+
+    private props: Record<string, any> | undefined;
+    private intro: boolean | undefined;
+
+    declare readonly propsValue: Record<string, unknown> | null | undefined;
+    declare readonly introValue: boolean | undefined;
+
+    static values = {
+        component: String,
+        props: Object,
+        intro: Boolean,
+    };
+
+    connect() {
+        this.element.innerHTML = '';
+
+        this.props = this.propsValue ?? undefined;
+        this.intro = this.introValue ?? undefined;
+
+        this.dispatchEvent('connect');
+
+        const Component = window.resolveSvelteComponent(this.componentValue);
+
+        this._destroyIfExists();
+
+        // @see https://svelte.dev/docs#run-time-client-side-component-api-creating-a-component
+        this.app = new Component({
+            target: this.element,
+            props: this.props,
+            intro: this.intro,
+        });
+
+        this.element.root = this.app;
+
+        this.dispatchEvent('mount', {
+            component: Component,
+        });
+    }
+
+    disconnect() {
+        this._destroyIfExists();
+        this.dispatchEvent('unmount');
+    }
+
+    _destroyIfExists() {
+        if (this.element.root !== undefined) {
+            this.element.root.$destroy();
+            delete this.element.root;
+        }
+    }
+
+    private dispatchEvent(name: string, payload: object = {}) {
+        const detail = {
+            componentName: this.componentValue,
+            props: this.props,
+            intro: this.intro,
+            ...payload,
+        };
+        this.dispatch(name, { detail, prefix: 'svelte' });
+    }
+}

src/Svelte/assets/test/fixtures/MyComponent.svelte

@@ -0,0 +1,8 @@
+<script>
+    import { fade } from "svelte/transition"
+    export let name = "without props";
+</script>
+
+<div transition:fade={{ duration: 100 }}>
+    <div>Hello {name}</div>
+</div>

src/Svelte/assets/test/register_controller.test.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 {registerSvelteControllerComponents} from '../src/register_controller';
+import MyComponent from './fixtures/MyComponent.svelte';
+import {createRequireContextPolyfill} from './util/require_context_poylfill';
+
+require.context = createRequireContextPolyfill(__dirname);
+
+describe('registerSvelteControllerComponents', () => {
+    it('registers controllers from require context', () => {
+        registerSvelteControllerComponents(require.context('./fixtures', true, /\.svelte$/));
+        const resolveComponent = (window as any).resolveSvelteComponent;
+
+        expect(resolveComponent).not.toBeUndefined();
+        expect(resolveComponent('MyComponent')).toBe(MyComponent);
+        expect(resolveComponent('MyComponent')).not.toBeUndefined();
+    });
+});