@widgetic/creator 0.3.67 → 0.3.68
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/README.md +52 -98
- package/dist/CreatorApp.svelte +436 -146
- package/dist/components/WidgetDetails.svelte +32 -3
- package/dist/components/WidgetDetails.svelte.d.ts +2 -0
- package/dist/components/WidgetShapeLivePreviews.svelte +133 -46
- package/dist/components/WidgetShapeLivePreviews.svelte.d.ts +2 -0
- package/dist/stores/websocketStore.d.ts +1 -1
- package/dist/stores/websocketStore.js +1 -1
- package/dist/utils/freezeWatchdog.js +38 -7
- package/package.json +4 -5
package/README.md
CHANGED
|
@@ -1,131 +1,85 @@
|
|
|
1
1
|
# Widget Creator – Local Development Notes
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Environment variables
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
After editing the file, restart `pnpm dev` so Vite reloads the environment variables. When a VM session is selected, the modal and “Open in new tab” button will hit:
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
{VITE_WIDGET_VM_PREVIEW_ORIGIN}/vms/{vmSessionId}/preview
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
If the variable is missing, the UI shows guidance and logs a single warning in development.
|
|
5
|
+
`.env.example` tracks the full variable inventory — copy it to `.env.local` and
|
|
6
|
+
adjust. It also documents the variables `npm run dev-sv` injects
|
|
7
|
+
(`VITE_APP_VERSION` from the manifest, `VITE_BUILD_SHA` from the current git
|
|
8
|
+
commit) and the optional `VITE_`/`PUBLIC_` variables the app reads, each with
|
|
9
|
+
its fallback.
|
|
18
10
|
|
|
19
11
|
## Sibling packages
|
|
20
12
|
|
|
21
|
-
This app compiles sibling `@widgetic/*`
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
npm run i
|
|
27
|
-
npm run ldt # node_modules/@widgetic/dev-tools -> ../../../dev-tools
|
|
28
|
-
npm run llinks # show the current @widgetic links
|
|
29
|
-
```
|
|
13
|
+
This app compiles sibling `@widgetic/*` source in dev through the dev-alias
|
|
14
|
+
setup `@widgetic/dev-tools` owns. The alias tables, the `$lib` remap, and
|
|
15
|
+
everything else the mapping needs come from the installed
|
|
16
|
+
`@widgetic/dev-tools` dependency. An ordinary `npm install` is the whole
|
|
17
|
+
setup — there is no linking step.
|
|
30
18
|
|
|
31
|
-
The why
|
|
32
|
-
[the
|
|
19
|
+
The why and the silent-degrade failure mode live in
|
|
20
|
+
[the dev-tools README](../dev-tools/README.md).
|
|
33
21
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
# create-svelte
|
|
37
|
-
|
|
38
|
-
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
|
|
39
|
-
|
|
40
|
-
## Creating a project
|
|
41
|
-
|
|
42
|
-
If you're seeing this, you've probably already done this step. Congrats!
|
|
43
|
-
|
|
44
|
-
```bash
|
|
45
|
-
# create a new project in the current directory
|
|
46
|
-
npm create svelte@latest
|
|
47
|
-
|
|
48
|
-
# create a new project in my-app
|
|
49
|
-
npm create svelte@latest my-app
|
|
50
|
-
```
|
|
22
|
+
### Chat iteration without publishing
|
|
51
23
|
|
|
52
|
-
|
|
24
|
+
`npm run lps` links `@widgetic/chat` into `node_modules/@widgetic/chat` along
|
|
25
|
+
with design-system, api-sdk and canvas. In `chat/`, `npm run package:watch`
|
|
26
|
+
then emits every source edit into the dist this app resolves through that
|
|
27
|
+
link — a saved change is consumable here within seconds, no manual dist
|
|
28
|
+
copying and no publish. Type-checking resolves through the same files, so
|
|
29
|
+
`npm run check` sees the iteration too. Before merging the chat work, run
|
|
30
|
+
`npm run package && npm publish` in `chat/` and `npm i` here once, so the
|
|
31
|
+
lockfile's `^0.1.11` range admits the real release.
|
|
53
32
|
|
|
54
|
-
|
|
33
|
+
---
|
|
34
|
+
## Local development
|
|
55
35
|
|
|
56
36
|
```bash
|
|
37
|
+
npm install
|
|
57
38
|
npm run dev
|
|
58
|
-
|
|
59
|
-
# or start the server and open the app in a new browser tab
|
|
60
|
-
npm run dev -- --open
|
|
61
39
|
```
|
|
62
40
|
|
|
63
|
-
|
|
41
|
+
`npm run dev` frees port 5174 first (`stop-dev`), then starts Vite in
|
|
42
|
+
development mode on that port, injecting `VITE_APP_VERSION` from the
|
|
43
|
+
manifest and `VITE_BUILD_SHA` from the current git commit. The gateway has
|
|
44
|
+
to run for proxied features; `VITE_API_URL` (or its `PUBLIC_API_URL` alias)
|
|
45
|
+
points at it. `npm run dev-sv` starts the same server without the port
|
|
46
|
+
cleanup.
|
|
64
47
|
|
|
65
|
-
|
|
48
|
+
### Checks
|
|
66
49
|
|
|
67
50
|
```bash
|
|
68
|
-
npm run
|
|
51
|
+
npm run check # svelte-kit sync + svelte-check
|
|
52
|
+
npm run lint # prettier --check + eslint
|
|
53
|
+
npm run format # prettier --write
|
|
54
|
+
npm test # integration (playwright) + unit (vitest)
|
|
55
|
+
npm run test:unit # vitest only
|
|
56
|
+
npm run test:integration # playwright only
|
|
69
57
|
```
|
|
70
58
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
|
74
|
-
|
|
59
|
+
### Building and running the production output
|
|
75
60
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
o make it work with both Svelte 4 and Svelte 5, we need to take a more flexible approach. Here's how you can resolve this:
|
|
80
|
-
|
|
81
|
-
1. First, remove the specific Svelte dependency from your project:
|
|
82
61
|
```bash
|
|
83
|
-
npm
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
2. Install svelte-preprocess-react as a dev dependency:
|
|
87
|
-
```bash
|
|
88
|
-
npm install --save-dev svelte-preprocess-react
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
3. In your package.json, add a peer dependency for Svelte that allows both version 4 and 5:
|
|
92
|
-
```json
|
|
93
|
-
"svelte": "^4.0.0 || ^5.0.0-next.0"
|
|
62
|
+
npm run build # vite build (NODE_ENV=production) + svelte-package
|
|
63
|
+
npm run preview # vite preview of the built app
|
|
94
64
|
```
|
|
95
65
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
import preprocessReact from 'svelte-preprocess-react/preprocessReact';
|
|
66
|
+
The build emits the Node server into `build/` and the library surface into
|
|
67
|
+
`dist/`. Run the server locally with:
|
|
99
68
|
|
|
100
|
-
export default {
|
|
101
|
-
preprocess: [preprocessReact()]
|
|
102
|
-
};
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
5. In your project's root, create a .npmrc file (if it doesn't exist) and add:
|
|
106
69
|
```bash
|
|
107
|
-
|
|
70
|
+
npm start # node build/index.js (adapter-node output)
|
|
108
71
|
```
|
|
109
|
-
This allows npm to install packages with peer dependencies that don't strictly match.
|
|
110
72
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
npm cache clean --force
|
|
114
|
-
```
|
|
73
|
+
The Render deploy wraps the same build in `npm run render-build`
|
|
74
|
+
(`render-build.sh`).
|
|
115
75
|
|
|
116
|
-
|
|
117
|
-
```bash
|
|
118
|
-
rm -rf node_modules package-lock.json
|
|
119
|
-
```
|
|
76
|
+
### When the dev server misbehaves
|
|
120
77
|
|
|
121
|
-
8. Reinstall dependencies:
|
|
122
78
|
```bash
|
|
123
|
-
npm
|
|
79
|
+
npm run clean-svelte-cache # rm -rf .svelte-kit && svelte-kit sync
|
|
80
|
+
npm run clean-vite-cache # rm -rf node_modules/.vite
|
|
81
|
+
npm run clean-npm-cache # npm cache clean --force
|
|
124
82
|
```
|
|
125
83
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
- Using svelte-preprocess-react as a dev dependency to handle React preprocessing.
|
|
129
|
-
- Allowing legacy peer dependencies to resolve version conflicts.
|
|
130
|
-
- Remember to adjust your code to be compatible with both Svelte 4 and Svelte 5 syntax where necessary. For example, use conditional imports or runtime checks to handle differences between versions.
|
|
131
|
-
- If you still encounter issues, you might need to review other dependencies in your project that might be causing conflicts with Svelte versions.
|
|
84
|
+
`npm run find-sveltekit-running` shows what holds port 5173;
|
|
85
|
+
`npm run stop-dev` frees 5174.
|