Classes

README.md

@@ -11,7 +11,9 @@
 
 ```
 $ npm install luciascript
-# Or with yarn
+
+# or with yarn
+
 $ yarn add luciascript
 ```
 
@@ -40,9 +42,19 @@ l("div", { className: "foo", id: "bar", style: "text-align: center;" }, [
     l("button", {}, "Click Me!")
 ])
 ```
+or, with classes
+```js
+
+const luciaScript = new L(
+   "div", { className: "foo", id: "bar", style: "text-align: center;" }, 
+)
+```
+
+
 ```html
 <div class="foo" id="bar" style="text-align: center;">
     <p>Hello World</p>
     <button>Click Me!</button>
 </div>
-```
+```
+

src/index.ts

@@ -1,3 +1,50 @@
+
+class L {
+  private readonly tagName: string;
+  private props: Record<string, string>;
+  private children: Array<string> | string;
+
+  /**
+   * 
+   * @param tag
+   * @param props 
+   * @param children 
+   */
+  constructor(readonly tag: string, props: Record<string, string> = {}, children: Array<string> | string = []) {
+    this.tagName = tag
+    this.props = props
+    this.children = children
+
+  }
+
+  /**
+   * Generate the html string
+   */
+  public create = (): string => {
+    const propsToUse = this.ignoreObjectClassNames(this.props)
+
+    let htmlContent: string = `<${this.tagName}${propsToUse.map((prop) => ` ${prop}='${this.props[prop]}'`).join('')}`;
+
+    htmlContent = this.addObjectClassName(htmlContent, this.props)
+
+    htmlContent = `${htmlContent}>${typeof this.children === 'string' ? this.children : this.children.join('')}</${this.tagName}>`;
+    return htmlContent
+  }
+
+  private addObjectClassName(content: string, props: Record<string, string>) {
+    if (props.className) {
+      content = `${content} class='${props.className}'`
+    }
+
+    return content
+  }
+
+
+  private ignoreObjectClassNames(props: Record<string, string>) {
+    return Object.keys(props).filter((prop) => prop !== 'className');
+  }
+}
+
 /**
  * Creates an HTML string
  * @param tag
@@ -13,6 +60,8 @@
  * ])
  * ```
  */
+
+
 const l = (tag: string, props: Record<string, string> = {}, children: string[] | string = []) => {
   const propsToUse = Object.keys(props).filter((prop) => prop !== 'className');
   let final = `<${tag}${propsToUse.map((prop) => ` ${prop}='${props[prop]}'`).join('')}`;
@@ -21,4 +70,5 @@ const l = (tag: string, props: Record<string, string> = {}, children: string[] |
   return final;
 };
 
-export { l };
+
+export { l, L };