-
-
Notifications
You must be signed in to change notification settings - Fork 818
Support for ajv-formats in ui.json_editor
#4749
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: 3.0
Are you sure you want to change the base?
Conversation
@evnchn, hi, this works well, thanks! |
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 |
Yeah I can't get a working ESM from NPM either. 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. |
### 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.
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. |
I think https://esm.sh may be better in this regard |
### 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.
Surprising. Check this out ![]() Notice how there's |
This PR fix #4748 by introducing ajv-formats such that
'format': 'uuid'
and the likes can be supported inui.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:
Before the PR:
After the PR:
To-do items:
npm.py
andnpm.json
npm.py
andnpm.json
...