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 +2 -2
- package/templates/common/AI_CONTEXT.md +18 -1
- package/templates/lupine-template-cv-starter/web/src/index.html +1 -1
- package/templates/lupine-template-cv-starter/web/src/lupine-template-cv-starter/index.html +1 -1
- package/templates/lupine-template-doc-starter/web/src/index.html +1 -1
- package/templates/lupine-template-doc-starter/web/src/lupine-template-doc-starter/index.html +1 -1
- package/templates/lupine-template-hello-world/web/src/index.html +1 -1
- package/templates/lupine-template-responsive-starter/web/src/index.html +1 -1
- package/templates/lupine-template-responsive-starter/web/src/lupine-template-responsive-starter/index.html +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-lupine",
|
|
3
|
-
"version": "1.0.
|
|
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
|
|
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
|
|
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
|
|
11
|
+
<script defer src="{SUBDIR}/index.js?t={hash}"></script>
|
|
12
12
|
</head>
|
|
13
13
|
<body>
|
|
14
14
|
<div class="lupine-root"></div>
|
package/templates/lupine-template-doc-starter/web/src/lupine-template-doc-starter/index.html
CHANGED
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|