-
Notifications
You must be signed in to change notification settings - Fork 279
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Angular] XM Cloud Forms support (#1951)
* [Angular] XM Cloud Forms support * Update * Added test utils * Update Migration guide * Updated tsdoc * Don't render errors, orange box when in non editing mode
- Loading branch information
1 parent
1adfe83
commit a0d83f1
Showing
23 changed files
with
1,096 additions
and
191 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
...-jss/src/templates/angular-xmcloud/scripts/generate-component-factory/plugins/packages.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { ComponentFactoryPlugin, ComponentFactoryPluginConfig } from '..'; | ||
|
||
/** | ||
* Provides custom packages configuration | ||
*/ | ||
class PackagesPlugin implements ComponentFactoryPlugin { | ||
order = 0; | ||
|
||
exec(config: ComponentFactoryPluginConfig) { | ||
/** | ||
* You can specify components which you want to import from external/internal packages | ||
* in format: | ||
* { | ||
* name: 'package name', | ||
* components: [ | ||
* { | ||
* componentName: 'component name', // component rendering name, | ||
* moduleName: 'module name' // component name to import from the package | ||
* } | ||
* ] | ||
* } | ||
*/ | ||
config.packages = [ | ||
{ | ||
name: '@sitecore-jss/sitecore-jss-angular', | ||
components: [{ componentName: 'Form', moduleName: 'FormComponent' }], | ||
}, | ||
]; | ||
|
||
return config; | ||
} | ||
} | ||
|
||
export const packagesPlugin = new PackagesPlugin(); |
57 changes: 57 additions & 0 deletions
57
...sitecore-jss/src/templates/angular-xmcloud/scripts/generate-component-factory/template.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
export const componentFactoryTemplate = ({ | ||
imports, | ||
components, | ||
registrations, | ||
lazyRegistrations, | ||
declarations, | ||
}: { | ||
imports: string[]; | ||
components: string[]; | ||
registrations: string[]; | ||
lazyRegistrations: string[]; | ||
declarations: string[]; | ||
}) => `// Do not edit this file, it is auto-generated at build time! | ||
// See scripts/generate-component-factory/index.ts to modify the generation of this file. | ||
// Use app-components.shared.module.ts to modify the imports, etc of this module. | ||
// Note: code-generation is optional! See ./.gitignore for directions to remove it, | ||
// if you do not want it. | ||
import { NgModule } from '@angular/core'; | ||
import { EDGE_CONFIG, JssModule } from '@sitecore-jss/sitecore-jss-angular'; | ||
import { AppComponentsSharedModule } from './app-components.shared.module'; | ||
import { environment } from '../../environments/environment'; | ||
${imports.join('\n')} | ||
export const components = [ | ||
${components.map((c) => `'${c}'`).join(',\n ')} | ||
]; | ||
@NgModule({ | ||
imports: [ | ||
AppComponentsSharedModule, | ||
JssModule.withComponents([ | ||
${registrations.join('\n ')} | ||
], [ | ||
${lazyRegistrations.join('\n ')} | ||
]), | ||
], | ||
providers: [ | ||
{ | ||
// This configuration is used to be able to integrate sitecore-jss-angular SDK with Sitecore Edge | ||
provide: EDGE_CONFIG, | ||
useValue: { | ||
sitecoreEdgeUrl: environment.sitecoreEdgeUrl, | ||
sitecoreEdgeContextId: environment.sitecoreEdgeContextId, | ||
}, | ||
}, | ||
], | ||
exports: [ | ||
JssModule, | ||
AppComponentsSharedModule, | ||
], | ||
declarations: [ | ||
${declarations.join('\n ')} | ||
], | ||
}) | ||
export class AppComponentsModule { } | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
174 changes: 0 additions & 174 deletions
174
packages/create-sitecore-jss/src/templates/angular/scripts/generate-component-factory.ts
This file was deleted.
Oops, something went wrong.
45 changes: 45 additions & 0 deletions
45
...ges/create-sitecore-jss/src/templates/angular/scripts/generate-component-factory/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
const plugins = require('scripts/temp/generate-component-factory-plugins'); | ||
import { PackageDefinition } from '@sitecore-jss/sitecore-jss-dev-tools'; | ||
|
||
export interface ComponentFactoryPluginConfig { | ||
watch?: boolean; | ||
packages: PackageDefinition[]; | ||
components: string[]; | ||
} | ||
|
||
export interface ComponentFactoryPlugin { | ||
/** | ||
* Detect order when the plugin should be called, e.g. 0 - will be called first (can be a plugin which data is required for other plugins) | ||
*/ | ||
order: number; | ||
/** | ||
* A function which will be called during component factory generation | ||
* @param {JssConfig} config Current (accumulated) config | ||
*/ | ||
exec(config: ComponentFactoryPluginConfig): ComponentFactoryPluginConfig; | ||
} | ||
|
||
/* | ||
COMPONENT FACTORY GENERATION | ||
Generates the /src/app/components/app-components.module.ts file which maps Angular components | ||
to JSS components. | ||
The component factory module defines a mapping between a string component name and a Angular component instance. | ||
When the Sitecore Layout service returns a layout definition, it returns named components. | ||
This mapping is used to construct the component hierarchy for the layout. | ||
NOTE: this script can run in two modes. The default mode, the component factory file is written once. | ||
But if `--watch` is a process argument, the component factory source folder will be watched, | ||
and the componentFactory.js rewritten on added or deleted files. | ||
This is used during `jss start` to pick up new or removed components at runtime. | ||
*/ | ||
|
||
const defaultConfig: ComponentFactoryPluginConfig = { | ||
watch: process.argv.some(arg => arg === '--watch'), | ||
packages: [], | ||
components: [], | ||
}; | ||
|
||
(Object.values(plugins) as ComponentFactoryPlugin[]) | ||
.sort((p1, p2) => p1.order - p2.order) | ||
.reduce((config, plugin) => plugin.exec(config), defaultConfig); |
Oops, something went wrong.