Skip to content

[Typed] Deprecate the package #2809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 3, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/Typed/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# CHANGELOG

## 2.27.0

- Deprecate the package

## 2.13.2

- Revert "Change JavaScript package to `type: module`"
Expand Down
116 changes: 116 additions & 0 deletions src/Typed/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,121 @@
# 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, follow these migration steps:

1. Install the `typed.js` library:

```bash
# If using Symfony AssetMapper:
php bin/console importmap:require typed.js

# If using NPM (e.g.: with Webpack Encore):
npm install typed.js
```

2. Add the following code to your app:

<details><summary><code>assets/controllers/typed_controller.js</code></summary>

```javascript
import { Controller } from '@hotwired/stimulus';
import Typed from 'typed.js';

export default class extends Controller {
static values = {
strings: Array,
typeSpeed: { type: Number, default: 30 },
smartBackspace: { type: Boolean, default: true },
startDelay: Number,
backSpeed: Number,
shuffle: Boolean,
backDelay: { type: Number, default: 700 },
fadeOut: Boolean,
fadeOutClass: { type: String, default: 'typed-fade-out' },
fadeOutDelay: { type: Number, default: 500 },
loop: Boolean,
loopCount: { type: Number, default: Number.POSITIVE_INFINITY },
showCursor: { type: Boolean, default: true },
cursorChar: { type: String, default: '.' },
autoInsertCss: { type: Boolean, default: true },
attr: String,
bindInputFocusEvents: Boolean,
contentType: { type: String, default: 'html' },
};

connect() {
const options = {
strings: this.stringsValue,
typeSpeed: this.typeSpeedValue,
smartBackspace: this.smartBackspaceValue,
startDelay: this.startDelayValue,
backSpeed: this.backSpeedValue,
shuffle: this.shuffleValue,
backDelay: this.backDelayValue,
fadeOut: this.fadeOutValue,
fadeOutClass: this.fadeOutClassValue,
fadeOutDelay: this.fadeOutDelayValue,
loop: this.loopValue,
loopCount: this.loopCountValue,
showCursor: this.showCursorValue,
cursorChar: this.cursorCharValue,
autoInsertCss: this.autoInsertCssValue,
attr: this.attrValue,
bindInputFocusEvents: this.bindInputFocusEventsValue,
contentType: this.contentTypeValue,
};

this.dispatchEvent('pre-connect', { options });
const typed = new Typed(this.element, options);
this.dispatchEvent('connect', { typed, options });
}

dispatchEvent(name, payload) {
this.dispatch(name, { detail: payload, prefix: 'typed' });
}
}
```

</details>

3. Replace the `symfony--ux-typed` occurrences in your templates with `typed`, for example:

```diff
{% 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',
] %}
<span
- data-controller="symfony--ux-typed"
- data-symfony--ux-typed-loop-value="true"
- data-symfony--ux-typed-show-cursor-value="true"
- data-symfony--ux-typed-cursor-char-value="✨"
- data-symfony--ux-typed-strings-value="{{ strings|json_encode|e('html_attr') }}"
+ data-controller="typed"
+ data-typed-loop-value="true"
+ data-typed-show-cursor-value="true"
+ data-typed-cursor-char-value="✨"
+ data-typed-strings-value="{{ strings|json_encode|e('html_attr') }}"
></span>
```

4. Remove `symfony/ux-typed` from your dependencies:

```bash
composer remove symfony/ux-typed
```

You're done!

---

Symfony UX Typed is a Symfony bundle integrating [Typed](https://github.com/mattboldt/typed.js/blob/master/README.md) in
Symfony applications. It is part of [the Symfony UX initiative](https://ux.symfony.com/).

Expand Down
4 changes: 4 additions & 0 deletions src/Typed/composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
"Symfony\\UX\\Typed\\": "src/"
}
},
"require": {
"php": ">=8.1",
"symfony/deprecation-contracts": "^2.5|^3"
},
"conflict": {
"symfony/flex": "<1.13"
},
Expand Down
8 changes: 8 additions & 0 deletions src/Typed/doc/index.rst
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
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`_.

Expand Down Expand Up @@ -156,3 +163,4 @@ https://symfony.com/doc/current/contributing/code/bc.html
.. _`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
2 changes: 2 additions & 0 deletions src/Typed/src/DependencyInjection/TypedExtension.php
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
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
*/
Expand Down
2 changes: 2 additions & 0 deletions src/Typed/src/TypedBundle.php
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@

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
*/
Expand Down
2 changes: 1 addition & 1 deletion ux.symfony.com/phpunit.xml.dist
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<server name="SHELL_VERBOSITY" value="-1" />
<server name="SYMFONY_PHPUNIT_REMOVE" value="" />
<server name="SYMFONY_PHPUNIT_VERSION" value="9.6" />
<server name="SYMFONY_DEPRECATIONS_HELPER" value="max[self]=0&amp;max[direct]=0&amp;quiet[]=indirect"/>
<server name="SYMFONY_DEPRECATIONS_HELPER" value="ignoreFile=./tests/baseline-ignore&amp;max[self]=0&amp;max[direct]=0&amp;quiet[]=indirect"/>
</php>

<testsuites>
Expand Down
1 change: 1 addition & 0 deletions ux.symfony.com/tests/baseline-ignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
%Since symfony/ux-typed 2\.27\.0: The package is deprecated and will be removed in 3\.0\.%