dikshya/exploRUGComponent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

exploRUG component setup

Browse Source
This commit is contained in:
dikshya
2026-04-21 14:43:35 +05:45
parent 6bf882733a
commit 987aa51d8d
15 changed files with 8096 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dev/README.md
View File

@@ -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.

22
dev/index.html
View File

@@ -1,22 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>&lt;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
View File

File diff suppressed because one or more lines are too long

1
dist/exploRUG.js vendored Normal file
View 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
View File

@@ -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
View File

@@ -1,15 +1,19 @@
{ {
"name": "@lit/lit-starter-ts", "name": "exploRUG",
"private": true,
"version": "2.0.3", "version": "2.0.3",
"description": "A simple web component", "description": "A simple web component",
"main": "my-element.js", "main": "dist/exploRUG.js",
"module": "my-element.js", "module": "dist/exploRUG.js",
"type": "module", "type": "module",
"exports": {
".": "./dist/exploRUG.js",
"./react": "./dist/exploRUG.js"
},
"scripts": { "scripts": {
"build": "tsc", "build": "vite build",
"build:watch": "tsc --watch", "build:watch": "vite build --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}", "dev": "vite",
"clean": "rimraf dist",
"lint": "npm run lint:lit-analyzer && npm run lint:eslint", "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
"lint:eslint": "eslint 'src/**/*.ts'", "lint:eslint": "eslint 'src/**/*.ts'",
"lint:lit-analyzer": "lit-analyzer", "lint:lit-analyzer": "lit-analyzer",
@@ -23,14 +27,11 @@
"docs:serve": "wds --root-dir=docs --node-resolve --watch", "docs:serve": "wds --root-dir=docs --node-resolve --watch",
"analyze": "cem analyze --litelement --globs \"src/**/*.ts\"", "analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
"analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch", "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
"serve": "wds --watch", "test": "tsc && npm run test:dev && npm run test:prod",
"serve:prod": "MODE=prod npm run serve",
"test": "npm run test:dev && npm run test:prod",
"test:dev": "wtr", "test:dev": "wtr",
"test:watch": "wtr --watch", "test:watch": "wtr --watch",
"test:prod": "MODE=prod wtr", "test:prod": "MODE=prod wtr",
"test:prod:watch": "MODE=prod wtr --watch", "test:prod:watch": "MODE=prod wtr --watch"
"checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
}, },
"keywords": [ "keywords": [
"web-components", "web-components",
@@ -40,17 +41,26 @@
], ],
"author": "Google LLC", "author": "Google LLC",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"peerDependencies": {
"@lit/react": "^1.0.0",
"lit": "^3.0.0",
"react": "^18.0.0"
},
"dependencies": { "dependencies": {
"lit": "^3.2.0" "javascript-obfuscator": "^5.4.1",
"lit": "^3.2.0",
"rollup-plugin-obfuscator": "^1.1.0"
}, },
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^1.0.1", "@11ty/eleventy": "^1.0.1",
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0", "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
"@custom-elements-manifest/analyzer": "^0.6.3", "@custom-elements-manifest/analyzer": "^0.6.3",
"@lit/react": "^1.0.0",
"@open-wc/testing": "^4.0.0", "@open-wc/testing": "^4.0.0",
"@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-replace": "^5.0.7", "@rollup/plugin-replace": "^5.0.7",
"@rollup/plugin-terser": "^0.4.4", "@rollup/plugin-terser": "^0.4.4",
"@types/react": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^5.25.0", "@typescript-eslint/eslint-plugin": "^5.25.0",
"@typescript-eslint/parser": "^5.25.0", "@typescript-eslint/parser": "^5.25.0",
"@web/dev-server": "^0.1.31", "@web/dev-server": "^0.1.31",
@@ -61,10 +71,13 @@
"eslint": "^8.15.0", "eslint": "^8.15.0",
"lit-analyzer": "^1.2.1", "lit-analyzer": "^1.2.1",
"prettier": "^2.6.2", "prettier": "^2.6.2",
"react": "^18.0.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^4.18.0", "rollup": "^4.18.0",
"rollup-plugin-summary": "^2.0.1", "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" "customElements": "custom-elements.json"
} }

2
rollup.config.js
View File

@@ -10,7 +10,7 @@ import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace'; import replace from '@rollup/plugin-replace';
export default { export default {
input: 'my-element.js', input: './Imports/exploRUG.js',
output: { output: {
file: 'my-element.bundled.js', file: 'my-element.bundled.js',
format: 'esm', format: 'esm',

20
src/Components/RoomView/index.ts Normal file
View 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
View 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
View File

@@ -0,0 +1,2 @@
import '../Components/RoomView';
import '../Components/RoomView/roomView-react.ts';

12
src/index.html Normal file
View 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>

68
src/my-element.ts
View File

@@ -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;
}
}

62
src/test/my-element_test.ts
View File

@@ -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
View 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,
},
});

7973
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff