From c92b1c66e3050bb742cf73533d51ea5251c10fcb Mon Sep 17 00:00:00 2001 From: Blair MacIntyre Date: Wed, 8 Aug 2018 19:40:59 -0400 Subject: [PATCH] clear out any existing webxr polyfill with the same names The WebXR Viewer is going to preload it's own WebXR polyfill, so if some page loads this, it needs to not use any of the other polyfill's classes. --- dist-footer.js | 22 +++++++++ dist-header.js | 22 +++++++++ package.json | 5 +- polyfill/XRPolyfill.js | 110 +++++++++++++++++++++++++---------------- webpack.config.js | 60 +++++++++++++--------- 5 files changed, 151 insertions(+), 68 deletions(-) create mode 100644 dist-footer.js create mode 100644 dist-header.js diff --git a/dist-footer.js b/dist-footer.js new file mode 100644 index 0000000..303b13a --- /dev/null +++ b/dist-footer.js @@ -0,0 +1,22 @@ + +XRDisplay = window.XRDisplay +XRSession = window.XRSession +XRSessionCreateParameters = window.XRSessionCreateParameters +Reality = window.Reality +XRPointCloud = window.XRPointCloud +XRLightEstimate = window.XRLightEstimate +XRAnchor = window.XRAnchor; +XRPlaneAnchor = window.XRPlaneAnchor; +XRFaceAnchor = window.XRFaceAnchor; +XRImageAnchor = window.XRImageAnchor; +XRAnchorOffset = window.XRAnchorOffset; +XRStageBounds = window.XRStageBounds; +XRStageBoundsPoint = window.XRStageBoundsPoint; +XRPresentationFrame = window.XRPresentationFrame; +XRView = window.XRView; +XRViewport = window.XRViewport; +XRCoordinateSystem = window.XRCoordinateSystem; +XRViewPose = window.XRViewPose; +XRLayer = window.XRLayer; +XRWebGLLayer = window.XRWebGLLayer; +XRVideoFrame = window.XRVideoFrame; diff --git a/dist-header.js b/dist-header.js new file mode 100644 index 0000000..c3a3e2a --- /dev/null +++ b/dist-header.js @@ -0,0 +1,22 @@ +XRDisplay = null +XRSession = null +XRSessionCreateParameters = null +Reality = null +XRPointCloud = null; +XRLightEstimate = null; +XRAnchor = null; +XRPlaneAnchor = null; +XRFaceAnchor = null; +XRImageAnchor = null; +XRAnchorOffset = null; +XRStageBounds = null; +XRStageBoundsPoint = null; +XRPresentationFrame = null; +XRView = null; +XRViewport = null; +XRCoordinateSystem = null; +XRViewPose = null; +XRLayer = null; +XRWebGLLayer = null +XRVideoFrame = null; + diff --git a/package.json b/package.json index b8af6c8..7e5c670 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,9 @@ "babel-loader": "^7.1.1", "babel-preset-env": "^1.6.0", "http-server": "^0.10.0", - "webpack": "^3.5.5" + "webpack": "^3.5.5", + "wrapper-webpack-plugin": "^1.0.0" + }, + "dependencies": { } } diff --git a/polyfill/XRPolyfill.js b/polyfill/XRPolyfill.js index 5ed242e..65f7214 100644 --- a/polyfill/XRPolyfill.js +++ b/polyfill/XRPolyfill.js @@ -1,24 +1,24 @@ -import XRDisplay from './XRDisplay.js' -import XRSession from './XRSession.js' -import XRSessionCreateParameters from './XRSessionCreateParameters.js' -import Reality from './Reality.js' -import XRPointCloud from './XRPointCloud.js' -import XRLightEstimate from './XRLightEstimate.js' -import XRAnchor from './XRAnchor.js' -import XRPlaneAnchor from './XRPlaneAnchor.js' -import XRFaceAnchor from './XRFaceAnchor.js' -import XRImageAnchor from './XRImageAnchor.js' -import XRAnchorOffset from './XRAnchorOffset.js' -import XRStageBounds from './XRStageBounds.js' -import XRStageBoundsPoint from './XRStageBoundsPoint.js' -import XRPresentationFrame from './XRPresentationFrame.js' -import XRView from './XRView.js' -import XRViewport from './XRViewport.js' -import XRCoordinateSystem from './XRCoordinateSystem.js' -import XRViewPose from './XRViewPose.js' -import XRLayer from './XRLayer.js' -import XRWebGLLayer from './XRWebGLLayer.js' -import XRVideoFrame from './XRVideoFrame.js' +import _XRDisplay from './XRDisplay.js' +import _XRSession from './XRSession.js' +import _XRSessionCreateParameters from './XRSessionCreateParameters.js' +import _Reality from './Reality.js' +import _XRPointCloud from './XRPointCloud.js' +import _XRLightEstimate from './XRLightEstimate.js' +import _XRAnchor from './XRAnchor.js' +import _XRPlaneAnchor from './XRPlaneAnchor.js' +import _XRFaceAnchor from './XRFaceAnchor.js' +import _XRImageAnchor from './XRImageAnchor.js' +import _XRAnchorOffset from './XRAnchorOffset.js' +import _XRStageBounds from './XRStageBounds.js' +import _XRStageBoundsPoint from './XRStageBoundsPoint.js' +import _XRPresentationFrame from './XRPresentationFrame.js' +import _XRView from './XRView.js' +import _XRViewport from './XRViewport.js' +import _XRCoordinateSystem from './XRCoordinateSystem.js' +import _XRViewPose from './XRViewPose.js' +import _XRLayer from './XRLayer.js' +import _XRWebGLLayer from './XRWebGLLayer.js' +import _XRVideoFrame from './XRVideoFrame.js' import EventHandlerBase from './fill/EventHandlerBase.js' import FlatDisplay from './display/FlatDisplay.js' @@ -35,27 +35,49 @@ so you can safely include this script in any page. class XRPolyfill extends EventHandlerBase { constructor(){ super() - window.XRDisplay = XRDisplay - window.XRSession = XRSession - window.XRSessionCreateParameters = XRSessionCreateParameters - window.Reality = Reality - window.XRPointCloud = XRPointCloud - window.XRLightEstimate = XRLightEstimate - window.XRAnchor = XRAnchor - window.XRPlaneAnchor = XRPlaneAnchor - window.XRFaceAnchor = XRFaceAnchor - window.XRImageAnchor = XRImageAnchor - window.XRAnchorOffset = XRAnchorOffset - window.XRStageBounds = XRStageBounds - window.XRStageBoundsPoint = XRStageBoundsPoint - window.XRPresentationFrame = XRPresentationFrame - window.XRView = XRView - window.XRViewport = XRViewport - window.XRCoordinateSystem = XRCoordinateSystem - window.XRViewPose = XRViewPose - window.XRLayer = XRLayer - window.XRWebGLLayer = XRWebGLLayer - window.XRVideoFrame = XRVideoFrame + window.XRDisplay = _XRDisplay + window.XRSession = _XRSession + window.XRSessionCreateParameters = _XRSessionCreateParameters + window.Reality = _Reality + window.XRPointCloud = _XRPointCloud + window.XRLightEstimate = _XRLightEstimate + window.XRAnchor = _XRAnchor + window.XRPlaneAnchor = _XRPlaneAnchor + window.XRFaceAnchor = _XRFaceAnchor + window.XRImageAnchor = _XRImageAnchor + window.XRAnchorOffset = _XRAnchorOffset + window.XRStageBounds = _XRStageBounds + window.XRStageBoundsPoint = _XRStageBoundsPoint + window.XRPresentationFrame = _XRPresentationFrame + window.XRView = _XRView + window.XRViewport = _XRViewport + window.XRCoordinateSystem = _XRCoordinateSystem + window.XRViewPose = _XRViewPose + window.XRLayer = _XRLayer + window.XRWebGLLayer = _XRWebGLLayer + window.XRVideoFrame = _XRVideoFrame + + XRDisplay = window.XRDisplay + XRSession = window.XRSession + XRSessionCreateParameters = window.XRSessionCreateParameters + Reality = window.Reality + XRPointCloud = window.XRPointCloud + XRLightEstimate = window.XRLightEstimate + XRAnchor = window.XRAnchor; + XRPlaneAnchor = window.XRPlaneAnchor; + XRFaceAnchor = window.XRFaceAnchor; + XRImageAnchor = window.XRImageAnchor; + XRAnchorOffset = window.XRAnchorOffset; + XRStageBounds = window.XRStageBounds; + XRStageBoundsPoint = window.XRStageBoundsPoint; + XRPresentationFrame = window.XRPresentationFrame; + XRView = window.XRView; + XRViewport = window.XRViewport; + XRCoordinateSystem = window.XRCoordinateSystem; + XRViewPose = window.XRViewPose; + XRLayer = window.XRLayer; + XRWebGLLayer = window.XRWebGLLayer; + XRVideoFrame = window.XRVideoFrame; this._getVRDisplaysFinished = false; @@ -125,4 +147,6 @@ class XRPolyfill extends EventHandlerBase { } /* Install XRPolyfill if window.XR does not exist */ -if(typeof navigator.XR === 'undefined') navigator.XR = new XRPolyfill() +if(typeof navigator.XR === 'undefined') { + navigator.XR = new XRPolyfill() +} diff --git a/webpack.config.js b/webpack.config.js index 1e4da39..5d8a48e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,25 +1,37 @@ const path = require('path'); +const fs = require('fs'); + +WrapperPlugin = require('wrapper-webpack-plugin'); + +const headerDoc = fs.readFileSync('./dist-header.js', 'utf8'); +const footerDoc = fs.readFileSync('./dist-footer.js', 'utf8'); var xrPolyfill = { - entry: './polyfill/XRPolyfill.js', - output: { - filename: 'webxr-polyfill.js', - path: path.resolve(__dirname, 'dist') - }, + entry: './polyfill/XRPolyfill.js', + output: { + filename: 'webxr-polyfill.js', + path: path.resolve(__dirname, 'dist') + }, + plugins: [ + new WrapperPlugin({ + header: headerDoc, + footer: footerDoc + }) + ], module: { - rules: [ + rules: [ { - test: /\.js$/, - include: [ - path.resolve(__dirname, "polyfill"), - ], - use: { - loader: 'babel-loader', - options: { - presets: ['env'] + test: /\.js$/, + include: [ + path.resolve(__dirname, "polyfill"), + ], + use: { + loader: 'babel-loader', + options: { + presets: ['env'] + } } } - } ] }, resolve: { @@ -36,17 +48,17 @@ var xrVideoWorker = { module: { rules: [ { - test: /\.js$/, - include: [ - path.resolve(__dirname, "polyfill"), - ], - use: { - loader: 'babel-loader', - options: { - presets: ['env'] + test: /\.js$/, + include: [ + path.resolve(__dirname, "polyfill"), + ], + use: { + loader: 'babel-loader', + options: { + presets: ['env'] + } } } - } ] }, resolve: {