@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.
Files changed (2) hide show
  1. package/README.md +0 -154
  2. 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.2165.0",
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": "69df6063d9c2457247375ca4a90bb48eb537708fef78cc0fd66e189d"
193
+ "falconPackageHash": "49ee5d5d74fa8948be9bd4a80ecb31de2176785a5f392947f43effb1"
194
194
  }