@ungap/processing-instruction 0.0.1 → 0.0.3

package/README.md

@@ -1,3 +1,14 @@
 # @ungap/processing-instruction
 
 A polyfill for [ProcessingInstruction attributes](https://github.com/whatwg/dom/pull/1454).
+
+```js
+import patch from 'https://esm.run/@ungap/processing-instruction';
+
+const template = document.createElement('template');
+template.innerHTML = 'a<?b c="d" ?>c';
+
+[...patch(template.content).childNodes];
+
+// [text, b, text]
+```

package/index.js

@@ -50,3 +50,27 @@ for (const [key, value] of [
     value
   });
 }
+
+const template = document.createElement('template');
+template.innerHTML = '<?t ?>';
+
+export default template.content.firstChild.nodeType === Node.COMMENT_NODE ?
+  (dom => {
+    const tw = document.createTreeWalker(dom, NodeFilter.SHOW_COMMENT);
+    let comments = [], comment;
+    while (comment = tw.nextNode()) {
+      const { data } = comment;
+      if (data.endsWith('?') && /^\?(\S+)/.test(data)) {
+        const target = RegExp.$1;
+        comments.push(comment, [target, data.slice(1 + target.length, -1).trim()]);
+      }
+    }
+    for (let i = 0; i < comments.length; i += 2) {
+      comments[i].replaceWith(
+        document.createProcessingInstruction(...comments[i + 1])
+      );
+    }
+    return dom;
+  }) :
+  (dom => dom)
+;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ungap/processing-instruction",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A polyfill for ProcessingInstruction attributes",
   "main": "index.js",
   "module": "index.js",