[add] Format & Test scripts in Git hooks (#2)

EasyWebApp · Jul 5, 2024 · e0b73ce · e0b73ce
1 parent 89dace5
commit e0b73ce
Show file tree

Hide file tree

Showing 10 changed files with 1,264 additions and 48 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+npm test
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -0,0 +1 @@
+npm run build
diff --git a/.npmignore b/.npmignore
@@ -1,2 +1,4 @@
 docs/
+test/
+.husky/
 .github/
diff --git a/ReadMe.md b/ReadMe.md
@@ -20,9 +20,27 @@ Any one of these methods shown below is available.
 ### 1. CDN
 
 ```html
-<head>
-  <script src="https://polyfill.web-cell.dev/feature/DeclarativeShadowDOM.js"></script>
-</head>
+<html>
+  <head>
+    <script src="https://polyfill.web-cell.dev/feature/DeclarativeShadowDOM.js"></script>
+
+    <script src="./my-tag.js"></script>
+    <script>
+      window.onload = () => {
+        const { shadowRoot } = document.querySelector("my-tag");
+
+        console.log(shadowRoot);
+      };
+    </script>
+  </head>
+  <body>
+    <my-tag>
+      <template shadowrootmode="open">
+        <p>Hello, Declarative Shadow DOM!</p>
+      </template>
+    </my-tag>
+  </body>
+</html>
 ```
 
 ### 2. Polyfill import
@@ -34,16 +52,16 @@ const markup = `
 <my-tag>
     <template shadowrootmode="open">
         <p>Hello, Declarative Shadow DOM!</p>
-    <template/>
+    </template>
 </my-tag>`;
 
 document.body.setHTMLUnsafe(markup);
 
-console.assert(markup === document.body.getHTML(), "Shadow DOM serialization");
+console.log(document.body.getHTML());
 
 const newDocument = Document.parseHTMLUnsafe(markup);
 
-console.assert(markup === newDocument.body.getHTML(), "Shadow DOM parsing");
+console.log(newDocument.body.getHTML());
 ```
 
 ### 3. Ponyfill import
@@ -59,18 +77,16 @@ const markup = `
 <my-tag>
     <template shadowrootmode="open">
         <p>Hello, Declarative Shadow DOM!</p>
-    <template/>
+    </template>
 </my-tag>`;
 
 setHTMLUnsafe.call(document.body, markup);
 
-console.assert(
-  markup === getHTML.call(document.body),
-  "Shadow DOM serialization"
-);
+console.log(getHTML.call(document.body));
+
 const newDocument = parseHTMLUnsafe(markup);
 
-console.assert(markup === getHTML.call(newDocument.body), "Shadow DOM parsing");
+console.log(getHTML.call(newDocument.body));
 ```
 
 ### 4. Node.js & Bun
@@ -80,9 +96,9 @@ console.assert(markup === getHTML.call(newDocument.body), "Shadow DOM parsing");
 Either `jsdom`, `happy-dom` or `linkedom` is available DOM implementation.
 
 ```javascript
-import { Window } from "happy-dom";
+import { JSDOM } from "jsdom";
 
-const window = new Window(),
+const { window } = new JSDOM(),
   RequiredAPI = [
     "Text",
     "Comment",

diff --git a/package.json b/package.json
@@ -23,12 +23,27 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "devDependencies": {
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^18.19.39",
+    "husky": "^9.0.11",
+    "jsdom": "^24.1.0",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.2",
+    "tsx": "^4.16.2",
     "typedoc": "^0.26.3",
     "typedoc-plugin-mdn-links": "^3.2.2",
     "typescript": "^5.5.3"
   },
+  "prettier": {
+    "trailingComma": "none"
+  },
+  "lint-staged": {
+    "*.{md,json,yml,ts}": "prettier --write"
+  },
   "scripts": {
+    "prepare": "husky",
+    "test": "lint-staged  &&  tsx test/index.spec.ts",
     "build": "rm -rf dist/ docs/  &&  tsc  &&  typedoc source/",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm test  &&  npm run build"
   }
 }