Skip to content

Instantly share code, notes, and snippets.

@na0x2c6
Last active April 5, 2020 04:20
Show Gist options
  • Save na0x2c6/1a185697fa671296d455a488f77197f2 to your computer and use it in GitHub Desktop.
Save na0x2c6/1a185697fa671296d455a488f77197f2 to your computer and use it in GitHub Desktop.
The set for building an app using LitElement, considering IE.
<script type="text/javascript">
// Write me in the head tag.
// For this sample, you need to put `@webcomponents/webcomponentsjs/` dirctory from the node_modules into `your-doc-root/js/` dirctory.
(function() {
if (('customElements' in window)) {
document.write('<script defer type="text/javascript" src="/js/main.js"><\/script>');
} else {
document.write('<script defer type="text/javascript" src="/js/@webcomponents/webcomponentsjs/webcomponents-loader.js"><\/script>');
window.WebComponents = window.WebComponents || {};
window.WebComponents.root = '/js/@webcomponents/webcomponentsjs/';
window.addEventListener('WebComponentsReady', function() {
window.WebComponents.waitFor(function() {
var adaptor = document.createElement('script');
adaptor.src = '/js/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
adaptor.defer = true;
document.head.appendChild(adaptor);
var s = document.createElement('script');
s.src = '/js/main-ie.js';
s.defer = true;
document.head.insertBefore(s, adaptor.nextSibling);
});
});
}
})();
</script>
{
"name": "sample-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=development",
"watch": "webpack --watch --mode=development",
"package": "webpack --mode=production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@typescript-eslint/parser": "^2.10.0",
"@webcomponents/webcomponentsjs": "^2.4.1",
"core-js": "^3.4.7",
"eslint": "^6.7.2",
"install": "^0.13.0",
"lit-element": "^2.2.1",
"npm": "^6.14.2",
"ts-loader": "^6.2.1",
"tslint": "^5.20.1",
"typescript": "^3.7.3",
"webpack": "^4.41.1",
"webpack-cli": "^3.3.9",
"whatwg-fetch": "^3.0.0"
},
"dependencies": {
"@webcomponents/template": "^1.4.1"
}
}
{
"compilerOptions": {
"sourceMap": true,
"target": "es2017",
"module": "es2015",
"lib": [
"dom",
"es2015",
"es2017",
"es5",
"es6"
],
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"allowJs": true,
"experimentalDecorators": true,
"typeRoots": ["node_modules/@types", "types"]
}
}
{
"compilerOptions": {
"sourceMap": true,
"target": "es2017",
"module": "es2015",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"allowJs": true,
"experimentalDecorators": true,
"typeRoots": ["node_modules/@types", "types"]
}
}
const path = require('path');
module.exports = [
{
entry: [
path.join(__dirname, 'src', 'index.ts'),
],
output: {
filename: 'main-ie.js',
path: path.join(__dirname, 'dist'),
},
resolve: {
extensions: ['.ts'],
},
module: {
rules: [
{
test: /\.(js|ts)$/,
exclude: /node_modules\/(?!(lit-html|lit-element))\//,
use: [
{
loader: 'ts-loader',
options: {
configFile: 'tsconfig.ie.json'
}
},
]
},
],
},
},
{
entry: [
path.join(__dirname, 'src', 'index.ts'),
],
output: {
filename: 'main.js',
path: path.join(__dirname, 'dist'),
},
resolve: {
extensions: ['.ts'],
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
configFile: 'tsconfig.json'
}
},
],
},
},
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment