Merge pull request #78 from SpringRoll/develop

Develop

Author: chipbell4

.github/workflows/npm-deploy.yaml

@@ -22,7 +22,7 @@ jobs:
 
       - name: build
         run: |
-          npm run build:full
+          npm run build
         env:
           CI: true
 

README.md

@@ -42,9 +42,7 @@ container.openPath('local/path/to/game.html');
 ### Opening a Game Hosted at Another Domain
 
 ```javascript
-const container = new Container({
-  iframeSelector: '#game'
-});
+const container = new Container('#game');
 
 container.openLocal('https://example.com/path/to/game.html');
 ```
@@ -72,6 +70,20 @@ const container = new Container('#game', {
 container.openPath('path/to/game.html');
 ```
 
+### Opening a Game with a Dynamically Created Iframe
+In some cases, you may have an existing [HTMLIframeElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) rather than a CSS selector.
+You can also instantiate a container from the DOM element as well:
+
+```javascript
+import { Container } from 'springroll-container';
+
+const iframe = document.createElement('iframe');
+document.body.appendChild(iframe);
+
+const container = new Container(iframe);
+container.openPath('/path/to/game.html');
+```
+
 ## Plugins
 This section provides instructions on how to use the built-in plugins for SpringRoll Container. For writing or updating older plugins, see the [Plugin Authoring Guide](https://github.com/SpringRoll/SpringRollContainer/tree/main/src/plugins).
 

dist/SpringRoll-Container-umd.js

@@ -1,6 +1,6 @@
 {
   "name": "springroll-container",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "The iframe controller for interacting with SpringRoll applications",
   "main": "./dist/index.js",
   "license": "MIT",

dist/SpringRoll-Container-umd.js.map

@@ -19,18 +19,19 @@ export class Container extends PluginManager {
   /**
    *Creates an instance of Container.
    * @param {object} config
-   * @param {string} iframeSelector
+   * @param {string | HTMLIFrameElement} iframeOrSelector
    * @param {Array<BasePlugin> | null} [config.plugins=[]]
    * @memberof Container
    */
-  constructor(iframeSelector, { plugins } = {}) {
+  constructor(iframeOrSelector, { plugins } = {}) {
     super({ plugins });
 
-    this.iframe = document.querySelector(iframeSelector);
+    this.iframe = iframeOrSelector instanceof HTMLIFrameElement ? iframeOrSelector : document.querySelector(iframeOrSelector);
 
     if (null === this.iframe) {
       throw new Error('No iframe was found with the provided selector');
     }
+
     this.loaded = false;
     this.loading = false;
     this.release = null;

dist/index.js

@@ -14,6 +14,10 @@ describe('Container', () => {
     expect(container).to.be.instanceof(Container);
   });
 
+  it('should contruct with a Iframe DOM element', () => {                                                                  
+    new Container(iframe);
+  });
+
   it('.onLoadDone()', () => {
     container.onLoadDone();
     expect(container.loading).to.be.false;