@cssxjs/runtime 0.2.9 → 0.2.11

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.2.11 (Fri Nov 07 2025)
+
+#### 🐛 Bug Fix
+
+- fix: make pug reconstruct bindings; add extra options to babel preset; implement reactive update of @media for web and RN ([@cray0000](https://github.com/cray0000))
+
+#### Authors: 1
+
+- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
+
+---
+
+# v0.2.10 (Wed Nov 05 2025)
+
+#### 🐛 Bug Fix
+
+- fix: export matcher, variables, dimensions from @cssxjs/runtime and from the main cssxjs ([@cray0000](https://github.com/cray0000))
+
+#### Authors: 1
+
+- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
+
+---
+
 # v0.2.9 (Wed Nov 05 2025)
 
 #### 🐛 Bug Fix

package/dimensions.js

@@ -1,5 +1,15 @@
 import { observable } from '@nx-js/observer-util'
 
+let dimensionsInitialized = false
+
+export function setDimensionsInitialized (value) {
+  dimensionsInitialized = value
+}
+
+export function getDimensionsInitialized () {
+  return dimensionsInitialized
+}
+
 export default observable({
   width: 0
 })

package/entrypoints/react-native-teamplay.js

@@ -3,5 +3,6 @@ import { setPlatformHelpers } from '../platformHelpers/index.js'
 import { process } from '../processCached.js'
 
 setPlatformHelpers(platformHelpers)
+platformHelpers.initDimensionsUpdater()
 
 export default process

package/entrypoints/react-native.js

@@ -3,5 +3,6 @@ import { setPlatformHelpers } from '../platformHelpers/index.js'
 import { process } from '../process.js'
 
 setPlatformHelpers(platformHelpers)
+platformHelpers.initDimensionsUpdater()
 
 export default process

package/entrypoints/web-teamplay.js

@@ -3,5 +3,6 @@ import * as platformHelpers from '../platformHelpers/web.js'
 import { process } from '../processCached.js'
 
 setPlatformHelpers(platformHelpers)
+platformHelpers.initDimensionsUpdater()
 
 export default process

package/entrypoints/web.js

@@ -3,5 +3,6 @@ import * as platformHelpers from '../platformHelpers/web.js'
 import { process } from '../process.js'
 
 setPlatformHelpers(platformHelpers)
+platformHelpers.initDimensionsUpdater()
 
 export default process

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssxjs/runtime",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "publishConfig": {
     "access": "public"
   },
@@ -18,7 +18,9 @@
     "./entrypoints/web-teamplay": "./entrypoints/web-teamplay.js",
     "./entrypoints/react-native-teamplay": "./entrypoints/react-native-teamplay.js",
     "./constants": "./constants.cjs",
-    "./dimensions": "./dimensions.js"
+    "./dimensions": "./dimensions.js",
+    "./variables": "./variables.js",
+    "./matcher": "./matcher.js"
   },
   "type": "module",
   "scripts": {
@@ -52,5 +54,5 @@
       "optional": true
     }
   },
-  "gitHead": "af8db22bc0f2aaff393010ad7c50b1233bc23214"
+  "gitHead": "93a4681bc0182d5c2faa9e3b8aa4cbdff6c4e780"
 }

package/platformHelpers/index.js

@@ -39,3 +39,12 @@ export function isPureReact (...args) {
     throw err
   }
 }
+
+export function initDimensionsUpdater (...args) {
+  try {
+    return platformHelpers.initDimensionsUpdater(...args)
+  } catch (err) {
+    console.error('[cssxjs] platform helpers \'initDimensionsUpdater\' is not specified. Babel is probably misconfigured')
+    throw err
+  }
+}

package/platformHelpers/react-native.js

@@ -1,4 +1,5 @@
 import { Dimensions, Platform } from 'react-native'
+import dimensions, { getDimensionsInitialized, setDimensionsInitialized } from '../dimensions.js'
 
 export function getDimensions () {
   return Dimensions.get('window')
@@ -11,3 +12,24 @@ export function getPlatform () {
 export function isPureReact () {
   return false
 }
+
+// this is needed to trigger components rerendering to update @media queries
+export function initDimensionsUpdater () {
+  if (getDimensionsInitialized()) return
+  setDimensionsInitialized(true)
+  dimensions.width = Dimensions.get('window').width
+  console.log('> Init dimensions updater for React Native. Initial width:', dimensions.width)
+
+  // debounce by 200ms to avoid too many updates in a short time
+  let timeoutId
+  Dimensions.addEventListener('change', ({ window }) => {
+    if (timeoutId) clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => {
+      if (dimensions.width !== window.width) {
+        console.log('> update window width:', window.width)
+        dimensions.width = window.width
+      }
+      timeoutId = undefined
+    }, 200)
+  })
+}

package/platformHelpers/web.js

@@ -1,3 +1,5 @@
+import dimensions, { getDimensionsInitialized, setDimensionsInitialized } from '../dimensions.js'
+
 export function getDimensions () {
   if (typeof window === 'undefined' || !window.innerWidth || !window.innerHeight) {
     console.warn('[cssx] No "window" global variable. Falling back to constant window width and height of 1024x768')
@@ -16,3 +18,29 @@ export function getPlatform () {
 export function isPureReact () {
   return true
 }
+
+// this is needed to trigger components rerendering to update @media queries
+export function initDimensionsUpdater () {
+  if (getDimensionsInitialized()) return
+  setDimensionsInitialized(true)
+  if (typeof window === 'undefined' || !window.innerWidth || !window.addEventListener) {
+    console.warn('[cssx] No "window" global variable. Setting default window width to 1024 and skipping updater.')
+    dimensions.width = 1024
+    return
+  }
+  dimensions.width = window.innerWidth
+  console.log('> Init dimensions updater for Web. Initial width:', dimensions.width)
+
+  // debounce by 200ms to avoid too many updates in a short time
+  let timeoutId
+  window.addEventListener('resize', () => {
+    if (timeoutId) clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => {
+      if (dimensions.width !== window.innerWidth) {
+        console.log('> update window width:', window.innerWidth)
+        dimensions.width = window.innerWidth
+      }
+      timeoutId = undefined
+    }, 200)
+  })
+}