@jxsuite/compiler 1.4.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "Jx static HTML compiler, island detector, and site builder",
   "license": "MIT",
   "repository": {
@@ -45,17 +45,19 @@
     "upgrade": "bunx npm-check-updates -u && bun install"
   },
   "dependencies": {
-    "@apidevtools/json-schema-ref-parser": "^15.5.0",
-    "@jxsuite/create": "^1.2.1",
-    "@jxsuite/runtime": "^1.3.1",
-    "@jxsuite/schema": "^1.4.0",
-    "esbuild": "^0.28.1",
+    "@apidevtools/json-schema-ref-parser": "^16.0.0",
+    "@jxsuite/create": "^1.3.0",
+    "@jxsuite/runtime": "^2.0.0",
+    "@jxsuite/schema": "^1.6.0",
+    "@vue/reactivity": "3.5.41",
+    "esbuild": "^0.28.2",
+    "lit-html": "^3.3.3",
     "sharp": "^0.35.3"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.11.1",
-    "@jxsuite/connector": "^0.4.1",
-    "@jxsuite/parser": "^1.4.0",
+    "@happy-dom/global-registrator": "^20.11.2",
+    "@jxsuite/connector": "^0.5.0",
+    "@jxsuite/parser": "^1.5.0",
     "@types/mdast": "^4.0.4"
   }
 }

package/src/compiler.ts

@@ -130,7 +130,7 @@ export async function compile(sourcePath: string | JxDocument, opts: CompileOpti
       path: `${tagName}.js`,
       tagName,
     };
-    const styleBlock = compileStyles(raw, raw.$media ?? {});
+    const styleBlock = compileStyles(raw, raw.$media ?? {}, projectStyle);
 
     const html = `<!DOCTYPE html>
 <html lang="en">

package/src/shadow.ts

@@ -0,0 +1,65 @@
+/**
+ * Shadow DOM, opt-in.
+ *
+ * Light DOM is the default and stays the default. It is not a placeholder for shadow DOM: a Jx
+ * component's styles are reachable from the page, which is how a project restyles a component it
+ * did not write, and the `<slot>` emulation that makes light-DOM composition work has different
+ * distribution semantics from real slotting. Switching a component to a shadow root changes both,
+ * so it is a per-component decision an author makes deliberately.
+ *
+ * `$shadow` on a component document, `defaults.shadow` on the project, `false` if neither says
+ * otherwise. `"open"` and `"closed"` are the standard's two modes; the difference matters more here
+ * than usual, because a **closed** declarative shadow root is not reachable through
+ * `element.shadowRoot` and hydration has to find it another way (§16.6).
+ *
+ * @docs framework/concepts/components
+ */
+
+import type { JxDocument, JxElement, ProjectConfig } from "@jxsuite/schema/types";
+
+/** The two modes the standard defines, or null for light DOM. */
+export type ShadowMode = "open" | "closed";
+
+/** A value `$shadow` or `defaults.shadow` may carry. */
+export type ShadowSetting = ShadowMode | false;
+
+function asSetting(value: unknown): ShadowSetting | undefined {
+  if (value === false || value === "open" || value === "closed") {
+    return value;
+  }
+  return undefined;
+}
+
+/**
+ * The shadow mode a component renders in, or null for light DOM.
+ *
+ * A component's own `$shadow` wins over the project default in both directions — including
+ * `$shadow: false`, which is how one component opts _out_ of a project that opted in.
+ *
+ * @param {JxDocument | JxElement | null | undefined} doc - The component definition
+ * @param {ProjectConfig["defaults"] | undefined} defaults
+ * @returns {ShadowMode | null}
+ */
+export function resolveShadowMode(
+  doc: JxDocument | JxElement | null | undefined,
+  defaults?: ProjectConfig["defaults"],
+): ShadowMode | null {
+  const own = asSetting((doc as { $shadow?: unknown } | null | undefined)?.$shadow);
+  const setting = own ?? asSetting(defaults?.shadow) ?? false;
+  return setting === false ? null : setting;
+}
+
+/**
+ * The CSS scope prefix for a component's own rules.
+ *
+ * In light DOM the prefix is the tag name, which is what makes `sty-card .inner` reach only that
+ * component's descendants. Inside a shadow root the selector cannot see the host's tag name, and
+ * `:host` is the standard's way to address it.
+ *
+ * @param {string} tagName
+ * @param {ShadowMode | null} shadow
+ * @returns {string}
+ */
+export function styleScopePrefix(tagName: string, shadow: ShadowMode | null): string {
+  return shadow === null ? tagName : ":host";
+}