@cssxjs/runtime 0.2.10 → 0.2.12

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# 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

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.10",
+  "version": "0.2.12",
   "publishConfig": {
     "access": "public"
   },
@@ -54,5 +54,5 @@
       "optional": true
     }
   },
-  "gitHead": "df668d1f0c63ad78e0668d63613f304e5cca3584"
+  "gitHead": "353563eb72be74e2911d1343adcda32eceba43e5"
 }

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)
+  })
+}