create-lupine 1.0.25 → 1.0.26

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-lupine",
3
- "version": "1.0.25",
3
+ "version": "1.0.26",
4
4
  "description": "Scaffolding tool for Lupine.js projects",
5
5
  "bin": {
6
6
  "create-lupine": "index.js"
@@ -11,7 +11,7 @@
11
11
  ],
12
12
  "scripts": {
13
13
  "npm-publish": "npm publish --access public",
14
- "test": "node index.js"
14
+ "dev-test": "node index.js"
15
15
  },
16
16
  "dependencies": {},
17
17
  "type": "module"
@@ -26,6 +26,23 @@ When performing multi-line code refactoring or replacement operations (`replace_
26
26
  - ✅ **Use when**: The component is small, state drives most of the UI, and the React-style patterns feel natural.
27
27
  - ⚠️ **Avoid when**: The component is large/complex, or only a tiny portion of the UI needs to change (e.g. a progress counter, a list inside a page) — repeated full rerenders are wasteful.
28
28
  - **`ref.onLoad` + useState**: `onLoad` is called **only on initial mount** (not on rerenders). It's the right place for async data fetch that populates state.
29
+ - **Async component functions**: Component functions **can be `async`** — the framework detects the returned Promise and `await`s it. This lets you `await fetch()` directly inside a component body. However, **all `useState()` calls MUST appear before the first `await`**. The internal `_currentStore` pointer is cleared immediately after the synchronous portion of the component executes (before any `await`), so calling `useState()` after an `await` will throw `"useState must be called inside a component function"`.
30
+
31
+ ```tsx
32
+ // ✅ Correct: useState before await
33
+ const MyComp = async (props) => {
34
+ const [data, setData] = useState(null); // hooks first
35
+ const result = await fetchData(); // await after hooks
36
+ return <div>{result.title}</div>;
37
+ };
38
+
39
+ // ❌ Wrong: useState after await — will crash
40
+ const MyComp = async (props) => {
41
+ const result = await fetchData(); // await first
42
+ const [data, setData] = useState(null); // 💥 _currentStore is null
43
+ return <div>{result.title}</div>;
44
+ };
45
+ ```
29
46
 
30
47
  - **`HtmlVar` — Surgical partial updates (large/complex components)**:
31
48
 
@@ -199,7 +216,7 @@ When you pass `css={css}` to a JSX element, Lupine automatically evaluates it an
199
216
  4. Use `class="&-item"` normally. Lupine replaces `&` with the identical `globalCssId` across all instances.
200
217
 
201
218
  > [!WARNING]
202
- > Because `getGlobalStylesId` relies on `getRequestContext()` data to correctly attach and track styles (especially across SSR and interactive client renders), getGlobalStylesId and `bindGlobalStyle` **MUST** be called inside the component function scope. Calling them at the file/module level will result in runtime errors.
219
+ > Because `getGlobalStylesId` relies on `getRequestContext()` data to correctly attach and track styles (especially across SSR and interactive client renders), `getGlobalStylesId` and `bindGlobalStyle` **MUST** be called inside the component function scope. Calling them at the file/module level will result in runtime errors like: `Uncaught Error: Request context is not initialized`.
203
220
 
204
221
  ### ⚠️ IMPORTANT: The "Static `CssProps`" Rule
205
222
 
@@ -8,7 +8,7 @@
8
8
  <!--META-ENV-END-->
9
9
  <link rel="shortcut icon" href="{SUBDIR}/assets/favicon.ico?t={hash}" type="image/x-icon" />
10
10
  <link rel="stylesheet" type="text/css" href="{SUBDIR}/index.css?t={hash}" />
11
- <script defer src="{SUBDIR}/index.js#t={hash}"></script>
11
+ <script defer src="{SUBDIR}/index.js?t={hash}"></script>
12
12
  </head>
13
13
  <body>
14
14
  <div class="lupine-root"></div>
@@ -58,7 +58,7 @@
58
58
  type="image/x-icon"
59
59
  />
60
60
  <link rel="stylesheet" type="text/css" href="{SUBDIR}/index.css?t={hash}" />
61
- <script defer src="{SUBDIR}/index.js#t={hash}"></script>
61
+ <script defer src="{SUBDIR}/index.js?t={hash}"></script>
62
62
  <!-- Remove Cloudflare Web Analytics if you clone this project -->
63
63
  <script
64
64
  defer
@@ -8,7 +8,7 @@
8
8
  <!--META-ENV-END-->
9
9
  <link rel="shortcut icon" href="{SUBDIR}/assets/favicon.ico?t={hash}" type="image/x-icon" />
10
10
  <link rel="stylesheet" type="text/css" href="{SUBDIR}/index.css?t={hash}" />
11
- <script defer src="{SUBDIR}/index.js#t={hash}"></script>
11
+ <script defer src="{SUBDIR}/index.js?t={hash}"></script>
12
12
  </head>
13
13
  <body>
14
14
  <div class="lupine-root"></div>
@@ -12,7 +12,7 @@
12
12
  type="image/x-icon"
13
13
  />
14
14
  <link rel="stylesheet" type="text/css" href="{SUBDIR}/index.css?t={hash}" />
15
- <script defer src="{SUBDIR}/index.js#t={hash}"></script>
15
+ <script defer src="{SUBDIR}/index.js?t={hash}"></script>
16
16
  <!-- Cloudflare Web Analytics -->
17
17
  <script
18
18
  defer
@@ -8,7 +8,7 @@
8
8
  <!--META-ENV-END-->
9
9
  <link rel="shortcut icon" href="{SUBDIR}/assets/favicon.ico?t={hash}" type="image/x-icon" />
10
10
  <link rel="stylesheet" type="text/css" href="{SUBDIR}/index.css?t={hash}" />
11
- <script defer src="{SUBDIR}/index.js#t={hash}"></script>
11
+ <script defer src="{SUBDIR}/index.js?t={hash}"></script>
12
12
  </head>
13
13
  <body>
14
14
  <div class="lupine-root"></div>
@@ -8,7 +8,7 @@
8
8
  <!--META-ENV-END-->
9
9
  <link rel="shortcut icon" href="{SUBDIR}/assets/favicon.ico?t={hash}" type="image/x-icon" />
10
10
  <link rel="stylesheet" type="text/css" href="{SUBDIR}/index.css?t={hash}" />
11
- <script defer src="{SUBDIR}/index.js#t={hash}"></script>
11
+ <script defer src="{SUBDIR}/index.js?t={hash}"></script>
12
12
  </head>
13
13
  <body>
14
14
  <div class="lupine-root"></div>
@@ -34,7 +34,7 @@
34
34
  <!--META-ENV-END-->
35
35
  <link rel="shortcut icon" href="{SUBDIR}/assets/favicon.ico?t={hash}" type="image/x-icon" />
36
36
  <link rel="stylesheet" type="text/css" href="{SUBDIR}/index.css?t={hash}" />
37
- <script defer src="{SUBDIR}/index.js#t={hash}"></script>
37
+ <script defer src="{SUBDIR}/index.js?t={hash}"></script>
38
38
  <!-- Remove Cloudflare Web Analytics if you clone this project -->
39
39
  <script
40
40
  defer