Merge pull request #137 from grucloud/interactive-comments-section

Interactive comments section

bau/bau.js

@@ -85,16 +85,17 @@ export default function Bau(input) {
       isAttribute,
       op = [],
     } = binding;
-    const [method, result, args, data, parentProp] = op;
+    const [method, result, args, data, parentProp = []] = op;
     if (method && renderItem) {
-      methodToActionMapping(
-        element,
-        args,
-        (...args) => toDom(renderItem(...args)),
-        result,
-        data,
-        parentProp
-      )[method]?.call();
+      !parentProp.length &&
+        methodToActionMapping(
+          element,
+          args,
+          (...args) => toDom(renderItem(...args)),
+          result,
+          data,
+          parentProp
+        )[method]?.call();
     } else {
       let newElement = renderInferred
         ? renderInferred({

bau/test/state-array-nested.test.js

@@ -0,0 +1,46 @@
+import { describe, vi, it, assert, expect } from "vitest";
+
+const sleep = (ms = 50) => new Promise((resolve) => setTimeout(resolve, ms));
+
+import Bau from "../bau";
+const comments = [
+  { id: 1, replies: [] },
+  { id: 2, replies: [] },
+];
+describe("nested array", async () => {
+  const bau = Bau();
+  const { h1, div, button, ul, li } = bau.tags;
+
+  const commentsState = bau.state(comments);
+
+  const Comment = (comment) => {
+    const repliesState = bau.state(comment.replies);
+    return li(
+      h1(comment.id),
+      button(
+        {
+          id: `button-${comment.id}`,
+          onclick: () => {
+            repliesState.val.push({ id: 3, comment: "hi" });
+          },
+        },
+        "Add reply"
+      ),
+      bau.loop(repliesState, ul(), (r) => li(r.comment))
+    );
+  };
+
+  const TestComponent = () => div(bau.loop(commentsState, ul(), Comment));
+
+  it("click", async () => {
+    const el = TestComponent();
+    document.body.appendChild(el);
+
+    document.getElementById("button-1").click();
+    await sleep();
+    const ulEl = el.querySelector("ul");
+
+    assert.equal(ulEl.childNodes.length, 2);
+    document.body.removeChild(el);
+  });
+});

examples/README.md

@@ -15,6 +15,7 @@ Below is a list of projects implemented using _Bau_.
 | Contact Form | [live](https://grucloud.github.io/bau/frontendmentor/contact-form/) | [code](./contact-form) |
 | E-commerce Product Page | [live](https://grucloud.github.io/bau/frontendmentor/e-commerce-product-page/) | [code](./e-commerce-product-page) |
 | Faq Accordion | [live](https://grucloud.github.io/bau/frontendmentor/faq-accordion/) | [code](./faq-accordion) |
+| Interactive Comments Section | [live](https://grucloud.github.io/bau/frontendmentor/interactive-comments-section/) | [code](./interactive-comments-section) |
 | Interactive Rating Component | [live](https://grucloud.github.io/bau/frontendmentor/interactive-rating-component/) | [code](./interactive-rating-component) |
 | IP Address Tracker | [live](https://grucloud.github.io/bau/frontendmentor/ip-address-tracker/) | [code](./ip-address-tracker) |
 | Job Listing With Filtering | [live](https://grucloud.github.io/bau/frontendmentor/job-listings-with-filtering/) | [code](./job-listings-with-filtering) |

examples/interactive-comments-section/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/interactive-comments-section/.npmrc

@@ -0,0 +1,2 @@
+save-exact = true
+package-lock = false

examples/interactive-comments-section/README.md

@@ -0,0 +1,23 @@
+# Frontend Mentor Interactive Comments Section
+
+Here is the implementation in [Bau.js](https://github.com/grucloud/bau) of the [Frontend Mentor Interactive Comments Section code challenge](https://www.frontendmentor.io/challenges/interactive-comments-section-iG1RugEG9)
+
+## Workflow
+
+Install the dependencies:
+
+```sh
+npm install
+```
+
+Start a development server:
+
+```sh
+npm run dev
+```
+
+Build a production version:
+
+```sh
+npm run build
+```

examples/interactive-comments-section/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="./assets/images/favicon-32x32.png"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Interactive Comments Section | FrontendMentor</title>
+    <style id="bau-css"></style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

examples/interactive-comments-section/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "frontendmentor-interactive-comments-section",
+  "homepage": "https://grucloud.github.io/bau/frontendmentor/interactive-comments-section/",
+  "private": true,
+  "version": "0.95.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "deploy": "gh-pages -d ../../dist"
+  },
+  "devDependencies": {
+    "gh-pages": "6.1.1",
+    "typescript": "^5.0.2",
+    "vite": "^5.2.11"
+  },
+  "dependencies": {
+    "@grucloud/bau": "^0.95.0",
+    "@grucloud/bau-css": "^0.95.0",
+    "@grucloud/bau-ui": "^0.95.0",
+    "dayjs": "1.11.13"
+  }
+}

examples/interactive-comments-section/src/data.json

@@ -0,0 +1,68 @@
+{
+  "currentUser": {
+    "image": {
+      "png": "./assets/images/avatars/image-juliusomo.png",
+      "webp": "./assets/images/avatars/image-juliusomo.webp"
+    },
+    "username": "juliusomo"
+  },
+  "comments": [
+    {
+      "id": 1,
+      "content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
+      "createdAt": "1 month ago",
+      "score": 12,
+      "user": {
+        "image": {
+          "png": "./assets/images/avatars/image-amyrobson.png",
+          "webp": "./assets/images/avatars/image-amyrobson.webp"
+        },
+        "username": "amyrobson"
+      },
+      "replies": []
+    },
+    {
+      "id": 2,
+      "content": "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I can learn React? Thanks!",
+      "createdAt": "2 weeks ago",
+      "score": 5,
+      "user": {
+        "image": {
+          "png": "./assets/images/avatars/image-maxblagun.png",
+          "webp": "./assets/images/avatars/image-maxblagun.webp"
+        },
+        "username": "maxblagun"
+      },
+      "replies": [
+        {
+          "id": 3,
+          "content": "If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.",
+          "createdAt": "1 week ago",
+          "score": 4,
+          "replyingTo": "maxblagun",
+          "user": {
+            "image": {
+              "png": "./assets/images/avatars/image-ramsesmiron.png",
+              "webp": "./assets/images/avatars/image-ramsesmiron.webp"
+            },
+            "username": "ramsesmiron"
+          }
+        },
+        {
+          "id": 4,
+          "content": "I couldn't agree more with this. Everything moves so fast and it always seems like everyone knows the newest library/framework. But the fundamentals are what stay constant.",
+          "createdAt": "2 days ago",
+          "score": 2,
+          "replyingTo": "ramsesmiron",
+          "user": {
+            "image": {
+              "png": "./assets/images/avatars/image-juliusomo.png",
+              "webp": "./assets/images/avatars/image-juliusomo.webp"
+            },
+            "username": "juliusomo"
+          }
+        }
+      ]
+    }
+  ]
+}