[Typed] Deprecate the package

Author: Kocal

src/Typed/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 2.27.0
+
+-   Deprecate the package
+
 ## 2.13.2
 
 -   Revert "Change JavaScript package to `type: module`"

src/Typed/README.md

@@ -1,5 +1,111 @@
 # Symfony UX Typed
 
+**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, you can follow these migration steps:
+
+1. Install the `typed.js` library:
+
+```bash
+# If you are using Symfony AssetMapper:
+php bin/console importmap:require typed.js
+
+# If you are using NPM (e.g.: with Webpack Encore):
+npm install typed.js
+```
+
+2. Add the following code to your template:
+
+<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. And finally, 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>
+```
+---
+
 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/).
 

src/Typed/doc/index.rst

@@ -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`_.
 
@@ -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

src/Typed/src/DependencyInjection/TypedExtension.php

@@ -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
  */

src/Typed/src/TypedBundle.php

@@ -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
  */