Tag 2.0 🎉

README.md

@@ -1,12 +1,31 @@
 # browser_mod 2.0
 
+[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs)
+
+What if that tablet you have on your wall could open up a live feed from your front door camera when someone rings the bell?
+
+And what if you could use it as an extra security camera?
+
+Or what if you could use it to play music and videos from your Home Assistant media library?
+
+What if you could permanently hide that sidebar from your kids and lock them into a single dashboard?
+
+What if you could change the icon of the Home Assistant tab so it doesn't look the same as the forum?
+
+What if you could change the more-info dialog for some entity to a dashboard card of your own design?
+
+What if you could tap a button and have Home Assistant ask you which rooms you want the roomba to vacuum?
+
+\
+ 
+
 # Installation instructions
 
 - **First make sure you have completely removed any installation of Browser Mod 1**
 
 - Either
 
-  - ~~Find and install Browser Mod under `integrations`in [HACS](https://hacs.xyz)~~
+  - Find and install Browser Mod under `integrations`in [HACS](https://hacs.xyz)
   - OR copy the contents of `custom_components/browser_mod/` to `<your config dir>/custom_components/browser_mod/`.
 
 - Restart Home Assistant
@@ -15,49 +34,31 @@
 
 - Restart Home Assistant
 
+> Note: If you are upgrading from Browser Mod 1, it is likely that you will get some errors in your log during a transition period. They will say something along the lines of `Error handling message: extra keys not allowed @ data['deviceID']`.
+>
+> They appear when a browser which has an old version of Browser Mod cached tries to connect and should disappear once you have cleared all your caches properly.
+
+\
+&nbsp;
+
 # Browser Mod Configuration Panel
 
 When you're logged in as an administrator you should see a new panel called _Browser Mod_ in the sidebar. This is where you controll any Browser Mod settings.
 
-## See [Configuration Panel](documentation/configuration-panel.md) for more info
+### See [Configuration Panel](documentation/configuration-panel.md) for more info
+\
+&nbsp;
 
 # Browser Mod Services
 
-Browser Mod has a number of services you can call to cause things to happen in the target Browser.
+Browser Mod has a number of services you can call to cause things to happen in the target Browser, such as opening a popup or navigating to a certain dashboard.
 
-## See [Services](documentation/services.md) for more info
+### See [Services](documentation/services.md) for more info
+\
+&nbsp;
 
-### Calling services
 
-Services can be called from the backend using the normal service call procedures. Registered Browsers can be selected as targets through their device:
-![GUI service call](https://user-images.githubusercontent.com/1299821/180668350-1cbe751d-615d-4102-b939-e49e9cd2ca74.png)
-
-In yaml, the BrowserID can be used for targeting a specific browser:
-
-```yaml
-service: browser_mod.more_info
-data:
-  entity: light.bed_light
-  browser_id:
-    - 79be65e8-f06c78f
-```
-
-If no target or `browser_id` is specified, the service will target all registerd Browsers.
-
-To call a service from a dashboard use the call-service [action](https://www.home-assistant.io/dashboards/actions/) or the special action `fire-dom-event`:
-
-```yaml
-tap_action:
-  action: fire-dom-event
-  browser_mod:
-    service: browser_mod.more_info
-    data:
-      entity: light.bed_light
-```
-
-Services called via `fire-dom-event` or called as a part of a different service call will (by default) _only_ target the current Browser (even if it's not registered).
-
-# Popup card
+## Popup card
 
 A popup card can be used to replace the more-info dialog of an entity with something of your choosing.
 
@@ -78,8 +79,9 @@ card:
 [any parameter from the browser_mod.popup service call except "content"]
 ```
 
+> *Note:* It's advisable to use a `fire-dom-event` tap action instead as far as possible. Popup card is for the few cases where that's not possible. See [`services`](documentation/services.md) for more info.
 
-# Browser Player
+## Browser Player
 
 Browser player is a card that allows you to controll the volume and playback on the current Browsers media player.
 
@@ -89,6 +91,18 @@ Add it to a dashboard via the GUI or through yaml:
 type: custom:browser-player
 ```
 
+
+# FAQ
+
+### **Why doesn't ANYTHING that used to work with Browser Mod 1.0 work with Browser Mod 2.0?**
+
+Browser Mod 2.0 has been rewritten ENTIRELY from the ground up. This allows it to be more stable and less resource intensive. At the same time I took the opportunity to rename a lot of things in ways that are more consistent with Home Assistant nomenclature.
+
+In short, things are hopefully much easier now for new users of Browser Mod at the unfortunate cost of a one-time inconvenience for veteran expert users such as yourself.
+
+### **Why does my Browser ID keep changing?**
+There's just no way around this. I've used every trick in the book and invented a handful of new ones in order to save the Browser ID as far as possible. It should be much better in Browser Mod 2.0 than earlier, but it's still not perfect. At least it's easy to change it back now...
+
 ---
 
 <a href="https://www.buymeacoffee.com/uqD6KHCdJ" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/white_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

custom_components/browser_mod/browser.py

@@ -167,6 +167,16 @@ class BrowserModBrowser:
         device = dr.async_get_device({(DOMAIN, self.browserID)})
         dr.async_remove_device(device.id)
 
+    def get_device_id(self, hass):
+        er = entity_registry.async_get(hass)
+        entities = list(self.entities.values())
+        if len(entities):
+            entity = entities[0]
+            entry = er.async_get(entity.entity_id)
+            if entry:
+                return entry.device_id
+        return "default"
+
     @property
     def connection(self):
         """The current websocket connections for this Browser."""

custom_components/browser_mod/connection.py

@@ -62,7 +62,9 @@ async def async_setup_connection(hass):
             dev.update_settings(hass, store.get_browser(browserID).asdict())
             dev.open_connection(connection, msg["id"])
             await store.set_browser(
-                browserID, last_seen=datetime.now(tz=timezone.utc).isoformat()
+                browserID,
+                last_seen=datetime.now(tz=timezone.utc).isoformat(),
+                meta=dev.get_device_id(hass),
             )
         send_update(store.asdict())
 

custom_components/browser_mod/light.py

@@ -40,8 +40,8 @@ class BrowserModLight(BrowserModEntity, LightEntity):
     def brightness(self):
         return self._data.get("screen_brightness", 1)
 
-    def turn_on(self, **kwargs):
-        self.browser.send("screen_on", **kwargs)
+    async def async_turn_on(self, **kwargs):
+        await self.browser.send("screen_on", **kwargs)
 
-    def turn_off(self, **kwargs):
-        self.browser.send("screen_off")
+    async def async_turn_off(self, **kwargs):
+        await self.browser.send("screen_off")

custom_components/browser_mod/manifest.json

@@ -5,7 +5,7 @@
   "dependencies": ["panel_custom", "websocket_api", "http", "frontend", "lovelace"],
   "codeowners": [],
   "requirements": [],
-  "version": "2.0.0b5",
+  "version": "2.0.0",
   "iot_class": "local_push",
   "config_flow": true
 }

custom_components/browser_mod/media_player.py

@@ -108,11 +108,11 @@ class BrowserModPlayer(BrowserModEntity, MediaPlayerEntity):
     def media_position_updated_at(self):
         return dt.utcnow()
 
-    def set_volume_level(self, volume):
-        self.browser.send("player-set-volume", volume_level=volume)
+    async def async_set_volume_level(self, volume):
+        await self.browser.send("player-set-volume", volume_level=volume)
 
-    def mute_volume(self, mute):
-        self.browser.send("player-mute", mute=mute)
+    async def async_mute_volume(self, mute):
+        await self.browser.send("player-mute", mute=mute)
 
     async def async_play_media(self, media_type, media_id, **kwargs):
         if media_source.is_media_source_id(media_id):
@@ -124,7 +124,7 @@ class BrowserModPlayer(BrowserModEntity, MediaPlayerEntity):
             media_id = async_process_play_media_url(self.hass, media_id)
         if media_type in (MEDIA_TYPE_URL, MEDIA_TYPE_MUSIC):
             media_id = async_process_play_media_url(self.hass, media_id)
-        self.browser.send(
+        await self.browser.send(
             "player-play", media_content_id=media_id, media_type=media_type, **kwargs
         )
 
@@ -136,20 +136,20 @@ class BrowserModPlayer(BrowserModEntity, MediaPlayerEntity):
             # content_filter=lambda item: item.media_content_type.startswith("audio/"),
         )
 
-    def media_play(self):
-        self.browser.send("player-play")
+    async def async_media_play(self):
+        await self.browser.send("player-play")
 
-    def media_pause(self):
-        self.browser.send("player-pause")
+    async def async_media_pause(self):
+        await self.browser.send("player-pause")
 
-    def media_stop(self):
-        self.browser.send("player-stop")
+    async def async_media_stop(self):
+        await self.browser.send("player-stop")
 
-    def media_seek(self, position):
-        self.browser.send("player-seek", position=position)
+    async def async_media_seek(self, position):
+        await self.browser.send("player-seek", position=position)
 
-    def turn_off(self):
-        self.browser.send("player-turn-off")
+    async def async_turn_off(self):
+        await self.browser.send("player-turn-off")
 
-    def turn_on(self, **kwargs):
-        self.browser.send("player-turn-on", **kwargs)
+    async def async_turn_on(self, **kwargs):
+        await self.browser.send("player-turn-on", **kwargs)

documentation/configuration-panel.md

@@ -2,7 +2,7 @@
 
 ## This browser
 
-A basic concept for Browser Mod is the _Browser_. A _Browser_ is identified by a unique `BrowserID` stored in the browsers [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API).
+The most important concept for Browser Mod is the _Browser_. A _Browser_ is identified by a unique `BrowserID` stored in the browsers [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API).
 
 Browser Mod will initially assigning a random `BrowserID` to each _Browser_ that connects, but you can change this if you want.
 
@@ -43,15 +43,20 @@ If you are using [Home Assistant Cast](https://www.home-assistant.io/integration
 
 This section is for settings that change the default behavior of the Home Assistant frontend.
 
-Each setting has three levels, _Global_, _Browser_ and _User_.
+For each option the first applicable value will be applied.
 
-- Changes made on the _Global_ tab will be applied for everyone on every browser.
-- Changes made on the _Browser_ tab will be applied for this _Browser_. The settings here override any _Global_ settings.
-- Changes made on the _User_ tab will be applied for the user you're currently logged in as - on any device. The settings here override any _Global_ or _Browser_ settings.
+In the screenshot below, for example, the sidebar title would be set to "My home" - the GLOBAL setting - for any user on any browser (even unregistered). For any user logged in on the "kitchen-dashboard" browser, the sidebar title would instead be set to "FOOD", except for the user "dev" for whom the sidebar title would always be "DEV MODE".
+![Example of a frontend setting being applied for a user, a browser and globally](https://user-images.githubusercontent.com/1299821/187984798-04e72fff-7cce-4394-ba69-42e62c5e0acb.png)
 
-Note that if a setting is set at a lower level but _cleared_ on a higher, it is not _undone_. It's just not overridden.
+### Title template
 
-Also note that _User_ level settings can only be made when logged in as the user in question, and that the Browser Mod configuration panel is only available to administrators. If you need to change a setting for a non-admin user, you will need to temporarily make them admin for the setup, and then un-admin them.
+This allows you to set and dynamically update the title text of the browser tab/window by means on a Jinja [template](https://www.home-assistant.io/docs/configuration/templating/).
+
+> Ex:
+>
+> ```jinja
+> {{ states.persistent_notification | list | count}} - Home Assistant
+> ```
 
 ### Favicon template
 
@@ -67,17 +72,8 @@ This allows you to set and dynamically update the favicon of the browser tab/win
 > {% endif %}
 > ```
 
-Note that this _only_ applies to the current favicon of the page, not any manifest icons such as the loading icon or the icon you get if you save the page to your smartphones homescreen. For those, please see the [hass-favicon](https://github.com/thomasloven/hass-favicon) integration.
+Note that this _only_ applies to the current favicon of the page, not any manifest icons such as the loading icon or the icon you get if you save the page to your smartphones homescreen. For those, please see the [hass-favicon](https://github.com/thomasloven/hass-favicon) custom integration.
 
-### Title template
-
-This allows you to set and dynamically update the title text of the browser tab/window by means on a Jinja [template](https://www.home-assistant.io/docs/configuration/templating/).
-
-> Ex:
->
-> ```jinja
-> {{ states.persistent_notification | list | count}} - Home Assistant
-> ```
 
 ### Hide Sidebar
 
@@ -91,12 +87,23 @@ This will hide the header bar. Completely. It does not care if there are useful
 
 > Tip: See the big yellow warning box at the top of this card? For some reason, it seems to be really easy to forget you turned this on. Please do not bother the Home Assistant team about the header bar missing if you have hidden it yourself. Really, I've forgotten multiple times myself.
 
-### Sidebar order
-
-Did you know that you can change the order and hide items from the sidebar? To do so, either go into your profile settings at the bottom left and click "Change the order and hide items from the sidebar", or click and hold on the "Home Assistant" text at the top of the sidebar.
-
-Normally, the order and hidden items only applies to the current device, but this will make it persistent according to the levels described above.
-
 ### Default dashboard
 
-Like the Sidebar order, the default dashboard (the page shown when you simply access `https://<your home assistant url>/` with nothing after the `/`) can be set in your profile settings but only applies to the current device. This fixes that.
+Set the default dashboard that is shown when you access `https://<your home assistant url>/` with nothing after the `/`.
+
+> *Note:* This also of works with other pages than lovelace dashboards, like e.g. `logbook` or even `history?device_id=f112fd806f2520c76318406f98cd244e&start_date=2022-09-02T16%3A00%3A00.000Z&end_date=2022-09-02T19%3A00%3A00.000Z`.
+
+### Sidebar order
+
+Set the order and hidden items of the sidebar. To change this setting:
+
+- Click the "EDIT" button
+- Change the sidebar to how you want it
+- DO NOT click "DONE"
+- Either add a new User or Browser setting or click one of the pencil icons to overwrite an old layout
+- Click the "RESTORE" button
+
+### Sidebar title
+
+This changes the "Home Assistant" text that is displayed at the top of the sidebar.
+Accepts Jinja [templates](https://www.home-assistant.io/docs/configuration/templating/).

documentation/popups.md

@@ -10,17 +10,17 @@ data:
   left_button: Left button
 ```
 
-![Dialog Anatomy](https://user-images.githubusercontent.com/1299821/182708739-f89e3b2b-199f-43e0-bf04-e1dfc7075b2a.png)
+![Screenshot illustrating the title, content and button placements of a popup](https://user-images.githubusercontent.com/1299821/182708739-f89e3b2b-199f-43e0-bf04-e1dfc7075b2a.png)
 
 ## Size
 
 The `size` parameter can be set to `normal`, `wide` and `fullscreen` with results as below (background blur has been exagerated for clarity):
 
-![Normal Size](https://user-images.githubusercontent.com/1299821/182709146-439814f1-d479-4fc7-aab1-e28f5c9a13c7.png)
+![Screenshot of a normal size popup](https://user-images.githubusercontent.com/1299821/182709146-439814f1-d479-4fc7-aab1-e28f5c9a13c7.png)
 
-![Wide Size](https://user-images.githubusercontent.com/1299821/182709172-c98a9c23-5e58-4564-bcb7-1d187842948f.png)
+![Screenshot of a wide size popup](https://user-images.githubusercontent.com/1299821/182709172-c98a9c23-5e58-4564-bcb7-1d187842948f.png)
 
-![Fullscreen Size](https://user-images.githubusercontent.com/1299821/182709224-fb2e7b92-8a23-4422-95a0-f0f2835909e0.png)
+![Screenshot of a fullscreen size popup](https://user-images.githubusercontent.com/1299821/182709224-fb2e7b92-8a23-4422-95a0-f0f2835909e0.png)
 
 
 ## HTML content
@@ -34,7 +34,7 @@ data:
     <p> Pretty much any HTML works: <ha-icon icon="mdi:lamp" style="color: red;"></ha-icon>
 ```
 
-![HTML content](https://user-images.githubusercontent.com/1299821/182710044-6fea3ba3-5262-4361-a131-691770340518.png)
+![Screenshot of a popup rendering the HTML code above](https://user-images.githubusercontent.com/1299821/182710044-6fea3ba3-5262-4361-a131-691770340518.png)
 
 ## Dashboard card content
 
@@ -50,7 +50,7 @@ data:
       - light.kitchen_lights
 ```
 
-![Card content](https://user-images.githubusercontent.com/1299821/182710445-f09b74b8-dd53-4d65-8eba-0945fc1d418e.png)
+![Screenshot of a popup rendering the entities card described above](https://user-images.githubusercontent.com/1299821/182710445-f09b74b8-dd53-4d65-8eba-0945fc1d418e.png)
 
 ## Form content
 `content` can be a list of ha-form schemas and the popup will then contain a form for user input:
@@ -91,7 +91,7 @@ data:
           slider: true
 ```
 
-![Form content](https://user-images.githubusercontent.com/1299821/182712670-f3b4fdb7-84a9-49d1-a26f-2cdaa450fa0e.png)
+![Screenshot of a popup rendering the form described above](https://user-images.githubusercontent.com/1299821/182712670-f3b4fdb7-84a9-49d1-a26f-2cdaa450fa0e.png)
 
 ## Actionable popups
 
@@ -127,7 +127,7 @@ data:
           entity_id: light.bed_light
 ```
 
-![Multi-level popup](https://user-images.githubusercontent.com/1299821/182713421-708d0026-bcfa-4ba6-bbcd-3b85b584162d.gif)
+![Animated screenshot of a popup which opens other popups when one of the action buttons are pressed](https://user-images.githubusercontent.com/1299821/182713421-708d0026-bcfa-4ba6-bbcd-3b85b584162d.gif)
 
 ## Forward form data
 
@@ -158,4 +158,4 @@ data:
               value: 12
 ```
 
-![Vacuum popup](https://user-images.githubusercontent.com/1299821/182713714-ef4149b1-217a-4d41-9737-714f5320c25c.png)
+![Screenshot of a popup allowing the user to choose which rooms to vacuum](https://user-images.githubusercontent.com/1299821/182713714-ef4149b1-217a-4d41-9737-714f5320c25c.png)

documentation/services.md

@@ -67,6 +67,36 @@ script:
 
 Will print `"Button was clicked in 79be65e8-f06c78f" to the Home Assistant log.
 
+# Calling services
+
+Services can be called from the backend using the normal service call procedures. Registered Browsers can be selected as targets through their device:
+![A picture exemplifying setting up a browser_mod.more_info service call in the GUI editor](https://user-images.githubusercontent.com/1299821/180668350-1cbe751d-615d-4102-b939-e49e9cd2ca74.png)
+
+In yaml, the BrowserID can be used for targeting a specific browser:
+
+```yaml
+service: browser_mod.more_info
+data:
+  entity: light.bed_light
+  browser_id:
+    - 79be65e8-f06c78f
+```
+
+If no target or `browser_id` is specified, the service will target all registerd Browsers.
+
+To call a service from a dashboard use the call-service [action](https://www.home-assistant.io/dashboards/actions/) or the special action `fire-dom-event`:
+
+```yaml
+tap_action:
+  action: fire-dom-event
+  browser_mod:
+    service: browser_mod.more_info
+    data:
+      entity: light.bed_light
+```
+
+Services called via `fire-dom-event` or called as a part of a different service call will (by default) _only_ target the current Browser (even if it's not registered).
+
 
 
 # Browser Mod Services

js/config_panel/registered-browsers-card.ts

@@ -46,21 +46,31 @@ class BrowserModRegisteredBrowsersCard extends LitElement {
     return html`
       <ha-card header="Registered Browsers" outlined>
         <div class="card-content">
-          ${Object.keys(window.browser_mod.browsers).map(
-            (d) => html` <ha-settings-row>
+          ${Object.keys(window.browser_mod.browsers).map((d) => {
+            const browser = window.browser_mod.browsers[d];
+            return html` <ha-settings-row>
               <span slot="heading"> ${d} </span>
               <span slot="description">
                 Last connected:
                 <ha-relative-time
                   .hass=${this.hass}
-                  .datetime=${window.browser_mod.browsers[d].last_seen}
+                  .datetime=${browser.last_seen}
                 ></ha-relative-time>
               </span>
+              ${browser.meta && browser.meta !== "default"
+                ? html`
+                    <a href="config/devices/device/${browser.meta}">
+                      <ha-icon-button>
+                        <ha-icon .icon=${"mdi:devices"}></ha-icon>
+                      </ha-icon-button>
+                    </a>
+                  `
+                : ""}
               <ha-icon-button .browserID=${d} @click=${this.unregister_browser}>
                 <ha-icon .icon=${"mdi:delete"}></ha-icon>
               </ha-icon-button>
-            </ha-settings-row>`
-          )}
+            </ha-settings-row>`;
+          })}
         </div>
         ${window.browser_mod.browsers["CAST"] === undefined
           ? html`
@@ -79,6 +89,7 @@ class BrowserModRegisteredBrowsersCard extends LitElement {
     return css`
       ha-icon-button > * {
         display: flex;
+        color: var(--primary-text-color);
       }
     `;
   }

js/plugin/frontend-settings.ts

@@ -4,6 +4,7 @@ export const AutoSettingsMixin = (SuperClass) => {
   class AutoSettingsMixinClass extends SuperClass {
     _faviconTemplateSubscription;
     _titleTemplateSubscription;
+    _sidebarTitleSubscription;
     __currentTitle = undefined;
 
     @runOnce()
@@ -69,12 +70,18 @@ export const AutoSettingsMixin = (SuperClass) => {
 
       // Sidebar title
       if (settings.sidebarTitle) {
-        selectTree(
-          document,
-          "home-assistant $ home-assistant-main $ app-drawer-layout app-drawer ha-sidebar $ .title"
-        ).then((el) => {
-          if (el) (el as HTMLElement).innerHTML = settings.sidebarTitle;
-        });
+        (async () => {
+          if (this._sidebarTitleSubscription) {
+            this._sidebarTitleSubscription();
+          }
+          this._sidebarTitleSubscription = undefined;
+          this._sidebarTitleSubscription =
+            await this.connection.subscribeMessage(this._updateSidebarTitle, {
+              type: "render_template",
+              template: settings.sidebarTitle,
+              variables: {},
+            });
+        })();
       }
 
       // Hide header
@@ -115,6 +122,15 @@ export const AutoSettingsMixin = (SuperClass) => {
       }
     }
 
+    _updateSidebarTitle({ result }) {
+      selectTree(
+        document,
+        "home-assistant $ home-assistant-main $ app-drawer-layout app-drawer ha-sidebar $ .title"
+      ).then((el) => {
+        if (el) (el as HTMLElement).innerHTML = result;
+      });
+    }
+
     get _currentFavicon() {
       const link: any = document.head.querySelector("link[rel~='icon']");
       return link?.href;

js/plugin/popups.ts

@@ -28,6 +28,7 @@ class BrowserModPopup extends LitElement {
 
   async closeDialog() {
     this.open = false;
+    this.card = undefined;
     clearInterval(this._timeoutTimer);
     if (this._autocloseListener) {
       window.browser_mod.removeEventListener(
@@ -319,10 +320,7 @@ class BrowserModPopup extends LitElement {
         ha-dialog {
           --mdc-dialog-min-width: 100vw;
           --mdc-dialog-max-width: 100vw;
-          --mdc-dialog-min-height: 100%;
-          --mdc-dialog-max-height: 100%;
           --mdc-shape-medium: 0px;
-          --vertial-align-dialog: flex-end;
         }
       }
     `;
@@ -344,6 +342,13 @@ export const PopupMixin = (SuperClass) => {
       this._popupEl = document.createElement("browser-mod-popup");
       document.body.append(this._popupEl);
 
+      this._popupEl.addEventListener("hass-more-info", async (ev) => {
+        const base = await hass_base_el();
+        console.log("More info", ev, base);
+        this._popupEl.closeDialog();
+        base.dispatchEvent(ev);
+      });
+
       // const historyListener = async (ev) => {
       //   const popupState = ev.state?.browserModPopup;
       //   if (popupState) {

js/plugin/require-interact.ts

@@ -64,6 +64,7 @@ export const RequireInteractMixin = (SuperClass) => {
               this._interactionResolve();
             }
           });
+        video.pause();
       }
 
       window.addEventListener(

package.json

@@ -1,7 +1,7 @@
 {
   "name": "browser_mod",
   "private": true,
-  "version": "2.0.0b5",
+  "version": "2.0.0",
   "description": "",
   "scripts": {
     "build": "rollup -c",