[Notify] Add Notify library

Author: mtarld

.github/workflows/test.yaml

@@ -54,6 +54,11 @@ jobs:
                   cd src/LazyImage
                   composer update --prefer-lowest --prefer-dist --no-interaction --no-ansi --no-progress
                   php vendor/bin/simple-phpunit
+            - name: Notify
+              run: |
+                  cd src/Notify
+                  composer update --prefer-lowest --prefer-dist --no-interaction --no-ansi --no-progress
+                  php vendor/bin/simple-phpunit
 
     tests-php-high-deps:
         runs-on: ubuntu-latest
@@ -86,6 +91,12 @@ jobs:
                   composer config platform.php 7.4.99
                   composer update --prefer-dist --no-interaction --no-ansi --no-progress
                   php vendor/bin/simple-phpunit
+            - name: Notify
+              run: |
+                  cd src/Notify
+                  composer config platform.php 7.4.99
+                  composer update --prefer-dist --no-interaction --no-ansi --no-progress
+                  php vendor/bin/simple-phpunit
 
     tests-js:
         runs-on: ubuntu-latest

src/Notify/.gitattributes

@@ -0,0 +1,5 @@
+/.gitattributes export-ignore
+/.gitignore export-ignore
+/phpunit.xml.dist export-ignore
+/assets/test export-ignore
+/tests export-ignore

src/Notify/.gitignore

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

src/Notify/DependencyInjection/NotifyExtension.php

@@ -0,0 +1,31 @@
+<?php
+
+/*
+ * 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.
+ */
+
+namespace Symfony\UX\Notify\DependencyInjection;
+
+use Symfony\Component\Config\FileLocator;
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Loader\PhpFileLoader;
+use Symfony\Component\HttpKernel\DependencyInjection\Extension;
+
+/**
+ * @author Mathias Arlaud <[email protected]>
+ *
+ * @internal
+ */
+class NotifyExtension extends Extension
+{
+    public function load(array $configs, ContainerBuilder $container)
+    {
+        $loader = new PhpFileLoader($container, new FileLocator(__DIR__.'/../Resources/config'));
+        $loader->load('services.php');
+    }
+}

src/Notify/NotifyBundle.php

@@ -0,0 +1,24 @@
+<?php
+
+/*
+ * 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.
+ */
+
+namespace Symfony\UX\Notify;
+
+use Symfony\Component\HttpKernel\Bundle\Bundle;
+
+/**
+ * @author Mathias Arlaud <[email protected]>
+ *
+ * @final
+ * @experimental
+ */
+class NotifyBundle extends Bundle
+{
+}

src/Notify/README.md

@@ -0,0 +1,126 @@
+# Symfony UX Notify
+
+Symfony UX Notify is a Symfony bundle integrating realtime notifications in Symfony applications
+using [Mercure](https://mercure.rocks/).
+It is part of [the Symfony UX initiative](https://symfony.com/ux).
+
+## Installation
+
+Symfony UX Notify requires PHP 7.2+ and Symfony 5.3+.
+
+Install this bundle using Composer and Symfony Flex:
+
+```sh
+composer require symfony/ux-notify
+
+# Don't forget to install the JavaScript dependencies as well and compile
+yarn install --force
+yarn encore dev
+```
+
+## Usage
+
+To use Symfony UX Notify you must have a [running Mercure server](https://symfony.com/doc/current/mercure.html#running-a-mercure-hub).
+
+Then, inject the `NotifierInterface` service and send messages on the `chat/mercure` channel.
+
+```php
+// ...
+use Symfony\Component\Notifier\Notification\Notification;
+use Symfony\Component\Notifier\NotifierInterface;
+
+class AnnounceFlashSalesCommand extends Command
+{
+    protected static $defaultName = 'app:flash-sales:announce';
+    private $notifier;
+
+    public function __construct(NotifierInterface $notifier)
+    {
+        parent::__construct();
+
+        $this->notifier = $notifier;
+    }
+
+    protected function execute(InputInterface $input, OutputInterface $output): int
+    {
+        $this->notifier->send(new Notification('Flash sales has been started!', ['chat/mercure']));
+
+        return 0;
+    }
+}
+```
+
+Finally, HTML5 notifications could be displayed using the `notify` Twig function:
+
+```twig
+{{ stream_notifications(['/my/topic/1', '/my/topic/2'], 'https://my-mercure-server:9090/mercure') }}
+{{ stream_notifications() }}
+
+{#
+    Calling notify without parameters will fallback to these values:
+    - 'https://symfony.com/notifier' as a single topic
+    - and mercure.default_hub configuration parameter as hub url
+#}
+```
+
+### Extend the default behavior
+
+Symfony UX Notify allows you to extend its default behavior using a custom Stimulus controller:
+
+```js
+// notify_controller.js
+
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+    connect() {
+        this.element.addEventListener('notify:connect', this._onConnect);
+    }
+
+    disconnect() {
+        // You should always remove listeners when the controller is disconnected to avoid side effects
+        this.element.removeEventListener('notify:connect', this._onConnect);
+    }
+
+    _onConnect(event) {
+        // Event sources have just been created
+        console.log(event.eventSources);
+
+        event.eventSources.forEach((eventSource) => {
+            eventSource.addEventListener('message', (event) => {
+                console.log(event); // You can add custom behavior on each event source
+            });
+        });
+    }
+}
+```
+
+Then in your render call, add your controller as an HTML attribute:
+
+```twig
+{{ stream_notifications() }}
+```
+
+## 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](https://symfony.com/doc/current/contributing/code/bc.html)
+
+However it is currently considered
+[**experimental**](https://symfony.com/doc/current/contributing/code/experimental.html),
+meaning it is not bound to Symfony's BC policy for the moment.
+
+## Run tests
+
+### PHP tests
+
+```sh
+php vendor/bin/phpunit
+```
+
+### JavaScript tests
+
+```sh
+cd Resources/assets
+yarn test
+```

src/Notify/Resources/assets/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/env"],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
+}

src/Notify/Resources/assets/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+yarn.lock
+yarn-error.log

src/Notify/Resources/assets/dist/controller.js

@@ -0,0 +1,139 @@
+/*
+ * 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';
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _stimulus = require("stimulus");
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * @author Mathias Arlaud <[email protected]>
+ */
+var _default = /*#__PURE__*/function (_Controller) {
+  _inherits(_default, _Controller);
+
+  var _super = _createSuper(_default);
+
+  function _default() {
+    var _this;
+
+    _classCallCheck(this, _default);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "eventSources", []);
+
+    return _this;
+  }
+
+  _createClass(_default, [{
+    key: "connect",
+    value: function connect() {
+      var _this2 = this;
+
+      if (!('Notification' in window) || !this.hubValue || !this.topicsValue) {
+        return;
+      }
+
+      this.eventSources = this.topicsValue.map(function (topic) {
+        return new EventSource("".concat(_this2.hubValue, "?topic=").concat(encodeURIComponent(topic)));
+      });
+      this.eventSources.forEach(function (eventSource) {
+        return eventSource.addEventListener('message', function (event) {
+          return _this2._notify(JSON.parse(event.data).summary);
+        });
+      });
+
+      this._dispatchEvent('notify:connect', {
+        eventSources: this.eventSources
+      });
+    }
+  }, {
+    key: "disconnect",
+    value: function disconnect() {
+      var _this3 = this;
+
+      this.eventSources.forEach(function (eventSource) {
+        eventSource.removeEventListener('message', _this3._notify);
+        eventSource.close();
+      });
+      this.eventSources = [];
+    }
+  }, {
+    key: "_notify",
+    value: function _notify(content) {
+      if (!content) {
+        return;
+      }
+
+      if ('granted' === Notification.permission) {
+        new Notification(content);
+        return;
+      }
+
+      if ('denied' !== Notification.permission) {
+        Notification.requestPermission().then(function (permission) {
+          if ('granted' === permission) {
+            new Notification(content);
+          }
+        });
+      }
+    }
+  }, {
+    key: "_dispatchEvent",
+    value: function _dispatchEvent(name) {
+      var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var canBubble = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var cancelable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      var userEvent = document.createEvent('CustomEvent');
+      userEvent.initCustomEvent(name, canBubble, cancelable, payload);
+      this.element.dispatchEvent(userEvent);
+    }
+  }]);
+
+  return _default;
+}(_stimulus.Controller);
+
+exports["default"] = _default;
+
+_defineProperty(_default, "values", {
+  hub: String,
+  topics: Array
+});