Merge pull request #32 from Patternslib/modernize

Update pat-content-mirror

.github/workflows/test.yml

@@ -11,10 +11,10 @@ jobs:
     name: test
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
-        node-version: '16'
+        node-version: '22'
         cache: 'yarn'
     - run: |
         make install

bundle-config.js → bundle.js

@@ -1,4 +1,4 @@
-import registry from "@patternslib/patternslib/src/core/registry.js";
-import "./src/pat-content-mirror.js";
+import registry from "@patternslib/patternslib/src/core/registry";
+import "./src/pat-content-mirror";
 
 registry.init();

index.js

@@ -1,5 +1,5 @@
 // Webpack entry point for module federation.
-import "@patternslib/patternslib/webpack/module_federation";
-// The next import needs to be kept with brackets, otherwise we get this error:
+
+// This import needs to be kept with brackets, otherwise we get this error:
 // "Shared module is not available for eager consumption."
-import("./bundle-config");
+import("./bundle");

package.json

@@ -5,32 +5,27 @@
     "license": "MIT",
     "main": "./src/pat-content-mirror.js",
     "dependencies": {
+        "@patternslib/patternslib": ">=9.10.1-alpha.0",
         "jquery": "^3.6.0"
     },
     "devDependencies": {
-        "@patternslib/dev": "^2.2.0",
-        "@patternslib/patternslib": "*"
+        "@patternslib/dev": "<4"
     },
     "scripts": {
         "start": "NODE_ENV=development webpack serve --config webpack.config.js",
+        "watch": "NODE_ENV=development webpack --config webpack.config.js --watch",
         "build": "NODE_ENV=production webpack --config webpack.config.js",
         "build:dev": "NODE_ENV=development webpack --config webpack.config.js",
         "build:stats": "NODE_ENV=production webpack --config webpack.config.js --json > stats.json",
         "test": "jest"
     },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ]
-    },
-    "keywords": [
-        "patternslib"
+    "files": [
+        "/dist",
+        "/src"
+    ],
+    "browserslist": [
+        "defaults"
     ],
-    "publishConfig": {
-        "access": "public"
-    },
     "author": {
         "name": "Syslab GesmbH",
         "email": "dev@syslab.com"
@@ -39,5 +34,11 @@
     "repository": {
         "type": "git",
         "url": "https://github.com/patternslib/pat-content-mirror.git"
+    },
+    "keywords": [
+        "patternslib"
+    ],
+    "publishConfig": {
+        "access": "public"
     }
 }

src/pat-content-mirror.js

@@ -1,39 +1,57 @@
-import $ from "jquery";
-import Base from "@patternslib/patternslib/src/core/base";
+import { BasePattern } from "@patternslib/patternslib/src/core/basepattern";
+import events from "@patternslib/patternslib/src/core/events";
 import Parser from "@patternslib/patternslib/src/core/parser";
+import registry from "@patternslib/patternslib/src/core/registry";
 
 const parser = new Parser("content-mirror");
 parser.addArgument("target", "p.content-mirror .text");
 
-export default Base.extend({
-    name: "content-mirror",
-    trigger: ".pat-content-mirror",
+class Pattern extends BasePattern {
+    static name = "content-mirror";
+    static trigger = ".pat-content-mirror";
+    static parser = parser;
 
-    init: function content_mirror_init($el) {
-        this.options = parser.parse(this.el, this.options);
-        const $mirror = $(this.options.target).parents("p.content-mirror").first();
-        $el.on(
-            "input propertychange",
-            $.proxy(this.updateMirror, this, this.options.target)
+    async init() {
+        this.target = document.querySelector(this.options.target);
+        events.add_event_listener(
+            this.el,
+            "input",
+            "pat-content-mirror--update-mirror",
+            this.update_mirror.bind(this)
         );
-        $el.parents("form")
-            .first()
-            .on("reset", function () {
-                $el.val("");
-                $mirror.html($mirror.html());
-            });
-        $(".placeholder", this.options.target).text($el.attr("placeholder") || "");
-    },
-
-    updateMirror: function updateMirror(target, ev) {
-        const $el = $(ev.target);
-        const the_mirror = $(target);
-        the_mirror.text($el.val());
-        if (!$el.val().length) {
-            const placeholder = $el.attr("placeholder");
+
+        const form = this.el.form || this.el.closest("form");
+        events.add_event_listener(
+            form,
+            "reset",
+            `pat-content-mirror--reset--${this.uuid}`,
+            () => {
+                this.el.value = "";
+                this.el.dispatchEvent(events.input_event());
+            }
+        );
+
+        const placeholder = this.target.querySelector(".placeholder");
+        if (placeholder) {
+            placeholder.textContent = this.el.getAttribute("placeholder") || "";
+        }
+    }
+
+    update_mirror(ev) {
+        const el = ev.target;
+        const the_mirror = this.target;
+        const value = el.value;
+        the_mirror.textContent = value;
+        if (!value) {
+            const placeholder = this.el.getAttribute("placeholder");
             if (placeholder) {
-                the_mirror.html('<em class="placeholder">' + placeholder + "</em>");
+                the_mirror.innerHTML = `<em class="placeholder">${placeholder}</em>`;
             }
         }
-    },
-});
+    }
+}
+
+registry.register(Pattern);
+
+export default Pattern;
+export { Pattern };

src/pat-content-mirror.test.js

@@ -1,5 +1,5 @@
-import pattern from "./pat-content-mirror";
-import utils from "@patternslib/patternslib/src/core/utils";
+import Pattern from "./pat-content-mirror";
+import events from "@patternslib/patternslib/src/core/events";
 
 describe("pat-content-mirror", () => {
     beforeEach(() => {
@@ -14,8 +14,8 @@ describe("pat-content-mirror", () => {
                 data-pat-content-mirror="target:.mirror .text"></textarea>
         `;
 
-        pattern.init(document.querySelector(".pat-content-mirror"));
-        await utils.timeout(1);
+        const instance = new Pattern(document.querySelector(".pat-content-mirror"));
+        await events.await_pattern_init(instance);
 
         const textarea = document.querySelector("textarea");
         textarea.value = "this is a test text.";
@@ -25,4 +25,98 @@ describe("pat-content-mirror", () => {
             "this is a test text."
         );
     });
+
+    it("works with multiple content mirrors.", async () => {
+        document.body.innerHTML = `
+    	    <p class="mirror-1"><span class="text"></span></p>
+	    	<textarea
+                class="txt-1 pat-content-mirror"
+                data-pat-content-mirror="target:.mirror-1 .text"></textarea>
+
+    	    <p class="mirror-2"><span class="text"></span></p>
+	    	<textarea
+                class="txt-2 pat-content-mirror"
+                data-pat-content-mirror="target:.mirror-2 .text"></textarea>
+        `;
+
+        const txt1 = document.querySelector(".txt-1");
+        const txt2 = document.querySelector(".txt-2");
+
+        const mirror1 = document.querySelector(".mirror-1 .text");
+        const mirror2 = document.querySelector(".mirror-2 .text");
+
+        const instance1 = new Pattern(txt1);
+        const instance2 = new Pattern(txt2);
+
+        await events.await_pattern_init(instance1);
+        await events.await_pattern_init(instance2);
+
+        txt1.value = "this is a test text 1.";
+        txt2.value = "this is a test text 2.";
+
+        txt1.dispatchEvent(new Event("input"));
+        txt2.dispatchEvent(new Event("input"));
+
+        expect(mirror1.textContent).toBe("this is a test text 1.");
+        expect(mirror2.textContent).toBe("this is a test text 2.");
+    });
+
+    it("works with multiple content mirrors, placeholders and form resets.", async () => {
+        document.body.innerHTML = `
+            <form>
+                <p class="mirror-1">
+                    <span class="text">
+                        <em class="placeholder"></em>
+                    </span>
+                </p>
+                <textarea
+                    class="txt-1 pat-content-mirror"
+                    data-pat-content-mirror="target:.mirror-1 .text"
+                    placeholder="placeholder 1"></textarea>
+
+                <p class="mirror-2">
+                    <span class="text">
+                        <em class="placeholder"></em>
+                    </span>
+                </p>
+                <textarea
+                    class="txt-2 pat-content-mirror"
+                    data-pat-content-mirror="target:.mirror-2 .text"
+                    placeholder="placeholder 2"></textarea>
+
+                <button type="reset">Reset</button>
+            </form>
+        `;
+
+        const txt1 = document.querySelector(".txt-1");
+        const txt2 = document.querySelector(".txt-2");
+
+        const mirror1 = document.querySelector(".mirror-1 .text");
+        const mirror2 = document.querySelector(".mirror-2 .text");
+
+        const instance1 = new Pattern(txt1);
+        const instance2 = new Pattern(txt2);
+
+        await events.await_pattern_init(instance1);
+        await events.await_pattern_init(instance2);
+
+        expect(mirror1.textContent.trim()).toBe("placeholder 1");
+        expect(mirror2.textContent.trim()).toBe("placeholder 2");
+
+        txt1.value = "this is a test text 1.";
+        txt2.value = "this is a test text 2.";
+
+        txt1.dispatchEvent(new Event("input"));
+        txt2.dispatchEvent(new Event("input"));
+
+        expect(mirror1.textContent).toBe("this is a test text 1.");
+        expect(mirror2.textContent).toBe("this is a test text 2.");
+
+        const button = document.querySelector("button");
+        button.click();
+
+        expect(mirror1.textContent.trim()).toBe("placeholder 1");
+        expect(mirror2.textContent).toBe("placeholder 2");
+    });
+
 });

webpack.config.js

@@ -1,26 +1,29 @@
 process.traceDeprecation = true;
 const mf_config = require("@patternslib/dev/webpack/webpack.mf");
 const package_json = require("./package.json");
+const package_json_patternslib = require("@patternslib/patternslib/package.json");
 const path = require("path");
-const patternslib_config = require("@patternslib/dev/webpack/webpack.config.js");
-const patternslib_package_json = require("@patternslib/patternslib/package.json");
+const webpack_config = require("@patternslib/dev/webpack/webpack.config").config;
 
-module.exports = async (env, argv) => {
+module.exports = () => {
     let config = {
         entry: {
             "bundle.min": path.resolve(__dirname, "index.js"),
         },
     };
 
-    config = patternslib_config(env, argv, config);
+    config = webpack_config({
+        config: config,
+        package_json: package_json,
+    });
     config.output.path = path.resolve(__dirname, "dist/");
 
     config.plugins.push(
         mf_config({
             name: package_json.name,
             remote_entry: config.entry["bundle.min"],
             dependencies: {
-                ...patternslib_package_json.dependencies,
+                ...package_json_patternslib.dependencies,
                 ...package_json.dependencies,
             },
         })