elex/js-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2023-02-26 01:30

Browse Source
This commit is contained in:
Elex
2023-02-26 01:30:37 +09:00
commit 9a13ccbd17
122 changed files with 32148 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
getting-lit-element/.eslintrc.json Normal file
View File

@@ -0,0 +1,26 @@
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true,
"shared-node-browser": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2015,
"sourceType": "module"
},
"plugins": [
"@typescript-eslint"
],
"rules": {}
}

1
getting-lit-element/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules

20
getting-lit-element/dist/bundle.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

29
getting-lit-element/index.html Normal file
View File

@@ -0,0 +1,29 @@
<html>
<head>
<script type="module" src="./dist/bundle.js"></script>
<style>
html,
body {
margin: 0;
border: 0;
padding: 0;
}
html * {
box-sizing: content-box;
--theme-color: red;
}
span {
font-weight: bold;
}
</style>
</head>
<body>
<elex-toolbar title="Toolbar"></elex-toolbar>
<elex-component><span>Charlie</span></elex-component>
</body>
</html>

54
getting-lit-element/main.js Normal file
View File

@@ -0,0 +1,54 @@
const { app, BrowserWindow, Menu } = require('electron');
function createWindow() {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
createMenu();
win.loadFile('index.html');
win.webContents.openDevTools();
}
function createMenu() {
const menu = [
{
label: 'File',
submenu: [
{ label: 'Exit', role: 'quit' }
]
},
{
label: 'Edit',
submenu: [
{ label: 'Copy', role: 'copy' },
{ label: 'Cut', role: 'cut' },
{ label: 'Paste', role: 'paste' },
{ type: 'separator' },
{ label: 'Undo', role: 'undo' },
{ label: 'Redo', role: 'redo' },
]
}
];
Menu.setApplicationMenu(Menu.buildFromTemplate(menu));
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});

36
getting-lit-element/package.json Normal file
View File

@@ -0,0 +1,36 @@
{
"name": "getting-lit-element",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/preset-env": "^7.9.5",
"@babel/preset-typescript": "^7.9.0",
"@typescript-eslint/eslint-plugin": "^2.29.0",
"@typescript-eslint/parser": "^2.29.0",
"babel-loader": "^8.1.0",
"electron": "^8.2.3",
"eslint": "^6.8.0",
"extract-loader": "^5.0.1",
"file-loader": "^6.0.0",
"html-loader": "^1.1.0",
"ts-loader": "^7.0.1",
"typescript": "^3.8.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"lit-element": "^2.3.1"
}
}

17
getting-lit-element/src/MyComponent.ts Normal file
View File

@@ -0,0 +1,17 @@
import { LitElement, html, css} from 'lit-element';
export class MyComponent extends LitElement {
static get styles() {
return css`
::slotted(*) {color:red;}
p {color:blue;}
`;
}
render() {
return html`
<p>Hello, <slot></slot></p>
`;
}
}
customElements.define('elex-component', MyComponent);

26
getting-lit-element/src/Toolbar.ts Normal file
View File

@@ -0,0 +1,26 @@
import { LitElement, html, css } from 'lit-element';
export class Toolbar extends LitElement {
static get properties() {
return {
title: { type: String }
};
}
static get styles() {
return css`
header {
width: 100%; height: 64px;
background-color: var(--theme-color, yellow);
}
h1 {font-size: 1.5rem;}
`;
}
render() {
return html`
<header><h1>${this.title}</h1></header>
`;
}
}
customElements.define('elex-toolbar', Toolbar);

6
getting-lit-element/src/index.ts Normal file
View File

@@ -0,0 +1,6 @@
const MyComponent = require('./MyComponent.ts');
const Toolbar = require('./Toolbar.ts');
module.exports = {
MyComponent, Toolbar
};

13
getting-lit-element/tsconfig.json Normal file
View File

@@ -0,0 +1,13 @@
{
"compilerOptions": {
"sourceMap": true,
"target": "es2017",
"module": "es2015",
"moduleResolution": "node",
"lib": [
"es2017",
"dom"
],
"experimentalDecorators": true
}
}

35
getting-lit-element/webpack.config.js Normal file
View File

@@ -0,0 +1,35 @@
const path = require('path');
module.exports = {
entry: {
main: './src/index.ts',
},
output: {
filename: 'bundle.js',
//path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.ts$/,
include: '/src',
exclude: '/node_modules/',
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-typescript'],
plugins: ['@babel/plugin-proposal-decorators']
}
}
}, {
test: /\.html$/, include: '/src',
use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader']
}
]
},
mode: 'development',
watch: true,
optimization: {
minimize: true,
concatenateModules: true
},
}