Skip to content

Commit

Permalink
chore: adding suppoprt for ie11 in demo pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@jarrodek
jarrodek committed Dec 3, 2019
1 parent 16dd3b7 commit c711def
Show file tree
Hide file tree
Showing 9 changed files with 175 additions and 152 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,4 @@ $RECYCLE.BIN/

node_modules
coverage
demo/vendor.js
27 changes: 25 additions & 2 deletions demo/demo-server/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,25 @@
// import Koa from 'koa';
/* eslint-disable import/no-extraneous-dependencies */
import { createConfig, startServer } from 'es-dev-server';
import fs from 'fs-extra';
import path from 'path';
import { demoApi } from './api.js';

async function proxy(ctx, next) {
if (ctx.request.url === '/demo/vendor.js') {
/* eslint-disable require-atomic-updates */
ctx.body = await fs.readFile(path.join(__dirname, '..', 'vendor.js'));
return;
}
if (ctx.request.url === '/node_modules/marked/lib/marked.js') {
const file = path.join(__dirname, '..', '..', 'node_modules', 'marked', 'lib', 'marked.js');
const body = await fs.readFile(file, 'utf8');
ctx.response.set('content-type', 'text/javascript');
ctx.body = body.replace('(this || (', '(window || (');
return;
}
return next();
}

const config = createConfig({
// port: 8001,
watch: true,
Expand All @@ -10,8 +28,13 @@ const config = createConfig({
moduleDirs: ['node_modules'],
logStartup: true,
openBrowser: true,
compatibility: 'auto',
babelExclude: [
'**/vendor.js'
],
middlewares: [
demoApi
demoApi,
proxy,
]
});
config.openBrowser = true;
Expand Down
51 changes: 21 additions & 30 deletions demo/editor/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>API Console with RAML editor demo</title>
<script src="../../node_modules/cryptojslib/components/core.js"></script>
<script src="../../node_modules/cryptojslib/rollups/sha1.js"></script>
<script src="../../node_modules/cryptojslib/components/enc-base64-min.js"></script>
<script src="../../node_modules/cryptojslib/rollups/md5.js"></script>
<script src="../../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
<script src="../../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
<!--
Previously this was included into the compoennt.
Since compoennts are ES6 modules this libraries cannot be loaded into
the component as they do not export anything and won't set global variable.
-->
<script src="../../node_modules/jsonlint/lib/jsonlint.js"></script>
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
<script src="../../node_modules/codemirror/addon/mode/loadmode.js"></script>
<script src="../../node_modules/codemirror/mode/meta.js"></script>
<script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
<script src="../../node_modules/codemirror/mode/xml/xml.js"></script>
<script src="../../node_modules/codemirror/mode/yaml/yaml.js"></script>
<script src="../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="../../node_modules/codemirror/addon/lint/lint.js"></script>
<script src="../../node_modules/codemirror/addon/lint/json-lint.js"></script>
<!--
From the inside of a web component it is hard to determine where
scripts are actually located. This should be set if the page won't load all possible
scripts at run time. The component will download the "mode" from this location.
-->
<script>
/* global CodeMirror */
CodeMirror.modeURL = '../../node_modules/codemirror/mode/%N/%N.js';
</script>

<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">
<link rel="stylesheet" type="text/css" href="../api-console-master-styles.css">
Expand Down Expand Up @@ -132,6 +102,27 @@
<body>
<div id="demo"></div>
<script type="module" src="./app.js" async></script>

<script src="../vendor.js"></script>
<script>
document.addEventListener('WebComponentsReady', function() {
if (!window.ShadyCSS) {
return;
}
function shouldAddDocumentStyle(n) {
return n.nodeType === Node.ELEMENT_NODE && n.localName === 'style' && !n.hasAttribute('scope');
}
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;

const candidates = document.querySelectorAll('style');
for (let i = 0; i < candidates.length; i++) {
const candidate = candidates[i];
if (shouldAddDocumentStyle(candidate)) {
CustomStyleInterface.addCustomStyle(candidate);
}
}
});
</script>
</body>

</html>
50 changes: 20 additions & 30 deletions demo/element/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>API Console element demo</title>
<script src="../../node_modules/cryptojslib/components/core.js"></script>
<script src="../../node_modules/cryptojslib/rollups/sha1.js"></script>
<script src="../../node_modules/cryptojslib/components/enc-base64-min.js"></script>
<script src="../../node_modules/cryptojslib/rollups/md5.js"></script>
<script src="../../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
<script src="../../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
<!--
Previously this was included into the compoennt.
Since compoennts are ES6 modules this libraries cannot be loaded into
the component as they do not export anything and won't set global variable.
-->
<script src="../../node_modules/jsonlint/lib/jsonlint.js"></script>
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
<script src="../../node_modules/codemirror/addon/mode/loadmode.js"></script>
<script src="../../node_modules/codemirror/mode/meta.js"></script>
<script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
<script src="../../node_modules/codemirror/mode/xml/xml.js"></script>
<script src="../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="../../node_modules/codemirror/addon/lint/lint.js"></script>
<script src="../../node_modules/codemirror/addon/lint/json-lint.js"></script>
<!--
From the inside of a web component it is hard to determine where
scripts are actually located. This should be set if the page won't load all possible
scripts at run time. The component will download the "mode" from this location.
-->
<script>
/* global CodeMirror */
CodeMirror.modeURL = '../../node_modules/codemirror/mode/%N/%N.js';
</script>

<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">
<link rel="stylesheet" type="text/css" href="../api-console-master-styles.css">
<style>
Expand Down Expand Up @@ -109,6 +79,26 @@
<body>
<div id="demo"></div>
<script type="module" src="./app.js" async></script>
<script src="../vendor.js"></script>
<script>
document.addEventListener('WebComponentsReady', function() {
if (!window.ShadyCSS) {
return;
}
function shouldAddDocumentStyle(n) {
return n.nodeType === Node.ELEMENT_NODE && n.localName === 'style' && !n.hasAttribute('scope');
}
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;

const candidates = document.querySelectorAll('style');
for (let i = 0; i < candidates.length; i++) {
const candidate = candidates[i];
if (shouldAddDocumentStyle(candidate)) {
CustomStyleInterface.addCustomStyle(candidate);
}
}
});
</script>
</body>

</html>
50 changes: 20 additions & 30 deletions demo/standalone/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>API Console standalone application demo</title>
<script src="../../node_modules/cryptojslib/components/core.js"></script>
<script src="../../node_modules/cryptojslib/rollups/sha1.js"></script>
<script src="../../node_modules/cryptojslib/components/enc-base64-min.js"></script>
<script src="../../node_modules/cryptojslib/rollups/md5.js"></script>
<script src="../../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
<script src="../../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
<!--
Previously this was included into the compoennt.
Since compoennts are ES6 modules this libraries cannot be loaded into
the component as they do not export anything and won't set global variable.
-->
<script src="../../node_modules/jsonlint/lib/jsonlint.js"></script>
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
<script src="../../node_modules/codemirror/addon/mode/loadmode.js"></script>
<script src="../../node_modules/codemirror/mode/meta.js"></script>
<script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
<script src="../../node_modules/codemirror/mode/xml/xml.js"></script>
<script src="../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="../../node_modules/codemirror/addon/lint/lint.js"></script>
<script src="../../node_modules/codemirror/addon/lint/json-lint.js"></script>
<!--
From the inside of a web component it is hard to determine where
scripts are actually located. This should be set if the page won't load all possible
scripts at run time. The component will download the "mode" from this location.
-->
<script>
/* global CodeMirror */
CodeMirror.modeURL = '../../node_modules/codemirror/mode/%N/%N.js';
</script>

<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">
<link rel="stylesheet" type="text/css" href="../api-console-master-styles.css">
<style>
Expand Down Expand Up @@ -65,6 +35,26 @@
<body>
<div id="demo"></div>
<script type="module" src="./app.js" async></script>
<script src="../vendor.js"></script>
<script>
document.addEventListener('WebComponentsReady', function() {
if (!window.ShadyCSS) {
return;
}
function shouldAddDocumentStyle(n) {
return n.nodeType === Node.ELEMENT_NODE && n.localName === 'style' && !n.hasAttribute('scope');
}
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;

const candidates = document.querySelectorAll('style');
for (let i = 0; i < candidates.length; i++) {
const candidate = candidates[i];
if (shouldAddDocumentStyle(candidate)) {
CustomStyleInterface.addCustomStyle(candidate);
}
}
});
</script>
</body>

</html>
49 changes: 20 additions & 29 deletions demo/themed/anypoint.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,35 +6,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Themed API Console demo</title>
<script src="../../node_modules/cryptojslib/components/core.js"></script>
<script src="../../node_modules/cryptojslib/rollups/sha1.js"></script>
<script src="../../node_modules/cryptojslib/components/enc-base64-min.js"></script>
<script src="../../node_modules/cryptojslib/rollups/md5.js"></script>
<script src="../../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
<script src="../../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
<!--
Previously this was included into the compoennt.
Since compoennts are ES6 modules this libraries cannot be loaded into
the component as they do not export anything and won't set global variable.
-->
<script src="../../node_modules/jsonlint/lib/jsonlint.js"></script>
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
<script src="../../node_modules/codemirror/addon/mode/loadmode.js"></script>
<script src="../../node_modules/codemirror/mode/meta.js"></script>
<script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
<script src="../../node_modules/codemirror/mode/xml/xml.js"></script>
<script src="../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="../../node_modules/codemirror/addon/lint/lint.js"></script>
<script src="../../node_modules/codemirror/addon/lint/json-lint.js"></script>
<!--
From the inside of a web component it is hard to determine where
scripts are actually located. This should be set if the page won't load all possible
scripts at run time. The component will download the "mode" from this location.
-->
<script>
/* global CodeMirror */
CodeMirror.modeURL = '../../node_modules/codemirror/mode/%N/%N.js';
</script>
<link rel="stylesheet" type="text/css" href="./anypoint-theme.css">
<style>
html, body {
Expand Down Expand Up @@ -62,6 +33,26 @@
<body>
<div id="demo"></div>
<script type="module" src="./anypoint.js" async></script>
<script src="../vendor.js"></script>
<script>
document.addEventListener('WebComponentsReady', function() {
if (!window.ShadyCSS) {
return;
}
function shouldAddDocumentStyle(n) {
return n.nodeType === Node.ELEMENT_NODE && n.localName === 'style' && !n.hasAttribute('scope');
}
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;

const candidates = document.querySelectorAll('style');
for (let i = 0; i < candidates.length; i++) {
const candidate = candidates[i];
if (shouldAddDocumentStyle(candidate)) {
CustomStyleInterface.addCustomStyle(candidate);
}
}
});
</script>
</body>

</html>
50 changes: 21 additions & 29 deletions demo/themed/dark.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,35 +6,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Themed API Console demo</title>
<script src="../../node_modules/cryptojslib/components/core.js"></script>
<script src="../../node_modules/cryptojslib/rollups/sha1.js"></script>
<script src="../../node_modules/cryptojslib/components/enc-base64-min.js"></script>
<script src="../../node_modules/cryptojslib/rollups/md5.js"></script>
<script src="../../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
<script src="../../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
<!--
Previously this was included into the compoennt.
Since compoennts are ES6 modules this libraries cannot be loaded into
the component as they do not export anything and won't set global variable.
-->
<script src="../../node_modules/jsonlint/lib/jsonlint.js"></script>
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
<script src="../../node_modules/codemirror/addon/mode/loadmode.js"></script>
<script src="../../node_modules/codemirror/mode/meta.js"></script>
<script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
<script src="../../node_modules/codemirror/mode/xml/xml.js"></script>
<script src="../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="../../node_modules/codemirror/addon/lint/lint.js"></script>
<script src="../../node_modules/codemirror/addon/lint/json-lint.js"></script>
<!--
From the inside of a web component it is hard to determine where
scripts are actually located. This should be set if the page won't load all possible
scripts at run time. The component will download the "mode" from this location.
-->
<script>
/* global CodeMirror */
CodeMirror.modeURL = '../../node_modules/codemirror/mode/%N/%N.js';
</script>
<link rel="stylesheet" type="text/css" href="./dark-theme.css">
<style>
.icon {
Expand All @@ -49,6 +20,27 @@
<body>
<div id="demo"></div>
<script type="module" src="./dark.js" async></script>

<script src="../vendor.js"></script>
<script>
document.addEventListener('WebComponentsReady', function() {
if (!window.ShadyCSS) {
return;
}
function shouldAddDocumentStyle(n) {
return n.nodeType === Node.ELEMENT_NODE && n.localName === 'style' && !n.hasAttribute('scope');
}
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;

const candidates = document.querySelectorAll('style');
for (let i = 0; i < candidates.length; i++) {
const candidate = candidates[i];
if (shouldAddDocumentStyle(candidate)) {
CustomStyleInterface.addCustomStyle(candidate);
}
}
});
</script>
</body>

</html>
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
"rollup-plugin-uglify": "^6.0.3",
"sinon": "^7.4.2",
"tmp": "0.1.0",
"uglify-js": "^3.7.0",
"unzipper": "^0.10.4",
"uuid": "^3.3.3",
"web-animations-js": "^2.3.2"
Expand All @@ -92,7 +93,7 @@
"start": "node demo/index.js",
"start:old": "es-dev-server --app-index demo/index.html --node-resolve --open --watch",
"start:server": "node --inspect demo/parsing-server/main.js",
"start:compatibility": "es-dev-server --app-index demo/index.html --compatibility auto --node-resolve --open --watch",
"start:compatibility": "es-dev-server --app-index demo/index.html --compatibility auto --node-resolve --open --watch --babel-exclude **/vendor.js",
"lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
"format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
"lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
Expand All @@ -106,7 +107,8 @@
"test:compatibility": "karma start --compatibility auto --coverage",
"test:compatibility:watch": "karma start --compatibility auto --auto-watch=true --single-run=false",
"test:sl": "karma start karma.sl.config.js --compatibility auto --coverage",
"build": "rimraf dist && rollup -c rollup.config.js"
"build": "rimraf dist && rollup -c rollup.config.js",
"prepare": "node tasks/prepare.js"
},
"lint-staged": {
"*.js": [
Expand Down
Loading

0 comments on commit c711def

Please sign in to comment.