@wix/editor-react-components 1.2165.0 → 1.2167.0
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 +0 -154
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -4,157 +4,3 @@ React components for the Wix Editor, built with tsup and designed to work seamle
|
|
|
4
4
|
|
|
5
5
|
This project was bootstrapped with [Create Wix App](https://www.npmjs.com/package/@wix/create-app).
|
|
6
6
|
Read more about it in the [Wix CLI for Apps documentation](https://dev.wix.com/docs/build-apps/developer-tools/cli/get-started/about-the-wix-cli-for-apps).
|
|
7
|
-
|
|
8
|
-
## 📚 Component Development:
|
|
9
|
-
|
|
10
|
-
📖 **[Component Build Guide](./COMPONENT_GUIDE.md)** - Complete guide for creating and structuring components that build properly with tsup.
|
|
11
|
-
|
|
12
|
-
### Quick Start for New Components:
|
|
13
|
-
|
|
14
|
-
Each component requires this structure to be detected by tsup:
|
|
15
|
-
|
|
16
|
-
```
|
|
17
|
-
src/site/components/YourComponent/
|
|
18
|
-
├── YourComponent.tsx # Main React component (required)
|
|
19
|
-
├── component.tsx # Component barrel file (required)
|
|
20
|
-
├── manifest.ts # Editor metadata (required)
|
|
21
|
-
└── sdk/index.ts # Velo SDK implementation (required)
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## Setup 🔧
|
|
25
|
-
|
|
26
|
-
Install dependencies:
|
|
27
|
-
|
|
28
|
-
```console
|
|
29
|
-
yarn install
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Manifest Type Safety:
|
|
33
|
-
|
|
34
|
-
All manifest.ts files in `src/site/components/*/manifest.ts` must follow strict typing requirements:
|
|
35
|
-
|
|
36
|
-
### Required Pattern
|
|
37
|
-
|
|
38
|
-
```typescript
|
|
39
|
-
import type { EditorReactComponent } from '@wix/component-protocol/schema';
|
|
40
|
-
|
|
41
|
-
const manifest: EditorReactComponent & { id: string } = {
|
|
42
|
-
id: 'unique-component-id',
|
|
43
|
-
// ... rest of manifest properties
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
export default manifest;
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### Validation & Development
|
|
50
|
-
|
|
51
|
-
- **IDE Feedback**: ESLint shows errors immediately as you type (red underlines)
|
|
52
|
-
- **Auto-fix**: Use IDE quick fix or `npx eslint --fix` to add missing types
|
|
53
|
-
- **Hot Reload**: Manifest changes are watched during `yarn dev` - no reload necessary
|
|
54
|
-
- **Manual Check**: Run `yarn validate:manifests` to check all manifest files
|
|
55
|
-
- **Build-time**: Validation runs before `yarn dev` and `yarn build`
|
|
56
|
-
|
|
57
|
-
### Commands
|
|
58
|
-
|
|
59
|
-
```bash
|
|
60
|
-
# Check all manifests (used in build process)
|
|
61
|
-
yarn validate:manifests
|
|
62
|
-
|
|
63
|
-
# Auto-fix missing type annotations
|
|
64
|
-
yarn fix:manifests
|
|
65
|
-
|
|
66
|
-
# ESLint auto-fix (works on any file)
|
|
67
|
-
npx eslint --fix packages/editor-react-components/src/site/components/*/manifest.ts
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
### Requirements
|
|
71
|
-
|
|
72
|
-
1. **Type Annotation**: Must use `EditorReactComponent & { id: string }`
|
|
73
|
-
2. **Import Statement**: Must import `EditorReactComponent` from `@wix/component-protocol/schema`
|
|
74
|
-
3. **Default Export**: Must export the manifest as default
|
|
75
|
-
|
|
76
|
-
This ensures type safety and prevents runtime errors before deployment.
|
|
77
|
-
Read more about it in the [Wix CLI for Apps
|
|
78
|
-
documentation](https://dev.wix.com/docs/build-apps/developer-tools/cli/get-started/about-the-wix-cli-for-apps).
|
|
79
|
-
|
|
80
|
-
## Available Scripts:
|
|
81
|
-
|
|
82
|
-
### Development
|
|
83
|
-
|
|
84
|
-
```console
|
|
85
|
-
yarn dev # Development with watch mode
|
|
86
|
-
yarn storybook # Run Storybook for component development
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
### Building
|
|
90
|
-
|
|
91
|
-
```console
|
|
92
|
-
yarn build # Full production build
|
|
93
|
-
yarn build:package # Build components with tsup only
|
|
94
|
-
yarn clean # Remove dist directory
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
### Testing
|
|
98
|
-
|
|
99
|
-
```console
|
|
100
|
-
yarn test # Run tests
|
|
101
|
-
yarn test:watch # Run tests in watch mode
|
|
102
|
-
yarn test:coverage # Run tests with coverage
|
|
103
|
-
yarn test:manifest # Run manifest tests only
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
#### Manifest Tests
|
|
107
|
-
|
|
108
|
-
The project includes automated testing for component manifests to ensure they generate correctly and maintain structural integrity. The manifest test process works in three phases:
|
|
109
|
-
|
|
110
|
-
**1. Preparation Phase**
|
|
111
|
-
|
|
112
|
-
- Validates all `manifest.ts` files for type safety
|
|
113
|
-
- Generates `component.json` files from TypeScript manifests
|
|
114
|
-
- Auto-generates test files for components with manifests
|
|
115
|
-
|
|
116
|
-
**2. Test Generation**
|
|
117
|
-
The `generate:manifest-tests` script automatically creates `manifest.spec.ts` files for each component that has both:
|
|
118
|
-
|
|
119
|
-
- `manifest.ts` - TypeScript manifest definition
|
|
120
|
-
- `component.json` - Generated JSON output from the manifest
|
|
121
|
-
|
|
122
|
-
**Generated test structure:**
|
|
123
|
-
|
|
124
|
-
```typescript
|
|
125
|
-
const componentJson = require('./component.json');
|
|
126
|
-
|
|
127
|
-
describe('ComponentName manifest output', () => {
|
|
128
|
-
it('should have the correct manifest structure', () => {
|
|
129
|
-
expect(componentJson).toMatchSnapshot();
|
|
130
|
-
});
|
|
131
|
-
});
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
**3. Snapshot Testing**
|
|
135
|
-
|
|
136
|
-
- Tests use Jest snapshots to detect unintended changes in manifest output
|
|
137
|
-
- Snapshots capture the complete structure of generated `component.json` files
|
|
138
|
-
- Any changes to manifests require snapshot updates
|
|
139
|
-
|
|
140
|
-
**4. Snapshot Updates (When Needed)**
|
|
141
|
-
|
|
142
|
-
- When manifest structure changes intentionally, snapshots need to be updated
|
|
143
|
-
- Failed manifest tests indicate snapshot mismatches that require review
|
|
144
|
-
- Always verify changes are intentional before updating snapshots
|
|
145
|
-
|
|
146
|
-
**Commands:**
|
|
147
|
-
|
|
148
|
-
```console
|
|
149
|
-
yarn prepare:manifest-tests # Full preparation (validate + generate + create tests)
|
|
150
|
-
yarn test:manifest # Run manifest tests only
|
|
151
|
-
yarn test:manifest -u # Update manifest test snapshots
|
|
152
|
-
yarn generate:manifest-tests # Generate test files only
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
**Important Notes:**
|
|
156
|
-
|
|
157
|
-
- Generated `manifest.spec.ts` files should be committed to git once created
|
|
158
|
-
- Tests run automatically as part of the standard test suite
|
|
159
|
-
- Manifest validation occurs before test generation to catch type errors early
|
|
160
|
-
- This process ensures manifest changes don't break component registration in the editor
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/editor-react-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2167.0",
|
|
4
4
|
"description": "React components for the Wix Editor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -190,5 +190,5 @@
|
|
|
190
190
|
"registry": "https://registry.npmjs.org/",
|
|
191
191
|
"access": "public"
|
|
192
192
|
},
|
|
193
|
-
"falconPackageHash": "
|
|
193
|
+
"falconPackageHash": "49ee5d5d74fa8948be9bd4a80ecb31de2176785a5f392947f43effb1"
|
|
194
194
|
}
|