exploRUG component setup

2026-04-21 14:43:35 +05:45
parent 6bf882733a
commit 987aa51d8d
15 changed files with 8096 additions and 179 deletions
--- 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');
-  });
-});