feat(lil-gui): expose standalone components

Author: nartc

packages/ngx-lil-gui/.release-it.json

@@ -28,8 +28,8 @@
       }
     },
     "@release-it/bumper": {
-      "in": "packages/ngx-lil-gui/package.json",
-      "out": ["packages/ngx-lil-gui/package.json", "dist/packages/ngx-lil-gui/package.json"]
+      "in": "packages/ngx-lil-gui/version.json",
+      "out": ["dist/packages/ngx-lil-gui/package.json"]
     }
   },
   "git": {

packages/ngx-lil-gui/package.json

@@ -21,11 +21,11 @@
   "license": "MIT",
   "description": "Lil-GUI wrapper for Angular",
   "peerDependencies": {
-    "@angular/common": "^13.0.0",
-    "@angular/core": "^13.0.0"
+    "@angular/common": "^14.0.0",
+    "@angular/core": "^14.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "lil-gui": "~0.16.0"
+    "lil-gui": "~0.16.0 || ~0.17.0"
   }
 }

packages/ngx-lil-gui/src/lib/ngx-lil-gui-color.component.ts

@@ -2,12 +2,12 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  inject,
+  InjectFlags,
   Input,
   OnDestroy,
   OnInit,
-  Optional,
   Output,
-  SkipSelf,
 } from '@angular/core';
 import { ColorController } from 'lil-gui';
 import { NgxLilGui } from './ngx-lil-gui.component';
@@ -21,6 +21,7 @@ import type {
   selector: 'ngx-lil-gui-color[property]',
   template: ``,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class NgxLilGuiColor implements OnInit, OnDestroy {
   @Input() property!: string;
@@ -37,20 +38,20 @@ export class NgxLilGuiColor implements OnInit, OnDestroy {
     return this.#colorController;
   }
 
-  constructor(@Optional() @SkipSelf() private parentGui: NgxLilGui) {
-    if (!parentGui) {
+  #parentGui = inject(NgxLilGui, InjectFlags.Optional | InjectFlags.SkipSelf);
+
+  ngOnInit() {
+    if (!this.#parentGui) {
       throw new Error('ngx-lil-gui-color must be used within a ngx-lil-gui');
     }
-  }
 
-  ngOnInit() {
     this.preAdd.emit();
 
-    this.#colorController = this.parentGui.addColor(
+    this.#colorController = this.#parentGui.addColor(
       this.property,
       this.colorConfig
     );
-    this.parentGui.run(() => {
+    this.#parentGui.run(() => {
       if (this.colorController) {
         this.colorController.updateDisplay();
 

packages/ngx-lil-gui/src/lib/ngx-lil-gui-controller.component.ts

@@ -2,12 +2,12 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  inject,
+  InjectFlags,
   Input,
   OnDestroy,
   OnInit,
-  Optional,
   Output,
-  SkipSelf,
 } from '@angular/core';
 import { Controller } from 'lil-gui';
 import { NgxLilGui } from './ngx-lil-gui.component';
@@ -21,6 +21,7 @@ import type {
   selector: 'ngx-lil-gui-controller[property]',
   template: ``,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class NgxLilGuiController implements OnInit, OnDestroy {
   @Input() property!: string;
@@ -33,22 +34,22 @@ export class NgxLilGuiController implements OnInit, OnDestroy {
 
   #controller?: Controller;
 
-  constructor(@Optional() @SkipSelf() private parentGui: NgxLilGui) {
-    if (!parentGui) {
+  #parentGui = inject(NgxLilGui, InjectFlags.Optional | InjectFlags.SkipSelf);
+
+  ngOnInit() {
+    if (!this.#parentGui) {
       throw new Error(
-        'ngx-lil-gui-controller must be used within a ngx-lil-gui.'
+        'ngx-lil-gui-controller must be used within a ngx-lil-gui'
       );
     }
-  }
 
-  ngOnInit() {
     this.preAdd.emit();
 
-    this.#controller = this.parentGui.addController(
+    this.#controller = this.#parentGui.addController(
       this.property,
       this.controllerConfig
     );
-    this.parentGui.run(() => {
+    this.#parentGui.run(() => {
       if (this.controller) {
         this.controller.updateDisplay();
 

packages/ngx-lil-gui/src/lib/ngx-lil-gui.component.ts

@@ -3,14 +3,13 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  Inject,
+  inject,
+  InjectFlags,
   Input,
   NgZone,
   OnDestroy,
   OnInit,
-  Optional,
   Output,
-  SkipSelf,
 } from '@angular/core';
 import GUI, { ColorController, Controller } from 'lil-gui';
 import type {
@@ -33,6 +32,7 @@ import type {
   `,
   template: ` <ng-content></ng-content> `,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class NgxLilGui implements OnInit, OnDestroy {
   @Input() zoneless = false;
@@ -54,19 +54,20 @@ export class NgxLilGui implements OnInit, OnDestroy {
 
   #gui!: GUI;
 
-  constructor(
-    @SkipSelf() private hostElement: ElementRef<HTMLElement>,
-    @Optional() @SkipSelf() @Inject(NgxLilGui) private parentGUI: NgxLilGui,
-    private ngZone: NgZone
-  ) {}
+  #hostElement = inject(
+    ElementRef,
+    InjectFlags.SkipSelf
+  ) as ElementRef<HTMLElement>;
+  #parentGUI = inject(NgxLilGui, InjectFlags.Optional | InjectFlags.SkipSelf);
+  #ngZone = inject(NgZone);
 
   ngOnInit() {
+    this.zoneless = this.#parentGUI?.zoneless ?? this.zoneless;
     this.run(() => {
-      this.zoneless = this.parentGUI?.zoneless ?? this.zoneless;
       let container: HTMLElement | undefined =
         this.container instanceof HTMLElement
           ? this.container
-          : this.hostElement.nativeElement;
+          : this.#hostElement.nativeElement;
 
       if (typeof this.container === 'boolean') {
         container = undefined;
@@ -79,7 +80,7 @@ export class NgxLilGui implements OnInit, OnDestroy {
         injectStyles: this.injectStyles,
         width: this.width,
         title: this.title,
-        parent: this.self ? undefined : this.parentGUI?.gui || undefined,
+        parent: this.self ? undefined : this.#parentGUI?.gui || undefined,
       });
 
       this.#setupEvents();
@@ -128,7 +129,7 @@ export class NgxLilGui implements OnInit, OnDestroy {
 
   run<TReturn = void>(fn: () => TReturn): TReturn {
     if (this.zoneless) {
-      return this.ngZone.runOutsideAngular(() => {
+      return this.#ngZone.runOutsideAngular(() => {
         return fn();
       });
     }

packages/ngx-lil-gui/src/lib/ngx-lil-gui.module.ts

@@ -3,8 +3,11 @@ import { NgxLilGuiColor } from './ngx-lil-gui-color.component';
 import { NgxLilGuiController } from './ngx-lil-gui-controller.component';
 import { NgxLilGui } from './ngx-lil-gui.component';
 
+/**
+ * @description Using standalone components is recommended
+ */
 @NgModule({
-  declarations: [NgxLilGui, NgxLilGuiController, NgxLilGuiColor],
+  imports: [NgxLilGui, NgxLilGuiController, NgxLilGuiColor],
   exports: [NgxLilGui, NgxLilGuiController, NgxLilGuiColor],
 })
 export class NgxLilGuiModule {}

packages/ngx-lil-gui/version.json

@@ -0,0 +1,3 @@
+{
+  "version": "2.1.0"
+}