feat: the vanilla constructor is changed from new JSONEditor(...) t…

…o `createJSONEditor(...)`

BREAKING CHANGE:
The vanilla editor needs to be instantiated using `createJSONEditor(...)` instead
of `new JSONEditor(...)` in preparation for the upgrade to Svelte 5.

README-VANILLA.md

@@ -38,17 +38,17 @@ If you have a setup for your project with a bundler (like Vite, Rollup, or Webpa
 
 ```ts
 // for use in a React, Vue, or Angular project
-import { JSONEditor } from 'vanilla-jsoneditor'
+import { createJSONEditor } from 'vanilla-jsoneditor'
 ```
 
 If you want to use the library straight in the browser, use the provided standalone ES bundle:
 
 ```ts
 // for use directly in the browser
-import { JSONEditor } from 'vanilla-jsoneditor/standalone.js'
+import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js'
 ```
 
-The standalone bundle contains all dependencies of `vanilla-jsoneditor`, for example `lodash-es` and `Ajv`. If you use some of these dependencies in your project too, it means that they will be bundled twice in your web application, leading to a needlessly large application size. In general, it is preferable to use the default `import { JSONEditor } from 'vanilla-jsoneditor'` so dependencies can be reused.
+The standalone bundle contains all dependencies of `vanilla-jsoneditor`, for example `lodash-es` and `Ajv`. If you use some of these dependencies in your project too, it means that they will be bundled twice in your web application, leading to a needlessly large application size. In general, it is preferable to use the default `import { createJSONEditor } from 'vanilla-jsoneditor'` so dependencies can be reused.
 
 ## Use (Browser example loading the ES module)
 
@@ -62,11 +62,11 @@ The standalone bundle contains all dependencies of `vanilla-jsoneditor`, for exa
     <div id="jsoneditor"></div>
 
     <script type="module">
-      import { JSONEditor } from 'vanilla-jsoneditor/standalone.js'
+      import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js'
 
       // Or use it through a CDN (not recommended for use in production):
-      // import { JSONEditor } from 'https://unpkg.com/vanilla-jsoneditor/index.js'
-      // import { JSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/index.js'
+      // import { createJSONEditor } from 'https://unpkg.com/vanilla-jsoneditor/index.js'
+      // import { createJSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/index.js'
 
       let content = {
         text: undefined,
@@ -75,7 +75,7 @@ The standalone bundle contains all dependencies of `vanilla-jsoneditor`, for exa
         }
       }
 
-      const editor = new JSONEditor({
+      const editor = createJSONEditor({
         target: document.getElementById('jsoneditor'),
         props: {
           content,
@@ -107,15 +107,15 @@ Depending on whether you are using JavaScript of TypeScript, create either a JSX
 // JSONEditorReact.tsx
 //
 import { useEffect, useRef } from 'react'
-import { JSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor'
+import { createJSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor'
 
 const JSONEditorReact: React.FC<JSONEditorPropsOptional> = (props) => {
   const refContainer = useRef<HTMLDivElement>(null)
   const refEditor = useRef<JSONEditor | null>(null)
 
   useEffect(() => {
     // create editor
-    refEditor.current = new JSONEditor({
+    refEditor.current = createJSONEditor({
       target: refContainer.current!,
       props: {}
     })
@@ -157,7 +157,7 @@ const JSONEditorReact = (props) => {
 
   useEffect(() => {
     // create editor
-    refEditor.current = new JSONEditor({
+    refEditor.current = createJSONEditor({
       target: refContainer.current,
       props: {}
     })

README.md

@@ -116,10 +116,10 @@ If you want to use the library straight in the browser, use the provided standal
 
 ```ts
 // for use directly in the browser
-import { JSONEditor } from 'vanilla-jsoneditor/standalone.js'
+import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js'
 ```
 
-The standalone bundle contains all dependencies of `vanilla-jsoneditor`, for example `lodash-es` and `Ajv`. If you use some of these dependencies in your project too, it means that they will be bundled twice in your web application, leading to a needlessly large application size. In general, it is preferable to use the default `import { JSONEditor } from 'vanilla-jsoneditor'` so dependencies can be reused.
+The standalone bundle contains all dependencies of `vanilla-jsoneditor`, for example `lodash-es` and `Ajv`. If you use some of these dependencies in your project too, it means that they will be bundled twice in your web application, leading to a needlessly large application size. In general, it is preferable to use the default `import { createJSONEditor } from 'vanilla-jsoneditor'` instead of the standalone bundle so dependencies can be reused.
 
 Browser example loading the standalone ES module:
 
@@ -133,11 +133,11 @@ Browser example loading the standalone ES module:
     <div id="jsoneditor"></div>
 
     <script type="module">
-      import { JSONEditor } from 'vanilla-jsoneditor/standalone.js'
+      import { createJSONEditor } from 'vanilla-jsoneditor/standalone.js'
 
       // Or use it through a CDN (not recommended for use in production):
-      // import { JSONEditor } from 'https://unpkg.com/vanilla-jsoneditor/standalone.js'
-      // import { JSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/standalone.js'
+      // import { createJSONEditor } from 'https://unpkg.com/vanilla-jsoneditor/standalone.js'
+      // import { createJSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor/standalone.js'
 
       let content = {
         text: undefined,
@@ -146,7 +146,7 @@ Browser example loading the standalone ES module:
         }
       }
 
-      const editor = new JSONEditor({
+      const editor = createJSONEditor({
         target: document.getElementById('jsoneditor'),
         props: {
           content,
@@ -196,11 +196,11 @@ Svelte component:
 JavasScript class:
 
 ```js
-import { JSONEditor } from 'vanilla-jsoneditor' // or 'vanilla-jsoneditor/standalone.js'
+import { createJSONEditor } from 'vanilla-jsoneditor' // or 'vanilla-jsoneditor/standalone.js'
 
 const content = { text: '[1,2,3]' }
 
-const editor = new JSONEditor({
+const editor = createJSONEditor({
   target: document.getElementById('jsoneditor'),
   props: {
     content,
@@ -214,7 +214,7 @@ const editor = new JSONEditor({
 
 ### properties
 
-Properties such as `content` and `mode` are either passed as attributes to the Svelte component, like `<JSONEditor {content} {mode} />`, or via the `props` in case of the vanilla JS constructor: `new JSONEditor({ target, props: { content, mode }`.
+Properties such as `content` and `mode` are either passed as attributes to the Svelte component, like `<JSONEditor {content} {mode} />`, or via the `props` in case of the vanilla JS factory function: `createJSONEditor({ target, props: { content, mode }`.
 
 #### content
 
@@ -662,10 +662,10 @@ Methods can be called on a JSONEditor instance. In Svelte, you can create a refe
 <JSONEditor bind:this={editor} />
 ```
 
-In the vanilla editor, the constructor returns an instance:
+In the vanilla editor, a factory function is used to create an editor instance:
 
 ```js
-const editor = new JSONEditor({ ... })
+const editor = createJSONEditor({ ... })
 
 function logContents() {
   const content = editor.get() // using a method

examples/browser/basic_usage.html

@@ -20,10 +20,10 @@
     <div id="jsoneditor"></div>
 
     <script type="module">
-      import { JSONEditor } from '../../package-vanilla/standalone.js'
+      import { createJSONEditor } from '../../package-vanilla/standalone.js'
 
       // create the editor
-      const editor = new JSONEditor({
+      const editor = createJSONEditor({
         target: document.getElementById('jsoneditor')
       })
 

examples/browser/custom_theme_color.html

@@ -27,9 +27,9 @@ <h1>JSONEditor with a custom theme color and large font</h1>
     <div id="my-jsoneditor"></div>
 
     <script type="module">
-      import { JSONEditor } from '../../package-vanilla/standalone.js'
+      import { createJSONEditor } from '../../package-vanilla/standalone.js'
 
-      const editor = new JSONEditor({
+      const editor = createJSONEditor({
         target: document.getElementById('my-jsoneditor'),
         props: {
           content: {

examples/browser/custom_value_renderer.html

@@ -51,7 +51,7 @@ <h1>Custom value renderer (password, enum, action)</h1>
     <div id="jsoneditor"></div>
 
     <script type="module">
-      import { JSONEditor, renderValue, EnumValue } from '../../package-vanilla/standalone.js'
+      import { createJSONEditor, renderValue, EnumValue } from '../../package-vanilla/standalone.js'
       import { ReadonlyPasswordAction } from './components/ReadonlyPasswordAction.js'
       import { EvaluatorAction } from './components/EvaluatorAction.js'
 
@@ -111,7 +111,7 @@ <h1>Custom value renderer (password, enum, action)</h1>
       }
 
       // create the editor
-      const editor = new JSONEditor({
+      const editor = createJSONEditor({
         target: document.getElementById('jsoneditor'),
         props: {
           content,

examples/browser/json_schema_validation.html

@@ -36,7 +36,7 @@ <h1>JSON schema validation</h1>
     <div id="jsoneditor"></div>
 
     <script type="module">
-      import { JSONEditor, createAjvValidator } from '../../package-vanilla/standalone.js'
+      import { createJSONEditor, createAjvValidator } from '../../package-vanilla/standalone.js'
 
       const schema = {
         title: 'Employee',
@@ -122,7 +122,7 @@ <h1>JSON schema validation</h1>
 
       // create the editor
       const target = document.getElementById('jsoneditor')
-      const editor = new JSONEditor({
+      const editor = createJSONEditor({
         target: document.getElementById('jsoneditor'),
         props: {
           content,

examples/browser/toggle_options.html

@@ -28,7 +28,7 @@
     <div id="jsoneditor"></div>
 
     <script type="module">
-      import { JSONEditor } from '../../package-vanilla/standalone.js'
+      import { createJSONEditor } from '../../package-vanilla/standalone.js'
 
       const content = {
         text: undefined,
@@ -45,7 +45,7 @@
       }
 
       // create the editor
-      const editor = new JSONEditor({
+      const editor = createJSONEditor({
         target: document.getElementById('jsoneditor'),
         props: {
           content

rollup.config.vanilla-library.js

@@ -14,7 +14,7 @@ const packageFolder = 'package-vanilla'
 const file = path.join(packageFolder, 'index.js')
 
 export default {
-  input: 'src/lib/index.ts',
+  input: 'src/lib/index-vanilla.ts',
   external: getVanillaDependencies(),
   output: [
     {

src/lib/index-vanilla.ts

@@ -0,0 +1,36 @@
+import JSONEditorComponent from './components/JSONEditor.svelte'
+import type { JSONEditorPropsOptional } from '$lib/types'
+
+// Note: index.ts exports `JSONEditor`, but we will override this on purpose
+//  since we cannot use it in the vanilla environment starting in Svelte 5.
+export * from './index'
+
+interface CreateJSONEditorProps {
+  target: HTMLDivElement
+  props: JSONEditorPropsOptional
+}
+
+export function createJSONEditor({ target, props }: CreateJSONEditorProps) {
+  // TODO: in Svelte 5, this needs to be changed to:
+  //
+  //     export function createJSONEditor({ target, props }: Parameters<typeof mount>[1]) {
+  //       return mount(JSONEditor, { target, props })
+  //     }
+  //
+  return new JSONEditorComponent({ target, props })
+}
+
+/**
+ * The constructor "new JSONEditor(...)" is deprecated. Please use "createJSONEditor(...)" instead.
+ * @constructor
+ * @deprecated
+ */
+export function JSONEditor({ target, props }: CreateJSONEditorProps) {
+  // TODO: deprecation warning since v1. Remove some day
+  console.warn(
+    'WARNING: the constructor "new JSONEditor(...)" is deprecated since v1. ' +
+      'Please use "createJSONEditor(...)" instead.'
+  )
+
+  return createJSONEditor({ target, props })
+}

src/lib/index.ts

@@ -8,7 +8,6 @@ import TimestampTag from './plugins/value/components/TimestampTag.svelte'
 
 // editor
 export { JSONEditor }
-export * from './types.js'
 
 // value plugins
 export { renderValue } from './plugins/value/renderValue.js'
@@ -87,5 +86,8 @@ export {
   isUrl
 } from './utils/typeUtils'
 
+// types
+export * from './types.js'
+
 // typeguards
 export * from './typeguards.js'

tools/develop-vanilla.html

@@ -108,7 +108,7 @@
 
     <script type="module">
       import {
-        JSONEditor,
+        createJSONEditor,
         jsonQueryLanguage,
         lodashQueryLanguage,
         jmespathQueryLanguage
@@ -195,7 +195,7 @@
         },
         queryLanguages: [jsonQueryLanguage, lodashQueryLanguage, jmespathQueryLanguage]
       }
-      const testEditor = new JSONEditor({ target, props })
+      const testEditor = createJSONEditor({ target, props })
 
       window.testEditor = testEditor // expose to window for debugging
 
@@ -409,7 +409,7 @@
           '_blank',
           `location=no,toolbar=no,menubar=no,status=no,directories=no,width=${1000},height=${600},left=${0},top=${0},editorWind=yes`
         )
-        window['popupEditor'] = new JSONEditor({
+        window['popupEditor'] = createJSONEditor({
           target: popupWindow.document.body,
           props: {}
         })

tools/test-shadow-dom.html

@@ -11,7 +11,7 @@
     />
 
     <script type="module">
-      import { JSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor@0.17.0/index.js'
+      import { createJSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor@0.17.0/index.js'
 
       class JSONEditorElement extends HTMLElement {
         constructor() {
@@ -31,7 +31,7 @@
           target.className = 'shadow-dom-editor'
           shadow.append(target)
 
-          const editor = new JSONEditor({
+          const editor = createJSONEditor({
             target,
             props: {
               content: {