updating example

rodydavis · May 24, 2021 · 9e23ed7 · 9e23ed7
1 parent cab9c17
commit 9e23ed7
Show file tree

Hide file tree

Showing 15 changed files with 462 additions and 69 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 0.7.0
+
+- Adding full html to object dom code generator
+- Updating example
+
 ## 0.6.0
 
 - Moving global attributes from props to attributes

diff --git a/demo/index.html b/demo/index.html
@@ -4,10 +4,20 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Lit-Element App</title>
+    <title>Object Dom Example</title>
+    <style>
+      body {
+        padding: 0;
+        margin: 0;
+      }
+    </style>
     <script type="module" src="/src/my-element.ts"></script>
   </head>
   <body>
     <my-element> </my-element>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify-css.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify-html.js"></script>
   </body>
 </html>
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/src/my-element.ts b/demo/src/my-element.ts
@@ -1,13 +1,83 @@
-import { LitElement, html, customElement } from "lit-element";
-import { MyApp } from "./my-app";
+import { LitElement, html, customElement, css, query } from "lit-element";
+import { generateCode } from "object-dom";
+
+declare function js_beautify(value: string, options?: any): string;
+declare function html_beautify(value: string, options?: any): string;
 
 @customElement("my-element")
 export class MyElement extends LitElement {
-  app = new MyApp();
+  static styles = css`
+    main {
+      display: grid;
+      width: 100%;
+      height: 100vh;
+      grid-template-areas:
+        "input actions output"
+        "input actions output"
+        "input actions output";
+      grid-template-rows: 1fr 1fr 1fr;
+      grid-template-columns: 1fr auto 1fr;
+    }
+    #code-source {
+      grid-area: output;
+    }
+    #html-source {
+      grid-area: input;
+    }
+    #actions {
+      width: 5px;
+      grid-area: actions;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+    }
+    .code {
+      margin: 5px;
+    }
+    .spacer-vertical {
+      height: 10px;
+    }
+  `;
+
+  @query("#code-source") codeSource!: HTMLTextAreaElement;
+  @query("#html-source") htmlSource!: HTMLTextAreaElement;
 
   render() {
-    const elem = this.app.render().node;
-    return html`${elem}`;
+    const fixedSource = html_beautify(HTML_SOURCE);
+    return html` <main>
+      <textarea
+        id="html-source"
+        class="code"
+        @input="${() => this.updateOutput()})"
+        .value=${fixedSource}
+      ></textarea>
+      <div id="actions">
+        <!-- <button>></button> -->
+        <!-- <div class="spacer-vertical"></div>
+        <button><</button> -->
+      </div>
+      <textarea id="code-source" class="code" readonly></textarea>
+    </main>`;
+  }
+
+  async firstUpdated() {
+    this.updateOutput();
+  }
+
+  updateOutput() {
+    const htmlCode = this.htmlSource.value;
+    if (htmlCode !== html_beautify(htmlCode)) {
+      this.htmlSource.value = html_beautify(htmlCode);
+    }
+    const codeOutput = generateCode(htmlCode);
+    console.log("codeOutput", codeOutput);
+    if (codeOutput) {
+      this.codeSource.value = js_beautify(codeOutput, {
+        indent_size: 2,
+        space_in_empty_paren: true,
+      });
+    }
   }
 }
 
@@ -16,3 +86,24 @@ declare global {
     "my-element": MyElement;
   }
 }
+
+const HTML_SOURCE = `
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Object Dom Example</title>
+    <style>
+      body {
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+    <script type="module" src="/src/my-element.ts"></script>
+  </head>
+  <body>
+    <my-element> </my-element>
+  </body>
+</html>
+`;
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
@@ -5,6 +5,7 @@ import { resolve } from "path";
 export default defineConfig({
   base: "/object-dom/",
   build: {
+    minify: false,
     outDir: "build",
     rollupOptions: {
       input: {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "object-dom",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "description": "Declarative dom with 1:1 mapping of objects and tags, typed css, reactive updates and no bundler needed.",
   "main": "build/object-dom.umd.js",
   "module": "build/object-dom.es.js",

diff --git a/scripts/update.js b/scripts/update.js
@@ -102,6 +102,10 @@ case "${item.tagName}":
     base = new tags.${item.className}({});
     break;`).join('')
     );
+    updateFile('src/transformers/html-to-code.ts', '// -- BEGIN_TAGS --', '// -- END_TAGS --', tags.map((item) => `
+case "${item.tagName}":
+    return "${item.className}";`).join('')
+    );
 
     updateFile('test/dom.test.ts', '// -- BEGIN_TAGS --', '// -- END_TAGS --', tags.map((item) => `
     testComponent("${item.tagName}", new tags.${item.className}());`).join('')

diff --git a/src/base.ts b/src/base.ts
@@ -169,52 +169,6 @@ export class GlobalDom<T extends HTMLElement> extends ObjectDom<T> {
     if (!this._events[type]) this._events[type] = [];
     this._events[type].push({ callback, options });
   }
-
-  public toString = (): string => {
-    return generateCode(this);
-  };
-}
-
-export function generateCode(source: GlobalDom<HTMLElement>) {
-  const tab = "";
-  const sb: string[] = [];
-  sb.push(`new ${source.constructor.name}({`);
-  if (source.text) sb.push(`${tab}text: "${source.text}"`);
-  if (source.styles) {
-    const styles = Object.entries(source.styles)
-      .filter((n) => n[1].value)
-      .map(([key, value]) => `"${key}": "${value.value}"`);
-    if (styles.length > 0) {
-      sb.push(`${tab}styles: {`);
-      for (const item of styles) {
-        sb.push(`${tab}${tab}${item},`);
-      }
-      sb.push(`${tab}},`);
-    }
-  }
-  if (source.attributes) {
-    const attrs = Object.entries(source.attributes)
-      .filter((n) => n[1].value)
-      .filter((n) => n[1].value)
-      .map(([key, value]) => `"${key}": "${value.value}"`);
-    if (attrs.length > 0) {
-      sb.push(`${tab}attributes: {`);
-      for (const item of attrs) {
-        sb.push(`${tab}${tab}${item},`);
-      }
-      sb.push(`${tab}},`);
-    }
-  }
-  if (source.children && source.children.length > 0) {
-    sb.push(`${tab}children: {`);
-    for (const child of source.children) {
-      const item = child.toString();
-      sb.push(`${tab}${tab}${item},`);
-    }
-    sb.push(`${tab}},`);
-  }
-  sb.push(`})`);
-  return sb.join("");
 }
 
 export function generateNode(source: GlobalDom<HTMLElement>) {