feat(helpers): add Html

jest.config.js

@@ -56,5 +56,6 @@ module.exports = {
     '<rootDir>/packages/postprocessing/taa-render-pass',
     '<rootDir>/packages/postprocessing/texture-pass',
     '<rootDir>/packages/helpers/core',
+    '<rootDir>/packages/helpers/web',
   ],
 };

packages/helpers/src/lib/contact-shadows/contact-shadows.component.ts

@@ -28,6 +28,7 @@ import { VerticalBlurShader } from 'three/examples/jsm/shaders/VerticalBlurShade
 
 @Component({
   selector: 'ngt-contact-shadows',
+  exportAs: 'ngtContactShadows',
   template: `
     <ngt-group
       o3d

packages/helpers/web/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "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"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

packages/helpers/web/README.md

@@ -0,0 +1,7 @@
+# helpers-web
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test helpers-web` to execute the unit tests.

packages/helpers/web/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  displayName: 'helpers-web',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: '../../../coverage/packages/helpers/web',
+  transform: {
+    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

packages/helpers/web/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/packages/helpers/web",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

packages/helpers/web/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@angular-three/helpers-web",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^12.0.4",
+    "@angular/core": "^12.0.4"
+  },
+  "dependencies": {
+    "tslib": "^2.1.0"
+  }
+}

packages/helpers/web/project.json

@@ -0,0 +1,42 @@
+{
+  "projectType": "library",
+  "root": "packages/helpers/web",
+  "sourceRoot": "packages/helpers/web/src",
+  "prefix": "angular-three",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/angular:package",
+      "outputs": ["dist/packages/helpers/web"],
+      "options": {
+        "project": "packages/helpers/web/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/helpers/web/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "packages/helpers/web/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/packages/helpers/web"],
+      "options": {
+        "jestConfig": "packages/helpers/web/jest.config.js",
+        "passWithNoTests": true
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": [
+          "packages/helpers/web/src/**/*.ts",
+          "packages/helpers/web/src/**/*.html"
+        ]
+      }
+    }
+  },
+  "tags": ["scope:helpers"]
+}

packages/helpers/web/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/html/html.component';
+export * from './lib/html/html.module';
+export * from './lib/html/html-element.directive';

packages/helpers/web/src/lib/html/html-element.directive.spec.ts

@@ -0,0 +1,8 @@
+import { HtmlElementDirective } from './html-element.directive';
+
+describe('HtmlElementDirective', () => {
+  it('should create an instance', () => {
+    const directive = new HtmlElementDirective();
+    expect(directive).toBeTruthy();
+  });
+});

packages/helpers/web/src/lib/html/html-element.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, ElementRef, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[ngtHtmlElement]',
+  exportAs: 'ngtHtmlElement',
+})
+export class HtmlElementDirective {
+  constructor(
+    public readonly viewContainerRef: ViewContainerRef,
+    public readonly elRef: ElementRef<HTMLElement>
+  ) {}
+}

packages/helpers/web/src/lib/html/html.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HtmlComponent } from './html.component';
+
+describe('HtmlComponent', () => {
+  let component: HtmlComponent;
+  let fixture: ComponentFixture<HtmlComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HtmlComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HtmlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});