sigpro 1.0.14 → 1.2.39

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 (109) hide show
  1. package/Readme.md +164 -1008
  2. package/dist/sigpro.editor.js +1 -0
  3. package/dist/sigpro.grid.js +78 -0
  4. package/dist/sigpro.js +1 -0
  5. package/dist/sigpro.ui.css +2 -0
  6. package/dist/sigpro.ui.js +1 -0
  7. package/dist/sigpro.utils.js +1 -0
  8. package/dist/sigpro.vite.js +4 -0
  9. package/package.json +64 -14
  10. package/sigpro.d.ts +395 -0
  11. package/.github/workflows/publish.yml +0 -25
  12. package/bun.lock +0 -385
  13. package/docs/404.html +0 -22
  14. package/docs/api/components.html +0 -595
  15. package/docs/api/effects.html +0 -787
  16. package/docs/api/fetch.html +0 -873
  17. package/docs/api/pages.html +0 -405
  18. package/docs/api/quick.html +0 -217
  19. package/docs/api/routing.html +0 -628
  20. package/docs/api/signals.html +0 -683
  21. package/docs/api/storage.html +0 -820
  22. package/docs/assets/api_components.md.BlFwj17l.js +0 -571
  23. package/docs/assets/api_components.md.BlFwj17l.lean.js +0 -1
  24. package/docs/assets/api_effects.md.Br_yStBS.js +0 -763
  25. package/docs/assets/api_effects.md.Br_yStBS.lean.js +0 -1
  26. package/docs/assets/api_fetch.md.DQLBJSoq.js +0 -849
  27. package/docs/assets/api_fetch.md.DQLBJSoq.lean.js +0 -1
  28. package/docs/assets/api_pages.md.BP19nHXw.js +0 -381
  29. package/docs/assets/api_pages.md.BP19nHXw.lean.js +0 -1
  30. package/docs/assets/api_quick.md.BDS3ttnt.js +0 -193
  31. package/docs/assets/api_quick.md.BDS3ttnt.lean.js +0 -1
  32. package/docs/assets/api_routing.md.7SNAZXtp.js +0 -604
  33. package/docs/assets/api_routing.md.7SNAZXtp.lean.js +0 -1
  34. package/docs/assets/api_signals.md.CrW68-BA.js +0 -659
  35. package/docs/assets/api_signals.md.CrW68-BA.lean.js +0 -1
  36. package/docs/assets/api_storage.md.COEWBXHk.js +0 -796
  37. package/docs/assets/api_storage.md.COEWBXHk.lean.js +0 -1
  38. package/docs/assets/app.DtmzNmNl.js +0 -1
  39. package/docs/assets/chunks/framework.C8AWLET_.js +0 -19
  40. package/docs/assets/chunks/theme.yfWKMLQM.js +0 -1
  41. package/docs/assets/guide_getting-started.md.BeQpK3vd.js +0 -172
  42. package/docs/assets/guide_getting-started.md.BeQpK3vd.lean.js +0 -1
  43. package/docs/assets/guide_why.md.DXchYMN-.js +0 -23
  44. package/docs/assets/guide_why.md.DXchYMN-.lean.js +0 -1
  45. package/docs/assets/index.md.uvMJmU4o.js +0 -1
  46. package/docs/assets/index.md.uvMJmU4o.lean.js +0 -1
  47. package/docs/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  48. package/docs/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  49. package/docs/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  50. package/docs/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  51. package/docs/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  52. package/docs/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  53. package/docs/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  54. package/docs/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  55. package/docs/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  56. package/docs/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  57. package/docs/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  58. package/docs/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  59. package/docs/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  60. package/docs/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  61. package/docs/assets/style.DJRheFKp.css +0 -1
  62. package/docs/assets/ui_intro.md.gZ21GFqo.js +0 -1
  63. package/docs/assets/ui_intro.md.gZ21GFqo.lean.js +0 -1
  64. package/docs/assets/vite_plugin.md.gDWEi8f0.js +0 -225
  65. package/docs/assets/vite_plugin.md.gDWEi8f0.lean.js +0 -1
  66. package/docs/guide/getting-started.html +0 -196
  67. package/docs/guide/why.html +0 -47
  68. package/docs/hashmap.json +0 -1
  69. package/docs/index.html +0 -25
  70. package/docs/logo.svg +0 -118
  71. package/docs/ui/intro.html +0 -25
  72. package/docs/vite/plugin.html +0 -249
  73. package/docs/vp-icons.css +0 -1
  74. package/index.js +0 -3
  75. package/packages/docs/.vitepress/cache/deps/@theme_index.js +0 -275
  76. package/packages/docs/.vitepress/cache/deps/@theme_index.js.map +0 -7
  77. package/packages/docs/.vitepress/cache/deps/_metadata.json +0 -40
  78. package/packages/docs/.vitepress/cache/deps/chunk-3S55Y3P7.js +0 -12951
  79. package/packages/docs/.vitepress/cache/deps/chunk-3S55Y3P7.js.map +0 -7
  80. package/packages/docs/.vitepress/cache/deps/chunk-RLEUDPPB.js +0 -9719
  81. package/packages/docs/.vitepress/cache/deps/chunk-RLEUDPPB.js.map +0 -7
  82. package/packages/docs/.vitepress/cache/deps/package.json +0 -3
  83. package/packages/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4505
  84. package/packages/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
  85. package/packages/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -583
  86. package/packages/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
  87. package/packages/docs/.vitepress/cache/deps/vue.js +0 -347
  88. package/packages/docs/.vitepress/cache/deps/vue.js.map +0 -7
  89. package/packages/docs/.vitepress/config.js +0 -68
  90. package/packages/docs/api/components.md +0 -760
  91. package/packages/docs/api/effects.md +0 -1039
  92. package/packages/docs/api/fetch.md +0 -998
  93. package/packages/docs/api/pages.md +0 -497
  94. package/packages/docs/api/quick.md +0 -436
  95. package/packages/docs/api/routing.md +0 -784
  96. package/packages/docs/api/signals.md +0 -899
  97. package/packages/docs/api/storage.md +0 -952
  98. package/packages/docs/guide/getting-started.md +0 -308
  99. package/packages/docs/guide/why.md +0 -135
  100. package/packages/docs/index.md +0 -84
  101. package/packages/docs/logo.svg +0 -118
  102. package/packages/docs/public/logo.svg +0 -118
  103. package/packages/docs/ui/intro.md +0 -16
  104. package/packages/docs/vite/plugin.md +0 -423
  105. package/packages/sigpro/plugin.js +0 -91
  106. package/packages/sigpro/plugin.min.js +0 -1
  107. package/packages/sigpro/sigpro.js +0 -631
  108. package/packages/sigpro/sigpro.min.js +0 -1
  109. package/vite.config.js +0 -24
@@ -1,118 +0,0 @@
1
- <?xml version="1.0" standalone="no"?>
2
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
3
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
4
- <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
5
- width="600.000000pt" height="591.000000pt" viewBox="0 0 600.000000 591.000000"
6
- preserveAspectRatio="xMidYMid meet">
7
- <g transform="translate(0.000000,591.000000) scale(0.100000,-0.100000)"
8
- fill="#000000" stroke="none">
9
- <path d="M1130 3454 c-44 -9 -84 -27 -123 -57 -97 -76 -91 -242 12 -310 34
10
- -23 60 -32 193 -71 58 -17 78 -36 78 -74 0 -28 -24 -44 -74 -49 -65 -8 -137
11
- 20 -181 68 l-36 40 -27 -33 c-15 -18 -37 -43 -50 -56 -26 -27 -20 -40 35 -86
12
- 65 -55 118 -71 233 -71 89 1 112 4 152 24 94 46 137 146 108 252 -20 71 -81
13
- 112 -224 152 -124 35 -150 64 -101 112 42 43 147 25 203 -35 18 -20 19 -19 70
14
- 30 47 45 51 53 40 69 -22 31 -71 67 -108 80 -39 13 -161 22 -200 15z m193 -36
15
- c56 -23 97 -54 97 -73 0 -7 -17 -27 -37 -44 -36 -30 -37 -31 -57 -13 -12 10
16
- -34 24 -51 31 -34 14 -148 24 -140 11 2 -4 -4 -10 -15 -13 -32 -8 -43 -52 -24
17
- -93 9 -19 19 -32 22 -30 2 3 17 -1 33 -9 15 -8 39 -15 54 -15 14 0 25 -5 25
18
- -11 0 -6 9 -8 20 -4 11 4 20 2 20 -4 0 -6 9 -11 21 -11 37 0 114 -59 133 -103
19
- 24 -55 15 -138 -18 -182 -28 -37 -101 -79 -123 -71 -9 4 -11 1 -7 -5 5 -8 -22
20
- -10 -94 -7 -85 3 -106 7 -131 26 -17 12 -37 22 -46 22 -8 0 -15 3 -15 8 0 4
21
- -10 12 -22 17 -41 19 -44 40 -12 77 17 19 37 32 45 30 27 -9 69 -44 64 -53 -4
22
- -5 2 -6 11 -2 11 4 15 3 11 -4 -5 -7 1 -9 15 -5 12 3 19 1 15 -4 -3 -6 25 -11
23
- 68 -13 69 -2 77 0 100 23 14 14 31 26 38 27 9 0 9 2 0 6 -7 2 -13 16 -13 29 0
24
- 33 -38 66 -91 81 -24 6 -71 18 -104 27 -32 9 -63 23 -68 31 -4 8 -12 13 -17
25
- 10 -4 -3 -23 13 -40 36 -28 34 -33 48 -33 97 0 60 35 138 56 125 5 -3 7 -1 3
26
- 5 -8 13 2 20 69 49 68 30 168 31 238 1z"/>
27
- <path d="M1031 3144 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
28
- <path d="M945 2900 c-6 -9 11 -50 21 -50 2 0 0 9 -6 20 -6 11 -8 25 -5 30 3 6
29
- 4 10 1 10 -3 0 -8 -4 -11 -10z"/>
30
- <path d="M2428 3445 c-154 -39 -259 -173 -261 -333 -2 -111 21 -177 86 -248
31
- 77 -85 134 -108 267 -108 86 -1 113 3 151 20 114 53 169 139 177 276 l5 88
32
- -167 0 -166 0 0 -66 0 -65 85 3 c74 3 85 1 85 -14 0 -27 -48 -76 -87 -89 -49
33
- -16 -133 -6 -176 22 -40 27 -82 89 -91 137 -8 44 10 119 37 159 64 94 220 110
34
- 304 31 l23 -22 56 56 56 56 -43 32 c-44 32 -97 59 -131 65 -65 13 -159 13
35
- -210 0z m202 -16 c8 -2 17 -7 20 -10 3 -3 21 -10 40 -15 19 -5 35 -15 35 -21
36
- 0 -6 4 -15 9 -20 5 -5 6 -3 2 5 -4 6 -3 12 3 12 6 0 15 -9 22 -21 9 -17 7 -24
37
- -10 -40 -11 -10 -24 -27 -30 -36 -9 -17 -13 -16 -59 9 -62 34 -139 53 -157 38
38
- -8 -6 -29 -12 -48 -13 -19 -1 -33 -5 -30 -9 2 -5 -3 -8 -12 -8 -9 0 -14 -4
39
- -10 -9 3 -5 -4 -12 -15 -16 -11 -3 -20 -13 -20 -22 0 -14 -2 -14 -19 1 -13 12
40
- -21 14 -26 6 -3 -6 -1 -9 6 -8 6 2 14 -3 17 -11 2 -8 0 -11 -6 -7 -6 4 -8 -1
41
- -5 -13 3 -10 0 -22 -6 -25 -13 -9 -15 -129 -2 -173 12 -42 76 -107 125 -127
42
- 78 -32 198 -9 226 43 5 11 17 27 26 35 10 11 11 16 3 16 -7 0 -9 3 -6 7 4 3 2
43
- 12 -4 20 -8 8 -35 13 -79 13 l-68 0 -3 44 -4 44 124 1 c69 1 129 5 134 8 6 4
44
- 7 1 2 -7 -6 -9 -4 -12 6 -8 10 4 14 -4 14 -31 0 -20 -4 -42 -9 -50 -6 -10 -6
45
- -12 3 -7 8 6 10 -4 5 -36 -7 -45 -72 -142 -110 -162 -10 -6 -21 -14 -24 -17
46
- -21 -27 -213 -47 -265 -27 -75 28 -115 50 -110 58 3 6 0 7 -8 4 -14 -5 -87 72
47
- -87 92 0 5 5 2 10 -6 7 -12 9 -10 8 7 -1 11 -7 19 -14 16 -12 -4 -27 34 -28
48
- 74 -1 12 -4 25 -8 29 -12 11 -10 64 2 64 6 0 10 5 10 11 0 5 -5 7 -11 3 -8 -5
49
- -8 -1 0 14 6 11 11 34 11 51 0 17 4 31 9 31 8 0 24 35 23 50 0 3 19 28 44 55
50
- 25 29 42 41 38 30 l-6 -20 13 20 c6 11 13 21 15 23 1 2 32 13 68 26 62 20 174
51
- 28 226 15z"/>
52
- <path d="M4670 3451 c-19 -4 -56 -18 -82 -31 -145 -72 -217 -236 -178 -409 14
53
- -64 64 -147 106 -179 16 -12 34 -26 41 -32 6 -5 39 -18 72 -30 114 -38 243
54
- -22 338 44 205 141 184 489 -37 606 -64 33 -178 47 -260 31z m177 -22 c23 -6
55
- 40 -16 37 -21 -4 -6 2 -7 15 -3 14 4 23 2 27 -9 3 -9 12 -12 21 -9 11 4 14 2
56
- 9 -5 -4 -7 -1 -12 8 -12 21 0 85 -89 86 -117 0 -13 4 -23 8 -23 16 0 30 -74
57
- 26 -130 -7 -100 -11 -119 -24 -135 -7 -8 -9 -15 -6 -15 10 0 -52 -85 -78 -107
58
- -20 -16 -50 -32 -116 -61 -31 -14 -161 -10 -219 7 -24 7 -61 23 -81 36 -48 30
59
- -114 110 -104 126 5 8 3 9 -6 4 -10 -6 -12 -3 -8 13 4 12 2 22 -2 22 -4 0 -11
60
- 27 -15 60 -8 71 2 143 18 134 8 -5 7 -2 0 7 -16 16 -17 33 -1 23 6 -4 8 -3 5
61
- 3 -10 16 13 74 26 66 6 -3 7 -1 3 6 -9 14 57 82 106 108 73 40 189 54 265 32z"/>
62
- <path d="M4676 3307 c-22 -10 -47 -28 -57 -40 -10 -12 -18 -18 -19 -14 0 4 -6
63
- 2 -14 -5 -7 -7 -11 -19 -8 -27 3 -8 1 -12 -5 -8 -11 7 -16 -28 -16 -113 0 -74
64
- 6 -109 17 -102 5 3 7 -2 3 -11 -4 -10 -2 -16 6 -14 7 1 11 -4 9 -11 -1 -8 2
65
- -11 8 -7 5 3 10 -1 10 -10 0 -8 16 -23 35 -32 19 -9 33 -19 31 -22 -2 -3 27
66
- -6 64 -6 37 0 66 4 63 8 -3 5 1 7 8 6 23 -4 65 18 87 45 11 14 25 26 32 26 6
67
- 0 10 6 8 12 -3 7 1 18 7 25 15 15 16 195 2 186 -5 -3 -8 0 -5 7 5 15 -62 84
68
- -102 105 -45 23 -118 24 -164 2z m164 -26 c19 -10 49 -37 65 -60 27 -39 30
69
- -50 30 -119 0 -65 -4 -83 -25 -114 -36 -53 -85 -78 -156 -78 -68 0 -107 20
70
- -149 74 -40 52 -46 146 -15 210 49 102 149 137 250 87z"/>
71
- <path d="M1619 3443 c0 -2 0 -33 -1 -70 l0 -68 58 1 59 0 -2 -205 -2 -205 -58
72
- 3 -58 2 0 -70 0 -71 203 0 202 0 0 70 0 70 -77 -1 c-43 -1 -68 -4 -55 -6 12
73
- -2 22 -7 22 -11 0 -4 19 -7 42 -7 l43 0 3 -48 3 -48 -165 3 c-92 2 -166 -1
74
- -166 -5 0 -4 -9 -3 -21 3 -16 9 -19 19 -17 53 l3 41 47 1 c76 2 76 -1 76 223
75
- 1 109 -3 203 -7 211 -5 8 -29 14 -57 15 -32 1 -49 5 -48 14 1 6 2 28 3 47 l1
76
- 35 176 0 176 0 -4 -47 -3 -48 -42 -1 c-73 -1 -73 -2 -72 -220 1 -107 5 -194
77
- 10 -194 5 0 9 90 9 199 l0 199 60 -5 61 -6 -3 72 -3 72 -198 2 c-108 1 -197 1
78
- -198 0z"/>
79
- <path d="M3018 3102 l-3 -342 85 0 85 0 0 112 0 113 105 5 c113 6 145 17 192
80
- 67 57 60 76 188 39 261 -26 51 -77 99 -118 113 -19 6 -112 12 -208 12 l-175 2
81
- -2 -343z m375 307 c20 -5 37 -14 37 -19 0 -6 6 -10 14 -10 8 0 18 -5 22 -12 5
82
- -7 3 -8 -6 -3 -9 5 -11 4 -6 -3 4 -7 13 -12 19 -12 7 0 20 -20 30 -45 23 -54
83
- 19 -135 -8 -197 -4 -10 -11 -15 -16 -12 -5 3 -6 -2 -3 -10 4 -10 -10 -24 -43
84
- -43 -53 -31 -55 -32 -167 -38 -107 -5 -112 -12 -106 -131 4 -83 3 -94 -12 -98
85
- -10 -2 -18 -1 -18 3 0 3 -20 5 -45 3 l-45 -4 0 321 0 321 158 0 c86 0 174 -5
86
- 195 -11z"/>
87
- <path d="M3187 3308 c-27 -20 -34 -173 -9 -183 26 -10 151 -11 144 -1 -3 5 5
88
- 7 16 4 12 -4 20 -3 18 1 -3 4 4 15 15 24 29 25 26 100 -5 134 -20 21 -35 26
89
- -92 30 -50 3 -74 1 -87 -9z m157 -29 c32 -25 36 -84 7 -120 -16 -20 -30 -24
90
- -93 -27 l-74 -4 0 86 1 86 66 0 c52 0 72 -4 93 -21z"/>
91
- <path d="M3710 3103 l0 -343 83 0 82 0 -3 120 -3 120 45 0 c44 0 45 -1 79 -57
92
- 19 -32 49 -86 67 -120 l32 -62 95 -3 c52 -2 97 -1 99 1 7 7 -18 31 -27 25 -5
93
- -3 -7 1 -4 8 3 7 -22 59 -55 116 -60 103 -68 122 -51 122 16 0 86 80 98 112
94
- 39 108 -9 228 -110 277 -37 18 -65 21 -235 23 l-192 3 0 -342z m385 313 c26
95
- -5 74 -37 71 -49 -1 -6 -1 -9 1 -4 18 31 73 -77 73 -143 0 -56 -36 -127 -78
96
- -155 -17 -11 -35 -30 -41 -42 -9 -19 -6 -27 14 -47 14 -14 25 -32 25 -41 0 -8
97
- 5 -15 11 -15 6 0 8 -9 4 -20 -4 -13 -2 -19 4 -18 12 3 68 -88 60 -96 -4 -4
98
- -77 -7 -120 -5 -17 0 -54 64 -52 87 0 7 -1 11 -5 8 -6 -7 -32 41 -32 61 0 8
99
- -4 12 -8 9 -4 -3 -17 11 -27 31 -21 38 -55 58 -67 39 -6 -8 -10 -8 -16 1 -6 9
100
- -13 9 -32 0 -27 -14 -27 -12 -29 -150 l-1 -88 -57 2 -58 2 3 316 c2 235 6 317
101
- 15 323 10 6 301 1 342 -6z"/>
102
- <path d="M3886 3328 c3 -4 -1 -8 -9 -8 -22 0 -37 -128 -21 -187 6 -22 11 -23
103
- 101 -23 91 0 96 1 124 29 41 41 43 113 5 146 -51 44 -67 55 -79 55 -8 0 -7 -4
104
- 3 -10 11 -7 -4 -10 -48 -10 -35 0 -61 4 -58 8 3 5 -1 9 -9 9 -8 0 -12 -4 -9
105
- -9z m180 -49 c43 -43 31 -133 -19 -143 -12 -3 -57 -7 -99 -8 l-78 -3 0 93 0
106
- 94 85 -3 c75 -4 87 -7 111 -30z"/>
107
- <path d="M4167 3099 c7 -7 15 -10 18 -7 3 3 -2 9 -12 12 -14 6 -15 5 -6 -5z"/>
108
- <path d="M3986 3017 c3 -10 9 -15 12 -12 3 3 0 11 -7 18 -10 9 -11 8 -5 -6z"/>
109
- <path d="M1643 2830 c0 -25 2 -35 4 -22 2 12 2 32 0 45 -2 12 -4 2 -4 -23z"/>
110
- <path d="M2923 2373 c13 -4 17 -15 17 -59 0 -60 -16 -77 -51 -55 -11 6 -19 7
111
- -19 2 0 -6 6 -13 13 -18 45 -28 81 10 75 82 -2 33 1 46 12 49 8 2 -3 4 -25 4
112
- -22 0 -32 -2 -22 -5z"/>
113
- <path d="M3072 2368 c-24 -24 -13 -49 28 -65 27 -11 40 -22 38 -32 -4 -20 -44
114
- -27 -64 -10 -8 6 -17 9 -20 6 -3 -3 5 -12 18 -21 37 -24 87 -7 88 30 0 15 -19
115
- 29 -55 41 -34 11 -39 30 -13 47 13 8 23 8 38 -2 27 -16 35 -15 20 3 -15 18
116
- -61 20 -78 3z"/>
117
- </g>
118
- </svg>
@@ -1,16 +0,0 @@
1
- # SigPro UI
2
-
3
- **SigPro UI** is a collection of high-performance **Web Components** built on top of the **SigPro** reactive library and styled with **DaisyUI**.
4
-
5
- ## Why SigPro UI?
6
-
7
- Designed to streamline modern web development, SigPro UI combines the lightweight reactivity of SigPro with the beautiful, accessible design system of DaisyUI.
8
-
9
- * **Native Web Components:** Use them in any framework or plain HTML.
10
- * **Reactive by Design:** Powered by SigPro signals ($) for seamless state management.
11
- * **Utility-First Styling:** Leveraging Tailwind CSS and DaisyUI for a polished look without the bloat.
12
- * **Developer Experience:** Focus on building features, not reinventing UI patterns.
13
-
14
- ## Getting Started
15
-
16
- SigPro UI allows you to build modular, reactive interfaces with minimal overhead, making web development faster, cleaner, and more efficient.
@@ -1,423 +0,0 @@
1
- # Vite Plugin: Automatic File-based Routing 🚦
2
-
3
- SigPro provides an optional Vite plugin that automatically generates routes based on your file structure. No configuration needed - just create pages and they're instantly available with the correct paths.
4
-
5
- ## Why Use This Plugin?
6
-
7
- While SigPro's router works perfectly with manually defined routes, this plugin:
8
- - **Eliminates boilerplate** - No need to write route configurations
9
- - **Enforces conventions** - Consistent URL structure across your app
10
- - **Supports dynamic routes** - Use `[param]` syntax for parameters
11
- - **Automatic code-splitting** - Each page becomes a separate chunk
12
- - **Type-safe** (with JSDoc) - Routes follow your file structure
13
-
14
- ## Installation
15
-
16
- The plugin is included with SigPro, but you need to add it to your Vite config:
17
-
18
- ```javascript
19
- // vite.config.js
20
- import { defineConfig } from 'vite';
21
- import { sigproRouter } from 'sigpro';
22
-
23
- export default defineConfig({
24
- plugins: [sigproRouter()]
25
- });
26
- ```
27
-
28
- ## How It Works
29
-
30
- The plugin scans your `src/pages` directory and automatically generates routes based on the file structure:
31
-
32
- ```
33
- src/pages/
34
- ├── index.js → '/'
35
- ├── about.js → '/about'
36
- ├── blog/
37
- │ ├── index.js → '/blog'
38
- │ └── [slug].js → '/blog/:slug'
39
- └── users/
40
- ├── [id].js → '/users/:id'
41
- └── [id]/edit.js → '/users/:id/edit'
42
- ```
43
-
44
- ## Usage
45
-
46
- ### 1. Enable the Plugin
47
-
48
- Add the plugin to your Vite config as shown above.
49
-
50
- ### 2. Import the Generated Routes
51
-
52
- Once you have the generated routes, using them with the router is straightforward:
53
-
54
- ```javascript
55
- // main.js
56
- import { $, html } from 'sigpro';
57
- import { routes } from 'virtual:sigpro-routes';
58
-
59
- // Simple usage
60
- const router = $.router(routes);
61
- document.body.appendChild(router);
62
- ```
63
-
64
- Or directly in your template:
65
-
66
- ```javascript
67
- // app.js
68
- import { $, html } from 'sigpro';
69
- import { routes } from 'virtual:sigpro-routes';
70
-
71
- const App = () => html`
72
- <div class="app">
73
- <header>
74
- <h1>My Application</h1>
75
- </header>
76
-
77
- <main class="p-4 flex flex-col gap-4 mx-auto w-full">
78
- <div class="p-4 bg-base-100 rounded-box shadow-sm">
79
- ${$.router(routes)}
80
- </div>
81
- </main>
82
- </div>
83
- `;
84
-
85
- document.body.appendChild(App());
86
- ```
87
-
88
- This approach keeps your template clean and lets the router handle all the page rendering automatically.
89
-
90
- ### 3. Create Pages
91
-
92
- ```javascript
93
- // src/pages/index.js
94
- import { $, html } from 'sigpro';
95
-
96
- export default () => {
97
- return html`
98
- <div>
99
- <h1>Home Page</h1>
100
- <a href="#/about">About</a>
101
- </div>
102
- `;
103
- };
104
- ```
105
-
106
- ```javascript
107
- // src/pages/users/[id].js
108
- import { $, html } from 'sigpro';
109
-
110
- export default (params) => {
111
- const userId = params.id;
112
-
113
- return html`
114
- <div>
115
- <h1>User Profile: ${userId}</h1>
116
- <a href="#/users/${userId}/edit">Edit</a>
117
- </div>
118
- `;
119
- };
120
- ```
121
-
122
- ## 📋 File-to-Route Mapping
123
-
124
- ### Static Routes
125
-
126
- | File Path | Generated Route |
127
- |-----------|-----------------|
128
- | `src/pages/index.js` | `/` |
129
- | `src/pages/about.js` | `/about` |
130
- | `src/pages/contact/index.js` | `/contact` |
131
- | `src/pages/blog/post.js` | `/blog/post` |
132
-
133
- ### Dynamic Routes
134
-
135
- | File Path | Generated Route | Example URL |
136
- |-----------|-----------------|-------------|
137
- | `src/pages/users/[id].js` | `/users/:id` | `/users/42` |
138
- | `src/pages/blog/[slug].js` | `/blog/:slug` | `/blog/hello-world` |
139
- | `src/pages/users/[id]/posts/[pid].js` | `/users/:id/posts/:pid` | `/users/42/posts/123` |
140
-
141
- ### Nested Routes
142
-
143
- | File Path | Generated Route | Notes |
144
- |-----------|-----------------|-------|
145
- | `src/pages/settings/index.js` | `/settings` | Index page |
146
- | `src/pages/settings/profile.js` | `/settings/profile` | Sub-page |
147
- | `src/pages/settings/security.js` | `/settings/security` | Sub-page |
148
- | `src/pages/settings/[section].js` | `/settings/:section` | Dynamic section |
149
-
150
- ## 🎯 Advanced Examples
151
-
152
- ### Blog with Posts
153
-
154
- ```javascript
155
- // src/pages/blog/index.js - Lists all posts
156
- export default () => {
157
- const posts = $([]);
158
-
159
- $.effect(() => {
160
- fetch('/api/posts')
161
- .then(res => res.json())
162
- .then(data => posts(data));
163
- });
164
-
165
- return html`
166
- <div>
167
- <h1>Blog</h1>
168
- ${posts().map(post => html`
169
- <article>
170
- <h2><a href="#/blog/${post.slug}">${post.title}</a></h2>
171
- <p>${post.excerpt}</p>
172
- </article>
173
- `)}
174
- </div>
175
- `;
176
- };
177
- ```
178
-
179
- ```javascript
180
- // src/pages/blog/[slug].js - Single post
181
- export default (params) => {
182
- const post = $(null);
183
- const slug = params.slug;
184
-
185
- $.effect(() => {
186
- fetch(`/api/posts/${slug}`)
187
- .then(res => res.json())
188
- .then(data => post(data));
189
- });
190
-
191
- return html`
192
- <div>
193
- <a href="#/blog">← Back to blog</a>
194
- ${() => post() ? html`
195
- <article>
196
- <h1>${post().title}</h1>
197
- <div>${post().content}</div>
198
- </article>
199
- ` : html`<div>Loading...</div>`}
200
- </div>
201
- `;
202
- };
203
- ```
204
-
205
- ### Dashboard with Nested Sections
206
-
207
- ```javascript
208
- // src/pages/dashboard/index.js
209
- export default () => {
210
- return html`
211
- <div class="dashboard">
212
- <nav>
213
- <a href="#/dashboard">Overview</a>
214
- <a href="#/dashboard/analytics">Analytics</a>
215
- <a href="#/dashboard/settings">Settings</a>
216
- </nav>
217
- <main>
218
- <h1>Dashboard Overview</h1>
219
- <!-- Overview content -->
220
- </main>
221
- </div>
222
- `;
223
- };
224
- ```
225
-
226
- ```javascript
227
- // src/pages/dashboard/analytics.js
228
- export default () => {
229
- return html`
230
- <div class="dashboard">
231
- <nav>
232
- <a href="#/dashboard">Overview</a>
233
- <a href="#/dashboard/analytics">Analytics</a>
234
- <a href="#/dashboard/settings">Settings</a>
235
- </nav>
236
- <main>
237
- <h1>Analytics</h1>
238
- <!-- Analytics content -->
239
- </main>
240
- </div>
241
- `;
242
- };
243
- ```
244
-
245
- ### E-commerce Product Routes
246
-
247
- ```javascript
248
- // src/pages/products/[category]/[id].js
249
- export default (params) => {
250
- const { category, id } = params;
251
- const product = $(null);
252
-
253
- $.effect(() => {
254
- fetch(`/api/products/${category}/${id}`)
255
- .then(res => res.json())
256
- .then(data => product(data));
257
- });
258
-
259
- return html`
260
- <div class="product-page">
261
- <nav class="breadcrumbs">
262
- <a href="#/products">Products</a> &gt;
263
- <a href="#/products/${category}">${category}</a> &gt;
264
- <span>${id}</span>
265
- </nav>
266
-
267
- ${() => product() ? html`
268
- <div class="product">
269
- <h1>${product().name}</h1>
270
- <p class="price">$${product().price}</p>
271
- <p>${product().description}</p>
272
- <button @click=${() => addToCart(product())}>
273
- Add to Cart
274
- </button>
275
- </div>
276
- ` : html`<div>Loading...</div>`}
277
- </div>
278
- `;
279
- };
280
- ```
281
-
282
- ## 🔧 Configuration Options
283
-
284
- The plugin accepts an optional configuration object:
285
-
286
- ```javascript
287
- // vite.config.js
288
- import { defineConfig } from 'vite';
289
- import { sigproRouter } from 'sigpro/vite';
290
-
291
- export default defineConfig({
292
- plugins: [
293
- sigproRouter({
294
- pagesDir: 'src/pages', // Default: 'src/pages'
295
- extensions: ['.js', '.jsx'], // Default: ['.js', '.jsx']
296
- exclude: ['**/_*', '**/components/**'] // Glob patterns to exclude
297
- })
298
- ]
299
- });
300
- ```
301
-
302
- ### Options
303
-
304
- | Option | Type | Default | Description |
305
- |--------|------|---------|-------------|
306
- | `pagesDir` | `string` | `'src/pages'` | Directory containing your pages |
307
- | `extensions` | `string[]` | `['.js', '.jsx']` | File extensions to include |
308
- | `exclude` | `string[]` | `[]` | Glob patterns to exclude |
309
-
310
- ## 🎯 Route Priority
311
-
312
- The plugin automatically sorts routes to ensure correct matching:
313
-
314
- 1. **Static routes** take precedence over dynamic ones
315
- 2. **More specific routes** (deeper paths) come first
316
- 3. **Alphabetical order** for routes at the same level
317
-
318
- Example sorting:
319
- ```
320
- /users/new (static, specific)
321
- /users/[id]/edit (dynamic, deeper)
322
- /users/[id] (dynamic, shallower)
323
- /users/profile (static, shallower)
324
- ```
325
-
326
- ## 📦 Output Example
327
-
328
- When you import `virtual:sigpro-routes`, you get:
329
-
330
- ```javascript
331
- // Generated module
332
- import Page_0 from '/src/pages/index.js';
333
- import Page_1 from '/src/pages/about.js';
334
- import Page_2 from '/src/pages/blog/index.js';
335
- import Page_3 from '/src/pages/blog/[slug].js';
336
- import Page_4 from '/src/pages/users/[id].js';
337
- import Page_5 from '/src/pages/users/[id]/edit.js';
338
-
339
- export const routes = [
340
- { path: '/', component: Page_0 },
341
- { path: '/about', component: Page_1 },
342
- { path: '/blog', component: Page_2 },
343
- { path: '/blog/:slug', component: Page_3 },
344
- { path: '/users/:id', component: Page_4 },
345
- { path: '/users/:id/edit', component: Page_5 },
346
- ];
347
- ```
348
-
349
- ## 🚀 Performance Benefits
350
-
351
- - **Automatic code splitting** - Each page becomes a separate chunk
352
- - **Lazy loading ready** - Import pages dynamically
353
- - **Tree shaking** - Only used routes are included
354
-
355
- ```javascript
356
- // With dynamic imports (automatic with Vite)
357
- const routes = [
358
- { path: '/', component: () => import('./pages/index.js') },
359
- { path: '/about', component: () => import('./pages/about.js') },
360
- // ...
361
- ];
362
- ```
363
-
364
- ## 💡 Pro Tips
365
-
366
- ### 1. Group Related Pages
367
-
368
- ```
369
- src/pages/
370
- ├── dashboard/
371
- │ ├── index.js
372
- │ ├── analytics.js
373
- │ └── settings.js
374
- └── dashboard.js # ❌ Don't mix with folder
375
- ```
376
-
377
- ### 2. Use Index Files for Clean URLs
378
-
379
- ```
380
- ✅ Good:
381
- pages/blog/index.js → /blog
382
- pages/blog/post.js → /blog/post
383
-
384
- ❌ Avoid:
385
- pages/blog.js → /blog (conflicts with folder)
386
- ```
387
-
388
- ### 3. Private Components
389
-
390
- Prefix with underscore to exclude from routing:
391
-
392
- ```
393
- src/pages/
394
- ├── index.js
395
- ├── about.js
396
- └── _components/ # ❌ Not scanned
397
- └── Header.js
398
- ```
399
-
400
- ### 4. Layout Components
401
-
402
- Create a layout wrapper in your main entry:
403
-
404
- ```javascript
405
- // main.js
406
- import { $, html } from 'sigpro';
407
- import { routes } from 'virtual:sigpro-routes';
408
-
409
- // Wrap all routes with layout
410
- const routesWithLayout = routes.map(route => ({
411
- ...route,
412
- component: (params) => Layout(route.component(params))
413
- }));
414
-
415
- const router = $.router(routesWithLayout);
416
- document.body.appendChild(router);
417
- ```
418
-
419
- ---
420
-
421
- > **Note:** This plugin is completely optional. You can always define routes manually if you prefer. The plugin just saves you from writing boilerplate route configurations.
422
-
423
- > **Pro Tip:** The plugin works great with hot module replacement (HMR) - add a new page and it's instantly available in your dev server without restarting!
@@ -1,91 +0,0 @@
1
- // plugins/sigpro-plugin-router.js
2
- import fs from 'fs';
3
- import path from 'path';
4
-
5
- export default function sigproRouter() {
6
- const virtualModuleId = 'virtual:sigpro-routes';
7
- const resolvedVirtualModuleId = '\0' + virtualModuleId;
8
-
9
- function getFiles(dir) {
10
- let results = [];
11
- if (!fs.existsSync(dir)) return results;
12
- const list = fs.readdirSync(dir);
13
- list.forEach(file => {
14
- const fullPath = path.resolve(dir, file);
15
- const stat = fs.statSync(fullPath);
16
- if (stat && stat.isDirectory()) {
17
- results = results.concat(getFiles(fullPath));
18
- } else if (file.endsWith('.js') || file.endsWith('.jsx')) {
19
- results.push(fullPath);
20
- }
21
- });
22
- return results;
23
- }
24
-
25
- function filePathToUrl(relativePath) {
26
- let url = relativePath.replace(/\\/g, '/').replace(/\.jsx?$/, '');
27
-
28
- if (url === 'index') {
29
- return '/';
30
- }
31
-
32
- if (url.endsWith('/index')) {
33
- url = url.slice(0, -6);
34
- }
35
-
36
- url = url.replace(/\[([^\]]+)\]/g, ':$1');
37
-
38
- let finalPath = '/' + url.toLowerCase();
39
-
40
- return finalPath.replace(/\/+/g, '/').replace(/\/$/, '') || '/';
41
- }
42
-
43
- return {
44
- name: 'sigpro-router',
45
- resolveId(id) {
46
- if (id === virtualModuleId) return resolvedVirtualModuleId;
47
- },
48
- load(id) {
49
- if (id === resolvedVirtualModuleId) {
50
- const pagesDir = path.resolve(process.cwd(), 'src/pages');
51
- let files = getFiles(pagesDir);
52
-
53
- files = files.sort((a, b) => {
54
- const aRel = path.relative(pagesDir, a).replace(/\\/g, '/');
55
- const bRel = path.relative(pagesDir, b).replace(/\\/g, '/');
56
-
57
- const aDynamic = aRel.includes('[') || aRel.includes(':');
58
- const bDynamic = bRel.includes('[') || bRel.includes(':');
59
-
60
- if (aDynamic !== bDynamic) return aDynamic ? 1 : -1;
61
-
62
- return bRel.length - aRel.length;
63
- });
64
-
65
- let imports = '';
66
- let routeArray = 'export const routes = [\n';
67
-
68
- console.log('\n🚀 [SigPro Router] Routes generated:');
69
-
70
- files.forEach((fullPath, i) => {
71
- const importPath = fullPath.replace(/\\/g, '/');
72
- const relativePath = path.relative(pagesDir, fullPath).replace(/\\/g, '/');
73
- const varName = `Page_${i}`;
74
-
75
- let urlPath = filePathToUrl(relativePath);
76
- const isDynamic = urlPath.includes(':');
77
-
78
- imports += `import ${varName} from '${importPath}';\n`;
79
-
80
- console.log(` ${isDynamic ? '🔗' : '📄'} ${urlPath.padEnd(30)} -> ${relativePath}`);
81
-
82
- routeArray += ` { path: '${urlPath}', component: ${varName} },\n`;
83
- });
84
-
85
- routeArray += '];';
86
-
87
- return `${imports}\n${routeArray}`;
88
- }
89
- }
90
- };
91
- }
@@ -1 +0,0 @@
1
- import fs from"fs";import path from"path";export default function sigproRouter(){const e="virtual:sigpro-routes",r="\0"+e;function t(e){let r=[];if(!fs.existsSync(e))return r;return fs.readdirSync(e).forEach((n=>{const s=path.resolve(e,n),o=fs.statSync(s);o&&o.isDirectory()?r=r.concat(t(s)):(n.endsWith(".js")||n.endsWith(".jsx"))&&r.push(s)})),r}return{name:"sigpro-router",resolveId(t){if(t===e)return r},load(e){if(e===r){const e=path.resolve(process.cwd(),"src/pages");let r=t(e);r=r.sort(((r,t)=>{const n=path.relative(e,r).replace(/\\/g,"/"),s=path.relative(e,t).replace(/\\/g,"/"),o=n.includes("[")||n.includes(":");return o!==(s.includes("[")||s.includes(":"))?o?1:-1:s.length-n.length}));let n="",s="export const routes = [\n";return r.forEach(((r,t)=>{const o=r.replace(/\\/g,"/"),c=`Page_${t}`;let a=function(e){let r=e.replace(/\\/g,"/").replace(/\.jsx?$/,"");return"index"===r?"/":(r.endsWith("/index")&&(r=r.slice(0,-6)),r=r.replace(/\[([^\]]+)\]/g,":$1"),("/"+r.toLowerCase()).replace(/\/+/g,"/").replace(/\/$/,"")||"/")}(path.relative(e,r).replace(/\\/g,"/"));a.includes(":");n+=`import ${c} from '${o}';\n`,s+=` { path: '${a}', component: ${c} },\n`})),s+="];",`${n}\n${s}`}}}}