diff --git a/.babelrc b/.babelrc index 90f8254..1cef0e6 100644 --- a/.babelrc +++ b/.babelrc @@ -1,14 +1,18 @@ { "presets": [ - ["env", { - "targets": { - "browsers": ["last 2 versions", "iOS >=10", "ie >= 10"] + [ + "env", + { + "targets": { + "browsers": [ "last 2 versions", "iOS >= 10", "ie >= 10" ] + } } - }] + ] ], "plugins": [ "array-includes", - "transform-object-assign", "transform-runtime", + "transform-object-rest-spread", + "transform-class-properties" ] } diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..01f0f1a --- /dev/null +++ b/.eslintignore @@ -0,0 +1,8 @@ +node_modules +build +builds +scripts +config +lib +dist +*.config.* diff --git a/.eslintrc.json b/.eslintrc.json index 65707f9..98796dc 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,21 +1,19 @@ -// When you write javascript you should follow these soft rules and best practices -// https://github.com/airbnb/javascript - -// This is a link to best practices and enforcer settings for eslint -// https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb - -// Use this file as a starting point for your project's .eslintrc. { + "extends": "airbnb", + "parser": "babel-eslint", + "plugins": [ + "import", + "compat" + ], "env": { "browser": true, - "node": true, - "jquery": true, - "commonjs": true, - "es6": true + "jest": true }, - "extends": ["airbnb"], "rules": { - "no-unused-vars": 0, - "max-len": 0 + "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/test/*", "**/*.jest.*", "**/*.test.*"]}], + "compat/compat": "error" // error when using features that are not supported in the browsers we target in .browserslistrc + }, + "settings": { + "polyfills": ["promises"] } } diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 0000000..64ed2a8 --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,2 @@ +# Set default code owners for all files in repo +* @cerner/xfc diff --git a/.nvmrc b/.nvmrc index 32c861f..5debbed 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -8.9.2 +lts/carbon diff --git a/.travis.yml b/.travis.yml index ce76040..d6b474c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,4 +1,4 @@ language: node_js script: - - npm test - - npm run lint-js + - yarn run test + - yarn run lint diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index e45c2ba..613efea 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -7,6 +7,7 @@ Cerner Corporation - Greg Howdeshell [@poloka] - Matt Schile [@mschile] - Sam Milligan [@grneggandsam] +- Cody Price [@dev-cprice] [@mhemesath]: https://github.com/mhemesath [@kafkahw]: https://github.com/kafkahw @@ -15,3 +16,4 @@ Cerner Corporation [@poloka]: https://github.com/poloka [@mschile]: https://github.com/mschile [@grneggandsam]: https://github.com/grneggandsam +[@dev-cprice]: https://github.com/dev-cprice diff --git a/NOTICE b/NOTICE index 6ce917d..264d24d 100644 --- a/NOTICE +++ b/NOTICE @@ -1,4 +1,4 @@ -Copyright 2017 Cerner Innovation, Inc. +Copyright 2018 Cerner Innovation, Inc. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/README.md b/README.md index d1d8771..a50bbbe 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ This project handles securely embedding web content into a 3rd party domain. Out * Event dispatching from embedded content into a framework ## Usage + Include `xfc.js` in your project. Ensure `process.env.NODE_ENV` is set correctly in the build enviornment. Logging is only enabled in non-production environments. The environment can be set in webpack using the [DefinePlugin](https://webpack.js.org/guides/production-build/) @@ -29,6 +30,7 @@ module.exports = { ``` ### Setting Up A Consumer + The consumer is the application which is embedding the 3rd party applications within it. ```js @@ -57,8 +59,8 @@ To load a new page within the existing frame, simply call `load` method with the frame.load(newURL) ``` - #### Iframe Resizing Config + By default, the height of iframe will automatically resize based on the height of the embedded content. This behavior can be changed by passing an extra option (`resizeConfig`) into `mount` method. ```js @@ -79,8 +81,8 @@ XFC.Consumer.mount(document.body, 'http://localprovider.com:8080/example/provide | customCalculationMethod | function | null | When specified, XFC will use the given method to update iframe's size when necessary (e.g. dom changes, window resized, etc.)

NOTE: context `this` is provided as iframe to this method, so in the method you can access the iframe by accessing `this` | | targetSelectors | string | null | When the embedded page contains elements styled with `position: absolute`, the iframe resizing logic won't calculate the height of the embedded page correctly because those elements are removed from normal document flow.

In this case, targetSelectors can be used to specify those absolute positioned elements so that they will be taken into consideration when calculating the height of the embedded page. Multiple selectors may be specified by separating them using commas.

If not specified, normal resizing logic will be used.

NOTE: this attribute can be also specified from Provider's side, e.g. `XFC.Provider.init({targetSelectors: '#target'})`| - ### Setting Custom Attributes on Iframe + Sometimes, it's useful for developers to add more attributes onto mounted iframes. A common use case, for instance, is adding `allow` attribute to `