initial commit

Author: bcopy

.gitignore

@@ -0,0 +1 @@
+node_modules/

package-lock.json

@@ -0,0 +1,29 @@
+{
+  "name": "home-lit",
+  "version": "1.0.0",
+  "description": "A TypeScript library integrating Homie devices with DOM element attributes for visualization",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "start": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": ["homie", "lit-html", "typescript", "iot"],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "typescript": "^4.5.4",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.2",
+    "ts-loader": "^9.2.6",
+    "html-webpack-plugin": "^5.5.0",
+    "@types/node": "^16.11.12",
+    "@types/aframe": "^1.2.2"
+  },
+  "dependencies": {
+    "aframe": "^1.3.0",
+    "lit": "^2.6.1"
+  }
+}

package.json

@@ -0,0 +1,12 @@
+import { HomieNode } from './HomieNode';
+import { HomieProperty } from './HomieProperty';
+
+export class CoralBranch extends HomieNode {
+  constructor(name: string) {
+    super(name);
+    this.addProperty(new HomieProperty('color', 'pink'));
+    this.addProperty(new HomieProperty('length', 10));
+  }
+
+  // Add coral branch specific methods here
+}

src/CoralBranch.ts

@@ -0,0 +1,12 @@
+import { HomieDevice } from './HomieDevice';
+import { CoralBranch } from './CoralBranch';
+
+export class CoralReef extends HomieDevice {
+  constructor(name: string) {
+    super(name);
+    this.addNode(new CoralBranch('branch1'));
+    this.addNode(new CoralBranch('branch2'));
+  }
+
+  // Add coral reef specific methods here
+}

src/CoralReef.ts

@@ -0,0 +1,19 @@
+import { HomieNode } from './HomieNode';
+
+export class HomieDevice {
+  private nodes: Map<string, HomieNode> = new Map();
+
+  constructor(public name: string) {}
+
+  addNode(node: HomieNode) {
+    this.nodes.set(node.name, node);
+  }
+
+  getNode(name: string): HomieNode | undefined {
+    return this.nodes.get(name);
+  }
+
+  getAllNodes(): HomieNode[] {
+    return Array.from(this.nodes.values());
+  }
+}

src/HomieDevice.ts

@@ -0,0 +1,30 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { HomieDevice } from './HomieDevice';
+import './HomieNodeComponent';
+
+@customElement('homie-device')
+export class HomieDeviceElement extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      padding: 16px;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+  `;
+
+  @property({ type: Object })
+  device!: HomieDevice;
+
+  render() {
+    return html`
+      <div class="homie-device">
+        <h1>${this.device.name}</h1>
+        ${this.device.getAllNodes().map(node => html`
+          <homie-node .node=${node}></homie-node>
+        `)}
+      </div>
+    `;
+  }
+}

src/HomieDeviceElement.ts

@@ -0,0 +1,19 @@
+import { HomieProperty } from './HomieProperty';
+
+export class HomieNode {
+  private properties: Map<string, HomieProperty> = new Map();
+
+  constructor(public name: string) {}
+
+  addProperty(property: HomieProperty) {
+    this.properties.set(property.name, property);
+  }
+
+  getProperty(name: string): HomieProperty | undefined {
+    return this.properties.get(name);
+  }
+
+  getAllProperties(): HomieProperty[] {
+    return Array.from(this.properties.values());
+  }
+}

src/HomieNode.ts

@@ -0,0 +1,43 @@
+import { html, render } from 'lit';
+import { HomieNode } from './HomieNode';
+import { PropertyBindingManager } from './PropertyBindingManager';
+
+export class HomieNodeComponent extends HTMLElement {
+  private node: HomieNode;
+  private bindingManager: PropertyBindingManager;
+
+  constructor(node: HomieNode) {
+    super();
+    this.node = node;
+    this.bindingManager = new PropertyBindingManager();
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    const template = html`
+      <div class="homie-node">
+        <h2>${this.node.name}</h2>
+        ${this.node.getAllProperties().map(prop => html`
+          <div class="property">
+            <span>${prop.name}: </span>
+            <span>${prop.getValue()}</span>
+          </div>
+        `)}
+      </div>
+    `;
+    render(template, this);
+
+    // Bind properties to attributes
+    this.node.getAllProperties().forEach(prop => {
+      const element = this.querySelector(`.property:has(span:contains('${prop.name}'))`);
+      if (element instanceof HTMLElement) {
+        this.bindingManager.bindProperty(prop, element, 'data-value');
+      }
+    });
+  }
+}
+
+customElements.define('homie-node', HomieNodeComponent);

src/HomieNodeComponent.ts

@@ -0,0 +1,12 @@
+export class HomieProperty {
+  constructor(public name: string, public value: any) {}
+
+  setValue(newValue: any) {
+    this.value = newValue;
+    // TODO: Implement update logic and event emission
+  }
+
+  getValue(): any {
+    return this.value;
+  }
+}

src/HomieProperty.ts

@@ -0,0 +1,12 @@
+import { HomieNode } from './HomieNode';
+import { HomieProperty } from './HomieProperty';
+
+export class PlayerAvatar extends HomieNode {
+  constructor(name: string) {
+    super(name);
+    this.addProperty(new HomieProperty('position', { x: 0, y: 0, z: 0 }));
+    this.addProperty(new HomieProperty('rotation', { x: 0, y: 0, z: 0 }));
+  }
+
+  // Add player avatar specific methods here
+}

src/PlayerAvatar.ts

@@ -0,0 +1,17 @@
+import { HomieProperty } from './HomieProperty';
+
+export class PropertyBindingManager {
+  private bindings: Map<string, HTMLElement> = new Map();
+
+  bindProperty(property: HomieProperty, element: HTMLElement, attribute: string) {
+    const key = `${property.name}-${attribute}`;
+    this.bindings.set(key, element);
+    this.updateElement(property, element, attribute);
+
+    // TODO: Implement property change listener
+  }
+
+  private updateElement(property: HomieProperty, element: HTMLElement, attribute: string) {
+    element.setAttribute(attribute, property.getValue().toString());
+  }
+}

src/PropertyBindingManager.ts

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home-Lit Demo</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module">
+        import { CoralReef, HomieDeviceElement } from './index.ts';
+
+        const coralReef = new CoralReef('My Coral Reef');
+        const deviceElement = new HomieDeviceElement(coralReef);
+
+        document.getElementById('app').appendChild(deviceElement);
+    </script>
+</body>
+</html>

src/index.html

@@ -0,0 +1,14 @@
+// Core Homie classes
+export { HomieProperty } from './HomieProperty';
+export { HomieNode } from './HomieNode';
+export { HomieDevice } from './HomieDevice';
+
+// DOM integration
+export { PropertyBindingManager } from './PropertyBindingManager';
+export { HomieNodeComponent } from './HomieNodeComponent';
+export { HomieDeviceElement } from './HomieDeviceElement';
+
+// Example classes
+export { CoralBranch } from './CoralBranch';
+export { PlayerAvatar } from './PlayerAvatar';
+export { CoralReef } from './CoralReef';

src/index.ts

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ESNext",
+    "lib": ["es2017", "dom"],
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "*": ["node_modules/*", "src/types/*"]
+    },
+    "useDefineForClassFields": false,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "types": ["aframe"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

tsconfig.json

@@ -0,0 +1,32 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'src/index.html',
+    }),
+  ],
+  devServer: {
+    static: path.join(__dirname, 'dist'),
+    compress: true,
+    port: 9000,
+  },
+};