vite-plugin-xhtml2shadow 0.0.1 → 0.0.2

package/README.md

@@ -49,13 +49,16 @@ class LoginForm extends HTMLElement {
 
   constructor() {
     super()
-    build(this)
+    if (build(this)) return
+    // other set up here
+  }
+
+  connectedCallback() {
     const submit = this.shadowRoot!.querySelector("button")!
     submit.onclick = () => {
       // perform login here
     }
   }
-
 }
 customElements.define("login-form", LoginForm)
 ```
@@ -100,20 +103,23 @@ you'll need to escape their unicode values instead. In practice this
 issue only comes up with non-breaking spaces. Instead of using ` `
 like you would in HTML, use ` ` instead.
 
-Note that although you _authoring_ your markup as XHTML, the plugin
-produces JavaScript that creates HTML5 elements.
+Note that although you _author_ your markup as XHTML, the plugin
+_produces_ JavaScript that creates HTML5 elements. The usage of xhtml
+is simply for self-closing tags.
 
 ## Server-Side Rendering
 
 If the passed-in element already has a shadow root, the functions
-produced by this plugin do nothing, just silently return. This is
-done to support web components that were rendered by a server via Declarative Shadow DOM.
+produced by this plugin do nothing, just return `true`. This is
+done to support web components that were rendered by a server via
+Declarative Shadow DOM. In your component's constructor, you can
+check the result of the `build` function to exit early if the
+element already has a shadow root.
 
 ## Viteness
 
 This plugin is vite-specific because it relies on vite's ability to
 import static assets as URLs. This is done for `href` and `src`
-attributes that reference a relative URL or an absolute URL that
-begins with `/`. Doing so allows you to specify an asset in your
-`/src` directory via its path, but the plugin will output the correct
-hashed URL when building with vite.
+attributes that reference a relative URL. Doing so allows you to specify
+an asset in your `/src` directory via its path, but the plugin will
+output the correct hashed URL when building with vite.

package/dist/index.js

@@ -22,7 +22,7 @@ function compile(src) {
     let code = `import {getCSS} from "dubc-client-global-css";`;
     code += parser.style.s;
     code += parser.code.s;
-    code += "}";
+    code += "return false;}";
     return code;
 }
 class Parser {
@@ -40,8 +40,8 @@ class Parser {
             throw new Error(n.textContent);
         }
         this.code.write(`export default function xhtml(el){`);
-        this.code.write(`if(el.shadowRoot!==null)return;`);
-        this.code.write(`const sh=el.attachShadow({mode:"open",delegatesFocus:true});`); // TODO, more options
+        this.code.write(`if(el.shadowRoot!==null)return true;`);
+        this.code.write(`const sh=el.attachShadow({mode:"open",delegatesFocus:true,clonable:true,serializable:true});`);
         this.code.write(`sh.adoptedStyleSheets.push(getCSS());`);
         this.parsed = parsed;
     }
@@ -90,7 +90,7 @@ class Parser {
         for (const x of el.attributes) {
             let { name, value } = x;
             if (name === "src" || name === "href") {
-                if (value.startsWith(".") || value.startsWith("/")) {
+                if (value.startsWith(".")) {
                     const imp = this.style.next();
                     this.style.write(`import ${imp} from ${esc(value)};`);
                     value = imp;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-xhtml2shadow",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Converts .xhtml files into JavaScript code that produces a shadow root with that HTML.",
   "keywords": ["vite-plugin"],
   "main": "dist/index.js",