wc-compiler 0.21.1 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "description": "WCC supports server-rendering of standard Web Components, generating HTML directly from your custom element definitions.",
   "repository": {
     "type": "git",
@@ -80,7 +80,7 @@
     "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
     "c8": "^7.11.2",
-    "chai": "^4.3.6",
+    "chai": "^6.2.2",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-no-only-tests": "^3.3.0",
@@ -101,9 +101,9 @@
     "rehype-slug": "^3.0.0",
     "remark-gfm": "^4.0.0",
     "remark-github": "^10.0.1",
-    "stylelint": "^16.10.0",
-    "stylelint-config-recommended": "^14.0.1",
-    "typescript": "^5.9.3",
+    "stylelint": "^17.4.0",
+    "stylelint-config-recommended": "^18.0.0",
+    "typescript": "^6.0.3",
     "typescript-eslint": "^8.46.2",
     "vite": "^7.3.1",
     "vitest": "^4.0.18"

package/src/jsx-loader.js

@@ -128,7 +128,13 @@ function findThisReferences(context, statement) {
   return references;
 }
 
-function parseJsxElement(element, moduleContents = '', inferredObservability) {
+function parseJsxElement(
+  element,
+  moduleContents = '',
+  inferredObservability,
+  hasShadowRoot = false,
+  currentDepth = 1,
+) {
   try {
     const { type } = element;
 
@@ -154,20 +160,21 @@ function parseJsxElement(element, moduleContents = '', inferredObservability) {
                 if (expression.property.type === 'Identifier') {
                   // we leave markers for `this` so we can replace it later while also NOT accidentally replacing
                   // legitimate uses of this that might be actual content / markup of the custom element
-                  string += ` ${name}="__this__.${expression.property.name}()"`;
+                  string += ` ${name}="__this__.${expression.property.name}(event)"`;
                 }
               }
             }
 
-            // onclick={() => this.deleteUser(user.id)}
-            // TODO onclick={(e) => { this.deleteUser(user.id) }}
-            // TODO onclick={(e) => { this.deleteUser(user.id) && this.logAction(user.id) }}
-            // https://github.com/ProjectEvergreen/wcc/issues/88
-            if (expression.type === 'ArrowFunctionExpression') {
-              if (expression.body && expression.body.type === 'CallExpression') {
-                const { start, end } = expression;
-                string += ` ${name}="${moduleContents.slice(start, end).replace(/this./g, '__this__.').replace('() => ', '')}"`;
-              }
+            // <button onclick={(e: Event) => this.count.set(this.count.get() * 2)}>Double (++)</button>
+            if (expression.type === 'ArrowFunctionExpression' && expression.body) {
+              // quick hack to get expression contents until we can properly build this all up from an AST
+              const contents = generate(expression.body);
+              const eventIdentifier = expression?.params[0]?.name || 'event';
+              const root = hasShadowRoot
+                ? '.getRootNode().host'
+                : `${'.parentElement'.repeat(currentDepth)}`;
+
+              string += ` ${name}="(function (${eventIdentifier}, self) { ${contents.replace(/this./g, 'self.').replace('() => ', '')} })(event, this${root})"`;
             }
 
             if (expression.type === 'AssignmentExpression') {
@@ -241,7 +248,13 @@ function parseJsxElement(element, moduleContents = '', inferredObservability) {
 
       if (element.children.length > 0) {
         element.children.forEach((child) =>
-          parseJsxElement(child, moduleContents, inferredObservability),
+          parseJsxElement(
+            child,
+            moduleContents,
+            inferredObservability,
+            hasShadowRoot,
+            currentDepth + 1,
+          ),
         );
       }
 
@@ -692,7 +705,13 @@ export function parseJsx(moduleURL) {
                   const n = n1.value.body.body[n2];
 
                   if (n.type === 'ReturnStatement' && n.argument.type === 'JSXElement') {
-                    const html = parseJsxElement(n.argument, moduleContents, inferredObservability);
+                    const html = parseJsxElement(
+                      n.argument,
+                      moduleContents,
+                      inferredObservability,
+                      hasShadowRoot,
+                      1,
+                    );
                     const elementTree = getParse(html)(html);
                     const elementRoot = hasShadowRoot ? 'this.shadowRoot' : 'this';
 

package/src/jsx.d.ts

@@ -9,13 +9,15 @@ type ElementAttributes<E extends HTMLElement> = {
   class?: string;
 };
 
+type PopoverState = 'auto' | 'manual' | 'hint';
 type PopoverTargetAction = 'show' | 'hide' | 'toggle';
-type PopoverTargetAttributes = {
+type PopoverAttributes = {
   // have to manage this manually, can't seem to get this from TypeScript itself (not sure if just skill issue? :D)
   // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1790
   // it should be there per https://github.com/mdn/browser-compat-data/pull/21875
   // https://github.com/ProjectEvergreen/wcc/issues/236
   // per the spec, this should only apply to <button> and <input> elements.
+  popover?: PopoverState;
   popovertarget?: string;
   popovertargetaction?: PopoverTargetAction;
 };
@@ -23,7 +25,7 @@ type PopoverTargetAttributes = {
 // map each HTML tag to its attributes
 type IntrinsicElementsFromDom = {
   [E in keyof HTMLElementTagNameMap]: ElementAttributes<HTMLElementTagNameMap[E]> &
-    (E extends 'button' | 'input' ? PopoverTargetAttributes : {});
+    (E extends 'button' | 'input' ? PopoverAttributes : {});
 };
 
 declare namespace JSX {