@furystack/shades 12.4.0 → 13.0.0

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 (66) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/README.md +3 -3
  3. package/esm/component-factory.spec.js +3 -3
  4. package/esm/component-factory.spec.js.map +1 -1
  5. package/esm/components/lazy-load.js +1 -1
  6. package/esm/components/lazy-load.js.map +1 -1
  7. package/esm/components/link-to-route.js +1 -1
  8. package/esm/components/link-to-route.js.map +1 -1
  9. package/esm/components/nested-route-link.d.ts.map +1 -1
  10. package/esm/components/nested-route-link.js +2 -1
  11. package/esm/components/nested-route-link.js.map +1 -1
  12. package/esm/components/nested-router.js +1 -1
  13. package/esm/components/nested-router.js.map +1 -1
  14. package/esm/components/route-link.d.ts.map +1 -1
  15. package/esm/components/route-link.js +2 -1
  16. package/esm/components/route-link.js.map +1 -1
  17. package/esm/components/router.js +1 -1
  18. package/esm/components/router.js.map +1 -1
  19. package/esm/css-generator.d.ts +1 -1
  20. package/esm/css-generator.js +1 -1
  21. package/esm/services/location-service.d.ts +13 -0
  22. package/esm/services/location-service.d.ts.map +1 -1
  23. package/esm/services/location-service.js +21 -1
  24. package/esm/services/location-service.js.map +1 -1
  25. package/esm/services/screen-service.d.ts.map +1 -1
  26. package/esm/services/screen-service.js +4 -0
  27. package/esm/services/screen-service.js.map +1 -1
  28. package/esm/shade-host-props-ref.integration.spec.js +13 -13
  29. package/esm/shade-host-props-ref.integration.spec.js.map +1 -1
  30. package/esm/shade-resources.integration.spec.js +5 -5
  31. package/esm/shade-resources.integration.spec.js.map +1 -1
  32. package/esm/shade.d.ts +1 -1
  33. package/esm/shade.d.ts.map +1 -1
  34. package/esm/shade.js +2 -3
  35. package/esm/shade.js.map +1 -1
  36. package/esm/shade.spec.js +15 -14
  37. package/esm/shade.spec.js.map +1 -1
  38. package/esm/shades.integration.spec.js +17 -17
  39. package/esm/shades.integration.spec.js.map +1 -1
  40. package/esm/style-manager.d.ts +4 -4
  41. package/esm/style-manager.d.ts.map +1 -1
  42. package/esm/style-manager.js +9 -9
  43. package/esm/style-manager.js.map +1 -1
  44. package/esm/style-manager.spec.js +3 -3
  45. package/esm/style-manager.spec.js.map +1 -1
  46. package/esm/vnode.integration.spec.js +18 -16
  47. package/esm/vnode.integration.spec.js.map +1 -1
  48. package/package.json +5 -5
  49. package/src/component-factory.spec.tsx +3 -3
  50. package/src/components/lazy-load.tsx +1 -1
  51. package/src/components/link-to-route.tsx +1 -1
  52. package/src/components/nested-route-link.tsx +2 -1
  53. package/src/components/nested-router.tsx +1 -1
  54. package/src/components/route-link.tsx +2 -1
  55. package/src/components/router.tsx +1 -1
  56. package/src/css-generator.ts +1 -1
  57. package/src/services/location-service.tsx +22 -1
  58. package/src/services/screen-service.ts +4 -0
  59. package/src/shade-host-props-ref.integration.spec.tsx +13 -13
  60. package/src/shade-resources.integration.spec.tsx +6 -5
  61. package/src/shade.spec.tsx +15 -14
  62. package/src/shade.ts +3 -4
  63. package/src/shades.integration.spec.tsx +17 -17
  64. package/src/style-manager.spec.ts +3 -3
  65. package/src/style-manager.ts +9 -9
  66. package/src/vnode.integration.spec.tsx +18 -16
package/src/vnode.integration.spec.tsx CHANGED
@@ -19,7 +19,7 @@ describe('VNode reconciliation integration tests', () => {
19
19
  const rootElement = document.getElementById('root') as HTMLDivElement
20
20
 
21
21
  const ExampleComponent = Shade({
22
- shadowDomName: 'morph-focus-test',
22
+ customElementName: 'morph-focus-test',
23
23
  render: ({ useState }) => {
24
24
  const [label, setLabel] = useState('label', 'initial')
25
25
  return (
@@ -64,7 +64,7 @@ describe('VNode reconciliation integration tests', () => {
64
64
  const rootElement = document.getElementById('root') as HTMLDivElement
65
65
 
66
66
  const ExampleComponent = Shade({
67
- shadowDomName: 'morph-focus-textarea-test',
67
+ customElementName: 'morph-focus-textarea-test',
68
68
  render: ({ useState }) => {
69
69
  const [count, setCount] = useState('count', 0)
70
70
  return (
@@ -106,7 +106,7 @@ describe('VNode reconciliation integration tests', () => {
106
106
  const rootElement = document.getElementById('root') as HTMLDivElement
107
107
 
108
108
  const ExampleComponent = Shade({
109
- shadowDomName: 'morph-form-value-test',
109
+ customElementName: 'morph-form-value-test',
110
110
  render: ({ useState }) => {
111
111
  const [title, setTitle] = useState('title', 'Title')
112
112
  return (
@@ -151,7 +151,7 @@ describe('VNode reconciliation integration tests', () => {
151
151
  const rootElement = document.getElementById('root') as HTMLDivElement
152
152
 
153
153
  const ExampleComponent = Shade({
154
- shadowDomName: 'morph-checkbox-test',
154
+ customElementName: 'morph-checkbox-test',
155
155
  render: ({ useState }) => {
156
156
  const [count, setCount] = useState('count', 0)
157
157
  return (
@@ -195,7 +195,7 @@ describe('VNode reconciliation integration tests', () => {
195
195
  const rootElement = document.getElementById('root') as HTMLDivElement
196
196
 
197
197
  const ExampleComponent = Shade({
198
- shadowDomName: 'morph-select-test',
198
+ customElementName: 'morph-select-test',
199
199
  render: ({ useState }) => {
200
200
  const [label, setLabel] = useState('label', 'Pick one')
201
201
  return (
@@ -245,7 +245,7 @@ describe('VNode reconciliation integration tests', () => {
245
245
  const rootElement = document.getElementById('root') as HTMLDivElement
246
246
 
247
247
  const ExampleComponent = Shade({
248
- shadowDomName: 'morph-identity-test',
248
+ customElementName: 'morph-identity-test',
249
249
  render: ({ useState }) => {
250
250
  const [count, setCount] = useState('count', 0)
251
251
  return (
@@ -287,7 +287,7 @@ describe('VNode reconciliation integration tests', () => {
287
287
  const rootElement = document.getElementById('root') as HTMLDivElement
288
288
 
289
289
  const ExampleComponent = Shade({
290
- shadowDomName: 'morph-tag-change-test',
290
+ customElementName: 'morph-tag-change-test',
291
291
  render: ({ useState }) => {
292
292
  const [useDiv, setUseDiv] = useState('useDiv', true)
293
293
  return useDiv ? (
@@ -333,9 +333,11 @@ describe('VNode reconciliation integration tests', () => {
333
333
  const rootElement = document.getElementById('root') as HTMLDivElement
334
334
 
335
335
  const ExampleComponent = Shade({
336
- shadowDomName: 'morph-animation-test',
336
+ customElementName: 'morph-animation-test',
337
337
  render: ({ useState }) => {
338
- const [isActive, setIsActive] = useState('isActive', false)
338
+ const [isActive, setIsActive] =
339
+ // eslint-disable-next-line furystack/no-css-state-hooks -- test for re-render behavior, not CSS state
340
+ useState('isActive', false)
339
341
  return (
340
342
  <div>
341
343
  <div id="animated-box" className={isActive ? 'active' : 'inactive'} />
@@ -372,7 +374,7 @@ describe('VNode reconciliation integration tests', () => {
372
374
  const rootElement = document.getElementById('root') as HTMLDivElement
373
375
 
374
376
  const ExampleComponent = Shade({
375
- shadowDomName: 'morph-style-transition-test',
377
+ customElementName: 'morph-style-transition-test',
376
378
  render: ({ useState }) => {
377
379
  const [isExpanded, setIsExpanded] = useState('isExpanded', false)
378
380
  return (
@@ -422,7 +424,7 @@ describe('VNode reconciliation integration tests', () => {
422
424
  const clicks: number[] = []
423
425
 
424
426
  const ExampleComponent = Shade({
425
- shadowDomName: 'morph-handler-test',
427
+ customElementName: 'morph-handler-test',
426
428
  render: ({ useState }) => {
427
429
  const [count, setCount] = useState('count', 0)
428
430
  return (
@@ -480,7 +482,7 @@ describe('VNode reconciliation integration tests', () => {
480
482
  const obs = new ObservableValue('hello')
481
483
 
482
484
  const ExampleComponent = Shade({
483
- shadowDomName: 'morph-observable-test',
485
+ customElementName: 'morph-observable-test',
484
486
  render: ({ useObservable }) => {
485
487
  const [value] = useObservable('obs', obs)
486
488
  return (
@@ -526,7 +528,7 @@ describe('VNode reconciliation integration tests', () => {
526
528
  const rootElement = document.getElementById('root') as HTMLDivElement
527
529
 
528
530
  const ExampleComponent = Shade({
529
- shadowDomName: 'morph-fragment-test',
531
+ customElementName: 'morph-fragment-test',
530
532
  render: ({ useState }) => {
531
533
  const [count, setCount] = useState('count', 0)
532
534
  return (
@@ -567,7 +569,7 @@ describe('VNode reconciliation integration tests', () => {
567
569
  const rootElement = document.getElementById('root') as HTMLDivElement
568
570
 
569
571
  const ExampleComponent = Shade({
570
- shadowDomName: 'morph-text-result-test',
572
+ customElementName: 'morph-text-result-test',
571
573
  render: ({ useState }) => {
572
574
  const [text] = useState('text', 'initial')
573
575
  return text
@@ -609,7 +611,7 @@ describe('VNode reconciliation integration tests', () => {
609
611
  const childRenderSpy = vi.fn()
610
612
 
611
613
  const ChildComponent = Shade<{ value: number }>({
612
- shadowDomName: 'morph-child-component',
614
+ customElementName: 'morph-child-component',
613
615
  render: ({ props }) => {
614
616
  childRenderSpy()
615
617
  return <span id="child-value">{props.value}</span>
@@ -617,7 +619,7 @@ describe('VNode reconciliation integration tests', () => {
617
619
  })
618
620
 
619
621
  const ParentComponent = Shade({
620
- shadowDomName: 'morph-parent-component',
622
+ customElementName: 'morph-parent-component',
621
623
  render: ({ useState }) => {
622
624
  const [count, setCount] = useState('count', 0)
623
625
  return (