From c480cf9a02a291a91a9b7b89f3a8eafc7fced300 Mon Sep 17 00:00:00 2001 From: tomastrajan Date: Fri, 12 Jul 2024 10:18:05 +0200 Subject: [PATCH] feat(demo): standardize / simplify example impl --- .prettierrc | 3 +- .../examples/advanced/advanced.component.html | 230 +++++++------- .../examples/advanced/advanced.component.scss | 23 -- .../examples/advanced/advanced.component.ts | 11 +- .../examples/basic/basic.component.html | 287 +++++++++--------- .../examples/basic/basic.component.scss | 26 -- .../examples/basic/basic.component.ts | 18 +- .../examples/dynamic/dynamic.component.html | 203 +++++++------ .../examples/dynamic/dynamic.component.scss | 28 -- .../examples/dynamic/dynamic.component.ts | 7 +- .../app/shared/example/example.component.ts | 46 +++ .../app/shared/spinner/spinner.component.html | 1 - .../app/shared/spinner/spinner.component.scss | 0 .../app/shared/spinner/spinner.component.ts | 7 +- .../lazy-element.directive.spec.ts | 4 +- 15 files changed, 434 insertions(+), 460 deletions(-) create mode 100644 projects/elements-demo/src/app/shared/example/example.component.ts delete mode 100644 projects/elements-demo/src/app/shared/spinner/spinner.component.html delete mode 100644 projects/elements-demo/src/app/shared/spinner/spinner.component.scss diff --git a/.prettierrc b/.prettierrc index 2ddc9656..56e879ee 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { "singleQuote": true, - "printWidth": 80 + "printWidth": 80, + "htmlWhitespaceSensitivity": "ignore" } diff --git a/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html b/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html index 9d3783ed..3a0447a7 100644 --- a/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html +++ b/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html @@ -2,27 +2,28 @@

Quick navigation

@@ -17,99 +17,97 @@

Basic

Basic usage

-
- -
-
- - favorite - -
+ + + + favorite + + + +

The most simple example, all we need is to use element tag, for example - <mwc-icon> and add - *axLazyElement directive with the url pointing to the - element implementation. + <mwc-icon> + and add + *axLazyElement + directive with the url pointing to the element implementation. 


     

   

 
   

-    Use loading <ng-template #loading>
+    Use loading
+    <ng-template #loading>
   

   

-    

-      
-    

-    

-      Loading...
-      
-        Increment
-      
-      
Counter: {{ counter }}

-    

+    
+      
+        
+        
+          Increment
+        
+        
Counter: {{ counter }}

+      
+    
     

       

         In this example we're loading
-        <mwc-button> using the
-        *axLazyElement directive but we're also adding
-        <ng-template #loading>Loading...<ng-template> which
-        will be displayed before the element was loaded (depending on your
+        <mwc-button>
+        using the
+        *axLazyElement
+        directive but we're also adding
+        <ng-template #loading>Loading...<ng-template>
+        which will be displayed before the element was loaded (depending on your
         connection speed)
       

       

     

   

 
-  
Use error <ng-template #error>

+  

+    Use error
+    <ng-template #error>
+  

   

-    

-      
-    

-    

-      Loading...
-      Loading failed...
-      
-        Submit
-      
-    

+    
+      
+        Loading...
+        Loading failed...
+        
+          Submit
+        
+      
+    
     

       

         In this example we're loading
-        <mwc-button> using the
-        *axLazyElement directive but we're also adding
+        <mwc-button>
+        using the
+        *axLazyElement
+        directive but we're also adding
         <ng-template #error>Loading failed...<ng-template>
         which will be displayed because the loading request will fail (wrong
         url)
@@ -122,62 +120,62 @@ 

     Advanced binding (objects instead of primitives)
   

   

-    

-      
-    

-    

-      

-        Adjust the xAxis array values
-          {{ xAxis | json }}
+      
+        

+          
+            Adjust the
+            xAxis
+            array values
+            
+              {{ xAxis | json }}
+            
+          
+          
+            
+          
+        

+        Loading...
+        Loading failed...
+        
-        
-          
-        
-      

-      Loading...
-      Loading failed...
-      
-        
-      
-    

+          
+        
+      
+    
+
     

       

         In this example we're loading
-        Ink chart element!
-        Ink comes with all elements in single bundle so we can use multiple Ink
-        elements while using *axLazyElement directive only on the
-        outmost element. Besides that in our Angular component we have defined
-        xAxix array with the [-6.28, 6.28] values
-        which are passed in the element using standard Angular property binding
-        [xlim]="xAxis".
+        Ink
+        chart element! Ink comes with all elements in single bundle so we can
+        use multiple Ink elements while using
+        *axLazyElement
+        directive only on the outmost element. Besides that in our Angular
+        component we have defined
+        xAxix
+        array with the
+        [-6.28, 6.28]
+        values which are passed in the element using standard Angular property
+        binding
+        [xlim]="xAxis"
+        .
       

       

     

@@ -185,34 +183,35 @@ 

 
   
Using import maps (SystemJS is required)

   

-    

-      
-    

-    

-      
-    

+    
+      
+        
+      
+    
     

       

         In this example we are using axLazyElement with Import Maps to load
-        <mwc-switch>. Any key can be used in the URL that is
-        mapped to a import map. For this feature to work properly a peer
-        dependency of having
-        SystemJS
+        <mwc-switch>
+        . Any key can be used in the URL that is mapped to a import map. For
+        this feature to work properly a peer dependency of having
+        
+          SystemJS
+        
         globally loaded needs to be satisfied. For instance your index.html may
         have the following code:
       

       

       

-        So when adding <mwc-switch> with
-        *axLazyElement  with the importMap flag set to
+        So when adding
+        <mwc-switch>
+        with
+        *axLazyElement
+        with the
+        importMap
+        flag set to
         true
         the directive will look for the key stored in the import map and load
         the correct script.
diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.scss b/projects/elements-demo/src/app/features/examples/basic/basic.component.scss
index 840a7c05..68916aa1 100644
--- a/projects/elements-demo/src/app/features/examples/basic/basic.component.scss
+++ b/projects/elements-demo/src/app/features/examples/basic/basic.component.scss
@@ -38,32 +38,6 @@
     flex-direction: column;
     margin: 0 0 50px 0;
 
-    .implementation {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      flex: 1;
-      margin: 0 20px 20px 0;
-      border: 2px solid #eee;
-      padding: 20px;
-
-      p {
-        margin: 10px 0 0 0;
-      }
-
-      .controls {
-        display: flex;
-        align-items: center;
-
-        .values {
-          display: inline-block;
-          width: 100px;
-          text-align: center;
-        }
-      }
-    }
-
     .description {
       flex: 1.5;
     }
diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.ts b/projects/elements-demo/src/app/features/examples/basic/basic.component.ts
index 756e63ce..3349e97d 100644
--- a/projects/elements-demo/src/app/features/examples/basic/basic.component.ts
+++ b/projects/elements-demo/src/app/features/examples/basic/basic.component.ts
@@ -1,4 +1,4 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { JsonPipe, NgIf } from '@angular/common';
 import { MatSliderModule } from '@angular/material/slider';
@@ -9,6 +9,9 @@ import { HighlightModule } from 'ngx-highlightjs';
 
 import { LazyElementDirective } from '@angular-extensions/elements';
 
+import { ExampleComponent } from '../../../shared/example/example.component';
+import { SpinnerComponent } from '../../../shared/spinner/spinner.component';
+
 @Component({
   selector: 'demo-basic',
   standalone: true,
@@ -25,16 +28,11 @@ import { LazyElementDirective } from '@angular-extensions/elements';
     MatFormFieldModule,
     HighlightModule,
     LazyElementDirective,
+    ExampleComponent,
+    SpinnerComponent,
   ],
 })
-export class BasicComponent implements OnInit {
-  // example toggles
-  example1 = false;
-  example2 = false;
-  example3 = false;
-  example4 = false;
-  example5 = false;
-
+export class BasicComponent {
   // example code examples
   codeExample1 = CODE_EXAMPLE_1;
   codeExample2 = CODE_EXAMPLE_2;
@@ -48,8 +46,6 @@ export class BasicComponent implements OnInit {
   xAxis = [-6.28, 6.28];
   yAxis = [-1, 1];
 
-  ngOnInit() {}
-
   increment() {
     this.counter++;
   }
diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html
index 8ee4e319..a85dd590 100644
--- a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html
+++ b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html
@@ -5,14 +5,14 @@ 
Quick navigation

       Dynamic element tag
     
     
  • 
-      Dynamic element tag with module pre-configuration
+      
+        Dynamic element tag with module pre-configuration
+      
     
    • 
     
  • 
-      Multiple different dynamic elements
+      
+        Multiple different dynamic elements
+      
     
    • 
   
 
    
@@ -22,60 +22,65 @@ 
    Dynamic
    
 
   
    
     These example explain how to configure element tag dynamically using
-    *axLazyElementDynamic directive. This can be very useful if we
-    want to retrieve element configuration from somewhere else (for example a
-    backend or a json config file). Such a setup can enable us to develop fully
-    dynamic and configurable microfrontend applications!
+    *axLazyElementDynamic
+    directive. This can be very useful if we want to retrieve element
+    configuration from somewhere else (for example a backend or a json config
+    file). Such a setup can enable us to develop fully dynamic and configurable
+    microfrontend applications!
   
    
 
   
    Dynamic element tag
    
   
    
-    
    
-      
-    
    
-    
    
-      Loading...
-      
-        Increment
-      
-      
    Counter: {{ counter1 }}
    
-      
    
-        Raised button
-        
-        Outline button
-      
    
-    
    
+    
+      
+        Loading...
+        
+          Increment
+        
+        
    Counter: {{ counter1 }}
    
+        
    
+          Raised button
+          
+          Outline button
+        
    
+          
+        
     
    
       
    
         In this example we're loading
-        <mwc-button> using the
-        *axLazyElementDynamic directive. Please notice that the
-        original HTML element used in the template is
-        <ax-lazy-element> and we're specifying the desired tag
-        as the first parameter of
-        *axLazyElementDynamic='mwc-button'. Please, feel free to
-        open your browsers dev tools to check resulting element tag!
+        <mwc-button>
+        using the
+        *axLazyElementDynamic
+        directive. Please notice that the original HTML element used in the
+        template is
+        <ax-lazy-element>
+        and we're specifying the desired tag as the first parameter of
+        *axLazyElementDynamic='mwc-button'
+        . Please, feel free to open your browsers dev tools to check resulting
+        element tag!
       
    
       
    
       
    
-        You might be asking why do we use <ax-lazy-element>.
-        This is not a real custom element and that's exactly the point. We can
+        You might be asking why do we use
+        <ax-lazy-element>
+        . This is not a real custom element and that's exactly the point. We can
         provide any valid and unused custom element name. That way Angular won't
         complain if we use custom property and event binding which would be the
-        case if we tried to bind <div [custom]="value">...
+        case if we tried to bind
+        <div [custom]="value">
+        ...
       
    
     
    
   
    
@@ -84,31 +89,31 @@ 
    
     Dynamic element tag with module pre-configuration
   
    
   
    
-    
    
-      
-    
    
-    
    
-      Loading...
-      
-        Increment
-      
-      
    Counter: {{ counter2 }}
    
-    
    
+    
+      
+        Loading...
+        
+          Increment
+        
+        
    Counter: {{ counter2 }}
    
+          
+        
     
    
       
    
-        The *axLazyElementDynamic directive works also with the
-        pre-configured LazyElementsModule. That way we don't have
-        to specify url of the element in the template. Please notice that the
-        original HTML element used in the template is <div> and
-        we're specifying the desired tag as the first parameter of
-        *axLazyElementDynamic='wired-button'. Please, feel free to
-        open your browsers dev tools to check resulting element tag!
+        The
+        *axLazyElementDynamic
+        directive works also with the pre-configured
+        LazyElementsModule
+        . That way we don't have to specify url of the element in the template.
+        Please notice that the original HTML element used in the template is
+        <div>
+        and we're specifying the desired tag as the first parameter of
+        *axLazyElementDynamic='wired-button'
+        . Please, feel free to open your browsers dev tools to check resulting
+        element tag!
       
    
       
         Multiple different dynamic elements
   
   
    
-    
    
-      
-    
    
-    
    
-      
    
-        
-          Loading <{{ c.tag }}>...  
-          
-            {{ c.content }}
-          
-        
-      
    
-      
    Counter: {{ counter3 }}
    
-    
    
+    
+      
+        
    
+          
+            
+              Loading <{{ c.tag }}>...  
+            
+            
+              {{ c.content }}
+            
+          
+        
    
+        
    Counter: {{ counter3 }}
    
+          
+        
     
    
       
    
-        The *axLazyElementDynamic directive works also with
+        The
+        *axLazyElementDynamic
+        directive works also with
         *ngFor
         directive to render fully dynamic configuration which could have been
         retrieved from backend during the runtime in comparison to hard-coded
diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.scss b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.scss
index cd0ee5c8..d841cc6a 100644
--- a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.scss
+++ b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.scss
@@ -38,34 +38,6 @@
     flex-direction: column;
     margin: 0 0 50px 0;
 
-    .implementation {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      flex: 1;
-      margin: 0 20px 20px 0;
-      border: 2px solid #eee;
-      padding: 20px;
-
-      p {
-        margin: 10px 0 0 0;
-      }
-
-      wired-button {
-        padding: 10px 15px;
-      }
-
-      .actions {
-        display: flex;
-        align-items: center;
-
-        > * {
-          margin: 10px;
-        }
-      }
-    }
-
     .description {
       flex: 1.5;
     }
diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts
index b2546393..d1f11a09 100644
--- a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts
+++ b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts
@@ -7,6 +7,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { HighlightModule } from 'ngx-highlightjs';
 import { LazyElementDynamicDirective } from '@angular-extensions/elements';
+import { ExampleComponent } from '../../../shared/example/example.component';
 
 @Component({
   selector: 'demo-dynamic',
@@ -23,15 +24,11 @@ import { LazyElementDynamicDirective } from '@angular-extensions/elements';
     FormsModule,
     LazyElementDynamicDirective,
     HighlightModule,
+    ExampleComponent,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class DynamicComponent implements OnInit {
-  // example toggles
-  example1 = false;
-  example2 = false;
-  example3 = false;
-
   // example code examples
   codeExample1 = CODE_EXAMPLE_1;
   codeExample2module = CODE_EXAMPLE_2_MODULE;
diff --git a/projects/elements-demo/src/app/shared/example/example.component.ts b/projects/elements-demo/src/app/shared/example/example.component.ts
new file mode 100644
index 00000000..8e443b1f
--- /dev/null
+++ b/projects/elements-demo/src/app/shared/example/example.component.ts
@@ -0,0 +1,46 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChild,
+  signal,
+  TemplateRef,
+} from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatButton } from '@angular/material/button';
+import { NgTemplateOutlet } from '@angular/common';
+
+@Component({
+  selector: 'demo-example',
+  standalone: true,
+  imports: [MatButton, MatIcon, NgTemplateOutlet],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    
+    @if (!showExample()) {
+      
+    } @else {
+      
+    }
+  `,
+  styles: `
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      margin: 0 20px 20px 0;
+      border: 2px solid #eee;
+      padding: 20px;
+      border-radius: 10px;
+    }
+  `,
+})
+export class ExampleComponent {
+  showExample = signal(false);
+
+  example = contentChild(TemplateRef);
+}
diff --git a/projects/elements-demo/src/app/shared/spinner/spinner.component.html b/projects/elements-demo/src/app/shared/spinner/spinner.component.html
deleted file mode 100644
index ec2efcec..00000000
--- a/projects/elements-demo/src/app/shared/spinner/spinner.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
    Loading (spinner)...
    
diff --git a/projects/elements-demo/src/app/shared/spinner/spinner.component.scss b/projects/elements-demo/src/app/shared/spinner/spinner.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/projects/elements-demo/src/app/shared/spinner/spinner.component.ts b/projects/elements-demo/src/app/shared/spinner/spinner.component.ts
index f5251ee9..9a8dcafb 100644
--- a/projects/elements-demo/src/app/shared/spinner/spinner.component.ts
+++ b/projects/elements-demo/src/app/shared/spinner/spinner.component.ts
@@ -1,10 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
 
 @Component({
   selector: 'demo-spinner',
-  templateUrl: './spinner.component.html',
-  styleUrls: ['./spinner.component.scss'],
   standalone: true,
+  imports: [MatProgressSpinner],
+  template: `
+    
+  `,
 })
 export class SpinnerComponent implements OnInit {
   ngOnInit() {}
diff --git a/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.spec.ts b/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.spec.ts
index 9c5e2851..0afd91ce 100644
--- a/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.spec.ts
+++ b/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.spec.ts
@@ -8,7 +8,9 @@ import { LazyElementDirective } from './lazy-element.directive';
 
 @Component({
   standalone: true,
-  template: ` 
    Spinner...
     `,
+  template: `
+    
    Spinner...
    
+  `,
 })
 class SpinnerTestComponent {}