Skip to content

Conversation

evnchn
Copy link
Collaborator

@evnchn evnchn commented May 15, 2025

This PR fix #4748 by introducing ajv-formats such that 'format': 'uuid' and the likes can be supported in ui.json_editor(..., schema=schema)

@phnmn kindly check if this fixes what you are trying to do, which I think it does. You can use this new code in a pinch before we decide if this is a worthy addition and finalize this PR.

Test script:

from nicegui import ui

schema = {
    'type': 'object',
    'properties': {
        'id': {
            'type': 'integer',
        },
        'uuid': {
            'type': 'string',
            'format': 'uuid',  # troublesome line
        },
        'name': {
            'type': 'string',
        },
        'price': {
            'type': 'number',
            'exclusiveMinimum': 0,
        },
    },
    'required': ['id', 'name', 'price', 'uuid'],
}
data = {
    'id': 42,
    'uuid': '123e4567-e89b-12d3-a456-426614174000',
    'name': 'Banana',
    'price': 15.0,
}
ui.json_editor({'content': {'json': data}}, schema=schema)

ui.run()

Before the PR:

{41AD2F12-2231-45B0-B396-0BC568C642DA}

After the PR:

{F0085D14-B88C-47C9-9DE5-1716A117CE8F} {2C28517E-FF6A-41B4-B2C2-B92CA479CAE3}

To-do items:

  • I can't figure out how best to integrate this with npm.py and npm.json
    • I get import errors.
    • Also it will occupy "index" in importmap, which hardly sounds like a good idea
    • Then, we can get rid of the access to jsdelivr.net.
    • @falkoschindler this I think you are more proficient in npm.py and npm.json...

@evnchn evnchn added feature Type/scope: New feature or enhancement ⚪️ minor Priority: Low impact, nice-to-have labels May 15, 2025
@phnmn
Copy link

phnmn commented May 15, 2025

@evnchn, hi, this works well, thanks!

@falkoschindler
Copy link
Contributor

Hm, I can't manage to get an ESM from registry.npmjs.org. Maybe we would need to switch to jsDelivr which can generate it on the fly with +esm.
Should we postpone this PR until we sort out the other NPM-related PRs?

@falkoschindler falkoschindler added the analysis Status: Requires team/community input label May 20, 2025
@evnchn
Copy link
Collaborator Author

evnchn commented May 20, 2025

Yeah I can't get a working ESM from NPM either.

Meanwhile I'm thinking if it is possible that we download from jsdelivr?

@falkoschindler
Copy link
Contributor

Meanwhile I'm thinking if it is possible that we download from jsdelivr?

That's what I'm thinking as well. But maybe that's a good reason to wait for 3.0 when we need to fetch new packages anyway.

@falkoschindler falkoschindler added this to the 3.0 milestone Jul 8, 2025
@falkoschindler falkoschindler changed the base branch from main to 3.0 August 6, 2025 08:40
falkoschindler added a commit that referenced this pull request Aug 6, 2025
### Motivation

In PR #4749 we couldn't get an ESM for ajv-formats from
registry.npmjs.org. So we decided to switch to Jsdelivr.

### Implementation

This PR re-implements parts of npm.py to work with Jsdelivr. The special
case for TailwindCSS could be removed.

### Progress

- [x] I chose a meaningful title that completes the sentence: "If
applied, this PR will..."
- [x] The implementation is complete.
- [x] Pytests are not necessary.
- [x] Documentation is not necessary.
@falkoschindler
Copy link
Contributor

After merging PR #5015 I tried adding ajv-formats to package.json and npm.json. But can't get it to work, mainly because ajv-formats depends on ajv and it somehow needs to get bundled first.

@evnchn Do you have an idea how to proceed?

Since this particular PR isn't necessarily needed for 3.0, I'm moving it to the milestone 3.x.

@falkoschindler falkoschindler modified the milestones: 3.0, 3.x Aug 6, 2025
@evnchn
Copy link
Collaborator Author

evnchn commented Aug 7, 2025

I think https://esm.sh may be better in this regard

falkoschindler added a commit that referenced this pull request Aug 14, 2025
### Motivation

There are several problems with the existing dependency management via
npm.json and npm.py.

**No control over importmap key**

Example: Newer Three.js versions come with three.module.js which points
to three.core.js. We can declare both files as a dependency, but they
use the same key "three" in the importmap. A similar problem came up in
#4163.

**"Manual" code modifications needed**

If a file like three.module.js references `./three.core.js`, we have to
replace the relative link because the file three.core.js isn't found at
this relative URL. Similarly there is an import of
`../utils/BufferGeometryUtils.js` in Three.js' GLTFLoader which we need
to replace with `BufferGeometryUtils`. These corrections happen in
npm.py.

**Complex dependencies hard or impossible to integrate**

There is an extra script at scripts/codemirror/bundle.bash to integrate
CodeMirror. And we wanted to integrate ajv-formats for `ui.json_editor`
(https://cdn.jsdelivr.net/npm/[email protected]/+esm), but it includes
references to e.g. "/npm/[email protected]/+esm" which don't work in a local
NiceGUI app (see #4749).

### Implementation

For this PR I decided to move modules with dependencies into separate
directories (e.g. nicegui/elements/scene/) instead of holding all
dependencies in one giant lib/ directory. This includes codemirror,
scene, aggrid, joystick, json_editor, plotly, echarts, leaflet and
mermaid.

Each of these subdirectories contains an independent package.json,
bundler configuration (rollup or vite), src/ directory with an index.js,
a Git-ignored node-modules/ directory, and a generated dist/ directory
with the resulting (sometimes chunked) bundle. This way we can configure
the build individually for each UI element and don't have to find a
one-fits-all solution. Furthermore, we can rely on standard NPM tools
without the need for our own custom JSON format and Python scripts for
downloading and extracting packages. Now the build process is 1. `npm
install` and 2. `npm run build`.

For registering the module in NiceGUI, I introduced a new `esm`
parameter when subclassing an `Element`, e.g.:
```py
class JsonEditor(Element, component='json_editor.js', esm={'nicegui-json-editor': 'dist'}):
    ...
```
This defines an entry to the importmap named "nicegui-json-editor"
pointing to the relative directory dist/. This replaces the definition
of individual `dependencies=[...]`, which we will probably deprecate.

### Progress

The PR is still work in progress. The change has quite some implications
that still need to be implemented.

- [x] I chose a meaningful title that completes the sentence: "If
applied, this PR will..."
- [x] The implementation is complete.
    - [x] remove deprecated parameters from `Element.__init_subclass__`
    - [x] create custom package.jsons per UI element
- [x] create package.json for NiceGUI's core dependencies (Vue, Quasar,
Tailwind)
    - [x] remove npm.json/npm.py
- [x] update examples for custom components (number_checker,
signature_pad)
    - [x] update gitattributes
    - [x] generate DEPENDENCIES.md?
    - [x] what about minification and maps?
- [x] Pytests are not necessary.
- [x] Documentation has been updated.
@evnchn
Copy link
Collaborator Author

evnchn commented Sep 13, 2025

Surprising. ajv-formats does indeed need ajv.

Check this out

image

Notice how there's import a from"/npm/[email protected]/+esm";import t from"/npm/[email protected]/dist/compile/codegen/+esm";. So jsdelivr has been including ajv for us for all this time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
analysis Status: Requires team/community input feature Type/scope: New feature or enhancement ⚪️ minor Priority: Low impact, nice-to-have
Projects
None yet
Development

Successfully merging this pull request may close these issues.

support in JSONEditor schema validations 'format' properties
3 participants