@webwriter/angular 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Frederic Salmen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.d.ts

@@ -0,0 +1,14 @@
+import type {ApplicationRef, Signal, Type} from "@angular/core"
+import type {WidgetHost, WidgetSnapshot} from "@webwriter/widget"
+
+export * from "@webwriter/widget"
+
+export function injectWidgetHost(): WidgetHost
+export function injectWidget(): Signal<WidgetSnapshot>
+export function createAngularWidget(
+  component: Type<unknown>,
+  options?: {application?: ApplicationRef, styles?: string},
+): Promise<{
+  new (): WidgetHost
+  readonly widgetAttributes: readonly string[]
+}>

package/index.js

@@ -0,0 +1,91 @@
+import {createComponent, DestroyRef, inject, InjectionToken, Injector, signal} from "@angular/core"
+import {createApplication} from "@angular/platform-browser"
+import {withWidgetRuntime} from "@webwriter/widget"
+
+const widgetHost = new InjectionToken("WebWriter widget host")
+let defaultApplication
+
+export function injectWidgetHost() {
+  return inject(widgetHost)
+}
+
+export function injectWidget() {
+  const {getSnapshot, subscribe} = injectWidgetHost().widgetRuntime
+  const state = signal(getSnapshot())
+  inject(DestroyRef).onDestroy(subscribe(() => state.set(getSnapshot())))
+  return state.asReadonly()
+}
+
+/** Create a widget class that mounts an Angular component in its shadow root. */
+export async function createAngularWidget(Component, {application, styles} = {}) {
+  if(!application) {
+    defaultApplication ??= createApplication().catch(error => {
+      defaultApplication = undefined
+      throw error
+    })
+    application = await defaultApplication
+  }
+
+  return class AngularWidget extends withWidgetRuntime(HTMLElement) {
+    #view
+    #mount
+
+    constructor() {
+      super()
+      const shadow = this.attachShadow({mode: "open"})
+      if(styles) {
+        const style = this.ownerDocument.createElement("style")
+        style.textContent = styles
+        shadow.append(style)
+      }
+    }
+
+    connectedCallback() {
+      super.connectedCallback()
+      if(!this.isConnected || this.#view) return
+      const mount = this.ownerDocument.createElement("div")
+      const injector = Injector.create({
+        parent: application.injector,
+        providers: [{provide: widgetHost, useValue: this}],
+      })
+      try {
+        // Angular can stamp its host and render freely inside this element.
+        this.shadowRoot.append(mount)
+        this.#mount = mount
+        const view = this.#view = createComponent(Component, {
+          hostElement: mount,
+          environmentInjector: application.injector,
+          elementInjector: injector,
+        })
+        view.onDestroy(() => injector.destroy())
+        application.attachView(view.hostView)
+        view.changeDetectorRef.detectChanges()
+      }
+      catch(error) {
+        if(this.#view) this.#destroyView()
+        else {
+          injector.destroy()
+          mount.remove()
+          this.#mount = undefined
+        }
+        throw error
+      }
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback()
+      queueMicrotask(() => {
+        if(!this.isConnected) this.#destroyView()
+      })
+    }
+
+    #destroyView() {
+      const view = this.#view, mount = this.#mount
+      this.#view = this.#mount = undefined
+      try { view?.destroy() }
+      finally { mount?.remove() }
+    }
+  }
+}
+
+export * from "@webwriter/widget"

package/package.json

@@ -1,6 +1,27 @@
 {
   "name": "@webwriter/angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Angular adapter for WebWriter widgets",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    }
+  },
+  "files": [
+    "index.js",
+    "index.d.ts"
+  ],
+  "dependencies": {
+    "@webwriter/widget": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "^22.2.0",
+    "@angular/platform-browser": "^22.2.0"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.