From 455ad55db9a72654ad8c8b6d20c54ddae20136ca Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Tue, 24 Sep 2024 10:58:26 +0200
Subject: [PATCH] feat: the vanilla constructor is changed from `new
 JSONEditor(...)` to `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                            | 20 +++++------
 README.md                                    | 22 ++++++------
 examples/browser/basic_usage.html            |  4 +--
 examples/browser/custom_theme_color.html     |  4 +--
 examples/browser/custom_value_renderer.html  |  4 +--
 examples/browser/json_schema_validation.html |  4 +--
 examples/browser/toggle_options.html         |  4 +--
 rollup.config.vanilla-library.js             |  2 +-
 src/lib/index-vanilla.ts                     | 36 ++++++++++++++++++++
 src/lib/index.ts                             |  4 ++-
 tools/develop-vanilla.html                   |  6 ++--
 tools/test-shadow-dom.html                   |  4 +--
 12 files changed, 76 insertions(+), 38 deletions(-)
 create mode 100644 src/lib/index-vanilla.ts

diff --git a/README-VANILLA.md b/README-VANILLA.md
index a4467d14..83e9cd48 100644
--- a/README-VANILLA.md
+++ b/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,7 +107,7 @@ 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)
@@ -115,7 +115,7 @@ const JSONEditorReact: React.FC<JSONEditorPropsOptional> = (props) => {
 
   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: {}
     })
diff --git a/README.md b/README.md
index 2c7dab39..bcf1aba1 100644
--- a/README.md
+++ b/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
diff --git a/examples/browser/basic_usage.html b/examples/browser/basic_usage.html
index 795d2744..ea0bd4ba 100644
--- a/examples/browser/basic_usage.html
+++ b/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')
       })
 
diff --git a/examples/browser/custom_theme_color.html b/examples/browser/custom_theme_color.html
index 68cfe8fd..cafdf569 100644
--- a/examples/browser/custom_theme_color.html
+++ b/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: {
diff --git a/examples/browser/custom_value_renderer.html b/examples/browser/custom_value_renderer.html
index 59f51a5b..4cdb7161 100644
--- a/examples/browser/custom_value_renderer.html
+++ b/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,
diff --git a/examples/browser/json_schema_validation.html b/examples/browser/json_schema_validation.html
index 7f3953d3..077b66e2 100644
--- a/examples/browser/json_schema_validation.html
+++ b/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,
diff --git a/examples/browser/toggle_options.html b/examples/browser/toggle_options.html
index c88b253d..5c0e4338 100644
--- a/examples/browser/toggle_options.html
+++ b/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
diff --git a/rollup.config.vanilla-library.js b/rollup.config.vanilla-library.js
index 2b1e2cf8..862776e2 100644
--- a/rollup.config.vanilla-library.js
+++ b/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: [
     {
diff --git a/src/lib/index-vanilla.ts b/src/lib/index-vanilla.ts
new file mode 100644
index 00000000..d686e981
--- /dev/null
+++ b/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 })
+}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 3d6a647a..4a49c2f0 100644
--- a/src/lib/index.ts
+++ b/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'
diff --git a/tools/develop-vanilla.html b/tools/develop-vanilla.html
index 3295bb40..19c9ec65 100644
--- a/tools/develop-vanilla.html
+++ b/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: {}
         })
diff --git a/tools/test-shadow-dom.html b/tools/test-shadow-dom.html
index b6287f0a..213f2615 100644
--- a/tools/test-shadow-dom.html
+++ b/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: {