Skip to content

Commit c711def

Browse files
jarrodekjarrodek
committed
chore: adding suppoprt for ie11 in demo pages
1 parent 16dd3b7 commit c711def

9 files changed

Lines changed: 175 additions & 152 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,4 @@ $RECYCLE.BIN/
5656

5757
node_modules
5858
coverage
59+
demo/vendor.js

‎demo/demo-server/app.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,25 @@
1-
// import Koa from 'koa';
1+
/* eslint-disable import/no-extraneous-dependencies */
22
import { createConfig, startServer } from 'es-dev-server';
3+
import fs from 'fs-extra';
4+
import path from 'path';
35
import { demoApi } from './api.js';
46

7+
async function proxy(ctx, next) {
8+
if (ctx.request.url === '/demo/vendor.js') {
9+
/* eslint-disable require-atomic-updates */
10+
ctx.body = await fs.readFile(path.join(__dirname, '..', 'vendor.js'));
11+
return;
12+
}
13+
if (ctx.request.url === '/node_modules/marked/lib/marked.js') {
14+
const file = path.join(__dirname, '..', '..', 'node_modules', 'marked', 'lib', 'marked.js');
15+
const body = await fs.readFile(file, 'utf8');
16+
ctx.response.set('content-type', 'text/javascript');
17+
ctx.body = body.replace('(this || (', '(window || (');
18+
return;
19+
}
20+
return next();
21+
}
22+
523
const config = createConfig({
624
// port: 8001,
725
watch: true,
@@ -10,8 +28,13 @@ const config = createConfig({
1028
moduleDirs: ['node_modules'],
1129
logStartup: true,
1230
openBrowser: true,
31+
compatibility: 'auto',
32+
babelExclude: [
33+
'**/vendor.js'
34+
],
1335
middlewares: [
14-
demoApi
36+
demoApi,
37+
proxy,
1538
]
1639
});
1740
config.openBrowser = true;

‎demo/editor/index.html‎

Lines changed: 21 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,6 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
77
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
88
<title>API Console with RAML editor demo</title>
9-
<script src="../../node_modules/cryptojslib/components/core.js"></script>
10-
<script src="../../node_modules/cryptojslib/rollups/sha1.js"></script>
11-
<script src="../../node_modules/cryptojslib/components/enc-base64-min.js"></script>
12-
<script src="../../node_modules/cryptojslib/rollups/md5.js"></script>
13-
<script src="../../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
14-
<script src="../../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
15-
<!--
16-
Previously this was included into the compoennt.
17-
Since compoennts are ES6 modules this libraries cannot be loaded into
18-
the component as they do not export anything and won't set global variable.
19-
-->
20-
<script src="../../node_modules/jsonlint/lib/jsonlint.js"></script>
21-
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
22-
<script src="../../node_modules/codemirror/addon/mode/loadmode.js"></script>
23-
<script src="../../node_modules/codemirror/mode/meta.js"></script>
24-
<script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
25-
<script src="../../node_modules/codemirror/mode/xml/xml.js"></script>
26-
<script src="../../node_modules/codemirror/mode/yaml/yaml.js"></script>
27-
<script src="../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
28-
<script src="../../node_modules/codemirror/addon/lint/lint.js"></script>
29-
<script src="../../node_modules/codemirror/addon/lint/json-lint.js"></script>
30-
<!--
31-
From the inside of a web component it is hard to determine where
32-
scripts are actually located. This should be set if the page won't load all possible
33-
scripts at run time. The component will download the "mode" from this location.
34-
-->
35-
<script>
36-
/* global CodeMirror */
37-
CodeMirror.modeURL = '../../node_modules/codemirror/mode/%N/%N.js';
38-
</script>
399

4010
<link rel="stylesheet" type="text/css" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
4111
<link rel="stylesheet" type="text/css" href="../api-console-master-styles.css">
@@ -132,6 +102,27 @@
132102
<body>
133103
<div id="demo"></div>
134104
<script type="module" src="./app.js" async></script>
105+
106+
<script src="../vendor.js"></script>
107+
<script>
108+
document.addEventListener('WebComponentsReady', function() {
109+
if (!window.ShadyCSS) {
110+
return;
111+
}
112+
function shouldAddDocumentStyle(n) {
113+
return n.nodeType === Node.ELEMENT_NODE && n.localName === 'style' && !n.hasAttribute('scope');
114+
}
115+
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;
116+
117+
const candidates = document.querySelectorAll('style');
118+
for (let i = 0; i < candidates.length; i++) {
119+
const candidate = candidates[i];
120+
if (shouldAddDocumentStyle(candidate)) {
121+
CustomStyleInterface.addCustomStyle(candidate);
122+
}
123+
}
124+
});
125+
</script>
135126
</body>
136127

137128
</html>

‎demo/element/index.html‎

Lines changed: 20 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,6 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
77
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
88
<title>API Console element demo</title>
9-
<script src="../../node_modules/cryptojslib/components/core.js"></script>
10-
<script src="../../node_modules/cryptojslib/rollups/sha1.js"></script>
11-
<script src="../../node_modules/cryptojslib/components/enc-base64-min.js"></script>
12-
<script src="../../node_modules/cryptojslib/rollups/md5.js"></script>
13-
<script src="../../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
14-
<script src="../../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
15-
<!--
16-
Previously this was included into the compoennt.
17-
Since compoennts are ES6 modules this libraries cannot be loaded into
18-
the component as they do not export anything and won't set global variable.
19-
-->
20-
<script src="../../node_modules/jsonlint/lib/jsonlint.js"></script>
21-
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
22-
<script src="../../node_modules/codemirror/addon/mode/loadmode.js"></script>
23-
<script src="../../node_modules/codemirror/mode/meta.js"></script>
24-
<script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
25-
<script src="../../node_modules/codemirror/mode/xml/xml.js"></script>
26-
<script src="../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
27-
<script src="../../node_modules/codemirror/addon/lint/lint.js"></script>
28-
<script src="../../node_modules/codemirror/addon/lint/json-lint.js"></script>
29-
<!--
30-
From the inside of a web component it is hard to determine where
31-
scripts are actually located. This should be set if the page won't load all possible
32-
scripts at run time. The component will download the "mode" from this location.
33-
-->
34-
<script>
35-
/* global CodeMirror */
36-
CodeMirror.modeURL = '../../node_modules/codemirror/mode/%N/%N.js';
37-
</script>
38-
399
<link rel="stylesheet" type="text/css" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
4010
<link rel="stylesheet" type="text/css" href="../api-console-master-styles.css">
4111
<style>
@@ -109,6 +79,26 @@
10979
<body>
11080
<div id="demo"></div>
11181
<script type="module" src="./app.js" async></script>
82+
<script src="../vendor.js"></script>
83+
<script>
84+
document.addEventListener('WebComponentsReady', function() {
85+
if (!window.ShadyCSS) {
86+
return;
87+
}
88+
function shouldAddDocumentStyle(n) {
89+
return n.nodeType === Node.ELEMENT_NODE && n.localName === 'style' && !n.hasAttribute('scope');
90+
}
91+
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;
92+
93+
const candidates = document.querySelectorAll('style');
94+
for (let i = 0; i < candidates.length; i++) {
95+
const candidate = candidates[i];
96+
if (shouldAddDocumentStyle(candidate)) {
97+
CustomStyleInterface.addCustomStyle(candidate);
98+
}
99+
}
100+
});
101+
</script>
112102
</body>
113103

114104
</html>

‎demo/standalone/index.html‎

Lines changed: 20 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,6 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
77
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
88
<title>API Console standalone application demo</title>
9-
<script src="../../node_modules/cryptojslib/components/core.js"></script>
10-
<script src="../../node_modules/cryptojslib/rollups/sha1.js"></script>
11-
<script src="../../node_modules/cryptojslib/components/enc-base64-min.js"></script>
12-
<script src="../../node_modules/cryptojslib/rollups/md5.js"></script>
13-
<script src="../../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
14-
<script src="../../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
15-
<!--
16-
Previously this was included into the compoennt.
17-
Since compoennts are ES6 modules this libraries cannot be loaded into
18-
the component as they do not export anything and won't set global variable.
19-
-->
20-
<script src="../../node_modules/jsonlint/lib/jsonlint.js"></script>
21-
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
22-
<script src="../../node_modules/codemirror/addon/mode/loadmode.js"></script>
23-
<script src="../../node_modules/codemirror/mode/meta.js"></script>
24-
<script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
25-
<script src="../../node_modules/codemirror/mode/xml/xml.js"></script>
26-
<script src="../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
27-
<script src="../../node_modules/codemirror/addon/lint/lint.js"></script>
28-
<script src="../../node_modules/codemirror/addon/lint/json-lint.js"></script>
29-
<!--
30-
From the inside of a web component it is hard to determine where
31-
scripts are actually located. This should be set if the page won't load all possible
32-
scripts at run time. The component will download the "mode" from this location.
33-
-->
34-
<script>
35-
/* global CodeMirror */
36-
CodeMirror.modeURL = '../../node_modules/codemirror/mode/%N/%N.js';
37-
</script>
38-
399
<link rel="stylesheet" type="text/css" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
4010
<link rel="stylesheet" type="text/css" href="../api-console-master-styles.css">
4111
<style>
@@ -65,6 +35,26 @@
6535
<body>
6636
<div id="demo"></div>
6737
<script type="module" src="./app.js" async></script>
38+
<script src="../vendor.js"></script>
39+
<script>
40+
document.addEventListener('WebComponentsReady', function() {
41+
if (!window.ShadyCSS) {
42+
return;
43+
}
44+
function shouldAddDocumentStyle(n) {
45+
return n.nodeType === Node.ELEMENT_NODE && n.localName === 'style' && !n.hasAttribute('scope');
46+
}
47+
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;
48+
49+
const candidates = document.querySelectorAll('style');
50+
for (let i = 0; i < candidates.length; i++) {
51+
const candidate = candidates[i];
52+
if (shouldAddDocumentStyle(candidate)) {
53+
CustomStyleInterface.addCustomStyle(candidate);
54+
}
55+
}
56+
});
57+
</script>
6858
</body>
6959

7060
</html>

‎demo/themed/anypoint.html‎

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,6 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
77
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
88
<title>Themed API Console demo</title>
9-
<script src="../../node_modules/cryptojslib/components/core.js"></script>
10-
<script src="../../node_modules/cryptojslib/rollups/sha1.js"></script>
11-
<script src="../../node_modules/cryptojslib/components/enc-base64-min.js"></script>
12-
<script src="../../node_modules/cryptojslib/rollups/md5.js"></script>
13-
<script src="../../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
14-
<script src="../../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
15-
<!--
16-
Previously this was included into the compoennt.
17-
Since compoennts are ES6 modules this libraries cannot be loaded into
18-
the component as they do not export anything and won't set global variable.
19-
-->
20-
<script src="../../node_modules/jsonlint/lib/jsonlint.js"></script>
21-
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
22-
<script src="../../node_modules/codemirror/addon/mode/loadmode.js"></script>
23-
<script src="../../node_modules/codemirror/mode/meta.js"></script>
24-
<script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
25-
<script src="../../node_modules/codemirror/mode/xml/xml.js"></script>
26-
<script src="../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
27-
<script src="../../node_modules/codemirror/addon/lint/lint.js"></script>
28-
<script src="../../node_modules/codemirror/addon/lint/json-lint.js"></script>
29-
<!--
30-
From the inside of a web component it is hard to determine where
31-
scripts are actually located. This should be set if the page won't load all possible
32-
scripts at run time. The component will download the "mode" from this location.
33-
-->
34-
<script>
35-
/* global CodeMirror */
36-
CodeMirror.modeURL = '../../node_modules/codemirror/mode/%N/%N.js';
37-
</script>
389
<link rel="stylesheet" type="text/css" href="./anypoint-theme.css">
3910
<style>
4011
html, body {
@@ -62,6 +33,26 @@
6233
<body>
6334
<div id="demo"></div>
6435
<script type="module" src="./anypoint.js" async></script>
36+
<script src="../vendor.js"></script>
37+
<script>
38+
document.addEventListener('WebComponentsReady', function() {
39+
if (!window.ShadyCSS) {
40+
return;
41+
}
42+
function shouldAddDocumentStyle(n) {
43+
return n.nodeType === Node.ELEMENT_NODE && n.localName === 'style' && !n.hasAttribute('scope');
44+
}
45+
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;
46+
47+
const candidates = document.querySelectorAll('style');
48+
for (let i = 0; i < candidates.length; i++) {
49+
const candidate = candidates[i];
50+
if (shouldAddDocumentStyle(candidate)) {
51+
CustomStyleInterface.addCustomStyle(candidate);
52+
}
53+
}
54+
});
55+
</script>
6556
</body>
6657

6758
</html>

‎demo/themed/dark.html‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,6 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
77
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
88
<title>Themed API Console demo</title>
9-
<script src="../../node_modules/cryptojslib/components/core.js"></script>
10-
<script src="../../node_modules/cryptojslib/rollups/sha1.js"></script>
11-
<script src="../../node_modules/cryptojslib/components/enc-base64-min.js"></script>
12-
<script src="../../node_modules/cryptojslib/rollups/md5.js"></script>
13-
<script src="../../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
14-
<script src="../../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
15-
<!--
16-
Previously this was included into the compoennt.
17-
Since compoennts are ES6 modules this libraries cannot be loaded into
18-
the component as they do not export anything and won't set global variable.
19-
-->
20-
<script src="../../node_modules/jsonlint/lib/jsonlint.js"></script>
21-
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
22-
<script src="../../node_modules/codemirror/addon/mode/loadmode.js"></script>
23-
<script src="../../node_modules/codemirror/mode/meta.js"></script>
24-
<script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
25-
<script src="../../node_modules/codemirror/mode/xml/xml.js"></script>
26-
<script src="../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
27-
<script src="../../node_modules/codemirror/addon/lint/lint.js"></script>
28-
<script src="../../node_modules/codemirror/addon/lint/json-lint.js"></script>
29-
<!--
30-
From the inside of a web component it is hard to determine where
31-
scripts are actually located. This should be set if the page won't load all possible
32-
scripts at run time. The component will download the "mode" from this location.
33-
-->
34-
<script>
35-
/* global CodeMirror */
36-
CodeMirror.modeURL = '../../node_modules/codemirror/mode/%N/%N.js';
37-
</script>
389
<link rel="stylesheet" type="text/css" href="./dark-theme.css">
3910
<style>
4011
.icon {
@@ -49,6 +20,27 @@
4920
<body>
5021
<div id="demo"></div>
5122
<script type="module" src="./dark.js" async></script>
23+
24+
<script src="../vendor.js"></script>
25+
<script>
26+
document.addEventListener('WebComponentsReady', function() {
27+
if (!window.ShadyCSS) {
28+
return;
29+
}
30+
function shouldAddDocumentStyle(n) {
31+
return n.nodeType === Node.ELEMENT_NODE && n.localName === 'style' && !n.hasAttribute('scope');
32+
}
33+
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;
34+
35+
const candidates = document.querySelectorAll('style');
36+
for (let i = 0; i < candidates.length; i++) {
37+
const candidate = candidates[i];
38+
if (shouldAddDocumentStyle(candidate)) {
39+
CustomStyleInterface.addCustomStyle(candidate);
40+
}
41+
}
42+
});
43+
</script>
5244
</body>
5345

5446
</html>

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"rollup-plugin-uglify": "^6.0.3",
8383
"sinon": "^7.4.2",
8484
"tmp": "0.1.0",
85+
"uglify-js": "^3.7.0",
8586
"unzipper": "^0.10.4",
8687
"uuid": "^3.3.3",
8788
"web-animations-js": "^2.3.2"
@@ -92,7 +93,7 @@
9293
"start": "node demo/index.js",
9394
"start:old": "es-dev-server --app-index demo/index.html --node-resolve --open --watch",
9495
"start:server": "node --inspect demo/parsing-server/main.js",
95-
"start:compatibility": "es-dev-server --app-index demo/index.html --compatibility auto --node-resolve --open --watch",
96+
"start:compatibility": "es-dev-server --app-index demo/index.html --compatibility auto --node-resolve --open --watch --babel-exclude **/vendor.js",
9697
"lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
9798
"format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
9899
"lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
@@ -106,7 +107,8 @@
106107
"test:compatibility": "karma start --compatibility auto --coverage",
107108
"test:compatibility:watch": "karma start --compatibility auto --auto-watch=true --single-run=false",
108109
"test:sl": "karma start karma.sl.config.js --compatibility auto --coverage",
109-
"build": "rimraf dist && rollup -c rollup.config.js"
110+
"build": "rimraf dist && rollup -c rollup.config.js",
111+
"prepare": "node tasks/prepare.js"
110112
},
111113
"lint-staged": {
112114
"*.js": [

0 commit comments

Comments
 (0)