Instantly share code, notes, and snippets.

Andrew Connell andrewconnell

View GitHub Profile
View jest-preset-spfx-react*.sh
## in the case of React v15 in SPFx <= v1.6.0
npm install jest @voitanos/jest-preset-spfx-react15 --save-dev
## in the case of React v16 in SPFx >= v1.7.0
npm install jest @voitanos/jest-preset-spfx-react16 --save-dev
View wallaby.config.js
module.exports = function (wallaby) {
return {
files: [
{ pattern: './tsconfig.json', instrument: false},
{ pattern: './config/jest.config.json', instrument: false},
'src/**/*.ts',
'!src/**/*.spec.ts',
View wallaby.config.js
module.exports = function (wallaby) {
return {
files: [
{ pattern: './tsconfig.json', instrument: false},
{ pattern: './config/jest.config.json', instrument: false},
{ pattern: './config/jest.enzyme.js', instrument: false},
'src/**/*.ts',
'src/**/*.tsx',
View package.json
{
"dependencies": {...},
"devDependencies": {...},
"resolutions": {
"@types/react": "16.4.2"
}
}
View op2-spfx-webpart-custom-element.ts
// polyfill for ES5 code as doesn't include native implementation for customElements
import '@webcomponents/custom-elements/src/native-shim';
// polyfill for browsers that don't support shadowDom & customElements (IE & Edge)
import '@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce';
// angular elements application
import './app/ngElementsHelloWorld';
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
public render(): void {
this.domElement.innerHTML = `<app-hello-world message="${ this.properties.description }"></app-hello-world>`;
View gulpfile.js
// add the following before the existing line: build.initialize(gulp);
const webpack = require('webpack');
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const bundleAnalyzer = require('webpack-bundle-analyzer');
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
const lastDirName = path.basename(__dirname);
View package.json
// in addition to the SPFx packages, you need the following
"dependencies": {
"@angular/common": "6.1.3",
"@angular/compiler": "6.1.3",
"@angular/core": "6.1.3",
"@angular/elements": "6.1.3",
"@angular/platform-browser": "6.1.3",
"@angular/platform-browser-dynamic": "6.1.3",
"@webcomponents/custom-elements": "1.2.0",
"@webcomponents/webcomponentsjs": "2.1.1",
View op1-spfx-webpart-custom-element.ts
// polyfill for ES5 code as doesn't include native implementation for customElements
import '@webcomponents/custom-elements/src/native-shim';
// polyfill for browsers that don't support shadowDom & customElements (IE & Edge)
import '@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce';
// polyfill required when using JIT compilation (not required for AOT)
import 'core-js/es7/reflect';
// required when using JIT compilation (not required for AOT)
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// angular elements application
View angular-elements-web-part.ts
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
public render(): void {
this.domElement.innerHTML = `<app-hello-world message="${ this.properties.description }"></app-hello-world>`;
// attach to the custom elements 'elementButtonClick` event
this.domElement.getElementsByTagName('app-hello-world')[0]
.addEventListener('elementButtonClick', (event: any) => {
console.log(`The custom element sent the following message: ${ event.detail }`);
});
}
View app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule ],
entryComponents: [ AppComponent ]
})