Try path example

browser/cli/atomic.config.json

@@ -0,0 +1,7 @@
+{
+  "outputFolder": "./src/ontologies",
+  "moduleAlias": "@tomic/lib",
+  "ontologies": [
+    "https://atomicdata.dev/ontology/data-browser"
+  ]
+}

browser/cli/src/generateClasses.ts

@@ -4,22 +4,35 @@ import { ReverseMapping } from './generateBaseObject.js';
 import { PropertyRecord } from './PropertyRecord.js';
 import { dedupe } from './utils.js';
 
+interface GeneratedOutput {
+  interfaces: string;
+  webComponents: string;
+}
+
 export const generateClasses = (
   ontology: Resource<Core.Ontology>,
   reverseMapping: ReverseMapping,
   propertyRecord: PropertyRecord,
-): string => {
+): GeneratedOutput => {
   const classes = dedupe(ontology.props.classes ?? []);
 
   const classStringList = classes.map(subject => {
     return generateClass(subject, reverseMapping, propertyRecord);
   });
 
+  const webComponentsList = classes.map(subject => {
+    return generateWebComponent(subject, reverseMapping, propertyRecord);
+  });
+
   const innerStr = classStringList.join('\n');
+  const webComponentsStr = webComponentsList.join('\n\n');
 
-  return `interface Classes {
-    ${innerStr}
-  }`;
+  return {
+    interfaces: `interface Classes {
+      ${innerStr}
+    }`,
+    webComponents: webComponentsStr,
+  };
 };
 
 const generateClass = (
@@ -53,6 +66,135 @@ const generateClass = (
   );
 };
 
+const generateWebComponent = (
+  subject: string,
+  reverseMapping: ReverseMapping,
+  propertyRecord: PropertyRecord,
+): string => {
+  const resource = store.getResourceLoading<Core.Class>(subject);
+  const className = reverseMapping[subject].split('.').pop() || '';
+  const requires = resource.props.requires ?? [];
+  const recommends = resource.props.recommends ?? [];
+  const properties = [...requires, ...recommends];
+
+  const kebabCaseName = className
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .toLowerCase();
+
+  return `
+class ${className}Element extends HTMLElement {
+  static get observedAttributes() {
+    return ['subject', ${properties
+      .map(prop => `'${reverseMapping[prop]?.split('.').pop()}'`)
+      .join(', ')}];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._resource = null;
+    this._loading = false;
+  }
+
+  async connectedCallback() {
+    this.render();
+    await this.loadResource();
+  }
+
+  async attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'subject' && oldValue !== newValue) {
+      await this.loadResource();
+    }
+    this.render();
+  }
+
+  async loadResource() {
+    const subject = this.getAttribute('subject');
+    if (!subject || this._loading) {
+      return;
+    }
+
+    try {
+      this._loading = true;
+      this._resource = await store.getResource(subject);
+
+      // Set attributes based on resource properties
+      ${properties
+        .map(
+          prop => `
+      const ${reverseMapping[prop]?.split('.').pop()} = this._resource.get('${prop}');
+      if (${reverseMapping[prop]?.split('.').pop()}) {
+        this.setAttribute('${reverseMapping[prop]?.split('.').pop()}', ${reverseMapping[prop]?.split('.').pop()});
+      }`,
+        )
+        .join('\n')}
+    } catch (e) {
+      console.error('Error loading resource:', e);
+    } finally {
+      this._loading = false;
+      this.render();
+    }
+  }
+
+  render() {
+    if (!this.shadowRoot) return;
+
+    const loading = this._loading;
+    const subject = this.getAttribute('subject');
+
+    this.shadowRoot.innerHTML = \`
+      <style>
+        :host {
+          display: block;
+          font-family: system-ui, sans-serif;
+          padding: 1rem;
+          border: 1px solid #eee;
+          border-radius: 0.5rem;
+        }
+        .loading {
+          opacity: 0.5;
+        }
+        .property {
+          margin: 0.5rem 0;
+        }
+        .property-label {
+          font-weight: 500;
+          color: #666;
+          margin-right: 0.5rem;
+        }
+        .property-value {
+          color: #333;
+        }
+        .error {
+          color: #e11;
+        }
+      </style>
+      <div class="atomic-resource \${loading ? 'loading' : ''}">
+        ${properties
+          .map(
+            prop => `
+        <div class="property">
+          <span class="property-label">${reverseMapping[prop]?.split('.').pop()}:</span>
+          <span class="property-value">\${this.getAttribute('${reverseMapping[prop]?.split('.').pop()}') || ''}</span>
+        </div>`,
+          )
+          .join('\n')}
+        ${requires
+          .map(
+            prop => `
+        <div class="property error" style="display: \${!this.getAttribute('${reverseMapping[prop]?.split('.').pop()}') ? 'block' : 'none'}">
+          Required: ${reverseMapping[prop]?.split('.').pop()}
+        </div>`,
+          )
+          .join('\n')}
+      </div>
+    \`;
+  }
+}
+
+customElements.define('atomic-${kebabCaseName}', ${className}Element);`;
+};
+
 const classString = (
   key: string,
   requires: string[],

browser/cli/src/generateOntology.ts

@@ -15,6 +15,7 @@ enum Inserts {
   BASE_OBJECT = '{{2}}',
   CLASS_EXPORTS = '{{3}}',
   CLASSES = '{{4}}',
+  WEB_COMPONENTS = '{{5}}',
   PROP_TYPE_MAPPING = '{{7}}',
   PROP_SUBJECT_TO_NAME_MAPPING = '{{8}}',
 }
@@ -31,6 +32,8 @@ ${Inserts.BASE_OBJECT}
 
 ${Inserts.CLASS_EXPORTS}
 
+${Inserts.WEB_COMPONENTS}
+
 declare module '${Inserts.MODULE_ALIAS}' {
   ${Inserts.CLASSES}
 
@@ -56,7 +59,11 @@ export const generateOntology = async (
   }
 
   const [baseObjStr, reverseMapping] = await generateBaseObject(ontology);
-  const classesStr = generateClasses(ontology, reverseMapping, propertyRecord);
+  const classesOutput = generateClasses(
+    ontology,
+    reverseMapping,
+    propertyRecord,
+  );
   const propertiesStr = generatePropTypeMapping(ontology, reverseMapping);
   const subToNameStr = generateSubjectToNameMapping(ontology, reverseMapping);
   const classExportsStr = generateClassExports(ontology, reverseMapping);
@@ -67,7 +74,8 @@ export const generateOntology = async (
   )
     .replace(Inserts.BASE_OBJECT, baseObjStr)
     .replace(Inserts.CLASS_EXPORTS, classExportsStr)
-    .replace(Inserts.CLASSES, classesStr)
+    .replace(Inserts.CLASSES, classesOutput.interfaces)
+    .replace(Inserts.WEB_COMPONENTS, classesOutput.webComponents)
     .replace(Inserts.PROP_TYPE_MAPPING, propertiesStr)
     .replace(Inserts.PROP_SUBJECT_TO_NAME_MAPPING, subToNameStr);