diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..d10b177 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,7 @@ +module.exports = { + presets: [ + ['@babel/preset-env', { targets: { node: 'current' } }], + ['@babel/preset-react', {runtime: 'automatic',},], + ], + plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining'], +}; diff --git a/omero_forms/urls.py b/omero_forms/urls.py index 64aa8e6..ec23df0 100644 --- a/omero_forms/urls.py +++ b/omero_forms/urls.py @@ -1,68 +1,68 @@ -from django.conf.urls import url +from django.urls import re_path from . import views urlpatterns = [ # Designer App - url(r"^designer/$", views.designer, name="omeroforms_designer"), + re_path(r"^designer/$", views.designer, name="omeroforms_designer"), # API - url(r"^$", lambda x: None, name="omeroforms_base"), + re_path(r"^$", lambda x: None, name="omeroforms_base"), # List all forms - url(r"^list_forms/$", views.list_forms, name="omeroforms_list_forms"), + re_path(r"^list_forms/$", views.list_forms, name="omeroforms_list_forms"), # List the forms that are assigned to the user's active group that # apply to the object type - url( + re_path( r"^list_applicable_forms/(?P\w+)/$", views.list_applicable_forms, name="omeroforms_list_applicable_forms", ), # Get a form (latest version) - url(r"^get_form/(?P[\w ]+)/$", views.get_form, name="omeroforms_get_form"), + re_path(r"^get_form/(?P[\w ]+)/$", views.get_form, name="omeroforms_get_form"), # Get data for a form (latest version) for a certain object - url( + re_path( r"^get_form_data/" r"(?P[\w ]+)/(?P\w+)/(?P[\w ]+)/$", views.get_form_data, name="omeroforms_get_form_data", ), # Get assignments (restricted to those the user can unassign) - url( + re_path( r"get_form_assignments/$", views.get_form_assignments, name="omeroforms_get_form_assignments", ), # Get the entire history of a form including all data and the forms used # to enter that data - url( + re_path( r"^get_form_data_history/" r"(?P[\w ]+)/(?P\w+)/(?P[\w ]+)/$", views.get_form_data_history, name="omeroforms_get_form_data_history", ), # Get groups that the user can manage - url( + re_path( r"^get_managed_groups/$", views.get_managed_groups, name="omeroforms_get_managed_groups", ), # Lookup usernames by uid - url(r"^get_users/$", views.get_users, name="omeroforms_get_users"), + re_path(r"^get_users/$", views.get_users, name="omeroforms_get_users"), # Check form id ownership - url( + re_path( r"^get_formid_editable/(?P[\w ]+)/$", views.get_formid_editable, name="omeroforms_get_formid_editable", ), # Save a form version (potentially a new form) - url(r"^save_form/$", views.save_form, name="omeroforms_save_form"), + re_path(r"^save_form/$", views.save_form, name="omeroforms_save_form"), # Save data for a form - url( + re_path( r"^save_form_data/" r"(?P[\w ]+)/(?P\w+)/(?P[\w ]+)/$", views.save_form_data, name="omeroforms_save_form_data", ), # Save a form assignment - url( + re_path( r"^save_form_assignment/$", views.save_form_assignment, name="omeroforms_save_form_assignment", diff --git a/package.json b/package.json index 3408e6b..7464e79 100644 --- a/package.json +++ b/package.json @@ -3,33 +3,57 @@ "version": "1.1.0", "description": "", "main": "bundle.js", + "babel": { + "presets": [ + "react", + "env", + "@babel/preset-env", + "@babel/preset-react" + ] + }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "./node_modules/webpack/bin/webpack.js --progress" }, "author": "Douglas P.W. Russell", "license": "MIT", - "devDependencies": { - "babel-core": "^6.4.5", - "babel-loader": "^6.2.2", + "dependencies": { + "@babel/core": "^7.23.2", + "@babel/cli": "^7.23.0", + "babel-loader": "^7.0.0", + "@babel/plugin-proposal-class-properties": "^7.18.6", + "@babel/plugin-proposal-decorators": "^7.23.2", + "@babel/plugin-proposal-export-namespace-from": "^7.18.9", + "@babel/plugin-proposal-function-sent": "^7.22.5", + "@babel/plugin-proposal-json-strings": "^7.18.6", + "@babel/plugin-proposal-numeric-separator": "^7.18.6", + "@babel/plugin-proposal-throw-expressions": "^7.22.5", + "@babel/plugin-syntax-import-meta": "^7.10.4", "babel-plugin-transform-runtime": "^6.8.0", "babel-polyfill": "^6.5.0", - "babel-preset-es2015": "^6.3.13", - "babel-preset-react": "^6.3.13", - "babel-preset-stage-2": "^6.13.0", - "babel-runtime": "^6.5.0", + "@babel/preset-env": "^7.23.2", + "@babel/preset-react": "^7.22.15", + "@babel/runtime": "^7.23.2", + "codemirror": "^5.57.0", "css-loader": "^0.23.1", "file-loader": "^0.8.5", - "react": "^15.1.0", - "react-bootstrap": "^0.30.5", - "react-codemirror": "^0.2.6", - "react-dom": "^15.1.0", - "react-jsonschema-form": "^0.33.2", + "path": "^0.12.7", + "react": "^16.14.0", + "react-bootstrap": "^2.9.0", + "react-codemirror2": "^7.3.0", + "react-dom": "^16.14.0", + "@rjsf/core": "^5.13.4", + "@rjsf/utils": "^5.13.4", + "@rjsf/validator-ajv8": "^5.13.4", + "react-scripts": "^5.0.1", "react-select": "^1.0.0-rc", - "react-tooltip": "^2.0.3", + "react-tooltip": "^4.5.1", "style-loader": "^0.13.0", + "terser-webpack-plugin":"^4.2.3", "url-loader": "^0.5.7", - "webpack": "^1.12.13", - "whatwg-fetch": "^1.0.0" + "webpack": "^4.47.0", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.15.1", + "whatwg-fetch": "^3.6.19" } } diff --git a/src/Forms.jsx b/src/Forms.jsx index 8e80f44..b701808 100644 --- a/src/Forms.jsx +++ b/src/Forms.jsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Select from 'react-select'; -import Form from "react-jsonschema-form"; +import Form from '@rjsf/core'; function compareFormData(d1, d2) { // No previous data diff --git a/src/History.jsx b/src/History.jsx index f271892..54bfc4d 100644 --- a/src/History.jsx +++ b/src/History.jsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Select from 'react-select'; -import Form from "react-jsonschema-form"; +import Form from '@rjsf/core'; const padDate = v => { return v < 10 ? '0' + v : v diff --git a/src/designer-editor.jsx b/src/designer-editor.jsx index cca0687..320a940 100644 --- a/src/designer-editor.jsx +++ b/src/designer-editor.jsx @@ -1,16 +1,16 @@ import React from 'react'; -import Codemirror from 'react-codemirror'; +import CodeMirror from 'react-codemirror2'; import Select from 'react-select'; import 'codemirror/mode/javascript/javascript'; -import { shouldRender } from 'react-jsonschema-form/lib/utils'; +import { shouldRender } from "@rjsf/core/lib/utils"; import defaultData from './designer-default'; const samples = {}; -import Form from 'react-jsonschema-form'; +import Form from '@rjsf/core'; import { Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock, Checkbox } from 'react-bootstrap' // Patching CodeMirror#componentWillReceiveProps so it's executed synchronously // Ref https://github.com/mozilla-services/react-jsonschema-form/issues/174 -Codemirror.prototype.componentWillReceiveProps = function (nextProps) { +CodeMirror.prototype.componentWillReceiveProps = function (nextProps) { if (this.codeMirror && nextProps.value !== undefined && this.codeMirror.getValue() != nextProps.value) { diff --git a/webpack.config.js b/webpack.config.js index 8938d48..a5dae30 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,6 @@ // webpack.config.js var webpack = require('webpack'); - +const TerserPlugin = require("terser-webpack-plugin"); var path = require('path'); module.exports = { @@ -10,65 +10,100 @@ module.exports = { 'designer': ['whatwg-fetch', './src/designer.jsx'], 'designer.min': ['whatwg-fetch', './src/designer.jsx'], }, + optimization: { + minimize: true, + minimizer: [new TerserPlugin()], + }, output: { - path: './omero_forms/static/forms/js', + path: __dirname + '/omero_forms/static/forms/js', filename: '[name].js', library: 'omeroforms' }, - plugins: [ - new webpack.optimize.UglifyJsPlugin({ - include: /\.min\.js$/, - minimize: true - }) - ], + plugins: [], module: { - loaders: [ + rules: [ { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/, - query: { + options: { plugins: ['transform-runtime'], - presets: ['react', 'es2015', 'stage-2'] + presets: ['@babel/react', '@babel/env'] } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, - query: { + options: { plugins: ['transform-runtime'], - presets: ['es2015', 'stage-2'] + presets: ['@babel/env'] } }, { test: /\.css$/, // Only .css files - loader: 'style-loader!css-loader' // Run both loaders + use: ['style-loader', 'css-loader'], // Run both loaders }, - { test: /\.png$/, - loader: "url-loader?limit=100000" + { + test: /\.png$/, + use: [ + { + loader: "url-loader", + options: { + limit: 100000, + }, + }, + ], }, // Bootstrap { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, - loader: 'url?limit=10000&mimetype=application/font-woff'}, + use: [ + { + loader: 'url-loader', + options: { + limit: 10000, + mimetype: 'application/font-woff', + }, + }, + ], + }, { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, - loader: 'url?limit=10000&mimetype=application/octet-stream' + use: [ + { + loader: 'url-loader', + options: { + limit: 10000, + mimetype: 'application/octet-stream', + }, + }, + ], }, { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, - loader: 'file' + use: [ + { + loader: 'file-loader', + }, + ], }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, - loader: 'url?limit=10000&mimetype=image/svg+xml' + use: [ + { + loader: 'url-loader', + options: { + limit: 10000, + mimetype: 'image/svg+xml', + }, + }, + ], } - ] }, resolve: { - extensions: ['', '.js', '.jsx', '.json'] + extensions: ['.js', '.jsx', '.json'] }, };