smbls 3.6.1 → 3.6.4

package/README.md

@@ -197,4 +197,48 @@ See the [@symbo.ls/cli](../cli/) package for the full command reference.
 
 ## Documentation
 
+## Define System
+
+The define system (`context.define` and `element.define`) maps special keys to handler functions. When a key with a matching define handler appears on an element, `throughInitialDefine` calls the handler instead of treating the key as a child or prop.
+
+### Built-in define handlers (in `defaultDefine`)
+
+| Key | Purpose |
+|-----|---------|
+| `routes` | Route definitions — passed through as-is |
+| `metadata` | SEO metadata — resolves and applies `<title>` and `<meta>` tags via helmet |
+| `$router` | Router content — wraps params in a fragment and calls `el.set()` |
+
+### Collection define handlers (deprecated in v3)
+
+The following collection define handlers existed in v2 but are **deprecated in v3**:
+
+| Key (deprecated) | Data source | v3 replacement |
+|-------------------|-------------|----------------|
+| `$collection` | Direct data array/object | Use `children` + `childExtends` |
+| `$propsCollection` | `element.props` as data source | Use `children: ({ props }) => props.items` |
+| `$stateCollection` | `element.state` as data source | Use `children: ({ state }) => state.items` |
+| `$setCollection` | Uses `set()` to update content | Use `content` or `children` |
+
+Some older projects still use these handlers via project-level `context.define`. The framework's propertization layer (`@domql/utils/props.js`) is define-aware to avoid moving these keys into `props` when define handlers are present.
+
+> **Lesson learned:** The `$` prefix overlaps between css-in-props selectors and define handlers. The propertization in `props.js` checks for define handlers before applying `CSS_SELECTOR_PREFIXES` to prevent define keys from being swallowed into props. This matters for backwards compatibility with v2 projects that still use `$propsCollection` etc.
+
+## Emotion Integration (`prepare.js`)
+
+`prepareDesignSystem()` calls `initEmotion()` from `@symbo.ls/emotion/initEmotion.js` to initialize the CSS-in-JS engine. This import must be present for Emotion to work.
+
+```javascript
+import { initEmotion } from '@symbo.ls/emotion/initEmotion.js'
+
+export const prepareDesignSystem = (key, context) => {
+  const [scratchDesignSystem, emotion, registry] = initEmotion(key, context)
+  return [scratchDesignSystem, emotion, registry]
+}
+```
+
+> **Lesson learned:** If the `initEmotion` import is missing or broken, no CSS classes are generated and components render unstyled (Bazaar rendering issue).
+
+## Documentation
+
 For full documentation visit [symbols.app/developers](https://symbols.app/developers).

package/dist/cjs/package.json

@@ -1 +1 @@
-{"name":"smbls","version":"3.6.0"}
+{"name":"smbls","version":"3.6.3"}

package/dist/cjs/src/define.js

@@ -24,7 +24,6 @@ module.exports = __toCommonJS(define_exports);
 var import_helmet = require("@symbo.ls/helmet");
 const defaultDefine = {
   routes: (param) => param,
-  // deps: (param, el) => param || el.parent.deps,
   metadata: (param, el, state) => {
     if (!param) return;
     const doc = el.context?.document || typeof document !== "undefined" && document;

package/dist/esm/package.json

@@ -1 +1 @@
-{"name":"smbls","version":"3.6.0"}
+{"name":"smbls","version":"3.6.3"}

package/dist/esm/src/define.js

@@ -1,7 +1,6 @@
 import { resolveMetadata, applyMetadata } from "@symbo.ls/helmet";
 const defaultDefine = {
   routes: (param) => param,
-  // deps: (param, el) => param || el.parent.deps,
   metadata: (param, el, state) => {
     if (!param) return;
     const doc = el.context?.document || typeof document !== "undefined" && document;

package/dist/iife/index.js

@@ -498,7 +498,6 @@ var Smbls = (() => {
   var import_helmet = __require("@symbo.ls/helmet");
   var defaultDefine = {
     routes: (param) => param,
-    // deps: (param, el) => param || el.parent.deps,
     metadata: (param, el, state) => {
       if (!param) return;
       const doc = el.context?.document || typeof document !== "undefined" && document;
@@ -1030,7 +1029,6 @@ var Smbls = (() => {
   var import_helmet2 = __require("@symbo.ls/helmet");
   var defaultDefine2 = {
     routes: (param) => param,
-    // deps: (param, el) => param || el.parent.deps,
     metadata: (param, el, state) => {
       if (!param) return;
       const doc = el.context?.document || typeof document !== "undefined" && document;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smbls",
-  "version": "3.6.1",
+  "version": "3.6.4",
   "license": "MIT",
   "repository": "https://github.com/symbo-ls/smbls",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
@@ -28,21 +28,21 @@
     "src"
   ],
   "dependencies": {
-    "@symbo.ls/emotion": "^3.6.1",
-    "@symbo.ls/helmet": "^3.6.1",
-    "@domql/report": "^3.6.1",
-    "@domql/router": "^3.6.1",
-    "@domql/utils": "^3.6.1",
-    "@symbo.ls/cli": "^3.6.1",
-    "@symbo.ls/default-config": "^3.6.1",
-    "@symbo.ls/fetch": "^3.6.1",
-    "@symbo.ls/scratch": "^3.6.1",
-    "@symbo.ls/sync": "^3.6.1",
-    "@symbo.ls/uikit": "^3.6.1",
-    "@symbo.ls/smbls-utils": "^3.6.1",
-    "attrs-in-props": "^3.6.1",
-    "css-in-props": "^3.6.1",
-    "domql": "^3.6.1"
+    "@symbo.ls/emotion": "^3.6.4",
+    "@symbo.ls/helmet": "^3.6.4",
+    "@domql/report": "^3.6.4",
+    "@domql/router": "^3.6.4",
+    "@domql/utils": "^3.6.4",
+    "@symbo.ls/cli": "^3.6.4",
+    "@symbo.ls/default-config": "^3.6.4",
+    "@symbo.ls/fetch": "^3.6.4",
+    "@symbo.ls/scratch": "^3.6.4",
+    "@symbo.ls/sync": "^3.6.4",
+    "@symbo.ls/uikit": "^3.6.4",
+    "@symbo.ls/smbls-utils": "^3.6.4",
+    "attrs-in-props": "^3.6.4",
+    "css-in-props": "^3.6.4",
+    "domql": "^3.6.4"
   },
   "publishConfig": {
     "access": "public"

package/src/define.js

@@ -4,7 +4,6 @@ import { resolveMetadata, applyMetadata } from '@symbo.ls/helmet'
 
 export const defaultDefine = {
   routes: param => param,
-  // deps: (param, el) => param || el.parent.deps,
 
   metadata: (param, el, state) => {
     if (!param) return