Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 12 additions & 15 deletions .github/workflows/build-next.yml
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
name: Pull Request (v-next)
on:
pull_request:
paths:
- 'next/**' # Only run if files in next/ directory change
- '.github/workflows/build-next.yml' # Also run if this workflow file changes
paths-ignore:
- v0/** # Skip if ONLY v0/ directory files change
- .github/workflows/build.yml # Skip if ONLY build.yml file changes

jobs:
dependencies:
Expand All @@ -24,18 +24,18 @@ jobs:

- uses: actions/setup-node@v3
with:
node-version-file: 'next/.nvmrc'
node-version-file: .nvmrc

- name: Cache PNPM dependencies
uses: actions/cache@v3
id: cache-next
with:
path: next/node_modules
key: ${{ runner.os }}-pnpm-next-${{ hashFiles('next/pnpm-lock.yaml') }}
path: node_modules
key: ${{ runner.os }}-pnpm-${{ hashFiles('pnpm-lock.yaml') }}

- name: Install dependencies
if: steps.cache-next.outputs.cache-hit != 'true'
run: cd next && pnpm install
run: pnpm install

test:
runs-on: ubuntu-latest
Expand All @@ -52,7 +52,7 @@ jobs:

- uses: actions/setup-node@v4
with:
node-version-file: 'next/.nvmrc'
node-version-file: .nvmrc

- name: Get cached v0 dependencies
uses: actions/cache@v3
Expand All @@ -63,14 +63,11 @@ jobs:
- name: Get cached PNPM dependencies
uses: actions/cache@v3
with:
path: next/node_modules
key: ${{ runner.os }}-pnpm-next-${{ hashFiles('next/pnpm-lock.yaml') }}
path: node_modules
key: ${{ runner.os }}-pnpm-${{ hashFiles('pnpm-lock.yaml') }}

- name: Run lint and type checks
run: cd next && pnpm check
run: pnpm check

- name: Tests
run: cd next && pnpm test

- name: v0 Tests
run: cd next && pnpm run test:v0 || true
run: pnpm test
10 changes: 5 additions & 5 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ name: Pull Request (v0)
on:
pull_request:
paths-ignore:
- 'next/**' # Skip if ONLY next/ directory files change
- '.github/workflows/build-next.yml'
- next/** # Skip if ONLY next/ directory files change
- .github/workflows/build-next.yml

jobs:
dependencies:
Expand All @@ -12,7 +12,7 @@ jobs:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version-file: 'v0/.nvmrc'
node-version-file: v0/.nvmrc
- name: Cache NPM dependencies
# From: https://dev.to/drakulavich/aggressive-dependency-caching-in-github-actions-3c64
uses: actions/cache@v3
Expand All @@ -31,7 +31,7 @@ jobs:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version-file: 'v0/.nvmrc'
node-version-file: v0/.nvmrc

- name: Get cached NPM dependencies
uses: actions/cache@v3
Expand All @@ -49,7 +49,7 @@ jobs:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version-file: 'v0/.nvmrc'
node-version-file: v0/.nvmrc

- name: Get cached NPM dependencies
uses: actions/cache@v3
Expand Down
File renamed without changes.
2 changes: 1 addition & 1 deletion .gitmodules
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
[submodule "next/json-schema-test-suite"]
path = next/json-schema-test-suite
path = json-schema-test-suite
url = [email protected]:json-schema-org/JSON-Schema-Test-Suite.git
File renamed without changes.
File renamed without changes.
File renamed without changes.
277 changes: 277 additions & 0 deletions MIGRATING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,277 @@
# Migrating from v0 to v1

This guide helps you upgrade from `@remoteoss/json-schema-form` v0 to v1.

## Overview

v1 is a complete rewrite in TypeScript with significant improvements:

- **Full TypeScript support** with proper type definitions
- **Removed Yup dependency** - uses native JSON Schema validation
- **Simplified API** with better error handling
- **Better performance** with fewer dependencies
- **ESM-only** for modern JavaScript environments

## Breaking Changes

### 1. **Node.js & Package Manager Requirements**

```diff
- Node.js >= 18.14.0 (any package manager)
+ Node.js >= 18.14.0 (with pnpm recommended)
+ Package is now ESM-only (type: "module")
```

### 2. **Dependencies Removed**

v1 removes several heavy dependencies:

```diff
- yup (validation library)
- lodash (utility functions)
- randexp (random expression generator)
# Only json-logic-js remains
```

### 3. **API Changes**

#### New TypeScript Exports

```diff
+ import {
+ Field,
+ FieldType,
+ FormErrors,
+ ValidationOptions,
+ ValidationResult
+ } from '@remoteoss/json-schema-form'
```

### 4. **createHeadlessForm Configuration**

#### Deprecated Options

```diff
- createHeadlessForm(schema, {
- customProperties: { ... }, // Deprecated
- })

+ createHeadlessForm(schema, {
+ initialValues: { ... },
+ validationOptions: { ... },
+ strictInputType: boolean
+ })
```

#### Validation

The main difference is that on v1 we stopped returning yup errors and only kept the form errors, when validating a form value change.

```diff
// v0 - Returns Yup errors and Form Errors (which were based on the yup errors)
const { handleValidation } = createHeadlessForm(schema)
const { yupErrors, formErrors } = handleValidation(values)

// v1 - Only Returns Form Errors
const { handleValidation } = createHeadlessForm(schema)
const { formErrors } = handleValidation(values)
```

### 5. **Field Structure Changes**

#### Field Properties

```diff
// v0 - Mixed property names
{
name: 'username',
- type: 'text', // Deprecated
+ inputType: 'text', // Consistent naming
jsonType: 'string',
required: true
}
```

### 6. **modify() Function Changes**

The `modify` function API remains mostly compatible, but with improved TypeScript support:

```typescript
// v0
const { schema, warnings } = modify(originalSchema, {
fields: { ... },
create: { ... },
pick: [...],
orderRoot: [...]
})

// v1 - Same API, better types
const { schema, warnings } = modify(originalSchema, {
fields: { ... },
create: { ... },
pick: [...],
orderRoot: [...]
})
```

## Migration Steps

### Step 1: Update Package

```bash
# Remove old version
npm uninstall @remoteoss/json-schema-form

# Install v1
npm install @remoteoss/json-schema-form@v1
```

### Step 2: Update Configuration

Replace any deprecated config options (if necessary):

```diff
// Before
const form = createHeadlessForm(schema, {
- customProperties: {
- username: {
- placeholder: 'Enter username'
- }
- }
})

// After - Use schema modifications instead
const modifiedSchema = modify(schema, {
fields: {
username: {
'x-jsf-presentation': {
placeholder: 'Enter username'
}
}
}
})

const form = createHeadlessForm(modifiedSchema.schema)
```

### Step 3: Update Error Handling

```diff
// Before (assuming you were using yupErrors)
const { yupErrors } = handleValidation(formValues)
- if (yupErrors.username) {
- console.log('Username error:', yupErrors.username)
- }

// After
const { formErrors } = handleValidation(formValues)
+ if (formErrors?.username) {
+ console.log('Username error:', formErrors.username)
+ }
```

### Step 4: Update Field Type Checks

```diff
// Before
- if (field.type === 'text') {
+ if (field.inputType === 'text') {
// Handle text field
}
```

### Step 5: Update TypeScript Types

```typescript
// Add proper TypeScript imports
import {
CreateHeadlessFormOptions,
Field,
FormErrors,
ValidationResult
} from '@remoteoss/json-schema-form'

// Use typed interfaces
const config: CreateHeadlessFormOptions = {
initialValues: { username: '' },
strictInputType: true
}

const form = createHeadlessForm(schema, config)
```

## New Features in v1

### 1. **Better TypeScript Support**

Full type safety with proper interfaces:

```typescript
interface Field {
name: string
inputType: FieldType
jsonType: string
required: boolean
// ... other properties
}
```

### 2. **Improved Error Messages**

More descriptive validation errors with path information:

```typescript
const { formErrors } = handleValidation(values)

// Nested error structure
if (formErrors?.address?.street) {
console.log('Street validation failed')
}
```

### 3. **Enhanced Validation Options**

```typescript
const form = createHeadlessForm(schema, {
validationOptions: {
allowForbiddenValues: true,
// Additional validation controls
}
})
```

## Common Migration Issues

### 1. **ESM Import Errors**

If you get import errors, ensure your project supports ESM:

```json
// package.json
{
"type": "module"
}
```

## Testing Your Migration

1. **Run your test suite** to catch breaking changes
2. **Check error handling** - verify form validation still works
3. **Test field rendering** - ensure all field types display correctly
4. **Validate TypeScript** - run `tsc --noEmit` to check types

## Need Help?

- Check the [v1 documentation](https://json-schema-form.vercel.app/)
- Review the [changelog](CHANGELOG.md) for detailed changes
- Open an issue on [GitHub](https://github.com/remoteoss/json-schema-form/issues)

## Rollback Plan

If you encounter issues, you can temporarily rollback:

```bash
npm install @remoteoss/json-schema-form@^0.12.0
```

This gives you time to properly migrate while keeping your application functional.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ Check the 🕹️ **[JSF Playground](https://json-schema-form.vercel.app/?path=/

Read [CONTRIBUTING](CONTRIBUTING.md) to get started.

We are working on the [next version v1.0](/next). A rewrite in TypeScript with major bugfixes and missing features. It aims to support the latest JSON Schema dialect 2020-12.
## Migrating

If you're using `v0` and wish to migrate to `v1`, read [MIGRATING](MIGRATING.md) to get started.

_Backed by [Remote.com](https://remote.com/)_
File renamed without changes.
Loading