@tamagui/web 3.0.5 → 3.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/cjs/_withNativeStyle.cjs +37 -20
  2. package/dist/cjs/_withNativeStyle.native.cjs +37 -20
  3. package/dist/cjs/_withNativeStyle.native.js +37 -20
  4. package/dist/cjs/_withNativeStyle.native.js.map +1 -1
  5. package/dist/cjs/helpers/getSplitStyles.cjs +2 -1
  6. package/dist/cjs/helpers/getSplitStyles.native.cjs +2 -1
  7. package/dist/cjs/helpers/getSplitStyles.native.js +2 -1
  8. package/dist/cjs/helpers/getSplitStyles.native.js.map +1 -1
  9. package/dist/cjs/helpers/nativeStyleEngine.cjs +67 -121
  10. package/dist/cjs/helpers/nativeStyleEngine.native.cjs +66 -161
  11. package/dist/cjs/helpers/nativeStyleEngine.native.js +66 -161
  12. package/dist/cjs/helpers/nativeStyleEngine.native.js.map +1 -1
  13. package/dist/esm/_withNativeStyle.mjs +38 -21
  14. package/dist/esm/_withNativeStyle.mjs.map +1 -1
  15. package/dist/esm/_withNativeStyle.native.js +38 -21
  16. package/dist/esm/_withNativeStyle.native.js.map +1 -1
  17. package/dist/esm/helpers/getSplitStyles.mjs +2 -1
  18. package/dist/esm/helpers/getSplitStyles.mjs.map +1 -1
  19. package/dist/esm/helpers/getSplitStyles.native.js +2 -1
  20. package/dist/esm/helpers/getSplitStyles.native.js.map +1 -1
  21. package/dist/esm/helpers/nativeStyleEngine.mjs +66 -121
  22. package/dist/esm/helpers/nativeStyleEngine.mjs.map +1 -1
  23. package/dist/esm/helpers/nativeStyleEngine.native.js +65 -161
  24. package/dist/esm/helpers/nativeStyleEngine.native.js.map +1 -1
  25. package/package.json +17 -17
  26. package/src/_withNativeStyle.tsx +67 -31
  27. package/src/helpers/getSplitStyles.tsx +3 -0
  28. package/src/helpers/nativeStyleEngine.ts +95 -162
  29. package/types/_withNativeStyle.d.ts +4 -3
  30. package/types/_withNativeStyle.d.ts.map +1 -1
  31. package/types/helpers/getSplitStyles.d.ts.map +1 -1
  32. package/types/helpers/nativeStyleEngine.d.ts +19 -6
  33. package/types/helpers/nativeStyleEngine.d.ts.map +1 -1
@@ -20,10 +20,11 @@ var __copyProps = (to, from, except, desc) => {
20
20
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
21
21
  var nativeStyleEngine_exports = {};
22
22
  __export(nativeStyleEngine_exports, {
23
+ createNativeStyleLinkState: () => createNativeStyleLinkState,
23
24
  flushNativeStyleLinks: () => flushNativeStyleLinks,
24
25
  getNativeStyleEngine: () => getNativeStyleEngine,
25
26
  getNativeStyleEngineCacheStats: () => getNativeStyleEngineCacheStats,
26
- linkNativeStyleMapping: () => linkNativeStyleMapping,
27
+ linkNativeStyleHost: () => linkNativeStyleHost,
27
28
  nativeTextInputColorProps: () => nativeTextInputColorProps,
28
29
  normalizeNativeStyle: () => normalizeNativeStyle,
29
30
  queueNativeViewState: () => queueNativeViewState,
@@ -137,11 +138,10 @@ function syncTableState(compiled, stateName, theme) {
137
138
  }
138
139
  function setNativeStyleEngine(next) {
139
140
  if (engine !== next) {
140
- settleReleases();
141
141
  compiledMappings.clear();
142
142
  scopeMappings.clear();
143
- pendingLinks = [];
144
- unlinkedPending = 0;
143
+ pendingHosts = [];
144
+ pendingStates = [];
145
145
  }
146
146
  engine = next;
147
147
  if (next) {
@@ -164,7 +164,7 @@ function updateNativeStyleScope(scopeId, stateName, theme) {
164
164
  if (engine) {
165
165
  const linked = scopeMappings.get(scopeId);
166
166
  if (linked) {
167
- for (const compiled of linked.keys()) {
167
+ for (const compiled of linked) {
168
168
  syncTableState(compiled, stateName, theme);
169
169
  }
170
170
  }
@@ -173,137 +173,83 @@ function updateNativeStyleScope(scopeId, stateName, theme) {
173
173
  }
174
174
  function removeNativeStyleScope(scopeId) {
175
175
  if (!scopeStates.delete(scopeId)) return;
176
+ queueMicrotask(() => {
177
+ if (!scopeStates.has(scopeId)) scopeMappings.delete(scopeId);
178
+ });
176
179
  engine?.removeScope(scopeId);
177
180
  }
178
181
  function resolveNativeStyleMapping(mapping, stateName, theme) {
179
182
  return resolveCompiledMapping(getCompiledMapping(mapping), stateName, theme).renderProps;
180
183
  }
181
- let pendingLinks = [];
182
- let unlinkedPending = 0;
183
- function trackScopeMapping(link, delta) {
184
- let linked = scopeMappings.get(link.scopeId);
185
- if (!linked) scopeMappings.set(link.scopeId, linked = /* @__PURE__ */ new Map());
186
- const count = (linked.get(link.compiled) ?? 0) + delta;
187
- if (count) {
188
- linked.set(link.compiled, count);
189
- } else {
190
- linked.delete(link.compiled);
191
- if (!linked.size) scopeMappings.delete(link.scopeId);
192
- }
184
+ function createNativeStyleLinkState(mapping, scopeId, stateName, theme) {
185
+ return {
186
+ mapping,
187
+ scopeId,
188
+ stateName,
189
+ theme
190
+ };
191
+ }
192
+ let pendingHosts = [];
193
+ let pendingStates = [];
194
+ const maxPendingHosts = 4096;
195
+ let idleFlushQueued = false;
196
+ function idleFlush() {
197
+ idleFlushQueued = false;
198
+ flushNativeStyleLinks();
199
+ }
200
+ function addScopeMapping(scopeId, compiled) {
201
+ let linked = scopeMappings.get(scopeId);
202
+ if (!linked) scopeMappings.set(scopeId, linked = /* @__PURE__ */ new Set());
203
+ linked.add(compiled);
193
204
  }
194
205
  function flushNativeStyleLinks() {
195
- settleReleases();
196
- if (!pendingLinks.length) return;
197
- const links = pendingLinks;
198
- pendingLinks = [];
199
- unlinkedPending = 0;
206
+ if (!pendingHosts.length) return;
207
+ const hosts = pendingHosts;
208
+ const states = pendingStates;
209
+ pendingHosts = [];
210
+ pendingStates = [];
200
211
  if (!engine) return;
201
- const live = links.filter((link) => link.id === 0);
202
- if (!live.length) return;
203
- const refs = [];
204
- const tableIds = [];
205
- const scopeIndexes = [];
212
+ const tableIds = new Array(hosts.length);
213
+ const scopeIndexes = new Array(hosts.length);
206
214
  const scopes = [];
207
- for (const link of live) {
208
- let scopeIndex = scopes.indexOf(link.scopeId);
209
- if (scopeIndex === -1) scopeIndex = scopes.push(link.scopeId) - 1;
210
- refs.push(link.ref);
211
- tableIds.push(link.compiled.tableId);
212
- scopeIndexes.push(scopeIndex);
213
- }
214
- const firstId = engine.linkTables(refs, tableIds, scopeIndexes, scopes);
215
- for (let i = 0; i < live.length; i++) {
216
- const link = live[i];
217
- link.id = firstId + i;
218
- link.owner = engine;
219
- link.ref = null;
220
- trackScopeMapping(link, 1);
221
- }
222
- }
223
- const releases = /* @__PURE__ */ new Map();
224
- let settleQueued = false;
225
- function settleReleases() {
226
- settleQueued = false;
227
- if (!releases.size) return;
228
- const settling = [...releases.values()];
229
- releases.clear();
230
- for (const release of settling) release.settle();
231
- }
232
- function releasable(ref, compiled, scopeId, id, settle) {
233
- const handle = {
234
- id,
235
- unlink: () => {
236
- const prior = releases.get(ref);
237
- if (prior && prior.handle !== handle) prior.settle();
238
- releases.set(ref, {
239
- compiled,
240
- scopeId,
241
- handle,
242
- settle
243
- });
244
- if (!settleQueued) {
245
- settleQueued = true;
246
- queueMicrotask(settleReleases);
247
- }
215
+ let last;
216
+ let tableId = 0;
217
+ let scopeIndex = 0;
218
+ for (let i = 0; i < hosts.length; i++) {
219
+ const state = states[i];
220
+ if (state !== last) {
221
+ last = state;
222
+ const compiled = getCompiledMapping(state.mapping);
223
+ syncTableState(compiled, state.stateName, state.theme);
224
+ addScopeMapping(state.scopeId, compiled);
225
+ tableId = compiled.tableId;
226
+ scopeIndex = scopes.indexOf(state.scopeId);
227
+ if (scopeIndex === -1) scopeIndex = scopes.push(state.scopeId) - 1;
248
228
  }
249
- };
250
- return handle;
229
+ tableIds[i] = tableId;
230
+ scopeIndexes[i] = scopeIndex;
231
+ }
232
+ engine.linkTables(hosts, tableIds, scopeIndexes, scopes);
251
233
  }
252
- function linkNativeStyleMapping(ref, mapping, scopeId, stateName, theme) {
253
- if (!engine) return null;
254
- const compiled = getCompiledMapping(mapping);
255
- const scopeState = scopeStates.get(scopeId);
256
- const stale = scopeState && (scopeState.name !== stateName || scopeState.theme !== theme);
257
- const kept = releases.get(ref);
258
- if (kept) {
259
- releases.delete(ref);
260
- if (!stale && kept.compiled === compiled && kept.scopeId === scopeId) return kept.handle;
261
- kept.settle();
234
+ function linkNativeStyleHost(host, state) {
235
+ if (!engine) return;
236
+ const live = scopeStates.get(state.scopeId);
237
+ if (live && (live.name !== state.stateName || live.theme !== state.theme)) {
238
+ const compiled = getCompiledMapping(state.mapping);
239
+ syncTableState(compiled, live.name, live.theme);
240
+ addScopeMapping(state.scopeId, compiled);
241
+ engine.link(host, compiled.tableId, state.scopeId, true);
242
+ return;
262
243
  }
263
- if (stale) {
264
- syncTableState(compiled, scopeState.name, scopeState.theme);
265
- const handle = engine.link(ref, compiled.tableId, scopeId, true);
266
- if (!handle) return null;
267
- const link2 = {
268
- ref: null,
269
- compiled,
270
- scopeId,
271
- id: handle.id,
272
- owner: engine
273
- };
274
- trackScopeMapping(link2, 1);
275
- return releasable(ref, compiled, scopeId, handle.id, () => {
276
- if (link2.id === -1) return;
277
- link2.id = -1;
278
- if (link2.owner === engine) trackScopeMapping(link2, -1);
279
- handle.unlink();
280
- });
244
+ pendingHosts.push(host);
245
+ pendingStates.push(state);
246
+ if (pendingHosts.length >= maxPendingHosts && !idleFlushQueued) {
247
+ idleFlushQueued = true;
248
+ requestIdleCallback(idleFlush);
281
249
  }
282
- syncTableState(compiled, stateName, theme);
283
- const link = {
284
- ref,
285
- compiled,
286
- scopeId,
287
- id: 0,
288
- owner: null
289
- };
290
- pendingLinks.push(link);
291
- return releasable(ref, compiled, scopeId, 0, () => {
292
- const id = link.id;
293
- if (id === -1) return;
294
- link.id = -1;
295
- link.ref = null;
296
- if (id > 0) {
297
- if (link.owner === engine) trackScopeMapping(link, -1);
298
- link.owner.unlink(id);
299
- } else if (++unlinkedPending > 512 && unlinkedPending * 2 > pendingLinks.length) {
300
- pendingLinks = pendingLinks.filter((pending2) => pending2.id === 0);
301
- unlinkedPending = 0;
302
- }
303
- });
304
250
  }
305
251
  const getNativeStyleEngineCacheStats = () => {
306
- const active = new Set([...scopeMappings.values()].flatMap((linked) => [...linked.keys()]));
252
+ const active = new Set([...scopeMappings.values()].flatMap((linked) => [...linked]));
307
253
  return {
308
254
  mappings: compiledMappings.size,
309
255
  activeMappings: active.size,
@@ -22,10 +22,11 @@ var __copyProps = (to, from, except, desc) => {
22
22
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
23
23
  var nativeStyleEngine_exports = {};
24
24
  __export(nativeStyleEngine_exports, {
25
+ createNativeStyleLinkState: () => createNativeStyleLinkState,
25
26
  flushNativeStyleLinks: () => flushNativeStyleLinks,
26
27
  getNativeStyleEngine: () => getNativeStyleEngine,
27
28
  getNativeStyleEngineCacheStats: () => getNativeStyleEngineCacheStats,
28
- linkNativeStyleMapping: () => linkNativeStyleMapping,
29
+ linkNativeStyleHost: () => linkNativeStyleHost,
29
30
  nativeTextInputColorProps: () => nativeTextInputColorProps,
30
31
  normalizeNativeStyle: () => normalizeNativeStyle,
31
32
  queueNativeViewState: () => queueNativeViewState,
@@ -177,11 +178,10 @@ function syncTableState(compiled, stateName, theme) {
177
178
  }
178
179
  function setNativeStyleEngine(next) {
179
180
  if (engine !== next) {
180
- settleReleases();
181
181
  compiledMappings.clear();
182
182
  scopeMappings.clear();
183
- pendingLinks = [];
184
- unlinkedPending = 0;
183
+ pendingHosts = [];
184
+ pendingStates = [];
185
185
  }
186
186
  engine = next;
187
187
  if (next) {
@@ -223,7 +223,7 @@ function updateNativeStyleScope(scopeId, stateName, theme) {
223
223
  if (linked) {
224
224
  var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
225
225
  try {
226
- for (var _iterator = linked.keys()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
226
+ for (var _iterator = linked[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
227
227
  var compiled = _step.value;
228
228
  syncTableState(compiled, stateName, theme);
229
229
  }
@@ -247,179 +247,84 @@ function updateNativeStyleScope(scopeId, stateName, theme) {
247
247
  }
248
248
  function removeNativeStyleScope(scopeId) {
249
249
  if (!scopeStates.delete(scopeId)) return;
250
+ queueMicrotask(function() {
251
+ if (!scopeStates.has(scopeId)) scopeMappings.delete(scopeId);
252
+ });
250
253
  engine === null || engine === void 0 ? void 0 : engine.removeScope(scopeId);
251
254
  }
252
255
  function resolveNativeStyleMapping(mapping, stateName, theme) {
253
256
  return resolveCompiledMapping(getCompiledMapping(mapping), stateName, theme).renderProps;
254
257
  }
255
- var pendingLinks = [];
256
- var unlinkedPending = 0;
257
- function trackScopeMapping(link, delta) {
258
- var linked = scopeMappings.get(link.scopeId);
259
- if (!linked) scopeMappings.set(link.scopeId, linked = /* @__PURE__ */ new Map());
260
- var _linked_get;
261
- var count = ((_linked_get = linked.get(link.compiled)) !== null && _linked_get !== void 0 ? _linked_get : 0) + delta;
262
- if (count) {
263
- linked.set(link.compiled, count);
264
- } else {
265
- linked.delete(link.compiled);
266
- if (!linked.size) scopeMappings.delete(link.scopeId);
267
- }
258
+ function createNativeStyleLinkState(mapping, scopeId, stateName, theme) {
259
+ return {
260
+ mapping,
261
+ scopeId,
262
+ stateName,
263
+ theme
264
+ };
265
+ }
266
+ var pendingHosts = [];
267
+ var pendingStates = [];
268
+ var maxPendingHosts = 4096;
269
+ var idleFlushQueued = false;
270
+ function idleFlush() {
271
+ idleFlushQueued = false;
272
+ flushNativeStyleLinks();
273
+ }
274
+ function addScopeMapping(scopeId, compiled) {
275
+ var linked = scopeMappings.get(scopeId);
276
+ if (!linked) scopeMappings.set(scopeId, linked = /* @__PURE__ */ new Set());
277
+ linked.add(compiled);
268
278
  }
269
279
  function flushNativeStyleLinks() {
270
- settleReleases();
271
- if (!pendingLinks.length) return;
272
- var links = pendingLinks;
273
- pendingLinks = [];
274
- unlinkedPending = 0;
280
+ if (!pendingHosts.length) return;
281
+ var hosts = pendingHosts;
282
+ var states = pendingStates;
283
+ pendingHosts = [];
284
+ pendingStates = [];
275
285
  if (!engine) return;
276
- var live = links.filter(function(link2) {
277
- return link2.id === 0;
278
- });
279
- if (!live.length) return;
280
- var refs = [];
281
- var tableIds = [];
282
- var scopeIndexes = [];
286
+ var tableIds = new Array(hosts.length);
287
+ var scopeIndexes = new Array(hosts.length);
283
288
  var scopes = [];
284
- var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
285
- try {
286
- for (var _iterator = live[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
287
- var link = _step.value;
288
- var scopeIndex = scopes.indexOf(link.scopeId);
289
- if (scopeIndex === -1) scopeIndex = scopes.push(link.scopeId) - 1;
290
- refs.push(link.ref);
291
- tableIds.push(link.compiled.tableId);
292
- scopeIndexes.push(scopeIndex);
289
+ var last;
290
+ var tableId = 0;
291
+ var scopeIndex = 0;
292
+ for (var i = 0; i < hosts.length; i++) {
293
+ var state = states[i];
294
+ if (state !== last) {
295
+ last = state;
296
+ var compiled = getCompiledMapping(state.mapping);
297
+ syncTableState(compiled, state.stateName, state.theme);
298
+ addScopeMapping(state.scopeId, compiled);
299
+ tableId = compiled.tableId;
300
+ scopeIndex = scopes.indexOf(state.scopeId);
301
+ if (scopeIndex === -1) scopeIndex = scopes.push(state.scopeId) - 1;
293
302
  }
294
- } catch (err) {
295
- _didIteratorError = true;
296
- _iteratorError = err;
297
- } finally {
298
- try {
299
- if (!_iteratorNormalCompletion && _iterator.return != null) {
300
- _iterator.return();
301
- }
302
- } finally {
303
- if (_didIteratorError) {
304
- throw _iteratorError;
305
- }
306
- }
307
- }
308
- var firstId = engine.linkTables(refs, tableIds, scopeIndexes, scopes);
309
- for (var i = 0; i < live.length; i++) {
310
- var link1 = live[i];
311
- link1.id = firstId + i;
312
- link1.owner = engine;
313
- link1.ref = null;
314
- trackScopeMapping(link1, 1);
303
+ tableIds[i] = tableId;
304
+ scopeIndexes[i] = scopeIndex;
315
305
  }
306
+ engine.linkTables(hosts, tableIds, scopeIndexes, scopes);
316
307
  }
317
- var releases = /* @__PURE__ */ new Map();
318
- var settleQueued = false;
319
- function settleReleases() {
320
- settleQueued = false;
321
- if (!releases.size) return;
322
- var settling = [...releases.values()];
323
- releases.clear();
324
- var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
325
- try {
326
- for (var _iterator = settling[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
327
- var release = _step.value;
328
- release.settle();
329
- }
330
- } catch (err) {
331
- _didIteratorError = true;
332
- _iteratorError = err;
333
- } finally {
334
- try {
335
- if (!_iteratorNormalCompletion && _iterator.return != null) {
336
- _iterator.return();
337
- }
338
- } finally {
339
- if (_didIteratorError) {
340
- throw _iteratorError;
341
- }
342
- }
343
- }
344
- }
345
- function releasable(ref, compiled, scopeId, id, settle) {
346
- var handle = {
347
- id,
348
- unlink: function() {
349
- var prior = releases.get(ref);
350
- if (prior && prior.handle !== handle) prior.settle();
351
- releases.set(ref, {
352
- compiled,
353
- scopeId,
354
- handle,
355
- settle
356
- });
357
- if (!settleQueued) {
358
- settleQueued = true;
359
- queueMicrotask(settleReleases);
360
- }
361
- }
362
- };
363
- return handle;
364
- }
365
- function linkNativeStyleMapping(ref, mapping, scopeId, stateName, theme) {
366
- if (!engine) return null;
367
- var compiled = getCompiledMapping(mapping);
368
- var scopeState = scopeStates.get(scopeId);
369
- var stale = scopeState && (scopeState.name !== stateName || scopeState.theme !== theme);
370
- var kept = releases.get(ref);
371
- if (kept) {
372
- releases.delete(ref);
373
- if (!stale && kept.compiled === compiled && kept.scopeId === scopeId) return kept.handle;
374
- kept.settle();
308
+ function linkNativeStyleHost(host, state) {
309
+ if (!engine) return;
310
+ var live = scopeStates.get(state.scopeId);
311
+ if (live && (live.name !== state.stateName || live.theme !== state.theme)) {
312
+ var compiled = getCompiledMapping(state.mapping);
313
+ syncTableState(compiled, live.name, live.theme);
314
+ addScopeMapping(state.scopeId, compiled);
315
+ engine.link(host, compiled.tableId, state.scopeId, true);
316
+ return;
375
317
  }
376
- if (stale) {
377
- syncTableState(compiled, scopeState.name, scopeState.theme);
378
- var handle = engine.link(ref, compiled.tableId, scopeId, true);
379
- if (!handle) return null;
380
- var link = {
381
- ref: null,
382
- compiled,
383
- scopeId,
384
- id: handle.id,
385
- owner: engine
386
- };
387
- trackScopeMapping(link, 1);
388
- return releasable(ref, compiled, scopeId, handle.id, function() {
389
- if (link.id === -1) return;
390
- link.id = -1;
391
- if (link.owner === engine) trackScopeMapping(link, -1);
392
- handle.unlink();
393
- });
318
+ pendingHosts.push(host);
319
+ pendingStates.push(state);
320
+ if (pendingHosts.length >= maxPendingHosts && !idleFlushQueued) {
321
+ idleFlushQueued = true;
322
+ requestIdleCallback(idleFlush);
394
323
  }
395
- syncTableState(compiled, stateName, theme);
396
- var link1 = {
397
- ref,
398
- compiled,
399
- scopeId,
400
- id: 0,
401
- owner: null
402
- };
403
- pendingLinks.push(link1);
404
- return releasable(ref, compiled, scopeId, 0, function() {
405
- var id = link1.id;
406
- if (id === -1) return;
407
- link1.id = -1;
408
- link1.ref = null;
409
- if (id > 0) {
410
- if (link1.owner === engine) trackScopeMapping(link1, -1);
411
- link1.owner.unlink(id);
412
- } else if (++unlinkedPending > 512 && unlinkedPending * 2 > pendingLinks.length) {
413
- pendingLinks = pendingLinks.filter(function(pending2) {
414
- return pending2.id === 0;
415
- });
416
- unlinkedPending = 0;
417
- }
418
- });
419
324
  }
420
325
  var getNativeStyleEngineCacheStats = function() {
421
326
  var active = new Set([...scopeMappings.values()].flatMap(function(linked) {
422
- return [...linked.keys()];
327
+ return [...linked];
423
328
  }));
424
329
  return {
425
330
  mappings: compiledMappings.size,