Release: v1.0.2

.github/workflows/main.yml

@@ -3,6 +3,26 @@ name: NPM Publish
 on: [push]
 
 jobs:
+  automated_tests:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci') && github.ref != 'main'"
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 20.x
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: yarn-deps-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            yarn-deps-${{ hashFiles('yarn.lock') }}
+      - name: Run tests
+        run: |
+          yarn install --frozen-lockfile
+          yarn test
   release:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
@@ -17,6 +37,7 @@ jobs:
       - name: Prepare repository
         run: |
           git fetch --unshallow --tags
+
       - name: Cache node modules
         uses: actions/cache@v1
         with:

README.md

@@ -1,15 +1,6 @@
 # MiniJS
 
-## Installation
-
-To setup MiniJS in your local machine, you can do the following:
-
-1. Clone the [repository](https://github.com/Group-One-Technology/minijs).
-2. Run `yarn` to install dependencies.
-3. Run `yarn build` to create the `dist` folder -> output for MiniJS.
-4. Run `yarn dev` to run the demo page locally.
-5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.
-6. Run `yarn test` to run the tests.
+Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.
 
 ## The Idea
 
@@ -22,6 +13,17 @@ To setup MiniJS in your local machine, you can do the following:
 
 Read the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)
 
+## Installation
+
+To setup MiniJS in your local machine, you can do the following:
+
+1. Clone the [repository](https://github.com/Group-One-Technology/minijs).
+2. Run `yarn` to install dependencies.
+3. Run `yarn build` to create the `dist` folder -> output for MiniJS.
+4. Run `yarn dev` to run the demo page locally.
+5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.
+6. Run `yarn test` to run the tests.
+
 ## Setting State
 
 `State` are variables that changes the UI or the DOM that uses it when they get updated.
@@ -340,30 +342,26 @@ If you want to use the variable across an element's attributes and events, you c
 
 Like the example above, `:load` can be used to set the initial value of the variable.
 
-### Parent Element Variables
+### Group Variables
 
-Adding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.
-
-A children's `parent.` variable is the same as the parent's `el.` variable.
+Adding a `:group` attribute to an element will allow you to access its variables from its children using `group.` variables.
 
 ```html
-<div id="accordion" class="accordion" :parent>
-  <!-- Parent Element -->
-
+<!-- Group Element -->
+<div id="accordion" class="accordion" :group>
   <!-- Children Elements -->
-  <!-- parent.variable == #accordion's el.variable -->
   <section
     class="grid transition-all border-gray-300 border border-b-0 rounded hover:bg-gray-100"
   >
     <button
-      :click="parent.activeSection = 'about'"
+      :click="group.activeSection = 'about'"
       class="cursor-pointer font-bold p-4"
     >
       About Us
     </button>
     <div
       class="p-4 pt-2 overflow-hidden hidden"
-      :class="parent.activeSection =='about' ? 'block' : 'hidden'"
+      :class="group.activeSection =='about' ? 'block' : 'hidden'"
     >
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
       eirmod.
@@ -374,14 +372,14 @@ A children's `parent.` variable is the same as the parent's `el.` variable.
     class="grid transition-all border-gray-300 border border-b-0 rounded hover:bg-gray-100"
   >
     <button
-      :click="parent.activeSection = 'contact'"
+      :click="group.activeSection = 'contact'"
       class="cursor-pointer font-bold p-4"
     >
       Contact Us
     </button>
     <div
       class="p-4 pt-2 overflow-hidden"
-      :class="parent.activeSection =='contact' ? 'block' : 'hidden'"
+      :class="group.activeSection =='contact' ? 'block' : 'hidden'"
     >
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
       eirmod.
@@ -390,17 +388,17 @@ A children's `parent.` variable is the same as the parent's `el.` variable.
 
   <section
     class="grid transition-all border-gray-300 border rounded hover:bg-gray-100"
-    :class="parent.activeSection =='team' ? 'active' : ''"
+    :class="group.activeSection =='team' ? 'active' : ''"
   >
     <button
-      :click="parent.activeSection = 'team'"
+      :click="group.activeSection = 'team'"
       class="cursor-pointer font-bold p-4"
     >
       Team 3
     </button>
     <div
       class="p-4 pt-2 overflow-hidden"
-      :class="parent.activeSection =='team' ? 'block' : 'hidden'"
+      :class="group.activeSection =='team' ? 'block' : 'hidden'"
     >
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
       eirmod.
@@ -409,6 +407,14 @@ A children's `parent.` variable is the same as the parent's `el.` variable.
 </div>
 ```
 
+You can set the default value of the group variables in the `:group` directive:
+
+```html
+<div id="accordion" class="accordion" :group="activeSection = 'about'">
+  <!-- ... -->
+</div>
+```
+
 ### Variable Methods
 
 MiniJS added some commonly-used custom methods to variables.

demo/custom-event.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mini Custom Events</title>
+    <script src="/dist/minijs.umd.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="p-40">
+    <script>
+      MiniJS.extendEvents({ ':htmx:afteronload': 'htmx:afterOnLoad' })
+    </script>
+
+    <button
+      :htmx:afteronload="console.log('custom event!', event)"
+      :click="const event = document.createEvent('CustomEvent');
+              event.initCustomEvent('htmx:afterOnLoad', true, true, { name: 'htmx:afterOnLoad' });
+              this.dispatchEvent(event)"
+    >
+      Click Me
+    </button>
+  </body>
+</html>

demo/observer.html

@@ -34,7 +34,7 @@
       <li>
         <button
           :click="this.parentNode.parentNode.removeChild(this.parentNode)"
-          :text="`my id is ${this.getAttribute('id')} (hover me to change) list item (click to delete)`"
+          :text="`look at my id list item (click to delete)`"
           :mouseenter="el.isHovered = true"
           :mouseleave="el.isHovered = false"
           :class="el.isHovered ? 'bg-red-200' : ''"

index.html

@@ -263,13 +263,14 @@ <h3 class="font-bold font-mono">AirBnB Search Bar:</h3>
                     :change="destination = this.value;
                            filteredDestinations = destinations.search(destination)
 
-                          if (filteredDestinations.length)
-                            selectedDestination = filteredDestinations.first
-                          else {
-                            const region = regions.find((region) => region.name === destination)
-                            if (region) selectedDestination = region.name
-                            else selectedDestination = null
-                          }"
+                           const region = regions.find((region) => region.name === destination)
+
+                           if (region)
+                              selectedDestination = region.name
+                           else if (filteredDestinations.length)
+                              selectedDestination = filteredDestinations.first
+                           else
+                              selectedDestination = null"
                     :keyup.up="selectedDestination = filteredDestinations.previousItem(selectedDestination)"
                     :keyup.down="selectedDestination = filteredDestinations.nextItem(selectedDestination)"
                     placeholder="Search destinations"
@@ -1268,7 +1269,7 @@ <h3 class="font-bold font-mono">Storing to Local Storage:</h3>
             />
             <h2
               class="ml-3 mt-2 text-lg font-medium font-mono"
-              :text="$storedValue"
+              :text="$storedValue || 'Update and Reload'"
             >
               Loading...
             </h2>
@@ -1471,14 +1472,15 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
           grid-template-rows: 0fr 1fr;
         }
       </style>
-      <div class="accordion" :parent>
+      <div class="accordion" :group="activeSection = 'about'">
         <section
           class="grid transition-all border-gray-300 border border-b-0 rounded hover:bg-gray-100"
-          :class="parent.activeSection == 'about' ? 'active' : ''"
+          :class="group.activeSection == 'about' ? 'active' : ''"
         >
           <a
-            :click="parent.activeSection='about'"
+            :click="group.activeSection = 'about'"
             class="cursor-pointer font-bold p-4"
+            :aria-expanded="group.activeSection == 'about'"
           >
             About Us
           </a>
@@ -1492,11 +1494,12 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
 
         <section
           class="grid transition-all border-gray-300 border border-b-0 rounded hover:bg-gray-100"
-          :class="parent.activeSection =='contact' ? 'active' : ''"
+          :class="group.activeSection =='contact' ? 'active' : ''"
         >
           <a
-            :click="parent.activeSection='contact'"
+            :click="group.activeSection = 'contact'"
             class="cursor-pointer font-bold p-4"
+            :aria-expanded="group.activeSection == 'contact'"
           >
             Contact Us
           </a>
@@ -1510,10 +1513,11 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
 
         <section
           class="grid transition-all border-gray-300 border rounded hover:bg-gray-100"
-          :class="parent.activeSection =='team' ? 'active' : ''"
+          :class="group.activeSection == 'team' ? 'active' : ''"
         >
           <a
-            :click="parent.activeSection='team'"
+            :click="group.activeSection = 'team'"
+            :aria-expanded="group.activeSection == 'team'"
             class="cursor-pointer font-bold p-4"
           >
             Team 3