exploRUG component setup
This commit is contained in:
@@ -1 +0,0 @@
|
||||
This directory contains HTML files containing your element for development. By running `npm run build:watch` and `npm run serve` you can edit and see changes without bundling.
|
||||
@@ -1,22 +0,0 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title><my-element> Demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
|
||||
<script src="../node_modules/lit/polyfill-support.js"></script>
|
||||
<script type="module" src="../my-element.js"></script>
|
||||
<style>
|
||||
p {
|
||||
border: solid 1px blue;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<my-element>
|
||||
<p>This is child content</p>
|
||||
</my-element>
|
||||
</body>
|
||||
</html>
|
||||
4
dist/RoomView.js
vendored
Normal file
4
dist/RoomView.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/exploRUG.js
vendored
Normal file
1
dist/exploRUG.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
import"./RoomView.js";function r(r,n){return r-=155,t()[r]}function t(){var r=["2870ZHvrap","1259754CDQmAM","16874689bFeruv","1763222VHwEvO","1543071ZyiAtR","43176MNADsO","4yWCcJm","1610995LezBuI","14300pUwiuo","42BYsgGi","1044hSSGWA","36eFtynG","3uUxJSy"];return(t=function(){return r})()}!function(){for(var n=r,e=t();;)try{if(784874===-parseInt(n(156))/1+-parseInt(n(155))/2*(parseInt(n(164))/3)+-parseInt(n(158))/4*(-parseInt(n(159))/5)+-parseInt(n(166))/6*(parseInt(n(161))/7)+-parseInt(n(157))/8*(-parseInt(n(162))/9)+parseInt(n(165))/10*(-parseInt(n(160))/11)+-parseInt(n(163))/12*(-parseInt(n(167))/13))break;e.push(e.shift())}catch(s){e.push(e.shift())}}();
|
||||
11
index.html
11
index.html
@@ -1,11 +0,0 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Lit Starter Kit</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="/dev/index.html">Component Demo</a>
|
||||
</body>
|
||||
</html>
|
||||
41
package.json
41
package.json
@@ -1,15 +1,19 @@
|
||||
{
|
||||
"name": "@lit/lit-starter-ts",
|
||||
"private": true,
|
||||
"name": "exploRUG",
|
||||
"version": "2.0.3",
|
||||
"description": "A simple web component",
|
||||
"main": "my-element.js",
|
||||
"module": "my-element.js",
|
||||
"main": "dist/exploRUG.js",
|
||||
"module": "dist/exploRUG.js",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./dist/exploRUG.js",
|
||||
"./react": "./dist/exploRUG.js"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"build:watch": "tsc --watch",
|
||||
"clean": "rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}",
|
||||
"build": "vite build",
|
||||
"build:watch": "vite build --watch",
|
||||
"dev": "vite",
|
||||
"clean": "rimraf dist",
|
||||
"lint": "npm run lint:lit-analyzer && npm run lint:eslint",
|
||||
"lint:eslint": "eslint 'src/**/*.ts'",
|
||||
"lint:lit-analyzer": "lit-analyzer",
|
||||
@@ -23,14 +27,11 @@
|
||||
"docs:serve": "wds --root-dir=docs --node-resolve --watch",
|
||||
"analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
|
||||
"analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
|
||||
"serve": "wds --watch",
|
||||
"serve:prod": "MODE=prod npm run serve",
|
||||
"test": "npm run test:dev && npm run test:prod",
|
||||
"test": "tsc && npm run test:dev && npm run test:prod",
|
||||
"test:dev": "wtr",
|
||||
"test:watch": "wtr --watch",
|
||||
"test:prod": "MODE=prod wtr",
|
||||
"test:prod:watch": "MODE=prod wtr --watch",
|
||||
"checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
|
||||
"test:prod:watch": "MODE=prod wtr --watch"
|
||||
},
|
||||
"keywords": [
|
||||
"web-components",
|
||||
@@ -40,17 +41,26 @@
|
||||
],
|
||||
"author": "Google LLC",
|
||||
"license": "BSD-3-Clause",
|
||||
"peerDependencies": {
|
||||
"@lit/react": "^1.0.0",
|
||||
"lit": "^3.0.0",
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"lit": "^3.2.0"
|
||||
"javascript-obfuscator": "^5.4.1",
|
||||
"lit": "^3.2.0",
|
||||
"rollup-plugin-obfuscator": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^1.0.1",
|
||||
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
|
||||
"@custom-elements-manifest/analyzer": "^0.6.3",
|
||||
"@lit/react": "^1.0.0",
|
||||
"@open-wc/testing": "^4.0.0",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@rollup/plugin-replace": "^5.0.7",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"@types/react": "^18.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.25.0",
|
||||
"@typescript-eslint/parser": "^5.25.0",
|
||||
"@web/dev-server": "^0.1.31",
|
||||
@@ -61,10 +71,13 @@
|
||||
"eslint": "^8.15.0",
|
||||
"lit-analyzer": "^1.2.1",
|
||||
"prettier": "^2.6.2",
|
||||
"react": "^18.0.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^4.18.0",
|
||||
"rollup-plugin-summary": "^2.0.1",
|
||||
"typescript": "~5.9.0"
|
||||
"typescript": "~5.9.0",
|
||||
"vite": "^5.0.0",
|
||||
"vite-plugin-dts": "^3.0.0"
|
||||
},
|
||||
"customElements": "custom-elements.json"
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ import resolve from '@rollup/plugin-node-resolve';
|
||||
import replace from '@rollup/plugin-replace';
|
||||
|
||||
export default {
|
||||
input: 'my-element.js',
|
||||
input: './Imports/exploRUG.js',
|
||||
output: {
|
||||
file: 'my-element.bundled.js',
|
||||
format: 'esm',
|
||||
|
||||
20
src/Components/RoomView/index.ts
Normal file
20
src/Components/RoomView/index.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import {LitElement, html, css} from 'lit';
|
||||
import {customElement, property} from 'lit/decorators.js';
|
||||
|
||||
@customElement('room-view')
|
||||
export class RoomView extends LitElement {
|
||||
static override styles = css`
|
||||
:host {
|
||||
}
|
||||
`;
|
||||
|
||||
override render() {
|
||||
return html`<h2>RoomView</h2>`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'room-view': RoomView;
|
||||
}
|
||||
}
|
||||
8
src/Components/RoomView/roomView-react.ts
Normal file
8
src/Components/RoomView/roomView-react.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import {createComponent} from '@lit/react';
|
||||
import {RoomView} from './index';
|
||||
export const RoomViewReact = createComponent({
|
||||
tagName: 'room-view',
|
||||
elementClass: RoomView,
|
||||
react: React,
|
||||
});
|
||||
2
src/Imports/exploRUG.ts
Normal file
2
src/Imports/exploRUG.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
import '../Components/RoomView';
|
||||
import '../Components/RoomView/roomView-react.ts';
|
||||
12
src/index.html
Normal file
12
src/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>exploRUG Components</title>
|
||||
<script type="module" src="Imports/exploRUG.ts"></script>
|
||||
</head>
|
||||
<body>
|
||||
<room-view></room-view>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,68 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2019 Google LLC
|
||||
* SPDX-License-Identifier: BSD-3-Clause
|
||||
*/
|
||||
|
||||
import {LitElement, html, css} from 'lit';
|
||||
import {customElement, property} from 'lit/decorators.js';
|
||||
|
||||
/**
|
||||
* An example element.
|
||||
*
|
||||
* @fires count-changed - Indicates when the count changes
|
||||
* @slot - This element has a slot
|
||||
* @csspart button - The button
|
||||
*/
|
||||
@customElement('my-element')
|
||||
export class MyElement extends LitElement {
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
border: solid 1px gray;
|
||||
padding: 16px;
|
||||
max-width: 800px;
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* The name to say "Hello" to.
|
||||
*/
|
||||
@property()
|
||||
name = 'World';
|
||||
|
||||
/**
|
||||
* The number of times the button has been clicked.
|
||||
*/
|
||||
@property({type: Number})
|
||||
count = 0;
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<h1>${this.sayHello(this.name)}!</h1>
|
||||
<button @click=${this._onClick} part="button">
|
||||
Click Count: ${this.count}
|
||||
</button>
|
||||
<slot></slot>
|
||||
`;
|
||||
}
|
||||
|
||||
private _onClick() {
|
||||
this.count++;
|
||||
this.dispatchEvent(new CustomEvent('count-changed'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats a greeting
|
||||
* @param name The name to say "Hello" to
|
||||
*/
|
||||
sayHello(name: string): string {
|
||||
return `Hello, ${name}`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'my-element': MyElement;
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2021 Google LLC
|
||||
* SPDX-License-Identifier: BSD-3-Clause
|
||||
*/
|
||||
|
||||
import {MyElement} from '../my-element.js';
|
||||
|
||||
import {fixture, assert} from '@open-wc/testing';
|
||||
import {html} from 'lit/static-html.js';
|
||||
|
||||
suite('my-element', () => {
|
||||
test('is defined', () => {
|
||||
const el = document.createElement('my-element');
|
||||
assert.instanceOf(el, MyElement);
|
||||
});
|
||||
|
||||
test('renders with default values', async () => {
|
||||
const el = await fixture(html`<my-element></my-element>`);
|
||||
assert.shadowDom.equal(
|
||||
el,
|
||||
`
|
||||
<h1>Hello, World!</h1>
|
||||
<button part="button">Click Count: 0</button>
|
||||
<slot></slot>
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
test('renders with a set name', async () => {
|
||||
const el = await fixture(html`<my-element name="Test"></my-element>`);
|
||||
assert.shadowDom.equal(
|
||||
el,
|
||||
`
|
||||
<h1>Hello, Test!</h1>
|
||||
<button part="button">Click Count: 0</button>
|
||||
<slot></slot>
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
test('handles a click', async () => {
|
||||
const el = (await fixture(html`<my-element></my-element>`)) as MyElement;
|
||||
const button = el.shadowRoot!.querySelector('button')!;
|
||||
button.click();
|
||||
await el.updateComplete;
|
||||
assert.shadowDom.equal(
|
||||
el,
|
||||
`
|
||||
<h1>Hello, World!</h1>
|
||||
<button part="button">Click Count: 1</button>
|
||||
<slot></slot>
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
test('styling applied', async () => {
|
||||
const el = (await fixture(html`<my-element></my-element>`)) as MyElement;
|
||||
await el.updateComplete;
|
||||
assert.equal(getComputedStyle(el).paddingTop, '16px');
|
||||
});
|
||||
});
|
||||
48
vite.config.ts
Normal file
48
vite.config.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import {defineConfig} from 'vite';
|
||||
|
||||
import obfuscatorPlugin from 'rollup-plugin-obfuscator';
|
||||
|
||||
export default defineConfig({
|
||||
root: './src', // Set the root to the src directory
|
||||
build: {
|
||||
rollupOptions: {
|
||||
plugins: [
|
||||
// Obfuscate code (applied after minification)
|
||||
obfuscatorPlugin({
|
||||
options: {
|
||||
compact: true,
|
||||
controlFlowFlattening: true,
|
||||
stringArray: true,
|
||||
stringArrayThreshold: 0.75,
|
||||
},
|
||||
}),
|
||||
],
|
||||
input: './src/Imports/exploRUG.ts',
|
||||
output: {
|
||||
entryFileNames: '[name].js', // Removes hash from entry files
|
||||
chunkFileNames: '[name].js', // Removes hash from chunk files
|
||||
assetFileNames: 'assets/[name][extname]', // Removes hash from assets
|
||||
manualChunks(id) {
|
||||
if (id.includes('/Components/RoomView')) {
|
||||
return 'RoomView';
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
},
|
||||
},
|
||||
minify: 'terser',
|
||||
terserOptions: {
|
||||
format: {
|
||||
comments: false,
|
||||
},
|
||||
},
|
||||
outDir: '../dist', // Specify the output directory
|
||||
emptyOutDir: true, // Ensure the output directory is cleared on each build
|
||||
sourcemap: false, // <-- Add this line
|
||||
},
|
||||
server: {
|
||||
host: true,
|
||||
port: 5173,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user