[Autocompleter] New Ajax-powered, autocomplete component

package.json

@@ -17,7 +17,8 @@
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.15.8",
         "@babel/preset-typescript": "^7.15.8",
-        "@rollup/plugin-node-resolve": "^13.0.0",
+        "@rollup/plugin-commonjs": "^22.0.0",
+        "@rollup/plugin-node-resolve": "^13.0.6",
         "@rollup/plugin-typescript": "^8.3.0",
         "@symfony/stimulus-testing": "^2.0.1",
         "@typescript-eslint/eslint-plugin": "^5.2.0",
@@ -29,7 +30,7 @@
         "jest": "^27.3.1",
         "pkg-up": "^3.1.0",
         "prettier": "^2.2.1",
-        "rollup": "^2.52.2",
+        "rollup": "^2.68.0",
         "tslib": "^2.3.1",
         "typescript": "^4.4.4"
     },

rollup.config.js

@@ -1,4 +1,5 @@
 import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
 import glob from 'glob';
 import path from 'path';
@@ -56,6 +57,11 @@ const packages = files.map((file) => {
         plugins: [
             resolve(),
             typescript(),
+            commonjs({
+                namedExports: {
+                    'react-dom/client': ['createRoot'],
+                },
+            }),
             wildcardExternalsPlugin(peerDependencies)
         ],
     };

src/Autocomplete/.gitattributes

@@ -0,0 +1 @@
+/tests export-ignore

src/Autocomplete/.gitignore

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

src/Autocomplete/.symfony.bundle.yaml

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

src/Autocomplete/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/Autocomplete/README.md

@@ -0,0 +1,16 @@
+# UX Autocomplete
+
+Javascript-powered auto-completion functionality for your Symfony forms!
+
+**EXPERIMENTAL** This component is currently experimental and is
+likely to change, or even change drastically.
+
+**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-autocomplete/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/Autocomplete/assets/.gitignore

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

src/Autocomplete/assets/dist/controller.js

@@ -0,0 +1,165 @@
+import { Controller } from '@hotwired/stimulus';
+import TomSelect from 'tom-select';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+var _instances, _getCommonConfig, _createAutocomplete, _createAutocompleteWithHtmlContents, _createAutocompleteWithRemoteData, _stripTags, _mergeObjects, _createTomSelect, _dispatchEvent;
+class default_1 extends Controller {
+    constructor() {
+        super(...arguments);
+        _instances.add(this);
+    }
+    connect() {
+        if (this.tomSelect) {
+            return;
+        }
+        if (this.urlValue) {
+            this.tomSelect = __classPrivateFieldGet(this, _instances, "m", _createAutocompleteWithRemoteData).call(this, this.urlValue);
+            return;
+        }
+        if (this.optionsAsHtmlValue) {
+            this.tomSelect = __classPrivateFieldGet(this, _instances, "m", _createAutocompleteWithHtmlContents).call(this);
+            return;
+        }
+        this.tomSelect = __classPrivateFieldGet(this, _instances, "m", _createAutocomplete).call(this);
+    }
+    get selectElement() {
+        if (!(this.element instanceof HTMLSelectElement)) {
+            return null;
+        }
+        return this.element;
+    }
+    get formElement() {
+        if (!(this.element instanceof HTMLInputElement) && !(this.element instanceof HTMLSelectElement)) {
+            throw new Error('Autocomplete Stimulus controller can only be used no an <input> or <select>.');
+        }
+        return this.element;
+    }
+}
+_instances = new WeakSet(), _getCommonConfig = function _getCommonConfig() {
+    const plugins = {};
+    const isMultiple = !this.selectElement || this.selectElement.multiple;
+    if (!this.formElement.disabled && !isMultiple) {
+        plugins.clear_button = { title: '' };
+    }
+    if (isMultiple) {
+        plugins.remove_button = { title: '' };
+    }
+    if (this.urlValue) {
+        plugins.virtual_scroll = {};
+    }
+    const config = {
+        render: {
+            no_results: () => {
+                return `<div class="no-results">${this.noResultsFoundTextValue}</div>`;
+            },
+        },
+        plugins: plugins,
+        onItemAdd: () => {
+            this.tomSelect.setTextboxValue('');
+        },
+        closeAfterSelect: true,
+    };
+    if (!this.selectElement && !this.urlValue) {
+        config.shouldLoad = () => false;
+    }
+    return __classPrivateFieldGet(this, _instances, "m", _mergeObjects).call(this, config, this.tomSelectOptionsValue);
+}, _createAutocomplete = function _createAutocomplete() {
+    const config = __classPrivateFieldGet(this, _instances, "m", _mergeObjects).call(this, __classPrivateFieldGet(this, _instances, "m", _getCommonConfig).call(this), {
+        maxOptions: this.selectElement ? this.selectElement.options.length : 50,
+    });
+    return __classPrivateFieldGet(this, _instances, "m", _createTomSelect).call(this, config);
+}, _createAutocompleteWithHtmlContents = function _createAutocompleteWithHtmlContents() {
+    const config = __classPrivateFieldGet(this, _instances, "m", _mergeObjects).call(this, __classPrivateFieldGet(this, _instances, "m", _getCommonConfig).call(this), {
+        maxOptions: this.selectElement ? this.selectElement.options.length : 50,
+        score: (search) => {
+            const scoringFunction = this.tomSelect.getScoreFunction(search);
+            return (item) => {
+                return scoringFunction(Object.assign(Object.assign({}, item), { text: __classPrivateFieldGet(this, _instances, "m", _stripTags).call(this, item.text) }));
+            };
+        },
+        render: {
+            item: function (item) {
+                return `<div>${item.text}</div>`;
+            },
+            option: function (item) {
+                return `<div>${item.text}</div>`;
+            }
+        },
+    });
+    return __classPrivateFieldGet(this, _instances, "m", _createTomSelect).call(this, config);
+}, _createAutocompleteWithRemoteData = function _createAutocompleteWithRemoteData(autocompleteEndpointUrl) {
+    const config = __classPrivateFieldGet(this, _instances, "m", _mergeObjects).call(this, __classPrivateFieldGet(this, _instances, "m", _getCommonConfig).call(this), {
+        firstUrl: (query) => {
+            const separator = autocompleteEndpointUrl.includes('?') ? '&' : '?';
+            return `${autocompleteEndpointUrl}${separator}query=${encodeURIComponent(query)}`;
+        },
+        load: function (query, callback) {
+            const url = this.getUrl(query);
+            fetch(url)
+                .then(response => response.json())
+                .then(json => { this.setNextUrl(query, json.next_page); callback(json.results); })
+                .catch(() => callback());
+        },
+        score: function (search) {
+            return function (item) {
+                return 1;
+            };
+        },
+        render: {
+            option: function (item) {
+                return `<div>${item.text}</div>`;
+            },
+            item: function (item) {
+                return `<div>${item.text}</div>`;
+            },
+            no_more_results: () => {
+                return `<div class="no-more-results">${this.noMoreResultsTextValue}</div>`;
+            },
+            no_results: () => {
+                return `<div class="no-results">${this.noResultsFoundTextValue}</div>`;
+            },
+        },
+        preload: 'focus',
+    });
+    return __classPrivateFieldGet(this, _instances, "m", _createTomSelect).call(this, config);
+}, _stripTags = function _stripTags(string) {
+    return string.replace(/(<([^>]+)>)/gi, '');
+}, _mergeObjects = function _mergeObjects(object1, object2) {
+    return Object.assign(Object.assign({}, object1), object2);
+}, _createTomSelect = function _createTomSelect(options) {
+    __classPrivateFieldGet(this, _instances, "m", _dispatchEvent).call(this, 'autocomplete:pre-connect', { options });
+    const tomSelect = new TomSelect(this.formElement, options);
+    __classPrivateFieldGet(this, _instances, "m", _dispatchEvent).call(this, 'autocomplete:connect', { tomSelect, options });
+    return tomSelect;
+}, _dispatchEvent = function _dispatchEvent(name, payload) {
+    this.element.dispatchEvent(new CustomEvent(name, { detail: payload, bubbles: true }));
+};
+default_1.values = {
+    url: String,
+    optionsAsHtml: Boolean,
+    noResultsFoundText: String,
+    noMoreResultsText: String,
+    tomSelectOptions: Object,
+};
+
+export { default_1 as default };

src/Autocomplete/assets/jest.config.js

@@ -0,0 +1,5 @@
+const config = require('../../../jest.config.js');
+
+config.setupFilesAfterEnv.push('./test/setup.js');
+
+module.exports = config;

src/Autocomplete/assets/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@symfony/ux-autocomplete",
+    "description": "JavaScript-powered autocompletion functionality for forms.",
+    "main": "dist/controller.js",
+    "module": "dist/controller.js",
+    "version": "1.0.0",
+    "license": "MIT",
+    "symfony": {
+        "controllers": {
+            "autocomplete": {
+                "main": "dist/controller.js",
+                "webpackMode": "eager",
+                "fetch": "eager",
+                "enabled": true,
+                "autoimport": {
+                    "tom-select/dist/css/tom-select.default.css": true
+                }
+            }
+        }
+    },
+    "peerDependencies": {
+        "@hotwired/stimulus": "^3.0.0",
+        "tom-select": "^2.0.1"
+    },
+    "devDependencies": {
+        "@hotwired/stimulus": "^3.0.0",
+        "fetch-mock-jest": "^1.5.1",
+        "tom-select": "^2.0.1"
+    }
+}