@jay-framework/compiler-jay-html 0.9.0 → 0.10.0

package/docs/jay-html-docs.md

@@ -124,10 +124,40 @@ The `{}` syntax enables dynamic data binding to the current view state context.
 
 Class bindings support dynamic and conditional class inclusion:
 
+#### Dynamic Class from Property
+
 ```html
 <div class="{status}">Status indicator</div>
-<div class="{isActive ? 'active' : 'inactive'}">Toggle state</div>
-<div class="{isPrimary ? 'primary' : 'secondary'} button">Button</div>
+```
+
+#### Conditional Class (Short Form)
+
+Use the `{condition ? class-name}` syntax to conditionally add a class. The class name is **not quoted**:
+
+```html
+<div class="indicator {isActive ? active} {isLoading ? loading}">Status</div>
+```
+
+When the condition is true, the class is added. When false, it's omitted.
+
+#### Conditional Class (Full Ternary)
+
+Use the full ternary syntax `{condition ? class-a : class-b}` to switch between two classes:
+
+```html
+<div class="{isPrimary ? primary : secondary} button">Button</div>
+```
+
+#### Combining Static and Conditional Classes
+
+```html
+<a
+  href="/cart"
+  class="cart-indicator {hasItems ? has-items} {isLoading ? is-loading} {justAdded ? just-added}"
+>
+  <span class="icon">🛒</span>
+  <span class="count" if="hasItems">{itemCount}</span>
+</a>
 ```
 
 ## Conditional Rendering

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jay-framework/compiler-jay-html",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
   "scripts": {
     "build": "npm run build:pegjs && npm run build:js && npm run build:types",
     "build:watch": "npm run build:js -- --watch & npm run build:types -- --watch",
-    "build:pegjs": "pegjs --allowed-start-rules dynamicAttribute,booleanAttribute,dynamicText,dynamicProperty,conditionFunc,accessor,Identifier,classExpression,dynamicComponentProp,importNames,enum,is_enum,reactDynamicText,reactDynamicProperty,reactClassExpression,condition  -o lib/expressions/expression-parser.cjs lib/expressions/expression-parser.pegjs",
+    "build:pegjs": "pegjs --allowed-start-rules dynamicAttribute,booleanAttribute,dynamicText,dynamicProperty,conditionFunc,accessor,Identifier,classExpression,dynamicComponentProp,importNames,enum,is_enum,reactDynamicText,reactDynamicProperty,reactClassExpression,condition,styleDeclarations  -o lib/expressions/expression-parser.cjs lib/expressions/expression-parser.pegjs",
     "build:js": "vite build",
     "build:types": "tsup lib/index.ts --dts-only --format cjs",
     "build:check-types": "tsc",
@@ -34,11 +34,11 @@
   },
   "author": "",
   "dependencies": {
-    "@jay-framework/compiler-analyze-exported-types": "^0.9.0",
-    "@jay-framework/compiler-shared": "^0.9.0",
-    "@jay-framework/component": "^0.9.0",
-    "@jay-framework/runtime": "^0.9.0",
-    "@jay-framework/secure": "^0.9.0",
+    "@jay-framework/compiler-analyze-exported-types": "^0.10.0",
+    "@jay-framework/compiler-shared": "^0.10.0",
+    "@jay-framework/component": "^0.10.0",
+    "@jay-framework/runtime": "^0.10.0",
+    "@jay-framework/secure": "^0.10.0",
     "@types/js-yaml": "^4.0.9",
     "change-case": "^4.1.2",
     "js-yaml": "^4.1.0",
@@ -50,8 +50,8 @@
   },
   "devDependencies": {
     "@caiogondim/strip-margin": "^1.0.0",
-    "@jay-framework/4-react": "^0.9.0",
-    "@jay-framework/dev-environment": "^0.9.0",
+    "@jay-framework/4-react": "^0.10.0",
+    "@jay-framework/dev-environment": "^0.10.0",
     "@testing-library/jest-dom": "^6.2.0",
     "@types/js-beautify": "^1",
     "@types/node": "^20.11.5",

package/readme.md

@@ -62,23 +62,21 @@ Headfull components include both the contract and UI design:
 
 ### Importing Headless Components
 
-Headless components provide only the contract and logic:
+Headless components provide only the contract and logic, and are referenced through the plugin system:
 
 ```html
 <script
   type="application/jay-headless"
-  contract="{contract-path}"
-  src="{component-path}"
-  name="{component-name}"
+  plugin="{plugin-name}"
+  contract="{contract-name}"
   key="{nested-key}"
 ></script>
 ```
 
 **Parameters:**
 
-- `contract` - Path to the contract file (`.jay-contract`)
-- `src` - Path to the component implementation
-- `name` - Name of the exported component definition
+- `plugin` - Plugin name (from plugin.yaml in src/plugins/ or node_modules/)
+- `contract` - Contract name within the plugin
 - `key` - Attribute name for nesting the component's ViewState and Refs
 
 ### Import Examples
@@ -95,13 +93,12 @@ Headless components provide only the contract and logic:
   sandbox="true"
 ></script>
 
-<!-- Import a headless component -->
+<!-- Import a headless component from a plugin -->
 <script
   type="application/jay-headless"
-  contract="../data-store/store.jay-contract"
-  src="../data-store/store"
-  name="dataStore"
-  key="store"
+  plugin="wix-stores"
+  contract="product-list"
+  key="products"
 ></script>
 ```