Skip to content

Commit

Permalink
feat(lib): add provideAxLazyElements() & provideAxLazyElementsConfigs…
Browse files Browse the repository at this point in the history
…() (use without NgModules)

- library can now be used without NgModules
  • Loading branch information
tomastrajan committed Jul 11, 2024
1 parent 80246ba commit 7822155
Show file tree
Hide file tree
Showing 18 changed files with 285 additions and 90 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const FAQ = [
question:
'When do we need to use <code>*axLazyElement="module: true"</code> flag?',
answer:
'Some web components libraries might be distributed using ES modules, for example if we look at <a href="https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module" target="_blank">@material/mwc-button</a> we will see that it imports additional things like <code>@material/mwc-base</code> using import statement in its implementation. This means it will need to download multiple files compared to a single bundle when using Angular elements. To make this work, library has to generate <code>\t&#60;script type="module"></code> instead of just plain <code>\t&#60;script></code> tag.',
'Some web components libraries might be distributed using ES modules, for example if we look at <a href="https://unpkg.com/@material/mwc-button@0.27.0/mwc-button.js?module" target="_blank">@material/mwc-button</a> we will see that it imports additional things like <code>@material/mwc-base</code> using import statement in its implementation. This means it will need to download multiple files compared to a single bundle when using Angular elements. To make this work, library has to generate <code>\t&#60;script type="module"></code> instead of just plain <code>\t&#60;script></code> tag.',
},
{
question: 'Angular elements / web components / custom elements / what?',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import {
import { NgIf } from '@angular/common';
import { RouterLink } from '@angular/router';
import {
LazyElementDirective,
LazyElementsLoaderService,
LazyElementsModule,
} from '@angular-extensions/elements';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
Expand All @@ -25,7 +25,7 @@ import { HighlightModule } from 'ngx-highlightjs';
MatIconModule,
MatButtonModule,
HighlightModule,
LazyElementsModule,
LazyElementDirective,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
Expand Down Expand Up @@ -110,7 +110,7 @@ const options: LazyElementModuleOptions = {
elementConfigs: [
{
tag: 'mwc-checkbox',
url: 'https://unpkg.com/@material/mwc-checkbox@0.18.0/mwc-checkbox.js?module'
url: 'https://unpkg.com/@material/mwc-checkbox@0.27.0/mwc-checkbox.js?module'
}
]
};
Expand All @@ -133,7 +133,7 @@ const options: LazyElementModuleOptions = {
elementConfigs: [
{
tag: 'mwc-switch',
url: 'https://unpkg.com/@material/mwc-switch@0.18.0/mwc-switch.js?module',
url: 'https://unpkg.com/@material/mwc-switch@0.27.0/mwc-switch.js?module',
isModule: true
}
]
Expand Down Expand Up @@ -165,7 +165,7 @@ const options: LazyElementModuleRootOptions = {
elementConfigs: [
{
tag: 'mwc-switch',
url: 'https://unpkg.com/@material/mwc-switch@0.18.0/mwc-switch.js?module'
url: 'https://unpkg.com/@material/mwc-switch@0.27.0/mwc-switch.js?module'
}
]
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { importProvidersFrom } from '@angular/core';
import { Routes } from '@angular/router';
import {
ElementConfig,
LAZY_ELEMENT_CONFIGS,
LazyElementModuleOptions,
LazyElementsModule,
provideAxLazyElementsConfigs,
} from '@angular-extensions/elements';

import { AdvancedComponent } from './advanced.component';
Expand All @@ -29,48 +27,46 @@ export function elementConfigsFactory(): ElementConfig[] {
];
}

const options: LazyElementModuleOptions = {
elementConfigs: [
{
tag: 'wired-button',
url: 'https://unpkg.com/[email protected]/dist/wired-elements.bundled.js',
loadingComponent: SpinnerComponent,
errorComponent: ErrorComponent,
preload: true,
},
{
tag: 'mwc-switch',
url: 'https://unpkg.com/@material/[email protected]/mwc-switch.js?module',
isModule: true,
},
{
tag: 'mwc-checkbox',
url: 'https://unpkg.com/@material/[email protected]/mwc-checkbox.js?module',
isModule: true,
},
{
tag: 'mwc-fab',
url: 'https://unpkg.com/@material/[email protected]/mwc-fab.js?module',
isModule: true,
loadingComponent: SpinnerComponent,
},
{
tag: 'mwc-slider',
url: 'https://unpkg.com/@material/[email protected]/mwc-slider.js?module',
isModule: true,
hooks: {
beforeLoad: beforeLoadHook,
},
const configs: ElementConfig[] = [
{
tag: 'wired-button',
url: 'https://unpkg.com/[email protected]/dist/wired-elements.bundled.js',
loadingComponent: SpinnerComponent,
errorComponent: ErrorComponent,
preload: true,
},
{
tag: 'mwc-switch',
url: 'https://unpkg.com/@material/[email protected]/mwc-switch.js?module',
isModule: true,
},
{
tag: 'mwc-checkbox',
url: 'https://unpkg.com/@material/[email protected]/mwc-checkbox.js?module',
isModule: true,
},
{
tag: 'mwc-fab',
url: 'https://unpkg.com/@material/[email protected]/mwc-fab.js?module',
isModule: true,
loadingComponent: SpinnerComponent,
},
{
tag: 'mwc-slider',
url: 'https://unpkg.com/@material/[email protected]/mwc-slider.js?module',
isModule: true,
hooks: {
beforeLoad: beforeLoadHook,
},
],
};
},
];

export default <Routes>[
{
path: '',
component: AdvancedComponent,
providers: [
importProvidersFrom(LazyElementsModule.forFeature(options)),
provideAxLazyElementsConfigs(configs),
{
provide: LAZY_ELEMENT_CONFIGS,
useFactory: elementConfigsFactory,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ <h2 id="basic-usage">Basic usage</h2>
<div class="implementation" *ngIf="example1">
<mwc-icon
*axLazyElement="
'https://unpkg.com/&#64;material/mwc-icon&#64;0.18.0/mwc-icon.js?module';
'https://unpkg.com/&#64;material/mwc-icon&#64;0.27.0/mwc-icon.js?module';
module: true
"
>
Expand Down Expand Up @@ -58,7 +58,7 @@ <h2 id="loading-template">
<ng-template #loading>Loading...</ng-template>
<mwc-button
*axLazyElement="
'https://unpkg.com/&#64;material/mwc-button&#64;0.18.0/mwc-button.js?module';
'https://unpkg.com/&#64;material/mwc-button&#64;0.27.0/mwc-button.js?module';
loadingTemplate: loading;
module: true
"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ import { MatSliderModule } from '@angular/material/slider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { LazyElementsModule } from '@angular-extensions/elements';
import { HighlightModule } from 'ngx-highlightjs';

import { LazyElementDirective } from '@angular-extensions/elements';

@Component({
selector: 'demo-basic',
standalone: true,
Expand All @@ -23,7 +24,7 @@ import { HighlightModule } from 'ngx-highlightjs';
MatSliderModule,
MatFormFieldModule,
HighlightModule,
LazyElementsModule,
LazyElementDirective,
],
})
export class BasicComponent implements OnInit {
Expand Down Expand Up @@ -58,12 +59,12 @@ export class BasicComponent implements OnInit {
}
}

const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-icon@0.18.0/mwc-icon.js?module'; -->
const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-icon@0.27.0/mwc-icon.js?module'; -->
<mwc-icon *axLazyElement="url; module: true">
favorite
</mwc-icon>`;

const CODE_EXAMPLE_2 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module' -->;
const CODE_EXAMPLE_2 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.27.0/mwc-button.js?module' -->;
<ng-template #loading>Loading...</ng-template>
<mwc-button *axLazyElement="url; loadingTemplate: loading; module: true"
(click)="increment()">
Expand All @@ -82,15 +83,15 @@ const CODE_EXAMPLE_4 = `<!-- https://unpkg.com/ink-components' -->;
<ink-chart-eqn eqn="Math.sin(x)"></ink-chart-eqn>
</ink-chart>`;

const CODE_EXAMPLE_5 = `<!-- url = 'https://unpkg.com/@material/mwc-switch@0.18.0//mwc-switch.js?module'; -->
const CODE_EXAMPLE_5 = `<!-- url = 'https://unpkg.com/@material/mwc-switch@0.27.0//mwc-switch.js?module'; -->
<mwc-switch checked *axLazyElement="'mwc-switch'; module: true; importMap: true"></mwc-switch>`;

const CODE_EXAMPLE_5_IMPORT_MAP = `
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.6.1/system.min.js"></script>
<script type="systemjs-importmap">
{
"imports": {
"mwc-switch": "https://unpkg.com/@material/mwc-switch@0.18.0/mwc-switch.js?module"
"mwc-switch": "https://unpkg.com/@material/mwc-switch@0.27.0/mwc-switch.js?module"
}
}
</script>`;
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ <h2 id="dynamic-element-tag">Dynamic element tag</h2>
<ax-lazy-element
*axLazyElementDynamic="
'mwc-button';
url: 'https://unpkg.com/&#64;material/mwc-button&#64;0.18.0/mwc-button.js?module';
url: 'https://unpkg.com/&#64;material/mwc-button&#64;0.27.0/mwc-button.js?module';
loadingTemplate: loading;
module: true
"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import { FormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { LazyElementsModule } from '@angular-extensions/elements';
import { HighlightModule } from 'ngx-highlightjs';
import { LazyElementDynamicDirective } from '@angular-extensions/elements';

@Component({
selector: 'demo-dynamic',
Expand All @@ -21,7 +21,7 @@ import { HighlightModule } from 'ngx-highlightjs';
MatButtonModule,
MatSlideToggleModule,
FormsModule,
LazyElementsModule,
LazyElementDynamicDirective,
HighlightModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
Expand All @@ -47,7 +47,7 @@ export class DynamicComponent implements OnInit {
dynamicConfigs = [
{
tag: 'mwc-button',
url: 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module',
url: 'https://unpkg.com/@material/mwc-button@0.27.0/mwc-button.js?module',
isModule: true,
content: 'Increment',
actionName: 'increment',
Expand All @@ -60,7 +60,7 @@ export class DynamicComponent implements OnInit {
},
{
tag: 'mwc-icon',
url: 'https://unpkg.com/@material/mwc-icon@0.18.0/mwc-icon.js?module',
url: 'https://unpkg.com/@material/mwc-icon@0.27.0/mwc-icon.js?module',
content: 'replay',
actionName: 'reset',
},
Expand Down Expand Up @@ -91,7 +91,7 @@ export class DynamicComponent implements OnInit {
}
}

export const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module' -->;
export const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.27.0/mwc-button.js?module' -->;
<ax-lazy-element *axLazyElementDynamic="'mwc-button', url: url; module: true"
[outlined]="true"
(click)="increment()">
Expand Down Expand Up @@ -140,7 +140,7 @@ export const CODE_EXAMPLE_3_HTML = `<ng-container *ngFor="let c of dynamicConfig
dynamicConfigs = [
{
tag: 'mwc-button',
url: 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module',
url: 'https://unpkg.com/@material/mwc-button@0.27.0/mwc-button.js?module',
isModule: true,
content: 'Increment',
actionName: 'increment'
Expand All @@ -153,7 +153,7 @@ dynamicConfigs = [
},
{
tag: 'mwc-icon',
url: 'https://unpkg.com/@material/mwc-icon@0.18.0/mwc-icon.js?module',
url: 'https://unpkg.com/@material/mwc-icon@0.27.0/mwc-icon.js?module',
content: 'replay',
actionName: 'reset'
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
import { importProvidersFrom } from '@angular/core';
import { Routes } from '@angular/router';
import {
LazyElementModuleOptions,
LazyElementsModule,
ElementConfig,
provideAxLazyElementsConfigs,
} from '@angular-extensions/elements';

import { DynamicComponent } from './dynamic.component';

const options: LazyElementModuleOptions = {
elementConfigs: [
{
tag: 'wired-button',
url: 'https://unpkg.com/[email protected]/dist/wired-elements.bundled.js',
},
],
};
const configs: ElementConfig[] = [
{
tag: 'wired-button',
url: 'https://unpkg.com/[email protected]/dist/wired-elements.bundled.js',
},
];

export default <Routes>[
{
providers: [provideAxLazyElementsConfigs(configs)],
path: '',
component: DynamicComponent,
providers: [importProvidersFrom(LazyElementsModule.forFeature(options))],
children: [
{
path: '',
component: DynamicComponent,
},
],
},
];
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import { LazyElementsModule } from '@angular-extensions/elements';
import { LazyElementDirective } from '@angular-extensions/elements';
import { HighlightModule } from 'ngx-highlightjs';

@Component({
selector: 'demo-testing',
templateUrl: './testing.component.html',
styleUrls: ['./testing.component.scss'],
standalone: true,
imports: [RouterLink, LazyElementsModule, HighlightModule],
imports: [RouterLink, LazyElementDirective, HighlightModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class TestingComponent implements OnInit {
Expand Down
10 changes: 5 additions & 5 deletions projects/elements-demo/src/app/features/home/home.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -57,20 +57,20 @@ <h2>Quickstart</h2>
<li>
Add
<code>
import &#123; LazyElementsModule &#125; from
import &#123; LazyElementDirective &#125; from
'&#64;angular-extensions/elements';
</code>
</li>
<li>
Append <code>LazyElementsModule</code> to the <code>imports: []</code> of
Append <code>LazyElementDirective</code> to the <code>imports: []</code> of
your
<code>AppModule</code>
<code>MyOrgComponent</code>
</li>
<li>
Add new <code>schemas: []</code> property with
<code>CUSTOM_ELEMENTS_SCHEMA</code> value to
<code>&#64;NgModule</code> decorator of your
<code>AppModule</code>
<code>&#64;Component</code> decorator of your
<code>MyOrgComponent</code>
</li>
<li>
Use <code>*axLazyElement</code> directive on an element you wish to load and
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,10 @@ export class HomeComponent implements OnInit {
}

const CODE_EXAMPLE_COMPONENT = `@Component({
standalone: true,
selector: 'your-org-feature',
imports: [LazyElementDirective]
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: \`
<!-- will be lazy loaded and uses standard Angular template bindings -->
<some-element
Expand All @@ -50,7 +53,7 @@ const CODE_EXAMPLE_COMPONENT = `@Component({
</some-element>
\`
})
export class FeatureComponent {
export class MyOrgComponent {
elementUrl = 'https://your-org.com/elements/some-element.js';
data: SomeData;
Expand Down
Loading

0 comments on commit 7822155

Please sign in to comment.