quilt-react 0.2.0 → 0.2.2

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 (2) hide show
  1. package/README.md +13 -6
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -5,10 +5,18 @@ React components and hooks over the shared Quilt engine and DOM renderer. React
5
5
  ## Install
6
6
 
7
7
  ```sh
8
- npm install quilt-react react react-dom
8
+ npm install quilt-react
9
9
  ```
10
10
 
11
- Core and DOM are installed automatically. TypeScript apps also need matching `@types/react` and `@types/react-dom`. Use an ESM-capable bundler with CSS imports. For local archives, see [packaging instructions](https://github.com/niko-dellic/quilt/blob/main/docs/packaging.md).
11
+ `quilt-core` and `quilt-vanilla` are installed automatically.
12
+
13
+ Requires React and React DOM 18.3 or 19. They are peer dependencies so Quilt shares
14
+ your application’s React instance. In an existing React application, no additional
15
+ install command is needed. When creating a new application, configure React and
16
+ React DOM as application dependencies; npm 7 and newer also resolve missing peers
17
+ automatically unless peer installation is disabled.
18
+
19
+ TypeScript apps also need matching `@types/react` and `@types/react-dom`. Use an ESM-capable bundler with CSS imports. For local archives, see [packaging instructions](https://github.com/niko-dellic/quilt/blob/main/docs/packaging.md).
12
20
 
13
21
  ## Use
14
22
 
@@ -27,8 +35,7 @@ const store = new LayoutStore(
27
35
  );
28
36
  const data = { text: 'Hello' };
29
37
  const getPaneState = () => data;
30
- function Notes({ state }: PaneProps) {
31
- const model = state as typeof data;
38
+ function Notes({ state: model }: PaneProps<typeof data>) {
32
39
  return (
33
40
  <textarea
34
41
  defaultValue={model.text}
@@ -41,7 +48,7 @@ function Notes({ state }: PaneProps) {
41
48
  const components = { notes: Notes };
42
49
  const root = createRoot(document.getElementById('app')!);
43
50
  root.render(
44
- <Layout
51
+ <Layout<typeof data>
45
52
  store={store}
46
53
  components={components}
47
54
  getPaneState={getPaneState}
@@ -58,6 +65,6 @@ function disposeWorkspace() {
58
65
 
59
66
  Keep the store stable. Component maps and adapter callbacks can change identity without rebuilding the workspace. Declarative panes inherit application providers through portals. `useLayoutSnapshot(store)` observes layout changes. The model type is `LayoutSnapshot`; `Layout` is the component. `MountedLayout`, `TabRegistry`, theme presets, and DOM configuration types are available here too. Attach a `MountedLayout` ref to call `popout` from a user gesture; before mounting completes, popout/requestClose resolve false; workspace configuration methods throw a clear not-mounted error.
60
67
 
61
- Declarative panes inherit your app's context providers. Only standalone `reactRenderer` creates separate roots requiring explicit provider wrappers. React-local state does not survive crossing documents: retain data in an application-owned store, and subscribe inside each view when live synchronization is needed. Companion windows are same-origin and depend on the main session.
68
+ Only standalone `reactRenderer` creates separate roots requiring explicit provider wrappers. React-local state does not survive crossing documents: retain data in an application-owned store, and subscribe inside each view when live synchronization is needed. Companion windows are same-origin and depend on the main session.
62
69
 
63
70
  The stylesheet is identical to `quilt-vanilla/styles.css`; import either once. See [API](https://github.com/niko-dellic/quilt/blob/main/docs/api.md), [lifecycle](https://github.com/niko-dellic/quilt/blob/main/docs/lifecycle.md), and [migration](https://github.com/niko-dellic/quilt/blob/main/docs/migration.md).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "quilt-react",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "description": "React split panes and tabs with shared DOM chrome and browser window popouts",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -30,8 +30,8 @@
30
30
  "prepack": "node ../../scripts/build-package.mjs react --dependencies"
31
31
  },
32
32
  "dependencies": {
33
- "quilt-core": "0.2.0",
34
- "quilt-vanilla": "0.2.0"
33
+ "quilt-core": "0.2.2",
34
+ "quilt-vanilla": "0.2.2"
35
35
  },
36
36
  "sideEffects": [
37
37
  "**/*.css"