- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-import { Application, Controller } from '@hotwired/stimulus';
-import { getByTestId, waitFor } from '@testing-library/dom';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { clearDOM, mountDOM } from '../../../../test/stimulus-helpers';
-import TypedController from '../src/controller';
-
-// Controller used to check the actual controller was properly booted
-class CheckController extends Controller {
- connect() {
- this.element.addEventListener('typed:connect', () => {
- this.element.classList.add('connected');
- });
- this.element.addEventListener('typed:pre-connect', () => {
- this.element.classList.add('pre-connected');
- });
- }
-}
-
-const startStimulus = () => {
- const application = Application.start();
- application.register('check', CheckController);
- application.register('typed', TypedController);
-};
-
-describe('TypedController', () => {
- let container: HTMLElement;
-
- beforeEach(() => {
- container = mountDOM(`
-
-
- Symfony UX
-
-
-
- I created this UX component because
-
-
-
- `);
- });
-
- afterEach(() => {
- clearDOM();
- });
-
- it('pre-connect', async () => {
- expect(getByTestId(container, 'typed')).not.toHaveClass('pre-connected');
- expect(getByTestId(container, 'typed')).not.toHaveClass('connected');
-
- startStimulus();
- await waitFor(() => expect(getByTestId(container, 'typed')).toHaveClass('pre-connected'));
- await waitFor(() => expect(getByTestId(container, 'typed')).toHaveClass('connected'));
- });
-});
diff --git a/src/Typed/composer.json b/src/Typed/composer.json
deleted file mode 100644
index 81709aa2fa5..00000000000
--- a/src/Typed/composer.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
- "name": "symfony/ux-typed",
- "type": "symfony-bundle",
- "description": "Typed integration for Symfony",
- "keywords": [
- "symfony-ux"
- ],
- "homepage": "https://symfony.com",
- "license": "MIT",
- "authors": [
- {
- "name": "Florent Morselli",
- "email": "contact@spomky-labs.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "autoload": {
- "psr-4": {
- "Symfony\\UX\\Typed\\": "src/"
- }
- },
- "require": {
- "php": ">=8.1",
- "symfony/deprecation-contracts": "^2.5|^3"
- },
- "conflict": {
- "symfony/flex": "<1.13"
- },
- "extra": {
- "thanks": {
- "name": "symfony/ux",
- "url": "https://github.com/symfony/ux"
- }
- },
- "minimum-stability": "dev"
-}
diff --git a/src/Typed/doc/Animation.gif b/src/Typed/doc/Animation.gif
deleted file mode 100644
index 3ef485c5287..00000000000
Binary files a/src/Typed/doc/Animation.gif and /dev/null differ
diff --git a/src/Typed/doc/index.rst b/src/Typed/doc/index.rst
deleted file mode 100644
index cc4685c74f5..00000000000
--- a/src/Typed/doc/index.rst
+++ /dev/null
@@ -1,166 +0,0 @@
-Symfony UX Typed
-================
-
-.. warning::
-
- **Deprecated: This package has been deprecated in 2.x and will be removed in the next major version.**
-
- To keep the same functionality in your Symfony application, please follow the migration steps
- from the `Symfony UX Typed README.md`_.
-
-Symfony UX Typed is a Symfony bundle integrating `Typed`_ in
-Symfony applications. It is part of `the Symfony UX initiative`_.
-
-Typed is a complete and easy to use animated typed texts.
-Just enter the strings you want to see typed, and it goes live without complexity.
-
-.. image:: Animation.gif
- :alt: Typed showing messages
-
-Installation
-------------
-
-.. caution::
-
- Before you start, make sure you have `StimulusBundle configured in your app`_.
-
-Install the bundle using Composer and Symfony Flex:
-
-.. code-block:: terminal
-
- $ composer require symfony/ux-typed
-
-If you're using WebpackEncore, install your assets and restart Encore (not
-needed if you're using AssetMapper):
-
-.. code-block:: terminal
-
- $ npm install --force
- $ npm run watch
-
-.. note::
-
- For more complex installation scenarios, you can install the JavaScript assets through the `@symfony/ux-typed npm package`_
-
-Usage
------
-
-Typed works using a list of strings and will manage typing them on your page.
-It comes with a lot of parameters to customize the way the strings are typed: speed, cursor, delays
-and smart backspace are some incredible parameters you can use.
-
-The main usage of Symfony UX Typed is to use its Stimulus controller to initialize Typed:
-
-.. code-block:: html+twig
-
-
- I created this UX component because
-
-
-
-
-That's it! Typed now shows the messages defined in the ``strings`` argument.
-You can customize the way those messages are typed.
-Parameters are exactly the same as for the `typed library`_
-
-.. code-block:: html+twig
-
-
- I created this UX component because
-
-
-
-Extend the JavaScript Controller
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-Symfony UX Typed allows you to extend its default behavior using a custom
-Stimulus controller:
-
-.. code-block:: javascript
-
- // assets/controllers/mytyped_controller.js
-
- import { Controller } from '@hotwired/stimulus';
-
- export default class extends Controller {
- initialize() {
- this._onPreConnect = this._onPreConnect.bind(this);
- this._onConnect = this._onConnect.bind(this);
- }
-
- connect() {
- this.element.addEventListener('typed:pre-connect', this._onPreConnect);
- this.element.addEventListener('typed:connect', this._onConnect);
- }
-
- disconnect() {
- // You should always remove listeners when the controller is disconnected to avoid side-effects
- this.element.removeEventListener('typed:connect', this._onConnect);
- this.element.removeEventListener('typed:pre-connect', this._onPreConnect);
- }
-
- _onPreConnect(event) {
- // Typed has not been initialized - options can be changed
- console.log(event.detail.options); // Options that will be used to initialize Typed
- event.detail.options.onBegin = (typed) => {
- console.log("Typed is ready to type cool messages!");
- };
- event.detail.options.onStop = (typed) => {
- console.log("OK. Enough is enough.");
- };
- }
-
- _onConnect(event) {
- // Typed has just been initialized and you can access details from the event
- console.log(event.detail.typed); // Typed instance
- console.log(event.detail.options); // Options used to initialize Typed
- }
- }
-
-.. code-block::
-
-Then in your template, add your controller to the HTML attribute:
-
-.. code-block:: html+twig
-
-
-
- Typed
- {# ... #}
-
-
- {# ... #}
-
-
-
-.. note::
-
- Be careful to add your controller **before** the Typed controller so that it
- is executed before and can listen on the ``typed:connect`` event properly.
-
-Backward Compatibility promise
-------------------------------
-
-This bundle aims at following the same Backward Compatibility promise as
-the Symfony framework:
-https://symfony.com/doc/current/contributing/code/bc.html
-
-.. _`Typed`: https://github.com/mattboldt/typed.js/blob/master/README.md
-.. _`the Symfony UX initiative`: https://ux.symfony.com/
-.. _`typed library`: https://github.com/mattboldt/typed.js/blob/master/README.md
-.. _StimulusBundle configured in your app: https://symfony.com/bundles/StimulusBundle/current/index.html
-.. _`@symfony/ux-typed npm package`: https://www.npmjs.com/package/@symfony/ux-typed
-.. _`Symfony UX Typed README.md`: https://github.com/symfony/ux/tree/2.x/src/Typed
diff --git a/src/Typed/src/DependencyInjection/TypedExtension.php b/src/Typed/src/DependencyInjection/TypedExtension.php
deleted file mode 100644
index 5e901d624c6..00000000000
--- a/src/Typed/src/DependencyInjection/TypedExtension.php
+++ /dev/null
@@ -1,59 +0,0 @@
-
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Symfony\UX\Typed\DependencyInjection;
-
-use Symfony\Component\AssetMapper\AssetMapperInterface;
-use Symfony\Component\DependencyInjection\ContainerBuilder;
-use Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface;
-use Symfony\Component\HttpKernel\DependencyInjection\Extension;
-
-trigger_deprecation('symfony/ux-typed', '2.27.0', 'The package is deprecated and will be removed in 3.0. Follow the migration steps in https://github.com/symfony/ux/tree/2.x/src/Typed to keep using Typed in your Symfony application.');
-
-/**
- * @internal
- */
-class TypedExtension extends Extension implements PrependExtensionInterface
-{
- public function load(array $configs, ContainerBuilder $container): void
- {
- }
-
- public function prepend(ContainerBuilder $container): void
- {
- if (!$this->isAssetMapperAvailable($container)) {
- return;
- }
-
- $container->prependExtensionConfig('framework', [
- 'asset_mapper' => [
- 'paths' => [
- __DIR__.'/../../assets/dist' => '@symfony/ux-typed',
- ],
- ],
- ]);
- }
-
- private function isAssetMapperAvailable(ContainerBuilder $container): bool
- {
- if (!interface_exists(AssetMapperInterface::class)) {
- return false;
- }
-
- // check that FrameworkBundle 6.3 or higher is installed
- $bundlesMetadata = $container->getParameter('kernel.bundles_metadata');
- if (!isset($bundlesMetadata['FrameworkBundle'])) {
- return false;
- }
-
- return is_file($bundlesMetadata['FrameworkBundle']['path'].'/Resources/config/asset_mapper.php');
- }
-}
diff --git a/src/Typed/src/TypedBundle.php b/src/Typed/src/TypedBundle.php
deleted file mode 100644
index 808fa55d706..00000000000
--- a/src/Typed/src/TypedBundle.php
+++ /dev/null
@@ -1,27 +0,0 @@
-
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Symfony\UX\Typed;
-
-use Symfony\Component\HttpKernel\Bundle\Bundle;
-
-trigger_deprecation('symfony/ux-typed', '2.27.0', 'The package is deprecated and will be removed in 3.0. Follow the migration steps in https://github.com/symfony/ux/tree/2.x/src/Typed to keep using Typed in your Symfony application.');
-
-/**
- * @final
- */
-class TypedBundle extends Bundle
-{
- public function getPath(): string
- {
- return \dirname(__DIR__);
- }
-}
diff --git a/test_apps/encore-app/assets/controllers.json b/test_apps/encore-app/assets/controllers.json
index 61a7caedbc2..f8a100fee0f 100644
--- a/test_apps/encore-app/assets/controllers.json
+++ b/test_apps/encore-app/assets/controllers.json
@@ -100,12 +100,6 @@
"fetch": "eager"
}
},
- "@symfony/ux-typed": {
- "typed": {
- "enabled": true,
- "fetch": "eager"
- }
- },
"@symfony/ux-vue": {
"vue": {
"enabled": true,
diff --git a/test_apps/encore-app/composer.json b/test_apps/encore-app/composer.json
index 0c7c486b8e3..82bd0f9c761 100644
--- a/test_apps/encore-app/composer.json
+++ b/test_apps/encore-app/composer.json
@@ -30,7 +30,6 @@
"symfony/ux-translator": "^2.23",
"symfony/ux-turbo": "^2.23",
"symfony/ux-twig-component": "^2.23",
- "symfony/ux-typed": "^2.23",
"symfony/ux-vue": "^2.23",
"symfony/webpack-encore-bundle": "^2.2",
"symfony/yaml": "7.2.*"
diff --git a/test_apps/encore-app/config/bundles.php b/test_apps/encore-app/config/bundles.php
index 2f055ee053b..a71523ebb31 100644
--- a/test_apps/encore-app/config/bundles.php
+++ b/test_apps/encore-app/config/bundles.php
@@ -21,6 +21,5 @@
Symfony\UX\TogglePassword\TogglePasswordBundle::class => ['all' => true],
Symfony\UX\Translator\UxTranslatorBundle::class => ['all' => true],
Symfony\UX\Turbo\TurboBundle::class => ['all' => true],
- Symfony\UX\Typed\TypedBundle::class => ['all' => true],
Symfony\UX\Vue\VueBundle::class => ['all' => true],
];
diff --git a/test_apps/encore-app/package.json b/test_apps/encore-app/package.json
index 64c60b642d0..dad9d8cc00f 100644
--- a/test_apps/encore-app/package.json
+++ b/test_apps/encore-app/package.json
@@ -21,7 +21,6 @@
"@symfony/ux-toggle-password": "file:vendor/symfony/ux-toggle-password/assets",
"@symfony/ux-translator": "file:vendor/symfony/ux-translator/assets",
"@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
- "@symfony/ux-typed": "file:vendor/symfony/ux-typed/assets",
"@symfony/ux-vue": "file:vendor/symfony/ux-vue/assets",
"@symfony/webpack-encore": "^5.0.0",
"chart.js": "^3.4.1 || ^4.0",
@@ -35,7 +34,6 @@
"svelte": "^3.0 || ^4.0",
"svelte-loader": "^3.2.4",
"tom-select": "^2.2.2",
- "typed.js": "^2.0",
"vue": "^3.0",
"vue-loader": "^17.0.0",
"webpack": "^5.74.0",
diff --git a/test_apps/encore-app/symfony.lock b/test_apps/encore-app/symfony.lock
index 2756101e876..ec3bc6f9cc3 100644
--- a/test_apps/encore-app/symfony.lock
+++ b/test_apps/encore-app/symfony.lock
@@ -256,9 +256,6 @@
"assets/svelte/controllers/Hello.svelte"
]
},
- "symfony/ux-swup": {
- "version": "v2.23.0"
- },
"symfony/ux-toggle-password": {
"version": "v2.23.0"
},
diff --git a/ux.symfony.com/assets/controllers.json b/ux.symfony.com/assets/controllers.json
index 5b5375a5a81..1e301eabbcd 100644
--- a/ux.symfony.com/assets/controllers.json
+++ b/ux.symfony.com/assets/controllers.json
@@ -94,12 +94,6 @@
"fetch": "lazy"
}
},
- "@symfony/ux-typed": {
- "typed": {
- "enabled": true,
- "fetch": "lazy"
- }
- },
"@symfony/ux-vue": {
"vue": {
"enabled": true,
diff --git a/ux.symfony.com/composer.json b/ux.symfony.com/composer.json
index 6a3198f2250..dda10666536 100644
--- a/ux.symfony.com/composer.json
+++ b/ux.symfony.com/composer.json
@@ -49,7 +49,6 @@
"symfony/ux-translator": "2.x-dev",
"symfony/ux-turbo": "2.x-dev",
"symfony/ux-twig-component": "2.x-dev",
- "symfony/ux-typed": "2.x-dev",
"symfony/ux-vue": "2.x-dev",
"symfony/validator": "7.2.*",
"symfony/yaml": "7.2.*",
diff --git a/ux.symfony.com/composer.lock b/ux.symfony.com/composer.lock
index abef0dce226..418d80e29a8 100644
--- a/ux.symfony.com/composer.lock
+++ b/ux.symfony.com/composer.lock
@@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
- "content-hash": "cb6b21545f526b7e56b3d51e502ff6cf",
+ "content-hash": "6c79221d08e8c24c875bf442d76aac9a",
"packages": [
{
"name": "composer/semver",
@@ -8662,74 +8662,6 @@
],
"time": "2025-01-25T02:19:26+00:00"
},
- {
- "name": "symfony/ux-typed",
- "version": "2.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/symfony/ux-typed.git",
- "reference": "07b8b33a68a66b20dd4df8e3f9b9618e74a786f1"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/symfony/ux-typed/zipball/07b8b33a68a66b20dd4df8e3f9b9618e74a786f1",
- "reference": "07b8b33a68a66b20dd4df8e3f9b9618e74a786f1",
- "shasum": ""
- },
- "conflict": {
- "symfony/flex": "<1.13"
- },
- "default-branch": true,
- "type": "symfony-bundle",
- "extra": {
- "thanks": {
- "url": "https://github.com/symfony/ux",
- "name": "symfony/ux"
- }
- },
- "autoload": {
- "psr-4": {
- "Symfony\\UX\\Typed\\": "src/"
- }
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "Florent Morselli",
- "email": "contact@spomky-labs.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "description": "Typed integration for Symfony",
- "homepage": "https://symfony.com",
- "keywords": [
- "symfony-ux"
- ],
- "support": {
- "source": "https://github.com/symfony/ux-typed/tree/v2.22.1"
- },
- "funding": [
- {
- "url": "https://symfony.com/sponsor",
- "type": "custom"
- },
- {
- "url": "https://github.com/fabpot",
- "type": "github"
- },
- {
- "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
- "type": "tidelift"
- }
- ],
- "time": "2024-12-05T14:25:02+00:00"
- },
{
"name": "symfony/ux-vue",
"version": "2.x-dev",
@@ -12824,7 +12756,6 @@
"symfony/ux-translator": 20,
"symfony/ux-turbo": 20,
"symfony/ux-twig-component": 20,
- "symfony/ux-typed": 20,
"symfony/ux-vue": 20
},
"prefer-stable": true,
diff --git a/ux.symfony.com/config/bundles.php b/ux.symfony.com/config/bundles.php
index ed8e970cf51..8a9c0837f2a 100644
--- a/ux.symfony.com/config/bundles.php
+++ b/ux.symfony.com/config/bundles.php
@@ -25,7 +25,6 @@
Symfony\UX\Svelte\SvelteBundle::class => ['all' => true],
Symfony\UX\Translator\UxTranslatorBundle::class => ['all' => true],
Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
- Symfony\UX\Typed\TypedBundle::class => ['all' => true],
Zenstruck\Foundry\ZenstruckFoundryBundle::class => ['dev' => true, 'test' => true],
Symfony\UX\TogglePassword\TogglePasswordBundle::class => ['all' => true],
Symfonycasts\SassBundle\SymfonycastsSassBundle::class => ['all' => true],
diff --git a/ux.symfony.com/importmap.php b/ux.symfony.com/importmap.php
index f3a9a6453a0..bbacbe9d07e 100644
--- a/ux.symfony.com/importmap.php
+++ b/ux.symfony.com/importmap.php
@@ -91,9 +91,6 @@
'@hotwired/turbo' => [
'version' => '8.0.4',
],
- 'typed.js' => [
- 'version' => '2.1.0',
- ],
'snarkdown' => [
'version' => '2.0.0',
],
@@ -183,4 +180,12 @@
'@symfony/ux-leaflet-map' => [
'path' => './vendor/symfony/ux-leaflet-map/assets/dist/map_controller.js',
],
+ 'tom-select/dist/css/tom-select.default.css' => [
+ 'version' => '2.4.3',
+ 'type' => 'css',
+ ],
+ 'tom-select/dist/css/tom-select.bootstrap4.css' => [
+ 'version' => '2.4.3',
+ 'type' => 'css',
+ ],
];
diff --git a/ux.symfony.com/src/Service/UxPackageRepository.php b/ux.symfony.com/src/Service/UxPackageRepository.php
index b4791130f63..45fee897d65 100644
--- a/ux.symfony.com/src/Service/UxPackageRepository.php
+++ b/ux.symfony.com/src/Service/UxPackageRepository.php
@@ -254,6 +254,7 @@ public function findAll(?string $query = null, ?bool $deprecated = null): array
'linear-gradient(95deg, #20A091 -5%, #4EC9B3 105%)',
'Animated Typing with Typed.js',
'Animated typing with Typed.js',
+ isDeprecated: true
))
->setDocsLink('https://github.com/mattboldt/typed.js/', 'Typed.js documentation'),
];
diff --git a/ux.symfony.com/symfony.lock b/ux.symfony.com/symfony.lock
index ae918923a7d..f0c43313f0a 100644
--- a/ux.symfony.com/symfony.lock
+++ b/ux.symfony.com/symfony.lock
@@ -632,9 +632,6 @@
"symfony/ux-twig-component": {
"version": "v2.1.0"
},
- "symfony/ux-typed": {
- "version": "2.x-dev"
- },
"symfony/ux-vue": {
"version": "2.x-dev"
},
diff --git a/ux.symfony.com/templates/ux_packages/typed.html.twig b/ux.symfony.com/templates/ux_packages/typed.html.twig
index 94582547a54..c890d3a993f 100644
--- a/ux.symfony.com/templates/ux_packages/typed.html.twig
+++ b/ux.symfony.com/templates/ux_packages/typed.html.twig
@@ -1,45 +1,58 @@
-{% extends 'ux_packages/package.html.twig' %}
+{% extends 'base.html.twig' %}
-{% block package_header %}
- {% component PackageHeader with {
- package: 'typed',
- eyebrowText: 'A Library that Types'
- } %}
- {% block title_header %}
- Typed brings text to life
- {% endblock %}
+{% set meta = {
+ title: package.humanName ~ ' - Symfony UX 2',
+ description: package.description,
+ canonical: url(package.route),
+ social: {
+ title: package.tagline ~ ' - Symfony UX 2' ~ package.humanName|u.trimStart('UX '),
+ description: package.description|striptags,
+ image: {
+ url: absolute_url(asset(package.getSocialImage('1200x675'))),
+ type: 'image/png',
+ width: 1200,
+ height: 675,
+ alt: package.humanName ~ ' - Component Icon',
+ },
+ }
+} %}
- {% block sub_content %}
- Spice up some text by typing, backspacing and re-typing with Typed.js.
- {% endblock %}
- {% endcomponent %}
+{% block main %}
+
+
+
Deprecated Package
+
UX Typed 2.x
+
This component is deprecated and will not receive further updates.
+ Please follow the migration steps
+ if you want to keep using Typed in your app.
+
- {% set strings = [
- 'I ❤️ Symfony UX!',
- 'Symfony UX Typed loves to type',
- 'Symfony UX Typed and backspace',
- 'Control the speed',
- 'Control the cursor',
- 'Control your destiny!!!',
- 'Control your destiny... sort of',
- ] %}
-
-
+{% block stylesheets %}
+ {{ parent() }}
+
{% endblock %}
diff --git a/ux.symfony.com/tests/baseline-ignore b/ux.symfony.com/tests/baseline-ignore
index db6f6e22afb..59ebb3a8e3e 100644
--- a/ux.symfony.com/tests/baseline-ignore
+++ b/ux.symfony.com/tests/baseline-ignore
@@ -1,3 +1,2 @@
-%Since symfony/ux-typed 2\.27\.0: The package is deprecated and will be removed in 3\.0\.%
%Since symfony/ux-lazy-image 2\.27\.0: The package is deprecated and will be removed in 3\.0\.%
%Since symfony/ux-toggle-password 2\.29\.0: The package is deprecated and will be removed in 3\.0\.%