feat: signals are ready

.release-it.json

@@ -40,7 +40,7 @@
         "releaseName": "Release ${version}"
     },
     "hooks": {
-        "before:bump": "npx nx package angular-three",
+        "before:bump": "pnpm exec nx package angular-three",
         "after:bump": ["git checkout -- package.json"]
     }
 }

apps/demo/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+    "extends": ["../../.eslintrc.json"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts"],
+            "rules": {
+                "@angular-eslint/directive-selector": [
+                    "error",
+                    {
+                        "type": "attribute",
+                        "prefix": "angularThree",
+                        "style": "camelCase"
+                    }
+                ],
+                "@angular-eslint/component-selector": [
+                    "error",
+                    {
+                        "type": "element",
+                        "prefix": "angular-three",
+                        "style": "kebab-case"
+                    }
+                ]
+            },
+            "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"]
+        },
+        {
+            "files": ["*.html"],
+            "extends": ["plugin:@nx/angular-template"],
+            "rules": {}
+        }
+    ]
+}

apps/demo/project.json

@@ -0,0 +1,75 @@
+{
+    "name": "demo",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "application",
+    "prefix": "angular-three",
+    "sourceRoot": "apps/demo/src",
+    "tags": [],
+    "targets": {
+        "build": {
+            "executor": "@angular-devkit/build-angular:browser",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/apps/demo",
+                "index": "apps/demo/src/index.html",
+                "main": "apps/demo/src/main.ts",
+                "polyfills": ["zone.js"],
+                "tsConfig": "apps/demo/tsconfig.app.json",
+                "assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"],
+                "styles": ["apps/demo/src/styles.css"],
+                "scripts": []
+            },
+            "configurations": {
+                "production": {
+                    "budgets": [
+                        {
+                            "type": "initial",
+                            "maximumWarning": "500kb",
+                            "maximumError": "1mb"
+                        },
+                        {
+                            "type": "anyComponentStyle",
+                            "maximumWarning": "2kb",
+                            "maximumError": "4kb"
+                        }
+                    ],
+                    "outputHashing": "all"
+                },
+                "development": {
+                    "buildOptimizer": false,
+                    "optimization": false,
+                    "vendorChunk": true,
+                    "extractLicenses": false,
+                    "sourceMap": true,
+                    "namedChunks": true
+                }
+            },
+            "defaultConfiguration": "production"
+        },
+        "serve": {
+            "executor": "@angular-devkit/build-angular:dev-server",
+            "configurations": {
+                "production": {
+                    "browserTarget": "demo:build:production"
+                },
+                "development": {
+                    "browserTarget": "demo:build:development"
+                }
+            },
+            "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+            "executor": "@angular-devkit/build-angular:extract-i18n",
+            "options": {
+                "browserTarget": "demo:build"
+            }
+        },
+        "lint": {
+            "executor": "@nx/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["apps/demo/**/*.ts", "apps/demo/**/*.html"]
+            }
+        }
+    }
+}

apps/demo/src/app/app.component.ts

@@ -0,0 +1,57 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { NgtCanvas, extend } from 'angular-three';
+import * as THREE from 'three';
+
+extend(THREE);
+
+@Component({
+    selector: 'app-cube',
+    standalone: true,
+    template: `
+        <ngt-mesh
+            (beforeRender)="onBeforeRender($any($event).object)"
+            (pointerover)="hover.set(true)"
+            (pointerout)="hover.set(false)"
+            (click)="active.set(!active())"
+            [scale]="active() ? 1.5 : 1"
+        >
+            <ngt-box-geometry />
+            <ngt-mesh-standard-material [color]="hover() ? 'hotpink' : 'orange'" />
+        </ngt-mesh>
+    `,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Cube {
+    hover = signal(false);
+    active = signal(false);
+
+    onBeforeRender(mesh: THREE.Mesh) {
+        mesh.rotation.x += 0.01;
+        mesh.rotation.y += 0.01;
+    }
+}
+
+@Component({
+    standalone: true,
+    template: `
+        <ngt-spot-light [position]="5" />
+        <ngt-point-light [position]="-5" />
+        <app-cube />
+    `,
+    imports: [Cube, NgTemplateOutlet],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Scene {}
+
+@Component({
+    standalone: true,
+    imports: [NgtCanvas],
+    selector: 'angular-three-root',
+    template: ` <ngt-canvas [sceneGraph]="scene" />`,
+})
+export class AppComponent {
+    readonly scene = Scene;
+}

apps/demo/src/app/app.config.ts

@@ -0,0 +1,5 @@
+import { ApplicationConfig } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+    providers: [],
+};

apps/demo/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>demo</title>
+        <base href="/" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    </head>
+    <body>
+        <angular-three-root />
+    </body>
+</html>

apps/demo/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

apps/demo/src/styles.css

@@ -0,0 +1,73 @@
+/* You can add global styles to this file, and also import other style files */
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+/*
+  2. Remove default margin
+*/
+* {
+    margin: 0;
+}
+/*
+  3. Allow percentage-based heights in the application
+*/
+html,
+body {
+    height: 100%;
+    width: 100%;
+}
+/*
+  Typographic tweaks!
+  4. Add accessible line-height
+  5. Improve text rendering
+*/
+body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
+        Segoe UI Emoji;
+}
+/*
+  6. Improve media defaults
+*/
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+/*
+  7. Remove built-in form typography styles
+*/
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+/*
+  8. Avoid text overflows
+*/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
+}
+/*
+  9. Create a root stacking context
+*/
+#root,
+#__next {
+    isolation: isolate;
+}

apps/demo/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "types": []
+    },
+    "files": ["src/main.ts"],
+    "include": ["src/**/*.d.ts"],
+    "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}

apps/demo/tsconfig.editor.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig.json",
+    "include": ["src/**/*.ts"],
+    "compilerOptions": {
+        "types": []
+    }
+}

apps/demo/tsconfig.json

@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+        "target": "es2022",
+        "useDefineForClassFields": false,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.app.json"
+        },
+        {
+            "path": "./tsconfig.editor.json"
+        }
+    ],
+    "extends": "../../tsconfig.base.json",
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    }
+}

libs/angular-three/ng-package.json

@@ -3,5 +3,7 @@
     "dest": "../../dist/libs/angular-three",
     "lib": {
         "entryFile": "src/index.ts"
-    }
+    },
+    "allowedNonPeerDependencies": ["ngx-resize", "@nx/devkit", "nx"],
+    "assets": ["metadata.json", "web-types.json"]
 }

libs/angular-three/package.json

@@ -1,12 +1,38 @@
 {
     "name": "angular-three",
-    "version": "0.0.1",
+    "version": "0.0.0-replace",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/angular-threejs/angular-three/tree/main/libs/angular-three"
+    },
+    "author": {
+        "name": "Chau Tran",
+        "email": "nartc7789@gmail.com",
+        "url": "https://nartc.me"
+    },
+    "description": "Angular Renderer for THREE.js",
+    "keywords": [
+        "angular",
+        "threejs",
+        "renderer"
+    ],
+    "license": "MIT",
     "peerDependencies": {
         "@angular/common": "^16.0.0",
-        "@angular/core": "^16.0.0"
+        "@angular/core": "^16.0.0",
+        "three": "^0.148.0 || ^0.149.0 || ^0.150.0 || ^0.151.0 || ^0.152.0"
     },
     "dependencies": {
-        "tslib": "^2.3.0"
+        "ngx-resize": "^2.0.0",
+        "tslib": "^2.3.0",
+        "@nx/devkit": "^16.0.0",
+        "nx": "^16.0.0"
     },
-    "sideEffects": false
+    "sideEffects": false,
+    "generators": "./plugin/generators.json",
+    "schematics": "./plugin/generators.json",
+    "web-types": "./web-types.json"
 }

libs/angular-three/project.json

@@ -22,6 +22,21 @@
             },
             "defaultConfiguration": "production"
         },
+        "package": {
+            "executor": "nx:run-commands",
+            "options": {
+                "commands": [
+                    "node ./tools/scripts/generate-json.mjs",
+                    "pnpm exec nx build angular-three",
+                    "pnpm exec nx build angular-three-plugin"
+                ],
+                "parallel": false
+            }
+        },
+        "publish": {
+            "command": "npm publish",
+            "cwd": "dist/libs/angular-three"
+        },
         "test": {
             "executor": "@nx/jest:jest",
             "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],