exploRUG component setup

Import upstream changes (0fc671bc390cac3b9900fc3616347eeeecd91d5a)
Import upstream changes (ad23f26ae908a160d30ed2a939b322fe9cc2ee83)
2026-04-21 14:43:35 +05:45 · 2025-12-23 21:58:36 +00:00 · 2025-08-03 00:26:59 +00:00 · 2024-08-05 19:54:18 +00:00 · 2024-07-03 02:22:36 +00:00 · 2024-06-27 22:24:28 +00:00
17 changed files with 8125 additions and 191 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,22 @@
 # @lit/lit-starter-ts

+## 2.0.3
+
+### Patch Changes
+
+- [#4984](https://github.com/lit/lit/pull/4984) [`ad23f26ae908a160d30ed2a939b322fe9cc2ee83`](https://github.com/lit/lit/commit/ad23f26ae908a160d30ed2a939b322fe9cc2ee83) Thanks [@kyubisation](https://github.com/kyubisation)! - Update TypeScript dependencies to version 5.8 with related ARIAMixin changes (ariaColIndexText, ariaRelevant and ariaRowIndexText)
+
+## 2.0.2
+
+### Patch Changes
+
+- [#4682](https://github.com/lit/lit/pull/4682) [`290a608a`](https://github.com/lit/lit/commit/290a608aa2297e8b99a5424dc90632b97c66386c) - Update typescript to 5.5.0
+
+- [#4681](https://github.com/lit/lit/pull/4681) [`5463b104`](https://github.com/lit/lit/commit/5463b1046e0589c9ce7041e67cd539ddfba2e5a7) - Update Rollup and Terser dependencies
+
+- Updated dependencies [[`feccc1ba`](https://github.com/lit/lit/commit/feccc1ba8e82b36d07a0e2576381bf2819926b98)]:
+  - lit@3.2.0
+
 ## 2.0.1

 ### Patch Changes
--- a/README.md
+++ b/README.md
@@ -115,9 +115,9 @@ Prettier has not been configured to run when committing files, but this can be a

 ## Static Site

-This project includes a simple website generated with the [eleventy](https://11ty.dev) static site generator and the templates and pages in `/docs-src`. The site is generated to `/docs` and intended to be checked in so that GitHub pages can serve the site [from `/docs` on the master branch](https://help.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site).
+This project includes a simple website generated with the [eleventy](https://11ty.dev) static site generator and the templates and pages in `/docs-src`. The site is generated to `/docs` and intended to be checked in so that GitHub pages can serve the site [from `/docs` on the main branch](https://help.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site).

-To enable the site go to the GitHub settings and change the GitHub Pages &quot;Source&quot; setting to &quot;master branch /docs folder&quot;.</p>
+To enable the site go to the GitHub settings and change the GitHub Pages &quot;Source&quot; setting to &quot;main branch /docs folder&quot;.</p>

 To build the site, run:

@@ -134,7 +134,7 @@ npm run docs:serve
 To watch the site files, and re-build automatically, run:

 ```bash
-npm run docs:watch
+npm run docs:gen:watch
 ```

 The site will usually be served at http://localhost:8000.
--- a/dev/README.md
+++ b/dev/README.md
@@ -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.
--- a/dev/index.html
+++ b/dev/index.html
@@ -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>
--- a/dist/RoomView.js
+++ b/dist/RoomView.js
--- a/dist/exploRUG.js
+++ b/dist/exploRUG.js
@@ -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())}}();
--- a/index.html
+++ b/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>
--- a/package.json
+++ b/package.json
@@ -1,15 +1,19 @@
 {
-  "name": "@lit/lit-starter-ts",
-  "private": true,
-  "version": "2.0.1",
+  "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,16 +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.0.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",
-    "@open-wc/testing": "^3.1.5",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^5.0.2",
+    "@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",
@@ -60,11 +71,13 @@
    "eslint": "^8.15.0",
    "lit-analyzer": "^1.2.1",
    "prettier": "^2.6.2",
+    "react": "^18.0.0",
    "rimraf": "^3.0.2",
-    "rollup": "^2.73.0",
-    "rollup-plugin-summary": "^1.4.3",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "~5.2.0"
+    "rollup": "^4.18.0",
+    "rollup-plugin-summary": "^2.0.1",
+    "typescript": "~5.9.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0"
  },
  "customElements": "custom-elements.json"
 }
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -5,12 +5,12 @@
 */

 import summary from 'rollup-plugin-summary';
-import {terser} from 'rollup-plugin-terser';
+import terser from '@rollup/plugin-terser';
 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',
@@ -21,7 +21,7 @@ export default {
    }
  },
  plugins: [
-    replace({'Reflect.decorate': 'undefined'}),
+    replace({preventAssignment: false, 'Reflect.decorate': 'undefined'}),
    resolve(),
    /**
     * This minification setup serves the static site generation.
--- a/src/Components/RoomView/index.ts
+++ b/src/Components/RoomView/index.ts
@@ -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;
+  }
+}
--- a/src/Components/RoomView/roomView-react.ts
+++ b/src/Components/RoomView/roomView-react.ts
@@ -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,
+});
--- a/src/Imports/exploRUG.ts
+++ b/src/Imports/exploRUG.ts
@@ -0,0 +1,2 @@
+import '../Components/RoomView';
+import '../Components/RoomView/roomView-react.ts';
--- a/src/index.html
+++ b/src/index.html
@@ -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>
--- a/src/my-element.ts
+++ b/src/my-element.ts
@@ -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;
-  }
-}
--- a/src/test/my-element_test.ts
+++ b/src/test/my-element_test.ts
@@ -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');
-  });
-});
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -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,
+  },
+});
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
dikshya	987aa51d8d	exploRUG component setup	2026-04-21 14:43:35 +05:45
Lit Robot	6bf882733a	Import upstream changes (0fc671bc390cac3b9900fc3616347eeeecd91d5a)	2025-12-23 21:58:36 +00:00
Lit Robot	5497b0d7d4	Import upstream changes (ad23f26ae908a160d30ed2a939b322fe9cc2ee83)	2025-08-03 00:26:59 +00:00
Lit Robot	6abfcfa55e	Import upstream changes (d0ecfd7c3c7395a72a2938b5aba0867ab3e44282)	2024-08-05 19:54:18 +00:00
Lit Robot	3477324ec1	Import upstream changes (feccc1ba8e82b36d07a0e2576381bf2819926b98)	2024-07-03 02:22:36 +00:00
Lit Robot	8a7b703c73	Import upstream changes (bbc1760b05fedc744c1c86cb836f0b9c0550e428)	2024-06-27 22:24:28 +00:00
Lit Robot	976de81d68	Import upstream changes (497422780bb061bae3585579dcf842c2b411e5fb)	2024-06-24 22:37:52 +00:00
Lit Robot	02dc7de70d	Import upstream changes (3d5f473ef4e9db0b928dcfbb9d06a1fd05851643)	2024-05-31 03:21:17 +00:00
Lit Robot	3383286430	Import upstream changes (1b00c07a58707f45ad066809cd79f878fc3590d2)	2024-02-22 23:58:41 +00:00
Lit Robot	5a50eaf9f0	Import upstream changes (89c5bdfbc9bc9177f25d4d8f35e41e842afa0d63)	2024-01-31 00:35:34 +00:00
				`@@ -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.
				`@@ -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())}}();